/* Fonts are linked from index.html — an @import here would block rendering
until main.css finished downloading before fonts could even start. */
/* Single theme: Modern Light. These defaults must stay in sync with THEMES.light
in js/themes.js so the page paints in the right colors before JS runs. */
:root{
--bg: #f1f5f9;
--panel: #ffffff;
--panel2: #eef2f7;
--line: #dbe3ec;
--txt: #0f172a;
--muted: #5b6b7e;
--accent: #f59e0b;
--accentTxt: #1c1304;
--gold: #b45309;
--green: #16a34a;
--greenT: #15803d;
--red: #ef4444;
--redT: #b91c1c;
--blue: #3b82f6;
--blueT: #1d4ed8;
--amber: #d97706;
--radius: 12px;
--hdr1: #ffffff;
--hdr2: #f3f6fa;
--grad1: #ffffff;
--grad2: #f7f9fc;
--barExp: #cbd5e1;
--naC: #94a3b8;
--naBg: #e2e8f0;
--warmTxt: #92400e;
--shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08), 0 2px 8px -1px rgba(15, 23, 42, 0.05);
--transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
/* Latin (Outfit/Inter) lack Lao glyphs, so all Lao text falls through to the
web-loaded 'Phetsarath'. 'Phetsarath OT' keeps a locally-installed copy as
backup; Noto Sans Lao / Lao UI are last-resort fallbacks. */
font-family: 'Outfit', 'Inter', 'Phetsarath', 'Phetsarath OT', 'Noto Sans Lao', 'Lao UI', system-ui, sans-serif;
background: var(--bg);
color: var(--txt);
font-size: 14px;
line-height: 1.5;
/* Readability zoom is applied per screen-width band below — a single
fixed zoom (1.375) left smaller screens unable to show the whole page. */
zoom: 1;
transition: background var(--transition), color var(--transition);
}
/* Graded readability zoom: the wider the real screen, the more zoom it can
afford while still fitting the full layout. Phones (≤640) stay at 1 and
tablets (641-1024) get their own value in the tablet block below. */
@media(min-width: 1025px){
body{ zoom: 1.05; }
}
@media(min-width: 1440px){
body{ zoom: 1.2; }
}
@media(min-width: 1800px){
body{ zoom: 1.375; }
}
header{
background: linear-gradient(135deg, var(--hdr1), var(--hdr2));
padding: 18px 24px;
display: flex;
align-items: center;
gap: 16px;
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 30;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
transform: translate3d(0, 0, 0);
}
header .logo{
height: 38px;
width: 38px;
border-radius: 50%;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
background: #fff;
animation: float 3s ease-in-out infinite;
}
header .logo img {
height: 100%;
width: 100%;
object-fit: cover;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
header h1{
font-size: 18px;
font-weight: 700;
letter-spacing: -0.5px;
color: var(--txt);
line-height: 1.4;
}
header .sub{
color: var(--muted);
font-size: 12px;
font-weight: 500;
line-height: 1.4;
}
header .spacer{
flex: 1;
}
.langbtn{
background: var(--panel2);
border: 1px solid var(--line);
color: var(--gold);
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
font-weight: 700;
font-size: 13px;
transition: var(--transition);
}
.langbtn:hover{
background: var(--accent);
color: var(--accentTxt);
border-color: var(--accent);
transform: translateY(-1px);
}
nav{
display: flex;
gap: 6px;
background: var(--panel);
padding: 10px 24px;
border-bottom: 1px solid var(--line);
position: sticky;
top: 66px;
z-index: 29;
flex-wrap: wrap;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
nav button{
background: transparent;
color: var(--muted);
border: none;
padding: 8px 14px;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
transition: var(--transition);
}
nav button:hover{
background: var(--panel2);
color: var(--txt);
}
nav button.active{
background: var(--accent);
color: var(--accentTxt);
box-shadow: 0 4px 12px rgba(220, 161, 0, 0.2);
transform: translateY(-1px);
}
.navgroup{
position: relative;
}
.grpbtn .caret{
font-size: 10px;
margin-left: 2px;
opacity: .7;
transition: var(--transition);
}
.navgroup.open .grpbtn .caret{
transform: rotate(180deg);
}
.dropdown{
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 16px -6px rgba(0,0,0,0.05);
z-index: 60;
min-width: 220px;
padding: 6px;
flex-direction: column;
gap: 4px;
animation: fadeIn 0.15s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.navgroup.open .dropdown{
display: flex;
}
/* nav.js adds this when a menu would open past the right screen edge */
.dropdown.drop-left{
left: auto;
right: 0;
}
.dropdown button{
width: 100%;
justify-content: flex-start;
padding: 8px 12px;
}
main{
padding: 24px 24px;
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
.view{
display: none;
}
.view.active{
display: block;
animation: fadeIn 0.25s ease-out;
}
h2.title{
font-size: 24px;
margin-bottom: 6px;
font-weight: 800;
letter-spacing: -0.5px;
}
p.lead{
color: var(--muted);
margin-bottom: 24px;
font-size: 14px;
font-weight: 400;
}
/* KPI cards */
.kpis{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.kpi{
background: linear-gradient(180deg, var(--grad1), var(--grad2));
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 20px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
}
.kpi:hover{
transform: translateY(-3px);
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05), 0 8px 16px -6px rgba(0,0,0,0.03);
}
.kpi .ic{
width: 42px;
height: 42px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
background: var(--panel2);
margin-bottom: 12px;
transition: var(--transition);
}
.kpi:hover .ic{
transform: scale(1.1);
}
.kpi .kk{
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .8px;
font-weight: 700;
}
.kpi .kv{
font-size: 28px;
font-weight: 800;
line-height: 1.1;
margin-top: 6px;
}
.kpi .kd{
font-size: 12px;
color: var(--muted);
margin-top: 6px;
font-weight: 500;
}
.kpi.accent{
border-color: rgba(220, 161, 0, 0.4);
}
.kpi.accent .ic{
background: rgba(220, 161, 0, 0.15);
}
.kv.acc{ color: var(--gold); }
.kv.pos{ color: var(--greenT); }
.kv.neg{ color: var(--redT); }
/* generic cards */
.cards{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.card{
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--shadow);
transition: var(--transition);
}
.card:hover{
transform: translateY(-2px);
}
.card .k{
color: var(--muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .6px;
font-weight: 700;
}
.card .v{
font-size: 24px;
font-weight: 700;
margin-top: 6px;
}
.card .d{
font-size: 12px;
color: var(--muted);
margin-top: 4px;
}
.v.acc{ color: var(--gold); }
.v.pos{ color: var(--greenT); }
.v.neg{ color: var(--redT); }
.panel{
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 24px;
margin-bottom: 24px;
box-shadow: var(--shadow);
}
.panel h3{
font-size: 16px;
margin-bottom: 16px;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
justify-content: space-between;
}
.panel h3 .l{
display: flex;
align-items: center;
gap: 8px;
}
.sec-h{
font-size: 16px;
font-weight: 800;
margin: 8px 0 16px;
display: flex;
align-items: baseline;
gap: 8px;
letter-spacing: -0.3px;
}
.sec-h .muted{
font-size: 12px;
font-weight: 500;
}
.dash{
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
align-items: start;
}
@media(max-width:980px){
.dash{ grid-template-columns: 1fr; }
}
.row{
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: flex-end;
}
.field{
display: flex;
flex-direction: column;
gap: 6px;
}
.field label{
font-size: 12px;
color: var(--muted);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Buttons don't inherit the page font by default (browsers force a UA font
like Arial on form controls), which made Lao text in menu/action buttons
fall back off Phetsarath. Force inheritance so all buttons use the body stack. */
button, textarea{
font-family: inherit;
}
input, select{
background: var(--panel2);
border: 1px solid var(--line);
color: var(--txt);
padding: 10px 14px;
border-radius: 8px;
font-size: 14px;
min-width: 140px;
font-family: inherit;
transition: var(--transition);
}
input:focus, select:focus{
outline: none;
border-color: var(--accent);
background: var(--panel);
box-shadow: 0 0 0 3px rgba(220, 161, 0, 0.15);
}
input.sm{
min-width: 0;
width: 90px;
padding: 8px 10px;
text-align: right;
}
/* Money inputs (cash / transfer totals) — wide enough for large kip amounts */
input.money{
min-width: 0;
width: 190px;
padding: 8px 12px;
text-align: right;
}
/* Hide number input spinners (arrows) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
button.btn{
background: var(--accent);
color: var(--accentTxt);
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
font-weight: 700;
font-size: 14px;
font-family: inherit;
transition: var(--transition);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
button.btn:hover{
filter: brightness(1.06);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(220, 161, 0, 0.15);
}
button.btn:active{
transform: translateY(0);
}
button.btn.green{
background: var(--green);
color: #fff;
}
button.btn.green:hover{
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}
button.btn.ghost{
background: var(--panel2);
color: var(--txt);
border: 1px solid var(--line);
}
button.btn.ghost:hover{
background: var(--panel);
box-shadow: none;
}
button.btn.danger{
background: transparent;
color: var(--red);
border: 1px solid var(--red);
padding: 6px 12px;
font-weight: 600;
}
button.btn.danger:hover{
background: rgba(239, 68, 68, 0.1);
box-shadow: none;
}
button.btn.sm{
padding: 6px 12px;
font-size: 13px;
border-radius: 6px;
}
table{
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin-top: 8px;
}
th, td{
text-align: left;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
}
th{
color: var(--muted);
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .8px;
background: rgba(0,0,0,0.01);
}
td.num, th.num{
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Compact wide tables (store/booth POS history, income audit, expense log) so
every column fits the screen width — no horizontal scrolling.
Applied to #ps_table / #bp_table / #im_table / #fi_table. */
table.poslog{ font-size: 11px; }
table.poslog th, table.poslog td{ padding: 6px 3px; }
table.poslog th{
font-size: 9px; letter-spacing: .1px; text-transform: none;
white-space: normal; word-break: break-word; line-height: 1.15;
vertical-align: bottom;
}
table.poslog td.num, table.poslog th.num{ text-align: center; }
table.poslog td:not(.num){ word-break: break-word; }
table.poslog .btn{ padding: 2px 5px; font-size: 10px; }
table.poslog td:first-child{ white-space: nowrap; }
/* Store/booth sales logs have 20+ columns — below desktop width they can
never fit, and cramming crushed cells to ~12px-wide letter-stacks.
Give the table a real width and let the panel scroll sideways instead;
cells stay on one line and headers wrap between words only. */
@media(max-width: 1024px){
#ps_table.poslog, #bp_table.poslog{ min-width: 640px; }
#ps_table.poslog td:not(.num), #bp_table.poslog td:not(.num){ word-break: normal; white-space: nowrap; }
#ps_table.poslog th, #bp_table.poslog th{ white-space: normal; word-break: normal; }
}
/* Expense log: auto layout sizes every column to its content (no overlap).
The checkbox column stays tiny because its input is pinned to 16px; the
wide free-text columns (category, description) are capped so the table
still fits; the date never wraps. */
#fi_table.poslog td:nth-child(2), #fi_table.poslog th:nth-child(2){ white-space: nowrap; }
#fi_table.poslog td:nth-child(6), #fi_table.poslog th:nth-child(6){ max-width: 90px; }
#fi_table.poslog td:nth-child(7), #fi_table.poslog th:nth-child(7){ max-width: 150px; }
#fi_table .fi-chk{ width: 1%; text-align: center; padding-left: 4px; padding-right: 4px; }
/* The global `input{width:100%}` rule would stretch the checkbox across the
row and over the date — pin it to its natural size. */
#fi_table .fi-chk input[type="checkbox"]{ cursor: pointer; margin: 0; width: 16px; min-width: 0; height: 16px; }
#fi_table tbody tr.row-selected{ background: rgba(99,102,241,0.12); }
tbody tr{
transition: var(--transition);
}
tbody tr:hover{
background: var(--panel2);
}
.empty{
color: var(--muted);
text-align: center;
padding: 36px;
font-style: italic;
}
.muted{ color: var(--muted); }
.pill{
font-size: 12px;
color: var(--muted);
background: var(--panel2);
padding: 4px 12px;
border-radius: 20px;
font-weight: 600;
line-height: 1.4;
}
.dot{
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
}
.st-ok{ background: var(--green); }
.st-warm{ background: var(--amber); }
.st-hot{ background: var(--red); }
.st-cold{ background: var(--blue); }
.st-na{ background: var(--naC); }
.badge{
display: inline-block;
padding: 3px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.b-ok{ background: rgba(16, 185, 129, 0.15); color: var(--greenT); }
.b-warm{ background: rgba(245, 158, 11, 0.15); color: var(--warmTxt); }
.b-hot{ background: rgba(239, 68, 68, 0.15); color: var(--redT); }
.b-cold{ background: rgba(59, 130, 246, 0.15); color: var(--blueT); }
.b-na{ background: var(--naBg); color: var(--muted); }
/* house cards */
.houses{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 18px;
}
.hcard{
background: linear-gradient(180deg, var(--grad1), var(--grad2));
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 20px;
cursor: pointer;
transition: var(--transition);
border-left: 5px solid var(--line);
box-shadow: var(--shadow);
}
.hcard:hover{
border-color: var(--accent);
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);
}
.hcard.s-hot{ border-left-color: var(--red); }
.hcard.s-warm{ border-left-color: var(--amber); }
.hcard.s-ok{ border-left-color: var(--green); }
.hcard.s-cold{ border-left-color: var(--blue); }
.hcard.s-na{ border-left-color: var(--naC); }
.hcard .hname{
font-size: 22px;
font-weight: 800;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.hcard .badge {
font-size: 13px;
padding: 4px 12px;
}
.hcard .meta{
color: var(--muted);
font-size: 14px;
margin-top: 6px;
font-weight: 500;
}
.hcard .grid2{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 16px;
}
.hcard .stat{
background: var(--panel2);
border-radius: 8px;
padding: 10px 12px;
transition: var(--transition);
}
.hcard:hover .stat{
background: var(--panel);
}
.hcard .stat .sk{
font-size: 12px;
color: var(--muted);
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.5px;
}
.hcard .stat .sv{
font-size: 21px;
font-weight: 800;
margin-top: 4px;
}
.alerts{
display: flex;
flex-direction: column;
gap: 10px;
}
.alert{
display: flex;
gap: 12px;
align-items: center;
padding: 12px 16px;
border-radius: 8px;
font-size: 13.5px;
background: var(--panel2);
border-left: 4px solid var(--amber);
box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.alert.hot{ border-left-color: var(--red); }
.alert.info{ border-left-color: var(--blue); }
.ok-note{
color: var(--muted);
font-size: 14px;
display: flex;
align-items: center;
gap: 10px;
padding: 16px;
font-style: italic;
}
.statbar{
display: flex;
height: 16px;
border-radius: 8px;
overflow: hidden;
margin: 8px 0 16px;
background: var(--panel2);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.statbar i{
display: block;
height: 100%;
transition: width 0.3s ease;
}
.statleg{
display: flex;
flex-direction: column;
gap: 10px;
}
.statleg .li{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13.5px;
}
.statleg .li .lbl{
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
}
.bars{
display: flex;
align-items: flex-end;
gap: 8px;
height: 190px;
margin-top: 12px;
padding-bottom: 20px;
}
.bar{
flex: 1;
background: var(--accent);
border-radius: 6px 6px 0 0;
min-height: 2px;
position: relative;
transition: height 0.5s ease-out, background var(--transition);
}
.bar:hover{
filter: brightness(1.1);
}
.bar.exp{ background: var(--barExp); }
.bar span{
position: absolute;
bottom: -20px;
left: 0;
right: 0;
text-align: center;
font-size: 10px;
color: var(--muted);
font-weight: 600;
}
.flex-between{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.legend{
display: flex;
gap: 16px;
font-size: 12px;
color: var(--muted);
margin-top: 24px;
font-weight: 600;
}
.legend i{
width: 12px;
height: 12px;
border-radius: 3px;
display: inline-block;
margin-right: 6px;
vertical-align: middle;
}
.mgrid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 14px;
}
.mstat{
background: var(--panel2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px 16px;
transition: var(--transition);
}
.mstat:hover{
background: var(--panel);
transform: translateY(-1px);
}
.mstat .mk{
font-size: 10px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .6px;
font-weight: 700;
}
.mstat .mv{
font-size: 20px;
font-weight: 800;
margin-top: 4px;
}
.mstat .mv.pos{ color: var(--greenT); }
.mstat .mv.neg{ color: var(--redT); }
.mstat .mv.acc{ color: var(--gold); }
.mstat .ms{
font-size: 11px;
color: var(--muted);
margin-top: 4px;
font-weight: 500;
}
.fin-table{
width: 100%;
border-collapse: collapse;
}
.fin-table td{
padding: 10px 12px;
border-bottom: 1px solid var(--line);
}
.fin-table .section{
font-weight: 800;
color: var(--gold);
}
.fin-table .section td{
padding-top: 20px;
border-bottom: none;
}
.fin-table .info td{
color: var(--muted);
font-size: 13px;
border-bottom: none;
padding: 4px 12px 4px 28px;
}
.fin-table .total{
font-weight: 700;
}
.fin-table .total td{
border-top: 2px solid var(--line);
padding-top: 12px;
padding-bottom: 12px;
}
.fin-table .grand{
font-weight: 800;
font-size: 16px;
}
.fin-table .grand td{
border-top: 2px solid var(--accent);
padding-top: 14px;
padding-bottom: 14px;
}
.overlay{
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: none;
align-items: center;
justify-content: center;
z-index: 50;
padding: 16px;
overflow: auto;
}
.overlay.show{
display: flex;
}
.modal{
background: var(--panel);
border: 1px solid var(--line);
border-radius: 16px;
max-width: 860px;
width: 100%;
max-height: calc(100vh - 32px);
overflow-y: auto;
box-sizing: border-box;
padding: 28px;
box-shadow: 0 20px 50px rgba(0,0,0,0.2);
animation: slideUp 0.2s ease-out;
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.modal h3{
font-size: 20px;
margin-bottom: 6px;
font-weight: 800;
}
.x{
cursor: pointer;
color: var(--muted);
font-size: 26px;
line-height: 1;
transition: var(--transition);
}
.x:hover{
color: var(--txt);
}
.subhead{
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .8px;
margin: 20px 0 10px;
font-weight: 700;
}
.cage-row{
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 10px 0;
border-bottom: 1px solid var(--line);
}
.cage-row .cn{
font-weight: 600;
min-width: 100px;
}
/* Scrollbar override */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg);
}
::-webkit-scrollbar-thumb {
background: var(--line);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--muted);
}
@media(max-width:640px){
.field input, .field select{
min-width: 0;
width: 100%;
}
main {
padding: 16px 12px;
}
header {
padding: 10px 14px;
}
nav {
padding: 8px 12px;
}
}
/* Tablet-only readability boost. Phones (≤640px) are excluded — the zoom
shrinks a phone's effective width to ~260px and breaks the layout; they
get the dedicated phone block at the end of this file instead. */
@media(min-width: 641px) and (max-width: 1024px){
body {
zoom: 1.25;
}
/* The desktop nav offset (top:66px) assumes a one-line header; at tablet
zoom the header is ~150px tall, so the scrolling nav pinned itself
UNDER the header and was covered. Let the header scroll away and pin
the nav to the very top instead. */
header {
position: static;
/* One long row overflowed the page ~100px at zoom 1.25 (the logout
button hung past the right edge and every screen scrolled sideways).
Let the header wrap onto a second row instead. */
flex-wrap: wrap;
row-gap: 8px;
padding: 12px 16px;
}
nav {
top: 0;
}
/* Panels may never widen the page: wide history/log tables scroll
sideways inside their own panel instead (same rules as the phone). */
.dash { min-width: 0; }
.dash > * { min-width: 0; }
.panel { max-width: 100%; overflow-x: auto; }
th {
font-size: 12px !important;
letter-spacing: .5px;
padding: 12px 10px !important;
}
td {
font-size: 14px !important;
padding: 12px 10px !important;
}
/* Keep the compact POS-log tables compact — the generic th/td boost
above would double their padding across 20+ columns. */
table.poslog th { font-size: 10px !important; padding: 6px 4px !important; }
table.poslog td { font-size: 12px !important; padding: 6px 4px !important; }
nav button {
font-size: 14px !important;
padding: 10px 15px !important;
}
.panel h3 {
font-size: 18px !important;
}
h2.title {
font-size: 26px !important;
}
p.lead {
font-size: 14px !important;
}
input, select, textarea {
font-size: 15px !important;
padding: 12px 14px !important;
}
.field label {
font-size: 12px !important;
}
.btn {
padding: 11px 18px !important;
font-size: 14px !important;
}
.kpi .kv {
font-size: 30px !important;
}
.kpi .kk {
font-size: 12px !important;
}
.sec-h {
font-size: 18px !important;
}
header h1 {
font-size: 22px !important;
}
header .sub {
font-size: 14px !important;
}
header .logo {
height: 44px !important;
width: 44px !important;
}
}
/* Login screen — static CSS background (no video/image download, paints instantly).
Shown by DEFAULT so a logged-out refresh never flashes the app behind it; the
inline script adds .authed when a token exists, and auth.js takes over
from there with inline display styles. */
#loginScreen {
display: flex;
background:
radial-gradient(900px 600px at 12% -8%, rgba(132, 204, 22, 0.22), transparent 60%),
radial-gradient(760px 520px at 108% 12%, rgba(234, 179, 8, 0.16), transparent 55%),
radial-gradient(820px 700px at 50% 118%, rgba(34, 197, 94, 0.18), transparent 62%),
linear-gradient(160deg, #0e2415 0%, #143421 48%, #0a1c10 100%);
}
.authed #loginScreen {
display: none;
}
.login-card {
background: #fdfdfa;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 24px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.25);
}
/* Sub-tab pills styles */
.sub-tab-bar {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.sub-tab-btn {
background: var(--panel2);
color: var(--txt);
border: 1px solid var(--line);
padding: 8px 16px;
border-radius: var(--radius);
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.sub-tab-btn:hover {
background: var(--line);
}
.sub-tab-btn.active {
background: var(--accent);
color: var(--accentTxt);
border-color: var(--accent);
}
/* Redesigned Finance (Income & Expense) styles */
.finance-toolbar {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 12px;
width: 100%;
}
.finance-search-wrapper {
position: relative;
flex: 1;
min-width: 260px;
}
.finance-search-wrapper input {
width: 100%;
padding: 8px 12px 8px 36px;
font-size: 13px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg);
color: var(--txt);
height: 38px;
transition: var(--transition);
}
.finance-search-wrapper input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(220, 161, 0, 0.15);
}
.finance-search-wrapper svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
fill: var(--muted);
pointer-events: none;
}
.finance-dropdown {
position: relative;
display: inline-block;
}
.finance-dropdown-btn {
display: flex;
align-items: center;
gap: 6px;
height: 38px;
padding: 0 16px;
background: var(--panel2);
color: var(--txt);
border: 1px solid var(--line);
border-radius: var(--radius);
font-weight: 600;
cursor: pointer;
font-size: 13px;
transition: var(--transition);
}
.finance-dropdown-btn:hover {
background: var(--line);
}
.finance-dropdown-content {
display: none;
position: absolute;
right: 0;
top: calc(100% + 4px);
background: var(--panel);
min-width: 220px;
box-shadow: var(--shadow);
border: 1px solid var(--line);
border-radius: var(--radius);
z-index: 100;
overflow: hidden;
padding: 4px 0;
}
.finance-dropdown.active .finance-dropdown-content {
display: block;
}
.finance-dropdown-content button, .finance-dropdown-content a {
width: 100%;
padding: 10px 16px;
text-align: left;
background: none;
border: none;
color: var(--txt);
font-size: 13px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: var(--transition);
}
.finance-dropdown-content button:hover, .finance-dropdown-content a:hover {
background: var(--panel2);
}
.filter-row-container {
background: var(--panel2);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 12px;
margin-bottom: 20px;
width: 100%;
}
.filter-pills-container {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.filter-pill {
display: flex;
align-items: center;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 20px;
padding: 4px 12px;
font-size: 12px;
font-weight: 500;
height: 28px;
color: var(--txt);
position: relative;
cursor: pointer;
transition: var(--transition);
}
.filter-pill:hover {
border-color: var(--accent);
}
.filter-pill select {
position: absolute;
inset: 0;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.filter-pill .pill-label {
color: var(--muted);
margin-right: 4px;
}
.filter-pill .pill-value {
font-weight: 600;
}
.filter-pill::after {
content: "▾";
margin-left: 6px;
color: var(--muted);
font-size: 10px;
}
/* Date-control pills (month/year/day/range pickers revealed by the Period filter).
They hold real s, so drop the dropdown caret and the fixed pill height,
and stop the global input{width:100%} rule from stretching the pickers. */
.filter-pill.date-ctrl {
height: auto;
cursor: default;
gap: 4px;
}
.filter-pill.date-ctrl::after { content: none; }
.filter-pill.date-ctrl input,
.filter-pill.date-ctrl select {
width: auto;
min-width: 0;
padding: 2px 6px;
font-size: 12px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--bg);
color: var(--txt);
}
/* The generic .filter-pill select is an invisible full-size overlay (for the
pill dropdowns). The By-Month picker is a real visible