:root{--bg:#071018;--panel:#0d1923;--panel2:#112330;--text:#edf7fa;--muted:#91a9b4;--cyan:#10d9ee;--line:#1c3946;--ok:#35d07f;--warn:#f4b942}
*{box-sizing:border-box} body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#071018;color:var(--text)}
button,input,select,textarea{font:inherit}.app{min-height:100vh;display:grid;grid-template-columns:270px 1fr}
.sidebar{background:#050b10;border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;gap:11px;align-items:center;padding:5px 5px 20px}.brand img{width:62px;height:46px;object-fit:cover;border-radius:7px}.brand b{font-size:16px;letter-spacing:1px}.brand span{display:block;color:var(--cyan);font-size:10px;letter-spacing:1.7px;margin-top:3px}
nav{display:grid;gap:5px}.navbtn{border:0;background:transparent;color:#b8c9d1;text-align:left;padding:11px 12px;border-radius:9px;cursor:pointer}.navbtn:hover,.navbtn.active{background:#102631;color:white}.navbtn.active{box-shadow:inset 3px 0 var(--cyan)}
.side-foot{margin-top:auto}.branch{background:#0c1820;padding:12px;border-radius:10px;color:var(--muted);font-size:12px;margin:15px 0}.branch b{color:white}.ghost{width:100%;padding:10px;background:transparent;border:1px solid var(--line);color:#c8d8de;border-radius:8px}
main{min-width:0}header{min-height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:14px 24px;position:sticky;top:0;background:rgba(7,16,24,.94);backdrop-filter:blur(10px);z-index:5}header h1{margin:0;font-size:23px}header p{margin:4px 0 0;color:var(--muted);font-size:12px}.header-actions{margin-left:auto;display:flex;gap:9px}select,input,textarea{background:#0d1b24;color:white;border:1px solid #294452;border-radius:8px;padding:10px}.primary{border:0;background:var(--cyan);color:#001014;font-weight:700;padding:10px 14px;border-radius:8px;cursor:pointer}.menu{display:none;background:transparent;border:1px solid var(--line);color:white;border-radius:7px;padding:8px}
#content{padding:24px}.hero{background:linear-gradient(135deg,#0b1d28,#0c303a);border:1px solid #1b4855;border-radius:18px;padding:22px;display:flex;align-items:center;gap:20px;margin-bottom:20px}.hero img{width:170px;max-height:95px;object-fit:contain}.hero h2{margin:0 0 7px;font-size:25px}.hero p{margin:0;color:#b8d1d8}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:17px}.stat .k{color:var(--muted);font-size:12px}.stat .v{font-size:27px;font-weight:800;margin-top:8px}.stat .s{font-size:11px;color:var(--ok);margin-top:5px}.span2{grid-column:span 2}.span4{grid-column:1/-1}
h3{margin:0 0 13px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:650px}th,td{text-align:left;padding:11px;border-bottom:1px solid #1a3440;font-size:13px}th{color:#8fa9b4;font-weight:600}.pill{padding:4px 8px;border-radius:20px;background:#13313b;color:#aeeff4;font-size:11px}.actions{display:flex;flex-wrap:wrap;gap:9px}.action{background:#10232d;border:1px solid #234552;color:white;border-radius:9px;padding:10px 12px;cursor:pointer}.empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed #294452;border-radius:12px}
.module-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:15px}.module-head p{color:var(--muted);margin:4px 0}.progress{height:8px;background:#142832;border-radius:10px;overflow:hidden}.progress i{display:block;height:100%;background:var(--cyan);width:70%}
.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;padding:20px;z-index:20}.hidden{display:none}.modal-card{width:min(520px,100%);background:#0c1922;border:1px solid #28505e;border-radius:16px;padding:22px;position:relative}.close{position:absolute;right:13px;top:10px;background:transparent;border:0;color:white;font-size:27px}.modal form{display:grid;gap:12px}.modal label{display:grid;gap:6px;color:#a9bec7;font-size:12px}.modal textarea{min-height:90px;resize:vertical}.wide{width:100%}
.notice{background:#112630;border-left:3px solid var(--cyan);padding:12px;border-radius:7px;color:#cce1e7;margin-bottom:15px}
@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}.span4{grid-column:1/-1}}
@media(max-width:720px){.app{display:block}.sidebar{position:fixed;z-index:15;transform:translateX(-105%);transition:.2s;width:270px}.sidebar.open{transform:none}.menu{display:block}header{padding:12px}.header-actions select{display:none}#content{padding:14px}.grid{grid-template-columns:1fr}.span2,.span4{grid-column:auto}.hero{align-items:flex-start;flex-direction:column}.hero img{width:145px}}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.fields label{display:grid;gap:6px;color:#a9bec7;font-size:12px}.fields input,.fields select,.fields textarea{width:100%;background:#0d1b24;color:white;border:1px solid #294452;border-radius:8px;padding:10px}.fields textarea{min-height:82px;resize:vertical}.span2{grid-column:span 2}.total{padding:12px;background:#102d37;border:1px solid #24515e;border-radius:9px;font-size:18px;font-weight:700}.notice{background:#112630;border-left:3px solid #10d9ee;padding:12px;border-radius:7px;color:#cce1e7;margin-bottom:15px}@media(max-width:720px){.fields{grid-template-columns:1fr}.span2{grid-column:auto}}
.auth-gate{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at top,#123442,#071018 65%)}.auth-card{width:min(420px,100%);display:grid;gap:14px;background:#0d1923;border:1px solid #1c3946;border-radius:18px;padding:28px;box-shadow:0 18px 70px #0006}.auth-card img{width:150px;height:80px;object-fit:contain;margin:auto}.auth-card h1{font-size:23px;text-align:center;margin:0}.auth-card p{color:#91a9b4;text-align:center;margin:0}.auth-card label{display:grid;gap:6px;color:#a9bec7;font-size:13px}.auth-card input{width:100%}.text-button{background:transparent;border:0;color:#10d9ee;cursor:pointer;padding:8px}.auth-error{background:#3a161b;color:#ffd2d2!important;padding:10px;border-radius:8px;text-align:left!important}

.auth-gate.hidden{display:none}
.permission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin:12px 0}.permission-grid label,.access-user>label{display:flex;align-items:center;gap:8px;color:var(--text);padding:7px 0}.access-user select{min-width:220px;background:#0d1b24;color:white;border:1px solid #294452;border-radius:8px;padding:9px}.access-status{display:inline-block;margin-left:10px;color:#9fe9c5}.intake-line,.expense-line{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end}.intake-line label,.expense-line label{min-width:0}.intake-line input,.expense-line input,.expense-line select{min-width:0;width:100%}
.modal-card{width:min(860px,100%);max-height:calc(100vh - 32px);overflow:auto}.sale-line-row{display:grid;grid-template-columns:2fr 1.4fr .7fr 1fr auto;gap:8px;align-items:end;padding:12px;margin:8px 0;background:#0a151d;border:1px solid var(--line);border-radius:10px}.sale-line-row label{display:grid;gap:5px;font-size:11px;color:var(--muted)}.sale-line-row input{min-width:0;width:100%;background:#0d1b24;color:white;border:1px solid #294452;border-radius:8px;padding:9px}.report-controls{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-bottom:14px}.report-controls label{display:grid;gap:5px;color:var(--muted);font-size:12px}.report-controls input,.report-controls select{width:100%}.table-wrap .actions{min-width:155px}@media(max-width:720px){.sale-line-row{grid-template-columns:1fr 1fr}.sale-line-row .remove-line{grid-column:1/-1}.report-controls{grid-template-columns:1fr}.module-head{align-items:flex-start;flex-direction:column}}


.print-letterhead{display:none}
@media print{
  @page{size:A4;margin:14mm}
  html,body{background:#fff!important;color:#172d37!important;margin:0!important;padding:0!important}
  .app{display:block!important;min-height:0!important}
  .sidebar,body>header,main>header,.module-head,.report-controls,.header-actions,.menu,.modal,.notice button,button,.actions{display:none!important}
  main{display:block!important;padding:0!important;margin:0!important;width:100%!important}
  #content{padding:0!important;margin:0!important;width:100%!important}
  .print-letterhead{display:flex!important;justify-content:space-between;align-items:center;gap:18px;border-bottom:3px solid #087d92;padding:0 0 12px;margin:0 0 14px;color:#17313e!important;font:12px Arial,sans-serif}
  .print-brand{display:flex;align-items:center;gap:12px}.print-brand img{width:125px;height:auto;max-height:72px;object-fit:contain}.print-brand strong{display:block;font-size:17px}.print-brand span{display:block;margin-top:3px;color:#54707c;font-size:9px}.print-report-title{text-align:right}.print-report-title h1{margin:0;color:#087d92;font-size:21px}.print-report-title p{margin:5px 0 0;color:#54707c}
  #content .grid{display:block!important}#content .card{background:#fff!important;color:#17313e!important;box-shadow:none!important;border:1px solid #c9dce2!important;break-inside:avoid;margin:0 0 10px!important}#content .stat{display:inline-block!important;vertical-align:top;width:48%!important;margin:0 1% 8px 0!important;padding:9px!important}#content .stat .v,#content .stat .k{color:#17313e!important}#content .table-wrap{overflow:visible!important}#content table{width:100%!important;border-collapse:collapse!important;color:#17313e!important;font-size:9pt!important}#content th,#content td{color:#17313e!important;background:#fff!important;border:1px solid #c9dce2!important;padding:5px!important;overflow-wrap:anywhere}#content th{background:#eaf7fa!important}#content .actions{display:none!important}#content .card *{color:#17313e!important}
}
.scanner-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:#000b}.scanner-card{position:relative;width:min(560px,100%);padding:24px;background:#0d1923;border:1px solid #294452;border-radius:16px}.scanner-card p{color:var(--muted)}.scanner-card video{display:block;width:100%;max-height:60vh;object-fit:cover;background:#000;border-radius:10px}.scan-button{margin-top:6px}.scanner-modal.hidden{display:none}

/* Khulamin Trading visual refresh: teal, deep navy and warm gold */
:root{--bg:#07111c;--panel:#101f2d;--panel2:#172c3c;--text:#f3f8fb;--muted:#a9bdc8;--cyan:#14d1d8;--line:#294455;--ok:#52d49a;--warn:#f5bd55;--gold:#f4bd55;--blue:#4e9de2}
body{background:radial-gradient(ellipse at 78% -18%,#143e50 0,transparent 38%),linear-gradient(145deg,#07111c,#0a1723 55%,#101a28);background-attachment:fixed}
.sidebar{background:linear-gradient(180deg,#08131e 0%,#0b1925 55%,#102332 100%);border-right-color:#29485a;box-shadow:8px 0 32px #0002}
.brand{border-bottom:1px solid #203948;margin-bottom:13px}.brand img{box-shadow:0 0 0 1px #27c7d044,0 5px 16px #0005}.brand b{color:#f5f9fc}.brand span{color:var(--gold)}
.navbtn{transition:background .16s ease,color .16s ease,transform .16s ease}.navbtn:hover{background:#173344;color:#fff;transform:translateX(2px)}.navbtn.active{background:linear-gradient(90deg,#12404d,#183244);color:#fff;box-shadow:inset 3px 0 var(--cyan),0 5px 16px #0002}
.branch{background:linear-gradient(135deg,#122b3a,#173342);border:1px solid #2c5261}.branch b{color:var(--gold)}
header{background:rgba(8,19,30,.91);border-bottom-color:#294455;box-shadow:0 5px 22px #0002}header h1{color:#f5f8fb}header p{color:#afc3cd}
.hero{background:linear-gradient(115deg,#123c4a 0%,#125266 48%,#183348 100%);border:1px solid #2f8992;box-shadow:0 12px 30px #02091166;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:260px;height:260px;right:-105px;top:-150px;border:1px solid #f4bd5555;border-radius:50%;box-shadow:0 0 0 24px #f4bd5510,0 0 0 52px #f4bd5509;pointer-events:none}.hero img{filter:drop-shadow(0 4px 10px #00151d88)}.hero h2{color:#fff}.hero p{color:#d0e4e9}
.card{background:linear-gradient(145deg,#122432,#0f1d2a);border-color:#294455;box-shadow:0 6px 18px #020a1266;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}.card:hover{border-color:#347082;box-shadow:0 9px 24px #020a1288}.stat{position:relative;overflow:hidden}.stat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cyan)}.stat:nth-child(4n+2):before{background:var(--gold)}.stat:nth-child(4n+3):before{background:var(--blue)}.stat .k{color:#b2c7d1}.stat .v{color:#f8fbff}
th{background:#142b3a;color:#b9d1db}td{border-bottom-color:#263f4e}tr:hover td{background:#142a38}.pill{background:#123e48;color:#9bf1ed;border:1px solid #286771}.total{background:linear-gradient(100deg,#123b4a,#17374a);border-color:#347888;color:#f7fbff;box-shadow:inset 3px 0 var(--gold)}
button{transition:filter .14s ease,transform .14s ease,box-shadow .14s ease}.primary{background:linear-gradient(135deg,#1bd6d7,#37c7b8);color:#06212a;box-shadow:0 4px 12px #10bfc233}.primary:hover{filter:brightness(1.08);box-shadow:0 6px 18px #10bfc255;transform:translateY(-1px)}.action{background:linear-gradient(135deg,#183342,#142936);border-color:#31576a;color:#e7f5f8}.action:hover{border-color:#45a4af;background:linear-gradient(135deg,#1a4552,#19384a);color:#fff;transform:translateY(-1px)}.ghost{border-color:#315263;color:#d6e4ea}.ghost:hover{border-color:var(--gold);color:#fff}
input,select,textarea,.fields input,.fields select,.fields textarea,.sale-line-row input{background:#0c1a26;color:#f3f8fb;border-color:#315061}input:focus,select:focus,textarea:focus{outline:2px solid #13cbd588;border-color:var(--cyan);box-shadow:0 0 0 4px #13cbd51c}input::placeholder,textarea::placeholder{color:#8da4b0}
.notice{background:linear-gradient(100deg,#142f3b,#122635);border-left-color:var(--gold);color:#d7e8ec}.progress{background:#1a3341}.progress i{background:linear-gradient(90deg,var(--cyan),var(--gold))}
.modal-card,.scanner-card{background:linear-gradient(145deg,#142b3a,#0e1b27);border-color:#397184;box-shadow:0 22px 70px #0009}.modal label,.fields label{color:#bfd0d8}.close{color:#eaf5f8}.close:hover{color:var(--gold)}
.auth-gate{background:radial-gradient(ellipse at 50% 0%,#15546a 0%,#0d2839 36%,#07111c 78%)}.auth-card{background:linear-gradient(145deg,#142b3a,#0d1b27);border-color:#367082;box-shadow:0 22px 80px #0009,0 0 0 1px #19cad11a}.auth-card h1{color:#fff}.auth-card p{color:#b7cbd5}.auth-card label{color:#c6d5dc}.text-button{color:var(--gold)}.auth-error{background:#59272c;color:#ffe0dc!important;border:1px solid #a14e4e}
.empty{border-color:#355364;color:#aec0ca}.module-head h2{color:#f6fafc}.module-head p{color:#a9bdc8}.access-status{color:#68e0ad}

/* Warm gold accents for the attendance history and branch controls */
:root{--gold:#e9b94f;--warn:#f0bd59}
.navbtn.active{box-shadow:inset 3px 0 var(--gold);background:linear-gradient(90deg,#49371944,#102631 42%)}
.attendance-history{border-color:#806735;background:linear-gradient(145deg,#182b37,#101c28);box-shadow:inset 0 1px #e9b94f22,0 8px 24px #02081277}
.attendance-history-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:2px 2px 14px;border-bottom:1px solid #6d592f;margin-bottom:12px}
.attendance-history-head h3{margin:0;color:#f4d58e}.attendance-history-head p{margin:5px 0 0;color:var(--muted);font-size:13px}
.attendance-filters{display:flex;align-items:end;gap:9px;flex-wrap:wrap}.attendance-filters label{display:grid;gap:5px;color:#e5c982;font-size:11px}.attendance-filters input{min-width:140px;border-color:#776137;background:#111c26}
.attendance-filters input:focus{outline:2px solid #e9b94f55;border-color:var(--gold)}
.gold-tag{display:inline-flex;align-items:center;border:1px solid #a17a2f;border-radius:20px;padding:6px 10px;color:#f4d58e;background:#3c301d;font-size:12px;font-weight:700}
.attendance-table th{background:#382f20;color:#f2d48c}.attendance-table tr:hover td{background:#28271f}.attendance-state{display:inline-flex;border-radius:18px;padding:4px 9px;background:#173b36;color:#9ce6c1;font-size:11px;font-weight:700;white-space:nowrap}.attendance-state.is-late{background:#493919;color:#ffdc83;border:1px solid #876b2f}.attendance-state.is-absent{background:#48272a;color:#ffb0aa;border:1px solid #824548}.attendance-table .action{border-color:#8a703a;color:#f6dfa6}.attendance-table .action:hover{border-color:var(--gold)}
.attendance-notice{border-left-color:var(--gold)}.attendance-footnote{color:#d0bd8e;font-size:12px;margin:12px 2px 0}
@media(max-width:720px){.attendance-history-head{flex-direction:column}.attendance-filters{width:100%}.attendance-filters label{flex:1}}

/* Sales workspace, document template gallery and invoice navigation */
.sales-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 16px;padding:9px;background:#0b1924;border:1px solid #304a5a;border-radius:12px}
.sales-tab{display:inline-flex;align-items:center;gap:9px;border-color:#3a5360}.sales-tab span{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:20px;background:#203542;color:#d3e1e7;font-size:11px}.sales-tab.active{border-color:var(--gold);background:linear-gradient(120deg,#55421f,#1c3340);color:#ffe4a0;box-shadow:inset 0 0 0 1px #e9b94f33}
.template-gallery{border-color:#806735;background:linear-gradient(140deg,#1a2d39,#142333);box-shadow:inset 0 1px #e9b94f26,0 9px 25px #02081266}.template-gallery-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}.template-gallery-head h3{margin:0;color:#f6dfaa}.template-gallery-head p{margin:5px 0 0;color:var(--muted);font-size:13px}.template-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.template-choice{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-height:152px;padding:13px;border:1px solid #3a5360;border-radius:12px;background:#0c1a26;color:#f4f8fa;text-align:left;cursor:pointer}.template-choice:hover,.template-choice.selected{border-color:var(--template-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--template-accent),transparent 55%),0 8px 20px #0003}.template-choice strong{font-size:13px}.template-choice small{color:#a9bdc8}.template-choice.selected small{color:#f5d88e}.template-paper{display:flex;flex-direction:column;gap:4px;width:100%;height:78px;padding:8px;background:#f8fafb;border-radius:5px;border-top:4px solid var(--template-accent);box-shadow:0 3px 9px #0004}.template-paper i{display:block;width:58%;height:3px;background:#d5dee2}.template-paper i:first-child{width:39%;background:#718796}.template-paper b{display:block;width:100%;height:1px;margin-top:2px;background:var(--template-accent)}.template-paper em{display:block;width:32%;height:12px;margin:2px 0 0 auto;border-radius:2px;background:color-mix(in srgb,var(--template-accent),white 64%)}.sales-template-field{max-width:340px}.sales-terms-field{grid-column:1/-1}.receipt-document{margin:0 auto}
@media(max-width:900px){.template-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.template-options{grid-template-columns:1fr 1fr}.template-gallery-head{flex-direction:column}.sales-head{gap:10px}.sales-tabs{gap:6px}.sales-tab{padding:8px}.sales-terms-field{grid-column:auto}}

/* Period totals across the business dashboard and reports */
.period-totals{border-color:rgba(215,169,68,.42);background:linear-gradient(145deg,rgba(14,35,48,.96),rgba(26,52,65,.96));}
.period-totals-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.period-totals-head h3{margin:0 0 6px;color:#f2d58d}
.period-totals-head p{margin:0;color:#b8c8ce;font-size:.9rem}
.period-totals .table-wrap{overflow:auto}
.period-totals table{min-width:740px}
.period-totals th{color:#f2d58d;white-space:nowrap}
.period-totals td:first-child{font-weight:650;min-width:240px}
.period-totals td:not(:first-child),.period-totals th:not(:first-child){text-align:right;white-space:nowrap}
@media(max-width:700px){.period-totals-head{display:block}.period-totals-head .gold-tag{display:inline-block;margin-top:10px}}

/* Clear attendance time readout and in-app document template previews */
.attendance-live-status{padding:14px;border:1px solid #d9e4e8;border-radius:12px;background:rgba(255,255,255,.045)}
.attendance-live-status h3{margin:0 0 10px}
.attendance-time-grid{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:9px}
.attendance-time-grid>div{display:flex;flex-direction:column;gap:5px;padding:10px 12px;border-radius:9px;background:rgba(7,30,43,.38);border:1px solid rgba(255,255,255,.1)}
.attendance-time-grid span{font-size:.82rem;color:var(--muted,#a8b9c2)}
.attendance-time-grid strong{font-variant-numeric:tabular-nums;font-size:1rem}
.attendance-last-action{margin:10px 0 0;padding:9px 11px;border-radius:8px;background:rgba(12,116,128,.18);font-weight:700}
.template-preview-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(5,15,23,.78)}
.template-preview-dialog{display:flex;flex-direction:column;width:min(100%,1000px);max-height:94vh;border-radius:16px;background:#f1f5f7;color:#18313e;box-shadow:0 20px 80px rgba(0,0,0,.45);overflow:hidden}
.template-preview-dialog>header,.template-preview-dialog>footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;background:#fff}
.template-preview-dialog>header h2,.template-preview-dialog>header p{margin:0 0 5px}.template-preview-dialog>header p{color:#526976;font-size:.9rem}
.template-preview-paper{overflow:auto;padding:18px;display:flex;justify-content:center}
.template-preview-dialog .invoice-document{box-shadow:0 2px 16px rgba(12,45,60,.14);min-height:250mm}
.template-preview-dialog>footer{justify-content:flex-end;border-top:1px solid #d9e1e5}
@media(max-width:700px){.attendance-time-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.template-preview-overlay{padding:6px}.template-preview-dialog>header{align-items:flex-start}.template-preview-dialog .invoice-document{width:190mm;min-height:0}}
.attendance-clock b{font-variant-numeric:tabular-nums;color:var(--gold,#f0c967);white-space:nowrap}
.attendance-save-feedback{margin:8px 0 0;padding:8px 10px;border-radius:8px;font-weight:700;color:#b9f3d0;background:rgba(31,148,91,.16)}
.attendance-save-feedback:empty{display:none}
.attendance-save-feedback.is-error{color:#ffd0c9;background:rgba(196,60,46,.18)}
.attendance-flow-hint{margin:0;padding:8px 10px;border-left:3px solid var(--gold,#e6bd58);background:rgba(230,189,88,.1);border-radius:6px;font-weight:650}
.action.danger{border-color:#d86b6b;color:#ffe6e6;background:rgba(160,45,45,.38)}
.action.danger:hover{background:rgba(190,55,55,.55)}

/* Product photos and searchable stock cards */
.product-catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:10px 0 16px}
.product-card{display:grid;grid-template-rows:135px 1fr;overflow:hidden;border:1px solid rgba(130,205,225,.55);border-radius:12px;background:rgba(6,32,51,.52);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.product-card-image{display:flex;align-items:center;justify-content:center;overflow:hidden;background:rgba(255,255,255,.06);color:#a9c7d3;font-size:.85rem}
.product-card-image img{width:100%;height:100%;object-fit:cover}
.product-card-details{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px}
.product-card-details small{color:#c6dbe4}.product-card-description{display:-webkit-box;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.stock-photo-preview,.sale-product-preview{display:flex;align-items:center;justify-content:flex-start;min-height:80px;overflow:hidden}
.stock-photo-preview img,.sale-product-preview img{display:block;max-width:180px;max-height:130px;object-fit:contain;border-radius:8px}
.table-product-thumb{width:42px;height:42px;object-fit:cover;vertical-align:middle;border-radius:6px;margin-right:8px}
.invoice-document .invoice-product-thumb{width:42px;height:36px;object-fit:cover;vertical-align:middle;margin-right:7px;border-radius:4px}
.sale-line-row{grid-template-columns:repeat(3,minmax(0,1fr))}.sale-line-row .span2{grid-column:span 2}.sale-line-row textarea{min-width:0;width:100%;background:#0c1a26;color:#f3f8fb;border:1px solid #315061;border-radius:8px;padding:9px}.sale-line-row .sale-product-preview{grid-column:1/-1;min-height:0}
@media(max-width:700px){.product-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.product-card{grid-template-rows:105px 1fr}.stock-photo-preview img,.sale-product-preview img{max-width:120px}}
.birthday-reminder{border-color:#8f7337;background:linear-gradient(120deg,#213b49,#152c3b);margin-bottom:14px}.birthday-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}.birthday-heading h3{margin:0;color:#fff}.birthday-heading p{margin:5px 0 0;color:#c4d6dd}.birthday-entry{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 0;border-top:1px solid #3a5968}.birthday-entry>div:first-child{display:grid;gap:4px}.birthday-entry span{font-size:13px;color:#d2e0e5}.birthday-entry .actions{justify-content:flex-end}@media(max-width:700px){.birthday-entry,.birthday-heading{align-items:flex-start;flex-direction:column}.birthday-entry .actions{justify-content:flex-start}}
.birthday-heading-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.birthday-preview-button{border-color:#e7c35f;color:#fff4c2;background:rgba(212,160,34,.2)}
.birthday-celebration-overlay{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:hidden;color:#fff;font-family:inherit}.birthday-celebration-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(31,83,112,.83),rgba(3,13,24,.96) 75%);backdrop-filter:blur(4px)}.birthday-fireworks,.birthday-balloons{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.birthday-fireworks{z-index:1}.birthday-balloons{z-index:2;overflow:hidden}.birthday-balloon{position:absolute;left:var(--balloon-x);bottom:-150px;width:clamp(36px,5vw,64px);height:clamp(48px,7vw,82px);border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 28% 25%,rgba(255,255,255,.85),transparent 15%),linear-gradient(135deg,rgba(255,255,255,.28),transparent 38%),var(--balloon-color);box-shadow:inset -7px -8px 12px rgba(0,0,0,.17),0 8px 28px rgba(0,0,0,.22);animation:birthday-balloon-rise 8s ease-in var(--balloon-delay) infinite}.birthday-balloon::before{content:"";position:absolute;left:calc(50% - 4px);bottom:-5px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid var(--balloon-color)}.birthday-balloon::after{content:"";position:absolute;left:50%;top:100%;height:clamp(55px,8vw,95px);border-left:1px solid rgba(255,255,255,.75);transform:rotate(3deg);transform-origin:top}.birthday-celebration-card{position:relative;z-index:3;width:min(560px,calc(100% - 36px));padding:clamp(26px,5vw,48px);text-align:center;border:1px solid rgba(255,231,159,.55);border-radius:24px;background:linear-gradient(145deg,rgba(18,50,69,.95),rgba(8,25,42,.96));box-shadow:0 24px 90px rgba(0,0,0,.5);animation:birthday-card-pop .5s cubic-bezier(.2,.8,.2,1) both}.birthday-cake{font-size:clamp(56px,10vw,88px);line-height:1;margin-bottom:13px;filter:drop-shadow(0 6px 16px rgba(255,198,82,.35))}.birthday-celebration-kicker{margin:0 0 8px;color:#ffdf86;font-size:12px;font-weight:800;letter-spacing:.14em}.birthday-celebration-card h2{margin:0 0 10px;font-size:clamp(26px,5vw,42px);line-height:1.12;color:#fff}.birthday-celebration-card>p:not(.birthday-celebration-kicker){margin:0 auto 22px;color:#d5e4ec;font-size:clamp(15px,2.4vw,19px)}.birthday-close{border-color:#ffdf86;background:#f5cc62;color:#1b2b38;font-weight:800;padding:11px 18px}.birthday-close:hover{background:#ffe18a}@keyframes birthday-balloon-rise{0%{transform:translate3d(0,0,0) rotate(-5deg);opacity:0}10%{opacity:1}50%{transform:translate3d(20px,-55vh,0) rotate(5deg)}100%{transform:translate3d(-12px,-120vh,0) rotate(-4deg);opacity:.85}}@keyframes birthday-card-pop{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.birthday-balloon,.birthday-celebration-card{animation:none}.birthday-balloon{bottom:12px;opacity:.8}}