@import url('ui-enhancements.css'); :root { --color-bg: #f3f5f9; --color-surface: #ffffff; --color-surface-raised: #f8fafd; --color-surface-hover: #f3f8ff; --color-surface-stripe: #fafbfd; --color-surface-active: #ddeeff; --color-border: #dde3ec; --color-border-subtle: #e9edf4; --color-border-strong: #b8c5d6; --color-text: #16202f; --color-text-secondary: #4c5a6d; --color-muted: #64748b; --color-primary: #1f5fb2; --color-primary-dark: #174f96; --color-primary-light: #e8f0fb; --color-success: #1a7a4a; --color-danger: #c0372c; --color-warning: #b56b08; --color-accent: #a97614; --color-accent-soft: #f7efdd; --color-success-soft: #e8f7ee; --color-success-text: #1a7a4a; --color-success-border: #b5e0c8; --color-danger-soft: #fdecea; --color-danger-text: #c0372c; --color-danger-border: #f5c6c0; --color-warning-soft: #fef5e4; --color-warning-text: #96590a; --color-warning-border: #f5d9a0; --color-info-soft: #e8f0fe; --color-info-text: #1a56c4; --color-info-border: #c2d6f2; --color-purple-soft: #ede9fe; --color-purple-text: #5b21b6; --ramp-1: #86b6ef; --ramp-2: #5598e7; --ramp-3: #2a78d6; --ramp-4: #256abf; --ramp-5: #1c5cab; --ramp-6: #104281; --color-thead-bg: #f4f7fb; --color-btn-bg: #eaedf2; --color-btn-bg-hover: #dde2ea; --color-toast-bg: #14253c; --color-scrollbar: var(--color-scrollbar); --color-scrollbar-hover:var(--color-scrollbar-hover); --topbar-bg: rgba(255, 255, 255, 0.97); --overlay-veil: rgba(255, 255, 255, 0.65); --curtain-bg: rgba(255, 255, 255, 0.84); --curtain-border: rgba(255, 255, 255, 0.65); --modal-border: rgba(255, 255, 255, 0.75); --color-sidebar-bg: #0c1f39; --color-sidebar-surface: rgba(255, 255, 255, 0.1); --color-sidebar-text: #b8c8e0; --color-sidebar-active: #ffffff; --color-sidebar-border: rgba(255, 255, 255, 0.14); --color-sidebar-link-hover: rgba(255, 255, 255, 0.1); --color-sidebar-link-active: rgba(255, 255, 255, 0.16); --color-sidebar-heading: rgba(255, 255, 255, 0.45); --color-sidebar-scrollbar: rgba(255, 255, 255, 0.22); --color-sidebar-scrollbar-hover: rgba(255, 255, 255, 0.35); --gradient-sidebar: linear-gradient(185deg, #0c1f39 0%, #103056 48%, #0a1927 100%); --sidebar-width: 248px; --sidebar-width-narrow: 56px; --radius-xs: 3px; --radius-sm: 5px; --radius: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-1: 0 1px 4px rgba(15, 23, 42, 0.09), 0 0 0 1px rgba(15, 23, 42, 0.03); --shadow-2: 0 4px 16px rgba(15, 23, 42, 0.13); --shadow-3: 0 12px 40px rgba(15, 23, 42, 0.18); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.55); --font: "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "Cascadia Mono", "SF Mono", "Fira Code", "Consolas", monospace; --font-size-base: 14px; --transition-fast: 0.14s ease; --transition-base: 0.22s ease; --focus-ring: 0 0 0 3px rgba(31, 95, 178, 0.22); --topbar-h: 58px; --content-max: 1300px; color-scheme: light; } /* ============================================================ Keystone dark theme — activated by . The theme boot script in app_head_meta.php stamps the attribute before first paint; default is light. ============================================================ */ :root[data-theme="dark"] { --color-bg: #0d1322; --color-surface: #151d30; --color-surface-raised: #1a2338; --color-surface-hover: #1d2942; --color-surface-stripe: #182238; --color-surface-active: #24345a; --color-border: #27324a; --color-border-subtle: #202a40; --color-border-strong: #35415e; --color-text: #e8edf6; --color-text-secondary: #a3b0c5; --color-muted: #8593a9; --color-primary: #5b96e8; --color-primary-dark: #8ab4f0; --color-primary-light: rgba(91, 150, 232, 0.14); --color-success: #2e9e63; --color-danger: #e05252; --color-warning: #d98a1c; --color-accent: #e3a63d; --color-accent-soft: rgba(227, 166, 61, 0.13); --color-success-soft: rgba(46, 158, 99, 0.15); --color-success-text: #6fd08a; --color-success-border: rgba(46, 158, 99, 0.4); --color-danger-soft: rgba(224, 82, 82, 0.14); --color-danger-text: #f09090; --color-danger-border: rgba(224, 82, 82, 0.4); --color-warning-soft: rgba(217, 138, 28, 0.15); --color-warning-text: #f0bd6e; --color-warning-border: rgba(217, 138, 28, 0.4); --color-info-soft: rgba(91, 150, 232, 0.14); --color-info-text: #8ab4f0; --color-info-border: rgba(91, 150, 232, 0.35); --color-purple-soft: rgba(150, 120, 240, 0.16); --color-purple-text: #b7a4f2; --ramp-1: #b7d3f6; --ramp-2: #86b6ef; --ramp-3: #5598e7; --ramp-4: #3987e5; --ramp-5: #256abf; --ramp-6: #184f95; --color-thead-bg: #1a2338; --color-btn-bg: #232e46; --color-btn-bg-hover: #2b3854; --color-toast-bg: #223050; --color-scrollbar: #33405c; --color-scrollbar-hover:#45536f; --topbar-bg: rgba(18, 25, 42, 0.95); --overlay-veil: rgba(13, 19, 34, 0.6); --curtain-bg: rgba(26, 35, 56, 0.92); --curtain-border: rgba(255, 255, 255, 0.12); --modal-border: rgba(255, 255, 255, 0.08); --color-sidebar-bg: #0c1f39; --color-sidebar-surface: rgba(255, 255, 255, 0.1); --color-sidebar-text: #b8c8e0; --color-sidebar-active: #ffffff; --color-sidebar-border: rgba(255, 255, 255, 0.14); --color-sidebar-link-hover: rgba(255, 255, 255, 0.1); --color-sidebar-link-active: rgba(255, 255, 255, 0.16); --color-sidebar-heading: rgba(255, 255, 255, 0.45); --color-sidebar-scrollbar: rgba(255, 255, 255, 0.22); --color-sidebar-scrollbar-hover: rgba(255, 255, 255, 0.35); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-1: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.03); --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.42); --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.55); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); --focus-ring: 0 0 0 3px rgba(91, 150, 232, 0.3); /* ui-enhancements.css tokens, re-themed */ --gradient-page: linear-gradient(160deg, #0c1220 0%, #0e1526 50%, #0c1322 100%); --gradient-primary: linear-gradient(135deg, #2a6fd0 0%, #3b82e6 60%, #2159ab 100%); --gradient-sidebar: linear-gradient(185deg, #132d54 0%, #0f2847 48%, #0c1f39 100%); --skeleton-base: #232e46; --skeleton-highlight: #2b3854; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); font-size: var(--font-size-base); line-height: 1.55; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-2); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-text); } h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; } p { margin: 0 0 var(--space-2); } ul, ol { margin: 0; padding-left: var(--space-4); } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: var(--font-mono); font-size: 0.88em; background: var(--color-surface-raised); padding: 2px 5px; border-radius: var(--radius-xs); color: var(--color-primary-dark); } :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } .skip-link { position: absolute; left: -999px; top: 4px; z-index: 9999; background: var(--color-primary); color: #fff; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-weight: 600; } .skip-link:focus { left: var(--space-2); } .app-shell { min-height: 100vh; min-height: 100dvh; } .app-main { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; transition: margin-left var(--transition-base); } /* Chromeless focus views (no sidebar) — reclaim full width */ .app-main.app-main--solo { margin-left: 0; width: 100%; max-width: none; } .content { flex: 1; padding: var(--space-4); } /* System announcements (Admin → Communication → Announcements) */ .app-announcements { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-4) 0; } .app-announcements[hidden] { display: none; } .app-announcement { display: flex; align-items: flex-start; gap: var(--space-3); padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-info-border, var(--color-border)); background: var(--color-info-soft); color: var(--color-info-text, var(--color-text)); box-shadow: var(--shadow-xs); } .app-announcement__body { flex: 1; min-width: 0; } .app-announcement__title { display: block; font-size: 0.95rem; margin-bottom: 2px; } .app-announcement__message { font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; } .app-announcement__dismiss { flex-shrink: 0; width: 28px; height: 28px; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; opacity: 0.7; } .app-announcement__dismiss:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); } :root[data-theme="dark"] .app-announcement__dismiss:hover { background: rgba(255, 255, 255, 0.08); } .topbar { height: var(--topbar-h); min-height: var(--topbar-h); max-height: var(--topbar-h); display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-3); background: var(--topbar-bg); border-bottom: 1px solid var(--color-border); padding: 0 var(--space-4); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 var(--color-border-subtle), 0 2px 8px rgba(15, 23, 42, 0.05); backdrop-filter: blur(10px); flex-shrink: 0; overflow: hidden; box-sizing: border-box; } .topbar__title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .topbar__tools { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex-shrink: 0; min-width: 0; flex-wrap: nowrap; } .topbar__tools .searchbox { position: relative; z-index: 5; flex: 0 1 auto; min-width: 0; } .topbar__tools .searchbox input { width: min(200px, 100%); } /* Title left · tools right; logo overlaid in the middle (does not wrap the bar) */ .topbar--branded { display: flex; flex-wrap: nowrap; align-items: center; position: relative; gap: var(--space-2); } .topbar--branded .topbar__title { flex: 1 1 auto; min-width: 0; max-width: 38%; position: relative; z-index: 2; } .topbar-brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; text-align: center; max-width: 7rem; line-height: 0; } .topbar--branded .topbar__tools { flex: 0 1 auto; margin-left: auto; min-width: 0; max-width: 58%; justify-content: flex-end; position: relative; z-index: 2; } .topbar-brand__logo__img { max-height: 40px; max-width: 2.75rem; width: auto; height: auto; object-fit: contain; display: block; margin: 0 auto; opacity: 1; image-rendering: auto; } .topbar-brand__logo__text { font-size: 0.9rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } @media (max-width: 1100px) { .topbar--branded .topbar__title { max-width: 32%; } .topbar--branded .topbar__tools { max-width: 62%; } .topbar-brand { max-width: 5.5rem; } .topbar-brand__logo__img { max-height: 24px; max-width: 5.25rem; } } @media (max-width: 900px) { .topbar-brand__logo__img { max-height: 22px; max-width: 4.5rem; opacity: 1; } .topbar-brand__logo__text { opacity: 1; } } @media (max-width: 720px) { .topbar-brand { display: none; } .topbar--branded .topbar__title { max-width: 40%; } .topbar--branded .topbar__tools { max-width: 60%; } } .topbar__user-pill { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border-radius: 999px; background: var(--color-surface-raised); border: 1px solid var(--color-border); cursor: default; } .topbar__avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary) 0%, #2563c4 100%); color: #fff; font-size: 0.78rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; box-shadow: 0 2px 6px rgba(31, 95, 178, 0.3); } .topbar__avatar--has-photo { background: #fff; box-shadow: 0 0 0 1px var(--color-border), 0 1px 3px rgba(15, 23, 42, 0.12); } .topbar__avatar--wide { width: auto; min-width: 44px; max-width: 72px; height: 32px; border-radius: 8px; padding: 2px 6px; } .topbar__avatar--tall { width: 28px; height: 36px; border-radius: 8px; } .topbar__avatar-img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; } .topbar__avatar--wide .topbar__avatar-img, .topbar__avatar--tall .topbar__avatar-img { object-fit: contain; object-position: center; } /* Live date/time clock in the topbar */ .topbar__clock { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 999px; background: var(--color-surface-raised); border: 1px solid var(--color-border); color: var(--color-text); line-height: 1.05; user-select: none; } .topbar__clock-icon { display: inline-flex; align-items: center; color: var(--color-primary); flex-shrink: 0; } .topbar__clock-text { display: flex; flex-direction: column; min-width: 0; } .topbar__clock-time { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .topbar__clock-date { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); } @media (max-width: 1100px) { .topbar__clock-date { display: none; } .topbar__clock { padding: 6px 10px; } } @media (max-width: 900px) { .topbar__clock { display: none; } .topbar__user { max-width: 100px; } } .topbar__user { font-size: 0.85rem; font-weight: 600; color: var(--color-text); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; } .bell { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; line-height: 0; text-decoration: none; } .bell:hover { text-decoration: none; } .topbar__bell { width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: 50%; padding: 0; color: var(--color-primary); background: var(--color-surface-raised); box-shadow: var(--shadow-xs); transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; } .topbar__bell:hover { background: var(--color-primary-light); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(31, 95, 178, 0.2); text-decoration: none; } .topbar__bell:focus-visible { outline: 3px solid rgba(31, 95, 178, 0.32); outline-offset: 2px; } .bell__svg { display: block; } /* Theme toggle (light / dark) */ .topbar__theme { width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: 50%; padding: 0; color: var(--color-primary); background: var(--color-surface-raised); box-shadow: var(--shadow-xs); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } .topbar__theme:hover { background: var(--color-primary-light); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(31, 95, 178, 0.2); } .topbar__theme:focus-visible { outline: 3px solid rgba(31, 95, 178, 0.32); outline-offset: 2px; } .topbar__theme svg { width: 19px; height: 19px; display: block; } .topbar__theme .theme-icon--sun { display: none; } :root[data-theme="dark"] .topbar__theme .theme-icon--sun { display: block; } :root[data-theme="dark"] .topbar__theme .theme-icon--moon { display: none; } .bell__badge { position: absolute; top: -5px; right: -5px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: #fff; border-radius: 999px; font-size: 0.66rem; font-weight: 700; line-height: 1; padding: 0 5px; min-width: 18px; height: 18px; box-sizing: border-box; text-align: center; white-space: nowrap; border: 2px solid var(--color-surface); box-shadow: 0 1px 4px rgba(192, 57, 43, 0.4); } .bell__badge[hidden] { display: none; } .sidebar { width: var(--sidebar-width); height: 100vh; height: 100dvh; position: fixed; top: 0; left: 0; z-index: 150; background: var(--gradient-sidebar); color: var(--color-sidebar-text); display: flex; flex-direction: column; border-right: 1px solid var(--color-sidebar-border); overflow: hidden; transition: width var(--transition-base); } .sidebar__head { flex-shrink: 0; display: flex; align-items: center; justify-content: stretch; padding: var(--space-2) var(--space-2) 2px; border-bottom: 1px solid var(--color-sidebar-border); } .sidebar__toggle { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; padding: 9px 10px; border: 1px solid var(--color-sidebar-border); border-radius: var(--radius-md); background: var(--color-sidebar-surface); color: var(--color-sidebar-text); cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .sidebar__toggle:hover { background: var(--color-sidebar-link-active); border-color: rgba(255,255,255,0.24); color: var(--color-sidebar-active); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 4px 10px rgba(6, 14, 29, 0.28); transform: translateY(-1px); } .sidebar__toggle:active { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .sidebar__toggle:focus-visible { outline: 2px solid var(--color-sidebar-active); outline-offset: 2px; } .sidebar__toggle-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); } .sidebar__toggle-icon svg { width: 14px; height: 14px; display: block; } html[data-sidebar="collapsed"] .sidebar__toggle-icon--collapse { display: none; } html[data-sidebar="expanded"] .sidebar__toggle-icon--expand { display: none; } .sidebar__toggle-label { white-space: nowrap; color: inherit; } @media (min-width: 901px) { html[data-sidebar="collapsed"] .sidebar { width: var(--sidebar-width-narrow); } html[data-sidebar="collapsed"] .app-main { margin-left: var(--sidebar-width-narrow); } html[data-sidebar="collapsed"] .app-main.app-main--solo { margin-left: 0; } html[data-sidebar="collapsed"] .sidebar__head { justify-content: center; padding: var(--space-2) 4px 0; } html[data-sidebar="collapsed"] .sidebar__toggle { justify-content: center; padding: 9px; width: 100%; } html[data-sidebar="collapsed"] .sidebar__toggle-label, html[data-sidebar="collapsed"] .sidebar__label, html[data-sidebar="collapsed"] .sidebar__user-block, html[data-sidebar="collapsed"] .sidebar__brand { display: none; } html[data-sidebar="collapsed"] .sidebar__nav { padding: var(--space-1) 4px; } html[data-sidebar="collapsed"] .sidebar__link { justify-content: center; padding: 10px; gap: 0; } html[data-sidebar="collapsed"] .sidebar__badge { position: absolute; top: 4px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 0.6rem; } html[data-sidebar="collapsed"] .sidebar__link:hover { transform: none; } html[data-sidebar="collapsed"] .sidebar__nav-heading { display: none; } html[data-sidebar="collapsed"] .sidebar__nav-divider { margin: var(--space-1) 6px; } html[data-sidebar="collapsed"] .sidebar__footer { padding: var(--space-2) 4px; } html[data-sidebar="collapsed"] .sidebar__footer .sidebar__link { justify-content: center; } } @media (max-width: 900px) { .sidebar__head, .sidebar__toggle-label { display: none; } } .sidebar__brand { display: block; padding: 16px 14px 12px; text-decoration: none; flex-shrink: 0; border-bottom: 1px solid var(--color-border-subtle); } .sidebar__brand:hover { text-decoration: none; } .sidebar__logo { font-weight: 700; color: var(--color-text); font-size: 1.05rem; } .sidebar__logo__plate { display: flex; align-items: center; justify-content: center; padding: 10px 12px; border-radius: 12px; background: transparent; border: none; transition: transform var(--transition-base); } .sidebar__brand:hover .sidebar__logo__plate { transform: translateY(-1px); } .sidebar__logo__img { max-height: 42px; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; } .sidebar__logo__text { font-weight: 700; color: var(--color-text); font-size: 1.05rem; display: block; } .sidebar__nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--space-2) var(--space-1); scrollbar-width: thin; scrollbar-color: var(--color-sidebar-scrollbar) transparent; overscroll-behavior: contain; } .sidebar__nav::-webkit-scrollbar { width: 4px; } .sidebar__nav::-webkit-scrollbar-thumb { background: var(--color-sidebar-scrollbar); border-radius: 999px; } .sidebar__nav ul { list-style: none; margin: 0; padding: 0; } .sidebar__nav li { margin: 2px 0; } .sidebar__link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--color-sidebar-text); font-size: 0.9rem; border-left: none; position: relative; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .sidebar__link:hover { background: var(--color-sidebar-link-hover); color: var(--color-sidebar-active); text-decoration: none; transform: translateX(2px); } .sidebar__link.is-active { background: var(--color-sidebar-link-active); color: var(--color-sidebar-active); font-weight: 600; } .sidebar__icon { flex-shrink: 0; opacity: 0.82; } .sidebar__link.is-active .sidebar__icon { opacity: 1; } .sidebar__label { flex: 1; line-height: 1.3; } .sidebar__badge { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-danger); color: #fff; font-size: 0.66rem; font-weight: 700; line-height: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); } .sidebar__badge[hidden] { display: none; } .sidebar__link.is-active .sidebar__badge { box-shadow: 0 0 0 2px var(--color-sidebar-link-active); } .sidebar__link--logout { font-size: 0.87rem; opacity: 0.88; } .sidebar__link--impersonation-exit { background: var(--color-purple-soft); color: var(--color-purple-text); font-weight: 600; } .sidebar__link--impersonation-exit:hover { background: var(--color-purple-soft); color: var(--color-purple-text); filter: brightness(0.96); } .sidebar__link--impersonation-exit .sidebar__icon { color: var(--color-purple-text); } .sidebar__nav-divider { height: 1px; background: var(--color-sidebar-border); margin: var(--space-2) var(--space-2); list-style: none; } .sidebar__nav-heading { list-style: none; padding: var(--space-1) 14px var(--space-1); } .sidebar__nav-heading .sidebar__label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-sidebar-heading); white-space: nowrap; } @media (max-width: 900px) { .sidebar__nav-heading { display: none; } .sidebar__nav-divider { margin: var(--space-1) 6px; } } .sidebar__footer { flex-shrink: 0; padding: var(--space-3); border-top: 1px solid var(--color-sidebar-border); background: transparent; } .sidebar__user-block { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-2); padding: var(--space-2) var(--space-2); border-radius: var(--radius-sm); background: var(--color-sidebar-surface); border: 1px solid var(--color-sidebar-border); } .sidebar__user { font-weight: 600; color: var(--color-sidebar-active); font-size: 0.88rem; line-height: 1.35; } .sidebar__user-title { font-size: 0.74rem; color: var(--color-sidebar-text); display: block; margin-top: 1px; line-height: 1.35; } .card, .placeholder-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-1); } .muted { color: var(--color-muted); } .right { text-align: right; } .form { display: flex; flex-direction: column; gap: var(--space-2); } .form__label { display: flex; flex-direction: column; gap: var(--space-1); font-weight: 600; font-size: 0.875rem; color: var(--color-text-secondary); } .form__input, .form__select, .form__textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; font-size: 0.9rem; background: var(--color-surface); color: var(--color-text); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form__input:hover, .form__select:hover, .form__textarea:hover { border-color: var(--color-border-strong); } .form__input:focus, .form__select:focus, .form__textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); } .form__input--readonly, .form__input[readonly] { background: var(--color-surface-raised); color: var(--color-text-secondary); cursor: default; border-style: dashed; } .form__input--readonly:hover, .form__input[readonly]:hover { border-color: var(--color-border); } .form__input--readonly:focus, .form__input[readonly]:focus { border-color: var(--color-border); box-shadow: none; } .form__input--readonly.is-provisional { font-style: italic; } .form__textarea { min-height: 96px; resize: vertical; } .form__check { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 0.9rem; font-weight: 500; cursor: pointer; } .approver-tools { border-color: var(--color-border, #d0d5dd); } .approver-tools__row { margin-top: var(--space-1, 6px); display: flex; align-items: center; gap: var(--space-2, 10px); flex-wrap: wrap; } .approver-tools__docs { margin-top: var(--space-2, 10px); } .approver-doc__del { margin-left: var(--space-1, 6px); color: var(--color-danger, #b42318); } .notify-recipients__actions { display: flex; gap: var(--space-1, 6px); margin-bottom: var(--space-1, 6px); } .notify-recipients__list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; } .notify-recipients__list li { padding: 2px 0; } .notify-recipients__list .nr-name { font-weight: 600; } .notify-recipients__list .nr-reason::before { content: "· "; } .notify-recipients__list .nr-email { font-size: 0.85em; } .form__label.is-invalid .form__input, .form__label.is-invalid .form__select, .form__label.is-invalid .form__textarea { border-color: var(--color-danger); box-shadow: 0 0 0 2px rgba(192, 55, 44, 0.15); } .line-field.is-invalid .line-field__input, .line-field.is-invalid .line-field__input:disabled { border-color: var(--color-danger); box-shadow: 0 0 0 2px rgba(192, 55, 44, 0.15); } .fieldset.is-invalid { border-color: var(--color-danger); box-shadow: 0 0 0 2px rgba(192, 55, 44, 0.12); } .fieldset.is-invalid > .field-error { display: block; margin: 0 0 var(--space-2); } #attachRow.is-invalid { outline: 2px solid rgba(192, 55, 44, 0.35); outline-offset: 4px; border-radius: var(--radius-sm); padding: var(--space-2); } .field-error { color: var(--color-danger); font-weight: 500; font-size: 0.82rem; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); } .fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-3); background: var(--color-surface-raised); } .fieldset legend { font-weight: 700; padding: 0 var(--space-2); color: var(--color-primary-dark); font-size: 0.875rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 8px 18px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-sm); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; background: var(--color-btn-bg); color: var(--color-text); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); white-space: nowrap; text-decoration: none; } .btn:hover { background: var(--color-btn-bg-hover); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1); text-decoration: none; } .btn:active { transform: translateY(0); box-shadow: none; } .btn--primary { background: linear-gradient(135deg, var(--color-primary) 0%, #2563c4 60%, var(--color-primary-dark) 100%); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(31, 95, 178, 0.32); } .btn--primary:hover { background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%); box-shadow: 0 6px 18px rgba(31, 95, 178, 0.38); } .btn--danger { background: var(--color-danger); color: #fff; border-color: transparent; } .btn--danger:hover { background: #a32e25; } .btn--success { background: var(--color-success); color: #fff; border-color: transparent; } .btn--ghost { background: transparent; border: 1px solid var(--color-border); box-shadow: none; } .btn--ghost:hover { background: var(--color-surface-hover); } .btn--sm { padding: 4px 12px; font-size: 0.82rem; } .link-btn { background: none; border: none; color: var(--color-primary); cursor: pointer; padding: 0; font: inherit; font-weight: 600; text-decoration: none; transition: color var(--transition-fast); } .link-btn:hover { color: var(--color-primary-dark); text-decoration: underline; } .alert { padding: var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-3); font-size: 0.9rem; line-height: 1.5; } .alert--error, .alert--danger { background: var(--color-danger-soft); color: var(--color-danger-text); border: 1px solid var(--color-danger-border); } .alert--success { background: var(--color-success-soft); color: var(--color-success-text); border: 1px solid var(--color-success-border); } .alert--info { background: var(--color-info-soft); color: var(--color-info-text); border: 1px solid var(--color-info-border); } .alert--warning { background: var(--color-warning-soft); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); } .notice { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); margin: var(--space-2) 0; font-size: 0.9rem; } .notice--ok, .notice--success { background: var(--color-success-soft); color: var(--color-success-text); border: 1px solid var(--color-success-border); } .notice--info { background: var(--color-info-soft); color: var(--color-info-text); border: 1px solid var(--color-info-border); } .notice--warn { background: var(--color-warning-soft); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); } .notice--bad, .notice--error, .notice--danger { background: var(--color-danger-soft); color: var(--color-danger-text); border: 1px solid var(--color-danger-border); } .impersonation-banner { position: fixed; top: 0; left: var(--sidebar-width); right: 0; z-index: 260; display: flex; align-items: center; gap: var(--space-3); padding: 8px var(--space-4); background: linear-gradient(90deg, #5b21b6 0%, #6d28d9 100%); color: #fff; font-size: 0.875rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .impersonation-banner__text strong { font-weight: 600; } .impersonation-banner__meta { opacity: 0.85; font-size: 0.8125rem; margin-left: 0.35rem; } .impersonation-banner--super { background: linear-gradient(90deg, #1e40af 0%, #2563eb 100%); } .impersonation-banner__tag { display: inline-block; margin-left: 0.35rem; padding: 1px 6px; border-radius: var(--radius-xs); background: rgba(255, 255, 255, 0.2); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; } .impersonation-banner__exit { flex-shrink: 0; background: #ffffff; color: #5b21b6; border-color: #ffffff; } .impersonation-banner__exit:hover { background: #f3e8ff; color: #4c1d95; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 10px var(--space-3); border-bottom: 1px solid var(--color-border); } th { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.045em; color: var(--color-text-secondary); background: var(--color-thead-bg); white-space: nowrap; } tbody tr { transition: background var(--transition-fast); } tbody tr:hover { background: var(--color-surface-hover); } tbody tr:nth-child(even) { background: var(--color-surface-stripe); } tbody tr:nth-child(even):hover { background: var(--color-surface-hover); } .table-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: auto; box-shadow: var(--shadow-1); -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--color-scrollbar) transparent; } .table-wrap::-webkit-scrollbar { width: 7px; height: 7px; } .table-wrap::-webkit-scrollbar-thumb { background: var(--color-scrollbar); border-radius: 999px; } .table-wrap::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-hover); } .table-wrap table { min-width: 640px; } .table-wrap thead th { position: sticky; top: 0; z-index: 2; } .row-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } .badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: var(--color-btn-bg); color: var(--color-text-secondary); } .badge--on { background: var(--color-success-soft); color: var(--color-success-text); } .badge--off { background: var(--color-danger-soft); color: var(--color-danger-text); } .twm-flags { list-style: none; margin: 0 0 var(--space-3, 16px); padding: 0; display: flex; flex-direction: column; gap: 6px; } .twm-flag { padding: 8px 12px; border-radius: 6px; font-size: 0.85rem; border-left: 3px solid; } .twm-flag--warn { background: var(--color-warning-soft); border-color: var(--color-warning); color: var(--color-warning-text); } .twm-flag--error { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger-text); } .urg-low { background: var(--color-btn-bg); color: var(--color-text-secondary); } .urg-medium { background: var(--color-info-soft); color: var(--color-info-text); } .urg-high { background: var(--color-warning-soft); color: var(--color-warning-text); } .urg-critical { background: var(--color-danger-soft); color: var(--color-danger-text); } .st-approved, .st-paid, .st-closed, .st-collected { background: var(--color-success-soft); color: var(--color-success-text); } .st-rejected, .st-cancelled { background: var(--color-danger-soft); color: var(--color-danger-text); } .st-pending, .st-draft, .st-submitted { background: var(--color-info-soft); color: var(--color-info-text); } .st-processing, .st-invoice_processing, .st-issued { background: var(--color-warning-soft); color: var(--color-warning-text); } .modal { position: fixed; inset: 0; z-index: 1800; display: flex; align-items: center; justify-content: center; padding: var(--space-3); } .modal[hidden] { display: none; } .modal__backdrop { position: absolute; inset: 0; background: rgba(15, 28, 50, 0.52); backdrop-filter: blur(3px); } .modal__dialog { position: relative; background: var(--color-surface); border-radius: var(--radius-lg); width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; box-shadow: var(--shadow-3), 0 0 0 1px var(--modal-border); scrollbar-width: thin; scrollbar-color: var(--color-scrollbar) transparent; } .modal__dialog--wide { max-width: 780px; } .modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-surface-raised); border-radius: var(--radius-lg) var(--radius-lg) 0 0; position: sticky; top: 0; z-index: 2; } .modal__header h3 { margin: 0; font-size: 1.05rem; font-weight: 700; } .modal__header .req-open-full { margin-left: auto; margin-right: var(--space-2); flex-shrink: 0; font-size: 0.9rem; font-weight: 700; padding: 7px 16px; letter-spacing: 0.01em; } .modal__close { width: 34px; height: 34px; border-radius: 50%; background: none; border: none; font-size: 1.4rem; cursor: pointer; line-height: 1; color: var(--color-muted); display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast), color var(--transition-fast); } .modal__close:hover { background: var(--color-surface-hover); color: var(--color-text); } .modal__footer { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); } .modal__tabs { display: flex; gap: var(--space-1); padding: var(--space-2) var(--space-4) 0; border-bottom: 1px solid var(--color-border); background: var(--color-surface); } .modal__tab { border: none; background: none; cursor: pointer; padding: var(--space-2) var(--space-3); font: inherit; font-size: 0.9rem; color: var(--color-muted); border-bottom: 3px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); } .modal__tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; } .utab-panel { display: none; } .utab-panel.is-active { display: block; } .toast-stack { position: fixed; right: var(--space-3); bottom: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); z-index: 2500; } .toast { background: var(--color-toast-bg); color: #fff; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); box-shadow: var(--shadow-2); min-width: 220px; font-size: 0.9rem; font-weight: 500; } .toast--error { background: var(--color-danger); } .toast--info { background: var(--color-primary); } .toast--success { background: linear-gradient(135deg, #1a7a4a, #157a48); } .searchbox { position: relative; } .searchbox input { width: 240px; max-width: 50vw; padding: 7px 12px; border: 1px solid var(--color-border); border-radius: 999px; font: inherit; font-size: 0.9rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .searchbox input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); } .searchbox__results { position: absolute; top: calc(100% + 6px); right: 0; width: 360px; max-width: 90vw; max-height: 55vh; overflow: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-2); z-index: 1500; } .searchbox__results[hidden] { display: none; } .search-item { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--color-border-subtle); padding: var(--space-2) var(--space-3); cursor: pointer; font: inherit; font-size: 0.88rem; transition: background var(--transition-fast); } .search-item:hover { background: var(--color-surface-hover); } .search-item small { color: var(--color-muted); } .tabs { display: flex; gap: 2px; padding: 0 var(--space-4); background: var(--topbar-bg); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(8px); flex-wrap: wrap; } .tab { background: none; border: none; border-bottom: 3px solid transparent; padding: var(--space-3) var(--space-3); cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--color-muted); transition: color var(--transition-fast), border-color var(--transition-fast); } .tab:hover { color: var(--color-text); } .tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); } .tab[hidden] { display: none; } .tab-panel { display: none; } .tab-panel.is-active { display: block; } .stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); } .stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-1); transition: transform var(--transition-base), box-shadow var(--transition-base); } .stat-card:hover { box-shadow: var(--shadow-2); } .stat-card__value { font-size: 1.65rem; font-weight: 800; color: var(--color-text); line-height: 1.1; margin-bottom: var(--space-1); } .stat-card__label { font-size: 0.78rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-bottom: 6px; } .notif-list { list-style: none; margin: 0; padding: 0; } .notif-list li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-subtle); } .notif-list li.is-unread { background: var(--color-surface-hover); } .notif-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--color-border); flex: none; } .notif-list li.is-unread .notif-dot { background: var(--color-primary); } .notif-body { flex: 1; min-width: 0; } .notif-body .notif-meta { font-size: 0.78rem; color: var(--color-muted); } .summary { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-3); } .summary dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--space-3); margin: 0; } .summary dt { font-weight: 600; color: var(--color-muted); } .timeline { list-style: none; margin: var(--space-3) 0 0; padding: 0; } .timeline li { padding: var(--space-2) 0 var(--space-2) var(--space-3); border-left: 2px solid var(--color-border); margin-left: 6px; } .timeline .tl-meta { font-size: 0.78rem; color: var(--color-muted); } .empty-state { text-align: center; padding: 48px var(--space-4); color: var(--color-muted); } .empty-state::before { content: ''; display: block; width: 40px; height: 40px; margin: 0 auto 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 40px; opacity: 0.7; } .empty-state__icon { display: none; } .empty-state__title { font-size: 1.05rem; font-weight: 700; color: var(--color-text-secondary, #4a5568); margin: 0 0 6px; } .empty-state__text { font-size: 0.875rem; line-height: 1.5; max-width: 38ch; margin: 0 auto 20px; } @media (max-width: 900px) { .sidebar { width: var(--sidebar-width-narrow); } .app-main { margin-left: var(--sidebar-width-narrow); } .app-main.app-main--solo { margin-left: 0; } .sidebar__label, .sidebar__user-block, .sidebar__brand { display: none; } .sidebar__nav { padding: var(--space-1) 4px; } .sidebar__link { justify-content: center; padding: 10px; gap: 0; } .sidebar__link:hover { transform: none; } .sidebar__footer { padding: var(--space-2) 4px; } .sidebar__footer .sidebar__link { justify-content: center; } } @media (max-width: 600px) { .app-main { margin-left: 0; min-height: 0; padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } .sidebar { width: 100%; height: auto; min-height: unset; position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 200; flex-direction: row; overflow: visible; background: var(--gradient-sidebar); border-top: 1px solid var(--color-sidebar-border); border-right: none; box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.28); padding-bottom: env(safe-area-inset-bottom, 0px); } .sidebar__nav { flex: 1; min-height: unset; overflow-x: auto; overflow-y: hidden; padding: 4px 0; } .sidebar__nav ul { display: flex; flex-direction: row; align-items: center; padding: 0 var(--space-1); } .sidebar__nav li { margin: 0; } .sidebar__link { flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: var(--radius-sm); font-size: 0.68rem; } .sidebar__icon { flex-shrink: 0; } .sidebar__label { display: block; font-size: 0.62rem; text-align: center; line-height: 1.1; max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar__footer { display: none; } .sidebar__link:hover { transform: none; } .content { padding: var(--space-3); padding-bottom: var(--space-5); } } @media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } .topbar__title { font-size: 1.05rem; } .searchbox input { width: 160px; } .summary dl { grid-template-columns: 1fr; } } .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; flex-shrink: 0; line-height: 1; letter-spacing: -0.02em; user-select: none; background: linear-gradient(135deg, var(--color-primary) 0%, #2563c4 100%); color: #fff; box-shadow: 0 2px 6px rgba(31, 95, 178, 0.3); } .avatar--xs { width: 24px; height: 24px; font-size: 0.6rem; } .avatar--sm { width: 32px; height: 32px; font-size: 0.72rem; } .avatar--md { width: 40px; height: 40px; font-size: 0.85rem; } .avatar--lg { width: 52px; height: 52px; font-size: 1.1rem; } .avatar--xl { width: 68px; height: 68px; font-size: 1.4rem; } .avatar--green { background: linear-gradient(135deg, #1a7a4a, #22a061); } .avatar--purple { background: linear-gradient(135deg, #7c3aed, #9f67fa); } .avatar--orange { background: linear-gradient(135deg, #b45309, #f59e0b); } .avatar--teal { background: linear-gradient(135deg, #0d9488, #2dd4bf); } .avatar--red { background: linear-gradient(135deg, #c0372c, #e04438); } .avatar--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .avatar-group { display: flex; align-items: center; } .avatar-group .avatar { border: 2px solid var(--color-surface); margin-left: -8px; transition: transform var(--transition-fast), z-index 0s; } .avatar-group .avatar:first-child { margin-left: 0; } .avatar-group .avatar:hover { transform: translateY(-2px); z-index: 10; } .progress-bar { height: 8px; background: var(--color-border); border-radius: 999px; overflow: hidden; } .progress-bar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary), #4a90e2); transition: width 0.6s ease; } .progress-bar--success .progress-bar__fill { background: linear-gradient(90deg, #1a7a4a, #34d399); } .progress-bar--warning .progress-bar__fill { background: linear-gradient(90deg, #b45309, #f59e0b); } .progress-bar--danger .progress-bar__fill { background: linear-gradient(90deg, #c0372c, #e04438); } .progress-bar--thin { height: 4px; } .progress-bar--thick { height: 12px; } .app-progress { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } .app-progress.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .app-progress.is-done { opacity: 0; visibility: hidden; pointer-events: none; } .app-progress__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.42); backdrop-filter: blur(2px); } .app-progress__card { position: relative; z-index: 1; width: min(360px, 92vw); padding: 28px 24px 22px; border-radius: 16px; background: var(--color-surface); box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22); text-align: center; transform: translateY(8px) scale(0.98); transition: transform 0.25s ease; } .app-progress.is-active .app-progress__card { transform: translateY(0) scale(1); } .app-progress__spinner { width: 36px; height: 36px; margin: 0 auto 14px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: app-progress-spin 0.75s linear infinite; } .app-progress__action { margin: 0 0 16px; font-size: 0.95rem; font-weight: 600; color: var(--color-text); line-height: 1.4; } .app-progress__track { height: 8px; background: var(--color-border-subtle); border-radius: 999px; overflow: hidden; margin-bottom: 10px; } .app-progress__bar { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary), #4a90e2); transition: width 0.2s ease; } .app-progress__pct { display: block; font-size: 1.35rem; font-weight: 700; color: var(--color-primary); letter-spacing: 0.02em; } body.app-progress-open { overflow: hidden; } @keyframes app-progress-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .app-progress__bar { transition: none; } .app-progress__spinner { animation: none; border-top-color: var(--color-primary); } .app-progress__card { transition: none; } } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--color-primary-light); color: var(--color-primary); border: 1px solid rgba(31, 95, 178, 0.18); transition: background var(--transition-fast), box-shadow var(--transition-fast); } .chip:hover { background: var(--color-info-soft); box-shadow: 0 2px 8px rgba(31,95,178,0.12); } .chip--green { background: var(--color-success-soft); color: var(--color-success-text); border-color: var(--color-success-border); } .chip--orange { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: var(--color-warning-border); } .chip--red { background: var(--color-danger-soft); color: var(--color-danger-text); border-color: var(--color-danger-border); } .chip--gray { background: var(--color-btn-bg); color: var(--color-text-secondary); border-color: var(--color-border); } .chip__close { width: 16px; height: 16px; border-radius: 50%; background: currentColor; color: inherit; display: inline-flex; align-items: center; justify-content: center; font-size: 0.65rem; opacity: 0.55; cursor: pointer; transition: opacity var(--transition-fast); background: rgba(0,0,0,0.12); } .chip__close:hover { opacity: 0.85; } .btn-group { display: inline-flex; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,0.08); } .btn-group .btn { border-radius: 0; border-right-width: 0; box-shadow: none; margin: 0; } .btn-group .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .btn-group .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-right-width: 1px; } .form-field { position: relative; } .form-field__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--color-muted); pointer-events: none; z-index: 1; display: flex; align-items: center; } .form-field__icon svg { width: 16px; height: 16px; } .form-field .form__input, .form-field .form__select { padding-left: 38px; } .form-field__suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--color-muted); font-size: 0.85rem; font-weight: 600; pointer-events: none; } .form__helper { font-size: 0.8rem; color: var(--color-muted); margin-top: 4px; line-height: 1.4; } .form__helper--error { color: var(--color-danger); } .form__helper--success { color: var(--color-success); } .status-pipeline { display: flex; align-items: center; gap: 0; padding: var(--space-3) var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-4); overflow-x: auto; scrollbar-width: none; } .status-pipeline::-webkit-scrollbar { display: none; } .sp-step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 80px; flex-shrink: 0; } .sp-bubble { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; border: 2px solid var(--color-border); background: var(--color-surface); color: var(--color-muted); transition: all var(--transition-base); position: relative; } .sp-bubble svg { width: 16px; height: 16px; } .sp-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); text-align: center; white-space: nowrap; } .sp-step--done .sp-bubble { background: var(--color-success); border-color: var(--color-success); color: #fff; } .sp-step--done .sp-label { color: var(--color-success); } .sp-step--rejected .sp-bubble { background: var(--color-danger); border-color: var(--color-danger); color: #fff; } .sp-step--rejected .sp-label { color: var(--color-danger); } .sp-bubble--done::after, .stepper__step--done .stepper__circle::after, .auth-hero__list-icon::after, .workflow-step.is-done .workflow-step__dot::after { content: ''; display: block; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin: -1px auto 0; } .sp-bubble--rejected::after { content: ''; display: block; width: 12px; height: 2px; background: var(--color-surface); transform: rotate(-45deg); position: relative; } .sp-bubble--rejected::before { content: ''; display: block; width: 12px; height: 2px; background: var(--color-surface); transform: rotate(45deg); position: absolute; top: 50%; left: 50%; margin: -1px 0 0 -6px; } .sp-bubble--done, .sp-bubble--rejected { font-size: 0; color: transparent; } .sp-step--active .sp-bubble { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 0 0 4px rgba(31,95,178,0.18), 0 4px 12px rgba(31,95,178,0.3); animation: sp-pulse 2.5s ease-in-out infinite; } .sp-step--active .sp-label { color: var(--color-primary); font-weight: 800; } .sp-step--pending .sp-bubble { opacity: 0.5; } @keyframes sp-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(31,95,178,0.18), 0 4px 12px rgba(31,95,178,0.3); } 50% { box-shadow: 0 0 0 7px rgba(31,95,178,0.1), 0 4px 16px rgba(31,95,178,0.4); } } .sp-connector { flex: 1; min-width: 24px; height: 2px; position: relative; margin-bottom: 24px; } .sp-connector::before { content: ''; position: absolute; inset: 0; background: var(--color-border); border-radius: 2px; } .sp-connector--done::before { background: linear-gradient(90deg, var(--color-success), #22a061); } .sp-connector--active::before { background: linear-gradient(90deg, var(--color-success), var(--color-primary)); } .sp-step--dept .sp-bubble.sp-bubble--active-colour { background: #1d4ed8; border-color: #1d4ed8; } .sp-step--proc .sp-bubble.sp-bubble--active-colour { background: #065f46; border-color: #065f46; } .sp-step--exec .sp-bubble.sp-bubble--active-colour { background: #5b21b6; border-color: #5b21b6; } .sp-step--stores .sp-bubble.sp-bubble--active-colour { background: #b45309; border-color: #b45309; } .sp-step--finance .sp-bubble.sp-bubble--active-colour { background: #9d174d; border-color: #9d174d; } .card--accent-primary { border-left: 4px solid var(--color-primary); } .card--accent-success { border-left: 4px solid var(--color-success); } .card--accent-warning { border-left: 4px solid var(--color-warning); } .card--accent-danger { border-left: 4px solid var(--color-danger); } .card--header { padding: 0; overflow: hidden; } .card--header__head { padding: var(--space-3) var(--space-4); background: linear-gradient(135deg, var(--color-primary), #2563c4); color: #fff; } .card--header__head h3 { margin: 0; color: #fff; } .card--header__body { padding: var(--space-3) var(--space-4); } .card--glass { background: rgba(255,255,255,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.55); } .card--flat { box-shadow: none; } .info-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-3); } .info-panel__cell { background: var(--color-surface); padding: var(--space-3) var(--space-4); } .info-panel__label { font-size: 0.73rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin-bottom: 4px; } .info-panel__value { font-size: 1.05rem; font-weight: 700; color: var(--color-text); } .info-panel__sub { font-size: 0.8rem; color: var(--color-muted); margin-top: 2px; } .stat-card--icon { display: flex; align-items: flex-start; gap: var(--space-3); } .stat-card__icon-wrap { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.3rem; } .stat-card__icon-wrap--primary { background: var(--color-primary-light); color: var(--color-primary); } .stat-card__icon-wrap--green { background: var(--color-success-soft); color: var(--color-success-text); } .stat-card__icon-wrap--orange { background: var(--color-warning-soft); color: var(--color-warning-text); } .stat-card__icon-wrap--purple { background: var(--color-purple-soft); color: var(--color-purple-text); } .stat-card__icon-wrap--red { background: var(--color-danger-soft); color: var(--color-danger-text); } .stat-card__content { flex: 1; min-width: 0; } .stat-card__delta { font-size: 0.78rem; font-weight: 700; margin-top: 2px; } .stat-card__delta--up { color: var(--color-success); } .stat-card__delta--down { color: var(--color-danger); } .divider { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; color: var(--color-muted); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } .stepper { display: flex; align-items: center; gap: 0; counter-reset: stepper; overflow-x: auto; scrollbar-width: none; } .stepper::-webkit-scrollbar { display: none; } .stepper__step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; min-width: 80px; counter-increment: stepper; } .stepper__circle { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; border: 2px solid var(--color-border); background: var(--color-surface); color: var(--color-muted); transition: all var(--transition-base); } .stepper__circle::before { content: counter(stepper); } .stepper__label { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); text-align: center; white-space: nowrap; } .stepper__connector { flex: 1; height: 2px; background: var(--color-border); min-width: 20px; margin-bottom: 22px; transition: background var(--transition-base); } .stepper__step--done .stepper__circle { background: var(--color-success); border-color: var(--color-success); color: transparent; font-size: 0; } .stepper__step--done .stepper__circle::before { content: none; } .stepper__step--done .stepper__circle::after { margin-top: -2px; } .stepper__step--done + .stepper__connector { background: var(--color-success); } .stepper__step--done .stepper__label { color: var(--color-success); } .stepper__step--active .stepper__circle { background: var(--color-surface); border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 0 5px var(--color-accent-soft); animation: seal-pulse 2.4s ease-in-out infinite; } .stepper__step--active .stepper__label { color: var(--color-accent); font-weight: 700; } @keyframes seal-pulse { 0%, 100% { box-shadow: 0 0 0 5px var(--color-accent-soft); } 50% { box-shadow: 0 0 0 9px transparent; } } .stepper__step--rejected .stepper__circle { background: var(--color-danger); border-color: var(--color-danger); color: #fff; } .stepper__step--rejected .stepper__circle::before { content: '\00d7'; font-size: 1rem; line-height: 1; } .stepper__step--rejected .stepper__label { color: var(--color-danger-text); font-weight: 700; } /* Saved-view filter chips (requisition lookup and other list screens) */ .view-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); } .view-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); } .view-chip:hover { border-color: var(--color-primary); color: var(--color-primary); } .view-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--on-primary, #fff); box-shadow: var(--shadow-1); } .view-chip__count { font-size: 0.7rem; font-weight: 700; background: rgba(0, 0, 0, 0.08); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; } .view-chip.is-active .view-chip__count { background: rgba(255, 255, 255, 0.22); } /* Requisition list table — Keystone-style title + metadata rows */ .req-table__ref strong { color: var(--color-primary); font-weight: 600; font-size: 0.88rem; } .req-table__title { min-width: 220px; max-width: 360px; } .req-table__title-main { font-weight: 600; color: var(--color-text); line-height: 1.35; margin-bottom: 2px; } .req-line-title { display: flex; flex-direction: column; gap: 0.15rem; min-width: 10rem; } .req-line-title__gl { font-size: 0.98rem; font-weight: 650; color: var(--color-text); font-variant-numeric: tabular-nums; } .req-line-title__item, .req-line-title__desc { font-size: 0.85rem; line-height: 1.35; } .req-line-title__item-main { font-weight: 650; } .req-table__title-sub { font-size: 0.8rem; color: var(--color-muted); line-height: 1.3; } .req-table__stage { white-space: nowrap; font-size: 0.78rem; } .req-table__amount { font-variant-numeric: tabular-nums; white-space: nowrap; } .req-table__duration { font-size: 0.82rem; color: var(--color-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; } .req-table__duration--overdue { color: var(--color-danger-text); font-weight: 600; } .req-table__updated { font-size: 0.82rem; color: var(--color-muted); white-space: nowrap; } .table-wrap table.req-table thead th { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); } /* Full-width lifecycle variant used on the requisition viewer */ .stepper--lifecycle { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--space-3) var(--space-3) var(--space-2); margin-bottom: var(--space-3); } .kv-display { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); } .kv-item { background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); } .kv-item__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin-bottom: 3px; } .kv-item__value { font-size: 0.95rem; font-weight: 600; color: var(--color-text); word-break: break-word; } .user-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); transition: background var(--transition-fast); } .user-row:hover { background: var(--color-surface-hover); } .user-row__info { flex: 1; min-width: 0; } .user-row__name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-row__sub { font-size: 0.78rem; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-row__actions { flex-shrink: 0; display: flex; gap: var(--space-1); } .status-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--color-surface); flex-shrink: 0; } .status-dot--online { background: var(--color-success); } .status-dot--away { background: var(--color-warning); } .status-dot--offline { background: var(--color-border); } .page-header { background: var(--color-primary-light); border: 1px solid var(--color-info-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-4) var(--space-3); margin-bottom: var(--space-4); position: relative; overflow: hidden; } .page-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-primary); } .page-header__title { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.025em; color: var(--color-text); margin: 0 0 4px; } .page-header__subtitle { font-size: 0.9rem; color: var(--color-muted); margin: 0; } .page-header__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; } /* ============================================================ Command palette — global search & quick actions (Ctrl+K). Markup is injected by core.js; styles are token-driven so the palette follows the light/dark theme automatically. ============================================================ */ .topbar__search-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-raised); color: var(--color-muted); font: inherit; font-size: 0.85rem; cursor: pointer; box-shadow: var(--shadow-xs); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast); white-space: nowrap; } .topbar__search-btn:hover { border-color: var(--color-primary); color: var(--color-text-secondary); box-shadow: 0 2px 10px rgba(31, 95, 178, 0.15); } .topbar__search-btn svg { width: 15px; height: 15px; flex-shrink: 0; } .topbar__search-btn kbd { font-family: var(--font-mono); font-size: 0.66rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 5px; padding: 1px 6px; color: var(--color-muted); } @media (max-width: 720px) { .topbar__search-btn .topbar__search-label, .topbar__search-btn kbd { display: none; } .topbar__search-btn { padding: 0 11px; } } .cmdk-overlay { position: fixed; inset: 0; z-index: 3200; background: rgba(13, 19, 34, 0.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; animation: ui-fade-in-fast 0.16s ease both; } .cmdk-overlay[hidden] { display: none; } .cmdk { width: 600px; max-width: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-3); overflow: hidden; animation: cmdk-in 0.2s ease both; } @keyframes cmdk-in { from { opacity: 0; transform: scale(0.97) translateY(-8px); } to { opacity: 1; transform: none; } } .cmdk__inputwrap { position: relative; } .cmdk__inputwrap svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--color-muted); pointer-events: none; } .cmdk__input { width: 100%; border: none; outline: none; background: transparent; font: inherit; font-size: 1rem; color: var(--color-text); padding: 15px 16px 15px 44px; border-bottom: 1px solid var(--color-border-subtle); } .cmdk__input::placeholder { color: var(--color-muted); } .cmdk__list { max-height: 340px; overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: var(--color-scrollbar) transparent; } .cmdk__group { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); padding: 8px 12px 3px; } .cmdk__item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; border: none; background: none; font: inherit; font-size: 0.92rem; color: var(--color-text-secondary); cursor: pointer; } .cmdk__item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.75; } .cmdk__item.is-sel { background: var(--color-primary-light); color: var(--color-primary); } .cmdk__item-main { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmdk__item-main strong { font-weight: 650; color: var(--color-text); } .cmdk__item.is-sel .cmdk__item-main strong { color: var(--color-primary); } .cmdk__item-sub { font-size: 0.78rem; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmdk__item-meta { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--color-muted); font-variant-numeric: tabular-nums; } .cmdk__empty { padding: 22px 16px; text-align: center; color: var(--color-muted); font-size: 0.88rem; } .cmdk__foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--color-border-subtle); color: var(--color-muted); font-size: 0.72rem; } .cmdk__foot kbd { font-family: var(--font-mono); font-size: 0.66rem; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 4px; padding: 0 5px; } /* Supplier quotations — flat register panels (SX / B2B document style) */ .supplier-quote-list { display: flex; flex-direction: column; gap: 0; margin: var(--space-3) 0 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; } .supplier-quote-list--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-2); border: none; background: transparent; overflow: visible; } .supplier-quote-list--grid .supplier-quote { border: 1px solid var(--color-border); border-radius: var(--radius-md); border-bottom: 1px solid var(--color-border); min-width: 0; overflow: hidden; } .supplier-quote { padding: 0.85rem 1rem; border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface); } .supplier-quote:last-child { border-bottom: none; } .supplier-quote--lead { box-shadow: inset 3px 0 0 var(--color-primary); } .supplier-quote--rec { box-shadow: inset 3px 0 0 var(--color-success); } .supplier-quote--partial { box-shadow: inset 3px 0 0 var(--color-warning); } .supplier-quote--incomplete { box-shadow: inset 3px 0 0 var(--color-danger); } .supplier-quote__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.25rem; } .supplier-quote__who { display: flex; align-items: flex-start; gap: 0.55rem; flex: 1 1 auto; min-width: 0; } .supplier-quote__rank { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--color-surface-raised); border: 1px solid var(--color-border); color: var(--color-text); font-size: 0.75rem; font-weight: 700; flex-shrink: 0; } .supplier-quote--lead .supplier-quote__rank { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .supplier-quote__names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.45rem; min-width: 0; } .supplier-quote__name { font-size: 0.98rem; font-weight: 650; line-height: 1.3; color: var(--color-text); word-break: break-word; } .supplier-quote__name a { color: inherit; text-decoration: none; } .supplier-quote__name a:hover { color: var(--color-primary); text-decoration: underline; } .supplier-quote__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; flex: 0 1 auto; max-width: 100%; min-width: 0; text-align: right; } .supplier-quote__total { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); line-height: 1.25; white-space: normal; word-break: break-word; } .supplier-quote__tax-note { display: block; font-size: 0.8rem; font-weight: 500; line-height: 1.25; } .supplier-quote__fx { font-size: 0.8rem; line-height: 1.25; } .supplier-quote__tax-breakdown { font-size: 0.8rem; line-height: 1.25; max-width: 100%; } .supplier-quote__flag { background: var(--color-warning-soft); color: var(--color-warning-text); font-size: 0.7rem; font-weight: 600; } /* Compact / grid cards: stack name above price tightly (never leave a tall gap) */ .supplier-quote--compact .supplier-quote__head, .supplier-quote-list--grid .supplier-quote__head { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.45rem; } .supplier-quote--compact .supplier-quote__who, .supplier-quote-list--grid .supplier-quote__who { flex: 0 0 auto; } .supplier-quote--compact .supplier-quote__aside, .supplier-quote-list--grid .supplier-quote__aside { align-items: flex-start; text-align: left; width: 100%; gap: 0.2rem; } .supplier-quote--compact .supplier-quote__pick, .supplier-quote-list--grid .supplier-quote__pick { align-self: stretch; margin-top: 0.15rem; } /* Evaluation: full-width stacked cards — easier to compare, no empty column */ .supplier-quote-list--eval { display: flex; flex-direction: column; gap: 0; margin: var(--space-2) 0 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; } .supplier-quote-list--eval .supplier-quote { border: none; border-radius: 0; border-bottom: 1px solid var(--color-border-subtle); padding: 0.7rem 0.95rem; } .supplier-quote-list--eval .supplier-quote:last-child { border-bottom: none; } .supplier-quote-list--eval .supplier-quote__head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 0.65rem 1rem; margin-bottom: 0.15rem; } .supplier-quote-list--eval .supplier-quote__who { flex: 1 1 auto; } .supplier-quote-list--eval .supplier-quote__aside { align-items: flex-end; text-align: right; width: auto; max-width: 14rem; flex: 0 0 auto; gap: 0.15rem; } .supplier-quote-list--eval .supplier-quote__meta { margin: 0 0 0.4rem; font-size: 0.8rem; line-height: 1.35; } .supplier-quote-list--eval .supplier-quote__docs { padding-top: 0.4rem; gap: 0.35rem 0.55rem; } .supplier-quote-list--eval .supplier-quote__certs { margin-top: 0.35rem; } .supplier-quote-list--eval .supplier-quote__pick { margin-top: 0.1rem; } .supplier-quote__meta { margin: 0 0 0.75rem; font-size: 0.82rem; color: var(--color-muted); line-height: 1.45; } .supplier-quote__dot { margin: 0 0.4rem; opacity: 0.55; } .supplier-quote__note { margin: 0 0 0.65rem; font-size: 0.86rem; line-height: 1.45; color: var(--color-text-secondary, var(--color-text)); } .supplier-quote .supplier-quote-lines { margin: 0 0 0.75rem; } .supplier-quote-qty--short { background: var(--color-warning-soft); color: var(--color-warning-text); font-weight: 600; } .supplier-quote-qty-warn { font-size: 0.72rem; font-weight: 600; color: var(--color-warning-text); } .supplier-quote__docs { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.5rem 0.75rem; align-items: start; padding-top: 0.65rem; border-top: 1px solid var(--color-border-subtle); font-size: 0.84rem; } .supplier-quote__docs-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-muted); padding-top: 0.15rem; } .supplier-quote-docs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; } .supplier-quote-docs__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.5rem; } .supplier-quote-docs__cat { min-width: 5.5rem; color: var(--color-muted); font-size: 0.8rem; } .supplier-quote-docs__files a { word-break: break-word; } .supplier-quote-docs__sep { margin: 0 0.25rem; color: var(--color-muted); } .supplier-quote-docs__empty { margin: 0; color: var(--color-muted); font-size: 0.84rem; } .supplier-quote-card__upload, .supplier-quote__upload { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.65rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--color-border); } .supplier-quote-card__upload .form__label, .supplier-quote__upload .form__label { flex: 1 1 220px; margin: 0; font-size: 0.82rem; } .supplier-quote-card__pick, .supplier-quote__pick { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; white-space: nowrap; cursor: pointer; } .supplier-quote-card__certs, .supplier-quote__certs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 0.55rem; } .eval-qty--short { background: var(--color-warning-soft); color: var(--color-warning-text); font-weight: 600; } .eval-qty-warn { color: var(--color-warning-text); font-weight: 600; font-size: 0.72rem; } /* Compact document registry — stage groups + file rows */ .doc-registry-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.85rem; } .doc-registry-toolbar__hint { margin: 0; font-size: 0.82rem; } .doc-registry-stack { display: flex; flex-direction: column; gap: 0.65rem; } .doc-registry-section { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); } .doc-registry-section__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface-raised); } .doc-registry-section__title { margin: 0; font-size: 0.84rem; font-weight: 700; color: var(--color-text); } .doc-registry-section__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: var(--color-muted); background: var(--color-surface); border: 1px solid var(--color-border-subtle); white-space: nowrap; } .doc-registry-section--rq { border-color: var(--color-info-border, var(--color-border)); box-shadow: inset 3px 0 0 var(--color-primary); } .doc-registry-section--rq .doc-registry-section__head { background: var(--color-info-soft); } .doc-registry-section--rfq { border-color: var(--color-warning-border, var(--color-border)); box-shadow: inset 3px 0 0 var(--color-warning); } .doc-registry-section--rfq .doc-registry-section__head { background: var(--color-warning-soft); } .doc-registry-section--awarded { border-color: var(--color-success-border, var(--color-border)); box-shadow: inset 3px 0 0 var(--color-success); } .doc-registry-section--awarded .doc-registry-section__head { background: var(--color-success-soft); } .doc-registry-section--fulfilment { border-color: var(--color-border); box-shadow: inset 3px 0 0 var(--color-info, var(--color-primary)); } .doc-registry-section--rejected { border-color: var(--color-border); box-shadow: inset 3px 0 0 var(--color-muted); } .doc-registry-section--collapsible > summary { list-style: none; cursor: pointer; } .doc-registry-section--collapsible > summary::-webkit-details-marker { display: none; } .doc-registry-section--collapsible > summary::after { content: ''; width: 0.45rem; height: 0.45rem; margin-left: 0.35rem; border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted); transform: rotate(45deg); flex-shrink: 0; transition: transform 0.15s ease; } .doc-registry-section--collapsible[open] > summary::after { transform: rotate(-135deg); } .doc-registry-section--collapsible:not([open]) > .doc-registry-section__head { border-bottom: none; } .doc-registry-section__body { padding: 0 0 0.35rem; } .doc-registry__files { list-style: none; margin: 0; padding: 0.15rem 0; } .doc-registry__file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.55rem 0.7rem; align-items: center; padding: 0.55rem 0.75rem; border-top: 1px solid var(--color-border-subtle); } .doc-registry__file:first-child { border-top: none; } .doc-registry__ext { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; padding: 0.28rem 0.35rem; border-radius: var(--radius-sm, 4px); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; color: var(--color-primary); background: var(--color-primary-soft, var(--color-info-soft)); border: 1px solid var(--color-border-subtle); } .doc-registry__main { min-width: 0; } .doc-registry__title-row { min-width: 0; } .doc-registry__name, .doc-registry__name-btn { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: var(--color-text); text-decoration: none; background: none; border: none; padding: 0; font: inherit; text-align: left; cursor: pointer; } .doc-registry__name:hover, .doc-registry__name-btn:hover { color: var(--color-primary); text-decoration: underline; } .doc-registry__meta { margin-top: 0.15rem; font-size: 0.78rem; color: var(--color-muted); line-height: 1.35; } .doc-registry__aside { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.4rem; } .doc-registry__when { font-size: 0.75rem; white-space: nowrap; } .doc-registry-supplier { padding: 0.55rem 0.75rem 0.25rem; border-top: 1px dashed var(--color-border-subtle); } .doc-registry-supplier:first-child { border-top: none; } .doc-registry-supplier__name { font-size: 0.82rem; font-weight: 650; margin: 0 0 0.2rem; color: var(--color-text-secondary, var(--color-muted)); } .doc-registry-supplier .doc-registry__files { padding-bottom: 0.35rem; } .doc-registry__badge--awarded { background: var(--color-success-soft); color: var(--color-success-text); font-size: 0.68rem; vertical-align: middle; } .doc-registry__badge--rejected { background: var(--color-surface-raised); color: var(--color-muted); border: 1px solid var(--color-border); font-size: 0.68rem; vertical-align: middle; } .ref-chip--rq { background: var(--color-info-soft); color: var(--color-primary); border-color: var(--color-info-border, var(--color-border)); } .ref-chip--rfq { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: var(--color-warning-border, var(--color-border)); } .ref-chip--po { background: var(--color-success-soft); color: var(--color-success-text); border-color: var(--color-success-border, var(--color-border)); } .ref-chip--awarded { background: var(--color-success-soft); color: var(--color-success-text); border-color: var(--color-success-border, var(--color-border)); } .ref-chip--rejected { background: var(--color-surface-raised); color: var(--color-muted); border-color: var(--color-border); } @media (max-width: 640px) { .doc-registry__file { grid-template-columns: auto minmax(0, 1fr); } .doc-registry__aside { grid-column: 2; justify-content: flex-start; } .supplier-quote__head { flex-direction: column; align-items: stretch; } .supplier-quote__aside { align-items: flex-start; text-align: left; } .supplier-quote__docs { grid-template-columns: 1fr; } } /* Requisition branch reply modal (requisition-branch.js) */ .branch-doc-list, .branch-thread__docs { margin: 0; padding-left: 1.1rem; } .branch-thread { display: flex; flex-direction: column; gap: var(--space-3); } .branch-thread__post { padding: var(--space-3); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); background: var(--color-surface); } .branch-thread__meta { margin-bottom: var(--space-2); font-size: 0.9rem; } .branch-thread__body { white-space: pre-wrap; line-height: 1.5; } .branch-reply__body { white-space: pre-wrap; line-height: 1.5; } .branch-reply-audit { margin: var(--space-4) 0; } .branch-recipient-reply { margin: 0 0 var(--space-4); padding: var(--space-4); border: 1px solid var(--color-primary-border, var(--color-border)); border-radius: var(--radius-md); background: var(--color-primary-soft, var(--color-surface-hover)); } .branch-recipient-reply__title { margin: 0 0 var(--space-2); font-size: 1.05rem; } .branch-recipient-reply__body { white-space: pre-wrap; line-height: 1.55; font-size: 1rem; } .branch-thread__post--reply { border-color: var(--color-primary-border, var(--color-border)); background: var(--color-primary-soft, var(--color-surface-hover)); } @media print { .sidebar, .topbar, .toast-stack, .ai-fab, .ai-panel, .cmdk-overlay { display: none !important; } .app-main { display: block; margin-left: 0; } .content { padding: 0; } body { background: #fff; } } /* ========================================================================= Responsive · HCI · polish layer (appended 2026-07). Loaded on every page via core.css. Adds a mobile off-canvas nav drawer, phone-size responsive overrides, accessible focus rings, form-validation feedback and comfortable tap targets. Colours use existing --color-* tokens only; nothing here changes desktop layout above 900px except the shared focus/selection styles. ========================================================================= */ /* ---- Accessible keyboard focus (0-specificity, never overrides components) */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } ::selection { background: var(--color-primary-soft); color: var(--color-primary-dark); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---- Form validation feedback (driven by core.js initFormFeedback) ------ */ input.is-invalid, select.is-invalid, textarea.is-invalid, .form__input.is-invalid { border-color: var(--color-danger) !important; box-shadow: 0 0 0 3px var(--color-danger-soft) !important; } .form__error { display: block; color: var(--color-danger-text); font-size: 0.78rem; line-height: 1.35; margin-top: 4px; } .form__label--required::after, label.is-required::after { content: " *"; color: var(--color-danger-text); font-weight: 700; } /* ---- Mobile navigation drawer (hamburger + backdrop injected by core.js) - */ .nav-hamburger { display: none; } .app-nav-backdrop { display: none; } @media (max-width: 900px) { /* content reclaims full width — the fixed sidebar becomes a drawer */ .app-main { margin-left: 0 !important; } /* contain the off-canvas drawer + any wide content without a scrollbar. `clip` (not `hidden`) so descendant position:sticky keeps working. */ body { overflow-x: clip; } .app-main, .content { max-width: 100vw; } .app-main { width: 100%; } .topbar { max-width: 100vw; } /* Let grid/flex cards shrink below their content so wide tables scroll inside their .table-wrap instead of stretching the card past the screen. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .card, .dash-card, .dash-layout, .dash-layout__main, .dash-layout__side, .dash-grid, .stat-row, .dash-hero, .content > *, .dash-layout > *, .dash-layout__main > *, .dash-layout__side > *, .dash-grid > * { min-width: 0; max-width: 100%; } /* Hard stop: on phones a table never forces the page wider than the screen — it wraps to fit (overriding the 640px desktop floor in shared.css). */ .table-wrap table { min-width: 0; } .sidebar { width: min(86vw, 300px); transform: translateX(-100%); transition: transform var(--transition-base); will-change: transform; } html[data-mobile-nav="open"] .sidebar { transform: translateX(0); box-shadow: 0 24px 60px rgba(4, 12, 26, 0.5); } html[data-sidebar="collapsed"] .sidebar { width: min(86vw, 300px); } /* ignore desktop collapse on phones */ .nav-hamburger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); cursor: pointer; padding: 0; transition: background var(--transition-fast); } .nav-hamburger:hover { background: var(--color-surface-hover); } .nav-hamburger:active { transform: scale(0.96); } .nav-hamburger svg { width: 22px; height: 22px; display: block; } html[data-mobile-nav="open"] .app-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 140; /* under sidebar (150), over content */ background: rgba(4, 12, 26, 0.5); animation: navFade var(--transition-fast) ease; } html[data-mobile-nav="open"], html[data-mobile-nav="open"] body { overflow: hidden; } } @keyframes navFade { from { opacity: 0; } to { opacity: 1; } } /* ---- Phone-size comfort (≤640px) --------------------------------------- */ @media (max-width: 640px) { .content { padding: var(--space-3); } .topbar { padding: 0 var(--space-3); gap: var(--space-2); } .topbar__clock { display: none; } /* reclaim width */ .topbar--branded .topbar-brand { display: none; } /* brand lives in the drawer */ .topbar__user { display: none; } /* keep the avatar, drop the long name */ .topbar__title { font-size: 1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar__title, .topbar-brand { flex: 0 1 auto; min-width: 0; } .topbar__tools { gap: var(--space-2); } /* wide tables scroll inside their wrapper instead of forcing the page wider */ .table-wrap, .tbl-scroll, .req-table__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* stack common multi-column grids */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; } /* larger tap targets + no iOS zoom-on-focus (needs ≥16px) */ input, select, textarea, .form__input { font-size: 16px; } .btn { min-height: 40px; } /* full-width action buttons read better on phones */ .form__actions .btn, .modal__footer .btn { flex: 1 1 auto; } }