/* * SchoolAdminTheme (SAT) — Preskool-inspired design system * Default palette: Preskool Purple (#6C63FF) * Color themes: apply .sat-theme-blue | green | orange | teal | rose | dark to any wrapper * * Usage:
...
*/ /* ─── COLOR TOKENS ──────────────────────────────────────────────────────── */ :root { --sat-primary: #6C63FF; --sat-primary-light: #EDE9FF; --sat-primary-dark: #4C3DBF; --sat-primary-rgb: 108,99,255; --sat-bg: #F5F6FA; --sat-surface: #ffffff; --sat-surface-2: #F8F9FC; --sat-border: #F0F1F5; --sat-border-input: #E9EBF0; --sat-text: #1B2559; --sat-text-sub: #4A4A69; --sat-text-muted: #9396A5; --sat-radius-lg: 12px; --sat-radius: 10px; --sat-radius-sm: 8px; --sat-radius-xs: 6px; --sat-shadow: 0 4px 24px rgba(0,0,0,.06); --sat-shadow-modal: 0 20px 60px rgba(0,0,0,.2); /* Status colours — fixed, do not theme */ --sat-green: #0B8C4A; --sat-green-bg: #E6F9F0; --sat-green-border: #A3E6C3; --sat-red: #C0392B; --sat-red-bg: #FEE8E8; --sat-red-border: #FBBDBD; --sat-amber: #B7791F; --sat-amber-bg: #FFF8E6; --sat-blue: #1A56DB; --sat-blue-bg: #E8F0FE; --sat-orange: #F97316; --sat-orange-bg: #FFF3E6; } /* ─── COLOUR PRESETS ────────────────────────────────────────────────────── */ .sat-theme-blue { --sat-primary:#1A56DB; --sat-primary-light:#EBF5FF; --sat-primary-dark:#1141A3; --sat-primary-rgb:26,86,219; } .sat-theme-green { --sat-primary:#0B8C4A; --sat-primary-light:#E6F9F0; --sat-primary-dark:#06633A; --sat-primary-rgb:11,140,74; } .sat-theme-orange { --sat-primary:#F97316; --sat-primary-light:#FFF3E6; --sat-primary-dark:#C4580A; --sat-primary-rgb:249,115,22; } .sat-theme-teal { --sat-primary:#0891B2; --sat-primary-light:#E0F9FF; --sat-primary-dark:#0E7490; --sat-primary-rgb:8,145,178; } .sat-theme-rose { --sat-primary:#E91E63; --sat-primary-light:#FFF0F3; --sat-primary-dark:#C2185B; --sat-primary-rgb:233,30,99; } .sat-theme-dark { --sat-primary:#1B2559; --sat-primary-light:#E8EAF6; --sat-primary-dark:#0D1440; --sat-primary-rgb:27,37,89; } /* ─── PAGE SHELL ────────────────────────────────────────────────────────── */ .sat-page { padding:24px; background:var(--sat-bg); min-height:100vh; font-family:"Poppins","Roboto",sans-serif; color:var(--sat-text); } /* ─── BREADCRUMB ────────────────────────────────────────────────────────── */ .sat-breadcrumb { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--sat-text-muted); margin-bottom:18px; flex-wrap:wrap; } .sat-breadcrumb a { color:var(--sat-text-muted); text-decoration:none; transition:color .15s; } .sat-breadcrumb a:hover { color:var(--sat-primary); } .sat-breadcrumb .sep { color:var(--sat-border-input); } .sat-breadcrumb .cur { color:var(--sat-text); font-weight:600; } /* ─── PAGE HEADER ───────────────────────────────────────────────────────── */ .sat-hdr { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap; } .sat-hdr-left h4 { margin:0; font-size:20px; font-weight:700; color:var(--sat-text); } .sat-hdr-left p { margin:4px 0 0; font-size:13px; color:var(--sat-text-muted); } /* ─── CARD ──────────────────────────────────────────────────────────────── */ .sat-card { background:var(--sat-surface); border-radius:var(--sat-radius); box-shadow:var(--sat-shadow); margin-bottom:20px; } .sat-card-hd { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--sat-border); flex-wrap:wrap; gap:10px; } .sat-card-hd h5 { margin:0; font-size:15px; font-weight:700; color:var(--sat-text); } .sat-card-bd { padding:20px; } .sat-card-ft { padding:12px 20px; border-top:1px solid var(--sat-border); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } /* ─── STAT CARDS ────────────────────────────────────────────────────────── */ .sat-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:20px; } .sat-stat { background:var(--sat-surface); border-radius:var(--sat-radius); box-shadow:var(--sat-shadow); padding:20px; display:flex; align-items:center; gap:16px; } .sat-stat-icon { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .sat-stat-icon svg { width:24px; height:24px; } .sat-stat-icon-primary { background:var(--sat-primary-light); color:var(--sat-primary); } .sat-stat-icon-green { background:var(--sat-green-bg); color:var(--sat-green); } .sat-stat-icon-red { background:var(--sat-red-bg); color:var(--sat-red); } .sat-stat-icon-amber { background:var(--sat-amber-bg); color:var(--sat-amber); } .sat-stat-icon-blue { background:var(--sat-blue-bg); color:var(--sat-blue); } .sat-stat-icon-orange { background:var(--sat-orange-bg); color:var(--sat-orange); } .sat-stat-val { font-size:26px; font-weight:700; line-height:1; color:var(--sat-text); } .sat-stat-lbl { font-size:12px; color:var(--sat-text-muted); margin-top:4px; } /* ─── QUICK-ACTION CARDS ────────────────────────────────────────────────── */ .sat-qa-grid { display:flex; flex-wrap:wrap; gap:10px; } .sat-qa-btn { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 20px; background:var(--sat-surface-2); border:1.5px solid var(--sat-border); border-radius:var(--sat-radius-sm); cursor:pointer; transition:all .2s; min-width:110px; text-align:center; color:var(--sat-text-sub); font-size:12px; font-weight:600; } .sat-qa-btn:hover { border-color:var(--sat-primary); background:var(--sat-primary-light); color:var(--sat-primary); } .sat-qa-btn svg { width:22px; height:22px; } /* ─── FILTER BAR ────────────────────────────────────────────────────────── */ .sat-filter { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; } .sat-filter-item { flex:1; min-width:150px; } .sat-filter-actions { display:flex; gap:8px; align-items:flex-end; flex-shrink:0; } /* ─── BUTTONS ───────────────────────────────────────────────────────────── */ .sat-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:var(--sat-radius-sm); font-size:13px; font-weight:600; border:none; cursor:pointer; transition:opacity .15s; line-height:1; font-family:inherit; } .sat-btn:hover:not(:disabled) { opacity:.85; } .sat-btn:disabled { opacity:.5; cursor:not-allowed; } .sat-btn-primary { background:var(--sat-primary); color:#fff; } .sat-btn-outline { background:var(--sat-surface); color:var(--sat-primary); border:1.5px solid var(--sat-primary); } .sat-btn-light { background:var(--sat-surface-2); color:var(--sat-text-sub); border:1px solid var(--sat-border-input); } .sat-btn-danger { background:var(--sat-red); color:#fff; } .sat-btn-success { background:var(--sat-green); color:#fff; } .sat-btn-sm { padding:6px 12px; font-size:12px; border-radius:var(--sat-radius-xs); } .sat-btn-lg { padding:11px 24px; font-size:14px; } .sat-btn-icon { width:36px; height:36px; padding:0; justify-content:center; border-radius:var(--sat-radius-sm); } /* ─── ICON BUTTONS ──────────────────────────────────────────────────────── */ .sat-ib { width:32px; height:32px; border-radius:var(--sat-radius-sm); border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:opacity .15s; } .sat-ib:hover { opacity:.8; } .sat-ib svg { width:14px; height:14px; } .sat-ib-edit { background:var(--sat-orange-bg); color:var(--sat-orange); } .sat-ib-del { background:var(--sat-red-bg); color:var(--sat-red); } .sat-ib-view { background:var(--sat-blue-bg); color:var(--sat-blue); } .sat-ib-accession { background:var(--sat-green-bg); color:var(--sat-green); } .sat-ib-renew { background:var(--sat-primary-light); color:var(--sat-primary); } .sat-ib-collect { background:var(--sat-green-bg); color:var(--sat-green); } .sat-ib-waive { background:var(--sat-amber-bg); color:var(--sat-amber); } .sat-ib-approve { background:var(--sat-green-bg); color:var(--sat-green); } .sat-ib-reject { background:var(--sat-red-bg); color:var(--sat-red); } .sat-ib-collect::before { content:'\2713'; font-size:15px; font-weight:700; line-height:1; } .sat-ib-waive::before { content:'\2715'; font-size:14px; font-weight:700; line-height:1; } .sat-ib-approve::before { content:'\2713'; font-size:15px; font-weight:700; line-height:1; } .sat-ib-reject::before { content:'\2715'; font-size:14px; font-weight:700; line-height:1; } /* ─── TABLE ─────────────────────────────────────────────────────────────── */ .sat-table-wrap { overflow-x:auto; } .sat-table { width:100%; border-collapse:collapse; font-size:13px; } .sat-table th { background:var(--sat-surface-2); color:var(--sat-text-muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:10px 16px; border-bottom:1px solid var(--sat-border); text-align:left; white-space:nowrap; } .sat-table td { padding:12px 16px; border-bottom:1px solid var(--sat-border); color:var(--sat-text); vertical-align:middle; } .sat-table tbody tr:last-child td { border-bottom:none; } .sat-table tbody tr:hover td { background:#FAFAFF; } .sat-table-info { font-size:12px; color:var(--sat-text-muted); padding:10px 16px; border-top:1px solid var(--sat-border); } /* ─── BADGES ────────────────────────────────────────────────────────────── */ .sat-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; } .sat-badge-primary { background:var(--sat-primary-light); color:var(--sat-primary); } .sat-badge-green { background:var(--sat-green-bg); color:var(--sat-green); } .sat-badge-red { background:var(--sat-red-bg); color:var(--sat-red); } .sat-badge-amber { background:var(--sat-amber-bg); color:var(--sat-amber); } .sat-badge-blue { background:var(--sat-blue-bg); color:var(--sat-blue); } .sat-badge-orange { background:var(--sat-orange-bg); color:var(--sat-orange); } .sat-badge-gray { background:var(--sat-border); color:var(--sat-text-muted); } /* ─── AVATAR ────────────────────────────────────────────────────────────── */ .sat-av { width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; flex-shrink:0; } /* ─── FORM CONTROLS ─────────────────────────────────────────────────────── */ .sat-form-group { margin-bottom:16px; } .sat-form-group label { display:block; font-size:12px; font-weight:600; color:var(--sat-text-sub); margin-bottom:6px; } .sat-input { width:100%; padding:9px 12px; border:1.5px solid var(--sat-border-input); border-radius:var(--sat-radius-sm); font-size:13px; color:var(--sat-text); background:var(--sat-surface); outline:none; box-sizing:border-box; font-family:inherit; transition:border-color .15s; } .sat-input:focus { border-color:var(--sat-primary); } .sat-input[readonly], .sat-input:disabled { background:var(--sat-surface-2); color:var(--sat-text-muted); } textarea.sat-input { resize:vertical; min-height:80px; } .sat-row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .sat-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; } .sat-checkbox { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--sat-text-sub); cursor:pointer; font-family:inherit; } .sat-checkbox input[type=checkbox] { width:16px; height:16px; accent-color:var(--sat-primary); flex-shrink:0; } @media(max-width:540px){ .sat-row2,.sat-row3 { grid-template-columns:1fr; } } /* ─── ALERTS ────────────────────────────────────────────────────────────── */ .sat-alert { padding:10px 16px; border-radius:var(--sat-radius-sm); font-size:13px; font-weight:500; margin-bottom:14px; } .sat-alert-ok { background:var(--sat-green-bg); color:var(--sat-green); border:1px solid var(--sat-green-border); } .sat-alert-err { background:var(--sat-red-bg); color:var(--sat-red); border:1px solid var(--sat-red-border); } .sat-alert-warn { background:var(--sat-amber-bg); color:var(--sat-amber); border:1px solid #F6D860; } .sat-alert-info { background:var(--sat-blue-bg); color:var(--sat-blue); border:1px solid #BFD7FD; } /* ─── EMPLOYEE SEARCH DROPDOWN ──────────────────────────────────────────── */ .sat-dropdown-list { border:1px solid var(--sat-border); border-radius:var(--sat-radius-md); background:var(--sat-surface); margin-top:4px; max-height:220px; overflow-y:auto; box-shadow:var(--sat-shadow-card); } .sat-dropdown-item { padding:10px 14px; cursor:pointer; font-size:14px; border-bottom:1px solid var(--sat-border-light); transition:background .15s; } .sat-dropdown-item:last-child { border-bottom:none; } .sat-dropdown-item:hover { background:var(--sat-blue-bg); } .sat-dropdown-item-disabled { opacity:.55; cursor:default; pointer-events:none; } /* ─── MODAL OVERLAY ─────────────────────────────────────────────────────── */ .sat-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000; display:flex; align-items:center; justify-content:center; padding:16px; } .sat-modal { background:var(--sat-surface); border-radius:var(--sat-radius-lg); padding:0; width:100%; max-height:90vh; overflow-y:auto; box-shadow:var(--sat-shadow-modal); display:flex; flex-direction:column; } .sat-modal-sm { max-width:420px; } .sat-modal-md { max-width:560px; } .sat-modal-lg { max-width:720px; } .sat-modal-hd { padding:20px 24px; border-bottom:1px solid var(--sat-border); font-size:17px; font-weight:700; color:var(--sat-text); display:flex; align-items:center; justify-content:space-between; } .sat-modal-close { width:32px; height:32px; border:none; border-radius:var(--sat-radius-sm); background:var(--sat-surface-2); color:var(--sat-text-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .15s, color .15s; flex-shrink:0; } .sat-modal-close:hover { background:var(--sat-red-bg); color:var(--sat-red); } .sat-modal-bd { padding:24px; flex:1; } .sat-modal-ft { padding:16px 24px; border-top:1px solid var(--sat-border); display:flex; justify-content:flex-end; gap:10px; } /* ─── TABS ──────────────────────────────────────────────────────────────── */ .sat-tabs { border-bottom:2px solid var(--sat-border); display:flex; gap:4px; margin-bottom:20px; flex-wrap:wrap; } .sat-tab { padding:10px 18px; border:none; background:none; cursor:pointer; font-size:13px; font-weight:600; color:var(--sat-text-muted); border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .15s; font-family:inherit; } .sat-tab:hover { color:var(--sat-text); } .sat-tab.active { color:var(--sat-primary); border-bottom-color:var(--sat-primary); } .sat-tab-panel { display:none; } .sat-tab-panel.active { display:block; } /* ─── SPINNER ───────────────────────────────────────────────────────────── */ .sat-spinner { display:flex; justify-content:center; align-items:center; padding:60px; flex-direction:column; gap:12px; color:var(--sat-text-muted); font-size:13px; } .sat-spinner-ring { width:40px; height:40px; border:3px solid var(--sat-border-input); border-top-color:var(--sat-primary); border-radius:50%; animation:sat-spin .8s linear infinite; } @keyframes sat-spin { to { transform:rotate(360deg); } } /* ─── EMPTY STATE ───────────────────────────────────────────────────────── */ .sat-empty { padding:60px 20px; text-align:center; color:var(--sat-text-muted);} .sat-empty svg { opacity:.3; max-width:100px;} .sat-empty p { margin-top:12px; font-size:15px; } /* ─── PAGINATION ────────────────────────────────────────────────────────── */ .sat-pagination { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-top:1px solid var(--sat-border); flex-wrap:wrap; gap:8px; } .sat-pagination-info { font-size:13px; color:var(--sat-text-muted); } /* ─── STICKY SAVE BAR ───────────────────────────────────────────────────── */ .sat-save-bar { position:sticky; bottom:0; background:var(--sat-surface); border-top:1px solid var(--sat-border); padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; box-shadow:0 -4px 20px rgba(0,0,0,.06); z-index:100; flex-wrap:wrap; } .sat-save-bar-info { font-size:13px; color:var(--sat-text-muted); } .sat-save-bar-info strong { color:var(--sat-primary); } /* ─── BANNER ────────────────────────────────────────────────────────────── */ .sat-banner-info { display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--sat-primary-light); border:1px solid rgba(var(--sat-primary-rgb),.3); border-radius:var(--sat-radius-sm); margin-bottom:16px; font-size:13px; color:var(--sat-primary-dark); font-weight:600; } /* ─── SCHOOL / SESSION SELECT DIALOG ───────────────────────────────────── */ .school-select-dialog { padding:16px 20px 4px; min-width:340px; box-sizing:border-box; } .school-select-field { display:flex; flex-direction:column; gap:4px; width:100%; } .school-select-label { font-size:12px; font-weight:600; color:var(--sat-text-sub); } /* Force the Fluent select control and its inner listbox to fill the dialog width */ .school-select-dialog fluent-select, .school-select-dialog fluent-select::part(control) { width:100% !important; max-width:100% !important; box-sizing:border-box; } .school-select-dialog fluent-listbox { min-width:100% !important; } /* ─── UTILITIES ─────────────────────────────────────────────────────────── */ .sat-flex-between { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .sat-flex-center { display:flex; align-items:center; gap:8px; } .sat-text-muted { color:var(--sat-text-muted); font-size:12px; } .sat-divider { border:none; border-top:1px solid var(--sat-border); margin:16px 0; } .sat-mono { font-family:monospace; font-size:11px; } .sat-truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ─── TIMETABLE ─────────────────────────────────────────────────────────── */ /* Period color palette (8 colors) */ .sat-tt-c1 { --tt-bg:#EEF2FF; --tt-border:#667EEA; --tt-grad:linear-gradient(135deg,#667eea,#764ba2); } .sat-tt-c2 { --tt-bg:#FDF2F8; --tt-border:#F5576C; --tt-grad:linear-gradient(135deg,#f093fb,#f5576c); } .sat-tt-c3 { --tt-bg:#EFF8FF; --tt-border:#4FACFE; --tt-grad:linear-gradient(135deg,#4facfe,#00f2fe); } .sat-tt-c4 { --tt-bg:#F0FDF4; --tt-border:#43E97B; --tt-grad:linear-gradient(135deg,#43e97b,#38f9d7); } .sat-tt-c5 { --tt-bg:#FFF7ED; --tt-border:#FA709A; --tt-grad:linear-gradient(135deg,#fa709a,#fee140); } .sat-tt-c6 { --tt-bg:#FAF5FF; --tt-border:#A18CD1; --tt-grad:linear-gradient(135deg,#a18cd1,#fbc2eb); } .sat-tt-c7 { --tt-bg:#FFF8F1; --tt-border:#FDA085; --tt-grad:linear-gradient(135deg,#fda085,#f6d365); } .sat-tt-cx { --tt-bg:#F0F9FF; --tt-border:#89F7FE; --tt-grad:linear-gradient(135deg,#89f7fe,#66a6ff); } /* Period cell */ .sat-tt-table { width:100%; border-collapse:collapse; min-width:700px; } .sat-tt-head { background:linear-gradient(135deg,#6C63FF,#4C3DBF); } .sat-tt-head th { padding:12px 10px; color:#fff; font-size:13px; font-weight:600; text-align:center; border-right:1px solid rgba(255,255,255,.2); white-space:nowrap; } .sat-tt-period-col { padding:8px; text-align:center; background:var(--sat-surface-2); border-right:2px solid var(--sat-border); vertical-align:middle; width:110px; } .sat-tt-period-badge { width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff; margin-bottom:4px; background:var(--tt-grad,linear-gradient(135deg,#667eea,#764ba2)); } .sat-tt-period-time { font-size:11px; color:var(--sat-text-muted); line-height:1.4; } .sat-tt-cell { padding:5px; vertical-align:middle; border-right:1px solid var(--sat-border); border-bottom:1px solid var(--sat-border); width:150px; height:88px; } .sat-tt-cell-inactive { padding:5px; vertical-align:middle; border-right:1px solid var(--sat-border); border-bottom:1px solid var(--sat-border); width:150px; height:88px; background:repeating-linear-gradient(45deg,var(--sat-surface-2,#f5f5f5),var(--sat-surface-2,#f5f5f5) 4px,transparent 4px,transparent 8px); opacity:0.55; cursor:default; } .sat-tt-slot { border-radius:8px; background:var(--tt-bg,#eef2ff); border-left:4px solid var(--tt-border,#667eea); padding:8px 10px; min-height:70px; display:flex; flex-direction:column; justify-content:center; height:100%; } .sat-tt-slot-subject { font-weight:700; font-size:13px; color:var(--sat-text); margin-bottom:3px; } .sat-tt-slot-teacher { font-size:11px; color:var(--sat-text-muted); display:flex; align-items:center; gap:4px; } .sat-tt-slot-class { font-size:11px; font-weight:600; color:var(--sat-text-sub); margin-bottom:2px; } .sat-tt-slot-empty { height:70px; border-radius:8px; background:var(--sat-surface-2); border:1px dashed var(--sat-border-input); } .sat-tt-break { background:#FFFBEB; border-bottom:1px solid #FDE68A; } .sat-tt-break td:first-child { border-right:2px solid #FDE68A; font-size:11px; color:#92400E; font-weight:600; } .sat-tt-break-label { font-weight:600; color:#92400E; font-size:13px; } .sat-tt-row:hover td { background:#FAFAFF; } /* Period slot preview strip (used in PeriodSlots list) */ .sat-ps-slot { display:flex; align-items:center; gap:10px; } .sat-ps-slot-bar { width:4px; height:36px; border-radius:2px; flex-shrink:0; background:var(--tt-border,#667eea); } .sat-ps-slot-name { font-weight:600; font-size:13px; color:var(--sat-text); } /* Period slot toggle chips (ClassPeriodSlotSetup checklist) */ .sat-ps-chip { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1.5px solid var(--sat-border-input); border-radius:var(--sat-radius-sm); cursor:pointer; transition:all .15s; background:var(--sat-surface); user-select:none; min-width:140px; } .sat-ps-chip:hover { border-color:var(--tt-border,var(--sat-primary)); background:var(--tt-bg,var(--sat-primary-light)); } .sat-ps-chip-on { border-color:var(--tt-border,var(--sat-primary)); background:var(--tt-bg,var(--sat-primary-light)); } .sat-ps-chip-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; background:var(--tt-border,var(--sat-primary)); } .sat-ps-chip-label { font-weight:600; font-size:12px; color:var(--sat-text); } /* Day filter tabs */ .sat-day-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; } .sat-day-tab { padding:6px 14px; border:1.5px solid var(--sat-border-input); background:var(--sat-surface); border-radius:20px; font-size:12px; font-weight:600; color:var(--sat-text-sub); cursor:pointer; transition:all .15s; font-family:inherit; } .sat-day-tab:hover { border-color:var(--sat-primary); color:var(--sat-primary); } .sat-day-tab.active { background:var(--sat-primary); border-color:var(--sat-primary); color:#fff; } /* Substitute card */ .sat-sub-card { border-radius:var(--sat-radius); border:1px solid var(--sat-border); background:var(--sat-surface); box-shadow:var(--sat-shadow); overflow:hidden; } .sat-sub-card-hd { background:linear-gradient(135deg,#6C63FF,#4C3DBF); padding:12px 16px; color:#fff; } .sat-sub-card-body { padding:14px 16px; } /* Stat cards for dashboard */ .sat-tt-stat { border-radius:var(--sat-radius); padding:20px; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.15); flex:1; min-width:160px; } .sat-tt-stat-lbl { font-size:12px; opacity:.85; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; } .sat-tt-stat-val { font-size:34px; font-weight:700; line-height:1; } .sat-tt-stat-ft { margin-top:12px; display:flex; justify-content:space-between; align-items:center; } .sat-tt-dash-link { font-size:12px; color:rgba(255,255,255,.85); font-weight:600; cursor:pointer; text-decoration:none; border:none; background:none; } .sat-tt-dash-link:hover { color:#fff; text-decoration:underline; } @media(max-width:768px) { .sat-tt-dash-bottom { grid-template-columns:1fr !important; } } /* ─── SYNC DATA PAGE ─────────────────────────────────────────────────────── */ .sat-sync-card { background:var(--sat-surface); border:1px solid var(--sat-border); border-radius:var(--sat-radius); box-shadow:var(--sat-shadow); display:flex; flex-direction:column; transition:box-shadow .15s; } .sat-sync-card:hover { box-shadow:0 6px 24px rgba(0,0,0,.1); } .sat-sync-card-hd { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--sat-border); gap:8px; } .sat-sync-title { font-weight:700; font-size:13px; color:var(--sat-text); } .sat-sync-icon { width:32px; height:32px; border-radius:var(--sat-radius-sm); background:var(--sat-primary-light); color:var(--sat-primary); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; } .sat-sync-card-bd { padding:12px 16px; flex:1; } .sat-sync-desc { font-size:12px; color:var(--sat-text-sub); margin:0 0 6px; line-height:1.5; } .sat-sync-requires { font-size:11px; color:var(--sat-text-muted); } .sat-sync-card-ft { padding:10px 16px; border-top:1px solid var(--sat-border); display:flex; gap:8px; align-items:center; } /* ─── BARCODE PAGE ───────────────────────────────────────────────────────── */ .bc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; } .bc-card { border:1.5px solid var(--sat-border-input); border-radius:var(--sat-radius-sm); background:var(--sat-surface); padding:12px; display:flex; flex-direction:column; gap:6px; position:relative; cursor:pointer; transition:border-color .15s; } .bc-card.selected { border-color:var(--sat-primary); background:var(--sat-primary-light); } .bc-card.printed { opacity:.6; } .bc-svg { display:flex; justify-content:center; align-items:center; min-height:64px; } .bc-svg svg { max-width:100%; height:auto; } .bc-fallback { font-family:monospace; font-size:11px; text-align:center; background:var(--sat-surface-2); padding:10px 6px; border-radius:4px; letter-spacing:1px; color:var(--sat-text); } .bc-label1 { font-size:12px; font-weight:700; color:var(--sat-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bc-label2 { font-size:11px; color:var(--sat-text-sub); } .bc-label3 { font-size:11px; color:var(--sat-text-muted); } .bc-check { position:absolute; top:8px; right:8px; } .bc-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; } .bc-tab { padding:8px 18px; border:none; background:none; cursor:pointer; font-size:13px; font-weight:600; color:var(--sat-text-muted); border-bottom:2px solid transparent; margin-bottom:-2px; font-family:inherit; transition:all .15s; } .bc-tab.active { color:var(--sat-primary); border-bottom-color:var(--sat-primary); } .bc-tabs { border-bottom:2px solid var(--sat-border); display:flex; gap:4px; margin-bottom:20px; } @media print { body * { visibility:hidden; } #bc-print-area, #bc-print-area * { visibility:visible; } #bc-print-area { position:fixed; inset:0; background:#fff; padding:16px; } .bc-card { break-inside:avoid; border:1px solid #ccc !important; background:#fff !important; } .bc-card:not(.print-target) { display:none; } .bc-check, .bc-toolbar, .sat-hdr, .sat-breadcrumb, .bc-tabs, .sat-card { display:none !important; } } /* ─── ACCESSIONING PAGE ──────────────────────────────────────────────────── */ .acc-batch-hd { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; cursor:pointer; border-bottom:1px solid var(--sat-border); background:var(--sat-surface); transition:background .12s; user-select:none; } .acc-batch-hd:hover { background:var(--sat-surface-2); } .acc-batch-hd-open { background:var(--sat-primary-light); border-left:3px solid var(--sat-primary); } .acc-batch-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex:1; } .acc-batch-date { font-weight:600; font-size:13px; color:var(--sat-text); white-space:nowrap; } .acc-batch-supplier { font-size:13px; color:var(--sat-text-sub); } .acc-batch-bill { font-size:12px; color:var(--sat-text-muted); } .acc-batch-budget { font-size:12px; color:var(--sat-text-muted); font-style:italic; } .acc-batch-stats { display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex-shrink:0; } .acc-batch-toggle { font-size:10px; color:var(--sat-text-muted); margin-left:4px; } .acc-copies-wrap { background:var(--sat-surface-2); border-bottom:1px solid var(--sat-border); } .acc-copies-table { margin:0; } .acc-copies-table thead th { background:var(--sat-surface-2); font-size:11px; padding:8px 14px; } .acc-copies-table tbody td { padding:7px 14px; font-size:12px; } /* ─── EMPLOYEE COMBOBOX ───────────────────────────────────────────────────── */ .emp-cb { position:relative; width:100%; } .emp-cb-display { display:flex; align-items:center; gap:6px; border:1px solid var(--sat-border-input); border-radius:var(--sat-radius-sm); background:var(--sat-surface); padding:6px 10px; font-size:13px; color:var(--sat-text); cursor:pointer; min-height:36px; transition:border-color .15s; } .emp-cb-display:hover { border-color:var(--sat-primary); } .emp-cb-open .emp-cb-display { border-color:var(--sat-primary); } .emp-cb-placeholder { color:var(--sat-text-muted); } .emp-cb-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; } .emp-cb-caret { margin-left:auto; font-size:10px; color:var(--sat-text-muted); flex-shrink:0; } .emp-cb-clear { background:none; border:none; padding:0 2px; cursor:pointer; color:var(--sat-text-muted); font-size:12px; line-height:1; display:flex; align-items:center; flex-shrink:0; } .emp-cb-clear:hover { color:var(--sat-danger); } .emp-cb-search-wrap { display:flex; align-items:center; gap:6px; border:1px solid var(--sat-primary); border-radius:var(--sat-radius-sm); background:var(--sat-surface); padding:2px 6px 2px 0; } .emp-cb-input { border:none !important; box-shadow:none !important; flex:1; padding:5px 8px; } .emp-cb-input:focus { outline:none; } .emp-cb-spinner { flex-shrink:0; display:flex; align-items:center; } .emp-cb-close { background:none; border:none; padding:2px 6px; cursor:pointer; color:var(--sat-text-muted); font-size:13px; flex-shrink:0; } .emp-cb-close:hover { color:var(--sat-danger); } .emp-cb-dropdown { position:absolute; top:100%; left:0; right:0; z-index:200; margin-top:2px; max-height:260px; overflow-y:auto; border:1px solid var(--sat-border-input); border-radius:var(--sat-radius-sm); background:var(--sat-surface); box-shadow:0 4px 16px rgba(0,0,0,.12); }