*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:root { --color-primary-dark: var(--blue-blue-#1, #1e40af); --color-primary: var(--blue-blue-#2, #2563eb); --color-primary-hover: var(--blue-blue-#1, #1e40af); --color-primary-light: var(--blue-blue-#5, #dbeaff); --color-white: var(--grey-color-white, #ffffff); --color-gray-50: var(--grey-color-gray-50, #f9fafb); --color-gray-200: var(--grey-color-gray-200, #e5e7eb); --color-gray-300: var(--grey-color-gray-300, #d1d5db); --color-gray-400: var(--grey-color-gray-400, #9ca3af); --color-gray-500: var(--grey-color-gray-500, #6b7280); --color-gray-600: var(--grey-color-gray-600, #4b5563); --color-gray-700: var(--grey-color-gray-700, #374151); --color-gray-800: var(--grey-color-gray-800, #1f2937); --color-gray-900: var(--grey-color-gray-900, #111827); --color-black: var(--grey-color-black, #000000); --color-success: var(--green-300, #1bca55); --color-success-dark: var(--green-700, #127752); --color-success-light: var(--green-100, #98d4ac); --color-danger: var(--danger-danger, #dc392d); --color-danger-dark: var(--danger-danger-dark, #c11e1e); --color-danger-light: var(--danger-danger-light, #fee2e2); --color-warning: var(--alert-alert, #b36206); --color-warning-dark: var(--alert-alert-dark, #904c00); --color-warning-light: var(--alert-alert-light, #ffcd81); --color-info: var(--blue-blue-#3, #3b82f6); --color-info-light: var(--blue-blue-#5, #dbeaff); --color-info-dark: var(--blue-blue-#1, #1e40af); --bg-body: var(----surface-grey, var(--color-gray-50)); --bg-sidebar: var(--sidebar---surface, var(--color-gray-800)); --bg-card: var(----surface, var(--color-white)); --text-primary: var(----surface-primary-text, var(--color-gray-900)); --text-secondary: var(----surface-secondary-text, var(--grey-color-dark-gray, #434343)); --text-muted: var(----surface-tertiary-text, var(--color-gray-500)); --text-light: var(--sidebar---surface-text, var(--color-white)); --border-color: var(----surface-border, var(--color-gray-200)); --border-color-dark: var(--ui-text-fields---surface-border, var(--color-gray-300)); --font-sans: var(----primary-font, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; --text-xs: var(--typography-headings---text-xs, 12px); --text-sm: var(--typography-headings---text-sm, 14px); --text-base: var(--typography-headings---ext-base, 16px); --text-lg: var(--typography-headings---text-lg, 18px); --text-xl: var(--typography-headings---text-xl, 20px); --text-2xl: var(--typography-headings---text-2xl, 24px); --text-3xl: var(--typography-headings---text-3xl, 30px); --text-4xl: var(--typography-headings---text-4xl, 36px); --font-thin: 100; --font-extralight: 200; --font-light: 300; --font-normal: var(----normal, 400); --font-medium: var(----medium, 500); --font-semibold: 600; --font-bold: var(----bold, 700); --font-extrabold: 800; --font-black: 900; --spacing-1: var(--1x, 4px); --spacing-2: var(--2x, 8px); --spacing-3: var(--3x, 12px); --spacing-4: var(--4x, 16px); --spacing-5: var(--5x, 20px); --spacing-6: var(--6x, 24px); --spacing-7: var(--7x, 28px); --spacing-8: var(--8x, 32px); --spacing-9: var(--9x, 36px); --spacing-10: var(--10x, 40px); --spacing-12: var(--12x, 48px); --rounded-none: 0; --rounded-sm: 2px; --rounded: var(--ui---border-radius, 4px); --rounded-md: 8px; --rounded-lg: 12px; --rounded-xl: 16px; --rounded-full: 9999px; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --transition-fast: 150ms; --transition-normal: 300ms; --transition-slow: 500ms; --z-0: 0; --z-10: 10; --z-20: 20; --z-30: 30; --z-40: 40; --z-50: 50; --z-auto: auto; --sidebar-width: 16rem; --sidebar-collapsed-width: 4rem; --comments-width: 20rem; --header-height: 4rem; --footer-height: 3rem; --container-max-width: 1280px; --button-height-sm: var(--ui-button-height---small, 28px); --button-height-md: var(--ui-button-height---medium, 40px); --button-height-lg: var(--ui-button-height---large, 48px); --opacity-disabled: 0.5; }
.action-buttons { display: flex; gap: var(--spacing-3); }
.add-user-button { margin-top: var(--spacing-2); }
.add-user-form { display: flex; flex-direction: column; gap: var(--spacing-4); }
.alert { position: relative; padding: var(--spacing-3) var(--spacing-4); margin-bottom: var(--spacing-4); border: 1px solid transparent; border-radius: var(--rounded); }
.alert-danger { color: var(--color-danger-dark); background-color: var(--color-danger-light); border-color: var(--color-danger); }
.alert-dismissible { padding-right: 4rem; }
.alert-dismissible .close { position: absolute; top: 0; right: 0; padding: var(--spacing-3) var(--spacing-4); color: inherit; }
.alert-info { color: var(--color-info-dark); background-color: var(--color-info-light); border-color: var(--color-info); }
.alert-primary { color: var(--color-primary-dark); background-color: var(--color-primary-light); border-color: var(--color-primary); }
.alert-secondary { color: var(--color-secondary-dark); background-color: var(--color-secondary-light); border-color: var(--color-secondary); }
.alert-success { color: var(--color-success-dark); background-color: var(--color-success-light); border-color: var(--color-success); }
.alert-warning { color: var(--color-warning-dark); background-color: var(--color-warning-light); border-color: var(--color-warning); }
.badge { display: inline-block; padding: var(--spacing-1) var(--spacing-2); border-radius: var(--rounded-full); font-size: var(--text-xs); font-weight: var(--font-medium); }
.badge-danger { background-color: var(--color-danger-light); color: var(--color-danger-dark); }
.badge-secondary { background-color: var(--color-gray-200); color: var(--color-gray-700); }
.badge-success { background-color: var(--color-success-light); color: var(--color-success-dark); }
.badge-warning { background-color: var(--color-warning-light); color: var(--color-warning-dark); }
.breadcrumb-container { padding: var(--spacing-2) var(--spacing-4); background-color: var(--color-gray-50); border-bottom: 1px solid var(--border-color); }
.breadcrumb-separator { margin: 0 var(--spacing-2); color: var(--text-secondary); }
.browser-actions { display: flex; gap: var(--spacing-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.5rem; font-weight: 500; font-size: 0.875rem; border-radius: 6px; transition: all 0.2s ease; cursor: pointer; border: none; text-decoration: none; min-width: 100px; }
.btn:disabled, .btn.disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-block { display: block; width: 100%; }
.btn-danger { background-color: var(--ui-buttons-default---surface-danger, var(--color-danger)); color: white; border-color: var(--ui-buttons-default---surface-danger, var(--color-danger)); }
.btn-danger:hover { background-color: var(--ui-buttons-default---surface-danger-hover, var(--color-danger-dark)); border-color: var(--ui-buttons-default---surface-danger-hover, var(--color-danger-dark)); }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn + .btn { margin-left: -1px; }
.btn-group .btn:first-child { border-top-left-radius: var(--rounded); border-bottom-left-radius: var(--rounded); }
.btn-group .btn:last-child { border-top-right-radius: var(--rounded); border-bottom-right-radius: var(--rounded); }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; }
.btn-icon svg, .btn-icon img { width: 1.25rem; height: 1.25rem; }
.btn-icon-left svg, .btn-icon-left img { margin-right: var(--spacing-2); }
.btn-icon-right svg, .btn-icon-right img { margin-left: var(--spacing-2); }
.btn-icon.btn-sm svg, .btn-icon.btn-sm img { width: 1rem; height: 1rem; }
.btn-info { background: #0ea5e9; color: white; }
.btn-info:hover { background: #0284c7; color: white; }
.btn-link { background-color: transparent; color: var(--color-primary); border-color: transparent; padding: 0; height: auto; font-weight: var(--font-medium); text-decoration: none; }
.btn-link:hover { text-decoration: underline; background-color: transparent; border-color: transparent; }
.btn-primary { background: #3b82f6; color: white; }
.btn-primary:hover { background: #2563eb; color: white; }
.btn-pulse { animation: pulse 2s infinite; font-weight: bold; }
.btn-secondary { background-color: var(--bg-sidebar); color: white; border-color: var(--color-secondary); }
.btn-secondary:hover { background-color: var(--color-secondary-hover); border-color: var(--color-secondary-hover); }
.btn-sm { padding: var(--spacing-1) var(--spacing-3); font-size: var(--text-sm); height: var(--button-height-sm); }
.btn-success { background: #10b981; color: white; }
.btn-success:hover { background: #059669; color: white; }
.btn-warning { background-color: var(--color-warning); color: white; border-color: var(--color-warning); }
.btn-warning:hover { background-color: var(--color-warning-dark); border-color: var(--color-warning-dark); }
.btn-xl { padding: var(--spacing-4) var(--spacing-8); font-size: var(--text-xl); height: auto; }
.btn-xs { padding: var(--spacing-1) var(--spacing-2); font-size: var(--text-xs); height: auto; }
.card { background-color: var(--bg-card); border-radius: var(--rounded); box-shadow: var(--shadow); overflow: hidden; margin-bottom: var(--spacing-6); padding: var(--spacing-4); }
.card-body { padding: var(--spacing-4); }
.card-footer { padding: var(--spacing-4); border-top: 1px solid var(--border-color); }
.card-header { padding: var(--spacing-4); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; }
.card.p-6 { background-color: var(--bg-card); border: 2px dashed var(--color-gray-300); border-radius: var(--rounded-lg); text-align: center; padding: var(--spacing-8) var(--spacing-6); margin: var(--spacing-4) 0; }
.category-title { display: ruby-text; font-size: var(--text-xl); font-weight: var(--font-semibold); margin: 0; border-bottom: 3px solid var(--color-primary-dark); }
.checkbox-label, .radio-label { display: flex; align-items: center; margin-bottom: var(--spacing-2); }
.col { flex: 1 0 0%; padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.container { width: 100%; max-width: var(--container-max-width); margin-left: auto; margin-right: auto; padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.content-section { margin-bottom: var(--spacing-8); }
.current-file { display: flex; align-items: center; background-color: var(--color-gray-50); padding: 0.5rem; border-radius: var(--rounded); margin-top: 0.5rem; margin-bottom: 1rem; }
.current-files { margin-top: 0.5rem; margin-bottom: 1rem; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.dashboard-link { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--text-light); text-decoration: none; transition: color var(--transition-fast) ease; }
.dashboard-link:hover { color: var(--color-primary-light); text-decoration: none; }
.data-card { background-color: var(--bg-card); border-radius: var(--rounded); box-shadow: var(--shadow); overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; }
.directory, .file { display: flex; align-items: center; padding: var(--spacing-2); border-radius: var(--rounded); margin-bottom: var(--spacing-1); cursor: pointer; transition: background-color var(--transition-fast) ease; }
.directory-icon, .file-icon { margin-right: var(--spacing-3); flex-shrink: 0; width: 24px; height: 24px; }
.directory:hover, .file:hover { background-color: var(--color-gray-50); }
.empty-notifications { padding: 32px 16px; text-align: center; color: #6b7280; font-size: 14px; }
.empty-state { background-color: var(--bg-card); border-radius: var(--rounded); padding: var(--spacing-6); text-align: center; color: var(--text-secondary); grid-column: 1 / -1; }
.empty-state-card { background-color: var(--bg-card); border-radius: var(--rounded); box-shadow: var(--shadow); padding: var(--spacing-8); text-align: center; }
.empty-state-icon { width: 48px; height: 48px; margin: 0 auto var(--spacing-4) auto; opacity: 0.5; }
.empty-state-message { color: var(--text-secondary); margin-bottom: var(--spacing-4); }
.empty-state-text { margin-bottom: var(--spacing-4); }
.empty-state-title { font-size: var(--text-xl); font-weight: var(--font-semibold); margin-bottom: var(--spacing-2); }
.field-tooltip { position: relative; display: inline-block; margin-left: var(--spacing-1); }
.field-tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }
.file-actions { visibility: hidden; display: flex; gap: var(--spacing-2); }
.file-browser-container { background-color: var(--bg-card); border-radius: var(--rounded); box-shadow: var(--shadow); margin-bottom: var(--spacing-6); }
.file-browser-content { padding: var(--spacing-4); }
.file-browser-header { padding: var(--spacing-4); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.file-delete-btn, .file-delete-btn-legacy { flex-shrink: 0; }
.file-download-link { margin-top: var(--spacing-3); margin-bottom: var(--spacing-2); display: block !important; visibility: visible !important; }
.file-download-link a { display: inline-flex !important; align-items: center; background-color: #2563eb !important; color: white !important; text-decoration: none !important; font-size: var(--text-sm); font-weight: var(--font-medium); padding: var(--spacing-2) var(--spacing-4); border-radius: var(--rounded); transition: all var(--transition-fast) ease; border: 1px solid #2563eb !important; height: var(--button-height-md); justify-content: center; visibility: visible !important; opacity: 1 !important; }
.file-download-link a .w-4, .file-download-link a svg { margin-right: var(--spacing-2); width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor !important; fill: none !important; color: inherit !important; }
.file-download-link a:hover { background-color: #1e40af !important; transform: translateY(-1px); box-shadow: var(--shadow); border-color: #1e40af !important; }
.file-info { display: flex; gap: var(--spacing-4); color: var(--text-secondary); font-size: var(--text-sm); }
.file-item { display: flex; align-items: center; background-color: var(--color-gray-50); padding: 0.5rem; border-radius: var(--rounded); margin-bottom: 0.5rem; }
.file-item a { margin-right: 0.5rem; flex-grow: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-item small { margin-right: 0.5rem; flex-grow: 1; color: var(--text-secondary); }
.file-name { flex: 1; }
.file-stats-container { padding: var(--spacing-4); background-color: var(--color-gray-50); border-bottom: 1px solid var(--border-color); }
.file:hover .file-actions, .directory:hover .file-actions { visibility: visible; }
.flex-column { flex-direction: column !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.font-bold { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }
.font-light { font-weight: var(--font-light); }
.font-medium { font-weight: var(--font-medium); }
.font-normal { font-weight: var(--font-normal); }
.font-semibold { font-weight: var(--font-semibold); }
.form-check { position: relative; display: block; padding-left: 1.5rem; }
.form-check-input { position: absolute; margin-top: 0.3rem; margin-left: -1.5rem; }
.form-check-label { margin-bottom: 0; }
.form-checkbox, .form-radio { margin-right: var(--spacing-2); }
.form-control { display: block; width: 100%; padding: var(--spacing-2) var(--spacing-3); font-size: var(--text-base); line-height: 1.5; color: var(--ui-text-fields---surface-primary-text, var(--text-primary)); background-color: var(--ui-text-fields---surface, var(--bg-card)); background-clip: padding-box; border: 1px solid var(--ui-text-fields---surface-border, var(--border-color-dark)); border-radius: var(--rounded); transition: border-color var(--transition-fast) ease-in-out, box-shadow var(--transition-fast) ease-in-out; }
.form-control::placeholder { color: var(--ui-text-fields---surface-placeholder, var(--text-muted)); opacity: 1; }
.form-control:disabled, .form-control[readonly] { background-color: var(--color-gray-100); opacity: 1; }
.form-control:focus { color: var(--text-primary); background-color: var(--bg-card); border-color: var(--color-primary); outline: 0; box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25); }
.form-group {margin-bottom: var(--spacing-4);display: flex; flex-direction: row; flex-wrap: wrap;    justify-content: space-between;    align-items: flex-start; margin-bottom: var(--spacing-4); }
.form-helper { margin-top: var(--spacing-1); font-size: var(--text-sm); color: var(--text-secondary); }
.form-inline { display: flex; flex-flow: row wrap; align-items: center; }
.form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }
.form-inline .form-group { display: flex; flex: 0 0 auto; flex-flow: row wrap; align-items: center; margin-bottom: 0; }
.form-input, .form-select, .form-textarea { width: 100%; padding: var(--spacing-2) var(--spacing-3); border: 1px solid var(--border-color); border-radius: var(--rounded); background-color: var(--bg-card); color: var(--text-primary); }
.form-label { display: block; margin-bottom: var(--spacing-2); font-weight: var(--font-medium); color: var(--text-primary); }
.form-row { display: flex; flex-wrap: wrap; margin-right: calc(var(--spacing-2) * -1); margin-left: calc(var(--spacing-2) * -1); }
.form-row > .col, .form-row > [class*="col-"] { padding-right: var(--spacing-2); padding-left: var(--spacing-2); }
.form-textarea { min-height: 100px; resize: vertical; }
.h-100 { height: 100% !important; }
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.inline-form { display: inline-block; }
.invalid-feedback { display: none; width: 100%; margin-top: var(--spacing-1); font-size: var(--text-sm); color: var(--color-danger); }
.invisible { visibility: hidden !important; }
.is-invalid { border-color: var(--color-danger) !important; }
.is-valid { border-color: var(--color-success) !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-start { justify-content: flex-start !important; }
.loading-notifications { padding: 16px; text-align: center; color: #6b7280; font-size: 14px; }
.m-1 { margin: var(--spacing-1) !important; }
.m-2 { margin: var(--spacing-2) !important; }
.m-4 { margin: var(--spacing-4) !important; }
.main-content { flex: 1; margin-left: var(--sidebar-width); transition: margin-left var(--transition-normal) ease; padding: 0 var(--spacing-6) var(--spacing-6); background-color: var(--bg-body); }
.main-footer { height: var(--footer-height); display: flex; align-items: center; justify-content: center; background-color: var(--bg-card); border-top: 1px solid var(--border-color); color: var(--text-secondary); font-size: var(--text-sm); }
.main-header { height: var(--header-height); display: flex; align-items: center; justify-content: space-between; }
.header-left { display: flex; align-items: center; }
.header-right { display: flex; align-items: center; gap: var(--spacing-4); }
.main-layout { display: flex; min-height: 100vh; }
.mark-all-read { background: none; border: none; color: #3b82f6; font-size: 12px; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background-color 0.2s ease; }
.mark-all-read:hover { background-color: #eff6ff; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-1) !important; }
.mb-2 { margin-bottom: var(--spacing-2) !important; }
.mb-3 { margin-bottom: var(--spacing-3) !important; }
.mb-4 { margin-bottom: var(--spacing-4) !important; }
.mb-5 { margin-bottom: var(--spacing-5) !important; }
.metadata-group { display: flex; align-items: center; gap: var(--spacing-2); }
.metadata-label { font-weight: var(--font-medium); color: var(--text-secondary); }
.metadata-value { color: var(--text-primary); }
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: var(--spacing-1) !important; }
.ml-2 { margin-left: var(--spacing-2) !important; }
.ml-3 { margin-left: var(--spacing-3) !important; }
.ml-4 { margin-left: var(--spacing-4) !important; }
.ml-5 { margin-left: var(--spacing-5) !important; }
.modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: var(--z-50); align-items: center; justify-content: center; overflow-y: auto; padding: var(--spacing-4); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--spacing-3); margin-top: var(--spacing-6); }
.modal-backdrop { position: fixed; top: 0; left: 0; z-index: var(--z-40); width: 100vw; height: 100vh; background-color: var(--color-black); opacity: 0.5; }
.modal-body { position: relative; flex: 1 1 auto; padding: var(--spacing-4); }
.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 600px; background-color: var(--bg-card); background-clip: padding-box; border: 1px solid var(--border-color); border-radius: var(--rounded-lg); padding: var(--spacing-6); box-shadow: var(--shadow-xl); outline: 0; max-height: 90vh; overflow-y: auto; }
.modal-dialog { position: relative; width: auto; margin: 1.75rem auto; max-width: 500px; }
.modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding: var(--spacing-3) var(--spacing-4); border-top: 1px solid var(--border-color); border-bottom-right-radius: calc(var(--rounded-lg) - 1px); border-bottom-left-radius: calc(var(--rounded-lg) - 1px); }
.modal-footer > * { margin: 0.25rem; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: var(--spacing-4); border-bottom: 1px solid var(--border-color); border-top-left-radius: calc(var(--rounded-lg) - 1px); border-top-right-radius: calc(var(--rounded-lg) - 1px); }
.modal-title { margin-bottom: 0; line-height: 1.5; }
.modal.show { display: flex; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: var(--spacing-1) !important; }
.mr-2 { margin-right: var(--spacing-2) !important; }
.mr-3 { margin-right: var(--spacing-3) !important; }
.mr-4 { margin-right: var(--spacing-4) !important; }
.mr-5 { margin-right: var(--spacing-5) !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacing-1) !important; }
.mt-2 { margin-top: var(--spacing-2) !important; }
.mt-3 { margin-top: var(--spacing-3) !important; }
.mt-4 { margin-top: var(--spacing-4) !important; }
.mt-5 { margin-top: var(--spacing-5) !important; }
.nav-item { margin-bottom: var(--spacing-2); }
.nav-link { display: flex; align-items: center; padding: var(--spacing-3); border-radius: var(--rounded); color: var(--sidebar---surface-link, var(--text-light)); text-decoration: none; transition: background-color var(--transition-fast) ease; }
.nav-link span { color: inherit; }
.nav-link-content { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.nav-link.active { background-color: var(--color-primary); color: white; }
.nav-link.resources { display: flex; align-items: center; margin-bottom: var(--spacing-2); padding: var(--spacing-3); }
.nav-link.resources:hover { background-color: var(--color-primary-hover); color: white; }
.nav-link:hover { background-color: var(--color-gray-700); text-decoration: none; color: var(--sidebar---surface-link, var(--text-light)); }
.notification-content { font-size: 13px; color: #374151; line-height: 1.4; }
.notification-count { position: absolute; top: -2px; right: -2px; background-color: var(--color-danger); color: white; border-radius: 50%; font-size: 10px; font-weight: bold; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--bg-card); }
.notification-item { padding: 12px 16px; border-bottom: 1px solid #f3f4f6; cursor: pointer; transition: background-color 0.2s ease; background-color: white; }
.notification-item.unread { background-color: #eff6ff; border-left: 3px solid #3b82f6; border-bottom: 1px dashed #3b82f6 }
.notification-item:hover { background-color: #f9fafb; }
.notification-item:last-child { border-bottom: none; }
.notification-meta { font-size: 11px; color: #6b7280; margin-top: 4px; display: flex; justify-content: space-between; }
.notification-type { padding: 2px 6px; border-radius: 12px; font-size: 10px; font-weight: 500; }
.notification-type.awaiting-confirmation { background-color: #dbeafe; color: #1e40af; }
.notification-type.awaiting-input { background-color: #fef3c7; color: #92400e; }
.notification-type.awaiting_confirmation { background-color: #dbeafe; color: #1e40af; }
.notification-type.awaiting_input { background-color: #fef3c7; color: #92400e; }
.notification-type.complete { background-color: #d1fae5; color: #065f46; }
.notifications-button { position: relative; background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: var(--spacing-2); border-radius: var(--rounded); transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.notifications-button:hover { background-color: var(--color-gray-100); color: var(--text-primary); }
.notifications-button:focus { outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }
.notifications-container { position: relative; }
.notifications-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 320px; background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--rounded-lg); box-shadow: var(--shadow-xl); z-index: 1000; max-height: 400px; overflow: hidden; display: none; }
.notifications-dropdown::before { content: ''; position: absolute; top: -8px; right: 16px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--border-color); }
.notifications-dropdown::after { content: ''; position: absolute; top: -7px; right: 16px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--bg-card); }
.notifications-dropdown.show { display: block; }
.notifications-header { padding: 12px 16px; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; background-color: #f9fafb; }
.notifications-header h3 { margin: 0; font-size: 14px; font-weight: 600; color: #111827; }
.notifications-list { max-height: 300px; overflow-y: auto; }
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--spacing-1) !important; }
.p-2 { padding: var(--spacing-2) !important; }
.p-3 { padding: var(--spacing-3) !important; }
.p-4 { padding: var(--spacing-4) !important; }
.p-5 { padding: var(--spacing-5) !important; }
.page-container { max-width: var(--container-max-width); margin: 0 auto; padding: var(--spacing-6); }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-6); }
.page-subtitle { color: var(--text-secondary); margin-top: var(--spacing-1); margin-bottom: var(--spacing-6); }
.page-title { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); margin: 0; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--spacing-1) !important; }
.pb-2 { padding-bottom: var(--spacing-2) !important; }
.pb-3 { padding-bottom: var(--spacing-3) !important; }
.pb-4 { padding-bottom: var(--spacing-4) !important; }
.pb-5 { padding-bottom: var(--spacing-5) !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: var(--spacing-1) !important; }
.pl-2 { padding-left: var(--spacing-2) !important; }
.pl-3 { padding-left: var(--spacing-3) !important; }
.pl-4 { padding-left: var(--spacing-4) !important; }
.pl-5 { padding-left: var(--spacing-5) !important; }
.pr-1 { padding-right: var(--spacing-1) !important; }
.pr-2 { padding-right: var(--spacing-2) !important; }
.pr-3 { padding-right: var(--spacing-3) !important; }
.pr-4 { padding-right: var(--spacing-4) !important; }
.pr-5 { padding-right: var(--spacing-5) !important; }
.progress-bar { height: 100%; transition: width 0.3s ease-in-out; min-width: 2px; }
.progress-bar-container { width: 100%; height: 6px; background-color: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.progress-text { font-size: var(--text-xs); color: var(--text-light); opacity: 0.8; margin-top: var(--spacing-1); }
.project-users-container { max-width: var(--container-max-width); margin: 0 auto; padding: var(--spacing-6); }
.project-users-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-6); }
.project-users-title { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); margin: 0; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--spacing-1) !important; }
.pt-2 { padding-top: var(--spacing-2) !important; }
.pt-3 { padding-top: var(--spacing-3) !important; }
.pt-4 { padding-top: var(--spacing-4) !important; }
.pt-5 { padding-top: var(--spacing-5) !important; }
.remove-user-button { color: var(--color-danger); font-weight: var(--font-medium); background: none; border: none; cursor: pointer; padding: var(--spacing-1) var(--spacing-2); border-radius: var(--rounded); transition: background-color var(--transition-fast) ease; }
.remove-user-button:hover { background-color: var(--color-danger-light); text-decoration: none; }
.resource-actions { display: flex; gap: var(--spacing-2); }
.resource-category { background-color: var(--bg-card); border-radius: var(--rounded); box-shadow: var(--shadow); padding: var(--spacing-4); display: flex; flex-direction: column; }
.resource-category { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--rounded-lg); box-shadow: var(--shadow); margin-bottom: var(--spacing-6); overflow: hidden; transition: box-shadow var(--transition-fast) ease; }
.resource-category .p-6 { padding: var(--spacing-5); }
.resource-category-card { background-color: var(--bg-card); border-radius: var(--rounded); box-shadow: var(--shadow); margin-bottom: var(--spacing-6); overflow: hidden; }
.resource-category:hover { box-shadow: var(--shadow-md); }
.resource-content { flex: 1; overflow: hidden; }
.resource-description { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--spacing-2); line-height: 1.4; }
.resource-details { flex: 1; }
.resource-details { display: flex; flex-direction: column; gap: var(--spacing-3); }
.resource-icon { width: 24px; height: 24px; min-width: 24px; margin-right: var(--spacing-3); flex-shrink: 0; }
.resource-item { background-color: var(--color-white); border: 2px solid var(--color-gray-200); border-radius: var(--rounded-md); padding: 0; margin-bottom: var(--spacing-4); box-shadow: var(--shadow-sm); transition: all var(--transition-fast) ease; position: relative; }
.resource-item .mt-2 { display: flex; align-items: center; gap: var(--spacing-3); margin-top: var(--spacing-3); }
.resource-item .resource-description { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; margin: 0; background-color: var(--color-gray-50); padding: var(--spacing-3); border-radius: var(--rounded); border-left: 4px solid var(--color-gray-300); font-style: italic; }
.resource-item .resource-title { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0; line-height: 1.3; letter-spacing: -0.01em; }
.resource-item-content { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--spacing-4); border-bottom: 1px solid var(--border-color); }
.resource-item-content { padding: var(--spacing-5); position: relative; }
.resource-item-content:last-child { border-bottom: none; }
.resource-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-lg); transform: translateY(-3px); background-color: var(--color-gray-50); }
.resource-item:hover .resource-description { border-left-color: var(--color-primary); background-color: var(--color-primary-light); }
.resource-item:hover .resource-title { color: var(--color-primary-dark); }
.resource-item:hover::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background-color: var(--color-primary); border-radius: var(--rounded-sm); }
.resource-item:last-child { margin-bottom: 0; }
.resource-link { display: flex; align-items: flex-start; padding: var(--spacing-3); text-decoration: none; color: var(--text-primary); }
.resource-link:hover { text-decoration: none; color: var(--text-primary); }
.resource-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-3); }
.resource-management-container { max-width: var(--container-max-width); margin: 0 auto; padding: var(--spacing-6); }
.resource-meta { display: flex; align-items: center; gap: var(--spacing-3); font-size: var(--text-xs); color: var(--text-secondary); }
.resource-title { font-size: var(--text-base); font-weight: var(--font-medium); margin-bottom: var(--spacing-1); color: var(--text-primary); }
.resource-type { font-size: var(--text-xs); padding: var(--spacing-1) var(--spacing-2); border-radius: var(--rounded-full); background-color: var(--color-gray-200); color: var(--text-secondary); font-weight: var(--font-medium); }
.resource-type-badge { display: inline-flex; align-items: center; background-color: var(--color-gray-200); color: var(--color-gray-700); font-size: var(--text-xs); font-weight: var(--font-bold); padding: var(--spacing-1) var(--spacing-3); border-radius: var(--rounded-full); text-transform: uppercase; letter-spacing: 0.5px; box-shadow: var(--shadow-sm); transition: all var(--transition-fast) ease; }
.resource-type-badge.resource-type-doc, .resource-type-badge.resource-type-docx { background-color: lightgrey; }
.resource-type-badge.resource-type-link { background-color: lightgrey; }
.resource-type-badge.resource-type-pdf { background-color: var(--color-danger); color: var(--color-white); }
.resource-type-badge.resource-type-xls, .resource-type-badge.resource-type-xlsx { background-color: var(--color-success); }
.resource-type-badge:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.resource-type-doc { background-color: var(--color-secondary-light); color: var(--color-secondary-dark); }
.resource-type-image { background-color: var(--color-success-light); color: var(--color-success-dark); }
.resource-type-link { background-color: var(--color-primary-light); color: var(--color-primary-dark); }
.resource-type-pdf { background-color: var(--color-danger-light); color: var(--color-danger-dark); }
.resource-type-video { background-color: var(--color-warning-light); color: var(--color-warning-dark); }
.resource-url { color: var(--color-primary); text-decoration: none; font-size: var(--text-sm); font-weight: var(--font-medium); background-color: var(--color-primary-light); padding: var(--spacing-1) var(--spacing-2); border-radius: var(--rounded-sm); display: inline-block; transition: all var(--transition-fast) ease; word-break: break-all; }
.resource-url:hover { background-color: var(--color-primary-light); transform: translateY(-1px); }
.resources-container { max-width: var(--container-max-width); margin: 0 auto; padding: var(--spacing-6); background-color: var(--bg-body); }
.resources-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-6); margin-top: var(--spacing-6); }
.resources-header { margin-bottom: var(--spacing-6); }
.resources-icon { width: 1.25rem; height: 1.25rem; margin-right: var(--spacing-3); opacity: 0.8; }
.resources-title { font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--text-primary); margin-bottom: var(--spacing-4); }
.rounded { border-radius: var(--rounded) !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-lg { border-radius: var(--rounded-lg) !important; }
.rounded-pill { border-radius: 50rem !important; }
.rounded-sm { border-radius: var(--rounded-sm) !important; }
.row { display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--spacing-4)); margin-right: calc(-1 * var(--spacing-4)); }
.row-actions { display: flex; gap: var(--spacing-2); justify-content: center; }
.save-section { position: sticky; top: 0; z-index: 100; background-color: rgba(255, 255, 255, 0.9); padding: 1rem; border-radius: 0 0 0.5rem 0.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; }
.save-section button { transition: all 0.3s ease; }
.save-section.scrolled { transform: translateY(-50%); }
.save-section.scrolled button { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-width); background-color: var(--bg-sidebar); color: var(--text-light); z-index: var(--z-40); transition: transform var(--transition-normal) ease, width var(--transition-normal) ease; overflow-y: auto; display: flex; flex-direction: column; }
.sidebar .admin-link svg { width: 1.25rem; height: 1.25rem; margin-right: var(--spacing-3); }
.sidebar .nav-link-content { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.sidebar .progress-bar { height: 100%; display: block !important; transition: width 0.3s ease; }
.sidebar .progress-bar-container { width: 100%; height: 6px; background-color: rgba(255, 255, 255, 0.1); border-radius: 9999px; overflow: hidden; margin-top: 4px; display: block !important; }
.sidebar .progress-bar.complete { background-color: var(--color-success, #10b981); }
.sidebar .progress-bar.partial { background-color: var(--color-primary, #3b82f6); }
.sidebar .progress-text { display: block !important; font-size: var(--text-xs); color: var(--text-light); opacity: 0.8; margin-top: var(--spacing-1); }
.sidebar svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.sidebar svg, .sidebar img { margin-right: var(--spacing-3); }
.sidebar-collapsed .main-content { margin-left: var(--sidebar-collapsed-width); }
.sidebar-collapsed .nav-link { display: flex; align-items: center; justify-content: center; padding: var(--spacing-3); }
.sidebar-collapsed .nav-link-text, .sidebar-collapsed .progress-text, .sidebar-collapsed .progress-bar-container, .sidebar-collapsed .sidebar-footer { display: none; }
.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); }
.sidebar-divider { height: 1px; background-color: var(--sidebar---surface-divider, var(--color-gray-700)); margin: var(--spacing-4) 0; }
.sidebar-footer { padding: var(--spacing-3); border-top: 1px solid var(--sidebar---surface-divider, var(--color-gray-700)); }
.sidebar-header { padding: var(--spacing-4); border-bottom: 1px solid var(--sidebar---surface-divider, var(--color-gray-700)); display: flex; align-items: center; justify-content: space-between; }
.sidebar-nav { flex: 1; padding: var(--spacing-2); overflow-y: auto; }
.sidebar-toggle { display: none; position: fixed; bottom: var(--spacing-4); right: var(--spacing-4); width: 3rem; height: 3rem; border-radius: 50%; background-color: var(--color-primary); color: white; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); z-index: var(--z-50); cursor: pointer; }
.sidebar-toggle:hover { background-color: var(--color-primary-hover); }
.sort-button { display: inline-flex; align-items: center; gap: 0.5rem; }
.sort-button-icon { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.sort-button.ascending .sort-button-icon { transform: rotate(180deg); }
.stat-card { background-color: var(--bg-card); border-radius: var(--rounded); padding: var(--spacing-4); box-shadow: var(--shadow-sm); text-align: center; }
.stat-title { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--spacing-2); }
.stat-value { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--text-primary); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-4); }
.table-cell { padding: var(--spacing-3) var(--spacing-4); vertical-align: middle; font-size: small; }
.table-header-cell { padding: var(--spacing-3) var(--spacing-4); font-weight: var(--font-semibold); color: var(--text-primary); text-align: left; border-bottom: 1px solid var(--border-color); }
.table-header-row { background-color: var(--color-gray-50); }
.table-row { border-bottom: 1px solid var(--border-color); }
.table-row:last-child { border-bottom: none; }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-base { font-size: var(--text-base); }
.text-center { text-align: center; }
.text-center.text-secondary { color: var(--text-muted); font-size: var(--text-lg); font-weight: var(--font-medium); }
.text-danger { color: var(--color-danger); }
.text-info { color: var(--color-info); }
.text-left { text-align: left; }
.text-lg { font-size: var(--text-lg); }
.text-light { color: var(--text-light); }
.text-lowercase { text-transform: lowercase; }
.text-muted { color: var(--text-muted); }
.text-primary { color: var(--text-primary); }
.text-right { text-align: right; }
.text-secondary { color: var(--text-secondary); }
.text-sm { font-size: var(--text-sm); }
.text-success { color: var(--color-success); }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-uppercase { text-transform: uppercase; }
.text-warning { color: var(--color-warning); }
.text-xl { font-size: var(--text-xl); }
.text-xs { font-size: var(--text-xs); }
.text-xs.text-secondary { color: var(--text-muted); font-size: var(--text-xs); background-color: var(--color-gray-100); padding: var(--spacing-1) var(--spacing-2); border-radius: var(--rounded-sm); font-weight: var(--font-medium); }
.tooltip-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background-color: var(--border-color-dark); color: var(--color-white); border-radius: 50%; font-size: 10px; font-weight: bold; cursor: help; user-select: none; transition: background-color var(--transition-fast) ease; }
.tooltip-icon:hover { background-color: var(--border-color-dark); }
.tooltip-text { visibility: hidden; opacity: 0; position: absolute; z-index: 1000; bottom: 125%; left: 50%; transform: translateX(-50%); background-color: var(--color-gray-900); color: var(--color-white); padding: 8px 12px; border-radius: var(--rounded); font-size: var(--text-sm); line-height: 1.4; white-space: nowrap; max-width: 250px; white-space: normal; text-align: center; box-shadow: var(--shadow-lg); transition: opacity var(--transition-fast) ease, visibility var(--transition-fast) ease; pointer-events: none; }
.tooltip-text::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--color-gray-900); }
.user-admin-badge { font-size: var(--text-sm); color: var(--text-secondary); font-style: italic; }
.user-item { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-3) var(--spacing-4); background-color: var(--color-gray-50); border-radius: var(--rounded); border: 1px solid var(--border-color); }
.user-list { display: flex; flex-direction: column; gap: var(--spacing-2); }
.user-name { font-weight: var(--font-medium); color: var(--text-primary); }
.users-card { background-color: var(--bg-card); border-radius: var(--rounded); box-shadow: var(--shadow); padding: var(--spacing-6); }
.users-card-title { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: var(--spacing-4); padding-bottom: var(--spacing-2); border-bottom: 1px solid var(--border-color); }
.users-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-6); }
.valid-feedback { display: none; width: 100%; margin-top: var(--spacing-1); font-size: var(--text-sm); color: var(--color-success); }
.visible { visibility: visible !important; }
.tab-header {display: flex; align-items: center;justify-content: space-between};
.was-validated .form-control:valid ~ .valid-feedback, .was-validated .form-control:invalid ~ .invalid-feedback, .form-control.is-valid ~ .valid-feedback, .form-control.is-invalid ~ .invalid-feedback { display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast) ease; }
a:hover { color: var(--color-primary-hover); text-decoration: underline; }
blockquote { padding-left: var(--spacing-4); border-left: 4px solid var(--color-primary); margin-left: 0; margin-bottom: var(--spacing-4); font-style: italic; color: var(--text-secondary); }
body { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; color: var(--text-primary); min-height: 100vh; text-rendering: optimizeSpeed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--bg-body); }
button { background: none; border: none; cursor: pointer; padding: 0; }
code { font-family: var(--font-mono); font-size: 0.9em; padding: var(--spacing-1) var(--spacing-2); background-color: var(--color-gray-100); border-radius: var(--rounded); }
code, pre { font-family: var(--font-mono); }
em { font-style: italic; }
h1 { font-size: var(--text-4xl); }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: var(--spacing-4); line-height: 1.2; font-weight: var(--font-bold); color: var(--text-primary); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; padding: 0; }
img, picture { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; }
li { margin-bottom: var(--spacing-2); }
ol { list-style-type: decimal; }
p { margin-top: 0; margin-bottom: var(--spacing-4); }
pre { font-family: var(--font-mono); padding: var(--spacing-4); margin-bottom: var(--spacing-4); overflow: auto; background-color: var(--color-gray-100); border-radius: var(--rounded); }
pre code { padding: 0; background-color: transparent; }
small { font-size: var(--text-sm); }
strong { font-weight: var(--font-bold); }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; }
ul { list-style-type: disc; }
ul, ol { list-style: none; padding: 0; margin: 0; }
ul, ol { margin-top: 0; margin-bottom: var(--spacing-4); padding-left: var(--spacing-5); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } }
@media (max-width: 1024px) { .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }.sidebar.active { transform: translateX(0); }.sidebar-toggle { display: flex; }.main-content { margin-left: 0; } }
@media (max-width: 575.98px) { .flex-row-xs { flex-direction: row !important; }.flex-column-xs { flex-direction: column !important; } }
@media (max-width: 575.98px) { .text-left-xs { text-align: left !important; }.text-center-xs { text-align: center !important; }.text-right-xs { text-align: right !important; } }
@media (max-width: 768px) { .notifications-dropdown { position: fixed; top: calc(var(--header-height) + 16px); left: 16px; right: 16px; max-width: none; }
.main-header { padding: 0 var(--spacing-4); }
.header-right { gap: var(--spacing-2); } }
@media (max-width: 768px) { .page-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-4); }.action-buttons { width: 100%; justify-content: flex-start; flex-wrap: wrap; }.row-actions { flex-direction: column; gap: var(--spacing-2); }.file-browser-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-4); }.browser-actions { width: 100%; justify-content: space-between; }.stats-grid { grid-template-columns: repeat(2, 1fr); }.file-info { display: none; } }
@media (max-width: 768px) { .resources-container { padding: var(--spacing-4); }.resource-item:hover { transform: translateY(-1px); }.resource-item-content { padding: var(--spacing-4); }.category-title { padding: var(--spacing-3) var(--spacing-4); font-size: var(--text-lg); }.resource-item .resource-title { font-size: var(--text-lg); } }
@media (max-width: 768px) { .tooltip-text { max-width: 200px; font-size: var(--text-xs); padding: 6px 10px; } }
@media (min-width: 1200px) { .flex-row-xl { flex-direction: row !important; }.flex-column-xl { flex-direction: column !important; } }
@media (min-width: 1200px) { .text-left-xl { text-align: left !important; }.text-center-xl { text-align: center !important; }.text-right-xl { text-align: right !important; } }
@media (min-width: 576px) and (max-width: 767.98px) { .flex-row-sm { flex-direction: row !important; }.flex-column-sm { flex-direction: column !important; } }
@media (min-width: 576px) and (max-width: 767.98px) { .text-left-sm { text-align: left !important; }.text-center-sm { text-align: center !important; }.text-right-sm { text-align: right !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .flex-row-md { flex-direction: row !important; }.flex-column-md { flex-direction: column !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .text-left-md { text-align: left !important; }.text-center-md { text-align: center !important; }.text-right-md { text-align: right !important; } }
@media (min-width: 768px) { .d-mobile-none { display: initial !important; }.d-desktop-block { display: block !important; }.d-desktop-flex { display: flex !important; } }
@media (min-width: 768px) { .resources-grid { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); } }
@media (min-width: 768px) { .users-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) and (max-width: 1199.98px) { .flex-row-lg { flex-direction: row !important; }.flex-column-lg { flex-direction: column !important; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .text-left-lg { text-align: left !important; }.text-center-lg { text-align: center !important; }.text-right-lg { text-align: right !important; } }
@media (prefers-color-scheme: dark) {:root { --bg-body: var(--color-gray-900); --bg-card: var(--color-gray-800); --text-primary: var(--color-gray-50); --text-secondary: var(--color-gray-300); --border-color: var(--color-gray-700); } }
@media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; }*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }