:root{--bg:#f5f6f8;--surface:#fff;--surface-2:#f8fafc;--primary:#2563eb;--primary-hover:#1d4ed8;--primary-soft:#eff6ff;--success:#15803d;--success-soft:#ecfdf3;--warning:#b45309;--warning-soft:#fffaeb;--danger:#dc2626;--danger-soft:#fef3f2;--purple:#7c3aed;--purple-soft:#f5f3ff;--border:#e4e7ec;--text:#172033;--muted:#667085;--muted-2:#98a2b3;--shadow:0 2px 10px rgba(15,23,42,.035);--radius:12px}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text);font:500 14px/1.5 Inter,"Segoe UI",Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.lucide{display:block;width:18px;height:18px}.value,.num{font-variant-numeric:tabular-nums}
.sidebar{position:fixed;inset:0 auto 0 0;z-index:20;width:252px;padding:16px 12px 12px;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border);box-shadow:2px 0 8px rgba(15,23,42,.025)}.brand{display:flex;align-items:center;gap:11px;padding:2px 8px 14px}.brand>span,.login-logo{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:10px;color:#fff;background:var(--primary);font-size:21px;font-weight:800}.brand b{display:block;font-size:18px;line-height:1.15}.brand small,.company span{display:block;margin-top:2px;color:var(--muted);font-size:11px}.company{position:relative;margin-bottom:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}.company:after{content:'⌄';position:absolute;right:11px;top:18px;color:var(--muted-2)}.company small{color:var(--muted-2);font-size:9px;font-weight:700;letter-spacing:.1em}.company b{display:block;max-width:185px;margin:3px 18px 2px 0;font-size:12px;line-height:1.35}.sidebar nav{flex:1;min-height:0;overflow:auto;padding-right:2px;scrollbar-width:thin}.nav-group-toggle{width:100%;height:30px;padding:0 9px;display:flex;align-items:center;justify-content:space-between;border:0;color:#7b8494;background:transparent;font-size:9px;font-weight:700;letter-spacing:.13em;text-align:left}.chevron{transition:transform .16s}.nav-group-toggle[aria-expanded=false] .chevron{transform:rotate(-90deg)}.nav-group-items{display:grid}.nav-group-items.collapsed{display:none}.nav-btn,.side-foot button{width:100%;border:0;color:#344054;background:transparent}.nav-btn{height:42px;padding:0 10px;display:flex;align-items:center;gap:10px;border-radius:8px;text-align:left;font-size:13px;transition:.16s}.nav-btn>span{width:26px;height:26px;display:grid;place-items:center;color:var(--muted)}.nav-btn:hover{color:var(--primary-hover);background:var(--surface-2)}.nav-btn.active{color:var(--primary-hover);font-weight:650;background:var(--primary-soft);box-shadow:inset 3px 0 var(--primary)}.nav-btn.active>span{color:var(--primary)}.side-foot{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;padding-top:8px;border-top:1px solid var(--border)}.side-foot button{min-height:34px;border-radius:7px;color:var(--muted);font-size:10px}.side-foot button:hover{color:var(--primary);background:var(--surface-2)}
main{min-height:100vh;margin-left:252px}.topbar{position:sticky;top:0;z-index:15;height:70px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.96)}.eyebrow{margin:0 0 2px;color:var(--muted-2);font-size:9px;font-weight:700;letter-spacing:.14em}.topbar h1{margin:0;font-size:27px;line-height:1.1;letter-spacing:-.025em}.top-actions{display:flex;align-items:center;gap:8px}.period,.icon-btn,.user-chip{height:38px;border:1px solid var(--border);border-radius:9px;color:var(--text);background:var(--surface)}.period{padding:0 12px;font-weight:650;white-space:nowrap}.icon-btn{position:relative;width:38px;display:grid;place-items:center}.icon-btn i{position:absolute;top:-6px;right:-5px;min-width:17px;padding:1px 4px;border-radius:20px;color:#fff;background:var(--danger);font-size:9px;font-style:normal}.cloud-status{position:relative;padding-left:12px;color:var(--success);font-size:10px;white-space:nowrap}.cloud-status:before{content:'';position:absolute;left:0;top:4px;width:7px;height:7px;border-radius:50%;background:var(--success)}.cloud-status.error{color:var(--warning)}.user-chip{padding:4px 8px;display:flex;align-items:center;gap:8px}.user-chip b,.user-chip small{display:block;font-size:10px}.user-chip small{color:var(--muted)}.user-chip button{border:0;color:var(--danger);background:transparent;font-size:10px}.avatar{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:50%;color:var(--primary);background:var(--primary-soft);font-weight:750}.mobile-menu{display:none;border:0;background:transparent;color:var(--text)}
.content{width:100%;max-width:1800px;padding:24px 28px 48px;animation:pageIn .18s ease both}@keyframes pageIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}.welcome{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}.welcome h2{margin:0;font-size:21px;line-height:1.25;letter-spacing:-.02em}.welcome p{margin:4px 0 0;color:var(--muted);font-size:13px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.section-title h3{margin:0;font-size:16px}.section-title small{color:var(--muted)}.section-title a{color:var(--primary);font-size:12px;cursor:pointer}
.card{min-width:0;padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);transition:transform .16s,border-color .16s,box-shadow .16s}.card:hover{transform:translateY(-1px);border-color:#d5dae2;box-shadow:0 4px 14px rgba(15,23,42,.05)}.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:stretch;gap:12px}.kpi{height:124px;display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:38px auto auto;column-gap:11px;align-content:center;overflow:hidden}.kpi-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;color:var(--primary);background:var(--primary-soft)}.kpi-icon.tone-1{color:var(--success);background:var(--success-soft)}.kpi-icon.tone-2{color:var(--warning);background:var(--warning-soft)}.kpi-icon.tone-3{color:var(--purple);background:var(--purple-soft)}.kpi-icon.tone-4{color:var(--primary);background:#e7f3ff}.kpi .label{align-self:center;min-width:0;color:var(--muted);font-size:12px;font-weight:600;line-height:1.3}.kpi .label span{display:none}.kpi .value{grid-column:1/3;min-width:0;margin:8px 0 2px;font-size:clamp(21px,1.65vw,27px);line-height:1.05;font-weight:700;letter-spacing:-.035em;white-space:nowrap}.kpi.negative .value{color:#b42318}.trend{grid-column:1/3;color:var(--success);font-size:10px}.trend.warn{color:var(--warning)}.grid-2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;margin-top:16px}.report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-auto-rows:1fr;gap:14px}.report-card{height:100%;min-height:210px;display:flex;flex-direction:column}.report-card .icon{width:40px;height:40px;display:grid;place-items:center;border-radius:9px;color:var(--primary);background:var(--primary-soft)}.report-card h3{margin:11px 0 4px;font-size:15px}.report-card p{flex:1;margin:0 0 11px;color:var(--muted);font-size:12px}.pos-layout{grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}.pos-layout>.card{position:sticky;top:86px;align-self:start}.pos-layout .report-card{min-height:190px;cursor:pointer}.product-image{width:100%;height:84px;object-fit:cover;border-radius:9px;margin-bottom:9px}.product-placeholder{display:grid;place-items:center;color:var(--primary);background:var(--primary-soft)}
.btn{min-height:38px;padding:0 14px;border:1px solid var(--primary);border-radius:8px;color:#fff;background:var(--primary);font-size:13px;font-weight:700;white-space:nowrap;transition:background .16s,transform .16s}.btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.btn:active{transform:none}.btn.small{min-height:32px;padding:0 10px;font-size:11px}.btn.secondary{color:var(--primary);border-color:#cbdcf8;background:#fff}.btn.secondary:hover{background:var(--primary-soft)}.btn.success{border-color:var(--success);background:var(--success)}.btn.danger{color:var(--danger);border-color:#f4b8b4;background:#fff}.btn.danger:hover{background:var(--danger-soft)}
.table-card{margin-top:16px;padding:0;overflow:hidden}.toolbar{min-height:56px;padding:9px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border);background:var(--surface)}.toolbar b{font-size:14px}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:8px}.table-wrap{width:100%;overflow:auto;scrollbar-color:#cbd5e1 transparent}table{width:100%;min-width:850px;border-collapse:collapse}th{position:sticky;top:0;z-index:1;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted);background:var(--surface-2);text-align:left;font-size:10px;font-weight:700;letter-spacing:.05em;white-space:nowrap}td{height:52px;padding:10px 14px;border-bottom:1px solid #edf0f3;font-size:13px;vertical-align:middle}tbody tr{transition:background .15s}tbody tr:hover{background:#f9fbff}tbody tr:last-child td{border-bottom:0}.num{text-align:right}.income{color:var(--success);font-weight:700}.expense{color:var(--danger);font-weight:700}.badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:999px;color:#475467;background:#f2f4f7;font-size:10px;font-weight:700;white-space:nowrap}.badge.ok{color:var(--success);background:var(--success-soft)}.badge.warn{color:var(--warning);background:var(--warning-soft)}.badge.red{color:var(--danger);background:var(--danger-soft)}
.chart{height:190px;padding:10px 4px 0;display:flex;align-items:flex-end;gap:14px;border-bottom:1px solid var(--border)}.bar-group{position:relative;height:100%;flex:1;display:flex;align-items:flex-end;gap:4px}.bar{width:50%;min-height:4px;border-radius:4px 4px 0 0;background:var(--primary)}.bar.out{background:#f19a9f}.bar-group label{position:absolute;bottom:-23px;left:10%;color:var(--muted);font-size:9px}.legend{margin-top:29px;display:flex;gap:14px;color:var(--muted);font-size:10px}.legend i{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:2px;background:var(--primary)}.legend i.out{background:#f19a9f}.alerts{display:grid;gap:8px}.alert{padding:11px 12px;display:flex;align-items:flex-start;gap:10px;border:1px solid var(--border);border-left:3px solid var(--warning);border-radius:9px;background:var(--surface)}.alert.red{border-left-color:var(--danger);background:var(--danger-soft)}.alert.green{border-left-color:var(--success);background:var(--surface)}.alert b{display:block;font-size:12px}.alert small{display:block;margin-top:1px;color:var(--muted);font-size:11px}.alert button{margin-left:auto;align-self:center}
.search,.field,select{min-height:38px;padding:0 11px;border:1px solid #d0d5dd;border-radius:8px;outline:none;color:var(--text);background:#fff;font-size:13px;transition:.16s}.search{min-width:220px}.search:focus,.field:focus,select:focus{border-color:#84adf8;box-shadow:0 0 0 3px #dbeafe}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.form-field label{display:block;margin-bottom:6px;color:var(--muted);font-size:11px;font-weight:650}.form-field input,.form-field select{width:100%}.switch{display:inline-flex;align-items:center;gap:8px}.switch input{accent-color:var(--success)}.upload{padding:22px;border:1px dashed #b9c5d3;border-radius:10px;background:var(--surface-2);text-align:center}.upload.drag{border-color:var(--primary);background:var(--primary-soft)}.upload input{display:none}.upload .big{font-size:26px}.upload h3{margin:6px}.upload p{color:var(--muted)}.steps{display:flex;gap:5px;margin:14px 0}.step{height:5px;flex:1;border-radius:5px;background:#dfe3e8}.step.done{background:var(--success)}.step.active{background:var(--primary)}.status-line{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--success);font-size:11px}.dot{width:7px;height:7px;border-radius:50%;background:var(--success)}.empty{padding:32px 18px;color:var(--muted);text-align:center}
.doc-filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}.doc-filter{padding:7px 11px;border:1px solid var(--border);border-radius:8px;color:var(--muted);background:#fff}.doc-filter.active,.doc-filter:hover{color:var(--primary);border-color:#b8d0f7;background:var(--primary-soft)}.document-card{position:relative;min-height:210px}.doc-group{position:absolute;top:12px;right:12px;padding:4px 7px;border-radius:7px;color:var(--muted);background:#f2f4f7;font-size:9px}.doc-actions{display:flex;gap:7px;margin-top:auto}.doc-actions .btn{flex:1}
.modal{position:fixed;inset:0;z-index:50;padding:18px;display:grid;place-items:center;background:rgba(15,23,42,.5)}.modal-box{width:min(760px,100%);max-height:90vh;overflow:auto;padding:20px;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:0 18px 50px rgba(15,23,42,.18)}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.modal-head h2{margin:0;font-size:20px}.close{width:34px;height:34px;border:0;border-radius:7px;color:var(--muted);background:var(--surface-2);font-size:21px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.toast{position:fixed;right:20px;bottom:20px;z-index:70;padding:11px 14px;border-radius:9px;color:#fff;background:#172033;opacity:0;transform:translateY(70px);transition:.18s}.toast.show{opacity:1;transform:none}
.login-screen{position:fixed;inset:0;z-index:1000;padding:20px;display:grid;place-items:center;background:var(--bg)}.login-card{width:min(400px,100%);padding:26px;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:0 12px 35px rgba(15,23,42,.08)}.login-logo{margin:auto}.login-card h1{margin:14px 0 4px;text-align:center}.login-card>p{text-align:center;color:var(--muted)}.login-card label{display:block;margin:12px 0 5px;color:var(--muted);font-size:11px}.login-card input{width:100%;height:38px;padding:0 11px;border:1px solid var(--border);border-radius:8px}.login-card .login-btn{width:100%;margin-top:10px}.login-card>small{display:block;margin-top:14px;color:var(--muted-2);text-align:center}.login-message{min-height:18px;color:var(--success);font-size:11px}.login-message.error{color:var(--danger)}
.confirm-dialog{width:min(440px,100%);padding:22px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 18px 50px rgba(15,23,42,.18)}.confirm-dialog h2{margin:0 0 7px;font-size:19px}.confirm-dialog p{margin:0;color:var(--muted);line-height:1.55}.loading-state,.error-state{min-height:150px;display:grid;place-content:center;justify-items:center;gap:10px;color:var(--muted);text-align:center}.loading-state i{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .75s linear infinite}.error-state svg{width:28px;height:28px;color:var(--danger)}@keyframes spin{to{transform:rotate(1turn)}}
:focus-visible{outline:3px solid rgba(37,99,235,.28);outline-offset:2px}body.dark{--bg:#101828;--surface:#182230;--surface-2:#1d2939;--border:#344054;--text:#f2f4f7;--muted:#98a2b3;--muted-2:#667085;--primary-soft:#1e3a5f;--success-soft:#153d2c;--warning-soft:#432f14;--danger-soft:#4a2020}body.dark .topbar,body.dark .sidebar,body.dark .card,body.dark .toolbar,body.dark .modal-box,body.dark .btn.secondary,body.dark .period,body.dark .icon-btn,body.dark .user-chip,body.dark input,body.dark select{color:var(--text);border-color:var(--border);background:var(--surface)}body.dark th,body.dark .company{background:var(--surface-2)}body.dark .nav-btn{color:#d0d5dd}body.dark .nav-btn:hover,body.dark .nav-btn.active,body.dark tbody tr:hover{background:var(--primary-soft)}body.dark td{border-color:var(--border)}
@media(max-width:1100px){.sidebar{width:min(280px,88vw);transform:translateX(-102%);transition:transform .18s}.sidebar.open{transform:none}main{margin-left:0}.mobile-menu{display:grid;place-items:center}.topbar{padding:0 18px}.user-chip,.cloud-status{display:none}.content{padding:20px 18px 42px}.grid-2{grid-template-columns:1fr}.pos-layout>.card{position:static}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.topbar{height:64px;padding:0 12px}.topbar h1{font-size:20px}.period{display:none}.content{padding:16px 12px 36px}.welcome{align-items:flex-start;flex-direction:column}.welcome h2{font-size:19px}.kpis,.form-grid,.report-grid{grid-template-columns:1fr}.kpi{height:110px}.toolbar{align-items:stretch;flex-direction:column}.toolbar-left,.toolbar-right{flex-wrap:wrap}.search{min-width:0;width:100%}.card{padding:15px}.table-card{padding:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
.sidebar{width:216px;padding:12px 10px 10px;transition:width .18s,transform .18s}.brand{position:relative}.sidebar-collapse{position:absolute;right:0;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:6px;color:var(--muted);background:transparent}.sidebar-collapse:hover{color:var(--primary);background:var(--primary-soft)}.sidebar-collapse .lucide{width:16px}.company{padding:8px 10px}.nav-btn{height:40px}.nav-btn em{overflow:hidden;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.side-foot{grid-template-columns:repeat(3,1fr)}main{min-width:0;margin-left:216px;transition:margin-left .18s}.topbar{height:68px}.content{min-width:0;padding:20px 22px 42px}.page-toolbar{min-height:38px;margin-bottom:14px}.page-toolbar>div{min-width:0}.page-toolbar p{margin:0}.sidebar-collapsed .sidebar{width:68px;padding-inline:8px}.sidebar-collapsed main{margin-left:68px}.sidebar-collapsed .brand{justify-content:center}.sidebar-collapsed .brand>div,.sidebar-collapsed .company,.sidebar-collapsed .nav-group-toggle span:first-child,.sidebar-collapsed .nav-group-toggle .chevron,.sidebar-collapsed .nav-btn em,.sidebar-collapsed .side-foot button:not(#themeToggle){display:none}.sidebar-collapsed .sidebar-collapse{right:-1px;bottom:-24px}.sidebar-collapsed .nav-group-toggle{height:14px;padding:0}.sidebar-collapsed .nav-btn{justify-content:center;padding:0}.sidebar-collapsed .nav-btn>span{width:32px}.sidebar-collapsed .side-foot{grid-template-columns:1fr}.sidebar-collapsed #themeToggle{font-size:0}.sidebar-collapsed #themeToggle:after{content:'◐';font-size:15px}
html,body{max-width:100%}.content>*{min-width:0}.journal-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.journal-summary .kpi{height:106px}.journal-workspace{margin-top:14px}.journal-mode{display:flex;gap:5px;padding:10px 14px 0}.chip{min-height:32px;padding:0 11px;border:1px solid var(--border);border-radius:7px;color:var(--muted);background:var(--surface)}.chip.active{color:var(--primary);border-color:#bfd2f5;background:var(--primary-soft)}.journal-filters{position:sticky;top:68px;z-index:4;flex-wrap:wrap}.journal-filters .toolbar-left{min-width:0;flex:1;flex-wrap:wrap}.journal-filters .search{flex:1}.date-filter{width:140px}.journal-group-head{padding:9px 14px;display:flex;justify-content:space-between;color:var(--muted);background:#fbfcfe;border-bottom:1px solid var(--border);font-size:11px}.pagination{min-height:52px;padding:8px 14px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);color:var(--muted);font-size:11px}.pagination>div{display:flex;align-items:center;gap:7px}.pagination select{min-height:32px}.compact-table{min-width:0;table-layout:fixed}.compact-table th,.compact-table td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compact-table th:first-child,.compact-table td:first-child{width:104px;white-space:nowrap}.compact-table .num{white-space:nowrap}.compact-table .action-col{width:58px;text-align:center}.more-btn{width:30px;height:30px;border:0;border-radius:6px;color:var(--muted);background:transparent;font-weight:800}.more-btn:hover{color:var(--primary);background:var(--primary-soft)}.detail-drawer{position:fixed;inset:0 0 0 auto;z-index:60;width:min(420px,92vw);padding:20px;background:var(--surface);border-left:1px solid var(--border);box-shadow:-14px 0 40px rgba(15,23,42,.12);animation:drawerIn .18s ease}.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--border)}.drawer-head h2{margin:0;font-size:20px}.detail-drawer dl{margin:0}.detail-drawer dl div{padding:12px 0;display:grid;grid-template-columns:135px minmax(0,1fr);gap:14px;border-bottom:1px solid #edf0f3}.detail-drawer dt{color:var(--muted);font-size:11px}.detail-drawer dd{min-width:0;margin:0;overflow-wrap:anywhere}.drawer-actions{position:absolute;right:20px;bottom:20px;left:20px;display:flex;justify-content:flex-end;gap:7px;padding-top:14px;background:var(--surface)}@keyframes drawerIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:1366px){.content{padding:18px}.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:minmax(0,1fr)}.journal-filters .toolbar-right{width:100%;justify-content:flex-end}.compact-table th:nth-child(4),.compact-table td:nth-child(4){display:none}.journal-table th:nth-child(5),.journal-table td:nth-child(5){display:none}.pos-layout{grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr)}}
@media(max-width:900px){.sidebar{width:min(280px,88vw)}.sidebar-collapsed .sidebar{width:min(280px,88vw)}.sidebar-collapsed main{margin-left:0}.journal-summary{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-table th:nth-child(3),.compact-table td:nth-child(3),.compact-table th:nth-child(4),.compact-table td:nth-child(4){display:none}.pos-layout{grid-template-columns:1fr}.pos-order-panel{position:static!important}.journal-filters .date-filter,.journal-filters select{display:none}}
.responsive-table{min-width:0;table-layout:fixed}.responsive-table .column-detail-only{display:none}.responsive-table th,.responsive-table td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.responsive-table th:first-child,.responsive-table td:first-child{position:sticky;left:0;z-index:2;background:var(--surface)}.responsive-table thead th:first-child{background:var(--surface-2)}.responsive-table .delete-col,.responsive-table .action-col{position:sticky;right:0;z-index:2;background:var(--surface)}.detail-row{cursor:pointer}.detail-row:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
:root{--bg:#f6f9fc;--surface:#fff;--surface-2:#f8fafc;--primary:#1677ff;--primary-hover:#0969da;--primary-soft:#eaf3ff;--success:#12b76a;--success-soft:#ecfdf3;--warning:#f79009;--warning-soft:#fff7e8;--danger:#f04438;--danger-soft:#fff1f0;--purple:#8b5cf6;--purple-soft:#f4f0ff;--border:#e5eaf1;--text:#172033;--muted:#667085;--muted-2:#98a2b3;--shadow:0 4px 18px rgba(16,24,40,.045);--radius:12px}
.sidebar{width:264px;padding:18px 14px 12px;background:#fff;box-shadow:none}.brand{padding:2px 10px 18px}.brand>span{width:48px;height:48px;flex-basis:48px;border-radius:12px;font-size:24px;box-shadow:0 8px 20px rgba(22,119,255,.18)}.brand b{font-size:19px}.brand small{font-size:11px}.company{min-height:82px;margin-bottom:16px;padding:14px 15px;border-color:#d8e6f7;border-radius:14px;background:#f7fbff}.company small{color:#5884ba}.company b{max-width:205px;font-size:13px}.nav-group-toggle{height:28px;padding:0 12px;color:#7890ac;font-size:9px}.nav-btn{height:40px;padding:0 12px;border-radius:9px;color:#344054}.nav-btn>span{color:#1677ff}.nav-btn.active{color:#0969da;background:#eaf3ff;box-shadow:inset 2px 0 #1677ff}.side-foot{grid-template-columns:repeat(3,1fr);gap:6px}.side-foot button{min-height:38px;border:1px solid var(--border);background:#fff}main{margin-left:264px}.topbar{height:74px;padding:0 26px;background:#fff}.topbar h1{font-size:27px}.period,.icon-btn,.user-chip{height:40px;border-radius:10px}.content{max-width:none;padding:24px 26px 32px;background:var(--bg)}.card{padding:19px;border-radius:12px;border-color:var(--border);box-shadow:var(--shadow)}.card:hover{transform:none;border-color:#dbe3ed;box-shadow:0 6px 22px rgba(16,24,40,.06)}.page-toolbar{margin-bottom:16px}.section-heading{margin:20px 0 14px;display:flex;align-items:center;justify-content:space-between;gap:16px}.section-heading h2{margin:0;font-size:20px;letter-spacing:-.02em}.section-heading p{margin:3px 0 0;color:var(--muted);font-size:13px}.section-title h3{font-size:17px}.btn{min-height:40px;border-radius:9px;background:#1677ff}.btn.small{min-height:34px}.badge{padding:4px 9px;font-weight:600}.kpis{gap:14px}.kpi{height:108px;padding:17px;grid-template-columns:42px minmax(0,1fr);grid-template-rows:42px auto auto}.kpi-icon{width:42px;height:42px;border-radius:11px}.kpi .value{margin-top:7px;font-size:clamp(20px,1.45vw,25px)}.grid-2{grid-template-columns:minmax(0,1.8fr) minmax(310px,1fr);gap:16px}.chart-card,.grid-2>section.card{height:100%}.table-card{border-radius:12px}.toolbar{min-height:54px}.table-wrap table{font-size:13px}th{height:42px;padding:8px 13px;color:#75839a;font-size:9.5px}td{height:52px;padding:9px 13px}.alert{border-color:#e6ecf2;border-left-width:1px;background:#fff}.alert.green{border-color:#cceedd;background:#fbfffd}.report-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.document-card{min-height:230px;padding:20px;display:flex;flex-direction:column}.document-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--primary);background:var(--primary-soft)}.document-category{margin-top:14px;color:var(--muted)}.document-card h3{margin:5px 0;font-size:16px}.document-card p{flex:1;margin:0;color:var(--muted)}.document-card footer{display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.summary-strip{min-height:96px;padding:15px 18px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:var(--shadow)}.summary-item{min-width:0;padding:0 16px;display:flex;align-items:center;gap:12px;border-right:1px solid var(--border)}.summary-item:first-child{padding-left:4px}.summary-item:last-child{border-right:0}.summary-icon{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:10px;color:var(--primary);background:var(--primary-soft)}.summary-icon.tone-1{color:var(--success);background:var(--success-soft)}.summary-icon.tone-2{color:var(--warning);background:var(--warning-soft)}.summary-icon.tone-3{color:var(--purple);background:var(--purple-soft)}.summary-item b,.summary-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.summary-item b{font-size:14px}.summary-item small{margin-top:2px;color:var(--muted);font-size:10px}.payroll-table-card{padding:0;overflow:hidden}.payroll-person{min-height:56px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.payroll-person b{font-size:15px}.payroll-bottom{margin-top:16px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:16px}.panel{min-height:176px}.formula-panel p{margin:0 0 14px}.control-panel .alert{margin-top:8px;padding:16px}.payroll-table{min-width:0}.payroll-table th:nth-child(2),.payroll-table td:nth-child(2){min-width:120px}.product-card{min-height:176px;padding:12px;display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;cursor:pointer}.product-card .product-image,.product-card .product-placeholder{width:88px;height:88px;margin:0}.product-card h3{margin:3px 0;font-size:14px}.product-card p,.product-card small{color:var(--muted);font-size:11px}.pos-layout{grid-template-columns:minmax(0,1fr) 350px}.pos-layout .report-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.pos-layout .report-card{min-height:178px;padding:13px}.pos-order-panel,.order-panel{position:sticky;top:92px}.modal-box{border-radius:12px}.detail-drawer{width:min(460px,92vw)}
@media(min-width:1101px){.kpis{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1440px){.sidebar{width:248px}main{margin-left:248px}.content{padding:20px}.summary-item{padding-inline:10px;gap:8px}.summary-icon{width:32px;height:32px;flex-basis:32px}.pos-layout .report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1100px){.sidebar{width:min(280px,88vw)}main{margin-left:0}.summary-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.summary-item{border-right:0}.grid-2,.payroll-bottom{grid-template-columns:1fr}.report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.report-grid,.pos-layout .report-grid{grid-template-columns:1fr}.section-heading{align-items:flex-start;flex-direction:column}.payroll-person{align-items:flex-start;flex-direction:column;justify-content:center;gap:4px}}
.payroll-table th:nth-child(1),.payroll-table td:nth-child(1){width:8%}.payroll-table th:nth-child(2),.payroll-table td:nth-child(2){width:15%}.payroll-table th:nth-child(3),.payroll-table td:nth-child(3){width:10%}.payroll-table th:nth-child(4),.payroll-table td:nth-child(4){width:11%}.payroll-table th:nth-child(5),.payroll-table td:nth-child(5){width:13%}.payroll-table th:nth-child(6),.payroll-table td:nth-child(6){width:9%}.payroll-table th:nth-child(7),.payroll-table td:nth-child(7){width:11%}.payroll-table th:nth-child(8),.payroll-table td:nth-child(8){width:19%;white-space:nowrap}.payroll-table th:nth-child(9),.payroll-table td:nth-child(9){width:4%}.payroll-table td:nth-child(8) .btn{margin-left:5px}.document-card footer .badge{margin-right:auto}.document-card footer .btn{flex:0 0 auto}.sidebar-collapsed .sidebar{width:68px}.sidebar-collapsed main{margin-left:68px}
@media(min-width:1101px){.sidebar{width:264px}main{margin-left:264px}.pos-layout .report-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pos-layout .report-card{min-height:132px;padding:12px;display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:11px;align-items:start}.pos-layout .report-card .product-image,.pos-layout .report-card .product-placeholder{grid-column:1;grid-row:1/5;width:88px;height:88px;margin:0;align-self:center}.pos-layout .report-card>.badge,.pos-layout .report-card>h3,.pos-layout .report-card>.value,.pos-layout .report-card>small{grid-column:2}.pos-layout .report-card>.badge{justify-self:start}.pos-layout .report-card>h3{margin:3px 0 0}.pos-layout .report-card>.value{font-size:17px!important}.pos-layout .report-card>small{font-size:9px;line-height:1.35}}
.document-card footer{flex-wrap:wrap}.document-card footer .badge{width:100%;margin-right:0;justify-content:flex-start}

.payroll-table-card{margin-top:18px}

/* Sidebar contrast — soft blue-gray surface separated from the workspace */
.sidebar{
  background:linear-gradient(180deg,#dfeaf6 0%,#d8e5f2 55%,#d2e0ee 100%);
  border-right:1px solid #b7c9dc;
  box-shadow:10px 0 32px rgba(30,64,110,.12);
}

/* Breaktime compact app */
:root{--bt-navy:#13233d;--bt-navy-2:#1d3557;--bt-cyan:#37b6c9;--bt-cream:#f4f7fb}
.sidebar{background:linear-gradient(180deg,var(--bt-navy) 0%,#172c49 55%,#203b5d 100%);border-right:1px solid #294564;box-shadow:12px 0 35px rgba(15,35,60,.16);color:#eaf4ff}
.sidebar .brand b,.sidebar .company b,.sidebar .nav-btn em{color:#f8fbff}.sidebar .brand small,.sidebar .company span,.sidebar .company small,.sidebar .nav-group-toggle{color:#a9c0d8}.sidebar .brand>span{background:linear-gradient(145deg,#29a7bd,#4c7cf1);box-shadow:0 12px 26px rgba(41,167,189,.28)}
.sidebar .company{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13);box-shadow:none}.sidebar .nav-btn{color:#d5e2f0}.sidebar .nav-btn:hover{background:rgba(255,255,255,.08)}.sidebar .nav-btn.active{background:#fff;color:#15345a;box-shadow:0 10px 24px rgba(4,20,40,.2)}.sidebar .nav-btn.active em{color:#15345a}.sidebar .nav-btn svg{color:#65d2df}.sidebar .side-foot{border-color:rgba(255,255,255,.12)}.sidebar .side-foot button{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#dce9f5}
body{background:#eef3f8}#app{background:linear-gradient(145deg,#f4f7fb 0%,#edf3f9 100%)}.topbar{background:rgba(250,252,255,.9);border-bottom-color:#dce5ef}
.breaktime-kpis,.finance-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.finance-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.breaktime-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:20px 0}.quick-action{appearance:none;text-align:left;border:1px solid #dbe5ef;border-radius:20px;background:#fff;padding:22px;display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:center;box-shadow:0 12px 30px rgba(24,50,80,.07);cursor:pointer;transition:.22s}.quick-action:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(24,50,80,.12)}.quick-action svg{grid-row:1/3;width:26px;height:26px;padding:11px;border-radius:15px;background:#e8f3ff;color:#2475e8}.quick-action b{font-size:17px;color:#13233d}.quick-action small{color:#718096}.quick-action.sale svg{background:#e6f8f3;color:#0b9a70}.quick-action.report svg{background:#f0eaff;color:#7d4dde}
.purchase-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.purchase-summary span{display:flex;flex-direction:column;background:#fff;border:1px solid #dce6f0;border-radius:16px;padding:16px 20px}.purchase-summary b{font-size:22px;color:#13233d}.purchase-summary small{color:#718096;margin-top:4px}.purchase-list{padding:0;overflow:hidden}.purchase-list .toolbar{padding:20px 22px;border-bottom:1px solid #e6edf4}.purchase-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:15px;padding:17px 22px;border-bottom:1px solid #e9eff5;cursor:pointer;transition:.18s}.purchase-row:hover{background:#f7fbff}.purchase-row.done{background:#edf9f5}.purchase-row input{width:20px;height:20px;accent-color:#10b981}.purchase-row span{display:flex;flex-direction:column;gap:4px}.purchase-row span small{color:#718096}.purchase-row strong{font-variant-numeric:tabular-nums;color:#13233d}
.cell-note{display:block;color:#7b8da2;margin-top:4px}.report-hero{display:flex;justify-content:space-between;align-items:center;padding:28px;border-radius:22px;background:linear-gradient(135deg,#162a47,#24527a);color:#fff;box-shadow:0 18px 45px rgba(15,38,66,.2);margin-bottom:18px}.report-hero small{color:#a9cbe6;letter-spacing:.14em}.report-hero strong{display:block;font-size:38px;line-height:1.15;margin:8px 0;color:#71e2bb}.report-hero p{color:#d9e7f3}.report-actions{display:flex;gap:10px}.report-breakdown{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}.report-metric{background:#fff;border:1px solid #dfe8f1;border-radius:17px;padding:18px;box-shadow:0 8px 24px rgba(24,50,80,.05)}.report-metric span{display:block;color:#718096;font-size:13px;margin-bottom:9px}.report-metric b{font-size:20px;color:#14233b}.report-metric.green{border-top:3px solid #10b981}.report-metric.red{border-top:3px solid #ef4444}.report-metric.blue{border-top:3px solid #2563eb}.report-metric.orange{border-top:3px solid #f59e0b}.report-metric.purple{border-top:3px solid #8b5cf6}
@media(max-width:1100px){.breaktime-kpis,.report-breakdown{grid-template-columns:repeat(2,minmax(0,1fr))}.breaktime-actions{grid-template-columns:1fr}.purchase-row{grid-template-columns:26px minmax(0,1fr) auto}.purchase-row .btn{grid-column:2/4;justify-self:start}.report-hero{align-items:flex-start;gap:18px;flex-direction:column}}
@media(max-width:720px){.breaktime-kpis,.finance-kpis,.purchase-summary,.report-breakdown{grid-template-columns:1fr}.report-hero strong{font-size:30px}.report-actions{width:100%}.report-actions .btn{flex:1}.purchase-row{padding:15px;grid-template-columns:24px 1fr}.purchase-row strong{grid-column:2}.purchase-row .btn{grid-column:2}.top-actions .period-wrap{display:none}}
.brand{border-bottom:1px solid rgba(88,119,157,.24)}
.brand small{color:#526a86}
.company{
  border-color:#b6c9df;
  background:rgba(255,255,255,.82);
  box-shadow:0 7px 20px rgba(43,78,121,.09);
}
.company small{color:#426c9e}.company span{color:#52677f}
.nav-group-toggle{color:#526d8d}
.nav-btn{color:#21364f}
.nav-btn:hover{color:#075fc7;background:rgba(255,255,255,.7)}
.nav-btn.active{
  color:#075fc7;
  background:#fff;
  box-shadow:inset 4px 0 #1677ff,0 7px 18px rgba(30,83,151,.14);
}
.side-foot{border-top-color:#b6c7da}
.side-foot button{
  color:#425d7c;
  border-color:#b2c4d8;
  background:rgba(255,255,255,.72);
}
.side-foot button:hover{color:#0969da;background:#fff}
.sidebar nav{scrollbar-color:#b8c8da transparent}

/* Notification dropdown */
.period-wrap{position:relative}
.period{display:flex;align-items:center;gap:9px}
.period .lucide{width:15px;height:15px;color:var(--primary)}
.period-menu{position:absolute;top:50px;right:0;z-index:81;width:310px;padding:7px;border:1px solid #d9e2ed;border-radius:14px;background:#fff;box-shadow:0 20px 55px rgba(15,38,68,.18);animation:notificationIn .16s ease-out}
.period-menu button{width:100%;padding:11px 12px;display:flex;flex-direction:column;gap:2px;border:0;border-radius:9px;color:var(--text);background:transparent;text-align:left}
.period-menu button:hover{background:#f3f7fc}
.period-menu button.selected{color:#075fc7;background:#eaf3ff;box-shadow:inset 3px 0 #1677ff}
.period-menu b{font-size:12px}.period-menu small{color:var(--muted);font-size:10px}
.notification-wrap{position:relative}
.notification-panel{
  position:absolute;
  top:50px;
  right:-72px;
  z-index:80;
  width:min(390px,calc(100vw - 28px));
  overflow:hidden;
  border:1px solid #d9e2ed;
  border-radius:16px;
  background:#fff;
  box-shadow:0 22px 60px rgba(15,38,68,.2);
  transform-origin:top right;
  animation:notificationIn .16s ease-out;
}
.notification-head{padding:16px 16px 13px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.notification-head b,.notification-head small{display:block}.notification-head b{font-size:16px}.notification-head small{margin-top:2px;color:var(--muted);font-size:11px}
.notification-head .close{width:30px;height:30px;font-size:18px}
.notification-list{max-height:390px;overflow:auto;padding:7px}
.notification-item{width:100%;padding:12px 10px;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:start;border:0;border-radius:11px;color:var(--text);background:transparent;text-align:left}
.notification-item:hover{background:#f3f7fc}
.notification-item+.notification-item{border-top:1px solid #edf1f5;border-radius:0}
.notification-dot{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;color:#b54708;background:#fff3df;font-weight:700}
.notification-item.green .notification-dot{color:#079455;background:#eafaf2}
.notification-item.red .notification-dot{color:#d92d20;background:#fff0ee}
.notification-item b,.notification-item small{display:block}.notification-item b{font-size:12px;line-height:1.35}.notification-item small{margin-top:3px;color:var(--muted);font-size:10.5px;line-height:1.4}
.notification-item time{padding-top:2px;color:var(--muted-2);font-size:9px;white-space:nowrap}
.notification-foot{min-height:45px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);color:var(--muted);background:#f8fafc;font-size:10px}
.notification-foot button{border:0;color:var(--primary);background:transparent;font-weight:600}
@keyframes notificationIn{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:760px){.notification-panel,.period-menu{position:fixed;top:66px;right:12px;left:12px;width:auto}}

/* Typography refinement — compact, readable Mongolian Cyrillic */
body{
  font-family:"Segoe UI Variable Text","Segoe UI",Inter,Arial,sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:1.42;
  letter-spacing:-.008em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{letter-spacing:-.006em}
h1,h2,h3,h4,h5,h6,.brand b,.value,.num{
  letter-spacing:-.025em;
}
.topbar h1{font-weight:700;line-height:1.16;letter-spacing:-.035em}
.section-heading h2,.welcome h2{font-weight:700;line-height:1.22;letter-spacing:-.025em}
.section-title h3,.toolbar b,.payroll-person b{font-weight:650;letter-spacing:-.018em}
.brand b{font-weight:700}.brand small,.company span{line-height:1.3}
.company b{font-weight:600;line-height:1.3;letter-spacing:-.012em}
.company small,.nav-group-toggle,.eyebrow{
  letter-spacing:.07em;
  line-height:1.2;
}
.nav-btn{font-weight:450;letter-spacing:-.006em}
.nav-btn.active{font-weight:600}
.kpi .label{font-weight:500;line-height:1.25;letter-spacing:-.01em}
.kpi .value{font-weight:700;letter-spacing:-.025em}
.report-card h3,.product-card h3{font-weight:650;line-height:1.25;letter-spacing:-.018em}
.report-card small,.product-card small,.trend{line-height:1.3;letter-spacing:-.004em}
.btn{font-weight:600;letter-spacing:-.012em}
th{font-weight:600;letter-spacing:.025em;line-height:1.25}
td{font-weight:400;line-height:1.35;letter-spacing:-.006em}
.badge{font-weight:600;letter-spacing:-.004em}
.form-field label,.summary-item small{font-weight:500;letter-spacing:-.004em}
.summary-item b{font-weight:650;letter-spacing:-.018em}
.alert b{font-weight:600;letter-spacing:-.01em}.alert small{line-height:1.35}
@media print{.sidebar,.topbar,.toolbar,.btn{display:none!important}main{margin:0}.content{max-width:none;padding:0}.card{box-shadow:none}.table-card{overflow:visible}}
.import-errors{max-height:420px;overflow:auto}.import-errors>p{margin:0 0 14px;color:var(--muted)}.import-errors .alert{margin-top:8px;padding:11px 14px}
body.breaktime-app .sidebar{background:linear-gradient(180deg,#13233d 0%,#172c49 55%,#203b5d 100%);border-right-color:#294564;box-shadow:12px 0 35px rgba(15,35,60,.16);color:#eaf4ff}
body.breaktime-app .sidebar .brand{border-bottom-color:rgba(255,255,255,.13)}body.breaktime-app .sidebar .brand b,body.breaktime-app .sidebar .company b,body.breaktime-app .sidebar .nav-btn em{color:#f8fbff}body.breaktime-app .sidebar .brand small,body.breaktime-app .sidebar .company span,body.breaktime-app .sidebar .company small,body.breaktime-app .sidebar .nav-group-toggle{color:#a9c0d8}body.breaktime-app .sidebar .brand>span{background:linear-gradient(145deg,#29a7bd,#4c7cf1);box-shadow:0 12px 26px rgba(41,167,189,.28)}
body.breaktime-app .sidebar .company{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13);box-shadow:none}body.breaktime-app .sidebar .nav-btn{color:#d5e2f0}body.breaktime-app .sidebar .nav-btn:hover{background:rgba(255,255,255,.09)}body.breaktime-app .sidebar .nav-btn.active{background:#fff;color:#15345a;box-shadow:0 10px 24px rgba(4,20,40,.22)}body.breaktime-app .sidebar .nav-btn.active em{color:#15345a}body.breaktime-app .sidebar .nav-btn svg{color:#65d2df}body.breaktime-app .sidebar .side-foot{border-color:rgba(255,255,255,.12)}body.breaktime-app .sidebar .side-foot button{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#dce9f5}
body.breaktime-app #app{background:linear-gradient(145deg,#f4f7fb 0%,#edf3f9 100%)}body.breaktime-app .topbar{background:rgba(250,252,255,.92);border-bottom-color:#dce5ef}

/* Breaktime visual hierarchy and accounting color system */
body.breaktime-app{--text:#12213a;--muted:#63748a;--border:#dbe5ef;--surface-2:#f3f7fb;background:#eaf1f7;color:var(--text)}
body.breaktime-app #app{min-height:calc(100vh - 74px);background:radial-gradient(circle at 86% 0,rgba(66,153,225,.09),transparent 30%),linear-gradient(145deg,#f3f7fb,#eaf1f7)}
body.breaktime-app .topbar{background:rgba(247,250,253,.94);box-shadow:0 8px 28px rgba(21,51,83,.055);backdrop-filter:blur(18px)}
body.breaktime-app .topbar h1{color:#10233f}body.breaktime-app .eyebrow{color:#4c77aa}body.breaktime-app .welcome h2{color:#142a48;font-size:23px}body.breaktime-app .welcome p{color:#657b94}
body.breaktime-app .card{border-color:#d9e4ef;box-shadow:0 9px 28px rgba(22,53,84,.065)}body.breaktime-app .card:hover{border-color:#c7d9eb;box-shadow:0 13px 34px rgba(22,53,84,.09)}
body.breaktime-app .kpi{position:relative;border-top:3px solid #3b82f6;background:linear-gradient(145deg,#fff,#f8fbff)}
body.breaktime-app .kpi:nth-child(4n+2){border-top-color:#10b981;background:linear-gradient(145deg,#fff,#f5fcf9)}
body.breaktime-app .kpi:nth-child(4n+3){border-top-color:#f59e0b;background:linear-gradient(145deg,#fff,#fffaf1)}
body.breaktime-app .kpi:nth-child(4n+4){border-top-color:#8b5cf6;background:linear-gradient(145deg,#fff,#faf7ff)}
body.breaktime-app .kpi .label{color:#60738b;font-weight:600}body.breaktime-app .kpi .value{color:#17365d;font-weight:750}
body.breaktime-app .kpi:nth-child(4n+2) .value{color:#087b5b}body.breaktime-app .kpi:nth-child(4n+3) .value{color:#b65b08}body.breaktime-app .kpi:nth-child(4n+4) .value{color:#7042c7}
body.breaktime-app .toolbar{background:#fbfdff}body.breaktime-app .toolbar b,body.breaktime-app .section-title h3{color:#183557}
body.breaktime-app th{color:#486887;background:#edf4fa;border-bottom-color:#d6e2ed;font-weight:700}body.breaktime-app td{color:#263b55}body.breaktime-app tbody tr:nth-child(even){background:#fbfdff}body.breaktime-app tbody tr:hover{background:#edf6ff}
body.breaktime-app .purchase-summary span{border-top:3px solid #3b82f6;background:linear-gradient(145deg,#fff,#f8fbff);box-shadow:0 8px 22px rgba(22,53,84,.055)}body.breaktime-app .purchase-summary span:nth-child(2){border-top-color:#10b981}body.breaktime-app .purchase-summary span:nth-child(3){border-top-color:#8b5cf6}body.breaktime-app .purchase-summary b{color:#17365d}body.breaktime-app .purchase-summary span:nth-child(2) b{color:#087b5b}body.breaktime-app .purchase-summary span:nth-child(3) b{color:#7042c7}
body.breaktime-app .quick-action{border-color:#d4e1ed;background:linear-gradient(145deg,#fff,#f8fbff)}body.breaktime-app .quick-action.purchase{border-top:3px solid #3b82f6}body.breaktime-app .quick-action.sale{border-top:3px solid #10b981}body.breaktime-app .quick-action.report{border-top:3px solid #8b5cf6}
body.breaktime-app .btn{background:linear-gradient(135deg,#287cf0,#1764d4);box-shadow:0 7px 16px rgba(37,99,235,.17)}body.breaktime-app .btn.secondary{color:#185fbd;background:#f7fbff;box-shadow:none}body.breaktime-app .badge{color:#46617d;background:#eaf1f7}body.breaktime-app .badge.ok{color:#067554;background:#e6f8f1}body.breaktime-app .badge.red{color:#c6362e;background:#fff0ee}
body.breaktime-app .form-field label{color:#486887;font-weight:650}body.breaktime-app .field,body.breaktime-app .search,body.breaktime-app select{color:#18324f;border-color:#cbd9e6;background:#fcfeff}
.login-screen{background:radial-gradient(circle at 50% 15%,#dcecff 0,#eef4fa 38%,#e8eff6 100%)}.login-card{border-color:#cfdeec;box-shadow:0 24px 65px rgba(22,53,84,.14)}.login-card h1{color:#142f52}.login-card>p{color:#607995}.login-card label{color:#486887;font-weight:650}.login-card input{color:#18324f;border-color:#cbd9e6;background:#fbfdff}.login-logo{background:linear-gradient(145deg,#22a8bb,#3478ed);box-shadow:0 10px 25px rgba(44,126,219,.25)}

/* Layered blue-violet workspace: rich separation without neon glare */
body.breaktime-app{background:#e9edf8}
body.breaktime-app #app{position:relative;min-height:calc(100vh - 74px);background:
 radial-gradient(circle at 9% 8%,rgba(76,125,222,.18),transparent 27%),
 radial-gradient(circle at 92% 4%,rgba(126,72,190,.15),transparent 30%),
 linear-gradient(145deg,#eef3fb 0%,#e8ecf7 52%,#f0edf8 100%)}
body.breaktime-app #app:before{content:"";position:fixed;inset:74px 0 0 264px;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.23),transparent 34%,rgba(90,61,160,.025));z-index:0}
body.breaktime-app .content{position:relative;z-index:1}
body.breaktime-app .sidebar{background:linear-gradient(180deg,#17294a 0%,#24376a 52%,#3b2867 100%);border-right-color:rgba(103,124,190,.45);box-shadow:10px 0 28px rgba(34,31,84,.18)}
body.breaktime-app .sidebar .brand>span{background:linear-gradient(145deg,#35b5ca,#6257dd);box-shadow:0 10px 22px rgba(62,91,202,.3)}
body.breaktime-app .sidebar .company{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(196,185,255,.08));border-color:rgba(203,213,255,.2)}
body.breaktime-app .sidebar .nav-btn.active{background:linear-gradient(135deg,#fff,#f1efff);box-shadow:inset 4px 0 #7257cf,0 9px 22px rgba(12,19,57,.24)}
body.breaktime-app .sidebar .nav-btn.active em{color:#392d76}body.breaktime-app .sidebar .nav-btn svg{color:#82d5e4}
body.breaktime-app .topbar{background:rgba(250,250,255,.88);border-bottom-color:#d9dced;box-shadow:0 7px 22px rgba(40,45,92,.07);backdrop-filter:blur(16px)}
body.breaktime-app .card,body.breaktime-app .purchase-summary span,body.breaktime-app .quick-action{border-color:rgba(196,205,228,.92);box-shadow:0 10px 24px rgba(40,49,94,.075)}
body.breaktime-app .card:hover,body.breaktime-app .quick-action:hover{border-color:#b9c5e3;box-shadow:0 14px 30px rgba(40,49,94,.11)}
body.breaktime-app .welcome h2,body.breaktime-app .section-title h3,body.breaktime-app .toolbar b{color:#202d59}
body.breaktime-app .eyebrow{color:#6958a5}body.breaktime-app .welcome p{color:#61718e}
body.breaktime-app .btn{background:linear-gradient(135deg,#347be5,#624fcf);border-color:#4d63d7;box-shadow:0 7px 16px rgba(74,76,190,.2)}body.breaktime-app .btn:hover{background:linear-gradient(135deg,#2869cc,#5240b7)}
body.breaktime-app .btn.secondary{color:#5146a2;background:rgba(255,255,255,.78);border-color:#c5c9e2;box-shadow:none}
body.breaktime-app th{color:#4d5f86;background:#edf0f8}body.breaktime-app tbody tr:hover{background:#f1f3ff}
.login-screen{background:radial-gradient(circle at 18% 18%,rgba(50,181,202,.3),transparent 30%),radial-gradient(circle at 82% 20%,rgba(115,68,193,.28),transparent 34%),linear-gradient(145deg,#17294a,#3e2471)}
.login-card{background:rgba(255,255,255,.96);border-color:rgba(224,225,244,.8);box-shadow:0 24px 65px rgba(21,20,62,.3)}.login-logo{background:linear-gradient(145deg,#35b5ca,#6257dd)}
@media(max-width:1100px){body.breaktime-app #app:before{left:0}}

/* Supplied stat-card system, adapted to the existing JavaScript app */
body.breaktime-app{--dashboard-bg:#f7f9ff;--dashboard-text:#17233f;--dashboard-soft:#7b87a4;--dashboard-border:#e4e9f4;--dashboard-green:#14b87a;--dashboard-orange:#ff9a2f;--dashboard-purple:#8754f5}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:16px}
.stat-card{min-width:0;min-height:130px;padding:18px;background:#fff;border:1px solid var(--dashboard-border);border-radius:18px;box-shadow:0 8px 30px rgba(31,49,93,.06);transition:transform .2s ease,box-shadow .2s ease}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgba(31,49,93,.1)}
.stat-header{display:flex;align-items:center;gap:12px}.stat-header>div:last-child{min-width:0}.stat-icon{width:46px;height:46px;flex:0 0 46px;border-radius:13px;display:grid;place-items:center;font-size:21px;font-weight:800}.icon-blue{color:#446dff;background:#eaf0ff}.icon-green{color:#16ac73;background:#e3f8ef}.icon-orange{color:#ff8a15;background:#fff1df}.icon-purple{color:#8754f5;background:#f0e9ff}
.stat-title{color:var(--dashboard-soft);font-size:13px;font-weight:600}.stat-value{margin-top:6px;overflow:hidden;color:var(--dashboard-text);font-size:clamp(20px,1.65vw,24px);font-weight:800;letter-spacing:-.025em;text-overflow:ellipsis;white-space:nowrap}.stat-bottom{margin-top:14px;display:flex;align-items:center;justify-content:space-between;color:#8994ad;font-size:11px}.stat-change{color:var(--dashboard-green);font-weight:700}
@media(max-width:1200px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.stat-grid{grid-template-columns:1fr}}

/* Full home dashboard composition */
body.breaktime-app .content{max-width:1720px;margin:0 auto;padding:16px 28px 40px}
body.breaktime-app .welcome:has(+.welcome-banner){min-height:0;margin:0 0 12px;justify-content:flex-end}body.breaktime-app .welcome:has(+.welcome-banner)>div{display:none}
.welcome-banner{min-height:50px;padding:0 18px;display:flex;align-items:center;gap:8px;border:1px solid #dfe4ff;border-radius:12px;color:#5f61ab;background:linear-gradient(90deg,#f5f7ff,#f9f7ff);font-size:13px}.welcome-banner>span{color:#6555e8;font-size:19px}.welcome-banner b{color:#4f55a4}.welcome-banner button{margin-left:auto;border:0;color:#707aa0;background:transparent;font-size:20px}
.dashboard-intro-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px}.dashboard-purchase{height:50px;padding-inline:20px}
.dashboard-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}.dashboard-action{min-height:106px;padding:18px 20px;display:grid;grid-template-columns:54px minmax(0,1fr) 38px;align-items:center;gap:16px;border:1px solid;border-radius:18px;text-align:left;background:#fff;transition:.2s}.dashboard-action:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(31,49,93,.09)}.dashboard-action .action-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:15px}.dashboard-action .action-icon svg{width:25px;height:25px}.dashboard-action b,.dashboard-action small{display:block}.dashboard-action b{font-size:17px}.dashboard-action small{margin-top:4px;color:#7b87a4;font-size:12px;line-height:1.45}.dashboard-action>i{width:36px;height:36px;display:grid;place-items:center;border:2px solid;border-radius:50%;font-size:24px;font-style:normal}.dashboard-action.blue{color:#245fc9;border-color:#cbd9ff;background:linear-gradient(135deg,#fff,#f3f6ff)}.dashboard-action.blue .action-icon{background:#e7eeff}.dashboard-action.green{color:#07945f;border-color:#cbeadd;background:linear-gradient(135deg,#fff,#effbf6)}.dashboard-action.green .action-icon{background:#ddf6eb}.dashboard-action.purple{color:#6540c8;border-color:#ded2f8;background:linear-gradient(135deg,#fff,#f7f2ff)}.dashboard-action.purple .action-icon{background:#eee6ff}
.dashboard-analytics{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(340px,1fr);gap:18px;margin-top:18px}.dashboard-panel{min-width:0;min-height:288px;border:1px solid #e2e7f1;border-radius:18px;background:#fff;box-shadow:0 8px 30px rgba(31,49,93,.055);overflow:hidden}.dashboard-panel>header{height:58px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf0f6;color:#17233f}.dashboard-panel>header b{font-size:15px}.chart-legend{height:32px;display:flex;justify-content:center;align-items:end;gap:22px;color:#697792;font-size:11px}.chart-legend span{display:flex;align-items:center;gap:6px}.chart-legend i{width:9px;height:9px;border-radius:2px}.chart-legend i.blue{background:#5367f8}.chart-legend i.red{background:#f06478}.dashboard-line-chart{display:block;width:100%;height:195px;padding:4px 14px 10px}.chart-grid line{stroke:#e7eaf2;stroke-width:1;stroke-dasharray:4 4}.chart-labels text{fill:#78849d;font-size:10px}
.category-chart{min-height:228px;padding:20px;display:grid;grid-template-columns:170px minmax(0,1fr);align-items:center;gap:22px}.donut{width:164px;height:164px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--donut));box-shadow:inset 0 0 0 1px rgba(77,72,170,.06)}.donut:before{content:"";grid-area:1/1;width:96px;height:96px;border-radius:50%;background:#fff}.donut>div{z-index:1;grid-area:1/1;text-align:center}.donut small,.donut b{display:block}.donut small{color:#7b87a4}.donut b{margin-top:3px;color:#17233f;font-size:17px}.category-legend{display:grid;gap:14px}.category-legend>div{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#67738e;font-size:11px}.category-legend span{display:flex;align-items:center;min-width:0}.category-legend i{width:8px;height:8px;flex:0 0 8px;margin-right:7px;border-radius:50%}.category-legend b{color:#53617c;font-size:10px;white-space:nowrap}.category-legend b small{font-weight:500}.legend-empty{justify-content:center!important;color:#8994ad!important}
body.breaktime-app .table-card{border-radius:18px}.dashboard-empty{min-height:172px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#78849d;text-align:center}.dashboard-empty .empty-illustration{width:62px;height:55px;margin-bottom:9px;display:grid;place-items:center;border-radius:20px;color:#8169df;background:#f0ebff;transform:rotate(-3deg)}.dashboard-empty .empty-illustration svg{width:29px;height:29px}.dashboard-empty b{color:#5c6884;font-size:12px}.dashboard-empty span{margin-top:5px;font-size:11px}
@media(max-width:1366px){body.breaktime-app .content{padding-inline:22px}.dashboard-analytics{grid-template-columns:minmax(0,1.45fr) minmax(310px,1fr)}.category-chart{grid-template-columns:145px minmax(0,1fr)}.donut{width:140px;height:140px}.donut:before{width:82px;height:82px}}
@media(max-width:1050px){.dashboard-actions{grid-template-columns:1fr}.dashboard-analytics{grid-template-columns:1fr}.category-chart{grid-template-columns:180px minmax(0,1fr)}}
@media(max-width:720px){body.breaktime-app .content{padding:14px 12px 32px}.dashboard-intro-row{grid-template-columns:1fr}.dashboard-purchase{width:100%}.welcome-banner{align-items:flex-start;padding:13px;font-size:12px}.dashboard-action{grid-template-columns:48px minmax(0,1fr) 34px}.dashboard-action .action-icon{width:48px;height:48px}.category-chart{grid-template-columns:1fr;justify-items:center}.category-legend{width:100%}}

/* Income and expense workspace */
.finance-header-actions{display:flex;gap:14px}.finance-header-actions .btn{min-width:138px;height:48px;border-radius:12px;font-size:15px}.finance-add-income{background:linear-gradient(135deg,#4b7cff,#6b35dc)!important}.finance-add-expense{color:#e52e48!important;border-color:#f4cdd3!important;background:#fffafa!important;box-shadow:0 7px 18px rgba(229,46,72,.07)!important}.finance-add-expense:hover{background:#fff2f4!important}
.finance-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-bottom:20px}.finance-summary-card{min-width:0;min-height:150px;padding:22px;display:flex;align-items:flex-start;gap:18px;border:1px solid;border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(31,49,93,.06)}.finance-summary-icon{width:58px;height:58px;flex:0 0 58px;display:grid;place-items:center;border-radius:15px}.finance-summary-icon svg{width:27px;height:27px}.finance-summary-card>div{min-width:0}.finance-summary-card small,.finance-summary-card strong,.finance-summary-card p{display:block}.finance-summary-card small{margin-top:3px;color:#52627e;font-size:13px;font-weight:700}.finance-summary-card strong{margin-top:10px;overflow:hidden;font-size:clamp(23px,2vw,30px);line-height:1.05;letter-spacing:-.035em;text-overflow:ellipsis;white-space:nowrap}.finance-summary-card p{margin:12px 0 0;color:#697792;font-size:12px}.finance-summary-card.income-card{border-color:#cad9ff;background:linear-gradient(135deg,#fff,#f8faff)}.income-card .finance-summary-icon{color:#3974f5;background:#e9efff}.income-card strong{color:#3974f5}.finance-summary-card.expense-card{border-color:#f6d1d6;background:linear-gradient(135deg,#fff,#fff9fa)}.expense-card .finance-summary-icon{color:#ee3150;background:#ffe8eb}.expense-card strong{color:#ee3150}.finance-summary-card.balance-card{border-color:#c9eadc;background:linear-gradient(135deg,#fff,#f7fdf9)}.balance-card .finance-summary-icon{color:#0b9d5b;background:#dcf6e9}.balance-card strong{color:#0b9d5b}
.finance-filter-card{min-height:82px;margin-bottom:18px;padding:15px 18px;display:grid;grid-template-columns:minmax(250px,1.25fr) auto minmax(150px,.55fr) auto auto;align-items:center;gap:14px;border:1px solid #e0e5f0;border-radius:17px;background:rgba(255,255,255,.92);box-shadow:0 8px 26px rgba(31,49,93,.05)}.finance-search{height:48px;padding:0 14px;display:flex;align-items:center;gap:10px;border:1px solid #d8dfec;border-radius:12px;background:#fff}.finance-search svg{width:20px;color:#66758e}.finance-search input{width:100%;border:0;outline:0;color:#17233f;background:transparent;font:inherit}.finance-segments,.finance-periods{padding:3px;display:flex;border:1px solid #dce2ed;border-radius:12px;background:#fff}.finance-segments button,.finance-periods button{height:38px;padding:0 16px;border:0;border-radius:9px;color:#52617d;background:transparent;font-weight:600;white-space:nowrap}.finance-segments button.active,.finance-periods button.active{color:#5141c8;background:#eeebff}.finance-filter-card>select{height:48px;padding:0 36px 0 14px;border-radius:12px}.finance-count{padding:8px 14px;border-radius:999px;color:#596784;background:#eef1f7;font-size:12px;font-weight:700;white-space:nowrap}
.finance-mini-summary{min-height:96px;margin-bottom:18px;padding:15px 22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;border:1px solid #e0e5f0;border-radius:17px;background:#fff;box-shadow:0 8px 26px rgba(31,49,93,.05)}.finance-mini-summary>div{min-width:0;padding:0 22px;display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:14px}.finance-mini-summary>div+div{border-left:1px solid #e2e7f0}.mini-icon{grid-row:1/3;width:46px;height:46px;display:grid;place-items:center;border-radius:13px}.mini-icon svg{width:22px;height:22px}.mini-icon.blue{color:#3974f5;background:#e9efff}.mini-icon.green{color:#0b9d5b;background:#dcf6e9}.mini-icon.orange{color:#f18a13;background:#fff0dc}.finance-mini-summary small{color:#63718a;font-size:12px;font-weight:600}.finance-mini-summary strong{margin-top:3px;overflow:hidden;color:#17233f;font-size:22px;text-overflow:ellipsis;white-space:nowrap}.finance-mini-summary>div:nth-child(2) strong{color:#0b9d5b}.finance-mini-summary>div:nth-child(3) strong{color:#e9800b}
.finance-table-card{overflow:hidden}.finance-table-card .table-wrap{padding:14px 14px 0}.finance-table-card table{overflow:hidden;border:1px solid #e4e8f1;border-radius:14px}.finance-table-card th{height:55px;padding-inline:14px;background:#f3f6fb}.finance-table-card td{height:76px;padding-inline:14px}.finance-date{font-weight:600}.finance-type{width:max-content;padding:7px 11px;display:flex;align-items:center;gap:7px;border-radius:999px;font-size:11px;font-weight:700}.finance-type i{width:8px;height:8px;border-radius:50%}.finance-type.income{color:#078754;background:#e7f8ef}.finance-type.income i{background:#0eb36c}.finance-type.expense{color:#cf2e46;background:#fff0f2}.finance-type.expense i{background:#ee3150}.finance-income{color:#079a58!important;font-weight:750!important}.finance-expense{color:#e62f48!important;font-weight:750!important}.finance-empty{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#7b87a4}.finance-empty svg{width:30px;height:30px;margin-bottom:10px;color:#8c77dd}.finance-empty b{color:#596680}.finance-empty span{margin-top:5px;font-size:12px}.finance-table-card footer{min-height:66px;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;color:#64718b;border-top:1px solid #edf0f5;font-size:12px}.finance-table-card footer select{height:38px;border-radius:10px}
@media(max-width:1366px){.finance-filter-card{grid-template-columns:minmax(220px,1fr) auto minmax(140px,.5fr) auto}.finance-count{grid-column:4;grid-row:2;justify-self:end}.finance-periods{grid-column:1/4;grid-row:2;width:max-content}.finance-summary-card{padding:19px;gap:14px}.finance-summary-icon{width:52px;height:52px;flex-basis:52px}}
@media(max-width:1050px){.finance-summary-grid{grid-template-columns:1fr}.finance-filter-card{grid-template-columns:1fr 1fr}.finance-search{grid-column:1/-1}.finance-segments,.finance-periods{width:max-content}.finance-periods{grid-column:1;grid-row:auto}.finance-count{grid-column:2;grid-row:auto}.finance-mini-summary{grid-template-columns:1fr}.finance-mini-summary>div{padding:14px 10px}.finance-mini-summary>div+div{border-top:1px solid #e2e7f0;border-left:0}.finance-header-actions{width:100%}.finance-header-actions .btn{flex:1}}
@media(max-width:720px){.finance-filter-card{grid-template-columns:1fr}.finance-filter-card>*{grid-column:1!important;grid-row:auto!important}.finance-segments,.finance-periods{width:100%;overflow:auto}.finance-segments button,.finance-periods button{flex:1;padding-inline:10px}.finance-count{justify-self:start}.finance-summary-card{min-height:132px}.finance-table-card .table-wrap{overflow-x:auto}.finance-table-card table{min-width:760px}}

/* Multi-item purchase entry */
.purchase-header-actions{display:flex;gap:12px}.purchase-header-actions .btn{min-width:178px;height:48px;border-radius:12px}.purchase-batch{display:grid;gap:18px}.purchase-form-card{padding:22px 24px;border:1px solid #e1e6f1;border-radius:18px;background:#fff;box-shadow:0 9px 28px rgba(31,49,93,.055)}.purchase-form-card>header{margin-bottom:18px;display:flex;align-items:center;gap:11px;color:#172858}.purchase-form-card>header>span{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:#5c4ee3;background:#eeebff}.purchase-form-card>header svg{width:19px;height:19px}.purchase-form-card>header b{font-size:15px}.purchase-meta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(180px,.8fr);gap:18px 20px}.purchase-meta-grid .form-field{margin:0}.purchase-meta-grid .form-field>span{display:block;margin-bottom:8px;color:#46577b;font-size:12px;font-weight:700}.purchase-meta-grid .field{height:48px;border-radius:11px}.purchase-note{grid-column:1/4}.purchase-total-box{grid-column:4;grid-row:2;padding:13px 16px;display:flex;flex-direction:column;justify-content:center;border-radius:13px;color:#513ee4;background:linear-gradient(135deg,#f8f6ff,#f0edff)}.purchase-total-box small{font-size:11px;font-weight:700}.purchase-total-box strong{margin-top:8px;font-size:22px}.purchase-items-scroll{overflow-x:auto;border:1px solid #e8ebf3;border-radius:13px}.purchase-items-table{min-width:1040px}.purchase-items-table th{height:48px;padding:0 11px;background:#f4f6fb;font-size:10.5px}.purchase-items-table td{height:72px;padding:10px}.purchase-items-table th:first-child,.purchase-items-table td:first-child{width:45px;text-align:center}.purchase-items-table th:nth-child(2){min-width:190px}.purchase-items-table th:nth-child(3){min-width:170px}.purchase-items-table th:nth-child(4){width:95px}.purchase-items-table th:nth-child(5){width:125px}.purchase-items-table th:nth-child(6){width:125px}.purchase-items-table .field{height:44px;padding:0 12px;border-radius:10px}.purchase-line-total{min-width:105px;color:#26385a;font-weight:700}.purchase-delete{width:40px;height:40px;border:0;border-radius:10px;color:#ed3450;background:#ffe9ed;font-size:22px;transition:.2s}.purchase-delete:hover{color:#fff;background:#ed3450}.purchase-add-row{height:44px;margin-top:14px}.purchase-items-card>footer{margin-top:20px;padding-top:18px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf0f6}.purchase-items-card>footer>div{display:flex;gap:10px}.purchase-items-card>footer .btn{min-width:120px;height:45px}.purchase-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.purchase-benefits article{min-height:112px;padding:18px 20px;display:flex;align-items:flex-start;gap:15px;border:1px solid;border-radius:17px;background:#fff}.purchase-benefits article>span{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:13px;font-size:25px;font-weight:800}.purchase-benefits svg{width:24px;height:24px}.purchase-benefits b{font-size:14px}.purchase-benefits p{margin:6px 0 0;color:#697792;font-size:12px;line-height:1.55}.purchase-benefits .blue{color:#356df1;border-color:#ccd9ff;background:linear-gradient(135deg,#fff,#f7f9ff)}.purchase-benefits .blue>span{background:#e8eeff}.purchase-benefits .green{color:#07995f;border-color:#cbeadd;background:linear-gradient(135deg,#fff,#f4fcf8)}.purchase-benefits .green>span{background:#ddf6eb}.purchase-benefits .purple{color:#7541dc;border-color:#ddd1fa;background:linear-gradient(135deg,#fff,#f8f4ff)}.purchase-benefits .purple>span{background:#efe6ff}
@media(max-width:1200px){.purchase-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.purchase-note{grid-column:1}.purchase-total-box{grid-column:2;grid-row:2}.purchase-benefits{grid-template-columns:1fr}.purchase-header-actions{width:100%}.purchase-header-actions .btn{flex:1}}
@media(max-width:720px){.purchase-header-actions{flex-direction:column}.purchase-header-actions .btn{width:100%}.purchase-form-card{padding:17px 14px}.purchase-meta-grid{grid-template-columns:1fr}.purchase-note,.purchase-total-box{grid-column:1;grid-row:auto}.purchase-items-card>footer{align-items:stretch;flex-direction:column}.purchase-items-card>footer>div{display:grid;grid-template-columns:1fr 1fr}.purchase-items-card>footer>.btn{width:100%}.purchase-add-row{width:100%;height:48px}}

/* Sidebar profile and record actions */
body.breaktime-app .side-foot{display:block;padding-top:10px}.sidebar-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.sidebar-tools button{min-width:0;min-height:48px!important;padding:6px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:9px!important}.sidebar-tools button span{font-size:9px}.sidebar-profile{margin-top:11px;padding:12px 8px 2px;display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,.13)}.sidebar-profile>span{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(145deg,#33b7dd,#6558ed);font-weight:800}.sidebar-profile b,.sidebar-profile small{display:block}.sidebar-profile b{overflow:hidden;color:#fff;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.sidebar-profile small{margin-top:3px;color:#b9cae4;font-size:9px}.sidebar-profile i{color:#aabbd3;font-style:normal}.finance-row-actions{display:flex;align-items:center;gap:7px}.finance-row-actions button{width:36px;height:36px;border:1px solid #d9e2ef;border-radius:9px;color:#526b8d;background:#f8fbff;font-size:17px;transition:.2s}.finance-row-actions button:hover{color:#fff;border-color:#5571df;background:#5571df}.finance-row-actions button.delete{color:#e5364e;border-color:#f4ccd2;background:#fff6f7}.finance-row-actions button.delete:hover{color:#fff;border-color:#e5364e;background:#e5364e}.finance-table-card th:last-child,.finance-table-card td:last-child{width:100px}
.sidebar-collapsed .sidebar-profile{display:none}.sidebar-collapsed .sidebar-tools button{display:none}.sidebar-collapsed .sidebar-tools{grid-template-columns:1fr}
@media(max-height:760px){.sidebar-profile{margin-top:6px;padding-top:8px}.sidebar-tools button{min-height:42px!important}.sidebar-profile>span{width:36px;height:36px}.sidebar-profile{grid-template-columns:36px minmax(0,1fr) 14px}}

/* Breaktime brand artwork and stable mobile viewport */
html{width:100%;min-height:100%;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
body{width:100%;min-height:100%;overflow-x:clip;overscroll-behavior-x:none}
.brand-logo{width:48px;height:48px;flex:0 0 48px;border:2px solid rgba(255,255,255,.25);border-radius:13px;object-fit:cover;box-shadow:0 10px 24px rgba(10,22,54,.24)}
.login-logo-image{width:82px;height:82px;padding:0;overflow:hidden;border-radius:20px;background:#f4efe9;box-shadow:0 12px 30px rgba(31,20,15,.18)}
.login-logo-image img{width:100%;height:100%;display:block;object-fit:cover}
body.breaktime-app .sidebar .brand-logo{background:#f4efe9}
.sidebar-collapsed .brand-logo{width:46px;height:46px;flex-basis:46px}
button,a,.nav-btn{touch-action:manipulation}
@media (hover:none),(pointer:coarse){input,select,textarea,.field,.search{font-size:16px!important}.btn,button{min-height:44px}.period{font-size:14px}}
@media(max-width:760px){
  html,body{max-width:100vw}
  main,#mainContent,#app,.content{max-width:100%;overflow-x:clip}
  .topbar{max-width:100vw}
  .modal-box{width:calc(100vw - 20px);max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);overflow:auto}
  .field,input,select,textarea{font-size:16px!important}
  .purchase-items-scroll,.table-wrap{max-width:100%;-webkit-overflow-scrolling:touch}
}
.sidebar-profile>span{display:none}.sidebar-profile>img{width:42px;height:42px;display:block;border:2px solid rgba(255,255,255,.28);border-radius:50%;object-fit:cover}.avatar-logo{padding:0;overflow:hidden;background:#f4efe9!important}.avatar-logo img{width:100%;height:100%;display:block;object-fit:cover}
@media(max-height:760px){.sidebar-profile>img{width:36px;height:36px}}

/* Mobile workspace: PWA safe areas, reliable navigation and compact data entry */
.sidebar-backdrop{display:none;border:0;background:transparent}
@media(max-width:1100px){
  .sidebar{z-index:80}
  .sidebar-backdrop{position:fixed;inset:0 0 0 min(280px,88vw);z-index:70;width:auto;height:100%;padding:0;background:rgba(15,28,52,.38);backdrop-filter:blur(2px)}
  body.mobile-menu-open{overflow:hidden}
  body.mobile-menu-open .sidebar-backdrop{display:block}
  .mobile-menu{position:relative;z-index:2;width:44px;height:44px;flex:0 0 44px;border:1px solid #dce5f0;border-radius:12px;background:#fff;box-shadow:0 5px 16px rgba(22,42,72,.08)}
}

@media(max-width:760px){
  body.breaktime-app .topbar{
    height:calc(64px + env(safe-area-inset-top));
    min-height:calc(64px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 12px 0;
    gap:10px;
  }
  body.breaktime-app .topbar>div:nth-child(2){min-width:0;flex:1}
  body.breaktime-app .topbar h1{overflow:hidden;font-size:19px;line-height:1.16;text-overflow:ellipsis;white-space:nowrap}
  body.breaktime-app .topbar .eyebrow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.breaktime-app .top-actions{flex:0 0 auto}
  body.breaktime-app .top-actions .cloud-status,
  body.breaktime-app .top-actions .period-wrap,
  body.breaktime-app .top-actions .user-chip{display:none!important}
  body.breaktime-app .avatar{width:42px;height:42px;flex-basis:42px}
  body.breaktime-app .sidebar{padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  body.breaktime-app .content{padding:14px 12px calc(30px + env(safe-area-inset-bottom))}

  .modal{padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));align-items:end}
  .modal-box{width:100%;max-width:100%;max-height:calc(100dvh - max(20px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom)));padding:18px 15px;border-radius:20px 20px 14px 14px}
  .modal-box,.modal-box *,.form-grid,.form-field{min-width:0;box-sizing:border-box}
  .modal-head{margin-bottom:12px}.modal-head h2{font-size:19px}
  .modal-box .form-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .modal-box .form-field input,.modal-box .form-field select,.modal-box .field{display:block;width:100%;max-width:100%;min-width:0;height:46px}
  .modal-box input[type="date"]{-webkit-appearance:none;appearance:none}
  .modal-box input[type="date"]::-webkit-date-and-time-value{min-width:0;text-align:left}
  .modal-box .modal-actions{position:sticky;bottom:-18px;margin:16px -15px -18px;padding:12px 15px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e8edf5}
  .modal-box .modal-actions .btn{flex:1}

  .purchase-header-actions{width:100%;gap:8px}
  .purchase-header-actions .btn{min-width:0;height:46px}
  .purchase-batch{gap:12px}
  .purchase-form-card{padding:15px 13px;border-radius:16px}
  .purchase-form-card>header{margin-bottom:14px}
  .purchase-meta-grid{gap:12px}
  .purchase-meta-grid .field{display:block;width:100%;min-width:0;height:46px}
  .purchase-meta-grid input[type="date"]{-webkit-appearance:none;appearance:none}
  .purchase-total-box{min-height:72px;padding:12px 14px}
  .purchase-total-box strong{margin-top:5px;font-size:21px}
  .purchase-items-scroll{overflow:visible;border:0;border-radius:0}
  .purchase-items-table,.purchase-items-table tbody{display:block;width:100%;min-width:0}
  .purchase-items-table thead{display:none}
  .purchase-items-table tbody{display:grid;gap:12px}
  .purchase-items-table .purchase-item-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:14px;border:1px solid #dfe6f1;border-radius:15px;background:#fbfcff;box-shadow:0 6px 20px rgba(31,49,93,.05)}
  .purchase-items-table .purchase-item-row td{display:block;width:auto!important;min-width:0;height:auto;padding:0;border:0;overflow:visible;text-align:left}
  .purchase-items-table .purchase-item-row td::before{content:attr(data-label);display:block;margin:0 0 6px;color:#5f6f8a;font-size:10px;font-weight:750;letter-spacing:.035em;text-transform:uppercase}
  .purchase-items-table .purchase-item-row td:nth-child(1){grid-column:1;grid-row:1;width:30px!important;height:30px;padding:0;display:grid;place-items:center;border-radius:9px;color:#4b56c5;background:#ececff;font-size:12px;font-weight:800}
  .purchase-items-table .purchase-item-row td:nth-child(1)::before,
  .purchase-items-table .purchase-item-row td:nth-child(8)::before{display:none}
  .purchase-items-table .purchase-item-row td:nth-child(2),
  .purchase-items-table .purchase-item-row td:nth-child(3){grid-column:1/-1}
  .purchase-items-table .purchase-item-row td:nth-child(8){grid-column:2;grid-row:1;justify-self:end}
  .purchase-items-table .field{display:block;width:100%;min-width:0;height:46px;padding-inline:11px;font-size:16px}
  .purchase-items-table .purchase-line-total{min-height:46px;padding:0 12px!important;display:flex!important;align-items:center!important;border:1px solid #e1e6f0!important;border-radius:10px;background:#fff;color:#26385a;font-size:16px}
  .purchase-delete{width:36px;height:36px}
  .purchase-add-row{margin-top:12px}
  .purchase-items-card>footer{margin-top:15px;padding-top:14px;gap:8px}
  .purchase-items-card>footer>div{gap:8px}
  .purchase-items-card>footer .btn{min-width:0}
  .purchase-benefits{gap:10px}
  .purchase-benefits article{min-height:0;padding:14px;gap:12px;border-radius:14px}
  .purchase-benefits article>span{width:42px;height:42px;flex-basis:42px}
  .purchase-benefits p{margin-top:4px;line-height:1.4}

  .inventory-actions{width:100%;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .inventory-actions .btn{width:100%;min-width:0;margin:0!important;padding-inline:8px}
  .inventory-actions #costSettingsBtn{grid-column:1/-1;color:#5940c7;border-color:#d9d1f8;background:#f6f3ff}
  .inventory-stock-card{margin-top:14px}
  .inventory-products-heading{margin:22px 0 12px!important;padding:15px;align-items:flex-start;border:1px solid #dfe6f1;border-radius:15px;background:#fff;box-shadow:0 7px 22px rgba(31,49,93,.05)}
  .inventory-products-heading>div{min-width:0}
  .inventory-products-heading h3{font-size:16px}
  .inventory-products-heading small{display:block;margin-top:4px;line-height:1.4}
  .inventory-products-heading .btn{flex:0 0 auto;padding-inline:10px}
  .inventory-products-grid{margin-top:0!important}

  .mobile-inventory-table,.mobile-inventory-table tbody,
  .mobile-record-table,.mobile-record-table tbody,
  .mobile-report-table,.mobile-report-table tbody{display:block;width:100%;min-width:0!important}
  .mobile-inventory-table thead,.mobile-record-table thead,.mobile-report-table thead{display:none}
  .mobile-inventory-table tbody,.mobile-record-table tbody,.mobile-report-table tbody{padding:10px;display:grid;gap:10px}
  .mobile-inventory-table tbody tr:not(:has(.empty)),
  .mobile-record-table tbody tr:not(:has(.empty,.finance-empty)),
  .mobile-report-table tbody tr:not(:has(.empty)){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 14px;padding:12px 13px;border:1px solid #e0e7f1;border-radius:14px;background:#fff;box-shadow:0 5px 16px rgba(31,49,93,.04)}
  .mobile-inventory-table tbody tr:not(:has(.empty)) td,
  .mobile-record-table tbody tr:not(:has(.empty,.finance-empty)) td,
  .mobile-report-table tbody tr:not(:has(.empty)) td{display:grid;grid-template-columns:minmax(78px,.72fr) minmax(0,1fr);align-items:center;gap:8px;width:auto!important;min-width:0;height:auto;min-height:40px;padding:7px 0;border-bottom:1px solid #edf1f6;overflow:visible;text-align:right;white-space:normal}
  .mobile-inventory-table td,.mobile-record-table td,.mobile-report-table td{position:static!important;left:auto!important;right:auto!important}
  .mobile-record-table .column-detail-only,.mobile-report-table .column-detail-only{display:grid!important}
  .mobile-inventory-table tbody tr:not(:has(.empty)) td::before,
  .mobile-record-table tbody tr:not(:has(.empty,.finance-empty)) td::before,
  .mobile-report-table tbody tr:not(:has(.empty)) td::before{content:attr(data-label);color:#71809a;font-size:10px;font-weight:750;letter-spacing:.03em;text-align:left}
  .mobile-inventory-table tbody tr:not(:has(.empty)) td,
  .mobile-record-table tbody tr:not(:has(.empty,.finance-empty)) td,
  .mobile-report-table tbody tr:not(:has(.empty)) td{grid-column:1/-1}
  .mobile-inventory-table tbody tr:not(:has(.empty)) td:last-child,
  .mobile-record-table tbody tr:not(:has(.empty,.finance-empty)) td:last-child,
  .mobile-report-table tbody tr:not(:has(.empty)) td:last-child{border-bottom:0}
  .mobile-record-table .cell-note{overflow-wrap:anywhere}
  .mobile-record-table .finance-type{margin-left:auto}
  .mobile-record-table .finance-row-actions{justify-content:flex-end}
  .mobile-record-table .num,.mobile-report-table .num,.mobile-inventory-table .num{text-align:right}
  .mobile-record-table tbody tr:has(.finance-empty),
  .mobile-report-table tbody tr:has(.empty),
  .mobile-inventory-table tbody tr:has(.empty){display:block}
  .mobile-record-table tbody tr:has(.finance-empty) td,
  .mobile-report-table tbody tr:has(.empty) td,
  .mobile-inventory-table tbody tr:has(.empty) td{display:block;height:auto;padding:0;border:0}

  .finance-table-card .table-wrap{padding:8px;overflow:visible}
  .finance-table-card table{border:0;border-radius:0}
  .finance-table-card footer{padding:10px 12px}
  .finance-mini-summary{padding:7px 13px}
  .finance-mini-summary>div{padding:10px 2px}
  .finance-summary-grid{gap:10px;margin-bottom:12px}
  .finance-summary-card{min-height:118px;padding:16px}
  .finance-summary-card strong{font-size:24px}
  .finance-filter-card{padding:12px;gap:10px}

  .report-breakdown{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .report-metric{min-width:0;padding:14px;border-radius:14px}
  .report-metric b{display:block;overflow:hidden;font-size:16px;text-overflow:ellipsis;white-space:nowrap}
  .report-breakdown .report-metric:last-child:nth-child(odd){grid-column:1/-1}
  .report-hero{padding:20px 16px;border-radius:17px}
  .report-hero p{line-height:1.45}

  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat-card{min-height:116px;padding:14px;border-radius:15px}
  .stat-header{align-items:center;gap:10px}
  .stat-icon{width:42px;height:42px;flex:0 0 42px}
  .stat-title{font-size:11px}
  .stat-value{font-size:20px}
  .stat-bottom{margin-top:11px;font-size:10px}
}