/* AYT DCS — enterprise shell. CSS custom properties for theming (RTL/dark-mode ready). */ :root { --navy: #0E1217; --navy-2: #161C24; --navy-border: #232C37; --sidebar-text: #C6CED7; --sidebar-text-dim: #6E7A87; --accent: #2B8CD8; --accent-dark: #1F6FB2; --accent-soft: #E3F0FB; --red: #E32227; --bg: #EEF0F3; --surface: #FFFFFF; --border: #DEE3E9; --border-soft: #EDF0F3; --text: #1A2028; --text-dim: #68737F; --text-faint: #98A2AE; --green: #177A45; --green-bg: #E3F3E9; --amber: #96690A; --amber-bg: #FBF1DC; --orange: #C05612; --orange-bg: #FDEAE0; --red-bg: #FCE5E6; --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif; --mono: 'Consolas', 'Courier New', Menlo, monospace; --radius: 8px; --content-max-width: 1280px; --bg-gradient: radial-gradient(circle at 20% 0%, #F7FBFF 0%, #EEF2F7 38%, #E9EDF3 100%); --surface-soft: #F9FBFD; --glass-border: rgba(255,255,255,.45); --shadow-sm: 0 6px 16px rgba(14, 22, 32, .06); --shadow-md: 0 12px 32px rgba(14, 22, 32, .10); --shadow-lg: 0 22px 46px rgba(8, 16, 28, .16); --ring: 0 0 0 3px rgba(43, 140, 216, .16); --transition-fast: 140ms cubic-bezier(.2,.7,.2,1); --transition-base: 240ms cubic-bezier(.2,.7,.2,1); --scrollbar-track: rgba(20, 30, 44, .04); --scrollbar-thumb: rgba(20, 40, 64, .22); --scrollbar-thumb-hover: rgba(20, 40, 64, .38); } /* ---------- Dark theme (toggled via data-theme="dark" on ) ---------- */ :root[data-theme="dark"] { color-scheme: dark; --accent-soft: rgba(43, 140, 216, .16); --bg: #10151C; --surface: #1A212B; --surface-soft: #212933; --border: #2B3541; --border-soft: #242C36; --text: #E7ECF2; --text-dim: #9AA7B4; --text-faint: #6E7A87; --green-bg: rgba(23, 122, 69, .18); --amber-bg: rgba(150, 105, 10, .2); --orange-bg: rgba(192, 86, 18, .2); --red-bg: rgba(227, 34, 39, .16); --bg-gradient: radial-gradient(circle at 20% 0%, #171E27 0%, #131922 42%, #10141B 100%); --glass-border: rgba(255, 255, 255, .06); --shadow-sm: 0 6px 16px rgba(0, 0, 0, .35); --shadow-md: 0 12px 32px rgba(0, 0, 0, .4); --shadow-lg: 0 22px 46px rgba(0, 0, 0, .5); --ring: 0 0 0 3px rgba(43, 140, 216, .3); --scrollbar-track: rgba(255, 255, 255, .04); --scrollbar-thumb: rgba(255, 255, 255, .14); --scrollbar-thumb-hover: rgba(255, 255, 255, .22); } :root[data-theme="dark"] select, :root[data-theme="dark"] input, :root[data-theme="dark"] textarea { color-scheme: dark; } :root[data-theme="dark"] .topbar { background: linear-gradient(135deg, rgba(26, 33, 43, .94), rgba(19, 25, 33, .88)); border-color: rgba(255, 255, 255, .08); box-shadow: 0 8px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .03); } :root[data-theme="dark"] .topbar-crumb { color: #F2F5F9; } :root[data-theme="dark"] .sidebar-toggle-btn, :root[data-theme="dark"] .project-switcher, :root[data-theme="dark"] .quick-search-input, :root[data-theme="dark"] .notif-bell-btn, :root[data-theme="dark"] .icon-toggle-btn { background: linear-gradient(180deg, #242C37, #1D242E); border-color: #333E4B; color: #E7ECF2; } :root[data-theme="dark"] .sidebar-toggle-btn:hover, :root[data-theme="dark"] .icon-toggle-btn:hover { background: #2A333F; border-color: #44515F; } :root[data-theme="dark"] .quick-search-results, :root[data-theme="dark"] .notif-dropdown { background: var(--surface); border-color: var(--border); } :root[data-theme="dark"] .page-header { background: linear-gradient(135deg, rgba(26, 33, 43, .92), rgba(19, 25, 33, .86)); border-color: #2B3541; } :root[data-theme="dark"] .kpi-card, :root[data-theme="dark"] .dashboard-panel { background: linear-gradient(180deg, rgba(26, 33, 43, .96), rgba(21, 27, 35, .92)); border-color: #2B3541; } :root[data-theme="dark"] .kpi-link:hover .kpi-card, :root[data-theme="dark"] .dashboard-panel:hover { border-color: #3A4552; } :root[data-theme="dark"] .activity-text, :root[data-theme="dark"] .reminder-msg { color: #C6CED7; } :root[data-theme="dark"] .field-label { color: #AEB9C7; } :root[data-theme="dark"] .field-label input, :root[data-theme="dark"] .field-label select, :root[data-theme="dark"] .field-label textarea, :root[data-theme="dark"] .reminder-form input[type="text"], :root[data-theme="dark"] .reminder-form input[type="date"] { background: #1D242E; border-color: #333E4B; color: var(--text); } :root[data-theme="dark"] .field-label input:hover, :root[data-theme="dark"] .field-label select:hover, :root[data-theme="dark"] .field-label textarea:hover { border-color: #4A5866; } :root[data-theme="dark"] .field-error-msg, :root[data-theme="dark"] .alert-error { color: #F29A9D; } :root[data-theme="dark"] .input-invalid { border-color: #F29A9D !important; } :root[data-theme="dark"] .btn-secondary, :root[data-theme="dark"] button.btn[style*="background:#fff"] { background: linear-gradient(180deg, #242C37, #1D242E); border-color: #333E4B; color: var(--text); } :root[data-theme="dark"] .btn-secondary:hover { border-color: #4A5866; background: #242C37; } :root[data-theme="dark"] .btn-ghost { border-color: #3A4552; } :root[data-theme="dark"] .global-alert.warning { color: #F0C674; } :root[data-theme="dark"] .global-alert.error { color: #F29A9D; } :root[data-theme="dark"] .global-alert.success { color: #8FD6AC; } :root[data-theme="dark"] .global-alert.info { background: rgba(43, 140, 216, .14); border-color: rgba(43, 140, 216, .32); color: #8FC4EE; } /* Legacy inline-styled panels/modals/buttons authored with style="background:#fff;..." across the admin & detail views — retheme them without touching every file. */ :root[data-theme="dark"] [style*="background:#fff"] { background: var(--surface) !important; } :root[data-theme="dark"] [style*="border:1px solid #C9D1DA"], :root[data-theme="dark"] [style*="border: 1px solid #C9D1DA"] { border-color: #333E4B !important; } :root[data-theme="dark"] [style*="border:1px dashed #C9D1DA"] { border-color: #333E4B !important; } :root[data-theme="dark"] .revision-panel { background: var(--surface-soft) !important; border-top-color: #2B3541 !important; } :root[data-theme="dark"] [style*="background:#F7F9FB"] { background: var(--surface-soft) !important; } /* ---------- Theme/language toggle controls ---------- */ .pref-controls { display: flex; align-items: center; gap: 8px; } .icon-toggle-btn { border: 1px solid #C9D1DA; background: linear-gradient(180deg, #fff, #F7FAFD); color: #1C2733; border-radius: 10px; width: 36px; height: 36px; font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 0 rgba(255,255,255,.84), 0 2px 8px rgba(16,24,40,.05); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .icon-toggle-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: #AEB9C7; } .theme-icon-light { display: none; } :root[data-theme="dark"] .theme-icon-dark { display: none; } :root[data-theme="dark"] .theme-icon-light { display: inline; } .auth-pref-controls { position: fixed; top: 16px; right: 16px; z-index: 50; } /* ---------- RTL (Arabic) ---------- */ [dir="rtl"] .auth-pref-controls { right: auto; left: 16px; } [dir="rtl"] .sidebar { border-right: none; border-left: 1px solid rgba(255,255,255,.06); box-shadow: inset 1px 0 0 rgba(255,255,255,.03); } [dir="rtl"] .nav-item { border-left-color: transparent; border-right: 3px solid transparent; } [dir="rtl"] .nav-item.active { border-left-color: transparent; border-right-color: var(--accent); } [dir="rtl"] .nav-item:hover { transform: translateX(-2px); } [dir="rtl"] .quick-search-results, [dir="rtl"] .notif-dropdown { right: auto; left: 0; } [dir="rtl"] .notif-badge { right: auto; left: -6px; } [dir="rtl"] .reminder-doc { margin-left: 0; margin-right: 6px; } @media (max-width: 980px) { [dir="rtl"] .sidebar { inset: 0 0 0 auto; transform: translateX(100%); } [dir="rtl"] .app-shell.sidebar-open .sidebar { transform: translateX(0); } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg-gradient); background-attachment: fixed; font-family: var(--font); color: var(--text); font-size: 18px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: rgba(43, 140, 216, .28); color: #0F1D2D; } a { color: var(--accent); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--accent-dark); text-decoration: underline; } button { font-family: inherit; } /* ---------- Scrollbars ---------- */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); background-clip: padding-box; } /* ---------- Native form controls ---------- */ input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 20px; height: 20px; cursor: pointer; } select, input, textarea { color-scheme: light; } input:disabled, select:disabled, textarea:disabled, button:disabled { cursor: not-allowed; opacity: .58; } /* ---------- Motion ---------- */ @keyframes dcs-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dcs-fade-in-simple { from { opacity: 0; } to { opacity: 1; } } @keyframes dcs-pop-in { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes dcs-slide-in-right { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } .content { animation: dcs-fade-in var(--transition-base) both; } /* ---------- App shell ---------- */ .app-shell { display: flex; min-height: 100vh; position: relative; } .sidebar-backdrop { display: none; } .sidebar { width: 264px; flex-shrink: 0; background: linear-gradient(190deg, #111825 0%, #0E141E 58%, #0C1119 100%); color: var(--sidebar-text); display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.06); box-shadow: inset -1px 0 0 rgba(255,255,255,.03); } .sidebar-brand { padding: 18px 16px 14px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--navy-border); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); } .sidebar-brand img { width: 42px; border-radius: 8px; box-shadow: 0 6px 14px rgba(0,0,0,.24); } .brand-title { font-weight: 700; color: #fff; font-size: 18px; } .brand-sub { font-size: 14.5px; color: var(--sidebar-text-dim); letter-spacing: 1.2px; font-weight: 600; } .sidebar-close-btn { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 32px; flex-shrink: 0; margin-inline-start: auto; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid var(--navy-border); color: var(--sidebar-text); font-size: 16px; line-height: 1; cursor: pointer; } .sidebar-close-btn:hover { background: rgba(255, 255, 255, .14); border-color: var(--accent); } .sidebar-nav { flex: 1; overflow-y: auto; padding: 14px 12px 12px; scrollbar-color: rgba(255,255,255,.16) transparent; } .sidebar-nav::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.16); } .sidebar-nav::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.26); } .nav-item { display: block; padding: 13px 14px; border-radius: 9px; margin-bottom: 5px; color: var(--sidebar-text); font-size: 17px; font-weight: 600; border-left: 3px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast); } .nav-item:hover { background: linear-gradient(90deg, rgba(43,140,216,.16), rgba(43,140,216,.04)); color: #fff; text-decoration: none; transform: translateX(2px); } .nav-item.active { background: linear-gradient(90deg, rgba(43,140,216,.24), rgba(43,140,216,.08)); color: #fff; border-left-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(127,183,228,.18); } .nav-group-label { font-size: 14.5px; letter-spacing: 1.6px; color: var(--sidebar-text-dim); font-weight: 700; margin: 18px 4px 8px; } .nav-placeholder { font-size: 15.5px; color: var(--sidebar-text-dim); padding: 4px 10px; line-height: 1.5; } .sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--navy-border); } .user-chip { display: flex; align-items: center; gap: 10px; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; } .user-meta { flex: 1; min-width: 0; } .user-name { font-size: 16.5px; color: #E6EBF0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .icon-btn { background: none; border: none; color: var(--sidebar-text-dim); cursor: pointer; font-size: 18px; } .icon-btn:hover { color: #fff; } .main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)); } .topbar { min-height: 70px; background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(246,251,255,.86)); backdrop-filter: blur(12px); border: 1px solid rgba(206, 220, 236, .72); border-radius: 16px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 14px 16px 0; flex-shrink: 0; flex-wrap: wrap; box-shadow: 0 8px 24px rgba(13, 27, 44, .08), inset 0 1px 0 rgba(255,255,255,.7); } .topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .topbar-crumb { font-size: 24px; font-weight: 800; color: #0F1D2D; line-height: 1.15; letter-spacing: -.2px; } .topbar-spacer { flex: 1 1 auto; min-width: 8px; } .page-crumb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 16px 0; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); } .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 16px; color: var(--text-dim); min-width: 0; } .breadcrumb a { color: var(--text-dim); text-decoration: none; border-radius: 6px; padding: 2px 6px; margin: -2px -6px; transition: color var(--transition-fast), background var(--transition-fast); } .breadcrumb a:hover { color: var(--accent); background: var(--accent-soft); } .breadcrumb .crumb-sep { color: var(--text-faint); } .breadcrumb .crumb-project { display: inline-flex; align-items: center; gap: 6px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .breadcrumb .crumb-code { font-family: var(--mono); font-size: 13.5px; color: var(--accent); } .breadcrumb .crumb-current { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 380px; } [dir="rtl"] .breadcrumb .crumb-sep { display: inline-block; transform: scaleX(-1); } .page-crumb-back { flex-shrink: 0; } .sidebar-back-btn { display: flex; align-items: center; gap: 6px; margin: 4px 10px 10px; padding: 9px 12px; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid var(--navy-border); color: var(--sidebar-text); font-size: 15px; font-weight: 600; text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .sidebar-back-btn:hover { background: rgba(255, 255, 255, .12); border-color: var(--accent); transform: translateX(-2px); } [dir="rtl"] .sidebar-back-btn:hover { transform: translateX(2px); } .sidebar-project-chip { display: flex; flex-direction: column; gap: 2px; margin: 0 10px 14px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(135deg, rgba(43, 140, 216, .18), rgba(43, 140, 216, .05)); border: 1px solid rgba(43, 140, 216, .35); text-decoration: none; overflow: hidden; } .sidebar-project-chip .chip-code { font-family: var(--mono); font-size: 12.5px; color: #7FB7E4; letter-spacing: .3px; } .sidebar-project-chip .chip-name { font-size: 16px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-project-chip:hover { border-color: var(--accent); } .sidebar-toggle-btn { border: 1px solid #C4CEDA; background: linear-gradient(180deg, #fff, #F4F8FC); color: #1C2733; border-radius: 8px; width: 32px; height: 32px; font-size: 19px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .sidebar-toggle-btn:hover { background: #F7F9FC; border-color: #AEB9C7; transform: translateY(-1px); box-shadow: var(--shadow-sm); } .create-project-link { height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border-radius: 999px; white-space: nowrap; font-size: 17.5px; font-weight: 700; letter-spacing: .2px; color: #fff; background: linear-gradient(135deg, #2E9AF0 0%, #1E73D8 100%); border: 1px solid rgba(28, 103, 187, .65); box-shadow: 0 8px 20px rgba(31, 111, 178, .28), inset 0 1px 0 rgba(255,255,255,.24); transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast); } .create-project-link:hover { text-decoration: none; color: #fff; transform: translateY(-1px); filter: brightness(1.03); box-shadow: 0 10px 24px rgba(31, 111, 178, .34), inset 0 1px 0 rgba(255,255,255,.24); } .project-switcher { height: 36px; border: 1px solid #C9D1DA; border-radius: 10px; background: linear-gradient(180deg, #fff, #F8FBFE); color: #1C2733; padding: 0 10px; max-width: min(380px, 42vw); box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 2px 8px rgba(16,24,40,.05); } .quick-search { position: relative; width: min(420px, 42vw); min-width: 220px; } .quick-search-input { width: 100%; height: 36px; border: 1px solid #C9D1DA; border-radius: 10px; padding: 0 12px; background: linear-gradient(180deg, #fff, #F8FBFE); color: #1C2733; box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 2px 8px rgba(16,24,40,.05); } .quick-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 28px rgba(11, 14, 18, .10); max-height: 320px; overflow: auto; display: none; animation: dcs-fade-in var(--transition-fast) both; } .notif-bell { position: relative; } .notif-bell-btn { position: relative; border: 1px solid #C9D1DA; background: linear-gradient(180deg, #fff, #F7FAFD); color: #1C2733; border-radius: 10px; width: 36px; height: 36px; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,.84), 0 2px 8px rgba(16,24,40,.05); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .notif-bell-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .notif-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; border-radius: 999px; background: var(--red); color: #fff; font-size: 14px; font-weight: 700; line-height: 16px; text-align: center; padding: 0 4px; display: none; } .notif-dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 90; width: min(380px, 86vw); background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 14px 30px rgba(11, 14, 18, .12); max-height: 420px; overflow: auto; display: none; animation: dcs-fade-in var(--transition-fast) both; } .notif-item, .quick-search-results a { transition: background var(--transition-fast); } .notif-item:hover, .quick-search-results a:hover { background: var(--surface-soft) !important; } .global-alert-region { position: sticky; top: 0; z-index: 40; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 0; pointer-events: none; } .content { flex: 1; overflow-y: auto; padding: 24px 26px 34px; width: 100%; max-width: var(--content-max-width); } .page-header { background: linear-gradient(135deg, rgba(255,255,255,.93), rgba(247,251,255,.88)); border: 1px solid #DBE6F2; border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-sm); margin-bottom: 14px; } .kpi-card { transition: transform var(--transition-fast), box-shadow var(--transition-base), border-color var(--transition-fast), background var(--transition-base); } .kpi-link:hover .kpi-card { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #CDD8E4; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--ring); } /* ---------- Page bits ---------- */ .page-header h1 { margin: 0 0 4px; font-size: 22px; } .page-subtitle { color: var(--text-dim); font-size: 17px; margin: 0 0 20px; } .dashboard-header { display: flex; align-items: center; gap: 14px; } .dashboard-header-brand { width: 120px; min-width: 120px; } .dashboard-header-logo { display: block; width: 100%; height: auto; max-height: 72px; object-fit: contain; } .dashboard-header-text { min-width: 0; } .dashboard-header .page-subtitle { margin-bottom: 0; } .dashboard-header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex-shrink: 0; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .kpi-card { background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,252,255,.92)); border: 1px solid #DBE4EE; border-radius: 12px; padding: 16px 18px; border-top: 3px solid var(--accent); box-shadow: var(--shadow-sm); } .kpi-label { font-size: 16px; color: var(--text-dim); font-weight: 600; } .kpi-value { font-size: 33px; font-weight: 700; font-family: var(--mono); margin-top: 6px; color: var(--accent); } /* ---------- Dashboard semantic classes ---------- */ .dashboard-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 14px; } .kpi-link { display: block; text-decoration: none; color: inherit; } .kpi-link:hover { text-decoration: none; } .kpi-meta { margin-top: 4px; font-size: 16px; color: var(--text-dim); } .kpi-card-blue { border-top-color: var(--accent); } .kpi-card-red { border-top-color: var(--red); } .kpi-card-amber { border-top-color: var(--amber); } .kpi-card-green { border-top-color: var(--green); } .kpi-card-orange { border-top-color: var(--orange); } .kpi-value-blue { color: var(--accent); } .kpi-value-red { color: var(--red); } .kpi-value-amber { color: var(--amber); } .kpi-value-green { color: var(--green); } .kpi-value-orange { color: var(--orange); } .dashboard-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .dashboard-grid-main { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .dashboard-stack { display: flex; flex-direction: column; gap: 14px; } .dashboard-panel { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,254,255,.92)); border: 1px solid #DCE4EE; border-radius: 12px; padding: 18px; box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), box-shadow var(--transition-base), border-color var(--transition-fast); } .dashboard-panel:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #CED9E6; } .dashboard-panel-title { font-size: 17.5px; font-weight: 700; margin-bottom: 12px; } .dashboard-panel-title.tight { margin-bottom: 10px; } .dashboard-panel-sub { margin: -6px 0 12px; font-size: 16px; color: var(--text-dim); line-height: 1.4; } .portfolio-project-card { --health-color: var(--border); display: block; background: #fff; border: 1px solid var(--border); border-inline-start: 4px solid var(--health-color); border-radius: 10px; padding: 15px 17px; color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04); transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .portfolio-project-card:hover { box-shadow: var(--shadow-md); border-color: #A9C3DC; border-inline-start-color: var(--health-color); transform: translateY(-2px); } .portfolio-project-card:active { transform: translateY(0); } .portfolio-project-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :root[data-theme="dark"] .portfolio-project-card { background: #1E252E; } :root[data-theme="dark"] .portfolio-project-card:hover { border-color: #3A5A78; border-inline-start-color: var(--health-color); } .ppc-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .ppc-logo { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; border: 1px solid var(--border-soft); background: #fff; flex-shrink: 0; } .ppc-title-block { flex: 1; min-width: 0; } .ppc-name { font-weight: 700; font-size: 19px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ppc-code { font-family: var(--mono); font-size: 15px; color: var(--text-dim); margin-top: 2px; } .ppc-header .status-chip { flex-shrink: 0; } .ppc-meta { font-size: 15.5px; color: var(--text-dim); margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 5px 10px; } .portfolio-project-stats, .ppc-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 2px 0 12px; } .portfolio-project-stats > div, .ppc-stat { display: flex; flex-direction: column; align-items: center; padding: 7px 2px; border-inline-start: 1px solid var(--border-soft); } .portfolio-project-stats > div:first-child, .ppc-stat:first-child { border-inline-start: none; } .portfolio-project-stats .n, .ppc-stat .n { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .portfolio-project-stats .l, .ppc-stat .l { font-size: 13.5px; color: var(--text-dim); letter-spacing: .3px; text-transform: uppercase; margin-top: 1px; } .ppc-stat.is-late { background: var(--red-bg); border-radius: 6px; border-inline-start-color: transparent; } .ppc-stat.is-late .n { color: var(--red); } .ppc-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px solid var(--border-soft); } .ppc-last-activity { font-size: 15px; color: var(--text-dim); } .ppc-cta { font-size: 16.5px; font-weight: 700; color: var(--accent); white-space: nowrap; } .chart-canvas { max-width: 100%; } .bar-list { display: flex; flex-direction: column; gap: 9px; } .bar-row { display: grid; grid-template-columns: 64px 1fr 28px; gap: 10px; align-items: center; } .bar-row-site { grid-template-columns: 110px 1fr 28px; } .bar-label-age { font-size: 16px; color: var(--text-dim); font-family: var(--mono); } .bar-label-site { font-size: 16px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-track { height: 14px; background: var(--border-soft); border-radius: 4px; overflow: hidden; display: block; } .bar-fill { display: block; height: 100%; border-radius: 4px; } .bar-fill-blue { background: var(--accent); } .bar-fill-orange { background: var(--orange); } .bar-fill-red { background: var(--red); } .bar-value { font-size: 16px; font-family: var(--mono); font-weight: 600; text-align: right; } .dashboard-empty { font-size: 16.5px; color: var(--text-dim); } .attention-list { display: flex; flex-direction: column; } .attention-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border-soft); } .attention-age { width: 40px; font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--accent-dark); } .attention-age.late { color: var(--red); } .attention-doc { font-family: var(--mono); font-size: 15.5px; color: var(--accent-dark); font-weight: 600; } .attention-subject { font-size: 16px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attention-type { font-size: 14.5px; color: var(--text-dim); } .activity-list { display: flex; flex-direction: column; } .activity-row { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); align-items: baseline; } .activity-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; position: relative; top: -1px; } .activity-text { flex: 1; font-size: 16.5px; color: #3A4450; line-height: 1.45; } .activity-doc { font-family: var(--mono); font-size: 15.5px; font-weight: 600; } .activity-time { font-size: 15px; color: var(--text-faint); white-space: nowrap; } .reminder-form { display: flex; gap: 8px; margin-bottom: 12px; } .reminder-form input[type="text"] { flex: 1; border: 1px solid #C9D1DA; border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 17px; } .reminder-form input[type="date"] { border: 1px solid #C9D1DA; border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 17px; } .reminder-list { display: flex; flex-direction: column; } .reminder-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border-soft); } .reminder-due { width: 44px; font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--accent-dark); flex-shrink: 0; } .reminder-due.late { color: var(--red); } .reminder-msg { flex: 1; font-size: 16.5px; color: #3A4450; } .reminder-doc { margin-left: 6px; font-family: var(--mono); font-size: 14.5px; color: var(--text-dim); } .reminder-dismiss { border: none; background: none; cursor: pointer; color: var(--text-faint); font-size: 19px; line-height: 1; padding: 2px 4px; flex-shrink: 0; } .reminder-dismiss:hover { color: var(--red); } @media (max-width: 1180px) { .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(190px, 1fr)); } } @media (max-width: 980px) { .dashboard-grid-2, .dashboard-grid-main { grid-template-columns: 1fr; } } @media (max-width: 640px) { .dashboard-kpi-grid { grid-template-columns: 1fr; } .dashboard-header { gap: 10px; align-items: flex-start; flex-wrap: wrap; } .dashboard-header-brand { width: 88px; min-width: 88px; } .dashboard-header-logo { max-height: 56px; } .dashboard-header-text { flex: 1 1 100%; } .dashboard-header-actions { width: 100%; } .dashboard-header-actions .btn { flex: 1 1 auto; } } /* ---------- Forms & buttons ---------- */ .field-label { display: block; font-size: 16px; font-weight: 600; color: #48525E; margin-bottom: 14px; } .field-label input, .field-label select, .field-label textarea { display: block; width: 100%; margin-top: 6px; border: 1px solid #C9D1DA; border-radius: 7px; padding: 14px 14px; font: inherit; font-size: 18px; background: #fff; color: var(--text); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .field-label input:hover, .field-label select:hover, .field-label textarea:hover { border-color: #AEB9C7; } .field-label input:focus, .field-label select:focus, .field-label textarea:focus, input:focus, select:focus, textarea:focus { outline: none; box-shadow: var(--ring); border-color: var(--accent); } .input-invalid { border-color: #C42127 !important; } .field-error-msg { color: #C42127; font-size: 15.5px; margin-top: -10px; margin-bottom: 12px; } .btn { border: none; border-radius: 8px; padding: 14px 22px; font: inherit; font-weight: 600; font-size: 17.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast); } .btn:not(:disabled):hover { transform: translateY(-1px); } .btn:not(:disabled):active { transform: translateY(0); filter: brightness(.97); } .btn:disabled { cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, #2E9AF0, var(--accent) 55%, var(--accent-dark)); color: #fff; box-shadow: 0 6px 16px rgba(31, 111, 178, .26), inset 0 1px 0 rgba(255,255,255,.2); } .btn-primary:hover { box-shadow: 0 10px 22px rgba(31, 111, 178, .32), inset 0 1px 0 rgba(255,255,255,.24); } .btn-secondary, button.btn[style*="background:#fff"] { background: linear-gradient(180deg, #fff, #F6F9FC); border: 1px solid #C9D1DA; color: #2A3542; box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(16,24,40,.05); } .btn-secondary:hover { border-color: #AEB9C7; background: #fff; } .btn-danger { background: linear-gradient(135deg, #E4494D, var(--red)); color: #fff; box-shadow: 0 6px 16px rgba(227, 34, 39, .24); } .btn-danger:hover { filter: brightness(1.04); } .btn-ghost { background: transparent; border: 1px dashed #C9D1DA; color: var(--text-dim); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); } .btn-sm { padding: 9px 16px; font-size: 16px; border-radius: 6px; min-height: 36px; } .btn-block { width: 100%; } .alert { border-radius: 7px; padding: 10px 12px; font-size: 16.5px; margin-bottom: 14px; animation: dcs-fade-in var(--transition-base) both; } .alert-error { background: var(--red-bg); color: #C42127; } /* Buttons authored with legacy inline style="background:#fff;border:1px solid #C9D1DA;" (login/cancel/etc.) still get the shared hover lift + shadow above via .btn; this refines their surface. */ button.btn[style*="#fff"]:not(.btn-primary):not(.btn-danger) { box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(16,24,40,.05); } button.btn[style*="#fff"]:not(.btn-primary):not(.btn-danger):hover { border-color: #AEB9C7 !important; box-shadow: var(--shadow-sm); } /* ---------- Native tables (admin matrices, import previews) ---------- */ table thead th { font-weight: 700; } table tbody tr { transition: background var(--transition-fast); } table tbody tr:hover td { background: var(--surface-soft); } th, td { transition: background var(--transition-fast); } /* ---------- Auth screen ---------- */ .auth-body { margin: 0; } .auth-split { display: flex; min-height: 100vh; } .auth-brand-panel { width: 44%; min-width: 420px; color: #fff; position: relative; overflow: hidden; background: radial-gradient(circle at 15% -10%, rgba(43,140,216,.35) 0%, transparent 45%), radial-gradient(circle at 100% 110%, rgba(43,140,216,.22) 0%, transparent 50%), linear-gradient(190deg, #111825 0%, var(--navy) 60%, #0A0D12 100%); display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 48px 56px; } .auth-brand-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle at 30% 30%, #000 0%, transparent 68%); } .auth-logo { width: 140px; position: relative; filter: drop-shadow(0 8px 20px rgba(0,0,0,.35)); } .brand-eyebrow { font-size: 16px; letter-spacing: 2.5px; color: #7FB7E4; font-weight: 700; text-transform: uppercase; position: relative; } .auth-brand-text { position: relative; } .auth-brand-text h1 { font-size: 40px; line-height: 1.15; margin: 14px 0 16px; letter-spacing: -.5px; } .auth-brand-text p { color: #9AA5B1; line-height: 1.6; max-width: 380px; } .auth-form-panel { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--bg-gradient); } .auth-card { width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 38px; box-shadow: var(--shadow-lg); animation: dcs-pop-in var(--transition-base) both; } .auth-card h2 { margin: 0 0 4px; font-size: 25px; letter-spacing: -.2px; } .auth-sub { color: var(--text-dim); font-size: 17px; margin: 0 0 22px; } .auth-card .btn-primary { margin-top: 6px; height: 44px; font-size: 18px; letter-spacing: .2px; } @media (max-width: 860px) { .auth-split { flex-direction: column; } .auth-brand-panel { width: 100%; min-width: 0; padding: 36px 28px; } .auth-brand-text h1 { font-size: 31px; } .auth-form-panel { padding: 32px 16px; } .auth-card { width: 100%; max-width: 380px; } } /* Admin detail pages (project settings, document type settings) lay out two side-by-side panels via .two-col-panel — stack them on narrow screens. Inline grid-template-columns beats a plain stylesheet rule, so this needs !important to win without resorting to a broad attribute-substring selector (which would also match unrelated multi-column data-grid rows). */ @media (max-width: 860px) { .two-col-panel { grid-template-columns: 1fr !important; } } /* ---------- Status chips (shared by registers, added Prompt 6) ---------- */ .status-chip { font-size: 14.5px; font-weight: 700; border-radius: 4px; padding: 3px 7px; letter-spacing: .4px; white-space: nowrap; display: inline-block; } /* ---------- Chat thread (Contact Admin) ---------- */ .chat-thread { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; } .chat-bubble { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 15.5px; line-height: 1.45; white-space: pre-wrap; } .chat-bubble-them { align-self: flex-start; background: #F1F3F5; color: inherit; border-bottom-left-radius: 4px; } .chat-bubble-me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; } :root[data-theme="dark"] .chat-bubble-them { background: #26303B; } .chat-bubble-meta { font-size: 12px; opacity: .75; margin-top: 4px; display: block; } .chat-reply-form { display: flex; gap: 8px; margin-top: 4px; align-items: flex-end; } .chat-reply-form textarea { flex: 1; resize: vertical; min-height: 44px; max-height: 160px; font-size: 15px; padding: 10px 12px; border-radius: 8px; border: 1.5px solid var(--border); font-family: inherit; box-sizing: border-box; } .chat-reply-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* ---------- Error pages ---------- */ .error-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background: var(--bg-gradient); font-family: var(--font); padding: 24px; } .error-card { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 48px 44px; box-shadow: var(--shadow-lg); max-width: 420px; width: 100%; animation: dcs-pop-in var(--transition-base) both; } .error-card .error-icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 31px; background: var(--red-bg); color: var(--red); } .error-card h1 { font-size: 58px; margin: 0; line-height: 1; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--navy) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; } .error-card p { color: var(--text-dim); font-size: 18.5px; margin: 14px 0 22px; line-height: 1.5; } .error-card a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 17.5px; color: #fff; background: linear-gradient(135deg, #2E9AF0, var(--accent-dark)); padding: 11px 22px; border-radius: 999px; box-shadow: 0 8px 20px rgba(31,111,178,.28); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .error-card a:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(31,111,178,.34); } /* ---------- Smart Alerts / Toasts ---------- */ #toast-container { position: fixed; top: 16px; right: 16px; z-index: 999; display: flex; flex-direction: column; gap: 8px; max-width: min(92vw, 460px); } .toast { background: var(--navy); color: #fff; border: 1px solid rgba(255,255,255,.08); padding: 10px 12px; border-radius: 10px; font-size: 17px; box-shadow: 0 10px 28px rgba(0,0,0,.28); display: flex; gap: 10px; align-items: flex-start; animation: dcs-slide-in-right var(--transition-base) both; } .toast.error { background: #8B1D1F; border-color: rgba(255,255,255,.14); } .toast.success { background: #126237; border-color: rgba(255,255,255,.14); } .toast.warning { background: #7A5105; border-color: rgba(255,255,255,.14); } .toast.info { background: #1C4F7A; border-color: rgba(255,255,255,.14); } .toast-icon { font-size: 18px; line-height: 1.2; margin-top: 1px; } .toast-body { flex: 1; min-width: 0; } .toast-title { font-weight: 700; margin-bottom: 2px; } .toast-msg { word-break: break-word; } .toast-dismiss { background: transparent; border: none; color: rgba(255,255,255,.84); cursor: pointer; padding: 0; font-size: 18px; line-height: 1; } .toast-dismiss:hover { color: #fff; } .global-alert { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); padding: 9px 11px; box-shadow: 0 4px 12px rgba(18, 32, 48, .06); } .global-alert.warning { background: var(--amber-bg); border-color: #EDD7AC; color: #684706; } .global-alert.error { background: var(--red-bg); border-color: #F0B7BA; color: #7E1F23; } .global-alert.info { background: #E7F2FD; border-color: #C8DEF5; color: #114976; } .global-alert.success { background: var(--green-bg); border-color: #BFE4CC; color: #0C5A31; } .global-alert .msg { flex: 1; font-size: 16.5px; line-height: 1.45; } .global-alert .dismiss { border: none; background: transparent; color: inherit; font-size: 18px; cursor: pointer; line-height: 1; padding: 0; } /* ---------- Modal overlay (built by DCS.openModal in app.js) ---------- */ #modal-overlay { animation: dcs-fade-in-simple var(--transition-fast) both; } #modal-overlay > * { animation: dcs-pop-in var(--transition-base) both; box-shadow: var(--shadow-lg) !important; } #modal-overlay form h3, #modal-overlay div h3 { letter-spacing: -.1px; } /* Every modal is opened as a direct child of #modal-overlay with a fixed inline width (320-440px) — cap it globally so phones never get horizontal overflow. */ #modal-overlay > * { max-width: calc(100vw - 32px) !important; } /* ---------- Reusable horizontal-scroll wrapper for fixed-width grid/table listings ---------- */ .grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Reusable 4-column filter bar (advanced search) — collapses so filter selects never get squeezed narrower than they can render. */ @media (max-width: 860px) { .filter-grid-4 { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 520px) { .filter-grid-4 { grid-template-columns: 1fr !important; } } /* Import wizard: label/select mapping rows, revision-block 4-up columns, and the report's KPI card row — all stack on narrow screens. */ @media (max-width: 640px) { .map-row { grid-template-columns: 1fr !important; gap: 4px !important; } .block-cols-4 { grid-template-columns: repeat(2, 1fr) !important; } .report-cards { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 420px) { .report-cards { grid-template-columns: 1fr !important; } } /* Reports & backups landing page — 3-up link cards. */ @media (max-width: 860px) { .card-grid-3 { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 560px) { .card-grid-3 { grid-template-columns: 1fr !important; } } /* ---------- Universal register grid (rendered by register.js) ---------- */ /* Grid items default to min-width:auto (not 0), so a long unbreakable value (e.g. a site/discipline name) refuses to shrink to its column's track and ignores the overflow:hidden/ellipsis set on the text inside it. Because each row — and the header — is its own independent grid (they don't share column tracks the way an HTML table would), one oversized cell doesn't just clip badly, it throws that whole row out of alignment with every other row. Forcing min-width:0 here is what makes text-overflow:ellipsis actually work and keeps every row's columns aligned with the header. */ .doc-row > div, .doc-row-header > div, .revision-cycle-row > * { min-width: 0; } .doc-row { transition: background var(--transition-fast); } .doc-row:hover { background: var(--surface-soft); } .doc-row:active { background: var(--accent-soft); } .btn-expand { border-radius: 6px; transition: background var(--transition-fast), color var(--transition-fast); } .btn-expand:hover { background: var(--accent-soft); color: var(--accent-dark) !important; } .revision-panel { animation: dcs-fade-in-simple var(--transition-fast) both; } .direction-tab { transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .direction-tab:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .status-chip { transition: transform var(--transition-fast); } .status-select, .upload-kind { transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .status-select:hover, .upload-kind:hover { border-color: var(--accent) !important; } /* ---------- Generic responsive safety ---------- */ img, canvas, svg, video { max-width: 100%; height: auto; } table { width: 100%; border-collapse: collapse; } .table-wrap, .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .field-label input, .field-label select, .field-label textarea, .btn, .project-switcher, .quick-search-input { max-width: 100%; } .field-label textarea { min-height: 96px; resize: vertical; } /* ---------- Large tablets ---------- */ @media (max-width: 1180px) { :root { --content-max-width: 100%; } .topbar-crumb { font-size: 22px; } .project-switcher { max-width: min(320px, 40vw); } .quick-search { width: min(360px, 40vw); } } /* ---------- Tablet / small laptop ---------- */ @media (max-width: 980px) { .app-shell { position: relative; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(84vw, 300px); max-width: 300px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 12px 30px rgba(0,0,0,.24); } .app-shell.sidebar-open .sidebar { transform: translateX(0); } .sidebar-close-btn { display: inline-flex; } /* Tap-outside-to-close for the mobile drawer. Sits below .sidebar (70) and .topbar (71) so both stay usable while it's up, above plain content. */ .app-shell.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 69; background: rgba(10, 14, 20, .5); animation: dcs-fade-in-simple var(--transition-fast) both; } .main-area { width: 100%; } .topbar { position: sticky; top: 0; /* Above .sidebar's z-index:70 (not just its own previous 65) — the mobile drawer is position:fixed and was otherwise stacking on top of the topbar and swallowing clicks on .sidebar-toggle-btn, leaving no way to close the menu once opened. */ z-index: 71; padding: 10px 12px; gap: 8px; align-items: center; margin: 0; border-radius: 0; border-left: none; border-right: none; border-top: none; box-shadow: 0 6px 18px rgba(13, 27, 44, .10); min-height: 62px; } .topbar-left { width: 100%; min-width: 0; order: 1; } .topbar-crumb { font-size: 20px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-spacer { display: none; } /* Every direct .topbar child needs an explicit order here — anything left unset defaults to order:0 and jumps ahead of .topbar-left (order:1), which is what was pushing the notification bell (and the theme/language/ help buttons) onto their own row above the crumb/hamburger row instead of grouping with the rest of the icon row. */ .notif-bell, .pref-controls, .help-trigger-btn { order: 2; } .project-switcher { order: 3; width: 100%; max-width: 100%; } .create-project-link { order: 3; width: 100%; justify-content: center; height: 38px; font-size: 17px; } .quick-search { order: 4; width: 100%; min-width: 0; } .global-alert-region { position: static; padding: 8px 12px 0; } .page-crumb-bar { margin: 8px 12px 0; padding-bottom: 8px; } .breadcrumb { font-size: 14px; } .breadcrumb .crumb-project, .breadcrumb .crumb-current { max-width: 220px; } .content { padding: 14px 12px 18px; } .page-header { border-radius: 10px; padding: 12px; margin-bottom: 12px; } .dashboard-panel { padding: 14px; } .dashboard-panel-title { font-size: 17px; } #toast-container { left: 12px; right: 12px; top: auto; bottom: 12px; max-width: none; } } /* ---------- Touch targets (real touchscreens only — no-op for mouse/trackpad) ---------- Several icon-only controls are sized to their glyph (14-15px) with no padding, well under the ~40-44px minimum comfortable tap target. Bump the hit area via padding without changing the visual glyph size or desktop appearance. */ @media (pointer: coarse) { .icon-btn { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; } .btn-expand { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; } .btn-icon-sm { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; } .sidebar-toggle-btn { min-width: 40px; min-height: 40px; } .notif-bell-btn, .icon-toggle-btn { min-width: 40px; min-height: 40px; } .reminder-dismiss, .toast-dismiss, .global-alert .dismiss { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; } input[type="checkbox"], input[type="radio"] { width: 19px; height: 19px; } } /* ---------- Mobile ---------- */ @media (max-width: 640px) { .sidebar-brand { padding: 14px 12px 10px; } .sidebar-nav { padding: 10px; } .nav-item { padding: 10px 10px; font-size: 17px; margin-bottom: 5px; } .sidebar-footer { padding: 10px 12px; } .topbar { min-height: 52px; padding: 8px 10px; margin: 0; border-radius: 0; } .topbar-left { gap: 8px; } .topbar-crumb { font-size: 19px; } .sidebar-toggle-btn { width: 30px; height: 30px; font-size: 18px; } .project-switcher, .quick-search-input, .notif-bell-btn { height: 36px; } .create-project-link { font-size: 19px; } .page-crumb-bar { margin: 6px 10px 0; } .page-crumb-back { width: 100%; justify-content: center; } .content { padding: 12px 10px 16px; } .dashboard-panel { border-radius: 8px; padding: 12px; } .bar-row { grid-template-columns: 56px 1fr 24px; gap: 8px; } .bar-row-site { grid-template-columns: 90px 1fr 24px; } .activity-row, .attention-row { gap: 8px; } .global-alert { padding: 8px 10px; border-radius: 7px; } .global-alert .msg { font-size: 16px; } }