/* admin/admin.css — compact, clean, themable */ /* ========================= THEME TOKENS ========================= */ :root { /* Core palette (default: violet) */ --brand: #343796; /* primary accent */ --brand-ink: #1f2240; /* headings / strong text */ --line: #e7e7ef; /* borders */ --bg: #f6f7fb; /* page bg */ --card: #ffffff; /* surfaces */ /* Semantic */ --danger: #b3261e; --muted: #666; /* Tables */ --th-bg: #f0effd; --th-ink: var(--brand); /* Focus/hover subtle */ --hover: #f7f7f7; /* Sidebar */ --sidebar-bg: var(--brand); --sidebar-ink: #fff; /* Buttons */ --btn-ghost-bg: #f2f2f7; } /* Light-blue theme override. Toggle by: */ /* ===== NTE Red Theme (premium, cohesive, accessible) ===== */ /* jn.theme.nte.022626 */ [data-theme="nte"]{ /* Brand */ --brand: #B51F2E; /* NTE brand red */ --brand-ink: #6E0F19; /* deep wine ink (headlines / emphasis) */ /* Surfaces */ --bg: #FFF8F9; /* blush-white background */ --card: #FFFFFF; /* keep cards clean */ /* Lines & subtle accents */ --line: #F1DADF; /* warm line (red-tinted) */ --hover: #FFF1F3; /* gentle hover tint */ --focus: #E4A0A8; /* focus ring (soft rose, visible) */ /* Table header */ --th-bg: #FFE9EC; /* pale blush header */ --th-ink: #7A1320; /* readable on th-bg */ /* Sidebar */ --sidebar-bg: var(--brand); --sidebar-ink: #FFFFFF; /* Buttons */ --btn-ghost-bg: #FFF0F2; /* ghost buttons on bg/card */ /* Aggregates / toggles (harmonized) */ --gross-on-bg: #FFF0F2; /* soft rose */ --gross-on-br: #F1B9C0; /* rose border */ --ded-on-bg: #FFF7EA; /* champagne wash (gold hint) */ --ded-on-br: #E9C98A; /* champagne border */ /* Tooltip */ --tooltip-bg: var(--brand); --tooltip-ink: #FFFFFF; /* Optional: “gold” accent if your admin CSS uses it */ --gold: #D2AA5C; /* champagne gold (from login) */ } /* jn.theme.nte.polish.022626 */ [data-theme="nte"] .btn.primary{ background: linear-gradient(135deg, rgba(181,31,46,.98), rgba(181,31,46,.82)); border-color: transparent; color:#fff; } [data-theme="nte"] .btn.primary:focus{ outline: none; box-shadow: 0 0 0 4px rgba(181,31,46,.18); } [data-theme="nte"] .sidebar{ background: linear-gradient(180deg, rgba(181,31,46,1), rgba(140,18,30,1)); } /* ========================================================= NTE Sidebar Soften — jn.nte.sidebar.soft.022626 Paste near bottom of admin css (after base/sidebar styles) ========================================================= */ [data-theme="nte"]{ /* Softer sidebar palette */ --sidebar-bg: #7E1622; /* deep wine */ --sidebar-ink: rgba(255,255,255,.92); --sidebar-grad-top: rgba(255,255,255,.08); --sidebar-grad-bot: rgba(0,0,0,.10); --sidebar-item-bg: rgba(255,255,255,.10); /* neutral glass */ --sidebar-item-br: rgba(255,255,255,.14); --sidebar-item-hover-bg: rgba(255,255,255,.16); --sidebar-item-hover-br: rgba(255,255,255,.18); --sidebar-item-active-bg: rgba(255,255,255,.22); --sidebar-item-active-br: rgba(210,170,92,.35); /* champagne hint */ --sidebar-item-active-glow: 0 0 0 3px rgba(210,170,92,.10); --sidebar-muted: rgba(255,255,255,.75); } /* Sidebar surface */ [data-theme="nte"] .sidebar{ background: linear-gradient(180deg, var(--sidebar-grad-top), var(--sidebar-grad-bot)), linear-gradient(180deg, var(--sidebar-bg), #65111B); color: var(--sidebar-ink); } /* Optional: soften the “big red block” feeling with a subtle inner highlight */ [data-theme="nte"] .sidebar::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(420px 220px at 30% 18%, rgba(210,170,92,.12), transparent 60%), radial-gradient(520px 260px at 70% 85%, rgba(255,255,255,.08), transparent 62%); opacity:.9; } /* Section headers like "PAYROLL", "EMPLOYEES" */ [data-theme="nte"] .sidebar .section-title, [data-theme="nte"] .sidebar h6, [data-theme="nte"] .sidebar .group-title{ color: var(--sidebar-muted); letter-spacing:.08em; font-weight:750; opacity:.95; } /* Sidebar buttons / nav items (covers most patterns) */ [data-theme="nte"] .sidebar a, [data-theme="nte"] .sidebar button, [data-theme="nte"] .sidebar .nav-btn, [data-theme="nte"] .sidebar .sidebar-btn{ background: var(--sidebar-item-bg); border: 1px solid var(--sidebar-item-br); color: var(--sidebar-ink); border-radius: 12px; } /* Hover */ [data-theme="nte"] .sidebar a:hover, [data-theme="nte"] .sidebar button:hover, [data-theme="nte"] .sidebar .nav-btn:hover, [data-theme="nte"] .sidebar .sidebar-btn:hover{ background: var(--sidebar-item-hover-bg); border-color: var(--sidebar-item-hover-br); } /* Active/selected (try common selectors) */ [data-theme="nte"] .sidebar .active, [data-theme="nte"] .sidebar a.active, [data-theme="nte"] .sidebar button.active, [data-theme="nte"] .sidebar .nav-btn.active, [data-theme="nte"] .sidebar a[aria-current="page"]{ background: var(--sidebar-item-active-bg); border-color: var(--sidebar-item-active-br); box-shadow: var(--sidebar-item-active-glow); } /* User badge area (top card) – make it glassier and less intense */ /* ===== jn.nte.userbadge.deeper.022626 ===== */ [data-theme="nte"] .login-indicator.glass, [data-theme="nte"] #login-indicator .login-indicator.glass{ /* darker + closer to sidebar wine */ background: rgba(20, 6, 8, .22); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 16px 34px rgba(0,0,0,.18) inset, 0 10px 24px rgba(0,0,0,.14); color: rgba(255,255,255,.94); } /* buttons inside badge look less “pink” */ [data-theme="nte"] .login-indicator .li-signout, [data-theme="nte"] .login-indicator .li-switch{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16); } [data-theme="nte"] .login-indicator .li-signout:hover, [data-theme="nte"] .login-indicator .li-switch:hover{ background: rgba(255,255,255,.16); } /* ========================================================= NTE Right Pane Calm — jn.nte.rightpane.calm.022626 Goal: red lives in sidebar; main area stays neutral + blush ========================================================= */ [data-theme="nte"]{ /* Very light blush background + deep ink */ --bg: #FBF7F8; /* almost white, tiny blush */ --card: rgba(255,255,255,.92); --line: rgba(15,23,42,.10); --hover: rgba(181,31,46,.05); /* whisper red */ --focus: rgba(181,31,46,.28); /* Accent ink for headings/icons (near-black wine) */ --brand-ink: #2A0B10; /* Optional: table header blush */ --th-bg: #FFF0F2; --th-ink: #4A0F18; /* Buttons in main area should NOT look red by default */ --btn-ghost-bg: rgba(15,23,42,.04); } /* Page background */ [data-theme="nte"] body{ background: radial-gradient(1100px 700px at 18% 18%, rgba(181,31,46,.08), transparent 55%), radial-gradient(900px 600px at 70% 20%, rgba(210,170,92,.10), transparent 58%), linear-gradient(180deg, #ffffff 0%, var(--bg) 60%, #ffffff 100%); } /* Main content cards/sections */ [data-theme="nte"] .card, [data-theme="nte"] .section, [data-theme="nte"] .table-wrap{ background: var(--card); border: 1px solid var(--line); } /* Headings on right pane: deep wine ink (not bright red) */ [data-theme="nte"] h1, [data-theme="nte"] h2, [data-theme="nte"] h3, [data-theme="nte"] .table-head h2{ color: var(--brand-ink); } /* Table header blush */ [data-theme="nte"] .data-table thead th{ background: var(--th-bg); color: var(--th-ink); } /* Buttons in main area: neutral by default */ [data-theme="nte"] .btn, [data-theme="nte"] button.btn, [data-theme="nte"] .card .btn{ background: rgba(15,23,42,.04); border: 1px solid rgba(15,23,42,.10); color: rgba(15,23,42,.80); } [data-theme="nte"] .btn:hover, [data-theme="nte"] button.btn:hover{ background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.14); } /* “Primary” buttons: use deep wine, not hot red */ [data-theme="nte"] .btn.primary{ background: linear-gradient(135deg, #6B141F, #4E0E16); border-color: transparent; color: #fff; box-shadow: 0 14px 28px rgba(78,14,22,.18); } /* Focus ring: subtle red, not loud */ [data-theme="nte"] :is(input,select,textarea,button):focus{ outline: none; box-shadow: 0 0 0 4px var(--focus); } /* ===== Refined Blue Theme (balanced, accessible, cohesive) ===== */ [data-theme="blue"] { /* Brand */ --brand: #2C84E4; /* main blue (kept) */ --brand-ink: #0F3F8C; /* deep ink: softer than #003299 but still strong */ /* Surfaces */ --bg: #F7F9FC; /* page background: faint blue-gray */ --card: #FFFFFF; /* cards stay clean */ /* Lines & subtle accents */ --line: #E3E9F5; /* slightly bluer than neutral gray for cohesion */ --hover: #F1F6FF; /* gentle hover tint */ --focus: #89B9FF; /* focus ring / keyboard outline */ /* Table header */ --th-bg: #EAF3FF; /* lighter header bg than before for contrast */ --th-ink: #124A9A; /* readable on th-bg (good contrast) */ /* Sidebar */ --sidebar-bg: var(--brand); --sidebar-ink: #FFFFFF; /* Buttons */ --btn-ghost-bg: #EFF4FB; /* ghost buttons sit nicely on both bg/card */ /* Aggregates / toggles (kept but harmonized) */ --gross-on-bg: #E8F3FF; /* soft blue; matches the rest of the palette */ --gross-on-br: #B8D8FF; --ded-on-bg: #FFF1ED; /* soft coral, less saturated than before */ --ded-on-br: #FFCEBF; /* Tooltip jn.101425*/ --tooltip-bg: var(--brand); /* uses the blue theme ink */ --tooltip-ink: #fff; } /* Angat Buhay theme */ /* Angat Buhay — Teal (soft, premium, solid sidebar) */ [data-theme="ab"] { /* Brand */ --brand: #1E9BC6; /* midway aqua-blue */ --brand-ink: #0D5877; /* deep cyan-slate */ /* Surfaces */ --bg: #F6F9FB; /* faint aqua wash */ --card: #FFFFFF; /* Lines & subtle accents */ --line: #E2ECF3; /* blue→teal line */ --hover: #EFF7FC; /* soft aqua hover */ --focus: #7FC6E9; /* calm, accessible focus */ /* Table header */ --th-bg: #E9F3FB; /* pale aqua header */ --th-ink: #0F577B; /* readable on th-bg */ /* Sidebar */ --sidebar-bg: var(--brand); --sidebar-ink: #FFFFFF; /* Buttons */ --btn-ghost-bg: #EFF5F9; /* Aggregates / toggles */ --gross-on-bg: #E8F4FB; /* aqua “on” */ --gross-on-br: #BFE1F4; --ded-on-bg: #FDEFEF; /* softened warm “on” */ --ded-on-br: #F7D2D2; /* Tooltip */ --tooltip-bg: var(--brand); --tooltip-ink: #fff; } /* ========================= RESET & LAYOUT ========================= */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: #222; display: flex; } /* ========================= SIDEBAR ========================= */ .sidebar { flex: 0 0 200px; width: 200px; background: var(--sidebar-bg); color: var(--sidebar-ink); padding: 18px 12px; display: flex; flex-direction: column; gap: 12px; } .brand { font-weight: 900; letter-spacing: .05em; font-size: 18px; } .nav { display: flex; flex-direction: column; gap: 8px; } .nav-btn { width: 100%; text-align: left; padding: 10px 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: var(--sidebar-ink); border-radius: 10px; cursor: pointer; } .nav-btn:hover { background: rgba(255,255,255,.22); } /* ========================= MAIN ========================= */ .main { flex: 1; display: flex; flex-direction: column; padding: 16px 20px; gap: 16px; min-width: 0; overflow-x: hidden; } .topbar { display: flex; align-items: center; justify-content: space-between; } .title { margin: 0; color: var(--brand-ink); font-size: 20px; font-weight: 600;} /* Cards row (3-up) */ .cards { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 12px; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.05); } .card-body { padding: 12px; } .g { font-weight: 700; color: var(--brand-ink); margin-bottom: 8px; } .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; } label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; } input[type="date"], input[type="text"] { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; } /* ========================= BUTTONS ========================= */ .btn { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; } .btn:hover { background: var(--hover); } .btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); } .btn.ghost { background: var(--btn-ghost-bg); } .btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); } /* ========================= SECTIONS & TABLE ========================= */ .section { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.05); padding: 12px; } .table-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .table-head h2 { margin: 0; font-size: 16px; color: var(--brand-ink); } .search { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; width: 260px; background: #fff; } .empty { padding: 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; margin-top: 10px; } .table-wrap { overflow: auto; max-height: calc(100vh - 260px); margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; } table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; } thead th { position: sticky; top: 0; background: var(--th-bg); color: var(--th-ink); border-bottom: 1px solid var(--line); padding: 12px 14px; text-align: left; font-weight: 400; } tbody td { border-bottom: 1px solid #eee; padding: 12px 14px; vertical-align: middle; background: #fff; font-size: .9rem;} .row-hidden { display: none; } td.editable { cursor: text; background: #fff; } td.editable:hover { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 15%, transparent); } /* ========================= SCHEMA MODAL ========================= */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-card { width: min(960px, 92vw); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 36px rgba(0,0,0,.18); display: flex; flex-direction: column; } .modal-head { padding: 12px 14px; border-bottom: 1px solid var(--line); } .modal-head h3 { margin: 0; color: var(--brand); } .modal-body { padding: 12px 14px; } .modal-foot { padding: 12px 14px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; } .schema-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .schema-toolbar input, .schema-toolbar select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; } .chk { display: flex; align-items: center; gap: 6px; font-size: .9rem; } .schema-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; scroll-behavior: auto; /* smooth off while dragging */ min-height: 20px; } .schema-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #eee; border-radius: 10px; background: #fff; } .schema-row.dragging { opacity: .6; } .schema-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .9rem; flex: 1 1 auto; min-width: 0; } .schema-meta .drag-handle { margin-right: 8px; cursor: grab; user-select: none; -webkit-user-drag: element; } .schema-meta span { display: inline-block; margin-right: 8px; } .schema-meta code { word-break: break-word; white-space: normal; } .schema-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .schema-actions .btn { flex: 0 0 auto; } /* Inline editor */ .schema-inline-editor input, .schema-inline-editor select { width: 100%; padding: 6px 8px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; } .schema-inline-editor label { font-size: 12px; color: #555; display: block; } /* ========================= EMPLOYEES (scoped) ========================= */ #employees-page .emp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 0 1rem 1rem; } #employees-page .emp-card { background: rgba(255,255,255,0.92); border: 1px solid #eee; border-radius: 12px; padding: .9rem; box-shadow: 0 2px 10px rgba(0,0,0,.05); } #employees-page .emp-card-title { margin: 0 0 .25rem; font-weight: 700; } #employees-page .emp-card-desc { margin: 0 0 .75rem; color: #555; } #employees-page .emp-btn-row { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 .25rem; } #employees-page .emp-btn { padding: .5rem .75rem; border-radius: 8px; border: 1px solid #ddd; background: #f8f8ff; cursor: default; } #employees-page .emp-btn:enabled { cursor: pointer; } #employees-page .emp-btn:enabled:hover { background: #f1f1ff; } #employees-page .emp-tip, #employees-page .emp-note { margin: .5rem 0 0; font-size: .9rem; color: var(--muted); } #employees-page .emp-pills { display:flex; gap:.5rem; flex-wrap:wrap; margin:.25rem 0 .75rem; } #employees-page .emp-pill { display:inline-flex; align-items:center; gap:.35rem; padding: .35rem .6rem; border-radius: 999px; background: #f6f6fb; border:1px solid #e8e8f8; font-size: .9rem; color:#333; } #employees-page .emp-pill .emp-count { font-weight: 700; } #employees-page .emp-form-row { display: grid; grid-template-columns: 180px 1fr; gap: .5rem; align-items: center; margin: .5rem 0; } #employees-page .emp-form-row input { padding: .5rem .6rem; border: 1px solid #ddd; border-radius: 8px; } #employees-page .emp-actions-row { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 .25rem; } #employees-page .emp-status { color: #555; font-size: .9rem; } #employees-page .emp-preview-wrap { margin-top: .75rem; border: 1px solid #eee; border-radius: 10px; overflow: hidden; } #employees-page .emp-preview-head { display: flex; align-items: center; justify-content: space-between; background: #fafafe; border-bottom: 1px solid #eee; padding: .5rem .75rem; } #employees-page .emp-preview-meta { color: #666; font-size: .9rem; } #employees-page .emp-preview-table { max-height: 32vh; overflow: auto; } #employees-page .emp-preview-table table { width: 100%; border-collapse: collapse; font-size: .95rem; } #employees-page .emp-preview-table th, #employees-page .emp-preview-table td { padding: .4rem .6rem; border-bottom: 1px solid #f0f0f0; white-space: nowrap; } #employees-page .emp-modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .9rem; } #employees-page .emp-btn { padding: .5rem .75rem; border-radius: 8px; border: 1px solid #ddd; background: #f8f8ff; } #employees-page .emp-btn.ghost { background: #fff; } #employees-page .emp-btn:hover { background: #f1f1ff; } /* Wide table / scrolling */ #employees-section .table-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; width: 100%; max-width: 100%; } #employees-section .table-scroll table { width: max-content; min-width: 100%; border-collapse: collapse; } #employees-section th, #employees-section td { white-space: nowrap; } #employees-section td.num { text-align: right; } #employees-section { overflow-x: hidden; } #pepper-main { min-width: 0 !important; overflow-x: hidden; } .emp-photo-cell { cursor: pointer; } .emp-photo-cell img { transition: transform .12s ease; } .emp-photo-cell:hover img { transform: scale(1.03); } /* jn.101325: subtle focus hint for keyboard users */ .emp-photo-cell:focus, .emp-photo-cell:focus-within { outline: 2px solid #cde4ff; outline-offset: 2px; } /* ========================= RESPONSIVE ========================= */ @media (max-width: 1024px) { .cards { grid-template-columns: 1fr; } .row { grid-template-columns: 1fr; } } /* added for schema toolbar */ /* Toolbar: grid left, Add button on right */ .schema-toolbar { display: grid; grid-template-columns: 1fr auto; /* big grid + button */ gap: 10px; align-items: end; margin-bottom: 10px; } .schema-toolbar .schema-grid { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 8px 10px; } .schema-toolbar .schema-actions-end { display: flex; align-items: end; } .field { display: flex; flex-direction: column; gap: 6px; } .field.checkbox { align-self: end; } .field label { font-size: 12px; color: #555; } .field input, .field select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; } /* wider row (for formula) */ .field.span-2 { grid-column: span 2; } @media (max-width: 1100px) { .schema-toolbar .schema-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); } } @media (max-width: 720px) { .schema-toolbar { grid-template-columns: 1fr; } /* stack button */ .schema-toolbar .schema-actions-end { justify-content: flex-end; } } /* Square icon buttons */ .btn.icon{ width: 64px; height: 64px; padding: 0; display:inline-flex; align-items:center; justify-content:center; border-radius: 10px; background: #fff; border:1px solid var(--line); font-size: 40px; line-height: 1; color: var(--brand); } .btn.icon:hover{ background:#f7f7f7 } #schema-list .schema-actions { display:flex; gap:8px; align-items:center; white-space:nowrap; } #schema-list .schema-actions .btn.icon { width:34px; height:34px; font-size:18px; } #schema-list .schema-actions .btn.icon.danger{ border-color:#f0c7c4; color:#b3261e; background:#fff; } /* Action icon row – keep tight and aligned */ #schema-list .schema-actions .btn.icon { width: 34px; height: 34px; font-size: 18px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); background:#fff; color: var(--ink); } #schema-list .schema-actions .btn.icon.danger{ border-color:#f0c7c4; color:#b3261e; background:#fff; } #schema-list .schema-actions .btn.icon:hover{ background:#f7f7f7 } /* Icon buttons already exist. Add an “active” look for toggles */ .btn.icon.agg-active { background: #eef6ff; border-color: #bcd9ff; } .schema-actions .btn.icon.toggle-gross.agg-on{ background: var(--gross-on-bg); border-color: var(--gross-on-br); box-shadow: inset 0 0 0 2px rgba(0,0,0,.02); } .schema-actions .btn.icon.toggle-ded.agg-on{ background: var(--ded-on-bg); border-color: var(--ded-on-br); box-shadow: inset 0 0 0 2px rgba(0,0,0,.02); } /* small checkmark overlay when ON (subtle but clear) */ .schema-actions .btn.icon.toggle-gross.agg-on::after, .schema-actions .btn.icon.toggle-ded.agg-on::after{ content: "✓"; font-size: 10px; position: absolute; right: -4px; top: -4px; background: #fff; border: 1px solid #ddd; border-radius: 999px; padding: 0 3px; } /* ensure icon buttons can host the overlay */ .schema-actions .btn.icon{ position: relative; } #schema-list .schema-actions .btn.icon.toggle-gross.agg-on{ background: var(--gross-on-bg); border-color: var(--gross-on-br); box-shadow: inset 0 0 0 2px rgba(0,0,0,.02); } #schema-list .schema-actions .btn.icon.toggle-ded.agg-on{ background: var(--ded-on-bg); border-color: var(--ded-on-br); box-shadow: inset 0 0 0 2px rgba(0,0,0,.02); } /* ===== Schema row “card” layout ===== */ #schema-list .schema-main { flex: 1 1 auto; min-width: 0; } #schema-list .schema-header{ display:flex; align-items:center; gap:8px; margin-bottom:6px; } #schema-list .schema-title{ font-weight:600; color: var(--brand-ink); } /* Pills */ .pill{ display:inline-flex; align-items:center; gap:6px; padding:.2rem .5rem; border-radius:999px; font-size:.85rem; background:#f6f6fb; border:1px solid #e8e8f8; color:#333; } .pill code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } /* Role pills — color-coded */ .pill-role{ font-weight:600; } .pill-role.role-earning { background:#ecfdf5; border-color:#b7f0d3; color:#0f5132; } /* green-ish */ .pill-role.role-deduction { background:#fff1e8; border-color:#ffd1b5; color:#7a3a10; } /* orange-ish */ .pill-role.role-info { background:#f6f7fb; border-color:#e8e8f8; color:#485; } .pill-role.role-derived { background:#f3efff; border-color:#d9ccff; color:#3a2a85; } .pill-role.role-lookup { background:#e9fbff; border-color:#bfefff; color:#0b5160; } .pill-role.role-lookupDerived{ background:#edf3ff; border-color:#cfe0ff; color:#213a7a; } .pill-role.role-loan { background:#fff7f7; border-color:#ffd0d0; color:#7a1e1e; } .pill-role.role-loanDerived { background:#fff1f7; border-color:#ffc7e6; color:#7a1e4d; } .pill-role.role-savings { background:#eefbf3; border-color:#ccefdc; color:#1f5a34; } .pill-role.role-savingsDerived{background:#eaf7ff; border-color:#cbe6ff; color:#164a7a; } /* Stack the info chips and the formula in a wrapped row layout */ #schema-list .schema-body{ display:flex; flex-wrap:wrap; /* allow wrapping */ align-items:flex-start; gap:8px 12px; } /* the chips panel can grow/shrink */ #schema-list .schema-info{ flex:1 1 520px; /* take a row, but wrap when tight */ display:flex; flex-wrap:wrap; gap:8px 12px; font-size:.9rem; color:#444; } #schema-list .schema-info span{ display:inline-flex; align-items:center; gap:4px; } #schema-list .schema-info code{ background:#fafafa; border:1px solid #eee; border-radius:6px; padding:0 .35rem; } /* the formula must ALWAYS be on its own line */ .schema-formula{ flex: 0 0 100%; /* full row */ order: 99; /* always after the chips */ margin-top:6px; background:#fff; border:1px dashed var(--line); border-radius:10px; padding:10px 12px; } .schema-formula-label{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:#777; margin-bottom:4px; } .schema-formula pre{ margin:0; white-space:pre-wrap; word-break:break-word; } .schema-formula code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:.88rem; background:transparent; color: var(--brand-ink); } /* Responsive: stack formula under info on narrow screens */ @media (max-width: 820px){ #schema-list .schema-body{ grid-template-columns: 1fr; } } /* Selected row (insertion point) */ .schema-row.selected{ border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 20%, transparent); background: color-mix(in srgb, var(--brand) 6%, #fff); } /* View Payrolls list */ .payroll-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow: auto; } .payroll-item.schema-row { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: flex; justify-content: space-between; gap: 10px; cursor: pointer; } .payroll-item .meta { display: flex; flex-direction: column; gap: 2px; font-size: 0.95rem; } .payroll-item .meta .title { font-weight: 700; color: var(--brand-ink); } .payroll-item .meta .sub { color: var(--muted); font-size: 0.85rem; } .payroll-item .badge { align-self: center; font-size: 0.8rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fafbff; color: var(--brand-ink); } /* ==== TOP ROW: 4 cards in one line (View / Create / Apply / Reports) ==== */ /* === Cards: 40–30–15–15 split === */ #payroll-cards.cards { grid-template-columns: minmax(0, 40%) minmax(0, 30%) minmax(0, 15%) minmax(0, 15%); } /* === Restore: View Payrolls list height cap === */ #view-payrolls-card .payroll-list { max-height: 130px; overflow: auto; } /* (Keep the earlier 2-up create-fields wrap) */ #payroll-cards .create-card .create-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; } #payroll-cards .create-card .create-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; min-width: 0; } #payroll-cards .create-card .card-body, #payroll-cards .create-card .create-grid, #payroll-cards .create-card .create-fields, #payroll-cards .create-card .create-fields label { min-width: 0; } #payroll-cards .create-card input[type="date"], #payroll-cards .create-card select { width: 100%; min-width: 0; } /* Mobile: stack */ @media (max-width: 919px) { #payroll-cards.cards { grid-template-columns: 1fr; } #payroll-cards .create-card .create-fields { grid-template-columns: 1fr; } } /* View Payrolls list: compact, elegant */ .payroll-list { gap: 6px; } .payroll-item.schema-row { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: flex; justify-content: space-between; gap: 8px; cursor: pointer; } .payroll-item .meta { display: flex; flex-direction: column; gap: 2px; font-size: 0.92rem; /* smaller overall */ } .payroll-item .meta .title { font-weight: 600; /* thinnest “bold” for slight emphasis */ color: var(--brand-ink); font-size: 0.85rem; } .payroll-item .meta .sub { color: var(--muted); font-size: 0.8rem; /* smaller, muted second line */ } .payroll-item .badge { align-self: center; font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: #f7f9ff; color: var(--brand-ink); } /* Selected look (you already use this token elsewhere) */ .payroll-item.selected { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 20%, transparent); background: color-mix(in srgb, var(--brand) 6%, #fff); } .badge { background:#eef5ff; border-color:#cfdfff; } .badge:has(:where()){} /* placeholder if you choose dynamic classes later */ /* Create Payroll: split layout */ .create-card .card-body { padding: 12px; } .create-card .create-grid{ display: grid; grid-template-columns: 1fr auto; /* fields left, button right */ gap: 12px; align-items: end; } /* 4 fields on one line, wraps on narrow screens */ .create-card .create-fields{ display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 8px 10px; } @media (max-width: 1100px){ .create-card .create-fields{ grid-template-columns: repeat(2, minmax(160px, 1fr)); } } @media (max-width: 640px){ .create-card .create-grid{ grid-template-columns: 1fr; } .create-card .create-action{ justify-content: flex-end; } } /* Square + button (matches schema modal style) */ .btn.icon.plus{ width: 56px; height: 56px; padding: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: #fff; color: var(--brand); font-size: 32px; border-radius: 12px; } .btn.icon.plus:hover{ background: var(--hover); } /* Align the action column content to the bottom-right neatly */ .create-card .create-action{ display: flex; align-items: end; justify-content: flex-end; } /* Make select visually match date inputs */ .create-card select{ padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; appearance: none; } /* === Payroll table: text-only tint for gross/deduction columns === */ .table-wrap table#payroll-table tbody td.agg-gross { color: #17623c !important; /* dark green */ } .table-wrap table#payroll-table tbody td.agg-ded { color: #7a1e1e !important; /* dark red */ } /* optional: headers get a subtle hint */ /* .table-wrap table#payroll-table thead th.agg-gross { color: #17623c; } */ /* .table-wrap table#payroll-table thead th.agg-ded { color: #7a1e1e; } */ /* Subtle cell backgrounds for key totals (body cells only) */ .table-wrap tbody td.col-gross { background: color-mix(in srgb, #16a34a 6%, #fff); /* faint green */ } .table-wrap tbody td.col-deductions { background: color-mix(in srgb, #dc2626 6%, #fff); /* faint red */ } .table-wrap tbody td.col-net { background: color-mix(in srgb, #2563eb 6%, #fff); /* faint blue */ } /* === Payroll loading overlay === */ #payroll-loader { position: fixed; inset: 0; z-index: 2000; display: none; /* toggled by JS */ align-items: center; justify-content: center; background: rgba(0,0,0,.25); /* dim screen */ backdrop-filter: blur(1px); } #payroll-loader .panel { width: min(460px, 92vw); background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 16px; box-shadow: 0 24px 60px rgba(0,0,0,.22); text-align: center; } #payroll-loader .title { margin: 0 0 8px; font-weight: 700; color: var(--brand-ink); } #payroll-loader .fixed { margin: 6px 0 8px; color: var(--brand-ink); opacity: .9; } #payroll-loader .rolling { margin: 2px 0 0; color: var(--muted); font-size: .95rem; } /* === spinner (brand-colored) === */ /* HTML:

*/ .loader { --dot: var(--brand); --dot2: color-mix(in srgb, var(--brand) 60%, white); width: 52px; aspect-ratio: 1; display: grid; margin: 6px auto 10px; } .loader::before, .loader::after { content:""; grid-area: 1/1; --c: no-repeat radial-gradient(farthest-side, var(--dot) 92%, #0000); background: var(--c) 50% 0, var(--c) 50% 100%, var(--c) 100% 50%, var(--c) 0 50%; background-size: 12px 12px; animation: l12 1s infinite; } .loader::before { margin: 4px; /* shift hue by using a 2nd variable color rather than filter */ --c: no-repeat radial-gradient(farthest-side, var(--dot2) 92%, #0000); background-size: 8px 8px; animation-timing-function: linear; } @keyframes l12 { 100% { transform: rotate(.5turn); } } #viewer-toolbar .btn.icon.active { outline: 2px solid var(--brand); outline-offset: 1px; } /* View Payrolls list — keep badges on the right; single-line */ .payroll-item { display: flex; align-items: center; gap: 10px; } .payroll-item .meta { flex: 1 1 auto; min-width: 0; } .payroll-item .meta .title { font-weight: 600; color: var(--brand-ink); } .payroll-item .meta .sub { color: var(--muted); font-size: .85rem; } .payroll-item .badges { display: inline-flex; gap: 6px; margin-left: auto; /* push to right */ white-space: nowrap; /* keep on one line */ } .payroll-item .badge { font-size: .8rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fafbff; color: var(--brand-ink); } .payroll-item .badge.pill-payslips { background:#eef7ff; border-color:#cfe5ff; } /* Toolbar to the left of search; compact buttons */ #viewer-toolbar { display:flex; align-items:center; } .viewer-toolbar { display:flex; gap:8px; } .viewer-toolbar .vt-btn{ width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; font-size:18px; color:var(--brand-ink); } .viewer-toolbar .vt-btn:hover{ background:var(--hover); } .viewer-toolbar .vt-btn.active{ box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); border-color: var(--brand); } .viewer-toolbar .vt-btn:disabled{ opacity:.45; cursor:not-allowed; filter:grayscale(0.2); } /* ---------- Grid: exactly 2 per row (1 per row on smaller screens) ---------- */ .slips-wrap { display: grid; gap: 14px; } .slips-wrap.slips-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 1100px) { .slips-wrap.slips-2col { grid-template-columns: 1fr; } } /* ---------- Payslip cards: smaller, airier, print-friendly ---------- */ .ps-card{ margin: 8px 0; padding: 14px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow: 0 2px 8px rgba(0,0,0,.03); font-size: 0.88rem; /* ↓ smaller overall */ line-height: 1.25; min-width: 0; /* allow content to shrink inside grid */ page-break-inside: avoid; /* print safety */ } /* Header: 2 columns for balance; robust truncation */ .ps-head{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px 16px; margin-bottom:10px; } .ps-head .ps-line{ display:flex; gap:6px; min-width:0; } .ps-head .lbl{ color:#666; min-width:110px; flex:0 0 auto; font-weight:500; } .ps-head .val{ color:var(--brand-ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1 1 auto; } /* Body: tidy columns, lighter titles */ .ps-body{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; } .ps-col{ border:1px dashed var(--line); border-radius:10px; padding:10px; } .ps-title{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; font-weight:600; } .ps-title.ps-green{ color:#156c3d; } .ps-title.ps-red{ color:#7a1e1e; } /* Rows: breathing room + numeric alignment */ .ps-row{ display:flex; justify-content:space-between; align-items:flex-start; padding:4px 0; gap:10px; } .ps-row + .ps-row{ border-top:1px dotted #eee; } .ps-label{ color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; font-weight:400; } .ps-amt{ color:#111; font-variant-numeric: tabular-nums; margin-left:10px; flex:0 0 auto; font-weight:400; } /* Totals: lighter weights per your note */ .ps-total{ display:flex; justify-content:space-between; margin-top:8px; padding-top:6px; border-top:1px solid #eee; font-weight:600; /* was 700 */ font-size: 0.95em; } .ps-total.ps-green{ color:#156c3d; } .ps-total.ps-red{ color:#7a1e1e; } /* Empty state stays subtle */ .ps-empty{ color:#888; font-style:italic; } /* Footer / Net: lighter, still prominent */ .ps-foot{ display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid #eee; } .ps-net-label{ color:#163d7a; font-weight:600; } /* was 700 */ .ps-net{ color:#163d7a; font-weight:600; font-variant-numeric: tabular-nums; } /* was 800 */ /* Optional: slightly smaller on very tight screens */ @media (max-width: 480px) { .ps-card { font-size: 0.84rem; } } /* ==== Ultra-thin "glass" scrollbars (WebKit + Firefox) ==== */ /* Firefox */ * { scrollbar-width: thin; /* thinnest */ /* thumb color | track color */ scrollbar-color: color-mix(in srgb, var(--brand) 65%, transparent) color-mix(in srgb, #ffffff 50%, transparent); } /* WebKit (Chrome/Edge/Safari) */ *::-webkit-scrollbar { width: 8px; /* thin vertical */ height: 8px; /* thin horizontal */ } /* Transparent glassy track */ *::-webkit-scrollbar-track { background: linear-gradient( to bottom, color-mix(in srgb, #ffffff 55%, transparent), color-mix(in srgb, #ffffff 35%, transparent) ); border-radius: 999px; /* subtle inner bevel */ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 60%, transparent); } /* Brand-tinted "glass" thumb */ *::-webkit-scrollbar-thumb { border-radius: 999px; /* Glass look: translucent center + bright edge */ background: linear-gradient( to bottom, color-mix(in srgb, var(--brand) 70%, transparent), color-mix(in srgb, var(--brand) 55%, transparent) ); /* create a glass rim using transparent border + inner shadow */ border: 2px solid color-mix(in srgb, #ffffff 60%, transparent); box-shadow: inset 0 0 6px color-mix(in srgb, #ffffff 45%, transparent), 0 0 0 1px color-mix(in srgb, var(--brand-ink) 10%, transparent); min-height: 28px; /* keep it grabbable */ } /* Hover/active states: slightly bolder for affordance */ *::-webkit-scrollbar-thumb:hover { background: linear-gradient( to bottom, color-mix(in srgb, var(--brand) 85%, transparent), color-mix(in srgb, var(--brand) 70%, transparent) ); } *::-webkit-scrollbar-thumb:active { background: linear-gradient( to bottom, color-mix(in srgb, var(--brand) 95%, transparent), color-mix(in srgb, var(--brand) 80%, transparent) ); box-shadow: inset 0 0 8px color-mix(in srgb, #ffffff 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--brand-ink) 16%, transparent); } /* Optional: round the ends of overflow areas a bit for cohesion */ .table-wrap, .payroll-list, #emp-table-scroll, .emp-preview-table, .ps-card, .section, .card { scrollbar-gutter: stable both-edges; /* less layout shift when bars appear */ } /* Use the themed focus color for interactive elements */ :where(button, [role="button"], .btn, input, select, textarea, a):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .payroll-item .badge.pill-summary { background: #eef7ff; border-color: #cfe5ff; } /* ===== Payroll Summary polish ===== */ #summary-view .table-wrap table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; } #summary-view thead th { text-align: right; font-weight: 600; } /* headings a bit lighter */ #summary-view thead th:first-child { text-align: left; } /* label column */ #summary-view tbody th.label { text-align: left; font-weight: 500; font-size: .9rem; } /* labels left, less bold */ #summary-view tbody td.num, #summary-view tbody th.num { text-align: right; font-variant-numeric: tabular-nums; } /* Text-only colors for contributing lines */ #summary-view .agg-gross { color: #17623c; } /* matches .agg-gross in payroll table */ #summary-view .agg-ded { color: #7a1e1e; } /* matches .agg-ded in payroll table */ /* Subtle cell backgrounds for the two big totals (mirror payroll view) */ #summary-view .col-gross { background: color-mix(in srgb, #16a34a 6%, #fff); } #summary-view .col-deductions { background: color-mix(in srgb, #dc2626 6%, #fff); } /* TOTAL column (right-most): slightly less bold */ #summary-view th.total { font-weight: 600; } /* NET PAY row: stand out a bit more than other totals */ #summary-view tr.row-net th, #summary-view tr.row-net td { font-weight: 700; background: color-mix(in srgb, var(--brand) 6%, #fff); color: var(--brand-ink); } /* Keep rows airy but compact */ #summary-view tbody th, #summary-view tbody td { padding: 10px 12px; } /* ===== Employees Import: “Schema Required” state ===== */ /* jn.101425 — Styles used by employees.import.js when no active schema exists. */ #emp-import-modal .emp-schema-required { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; border: 1px dashed var(--line); background: color-mix(in srgb, #fff 92%, var(--brand) 8%); border-radius: 12px; padding: 12px; margin: 8px 0 0; } #emp-import-modal .emp-schema-required .icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 24px; color: var(--brand); } #emp-import-modal .emp-schema-required .title { margin: 0 0 4px; color: var(--brand-ink); font-weight: 700; font-size: 1rem; } #emp-import-modal .emp-schema-required .desc { margin: 0 0 10px; color: var(--muted); font-size: .92rem; } #emp-import-modal .emp-schema-required .actions { display: flex; gap: 8px; flex-wrap: wrap; } #emp-import-modal .emp-schema-required .actions .btn { padding: 8px 12px; border-radius: 10px; } /* (optional) small helper badge */ #emp-import-modal .emp-schema-required .badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--brand-ink); font-size: .78rem; } /* Freeze clicks + soften visuals when locked */ #payroll-table-section.is-locked { position: relative; pointer-events: none; /* blocks clicks inside preview */ opacity: .88; filter: saturate(.75); } /* Let the slim banner still be interactive/selectable */ #payroll-header-lock-state { pointer-events: auto; } /* Payroll list row: title/sub on the left, badges on the right */ #payroll-list .payroll-item.schema-row { display: grid; grid-template-columns: 1fr auto; /* meta grows, badges auto-width */ grid-template-rows: auto auto; /* allow two lines total */ column-gap: 10px; align-items: center; } /* meta uses the first column across both rows */ #payroll-list .payroll-item .meta { min-width: 0; grid-column: 1 / 2; grid-row: 1 / 3; } /* badges in a 3-column grid; overflow wraps to the next row */ #payroll-list .payroll-item .badges { grid-column: 2 / 3; grid-row: 1 / 3; /* let it occupy one or two rows as needed */ display: grid; grid-template-columns: repeat(3, max-content); /* <= 3 per row */ gap: 6px; justify-content: end; align-content: center; } /* keep badges compact */ #payroll-list .badge { white-space: nowrap; padding: 2px 6px; border-radius: 10px; font-size: 12px; line-height: 1.25; } /* Center the 🔒 chip perfectly (doesn't affect other badges) */ #payroll-list .badge.pill-lock { display: inline-flex; align-items: center; justify-content: center; /* make it a small round chip */ height: 22px; padding: 0; /* no left/right padding since there's no text */ line-height: 1; /* avoid baseline weirdness */ font-size: 14px; /* tweak if you want bigger/smaller */ border-radius: 999px; text-align: center; /* tiny baseline nudge (emoji vary across OS fonts) */ transform: translateY(0.5px); } /* When locked, block all interactions inside the scroller but keep scrolling */ #payroll-table-section .table-wrap.locked { position: relative; /* anchor overlay */ user-select: none; } #payroll-table-section .table-wrap.locked * { pointer-events: none !important; /* cells, headers, etc. ignore clicks */ } /* Visual overlay that stays pinned to the visible viewport of table-wrap */ #payroll-table-section .table-wrap .lock-screen { position: absolute; inset: 0; background: rgba(0,0,0,.06); backdrop-filter: saturate(90%) blur(0.5px); z-index: 5; display: none; will-change: transform; /* allow smooth counter-translate */ } /* Centered lock chip */ #payroll-table-section .lock-screen .center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } #payroll-table-section .lock-chip { width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #111; box-shadow: 0 6px 20px rgba(0,0,0,.15); font-size: 22px; line-height: 1; border: 1px solid rgba(0,0,0,.12); } /* When locked, make buttons inert + dimmed */ #apply-attendance-panel.locked .btn, #generate-reports-panel.locked .btn { pointer-events: none; /* no clicks/taps */ opacity: 0.5; filter: saturate(70%); cursor: not-allowed; } .sidebar .nav-group { margin-bottom: 14px; } .sidebar .nav-h { font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial; color: rgba(255,255,255,.75); letter-spacing: .6px; text-transform: uppercase; margin: 10px 0 6px; padding: 0 4px; } .sidebar .nav-btn { width: 100%; text-align: left; } /* Space under the user badge */ .sidebar-user { margin: 8px 0 12px; } /* Group header style + spacing */ .sidebar .nav-group { margin-bottom: 16px; } .sidebar .nav-h { font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial; color: rgba(255,255,255,.75); letter-spacing: .6px; text-transform: uppercase; margin: 8px 0 8px; padding: 0 4px; } /* Vertical spacing between buttons */ .sidebar .nav-btn { width: 100%; text-align: left; } .sidebar .nav-btn + .nav-btn { margin-top: 8px; } /* (Optional) a little extra space between groups and next group’s first button */ .sidebar .nav-group + .nav-group { margin-top: 6px; } /* === Analytics layout: single column, big charts === */ .cards.cards-analytics{ display:grid; grid-template-columns: 1fr; /* stack vertically */ gap:14px; } /* Section head (title + right controls) */ .analytics-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; } .analytics-head .a-title{ margin:0; font-size:18px; font-weight:700; color:var(--brand-ink); letter-spacing:.2px; } /* Charts take most of the viewport height */ .chart-wrap{ /* roughly a full "panel" height; tweak if needed */ height:68vh; min-height:420px; } .chart-wrap canvas{ width:100% !important; height:100% !important; } /* KPI summary – full width grid */ .summary{ --pill-bg:#fff; --pill-br: color-mix(in srgb, var(--brand) 14%, #dfe3f1); --pill-sub:#6b7280; --pill-ink:#2a2d3a; display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:12px; margin:14px 0 10px; } .kpi-pill{ border:1px solid var(--pill-br); border-radius:14px; background:var(--pill-bg); padding:12px 14px; box-shadow:0 2px 8px rgba(16,24,40,.04); } .kpi-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--pill-sub); } .kpi-row{ display:grid; grid-template-columns:1fr auto; gap:12px; padding:4px 0; align-items:baseline; } .kpi-row + .kpi-row{ border-top:1px dashed #eceff6; } .kpi-row .label{ color:var(--pill-sub); font-size:12.5px; } .kpi-row .value{ color:#0f172a; font-weight:700; font-variant-numeric:tabular-nums; } /* Loan fulfillment progress */ .kpi-progress{ height:10px; border-radius:999px; background:#eef2f7; overflow:hidden; margin-top:6px; } .kpi-progress .bar{ height:100%; width:0; background:linear-gradient(90deg, #22c55e, #86efac); } .kpi-foot{ margin-top:6px; font-size:12px; color:#6b7280; display:flex; justify-content:space-between; } /* Modern pill selects (for kind/type) */ .select{ padding:8px 14px; border:1px solid color-mix(in srgb, var(--brand) 22%, #d7d9e0); border-radius:999px; background:#fff; outline:none; transition: box-shadow .15s ease, border-color .15s ease; } .select:focus{ border-color: color-mix(in srgb, var(--brand) 50%, #cbd3ff); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); } /* === Employee search with type-ahead (refined) === */ /* Selected employee chip beside the Analytics title */ #emp-chip.chip.current{ display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background: color-mix(in srgb, var(--brand) 6%, #fff); color: var(--brand-ink); box-shadow: 0 1px 2px rgba(16,24,40,.04); max-width: 360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 13.5px; } #emp-chip img{ width:22px; height:22px; border-radius:50%; object-fit:cover; } #emp-chip .avatar-initials{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; background: color-mix(in srgb, var(--brand) 14%, #eef2ff); color: var(--brand); } /* Pill search (right side) */ #emp-search-wrap{ position:relative; display:flex; align-items:center; gap:10px; padding:10px 14px; /* ↑ taller */ border:1px solid var(--line); border-radius:999px; background:#fff; min-width: 360px; box-shadow: 0 1px 2px rgba(16,24,40,.04); } #emp-search-wrap .muted{ font-size:12.5px; color: var(--brand-ink); opacity:.65; padding:2px 8px; border:1px solid var(--line); border-radius:999px; background: var(--btn-ghost-bg); /* matches your theme */ } #emp-search-wrap input{ border:none; outline:none; background:transparent; min-width:240px; font-size:14px; line-height:20px; } /* Suggestions dropdown */ #emp-suggest{ position:absolute; top:110%; left:0; right:0; z-index:20; display:none; background:#fff; border:1px solid var(--line); border-radius:12px; margin-top:6px; box-shadow:0 8px 24px rgba(15,23,42,.12); max-height:320px; overflow:auto; } #emp-suggest .sug-item{ display:flex; gap:10px; padding:10px 12px; cursor:pointer; align-items:center; } #emp-suggest .sug-item:hover{ background: var(--hover); } #emp-suggest .sug-item img{ width:28px; height:28px; border-radius:50%; object-fit:cover; } #emp-suggest .sug-item .avatar-initials{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; background: color-mix(in srgb, var(--brand) 14%, #eef2ff); color: var(--brand); } #emp-suggest .meta{ min-width:0; display:flex; flex-direction:column; } #emp-suggest .name{ font-weight:600; color:#111; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #emp-suggest .sub{ color:#6b7280; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #emp-search-wrap:focus-within{ border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); } /* Make the dropdown create its own high stacking context */ #emp-search-wrap{ position: relative; /* already there, keep it */ z-index: 100; /* ⬅️ add this */ } #emp-suggest{ position: absolute; /* already there, keep it */ top: 110%; left: 0; right: 0; z-index: 1000; /* ⬅️ raise above charts/cards */ display: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-top: 6px; box-shadow: 0 8px 24px rgba(15,23,42,.12); max-height: 320px; overflow: auto; pointer-events: auto; /* belt-and-suspenders */ } /* (Only if you still see it clipped) ensure the row doesn't crop children */ .analytics-head, .table-head { overflow: visible; } /* =========================================================== Trip Calculator modal (admin) — jn.121025 Uses existing modal styles + blue theme tokens =========================================================== */ #tripcalc-modal { align-items: center; justify-content: center; } #tripcalc-modal .tripcalc-card { max-width: 1040px; width: min(1040px, 100% - 3rem); } #tripcalc-modal .modal-body { background: var(--bg); } /* Main layout */ #tripcalc-modal .tc-shell { display: flex; flex-wrap: wrap; gap: 1rem; } #tripcalc-modal .tc-left { flex: 0 0 320px; display: flex; flex-direction: column; gap: 0.75rem; } #tripcalc-modal .tc-right { flex: 1 1 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 0.75rem; } /* Collapsed state: hide left, right takes full space */ #tripcalc-modal.tripcalc-collapsed .tc-left { display: none; } /* Cards */ #tripcalc-modal .tc-lite-card, #tripcalc-modal .tc-card, #tripcalc-modal .tc-summary { background: var(--card); border-radius: 0.75rem; border: 1px solid var(--line); padding: 0.75rem 0.9rem; box-shadow: 0 8px 24px rgba(15, 40, 80, 0.04); } #tripcalc-modal .tc-lite-card { background: linear-gradient( 135deg, rgba(44, 132, 228, 0.04), rgba(44, 132, 228, 0) ), var(--card); } #tripcalc-modal .tc-g-head { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 0.35rem; } #tripcalc-modal .tc-minihead { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-ink); margin-bottom: 0.1rem; } #tripcalc-modal .tc-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; } #tripcalc-modal .tc-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } #tripcalc-modal .tc-grid-1 { display: grid; gap: 0.5rem; } #tripcalc-modal .tc-col label, #tripcalc-modal .tc-grid-2 label, #tripcalc-modal .tc-grid-1 label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.78rem; color: var(--ink, #111827); } #tripcalc-modal .tc-col input, #tripcalc-modal .tc-grid-2 input, #tripcalc-modal .tc-grid-1 input, #tripcalc-modal .tc-card input { border-radius: 0.55rem; border: 1px solid var(--line); padding: 0.35rem 0.5rem; font-size: 0.8rem; background: var(--bg); } #tripcalc-modal .tc-row { display: flex; gap: 0.4rem; align-items: center; } /* Right panel header: preset dropdown + toggle */ #tripcalc-modal .tc-right-top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.25rem; } #tripcalc-modal .tc-preset-select-wrap { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; } #tripcalc-modal .tc-preset-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-ink); } #tripcalc-modal .tc-preset-select-wrap select { width: 100%; border-radius: 0.55rem; border: 1px solid var(--line); padding: 0.35rem 0.5rem; font-size: 0.8rem; background: var(--card); } /* Factor cards */ #tripcalc-modal .tc-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; } #tripcalc-modal .tc-title { font-size: 0.9rem; font-weight: 600; color: var(--brand-ink); } #tripcalc-modal .tc-peso { font-size: 0.92rem; font-weight: 600; color: var(--brand); } #tripcalc-modal .tc-card label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; margin-bottom: 0.3rem; } #tripcalc-modal .tc-note { font-size: 0.75rem; color: #b45309; /* amber-ish warning */ } #tripcalc-modal .tc-subtle { font-size: 0.72rem; color: #6b7280; } /* Summary */ #tripcalc-modal .tc-summary { grid-column: 1 / -1; border: 1px solid var(--brand); background: linear-gradient(135deg, rgba(44, 132, 228, 0.08), rgba(44, 132, 228, 0.02)), var(--card); } #tripcalc-modal .tc-summary .sum-line, #tripcalc-modal .tc-summary .sum-total { display: flex; justify-content: space-between; font-size: 0.82rem; margin-bottom: 0.15rem; } #tripcalc-modal .tc-summary .sum-total { font-weight: 600; font-size: 0.9rem; color: var(--brand-ink); } #tripcalc-modal .tc-summary hr { border: none; border-top: 1px dashed var(--line); margin: 0.3rem 0 0.4rem; } #tripcalc-modal .tc-summary code { font-size: 0.7rem; background: rgba(15, 23, 42, 0.04); padding: 0.1rem 0.3rem; border-radius: 999px; } /* Meta text */ #tripcalc-modal .tc-subtle, #tripcalc-modal .tc-summary .tiny.muted { color: #6b7280; } #tripcalc-modal .tc-subtle#tc-preset-status { min-height: 1em; } /* Buttons */ #tripcalc-modal .btn.primary { background: var(--brand); color: #fff; } #tripcalc-modal .btn.ghost { background: var(--btn-ghost-bg); } #tripcalc-modal .btn.danger { background: #fee2e2; color: #b91c1c; } /* Responsive */ @media (max-width: 960px) { #tripcalc-modal .tc-left { flex: 1 1 100%; } #tripcalc-modal .tc-right { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #tripcalc-modal .tripcalc-card { width: 100%; max-height: 100vh; } #tripcalc-modal .tc-shell { flex-direction: column; } #tripcalc-modal .tc-right { grid-template-columns: 1fr; } #tripcalc-modal .tc-summary { grid-column: 1 / -1; } #tripcalc-modal .tc-row { flex-wrap: wrap; } } /* jn.121025 — Payroll schema selector UI (full-width top row) */ /* Put selector row above the grid, spanning both columns */ .schema-toolbar .schema-selector { grid-column: 1 / -1; /* full width across the toolbar grid */ display: flex; align-items: flex-end; gap: 8px; margin-bottom: 4px; /* tiny space before the Role/Key grid */ } /* Make the label look like the other field labels */ .schema-selector-label { font-size: 12px; color: #555; display: flex; flex-direction: column; gap: 6px; } /* Make the select match the other inputs in the schema toolbar */ .schema-selector-select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-size: 0.9rem; } /* Save-as button: small pill, aligned with the select */ .schema-selector-saveas { align-self: flex-end; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--btn-ghost-bg); font-size: 0.78rem; cursor: pointer; } .schema-selector-saveas:hover { background: var(--hover); } /* jn.sidebar.scroll.020126 — Admin sidebar: keep header fixed, make nav scroll */ .sidebar{ height: 100vh; display: flex; flex-direction: column; overflow: hidden; /* prevent page-level spill */ min-height: 0; /* IMPORTANT: allows child scroll in flex */ } /* the buttons container */ .sidebar .nav{ flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; /* IMPORTANT */ padding-bottom: 14px; /* keeps last button from being clipped */ overscroll-behavior: contain; } /* optional: nicer scrollbars (won’t break if unsupported) */ .sidebar .nav::-webkit-scrollbar{ width: 10px; } .sidebar .nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.25); border-radius: 999px; } .sidebar .nav::-webkit-scrollbar-track{ background: transparent; } /* jn.sidebar.noscrollbar.020126 — keep scroll, hide scrollbar visuals */ .sidebar .nav{ -ms-overflow-style: none; /* IE/Edge legacy */ scrollbar-width: none; /* Firefox */ } .sidebar .nav::-webkit-scrollbar{ width: 0; height: 0; } /* jn.0204.workcal.fix — keep checkbox + label on same line (admin override safety) */ .wc-task-row{ display:flex; flex-direction:row; align-items:flex-start; gap:10px; } /* make sure the text doesn't drop under the checkbox */ .wc-task-row .wc-task-text{ display:inline; flex:1; min-width:0; } /* optional: align checkbox visually with first line of text */ .wc-task-row .wc-task-chk{ margin-top:2px; flex:0 0 auto; }