/* 'Latin UI' = Segoe UI (hinted for normal-DPI screens) for English text only.
Khmer characters and spaces skip it and render in Kantumruy Pro, so Khmer
looks exactly as before. Weight 500 maps to Semibold. Off Windows the
face is skipped and Kantumruy Pro is used, as before. */
@font-face { font-family: 'Latin UI'; font-weight: 300; src: local('Segoe UI Light'), local('SegoeUI-Light'); unicode-range: U+0000-001F, U+0021-009F, U+00A1-177F, U+1800-19DF, U+1A00-200A, U+200E-25CB, U+25CD-FFFF; }
@font-face { font-family: 'Latin UI'; font-weight: 400; src: local('Segoe UI'), local('SegoeUI'); unicode-range: U+0000-001F, U+0021-009F, U+00A1-177F, U+1800-19DF, U+1A00-200A, U+200E-25CB, U+25CD-FFFF; }
@font-face { font-family: 'Latin UI'; font-weight: 500 600; src: local('Segoe UI Semibold'), local('SegoeUI-Semibold'); unicode-range: U+0000-001F, U+0021-009F, U+00A1-177F, U+1800-19DF, U+1A00-200A, U+200E-25CB, U+25CD-FFFF; }
@font-face { font-family: 'Latin UI'; font-weight: 700 800; src: local('Segoe UI Bold'), local('SegoeUI-Bold'); unicode-range: U+0000-001F, U+0021-009F, U+00A1-177F, U+1800-19DF, U+1A00-200A, U+200E-25CB, U+25CD-FFFF; }
@font-face { font-family: 'Latin UI'; font-weight: 900; src: local('Segoe UI Black'), local('SegoeUI-Black'); unicode-range: U+0000-001F, U+0021-009F, U+00A1-177F, U+1800-19DF, U+1A00-200A, U+200E-25CB, U+25CD-FFFF; }
/* Base stylesheet for every page.
Was inlined into base.html via {% include "_base_styles.html" %},
which re-sent ~120 KB of CSS on every page load and every SPA
navigation. As a static file WhiteNoise hashes, compresses and
far-future-caches it, so the browser fetches it once. */
*, *::before, *::after { box-sizing: border-box; }
input, select, textarea, button { max-width: 100%; }
/* ============================================
THEME SYSTEM - Dark & Light Mode
============================================ */
.preload * { transition: none !important; }
:root {
/* Sidebar */
--sidebar-bg: #1a3d2b;
--sidebar-dark: #163324;
--sidebar-text: #a8c5b0;
--sidebar-text-bright: #ffffff;
--sidebar-active: #f5a623;
--sidebar-hover: rgba(255,255,255,.08);
/* Page & Cards */
--bg-card: #ffffff;
--bg-base: #ffffff;
--bg-surface: #ffffff;
--bg-raised: #f7faf8;
--bg-hover: #eef3f0;
--border: #e8eeeb;
--border-bright: #dde8e2;
/* Typography */
--text-primary: #1c1c1c;
--text-secondary: #4a4a4a;
--text-muted: #6b6b6b; /* 5.3:1 on white */
/* Accents */
--accent: #2a9d5c;
--accent-dim: #248850;
--accent-glow: rgba(42,157,92,.12);
/* Status colors */
--gold: #f5a623;
--gold-glow: rgba(245,166,35,.12);
--red: #e8734a;
--red-glow: rgba(232,115,74,.12);
--blue: #4ab3e8;
--blue-glow: rgba(74,179,232,.12);
--purple: #8b5cf6;
--purple-glow: rgba(139,92,246,.12);
--cyan: #4ab3e8;
--cyan-glow: rgba(74,179,232,.12);
/* Chart colors */
/* Legacy Bootstrap compatibility */
--navbar-bg: linear-gradient(135deg, #4ab3e8 0%, #3b82f6 100%);
--footer-bg: #f7faf8;
--footer-border: #e8eeeb;
--page-bg: #f0f4f2;
--page-bg-img: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(42,157,92,0.03) 0%, transparent 60%);
/* Skeleton shimmer */
/* Tooltip */
--tooltip-bg: #1a2e22;
--tooltip-text: #f7faf8;
/* Shadow */
--shadow-color: rgba(26,46,34,0.08);
/* Cards: tight edge shadow, not a wide haze (stays crisp on 1x screens) */
--card-shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.10);
}
[data-theme="dark"] {
/* Sidebar */
--sidebar-bg: #1c1c1c;
--sidebar-dark: #151515;
--sidebar-text: #a0a0a0;
--sidebar-text-bright: #ededed;
--sidebar-active: #818cf8;
--sidebar-hover: rgba(255,255,255,.05);
/* Page & Cards */
--bg-base: #111111;
--bg-surface: #1c1c1c;
--bg-raised: #262626;
--bg-hover: #303030;
--border: rgba(255,255,255,0.07);
--border-bright: rgba(255,255,255,0.11);
/* Accents */
--accent: #818cf8;
--accent-dim: rgba(129,140,248,0.12);
--accent-glow: rgba(129,140,248,0.22);
/* Status colors */
--gold: #fbbf24;
--gold-glow: rgba(251,191,36,0.13);
--red: #f87171;
--red-glow: rgba(248,113,113,0.13);
--blue: #818cf8;
--blue-glow: rgba(129,140,248,0.13);
--purple: #a78bfa;
--purple-glow: rgba(167,139,250,0.13);
--cyan: #818cf8;
--cyan-glow: rgba(129,140,248,0.13);
/* Typography */
--text-primary: #ededed;
--text-secondary: #a0a0a0;
--text-muted: #8c8c8c; /* 5.1:1 on #1c1c1c */
/* Chart colors */
/* Legacy Bootstrap compatibility */
--navbar-bg: #1c1c1c;
--footer-bg: #1c1c1c;
--footer-border: rgba(255,255,255,0.07);
--page-bg: #111111;
--page-bg-img: none;
/* Skeleton shimmer */
/* Tooltip */
--tooltip-bg: #2e2e2e;
--tooltip-text: #ededed;
/* Shadow */
--shadow-color: rgba(0,0,0,0.4);
--card-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* ============================================
SKIP TO CONTENT (Accessibility)
============================================ */
.skip-link {
position: absolute;
top: -100px;
left: 1rem;
background: var(--blue);
color: white;
padding: 0.5rem 1rem;
border-radius: 0 0 8px 8px;
font-weight: 600;
font-size: 0.875rem;
z-index: 99999;
transition: top 0.2s ease;
text-decoration: none;
}
.skip-link:focus {
top: 0;
color: white;
}
/* ============================================
FOCUS VISIBLE (Accessibility)
============================================ */
:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }
/* Remove focus outline from icon buttons */
.theme-toggle-btn:focus,
.theme-toggle-btn:focus-visible,
.notification-bell:focus,
.notification-bell:focus-visible,
.topbar-icon-btn:focus,
.topbar-icon-btn:focus-visible {
outline: none !important;
box-shadow: none !important;
}
/* ============================================
THEME TOGGLE
============================================ */
.theme-toggle-btn {
background: rgba(255,255,255,0.15);
border: none !important;
color: white;
width: 36px;
height: 36px;
border-radius: 50% !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
font-size: 1.1rem;
}
.theme-toggle-btn:hover,
.theme-toggle-btn:active,
.theme-toggle-btn:focus {
background: rgba(255,255,255,0.25);
transform: scale(1.05);
border: none !important;
outline: none !important;
}
.theme-toggle-btn .theme-icon { transition: transform 0.3s ease; }
.theme-toggle-btn:active .theme-icon { transform: rotate(180deg); }
/* ============================================
FONT SYSTEM
============================================ */
/* ── Global Kantumruy Pro baseline ─────────────────────────────────
Applies to all text so Khmer glyphs always render correctly.
Color uses the theme variable so dark/light mode still works.
@import omitted — font is already loaded via in .
─────────────────────────────────────────────────────────────── */
html, body, table, td, th, input, select {
font-family: 'Latin UI', 'Kantumruy Pro', sans-serif !important;
font-weight: 500 !important;
line-height: 1.6 !important;
color: var(--text-primary) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
scroll-behavior: smooth;
}
html[lang="km"] {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ══════════════════════════════════════════════════════
KHMER GLOBAL NORMALIZATION
Khmer glyphs are taller than Latin — this block keeps
every UI element the same height in both languages.
Specific page overrides below still win via !important.
══════════════════════════════════════════════════════ */
/* 1. Table cells — normalize padding + line-height */
html[lang="km"] td,
html[lang="km"] th {
line-height: 1.6 !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
padding-top: 0.45rem !important;
padding-bottom: 0.45rem !important;
}
/* 2. Form inputs / selects / textareas */
html[lang="km"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html[lang="km"] select,
html[lang="km"] textarea,
html[lang="km"] .form-control,
html[lang="km"] .form-select {
font-size: 0.875rem !important;
line-height: 1.4 !important;
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important;
}
/* 3. All buttons */
html[lang="km"] button,
html[lang="km"] .btn,
html[lang="km"] a.btn {
font-size: 0.82rem !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
padding-top: 0.28rem !important;
padding-bottom: 0.28rem !important;
}
/* 4. Status badges, pills, tags */
html[lang="km"] .badge,
html[lang="km"] [class*="status-badge"],
html[lang="km"] [class*="-badge"]:not(.topbar-notif-badge),
html[lang="km"] [class*="-pill"]:not(.draft-pill),
html[lang="km"] [class*="-tag"],
html[lang="km"] .unit-tag,
html[lang="km"] .code-tag,
html[lang="km"] .dept-badge,
html[lang="km"] .dept-code-badge,
html[lang="km"] .ft-badge,
html[lang="km"] .req-badge {
font-size: 0.75rem !important;
line-height: 1.3 !important;
padding-top: 0.15rem !important;
padding-bottom: 0.15rem !important;
letter-spacing: 0 !important;
}
/* 5. Card headers */
html[lang="km"] .card-header,
html[lang="km"] [class*="-card-header"],
html[lang="km"] [class*="-card-hdr"],
html[lang="km"] [class*="-table-hdr"],
html[lang="km"] .approval-card-header {
font-size: 0.82rem !important;
line-height: 1.4 !important;
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* 6. Dropdown items */
html[lang="km"] .dropdown-item,
html[lang="km"] .dropdown-header {
font-size: 0.8rem !important;
line-height: 1.4 !important;
padding-top: 0.3rem !important;
padding-bottom: 0.3rem !important;
}
/* 7. List group items & nav links */
html[lang="km"] .list-group-item,
html[lang="km"] .nav-link,
html[lang="km"] .settings-nav-item {
font-size: 0.82rem !important;
line-height: 1.4 !important;
padding-top: 0.35rem !important;
padding-bottom: 0.35rem !important;
}
/* 8. Modal headers, titles, footers */
html[lang="km"] .modal-header,
html[lang="km"] .modal-footer {
padding-top: 0.6rem !important;
padding-bottom: 0.6rem !important;
}
html[lang="km"] .modal-title {
font-size: 0.95rem !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
}
/* 9. Alerts & banners */
html[lang="km"] .alert,
html[lang="km"] [class*="-alert"],
html[lang="km"] [class*="-banner"] {
font-size: 0.82rem !important;
line-height: 1.4 !important;
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}
/* 10. Labels */
html[lang="km"] label,
html[lang="km"] .form-label {
font-size: 0.82rem !important;
line-height: 1.4 !important;
margin-bottom: 0.2rem !important;
}
/* 11. Pagination */
html[lang="km"] .page-link {
font-size: 0.8rem !important;
line-height: 1.4 !important;
padding: 0.3rem 0.6rem !important;
}
/* 12. General text in tight containers */
html[lang="km"] .pa-muted,
html[lang="km"] .pa-amount,
html[lang="km"] [class*="detail-val"],
html[lang="km"] [class*="detail-key"],
html[lang="km"] [class*="info-text"],
html[lang="km"] [class*="info-row"],
html[lang="km"] [class*="help-text"],
html[lang="km"] .filter-label,
html[lang="km"] .filter-input,
html[lang="km"] .filter-select {
font-size: 0.8rem !important;
line-height: 1.4 !important;
}
/* 13. Page/section titles */
html[lang="km"] .page-title,
html[lang="km"] [class*="page-header"],
html[lang="km"] [class*="section-title"]:not(.delivery-section-title) {
line-height: 1.4 !important;
letter-spacing: 0 !important;
}
/* 14. Approve/Reject form page */
html[lang="km"] .af-info-lbl,
html[lang="km"] .af-ft-label {
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 0.75rem !important;
line-height: 1.3 !important;
}
html[lang="km"] .af-info-val { font-size: 0.82rem !important; line-height: 1.4 !important; }
html[lang="km"] .af-radio-title { font-size: 0.78rem !important; line-height: 1.4 !important; }
html[lang="km"] .af-radio-desc { font-size: 0.75rem !important; line-height: 1.4 !important; }
html[lang="km"] .af-label {
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 0.72rem !important;
}
html[lang="km"] .af-hint { font-size: 0.75rem !important; line-height: 1.4 !important; }
html[lang="km"] .af-action-badge {
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 0.75rem !important;
}
html[lang="km"] .af-side-hdr {
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 0.78rem !important;
line-height: 1.4 !important;
padding: 0.45rem 1rem !important;
}
html[lang="km"] .af-sum-k,
html[lang="km"] .af-sum-v { font-size: 0.75rem !important; line-height: 1.4 !important; }
html[lang="km"] .af-item-name { font-size: 0.73rem !important; line-height: 1.4 !important; }
html[lang="km"] .af-check-row { font-size: 0.72rem !important; line-height: 1.4 !important; }
html[lang="km"] .btn-confirm { font-size: 0.85rem !important; line-height: 1.4 !important; letter-spacing: 0 !important; }
html[lang="km"] .btn-cancel-af { font-size: 0.78rem !important; line-height: 1.4 !important; letter-spacing: 0 !important; }
html[lang="km"] .af-bc { font-size: 0.75rem !important; line-height: 1.3 !important; }
/* ══════════════════════════════════════════════════════ */
body {
font-family: 'Latin UI', 'Kantumruy Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-synthesis: none;
padding-top: 56px;
background: var(--page-bg);
background-image: var(--page-bg-img);
color: var(--text-primary);
min-height: 100vh;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: none;
line-height: 1.6;
transition: background-color 0.3s ease, color 0.3s ease;
font-variant-numeric: tabular-nums;
}
html[lang="km"] body {
font-family: 'Latin UI', 'Kantumruy Pro', sans-serif !important;
font-size: 112%;
font-weight: 500;
line-height: 1.9;
}
/* Khmer at weight 400 looks faint on normal-DPI monitors, so the base is 500
(same as English). Letter-spacing breaks Khmer clusters, so it is always 0. */
html[lang="km"] body * {
font-family: 'Latin UI', 'Kantumruy Pro', sans-serif !important;
line-height: 1.9;
letter-spacing: 0 !important;
}
[lang="km"], .khmer-text {
font-family: 'Latin UI', 'Kantumruy Pro', sans-serif !important;
font-size: 112%;
line-height: 1.9;
}
/* ── Khmer: topbar — match English height exactly ──
Smaller text + line-height 1.5 keeps left-side content at ~38px,
which with the same 0.875rem padding gives ~67px total — same as English. */
html[lang="km"] .app-topbar h1,
html[lang="km"] .app-topbar-left h1 {
font-family: 'Latin UI', 'Kantumruy Pro', sans-serif !important;
font-size: 1rem !important;
font-weight: 700 !important;
line-height: 1.55 !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin: 0 !important;
-webkit-font-smoothing: antialiased;
}
html[lang="km"] .app-topbar-subtitle {
font-size: 0.85rem !important;
line-height: 1.5 !important;
}
html[lang="km"] .topbar-icon-btn {
width: 36px !important;
height: 36px !important;
font-size: 1.25rem !important;
}
html[lang="km"] .topbar-icon-btn i,
html[lang="km"] .topbar-icon-btn .ti {
font-size: 1.25rem !important;
}
html[lang="km"] .topbar-icon-btn.wide {
width: auto !important;
font-size: 0.78rem !important;
padding: 0 0.75rem !important;
}
html[lang="km"] .tlb {
font-size: 0.75rem !important;
padding: 0.22rem 0.5rem !important;
line-height: 1 !important;
}
html[lang="km"] .tlb-sep {
line-height: 1 !important;
}
html[lang="km"] .topbar-notif-badge {
line-height: 1.4 !important;
}
html[lang="km"] .autosave-badge {
font-size: 0.75rem !important;
padding: 0.18rem 0.55rem !important;
line-height: 1.3 !important;
}
/* ── Khmer: small labels / meta text — never below 12px ── */
html[lang="km"] .stat-card-label,
html[lang="km"] .stat-label,
html[lang="km"] .toolbar-meta,
html[lang="km"] .form-text-custom,
html[lang="km"] .activity-time,
html[lang="km"] .step-sublabel,
html[lang="km"] .btn-view {
font-size: 0.75rem !important;
text-transform: none !important;
}
/* ── Khmer: sidebar — match English sizes exactly ── */
html[lang="km"] .sidebar-logo h4 {
font-size: 1rem !important;
line-height: 1.3 !important;
}
html[lang="km"] .sidebar-nav-label {
font-size: 0.75rem !important;
line-height: 1.3 !important;
text-transform: none !important;
}
html[lang="km"] .sidebar-nav-item {
font-size: 0.82rem !important;
line-height: 1.3 !important;
}
html[lang="km"] .ti {
font-family: 'tabler-icons' !important;
font-style: normal !important;
font-weight: normal !important;
line-height: 1 !important;
}
html[lang="km"] .sidebar-nav-icon {
font-size: 1.05rem !important;
line-height: 1 !important;
}
html[lang="km"] .sidebar-nav-badge {
font-size: 0.6rem !important;
line-height: 1.4 !important;
}
html[lang="km"] .sidebar-user-name {
font-size: 0.8rem !important;
line-height: 1.3 !important;
}
html[lang="km"] .sidebar-user-role {
font-size: 0.72rem !important;
line-height: 1.3 !important;
}
/* Khmer — increase small UI text to stay readable */
html[lang="km"] .table thead th,
html[lang="km"] .requests-table thead th,
html[lang="km"] .po-table thead th,
html[lang="km"] .pa-table thead th {
font-family: 'Latin UI', 'Kantumruy Pro', sans-serif !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
line-height: 1.6 !important;
letter-spacing: 0 !important;
text-transform: none !important;
-webkit-font-smoothing: antialiased;
}
html[lang="km"] .po-table-title {
font-size: 1rem !important;
font-weight: 500 !important;
}
html[lang="km"] .po-table-hint {
font-size: 0.85rem !important;
}
html[lang="km"] .stat-card {
line-height: 1.4 !important;
}
html[lang="km"] .stat-card * {
line-height: 1.4 !important;
}
html[lang="km"] .stat-card-headline {
font-size: 0.82rem !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
html[lang="km"] .stat-card-num {
font-size: 2rem !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
line-height: 1 !important;
}
html[lang="km"] .stat-card-sub {
font-size: 0.82rem !important;
font-weight: 400 !important;
}
html[lang="km"] .stat-card-link {
font-size: 0.82rem !important;
}
html[lang="km"] .requests-card-title {
font-size: 1rem !important;
font-weight: 500 !important;
}
html[lang="km"] .toolbar-label {
font-size: 0.88rem !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
html[lang="km"] .urgent-label {
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
}
html[lang="km"] .toolbar-input {
height: auto !important;
min-height: 36px !important;
padding-top: 0.3rem !important;
padding-bottom: 0.3rem !important;
line-height: 1.5 !important;
}
/* Profile page — disable uppercase/letter-spacing for Khmer */
html[lang="km"] .profile-card-header h4,
html[lang="km"] .signature-header h5,
html[lang="km"] .profile-label,
html[lang="km"] .form-label-custom,
html[lang="km"] .section-title,
html[lang="km"] .p-card-title,
html[lang="km"] .meta-key,
html[lang="km"] .info-field-label,
html[lang="km"] .stat-mini-lbl,
html[lang="km"] .sig-preview-label {
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 0.82rem !important;
font-weight: 400 !important;
color: var(--text-secondary) !important;
}
html[lang="km"] .profile-value,
html[lang="km"] .info-field-value,
html[lang="km"] .meta-val {
font-size: 0.88rem !important;
}
/* Item description cell — restore 1.05rem that the global td rule shrinks in Khmer mode */
html[lang="km"] .item-desc-cell {
font-size: 1.05rem !important;
line-height: 1.65 !important;
font-weight: 400 !important;
}
/* Request detail page — Khmer readability: no uppercase, normal weight, darker color */
html[lang="km"] .rd-meta-lbl,
html[lang="km"] .rd-card-title,
html[lang="km"] .metric-label,
html[lang="km"] .workflow-label,
html[lang="km"] .table-modern thead th,
html[lang="km"] .c-bubble-role,
html[lang="km"] .tl-role,
html[lang="km"] .md-metric-label,
html[lang="km"] .step-label,
html[lang="km"] .step-sublabel,
html[lang="km"] .frow-meta-item,
html[lang="km"] .code-tag {
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 400 !important;
color: var(--text-secondary) !important;
}
/* Request Detail — per-class size: readable Khmer with tight line-height to prevent inflation */
html[lang="km"] .rd-meta-lbl { font-size: 0.82rem !important; line-height: 1.2 !important; }
html[lang="km"] .rd-card-title { font-size: 0.95rem !important; line-height: 1.2 !important; }
html[lang="km"] .metric-label,
html[lang="km"] .md-metric-label { font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0.3rem !important; }
html[lang="km"] .metric-value { line-height: 1.1 !important; }
html[lang="km"] .metric-subtitle { font-size: 0.82rem !important; line-height: 1.2 !important; }
html[lang="km"] .md-metric-value { line-height: 1.1 !important; }
html[lang="km"] .metric-card { padding: 0.7rem 0.9rem !important; }
html[lang="km"] .tl-role,
html[lang="km"] .c-bubble-role { font-size: 0.8rem !important; line-height: 1.2 !important; }
html[lang="km"] .table-modern thead th { font-size: 0.82rem !important; line-height: 1.2 !important; }
html[lang="km"] .rd-status-badge { font-size: 0.82rem !important; line-height: 1.2 !important; padding: 0.22rem 0.55rem !important; }
html[lang="km"] .btn-rd { font-size: 0.88rem !important; line-height: 1.3 !important; }
html[lang="km"] .rd-breadcrumb,
html[lang="km"] .rd-bc-link,
html[lang="km"] .rd-bc-cur { font-size: 0.85rem !important; line-height: 1.2 !important; }
html[lang="km"] .c-bubble-text { font-size: 0.88rem !important; line-height: 1.6 !important; }
html[lang="km"] .tab-btn { font-size: 0.88rem !important; line-height: 1.3 !important; padding: 0.38rem 0.7rem !important; }
html[lang="km"] .code-tag { font-size: 0.82rem !important; line-height: 1.2 !important; }
html[lang="km"] .frow-meta-item { font-size: 0.82rem !important; line-height: 1.2 !important; }
html[lang="km"] .urgent-action-pill { font-size: 0.8rem !important; line-height: 1.2 !important; padding: 2px 7px !important; }
/* Request Detail — workflow strip: readable Khmer with controlled height */
html[lang="km"] .workflow-label { font-size: 0.8rem !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.2 !important; }
html[lang="km"] .workflow-status { font-size: 0.85rem !important; line-height: 1.2 !important; }
html[lang="km"] .workflow-header { margin-bottom: 0.5rem !important; }
html[lang="km"] .workflow-steps { padding-top: 10px !important; padding-bottom: 6px !important; }
html[lang="km"] .step-label { font-size: 0.75rem !important; line-height: 1.2 !important; margin-top: 5px !important; }
html[lang="km"] .step-sublabel { font-size: 0.72rem !important; line-height: 1.2 !important; margin-top: 0 !important; }
/* Create request page — disable uppercase/letter-spacing for Khmer */
html[lang="km"] .rc-card-title,
html[lang="km"] .rc-meta-lbl,
html[lang="km"] .items-tbl thead th,
html[lang="km"] .sum-tlbl,
html[lang="km"] .cat-ttl,
html[lang="km"] .cat-card-nm {
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 500 !important;
}
html[lang="km"] .items-tbl thead th {
font-size: 0.82rem !important;
}
html[lang="km"] .rc-card-title {
font-size: 0.85rem !important;
}
html[lang="km"] .btn-bar {
font-size: 0.88rem !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
}
html[lang="km"] .fc::placeholder {
font-size: 0.78rem !important;
}
html[lang="km"] .sum-k,
html[lang="km"] .sum-v,
html[lang="km"] .bar-stat {
font-size: 0.82rem !important;
}
/* Edit request page — disable uppercase/letter-spacing for Khmer */
html[lang="km"] .items-panel-title,
html[lang="km"] .items-table thead th,
html[lang="km"] .panel-box-title,
html[lang="km"] .progress-label,
html[lang="km"] .section-title,
html[lang="km"] .catalog-panel-title,
html[lang="km"] .price-badge {
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 500 !important;
}
html[lang="km"] .items-table thead th {
font-size: 0.82rem !important;
}
html[lang="km"] .items-panel-title {
font-size: 0.85rem !important;
}
html[lang="km"] .btn-action {
font-size: 0.88rem !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
}
html[lang="km"] .btn-add-item {
font-size: 0.85rem !important;
letter-spacing: 0 !important;
}
html[lang="km"] .action-bar-stat {
font-size: 0.82rem !important;
}
html[lang="km"] .add-item-hint {
font-size: 0.78rem !important;
}
html[lang="km"] .form-control-custom {
font-size: 0.92rem !important;
line-height: 1.6 !important;
}
/* Add/Edit Pricing page — disable uppercase/letter-spacing for Khmer */
html[lang="km"] .pricing-card-title,
html[lang="km"] .pricing-table thead th,
html[lang="km"] .quick-actions-label,
html[lang="km"] .summary-key,
html[lang="km"] .summary-total-label,
html[lang="km"] .fill-label,
html[lang="km"] .tips-box-title,
html[lang="km"] .delivery-section-title,
html[lang="km"] .field-label {
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 500 !important;
}
html[lang="km"] .pricing-table thead th {
font-size: 0.82rem !important;
}
html[lang="km"] .pricing-card-title {
font-size: 0.85rem !important;
}
html[lang="km"] .action-btn {
font-size: 0.85rem !important;
letter-spacing: 0 !important;
}
html[lang="km"] .quick-btn {
font-size: 0.75rem !important;
letter-spacing: 0 !important;
}
/* Pricing page delivery section — Khmer font is taller, keep compact */
html[lang="km"] .field-label {
font-size: 0.6rem !important;
margin-bottom: 0.1rem !important;
line-height: 1.2 !important;
}
html[lang="km"] .field-input {
font-size: 0.75rem !important;
padding: 0.18rem 0.5rem !important;
line-height: 1.4 !important;
}
html[lang="km"] textarea.field-input {
min-height: 26px !important;
line-height: 1.4 !important;
}
html[lang="km"] .delivery-section-title {
font-size: 0.72rem !important;
margin-bottom: 0.2rem !important;
}
html[lang="km"] .delivery-section {
padding: 0.3rem 0.875rem !important;
}
/* Line-Item Approval page — Khmer readability */
html[lang="km"] .li-info-lbl,
html[lang="km"] .li-item-lbl,
html[lang="km"] .li-side-hdr {
font-size: 0.75rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 400 !important;
color: var(--text-secondary) !important;
line-height: 1.3 !important;
}
html[lang="km"] .li-action-btn {
font-size: 0.7rem !important;
padding: 0.4rem 0.45rem !important;
line-height: 1.3 !important;
}
html[lang="km"] .li-reason label {
font-size: 0.7rem !important;
line-height: 1.3 !important;
}
html[lang="km"] .li-prog-k,
html[lang="km"] .li-prog-v {
font-size: 0.7rem !important;
line-height: 1.4 !important;
}
html[lang="km"] .li-legend-row {
font-size: 0.68rem !important;
line-height: 1.4 !important;
}
html[lang="km"] .li-bc,
html[lang="km"] .li-bc-link,
html[lang="km"] .li-bc-sep,
html[lang="km"] .li-bc-cur {
font-size: 0.68rem !important;
line-height: 1.3 !important;
}
html[lang="km"] .li-prog-pill {
font-size: 0.65rem !important;
padding: 0.22rem 0.6rem !important;
line-height: 1.3 !important;
}
/* ── LIFECYCLE PAGE KHMER OVERRIDES ── */
html[lang="km"] .stat-card-lbl {
font-size: 0.78rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 400 !important;
color: var(--text-secondary) !important;
line-height: 1.3 !important;
}
html[lang="km"] .field-label {
font-size: 0.78rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 400 !important;
color: var(--text-secondary) !important;
line-height: 1.3 !important;
}
html[lang="km"] .side-card-header {
font-size: 0.82rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 500 !important;
color: var(--text-primary) !important;
line-height: 1.3 !important;
}
html[lang="km"] .main-card-title {
font-size: 0.9rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.3 !important;
}
html[lang="km"] .progress-title {
font-size: 0.8rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.3 !important;
}
html[lang="km"] .progress-seg {
font-size: 0.72rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.3 !important;
}
html[lang="km"] .quick-action-btn {
font-size: 0.72rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.3 !important;
}
html[lang="km"] .btn-arrived,
html[lang="km"] .btn-not-purchased,
html[lang="km"] .btn-reset,
html[lang="km"] .btn-save,
html[lang="km"] .btn-complete,
html[lang="km"] .btn-confirm {
font-size: 0.78rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.3 !important;
}
html[lang="km"] .sum-lbl,
html[lang="km"] .summary-label {
font-size: 0.75rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.3 !important;
}
html[lang="km"] .shortcut-row {
font-size: 0.72rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.3 !important;
}
html[lang="km"] .partial-banner-title {
font-size: 0.8rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.3 !important;
}
html[lang="km"] .partial-banner-body {
font-size: 0.75rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.5 !important;
}
input, textarea, select, button,
.form-control, .form-select, .btn {
font-family: 'Latin UI', 'Kantumruy Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
font-variant-numeric: tabular-nums;
}
html[lang="km"] input, html[lang="km"] textarea,
html[lang="km"] select, html[lang="km"] button,
html[lang="km"] .form-control, html[lang="km"] .form-select,
html[lang="km"] .btn {
font-family: 'Latin UI', 'Kantumruy Pro', 'Noto Sans Khmer', 'Khmer OS', sans-serif !important;
font-size: 1rem;
}
table, th, td {
font-family: 'Latin UI', 'Kantumruy Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
font-variant-numeric: tabular-nums;
}
html[lang="km"] table, html[lang="km"] th, html[lang="km"] td {
font-family: 'Latin UI', 'Kantumruy Pro', 'Noto Sans Khmer', sans-serif !important;
font-weight: 500 !important;
line-height: 1.6 !important;
letter-spacing: 0 !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Inventory / Stock templates (Khmer sizing) ── */
html[lang="km"] .kpi-lbl {
font-size: 0.75rem !important; line-height: 1.3 !important;
text-transform: none !important; letter-spacing: 0 !important;
}
html[lang="km"] .kpi-val {
font-size: 1.3rem !important; line-height: 1.1 !important; font-weight: 500 !important;
}
html[lang="km"] .section-head,
html[lang="km"] .section-card-head {
font-size: 0.82rem !important; line-height: 1.3 !important;
text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important;
}
html[lang="km"] .inv-table thead th {
font-size: 0.76rem !important; line-height: 1.3 !important;
text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important;
}
html[lang="km"] .inv-table tbody td {
font-size: 0.85rem !important; line-height: 1.4 !important;
}
html[lang="km"] .dept-pill,
html[lang="km"] .dept-code-badge,
html[lang="km"] .low-badge {
font-size: 0.75rem !important; line-height: 1.3 !important;
}
html[lang="km"] .badge-in,
html[lang="km"] .badge-out,
html[lang="km"] .badge-return {
font-size: 0.75rem !important; line-height: 1.3 !important;
}
html[lang="km"] .item-name { font-size: 0.85rem !important; line-height: 1.4 !important; }
html[lang="km"] .item-code { font-size: 0.75rem !important; line-height: 1.3 !important; }
html[lang="km"] .panel-head {
font-size: 0.82rem !important; line-height: 1.3 !important;
text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important;
}
html[lang="km"] .form-field-label {
font-size: 0.78rem !important; line-height: 1.3 !important;
text-transform: none !important; letter-spacing: 0 !important;
}
/* ── end inventory / stock ── */
.currency, .amount, .price, .total,
[class*="currency"], [class*="amount"], [class*="price"], [class*="total"] {
font-family: 'Latin UI', 'Kantumruy Pro', sans-serif;
font-variant-numeric: tabular-nums;
font-weight: 500;
letter-spacing: 0.02em;
}
input[type="number"], input[type="tel"] {
font-family: 'Latin UI', 'Kantumruy Pro', sans-serif;
font-variant-numeric: tabular-nums;
font-weight: 500;
letter-spacing: 0.01em;
}
/* ============================================
LAYOUT
============================================ */
body.fullscreen-page {
padding-top: 0;
overflow: hidden;
height: 100vh;
}
body.fullscreen-page .navbar-custom { display: none; }
body.fullscreen-page footer { display: none; }
body:not(.has-sidebar) .app-main {
margin-left: 0 !important;
}
body.fullscreen-page .app-main {
margin-left: 0 !important;
}
/* ============================================
NAVBAR
============================================ */
.navbar-custom {
background: var(--navbar-bg);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 0;
min-height: 72px;
}
.navbar-brand {
font-weight: 700;
font-size: 1.1rem;
color: white !important;
display: flex;
align-items: stretch;
gap: 0.35rem;
padding: 0;
margin: 0;
height: 72px;
}
.navbar-brand img {
height: 100% !important;
width: auto !important;
display: block;
object-fit: contain;
}
.navbar-brand span:first-child { font-size: 1.2rem !important; }
.navbar-brand:hover { opacity: 0.9; }
.nav-link {
color: rgba(255, 255, 255, 0.9) !important;
font-weight: 500;
padding: 0.4rem 0.75rem !important;
border-radius: 6px;
transition: background 0.2s, color 0.2s;
margin: 0 0.15rem;
font-size: 0.85rem;
}
.nav-link:hover {
background-color: rgba(255, 255, 255, 0.15);
color: white !important;
}
.nav-link.active {
background-color: rgba(255, 255, 255, 0.2);
color: white !important;
font-weight: 600;
}
.user-dropdown {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 0.2rem 0.6rem;
margin-left: 0.75rem;
max-width: 200px;
}
.user-dropdown .dropdown-toggle {
color: white !important;
font-weight: 500;
padding: 0.35rem 0.4rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
display: inline-block;
font-size: 0.85rem;
}
.user-dropdown .dropdown-toggle:after { margin-left: 0.4rem; }
.user-dropdown .dropdown-toggle:hover {
background-color: rgba(255, 255, 255, 0.15);
border-radius: 6px;
}
.dropdown-menu {
border: none;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
border-radius: 10px;
margin-top: 0.5rem;
font-size: 0.85rem;
background: var(--bg-surface);
border: 1px solid var(--border-bright);
animation: dropdownFadeIn 0.15s ease;
}
/* translate, not transform — transform would override Popper's
inline positioning and make the menu jump while it fades in */
@keyframes dropdownFadeIn {
from { opacity: 0; translate: 0 -6px; }
to { opacity: 1; translate: 0 0; }
}
.dropdown-item {
padding: 0.6rem 1rem;
font-weight: 500;
transition: background 0.15s, color 0.15s, transform 0.15s;
color: var(--text-primary);
border-radius: 6px;
margin: 2px 4px;
width: calc(100% - 8px);
}
.dropdown-item:hover {
background-color: var(--bg-hover);
color: var(--blue);
transform: translateX(2px);
}
.dropdown-divider {
margin: 0.4rem 0;
border-color: var(--border);
}
.role-badge {
background: var(--blue-glow);
color: var(--blue);
padding: 0.2rem 0.6rem;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 600;
display: inline-block;
border: 1px solid var(--border-bright);
}
[data-theme="light"] .role-badge {
background: color-mix(in srgb, var(--blue) 15%, var(--card-bg) 85%);
color: var(--blue);
filter: brightness(0.7);
}
.dept-badge {
background: var(--bg-raised);
color: var(--text-primary);
padding: 0.3rem 0.6rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.2rem;
border: 1px solid var(--border-bright);
flex-shrink: 0;
}
.dept-badge-sm {
background: var(--bg-raised);
color: var(--text-secondary);
padding: 0.15rem 0.4rem;
border-radius: 10px;
font-size: 0.65rem;
font-weight: 600;
display: inline-block;
border: 1px solid var(--border-bright);
}
/* ============================================
SIDEBAR LAYOUT SYSTEM
Pages use body class to activate sidebar
============================================ */
/* Any page with class "has-sidebar" gets sidebar layout */
body.has-sidebar .navbar-custom { display: none !important; }
body.has-sidebar { padding-top: 0 !important; }
body.has-sidebar footer { display: none !important; }
/* Sidebar container */
.app-sidebar {
position: fixed;
top: 0;
left: 0;
width: 220px;
height: 100vh;
background: var(--sidebar-bg);
border-right: 1px solid var(--sidebar-dark);
z-index: 1000;
display: flex;
flex-direction: column;
transition: width 0.3s ease, transform 0.3s ease;
overflow-y: hidden;
overflow-x: visible;
contain: layout paint;
}
/* Sidebar logo area */
.sidebar-logo {
padding: 0;
margin: 0;
border: none;
border-bottom: 1px solid var(--sidebar-dark);
flex-shrink: 0;
background: transparent;
box-shadow: none;
height: 80px;
overflow: hidden;
width: 100%;
}
.sidebar-logo-inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
padding: 2px 8px;
margin: 0;
}
.sidebar-logo-inner img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
padding: 0;
margin: 0;
transition: opacity 0.2s ease;
}
.sidebar-logo h4 {
color: var(--sidebar-text-bright);
font-size: 1rem;
font-weight: 700;
margin: 0;
white-space: nowrap;
}
/* Sidebar toggle button */
.sidebar-toggle-btn {
position: absolute;
top: 28px;
right: -12px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--sidebar-bg);
border: 2px solid var(--sidebar-dark);
color: var(--sidebar-text-bright);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1001;
transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
padding: 0;
font-size: 0.75rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.sidebar-toggle-btn:hover {
background: var(--sidebar-active);
border-color: var(--sidebar-active);
transform: scale(1.1);
}
.sidebar-toggle-arrow {
display: inline-block;
transition: transform 0.3s ease;
}
body.sidebar-collapsed .sidebar-toggle-arrow {
transform: rotate(180deg);
}
body.sidebar-collapsed .sidebar-toggle-btn {
right: -12px;
}
@media (max-width: 768px) {
.sidebar-toggle-btn {
display: none;
}
}
/* Hide topbar toggle on desktop since we have sidebar toggle */
#sidebarCollapseToggle {
display: none;
}
@media (max-width: 768px) {
#sidebarCollapseToggle {
display: flex;
}
}
/* Sidebar logo - update position to relative for toggle button */
.sidebar-logo {
position: relative;
}
/* Sidebar navigation */
.sidebar-nav {
flex: 1;
padding: 0.75rem 0;
overflow-y: auto;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
}
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
background: var(--border-bright);
border-radius: 3px;
}
/* Nav section label */
.sidebar-nav-label {
transition: opacity 0.3s ease, color 0.3s ease;
padding: 0.75rem 1.25rem 0.25rem;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(168,197,176,.72);
}
/* Nav items */
.sidebar-nav-item {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.35rem 0.75rem;
margin: 0 0.5rem;
color: var(--sidebar-text);
text-decoration: none;
font-size: 0.82rem;
font-weight: 500;
transition: background 0.2s ease, color 0.2s ease;
border-radius: 8px;
position: relative;
white-space: nowrap;
}
.sidebar-nav-item span:not(.sidebar-nav-icon) {
transition: opacity 0.3s ease;
}
body.sidebar-collapsed .sidebar-nav-item span:not(.sidebar-nav-icon) {
opacity: 0;
}
.sidebar-nav-item:hover {
background: var(--sidebar-hover);
color: var(--sidebar-text-bright);
}
.sidebar-nav-item.active {
background: rgba(255,255,255,0.14);
color: var(--sidebar-text-bright);
font-weight: 600;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18),
inset 0 1px 0 rgba(255,255,255,0.10);
}
.sidebar-nav-item.danger:hover {
background: var(--red-glow);
color: var(--red);
}
/* Nav item badge (for notification counts) */
.sidebar-nav-badge {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
background: var(--red);
color: white;
font-size: 0.6rem;
font-weight: 700;
padding: 0.1rem 0.4rem;
border-radius: 10px;
line-height: 1.4;
white-space: nowrap;
flex-shrink: 0;
}
.memo-pending-badge {
animation: pulse-badge 1.8s ease-in-out infinite;
}
@keyframes pulse-badge {
0%, 100% { transform: translateY(-50%) scale(1); opacity: 1; }
50% { transform: translateY(-50%) scale(1.2); opacity: 0.8; }
}
.sidebar-nav-badge.gold {
background: var(--gold);
color: #000;
}
.sidebar-nav-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 1.1rem;
flex-shrink: 0;
background: rgba(255,255,255,0.06);
color: var(--sidebar-text);
transition: background 0.2s ease, color 0.2s ease;
}
.sidebar-nav-item:hover .sidebar-nav-icon {
background: rgba(255,255,255,0.12);
color: var(--sidebar-text-bright);
}
.sidebar-nav-item.active .sidebar-nav-icon {
background: rgba(255,255,255,0.22);
color: var(--sidebar-text-bright);
}
.sidebar-nav-item.danger:hover .sidebar-nav-icon {
background: var(--red-glow);
color: var(--red);
}
/* Sidebar divider */
.sidebar-divider {
margin: 0.5rem 0;
border: none;
border-top: 1px solid var(--sidebar-dark);
}
/* Sidebar footer - user info */
.sidebar-footer {
padding: 0.875rem 1.25rem;
border-top: 1px solid var(--sidebar-dark);
flex-shrink: 0;
}
.sidebar-user {
display: flex;
align-items: center;
gap: 0.65rem;
}
.sidebar-user-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--sidebar-active);
border: 2px solid var(--sidebar-dark);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: var(--sidebar-text-bright);
font-weight: 700;
flex-shrink: 0;
overflow: hidden;
}
.sidebar-user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sidebar-user-info {
flex: 1;
min-width: 0;
transition: opacity 0.3s ease;
}
.sidebar-user-name {
color: var(--sidebar-text-bright);
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
line-height: 1.3;
}
.sidebar-user-role {
color: var(--sidebar-text);
font-size: 0.67rem;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Main content wrapper when sidebar is active */
.app-main {
margin-left: 220px;
min-height: 100vh;
background: var(--page-bg);
background-image: var(--page-bg-img);
display: flex;
flex-direction: column;
transition: margin-left 0.3s ease;
}
/* Collapsed sidebar state (desktop) */
body.sidebar-collapsed .app-sidebar {
width: 70px;
}
body.sidebar-collapsed .app-main {
margin-left: 70px;
}
body.sidebar-collapsed .sidebar-logo-inner {
display: flex;
justify-content: center;
align-items: center;
padding: 6px 4px;
}
body.sidebar-collapsed .sidebar-logo-inner img {
max-height: 44px;
max-width: 44px;
width: auto;
height: auto;
object-fit: contain;
object-position: center;
margin: 0 auto;
}
body.sidebar-collapsed .sidebar-nav-item {
justify-content: center;
padding: 0.6rem 0.5rem;
margin: 0 0.5rem;
position: relative;
}
body.sidebar-collapsed .sidebar-nav-item span:not(.sidebar-nav-icon) {
display: none;
}
body.sidebar-collapsed .sidebar-nav-badge {
display: inline-flex !important;
top: 4px;
right: 4px;
transform: none;
min-width: 16px;
height: 16px;
padding: 0 3px;
font-size: 0.55rem;
justify-content: center;
align-items: center;
}
body.sidebar-collapsed .sidebar-nav-label {
font-size: 0;
padding: 0.5rem 0;
text-align: center;
}
body.sidebar-collapsed .sidebar-nav-label::before {
content: '•';
font-size: 1rem;
color: rgba(168,197,176,.72);
}
body.sidebar-collapsed .sidebar-user-info {
display: none;
}
body.sidebar-collapsed .sidebar-user {
justify-content: center;
}
body.sidebar-collapsed .sidebar-footer {
padding: 0.875rem 0.5rem;
}
/* Top bar inside app-main */
.app-topbar {
background: var(--bg-surface);
border-bottom: 1px solid var(--border);
padding: 0.875rem 1.75rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
position: sticky;
top: 0;
z-index: 100;
flex-shrink: 0;
}
/* The topbar sits alone inside #sidebarTopbar, so its own sticky had no
room to stick and it scrolled away. Pin the wrapper instead. */
#sidebarTopbar {
position: sticky;
top: 0;
z-index: 100;
flex-shrink: 0;
}
.app-topbar-left h1 {
color: var(--text-primary);
font-size: 1rem;
font-weight: 700;
margin: 0 0 0.1rem 0;
letter-spacing: 0.02em;
line-height: 1.3;
}
.app-topbar-subtitle {
color: var(--text-secondary);
font-size: 0.85rem;
margin: 0;
}
.app-topbar-right {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
/* Icon button in topbar */
.topbar-icon-btn {
width: 36px;
height: 36px;
border-radius: 50% !important;
background: transparent;
border: none !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s, color 0.2s, transform 0.2s;
text-decoration: none;
font-size: 1.25rem;
color: var(--text-secondary);
position: relative;
flex-shrink: 0;
}
.topbar-icon-btn i,
.topbar-icon-btn .ti {
font-size: 1.25rem !important;
line-height: 1;
}
.topbar-icon-btn:hover,
.topbar-icon-btn:active,
.topbar-icon-btn:focus,
.topbar-icon-btn.show {
background: var(--bg-hover);
color: var(--blue);
transform: scale(1.05);
border: none !important;
outline: none !important;
}
/* Collapsed state indicator */
body:not(.sidebar-collapsed) #sidebarCollapseToggle {
background: var(--blue-glow);
color: var(--blue);
}
.topbar-icon-btn.wide {
width: auto;
padding: 0 0.75rem;
font-size: 0.78rem;
font-weight: 600;
gap: 0.3rem;
border-radius: 8px !important;
}
/* Ensure notification bell stays circular */
.topbar-icon-btn.notification-bell {
border-radius: 50% !important;
}
/* Theme toggle icon — CSS controls which icon shows, no JS needed */
#sidebarThemeToggle .ti-moon { display: none; }
#sidebarThemeToggle .ti-sun { display: inline-flex; align-items: center; }
[data-theme="dark"] #sidebarThemeToggle .ti-sun { display: none; }
[data-theme="dark"] #sidebarThemeToggle .ti-moon { display: inline-flex; align-items: center; }
/* Topbar language toggle */
.topbar-lang-toggle {
display: flex;
align-items: center;
gap: .25rem;
margin-right: .25rem;
}
.tlb {
font-size: .72rem;
font-weight: 600;
color: var(--text-muted);
text-decoration: none;
padding: .22rem .5rem;
border-radius: 6px;
transition: background .15s, color .15s;
letter-spacing: .02em;
line-height: 1;
}
.tlb:hover { color: var(--text-primary); background: var(--bg-hover); }
.tlb.active { color: var(--blue); background: var(--blue-glow); font-weight: 700; }
.tlb-sep { color: var(--text-muted); font-size: .72rem; opacity: .5; }
/* Topbar notification badge */
.topbar-notif-badge {
position: absolute;
top: -3px;
right: -3px;
background: var(--red);
color: white;
font-size: 0.68rem;
font-weight: 700;
padding: 0.1rem 0.3rem;
border-radius: 8px;
line-height: 1.4;
}
/* Topbar user pill */
/* Page content area */
.app-content {
flex: 1;
padding: 1.5rem 1.75rem 3rem;
}
/* Mobile toggle button */
.sidebar-mobile-toggle {
display: none;
position: fixed;
bottom: 1.5rem;
left: 1.5rem;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--blue);
color: white;
border: none;
font-size: 1.3rem;
cursor: pointer;
z-index: 1001;
box-shadow: 0 4px 16px var(--blue-glow);
align-items: center;
justify-content: center;
transition: transform 0.2s, box-shadow 0.2s;
}
.sidebar-mobile-toggle:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px var(--blue-glow);
}
/* Sidebar overlay for mobile */
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 999;
backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; }
/* Mobile responsive */
@media (max-width: 768px) {
.app-sidebar {
transform: translateX(-100%);
box-shadow: 4px 0 24px rgba(0,0,0,0.2);
}
.app-sidebar.mobile-open {
transform: translateX(0);
}
.app-main { margin-left: 0; }
body.sidebar-collapsed .app-main { margin-left: 0; }
.app-topbar { padding: 0.75rem 1rem; }
.app-content { padding: 1rem 1rem 2rem; }
.sidebar-mobile-toggle { display: flex; }
#sidebarCollapseToggle { display: none; } /* Hide desktop toggle on mobile */
}
/* ============================================
NOTIFICATION SYSTEM
============================================ */
.nav-icon-wrapper {
position: relative;
display: inline-block;
}
.notification-bell {
background: transparent;
border: none !important;
color: var(--text-secondary);
width: 36px;
height: 36px;
border-radius: 50% !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
padding: 0;
}
.notification-bell:hover,
.notification-bell:active,
.notification-bell:focus,
.notification-bell.show {
background: var(--bg-hover);
color: var(--blue);
transform: scale(1.08);
border: none !important;
outline: none !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.notification-bell.has-notifications:hover svg {
animation: none;
transform: rotate(0deg);
}
.notification-bell svg { vertical-align: middle; }
@keyframes bellRing {
0% { transform: rotate(0deg); }
10% { transform: rotate(14deg); }
20% { transform: rotate(-8deg); }
30% { transform: rotate(14deg); }
40% { transform: rotate(-4deg); }
50% { transform: rotate(10deg); }
60% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
.notification-bell.has-notifications svg {
animation: bellRing 2s ease-in-out infinite;
transform-origin: 50% 4px;
}
@keyframes badgePulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.15); opacity: 0.85; }
}
.notification-dropdown {
width: 340px;
min-width: 0;
max-width: calc(100vw - 2rem);
padding: 0;
z-index: 9999;
/* Only .notification-items scrolls — header/footer stay put */
overflow: hidden;
background: var(--bg-surface);
border: 1px solid var(--border-bright);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
border-radius: 12px;
animation: dropdownSlideIn 0.2s ease-out;
transform-origin: top right;
}
/* Uses the individual translate/scale properties, NOT transform:
Popper positions the menu with an inline transform, and animating
transform overrode it — the menu flashed ~40px too high over the
bell, then jumped into place. */
@keyframes dropdownSlideIn {
from { opacity: 0; translate: 0 -6px; scale: 0.97; }
to { opacity: 1; translate: 0 0; scale: 1; }
}
.notification-dropdown .dropdown-header {
font-weight: 600;
color: var(--text-primary);
background: var(--bg-raised);
border-bottom: 1px solid var(--border);
padding: 0.75rem 1rem;
}
.notification-dropdown-title {
font-weight: 700;
font-size: 0.85rem;
}
/* Full-width footer bar. !important beats the global .dropdown-item
pill (margin/radius) and page-level .dropdown-item colour overrides
(e.g. request_detail.html), so it looks the same on every page. */
.notification-dropdown .notification-view-all {
display: block;
width: 100%;
margin: 0;
border-radius: 0;
text-align: center;
padding: 0.55rem 1rem;
font-size: 0.8rem !important;
font-weight: 600;
color: var(--blue) !important;
background: var(--bg-raised) !important;
border-top: 1px solid var(--border);
transition: background 0.15s;
}
.notification-dropdown .notification-view-all:hover,
.notification-dropdown .notification-view-all:focus {
color: var(--blue) !important;
background: var(--bg-hover) !important;
transform: none;
}
.notification-items {
max-height: 280px;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
}
.notification-items::-webkit-scrollbar {
width: 6px;
}
.notification-items::-webkit-scrollbar-track {
background: transparent;
}
.notification-items::-webkit-scrollbar-thumb {
background: var(--border-bright);
border-radius: 3px;
}
.notification-items::-webkit-scrollbar-thumb:hover {
background: var(--border);
}
.notification-item-dropdown {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border);
transition: background 0.15s ease;
cursor: pointer;
display: block;
text-decoration: none;
color: inherit;
}
.notification-item-dropdown:last-child { border-bottom: none; }
.notification-item-dropdown.unread { background: var(--blue-glow); }
[data-theme="dark"] .notification-item-dropdown.unread {
background: rgba(77,159,255,0.15);
}
/* After .unread so hover still shows on unread items */
.notification-item-dropdown:hover,
[data-theme="dark"] .notification-item-dropdown.unread:hover {
background: var(--bg-hover);
}
.notification-item-dropdown .notif-title {
font-weight: 600;
font-size: 0.875rem;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.notification-item-dropdown .notif-message {
font-size: 0.75rem;
color: var(--text-secondary);
line-height: 1.4;
}
.notification-item-dropdown .notif-time {
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 0.25rem;
}
.notification-empty {
padding: 2rem 1rem;
text-align: center;
color: var(--text-muted);
}
/* ============================================
MOBILE
============================================ */
@media (max-width: 991px) {
.navbar-collapse {
background-color: rgba(255, 255, 255, 0.05);
padding: 0.75rem;
border-radius: 8px;
margin-top: 0.75rem;
}
.user-dropdown { margin: 0.4rem 0; }
}
/* ============================================
ALERTS
============================================ */
.alert {
border-radius: 8px;
border: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.alert-dismissible .btn-close { padding: 1rem; }
/* ── TOAST NOTIFICATIONS ── */
.toast-notification {
display: flex;
align-items: center;
gap: 9px;
min-width: 280px;
max-width: 420px;
padding: 9px 10px 9px 12px;
margin-bottom: 6px;
border-radius: 10px;
position: relative;
overflow: hidden;
pointer-events: all;
animation: toastIn .28s cubic-bezier(.22,1,.36,1) both;
background: #ffffff;
border: 1px solid #dde4e0;
box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
}
[data-theme="dark"] .toast-notification {
background: #0d1520;
border: 1px solid #1a2a3a;
box-shadow: 0 4px 24px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.3);
}
.toast-notification.removing { animation: toastOut .2s ease-in forwards; }
.toast-icon {
width: 26px; height: 26px; border-radius: 6px;
background: #f4f7f5; border: 1px solid #e2e8e4;
display: flex; align-items: center; justify-content: center;
font-size: 12px; flex-shrink: 0;
}
[data-theme="dark"] .toast-icon {
background: #111d2e;
border: 1px solid #1e2f45;
}
.toast-content { flex: 1; min-width: 0; }
.toast-title { font-size: 12px; font-weight: 700; color: #1c1c1c; line-height: 1.2; margin-bottom: 1px; }
.toast-message { font-size: 11px; color: #6a7870; line-height: 1.35; }
[data-theme="dark"] .toast-title { color: #e8f0fe; }
[data-theme="dark"] .toast-message { color: #6a8aaa; }
.toast-close {
width: 18px; height: 18px; border-radius: 5px;
background: transparent; border: none;
color: #b0b8b4; font-size: 13px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: background .15s, color .15s; line-height: 1;
}
.toast-close:hover { background: #f0f4f2; color: #1c1c1c; }
[data-theme="dark"] .toast-close { color: #3a5570; }
[data-theme="dark"] .toast-close:hover { background: #162234; color: #e8f0fe; }
.toast-progress {
position: absolute; bottom: 0; left: 0; right: 0;
height: 2px; background: #edf1ee;
transform-origin: left; border-radius: 0 0 12px 12px;
animation: toastProg var(--toast-dur, 5000ms) linear forwards;
}
[data-theme="dark"] .toast-progress { background: #1a2a3a; }
@keyframes toastIn { from { opacity:0; transform:translateY(-10px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes toastOut {
0% { opacity:1; transform:none; max-height:80px; margin-bottom:0; padding-top:9px; padding-bottom:9px; }
100% { opacity:0; transform:translateY(-8px) scale(.95); max-height:0; margin-bottom:-6px; padding-top:0; padding-bottom:0; }
}
@keyframes toastProg { from { transform:scaleX(1); } to { transform:scaleX(0); } }
@media (max-width: 768px) {
#toast-container { right: 10px !important; left: 10px !important; top: 60px !important; align-items: stretch !important; }
.toast-notification { min-width: auto; width: 100%; }
}
/* ============================================
SKELETON LOADERS
============================================ */
/* ============================================
TOOLTIPS (CSS-only, no JS needed)
============================================ */
[data-tooltip] {
position: relative;
cursor: default;
}
[data-tooltip]::before {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--tooltip-bg);
color: var(--tooltip-text);
padding: 0.35rem 0.65rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
z-index: 9999;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
transform: translateX(-50%) translateY(4px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
[data-tooltip]::after {
content: '';
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--tooltip-bg);
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
z-index: 9999;
}
[data-tooltip]:hover::before {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
[data-tooltip]:hover::after { opacity: 1; }
/* ============================================
PAGE LOAD ANIMATIONS
============================================ */
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================
BUTTON MICRO-ANIMATIONS
============================================ */
.btn {
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.btn:active:not(:disabled) {
transform: scale(0.97);
}
.btn:disabled {
opacity: 0.65;
cursor: not-allowed;
}
/* ============================================
CARD HOVER EFFECTS
============================================ */
/* ============================================
GLOBAL CARD SHADOW (soft black, static)
============================================ */
.stat-card, .main-card, .requests-card,
.table-card, .form-card, .section-card, .side-card, .side-panel,
.kpi-card, .metric-card, .lp-card, .rv-card, .rv-side-card,
.rd-card, .li-card, .li-side-card, .ua-card, .ua-side-card,
.cp-side-card, .da-side-card, .ft-side-card, .cat-card, .rc-card,
.paid-card, .settings-card, .tab-content-card, .rejection-card,
.memo-card, .mf-gm-card, .mf-gm-dept-card, .mf-gm-signers-card,
.db-card, .info-card, .help-card, .history-card, .progress-card,
.completion-card, .action-card, .report-card, .sidebar-card,
.p-card, .identity-card, .danger-card, .qt-card, .pa-table-card,
.po-table-card, .approved-summary-panel, .detail-card, .pricing-card,
.da-card, .cp-card, .req-mobile-card, .filter-bar, .filter-tab-group,
.toolbar-row, .pa-toolbar, .po-toolbar, .chart-card, .activity-card {
box-shadow: var(--card-shadow);
}
[data-theme="dark"] .stat-card,
[data-theme="dark"] .main-card, [data-theme="dark"] .requests-card, [data-theme="dark"] .table-card,
[data-theme="dark"] .form-card, [data-theme="dark"] .section-card,
[data-theme="dark"] .side-card, [data-theme="dark"] .side-panel,
[data-theme="dark"] .kpi-card, [data-theme="dark"] .metric-card,
[data-theme="dark"] .lp-card, [data-theme="dark"] .rv-card,
[data-theme="dark"] .rv-side-card, [data-theme="dark"] .rd-card,
[data-theme="dark"] .li-card, [data-theme="dark"] .li-side-card,
[data-theme="dark"] .ua-card, [data-theme="dark"] .ua-side-card,
[data-theme="dark"] .cp-side-card, [data-theme="dark"] .da-side-card,
[data-theme="dark"] .ft-side-card, [data-theme="dark"] .cat-card,
[data-theme="dark"] .rc-card, [data-theme="dark"] .paid-card,
[data-theme="dark"] .settings-card, [data-theme="dark"] .tab-content-card,
[data-theme="dark"] .rejection-card, [data-theme="dark"] .memo-card,
[data-theme="dark"] .mf-gm-card, [data-theme="dark"] .mf-gm-dept-card,
[data-theme="dark"] .mf-gm-signers-card, [data-theme="dark"] .db-card,
[data-theme="dark"] .info-card, [data-theme="dark"] .help-card,
[data-theme="dark"] .history-card, [data-theme="dark"] .progress-card,
[data-theme="dark"] .completion-card, [data-theme="dark"] .action-card,
[data-theme="dark"] .report-card, [data-theme="dark"] .sidebar-card,
[data-theme="dark"] .p-card, [data-theme="dark"] .identity-card,
[data-theme="dark"] .danger-card, [data-theme="dark"] .qt-card,
[data-theme="dark"] .pa-table-card, [data-theme="dark"] .po-table-card,
[data-theme="dark"] .approved-summary-panel, [data-theme="dark"] .detail-card,
[data-theme="dark"] .pricing-card, [data-theme="dark"] .da-card,
[data-theme="dark"] .cp-card, [data-theme="dark"] .req-mobile-card,
[data-theme="dark"] .filter-bar, [data-theme="dark"] .filter-tab-group,
[data-theme="dark"] .toolbar-row, [data-theme="dark"] .pa-toolbar,
[data-theme="dark"] .po-toolbar, [data-theme="dark"] .chart-card,
[data-theme="dark"] .activity-card {
box-shadow: var(--card-shadow);
}
/* ============================================
STATUS BADGES (consistent everywhere)
============================================ */
.badge-status {
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 600;
border: 1px solid;
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.badge-pending {
background: var(--gold-glow);
color: var(--gold);
border-color: var(--gold);
animation: pendingPulse 2.5s ease-in-out infinite;
}
.badge-approved {
background: var(--accent-glow);
color: var(--accent);
border-color: var(--accent);
}
.badge-rejected {
background: var(--red-glow);
color: var(--red);
border-color: var(--red);
}
.badge-processing {
background: var(--blue-glow);
color: var(--blue);
border-color: var(--blue);
}
@keyframes pendingPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* ============================================
CONFIRMATION MODAL (replaces window.confirm)
============================================ */
#confirm-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 99998;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
}
#confirm-modal-overlay.active { display: flex; }
#confirm-modal-box {
background: var(--bg-surface);
border: 1px solid var(--border-bright);
border-radius: 16px;
padding: 2rem;
max-width: 400px;
width: 90%;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: confirmIn 0.2s ease;
text-align: center;
}
@keyframes confirmIn {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
#confirm-modal-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
#confirm-modal-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
#confirm-modal-message {
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: 1.5rem;
line-height: 1.5;
}
.confirm-modal-btns {
display: flex;
gap: 0.75rem;
justify-content: center;
}
.confirm-btn-cancel {
background: var(--bg-raised);
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.5rem 1.5rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, color 0.2s;
font-size: 0.875rem;
}
.confirm-btn-cancel:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.confirm-btn-confirm {
background: var(--red);
color: white;
border: none;
border-radius: 8px;
padding: 0.5rem 1.5rem;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s, transform 0.2s;
font-size: 0.875rem;
}
.confirm-btn-confirm:hover {
opacity: 0.9;
transform: translateY(-1px);
}
/* ============================================
COMMAND PALETTE (Ctrl+K)
============================================ */
#command-palette-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 99997;
align-items: flex-start;
justify-content: center;
padding-top: 10vh;
backdrop-filter: blur(4px);
}
#command-palette-overlay.active { display: flex; }
#command-palette-box {
background: var(--bg-surface);
border: 1px solid var(--border-bright);
border-radius: 12px;
width: min(600px, 90vw);
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
animation: confirmIn 0.15s ease;
}
#command-search-input {
width: 100%;
padding: 1rem 1.25rem;
background: transparent;
border: none;
border-bottom: 1px solid var(--border);
color: var(--text-primary);
font-size: 1rem;
font-family: inherit;
outline: none;
}
#command-search-input::placeholder { color: var(--text-muted); }
#command-results { max-height: 320px; overflow-y: auto; padding: 0.5rem; }
.command-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.65rem 0.75rem;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
text-decoration: none;
color: var(--text-primary);
}
.command-item:hover, .command-item.active {
background: var(--bg-hover);
color: var(--blue);
}
.command-item-icon {
width: 32px;
height: 32px;
background: var(--bg-raised);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.command-item-label { font-weight: 500; font-size: 0.875rem; }
.command-item-hint {
margin-left: auto;
font-size: 0.7rem;
color: var(--text-muted);
background: var(--bg-raised);
padding: 0.15rem 0.4rem;
border-radius: 4px;
}
#command-footer {
padding: 0.5rem 1rem;
border-top: 1px solid var(--border);
display: flex;
gap: 1rem;
font-size: 0.7rem;
color: var(--text-muted);
}
#command-footer span { display: flex; align-items: center; gap: 0.25rem; }
/* ============================================
KEYBOARD SHORTCUTS MODAL
============================================ */
#shortcuts-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 99996;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
}
#shortcuts-modal-overlay.active { display: flex; }
#shortcuts-modal-box {
background: var(--bg-surface);
border: 1px solid var(--border-bright);
border-radius: 16px;
padding: 1.5rem;
max-width: 480px;
width: 90%;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: confirmIn 0.2s ease;
}
.shortcuts-title {
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border);
}
.shortcut-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.4rem 0;
border-bottom: 1px solid var(--border);
font-size: 0.825rem;
color: var(--text-secondary);
}
.shortcut-row:last-child { border-bottom: none; }
.shortcut-keys { display: flex; gap: 0.25rem; }
kbd {
background: var(--bg-raised);
border: 1px solid var(--border-bright);
border-radius: 4px;
padding: 0.1rem 0.4rem;
font-size: 0.75rem;
font-family: 'Latin UI', 'Kantumruy Pro', monospace;
color: var(--text-primary);
box-shadow: 0 1px 0 var(--border-bright);
}
/* ============================================
BACK TO TOP BUTTON
============================================ */
#back-to-top {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
width: 40px;
height: 40px;
background: var(--blue);
color: white;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 9990;
box-shadow: 0 4px 12px var(--blue-glow);
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease;
font-size: 1.1rem;
pointer-events: none;
}
#back-to-top.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
#back-to-top:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px var(--blue-glow);
}
/* ============================================
BREADCRUMB
============================================ */
/* ============================================
FORM ENHANCEMENTS
============================================ */
.form-control, .form-select {
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-primary);
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
padding: 0.5rem 0.75rem;
}
.form-control:focus, .form-select:focus {
background: var(--bg-surface);
border-color: var(--blue);
box-shadow: 0 0 0 3px var(--blue-glow);
color: var(--text-primary);
outline: none;
}
.form-control::placeholder { color: var(--text-muted); }
.form-control.is-valid {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-control.is-invalid {
border-color: var(--red);
box-shadow: 0 0 0 3px var(--red-glow);
}
.invalid-feedback { color: var(--red); font-size: 0.75rem; }
.valid-feedback { color: var(--accent); font-size: 0.75rem; }
/* Character counter */
.char-counter {
font-size: 0.72rem;
text-align: right;
margin-top: 0.25rem;
color: var(--text-muted);
transition: color 0.2s;
}
.char-counter.warning { color: var(--gold); }
.char-counter.danger { color: var(--red); }
/* ============================================
TABLE ENHANCEMENTS
============================================ */
/* Pagination */
.page-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--bg-surface);
color: var(--text-secondary);
cursor: pointer;
font-size: 0.8rem;
transition: background 0.15s, color 0.15s;
}
.page-btn:hover:not(:disabled) {
background: var(--bg-hover);
color: var(--text-primary);
}
.page-btn.active {
background: var(--blue);
color: white;
border-color: var(--blue);
}
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Bulk action bar */
#bulk-count { color: var(--text-primary); font-weight: 600; }
/* ============================================
PROGRESS BAR
============================================ */
.progress-bar-fill {
height: 100%;
background: var(--accent);
border-radius: 3px;
transition: width 0.6s ease;
}
/* ============================================
ERROR BOUNDARY
============================================ */
/* ============================================
PRINT STYLES
============================================ */
@media print {
.navbar-custom,
#back-to-top,
#toast-container,
#command-palette-overlay,
#confirm-modal-overlay,
#shortcuts-modal-overlay,
footer,
.btn,
.theme-toggle-btn,
.notification-bell,
.dept-badge,
.user-dropdown { display: none !important; }
body {
padding-top: 0 !important;
background: white !important;
color: black !important;
}
table { border-collapse: collapse !important; }
th, td { border: 1px solid #ccc !important; color: black !important; }
.badge-status {
border: 1px solid currentColor !important;
}
}
/* ============================================
PAGE TRANSITION - DISABLED FOR SPA
============================================ */
#page-transition-overlay {
display: none !important; /* Disabled - causes flash */
}
/* ============================================
SPA NAVIGATION TRANSITIONS
============================================ */
.app-main {
transition: opacity 0.15s ease-out;
}
/* Disable all page-load animations during SPA navigation */
/* EXCEPTION: Keep navbar interactive during SPA navigation */
/* Prevent white flash by keeping background stable */
#mainContent {
background: var(--page-bg);
min-height: 100vh;
}
.nav-loading-indicator {
position: fixed;
top: 56px;
left: 0;
right: 0;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.15s ease;
z-index: 10000;
opacity: 0;
}
.nav-loading-indicator.active {
transform: scaleX(1);
opacity: 0.8;
}
body.has-sidebar .nav-loading-indicator {
top: 0;
left: 260px;
}
/* ============================================
RESPONSIVE CONTAINER
============================================ */
.container { width: 100%; padding: 0 1rem; }
@media (min-width: 480px) {
.container { padding: 0 1.5rem; }
}
@media (min-width: 768px) {
.container { max-width: 768px; margin: 0 auto; }
}
@media (min-width: 1024px) {
.container { max-width: 1280px; }
}
@media (min-width: 1280px) {
.container { max-width: 1536px; }
}
/* ============================================
RESPONSIVE TABLES (MOBILE CARDS)
============================================ */
/*
* USAGE: Add class="responsive-table" to any
* On mobile (≤768px), table rows automatically become cards
*
* EXAMPLE:
*
* ...
*
*
* | PR-2026-0001 |
* Approved |
* $1,234.56 |
*
*
*
*/
@media (max-width: 768px) {
/* Hide table structure on mobile */
table.responsive-table thead {
display: none;
}
table.responsive-table,
table.responsive-table tbody,
table.responsive-table tr {
display: block;
width: 100%;
}
/* Convert each row to a card */
table.responsive-table tr {
margin-bottom: 1rem;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
table.responsive-table tr:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-color: var(--border-bright);
}
/* Each cell becomes a row in the card */
table.responsive-table td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border: none;
border-bottom: 1px solid var(--border);
text-align: right;
}
table.responsive-table td:last-child {
border-bottom: none;
}
/* Show label before content using data-label attribute */
table.responsive-table td::before {
content: attr(data-label);
font-weight: 600;
color: var(--text-secondary);
font-size: 0.8rem;
margin-right: 1rem;
text-align: left;
flex: 0 0 40%;
}
/* Hide empty cells on mobile */
table.responsive-table td:empty {
display: none;
}
/* Special handling for action buttons */
table.responsive-table td.actions-cell,
table.responsive-table td[data-label="Actions"] {
border-top: 1px solid var(--border);
padding-top: 0.75rem;
margin-top: 0.5rem;
justify-content: center;
}
table.responsive-table td.actions-cell::before,
table.responsive-table td[data-label="Actions"]::before {
display: none;
}
/* Full width buttons on mobile */
table.responsive-table td.actions-cell .btn,
table.responsive-table td[data-label="Actions"] .btn,
table.responsive-table td.actions-cell a,
table.responsive-table td[data-label="Actions"] a {
width: 100%;
text-align: center;
}
/* Clickable row styling */
table.responsive-table tr[data-url] {
cursor: pointer;
}
/* Status badges - make them full width on mobile */
table.responsive-table td .status-badge {
font-size: 0.75rem;
padding: 0.3rem 0.7rem;
white-space: nowrap;
}
/* Department badges */
table.responsive-table td .dept-badge {
font-size: 0.75rem;
padding: 0.25rem 0.6rem;
}
/* Requester cell with avatar */
table.responsive-table td .requester-cell {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Amount cells - emphasize on mobile */
table.responsive-table td.amount-cell,
table.responsive-table td[data-label="Amount"],
table.responsive-table td[data-label="Total"] {
font-weight: 700;
font-size: 1.05rem;
color: var(--accent);
}
/* Date cells - smaller font */
table.responsive-table td[data-label="Date"],
table.responsive-table td[data-label="Created"] {
font-size: 0.8rem;
color: var(--text-muted);
}
}
/* Optional: Compact mode for very small screens */
@media (max-width: 480px) {
table.responsive-table tr {
padding: 0.75rem;
}
table.responsive-table td {
padding: 0.4rem 0;
font-size: 0.85rem;
}
table.responsive-table td::before {
font-size: 0.75rem;
flex: 0 0 35%;
}
}
/* ============================================
FLATPICKR CUSTOM STYLING
============================================ */
/* Flatpickr input styling */
input[type="date"].flatpickr-input,
input[type="datetime-local"].flatpickr-input,
input[type="datetime"].flatpickr-input {
cursor: pointer;
background: var(--bg-raised);
border: 1px solid var(--border);
color: var(--text-primary);
padding: 0.4rem 0.75rem;
border-radius: 8px;
font-size: 0.85rem;
transition: border-color 0.2s ease, background 0.2s ease;
max-width: 180px;
width: auto !important;
}
/* Compact styling for toolbar date inputs (both original and altInput) */
.toolbar-input[type="date"].flatpickr-input,
.toolbar-input.flatpickr-input {
width: 140px !important;
max-width: 140px;
font-size: 0.8rem;
padding: 0 0.65rem;
height: 36px;
line-height: 36px;
}
/* Flatpickr altInput (the visible formatted date) */
input.flatpickr-input.toolbar-input {
width: 140px !important;
max-width: 140px;
font-size: 0.8rem;
padding: 0 0.65rem !important;
height: 36px !important;
line-height: 36px !important;
}
input[type="date"].flatpickr-input:hover,
input[type="datetime-local"].flatpickr-input:hover {
border-color: var(--border-bright);
background: var(--bg-surface);
}
input[type="date"].flatpickr-input:focus,
input[type="datetime-local"].flatpickr-input:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 3px var(--accent-glow);
}
/* Flatpickr calendar popup */
.flatpickr-calendar {
background: var(--bg-surface);
border: 1px solid var(--border-bright);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
border-radius: 12px;
}
.flatpickr-months {
background: var(--bg-surface);
border-bottom: 1px solid var(--border);
}
.flatpickr-current-month {
color: var(--text-primary);
}
.flatpickr-weekdays {
background: var(--bg-surface);
}
.flatpickr-weekday {
color: var(--text-secondary);
}
.flatpickr-day {
color: var(--text-primary);
}
.flatpickr-day:hover {
background: var(--bg-hover);
border-color: var(--border-bright);
}
.flatpickr-day.selected {
background: var(--green);
border-color: var(--green);
color: white;
}
.flatpickr-day.today {
border-color: var(--green);
color: var(--green);
}
.flatpickr-time input {
background: var(--bg-surface);
color: var(--text-primary);
border: 1px solid var(--border);
}
.flatpickr-time input:hover {
background: var(--bg-hover);
}
.flatpickr-am-pm {
background: var(--bg-surface);
color: var(--text-primary);
}
.flatpickr-monthDropdown-months {
background: var(--bg-surface);
color: var(--text-primary);
}
.numInputWrapper:hover {
background: var(--bg-hover);
}
/* ============================================
EXTRA BLOCKS
============================================ */
/* ── SPA Spinner ── */
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ── Rounded dropdown lists for plain