/* SXDCLOUD · KHO TEP SXD - giao dien hien dai (nap cho MOI trang Nextcloud qua Application::boot).
 * Chi ghi de LOP TRINH BAY: dung bien mau cua Nextcloud (--color-*) nen tu theo che do sang / toi va mau chu dao
 * cua theming; khong dung vao chuc nang. Go: xoa tep nay (hoac bo dong Util::addStyle trong Application.php). */

:root {
	--sxd-navy: #0b3b66;
	--sxd-ink: #071a2e;
	--sxd-teal: #0e9f9a;
	--sxd-sky: #38bdf8;
	--sxd-grad: linear-gradient(135deg, #0b3b66 0%, #0e6a8f 55%, #0e9f9a 100%);
	--sxd-glass: color-mix(in srgb, var(--color-main-background, #fff) 72%, transparent);
	--sxd-glass-strong: color-mix(in srgb, var(--color-main-background, #fff) 88%, transparent);
	--sxd-ring: color-mix(in srgb, var(--color-primary-element, #0b3b66) 30%, transparent);
	--sxd-shadow: 0 1px 2px rgba(7, 26, 46, .06), 0 12px 40px rgba(7, 26, 46, .16);
	--sxd-shadow-sm: 0 1px 2px rgba(7, 26, 46, .06), 0 4px 14px rgba(7, 26, 46, .08);
	--sxd-font: "Segoe UI Variable Text", "Segoe UI Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
	--body-container-radius: 20px;
	--body-container-margin: 10px;
	--border-radius-element: 10px;
}

body, input, button, select, textarea { font-family: var(--sxd-font) !important; }
body { -webkit-font-smoothing: antialiased; letter-spacing: -.003em; }

/* ---------------------------------------------------------------- THANH TREN (header) */
#header {
	background: linear-gradient(90deg, rgba(7, 26, 46, .55), rgba(11, 59, 102, .35)) !important;
	backdrop-filter: blur(18px) saturate(1.5);
	-webkit-backdrop-filter: blur(18px) saturate(1.5);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
#header #nextcloud { display: flex; align-items: center; gap: 10px; padding-inline-end: 14px; }
#header #nextcloud .logo { transition: transform .25s ease; }
#header #nextcloud:hover .logo { transform: scale(1.06); }
#header #nextcloud::after {
	content: "Sxdcloud";
	color: #fff; font-weight: 650; font-size: 16px; letter-spacing: .01em; white-space: nowrap;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}
@media (max-width: 1024px) { #header #nextcloud::after { display: none; } }

/* o tim kiem dang vien thuoc (pill) mo kinh */
.unified-search-input__field, .unified-search-input {
	border-radius: 999px !important;
}
.unified-search-input__field {
	background: rgba(255, 255, 255, .12) !important;
	border: 1px solid rgba(255, 255, 255, .18) !important;
	transition: background .2s, border-color .2s, box-shadow .2s;
}
.unified-search-input__field:hover { background: rgba(255, 255, 255, .18) !important; }
.unified-search-input__field:focus-within {
	background: rgba(255, 255, 255, .22) !important;
	border-color: rgba(255, 255, 255, .45) !important;
	box-shadow: 0 0 0 4px rgba(56, 189, 248, .25);
}

/* bieu tuong ung dung + nut thanh tren */
.app-menu-entry, .header-menu__trigger { border-radius: 12px !important; transition: background .18s; }
.app-menu-entry:hover, .header-menu__trigger:hover { background: rgba(255, 255, 255, .12) !important; }
.account-menu__avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 0 4px 12px rgba(0, 0, 0, .25); border-radius: 50%; }

/* ---------------------------------------------------------------- KHUNG NOI DUNG (the noi) */
#content, #content-vue {
	border-radius: var(--body-container-radius) !important;
	box-shadow: var(--sxd-shadow);
	overflow: hidden;
}

/* ---------------------------------------------------------------- THANH DIEU HUONG TRAI */
.app-navigation {
	background: var(--sxd-glass) !important;
	backdrop-filter: blur(24px) saturate(1.3);
	-webkit-backdrop-filter: blur(24px) saturate(1.3);
	border-inline-end: 1px solid var(--color-border, rgba(0, 0, 0, .06)) !important;
}
.app-navigation-entry {
	border-radius: 12px !important;
	transition: background .18s ease, transform .18s ease;
}
.app-navigation-entry:not(.active):hover { transform: translateX(2px); }
.app-navigation-entry.active {
	background: color-mix(in srgb, var(--color-primary-element, #0b3b66) 14%, transparent) !important;
	box-shadow: inset 3px 0 0 var(--color-primary-element, #0b3b66);
}
.app-navigation-entry.active .app-navigation-entry__name,
.app-navigation-entry.active .app-navigation-entry-icon { color: var(--color-primary-element, #0b3b66) !important; font-weight: 600; }
.app-navigation-entry.active .app-navigation-entry-link,
.app-navigation-entry.active .app-navigation-entry-button { background: transparent !important; color: inherit !important; }
.app-navigation-search__input .input-field__input,
.app-navigation-search input { border-radius: 999px !important; }

/* ---------------------------------------------------------------- DANH SACH TEP */
.files-list__header {
	background: var(--sxd-glass-strong);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.files-list__breadcrumbs .vue-crumb > a, .files-list__breadcrumbs .vue-crumb button { border-radius: 999px !important; }

/* the "goi y / gan day" phia tren danh sach */
.files-list__header-recommendations .recommendation-item,
.files-list__header-recommendations .recommendation {
	border-radius: 14px !important;
	transition: background .18s, box-shadow .18s, transform .18s;
}
.files-list__header-recommendations .recommendation-item:hover,
.files-list__header-recommendations .recommendation:hover {
	background: var(--color-main-background, #fff) !important;
	box-shadow: var(--sxd-shadow-sm);
	transform: translateY(-1px);
}

.files-list__thead { font-size: 12.5px; text-transform: none; letter-spacing: .02em; }
.files-list__row {
	border-radius: 12px;
	transition: background .14s ease, box-shadow .14s ease;
}
.files-list__row:hover, .files-list__row--hover {
	box-shadow: inset 0 0 0 1px var(--color-border, rgba(0, 0, 0, .06));
}
.files-list__row--active, .files-list__row[data-cy-files-list-row-selected], .files-list__row--picked {
	background: color-mix(in srgb, var(--color-primary-element, #0b3b66) 10%, transparent) !important;
	box-shadow: inset 0 0 0 1px var(--sxd-ring);
}
.files-list__row-icon .folder-icon, .files-list__row-icon svg.folder-icon { filter: drop-shadow(0 2px 4px rgba(11, 59, 102, .18)); }
.files-list__row-name-text { font-weight: 500; }
.files-list__row-name-ext { opacity: .55; font-weight: 400; }

/* che do luoi: the bo tron noi len */
.files-list--grid .files-list__row { border-radius: 16px; }
.files-list--grid .files-list__row:hover { background: var(--color-main-background, #fff) !important; box-shadow: var(--sxd-shadow-sm); }
.files-list--grid .files-list__row-icon { border-radius: 12px; overflow: hidden; }

/* ---------------------------------------------------------------- NUT */
.button-vue { border-radius: 999px !important; transition: transform .12s ease, box-shadow .18s ease, filter .18s; }
.button-vue:active:not(:disabled) { transform: scale(.97); }
.button-vue--vue-primary:not(:disabled) {
	background: var(--sxd-grad) !important;
	border: 0 !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(14, 106, 143, .32);
}
.button-vue--vue-primary:not(:disabled):hover { filter: brightness(1.08); box-shadow: 0 8px 22px rgba(14, 106, 143, .42); }

/* o nhap */
.input-field__input, input[type="text"], input[type="search"], input[type="password"], input[type="email"], select, textarea {
	border-radius: var(--border-radius-element) !important;
}
.input-field__input:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	box-shadow: 0 0 0 4px var(--sxd-ring) !important;
}

/* ---------------------------------------------------------------- HOP THOAI / MENU / THANH BEN */
.modal-container, .dialog__modal .modal-container { border-radius: 20px !important; box-shadow: 0 24px 64px rgba(7, 26, 46, .35) !important; }
.modal-mask { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(7, 26, 46, .45) !important; }
.v-popper__inner, .popover__inner, .action-item__popper .v-popper__inner {
	border-radius: 14px !important;
	box-shadow: 0 14px 40px rgba(7, 26, 46, .2) !important;
	border: 1px solid var(--color-border, rgba(0, 0, 0, .06)) !important;
}
.action-button, .action-link, .action-router { border-radius: 10px !important; }
.app-sidebar { box-shadow: -10px 0 40px rgba(7, 26, 46, .10); }
.app-sidebar-header__figure { border-radius: 14px; }
.toastify.dialogs { border-radius: 14px !important; box-shadow: var(--sxd-shadow) !important; }

/* thanh cuon manh */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-main-text, #000) 22%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-main-text, #000) 20%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------- TRANG DANG NHAP / KHACH (body-login, body-public) */
#body-login .guest-box, #body-login .login-box, #body-login .wrapper > main > .guest-box, .guest-box {
	border-radius: 24px !important;
	background: var(--sxd-glass-strong) !important;
	backdrop-filter: blur(22px) saturate(1.4);
	-webkit-backdrop-filter: blur(22px) saturate(1.4);
	box-shadow: 0 24px 70px rgba(7, 26, 46, .35) !important;
	border: 1px solid rgba(255, 255, 255, .35);
}
#body-login footer .info, #body-login footer a { color: rgba(255, 255, 255, .85) !important; text-shadow: 0 1px 6px rgba(0, 0, 0, .3); }

/* trang chia se cong khai */
#body-public #header { border-radius: 0; }

/* ---------------------------------------------------------------- GIAM CHUYEN DONG theo cai dat he dieu hanh */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}