:root{--bg: #f5f6f8;--panel: #ffffff;--text: #151515;--muted: #5a5f6a;--accent: #0f766e;--border: #e4e7ec}*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(140deg,#f5f6f8,#eef7f6);color:var(--text)}.layout-shell{min-height:100vh}.top-header{position:fixed;top:0;left:0;right:0;height:64px;z-index:1200;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;background:linear-gradient(90deg,#fff,#f8fbfb);border-bottom:1px solid #d9e1ea;box-shadow:0 8px 24px #0f172a0f}.header-branding{display:flex;align-items:center;gap:.65rem;min-width:260px}.header-brand-toggle{width:34px;height:34px;border-radius:10px;border:1px solid #d0d8e2;background:#f8fafc;color:#1e293b;font-size:1rem;font-weight:700;display:grid;place-items:center;line-height:1}.header-brand-toggle:hover{background:#e9f0f8}.header-brand-mark{width:38px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#0f766e,#14532d);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.03em}.header-branding h1{margin:0;font-size:.95rem;line-height:1.15}.header-branding p{margin:.1rem 0 0;color:var(--muted);font-size:.78rem;line-height:1.1}.header-right{display:flex;align-items:center;gap:.5rem}.user-badge{display:grid;gap:.1rem;text-align:right;min-width:140px}.user-badge strong{font-size:.88rem}.user-badge small{color:var(--muted);font-size:.76rem;text-transform:capitalize}.user-menu-wrap{position:relative}.user-menu-trigger{background:#fff;color:var(--text);border:1px solid #d7dee8;display:flex;align-items:center;gap:.6rem;padding:.45rem .65rem}.user-menu-trigger:hover{background:#f8fafc}.user-menu-caret{font-size:.7rem;color:#475467}.user-menu-dropdown{position:absolute;right:0;top:calc(100% + .35rem);width:200px;border:1px solid var(--border);background:#fff;border-radius:.55rem;box-shadow:0 12px 28px #0f172a29;z-index:2001;overflow:hidden}.user-menu-dropdown button{width:100%;border-radius:0;border:none;background:#fff;color:#111827;text-align:left;padding:.6rem .7rem;font-size:.88rem}.user-menu-dropdown button:hover{background:#f3f7fb}.user-menu-dropdown button.danger{color:#b42318;border-top:1px solid var(--border)}.profile-modal-card{width:min(560px,100%)}.app-shell{min-height:calc(100vh - 64px);padding-top:64px}.sidebar{padding:1rem;border-right:1px solid var(--border);background:#e8f5f4;transition:width .2s ease;overflow:hidden;position:fixed;top:64px;left:0;bottom:0;width:250px;overflow-y:auto}.sidebar nav{display:grid;gap:.5rem;margin:1rem 0}.sidebar a{text-decoration:none;color:var(--text);padding:.5rem;border-radius:.5rem;display:flex;align-items:center;gap:.5rem}.nav-icon{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.sidebar a.active{background:var(--accent);color:#fff}.content{padding:1rem 1.25rem;margin-left:250px;width:calc(100% - 250px);min-height:calc(100vh - 64px)}.sidebar-collapsed .content{margin-left:72px;width:calc(100% - 72px)}.sidebar-collapsed .sidebar{width:72px}.sidebar-collapsed .sidebar a{justify-content:center;padding:.55rem .4rem}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}.split{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.card{background:var(--panel);border:1px solid var(--border);border-radius:.75rem;padding:1rem}.table{width:100%;border-collapse:collapse}.table th,.table td{border-bottom:1px solid var(--border);text-align:left;padding:.5rem}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem;margin-bottom:1rem}input,select,button{padding:.55rem;border:1px solid var(--border);border-radius:.4rem}button{background:var(--accent);color:#fff;border:none;cursor:pointer}.btn-secondary{background:#475467}.status-badge{display:inline-block;padding:.2rem .5rem;border-radius:999px;font-size:.8rem;font-weight:600;text-transform:capitalize}.status-badge.ok{background:#dcfce7;color:#166534}.status-badge.warn{background:#fee2e2;color:#991b1b}.sales-actions{display:flex;gap:.4rem;flex-wrap:wrap}.icon-action-btn{width:32px;height:32px;padding:0;border-radius:.5rem;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff}.icon-action-btn svg{width:15px;height:15px}.icon-action-btn-secondary{background:#475467}.sales-detail-panel{border:1px solid var(--border);border-radius:.75rem;padding:1rem;background:#fbfdfd}.sales-modal-card{width:min(980px,100%);max-height:88vh;overflow:auto}.sales-detail-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.75rem}.sales-detail-header h3{margin:0;font-size:1.05rem}.sales-detail-header p{margin:.2rem 0 0;color:var(--muted)}.sales-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;margin-bottom:.75rem}.sales-meta-card{border:1px solid var(--border);border-radius:.6rem;padding:.7rem;background:#fff}.sales-meta-card strong{font-size:.78rem;color:var(--muted);text-transform:uppercase}.sales-meta-card p{margin:.3rem 0;font-weight:600}.sales-meta-card small{color:var(--muted)}.sales-items-wrap{border:1px solid var(--border);border-radius:.6rem;background:#fff;overflow:hidden}.sales-summary-bar{margin-top:.8rem;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:1rem;align-items:center}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a73;display:grid;place-items:center;z-index:2000;padding:1rem}.modal-card{width:min(880px,100%);background:#fff;border-radius:.8rem;border:1px solid var(--border);padding:1rem;box-shadow:0 18px 45px #10182838}.modal-card h3{margin-top:0}.form-field{display:grid;gap:.3rem}.form-field label{font-size:.86rem;color:var(--muted);font-weight:600}.product-form{display:grid;gap:1rem}.product-form-section{border:1px solid var(--border);border-radius:.7rem;padding:.8rem;background:#fcfdfd}.product-form-section h4{margin:0 0 .7rem;font-size:.95rem}.product-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.7rem}.product-form-actions{display:flex;justify-content:flex-end;gap:.6rem}.field-hint{color:var(--muted);font-size:.78rem}.muted{color:var(--muted);font-size:.82rem}.pos-page{display:grid;gap:1rem}.pos-header h2{margin:0}.pos-header p{margin:.35rem 0 0;color:var(--muted)}.pos-notice{margin:0;background:#dcfce7;color:#166534;border:1px solid #86efac;border-radius:.5rem;padding:.55rem .7rem}.pos-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem}.pos-panel-header{display:flex;justify-content:space-between;align-items:center;gap:.7rem;margin-bottom:.8rem}.pos-panel-header h3{margin:0}.pos-search{width:min(320px,100%)}.pos-products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem;max-height:68vh;overflow:auto;padding-right:.2rem}.pos-product-card{border:1px solid var(--border);border-radius:.7rem;padding:.75rem;background:#fff;display:grid;gap:.65rem}.pos-product-card h4{margin:0;font-size:.96rem}.pos-product-meta{display:flex;justify-content:space-between;align-items:center}.stock-ok{font-size:.78rem;color:#166534;font-weight:600}.stock-low{font-size:.78rem;color:#b42318;font-weight:600}.pos-cart-table-wrap{max-height:48vh;overflow:auto;border:1px solid var(--border);border-radius:.65rem}.qty-controls{display:flex;align-items:center;gap:.25rem}.qty-controls input{width:64px;text-align:center}.qty-controls button{width:30px;padding:.4rem}.pos-summary{margin-top:.9rem;border-top:1px solid var(--border);padding-top:.9rem;display:grid;gap:.7rem}.pos-totals{display:grid;gap:.35rem}.pos-totals p{margin:0;display:flex;justify-content:space-between}.pos-totals .grand{font-size:1.05rem;border-top:1px dashed var(--border);padding-top:.5rem}.pos-checkout{padding:.7rem;font-weight:700}.report-page{display:grid;gap:1rem}.report-header h2{margin:0}.report-header p{margin:.35rem 0 0;color:var(--muted)}.report-toolbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.7rem;align-items:end}.report-actions{display:flex;gap:.5rem;flex-wrap:wrap}.report-result-head{display:flex;justify-content:space-between;align-items:center;gap:.7rem}.report-result-head h3{margin:0}.report-result-head small{color:var(--muted)}.report-kpi-grid{margin-top:.8rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.7rem}.report-kpi-card{border:1px solid var(--border);border-radius:.65rem;padding:.75rem;background:#fcfdfd}.report-kpi-card p{margin:0;color:var(--muted);font-size:.84rem}.report-kpi-card strong{margin-top:.35rem;display:block;font-size:1.15rem}.report-table-wrap{border:1px solid var(--border);border-radius:.65rem;overflow:auto}.table-pagination{margin-top:.7rem;display:flex;justify-content:space-between;align-items:center;gap:.7rem;flex-wrap:wrap}.table-pagination-actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.table-pagination span{color:var(--muted);font-size:.85rem}.dashboard-page{display:grid;gap:1rem}.dashboard-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.dashboard-header h2{margin:0}.dashboard-header p{margin:.35rem 0 0;color:var(--muted)}.dashboard-toolbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.dashboard-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.85rem}.dashboard-kpi h3{margin:0;font-size:.95rem;color:var(--muted)}.dashboard-kpi p{margin:.45rem 0 0;font-size:1.25rem;font-weight:700}.dashboard-section-head{display:flex;justify-content:space-between;align-items:center;gap:.7rem}.dashboard-section-head h3{margin:0}.dashboard-section-head small{color:var(--muted)}.dashboard-chart-wrap{width:100%;overflow-x:auto}.dashboard-chart{width:100%;min-width:640px;height:290px;display:block}.dashboard-trend-table-wrap{margin-top:.8rem;border:1px solid var(--border);border-radius:.6rem;max-height:260px;overflow:auto}.dashboard-trend-table td:last-child,.dashboard-trend-table th:last-child{text-align:right}.dashboard-two-col{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.dashboard-list{margin:.2rem 0 0;padding:0;list-style:none}.dashboard-list li{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--border)}.dashboard-list li:last-child{border-bottom:none}.login-page{min-height:100vh;display:grid;place-items:center;padding:1.4rem;background:radial-gradient(1200px 500px at 20% -10%,#d8f1ee 0%,transparent 60%),radial-gradient(900px 420px at 100% 100%,#e6f3ff 0%,transparent 55%),#f4f7fb}.login-shell{width:min(980px,100%);display:grid;grid-template-columns:1fr 1fr;border:1px solid #d7dee8;border-radius:1rem;overflow:hidden;background:#fff;box-shadow:0 30px 60px #0f172a1f}.login-panel{padding:1.8rem}.login-panel-brand{background:linear-gradient(165deg,#0f766e,#115e59 55%,#164e63);color:#fff}.login-badge{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;border:1px solid rgba(255,255,255,.35);margin-bottom:1rem}.login-panel-brand h1{margin:0;font-size:1.55rem;line-height:1.2}.login-panel-brand p{margin:.85rem 0 0;line-height:1.45;color:#ffffffe0}.login-highlights{margin:1.2rem 0 0;padding-left:1rem;display:grid;gap:.45rem;color:#fffffff0}.login-panel-form{background:#fff}.login-form{display:grid;gap:.9rem}.login-form h2{margin:0}.login-form p{margin:.35rem 0 0;color:var(--muted)}.login-error{margin:.25rem 0 0;color:#b42318;font-weight:600}.error{color:#b42318}@media (max-width: 900px){.top-header{padding:0 .65rem;gap:.35rem}.header-branding{min-width:auto}.header-branding h1{font-size:.86rem}.header-branding p{font-size:.72rem}.user-badge{min-width:auto}.user-menu-trigger{padding:.35rem .5rem}.sidebar{position:fixed;top:64px;left:0;bottom:0;width:250px;transform:translate(-100%);z-index:1250;border-right:1px solid var(--border);border-bottom:none;box-shadow:0 12px 30px #10182833}.sidebar.mobile-open{transform:translate(0)}.content,.sidebar-collapsed .content{margin-left:0;width:100%}.user-badge small{display:none}.split,.pos-layout{grid-template-columns:1fr}.pos-products-grid,.pos-cart-table-wrap{max-height:none}.dashboard-header{flex-direction:column;align-items:flex-start}.dashboard-two-col,.login-shell{grid-template-columns:1fr}.login-panel{padding:1.2rem}}
