:root{--font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;--color-bg: #f3f5f8;--color-surface: #ffffff;--color-primary: #243b7d;--color-primary-600: #1f3570;--color-muted: #586069;--color-text: #17202a;--color-danger: #d03838;--radius-sm: 6px;--radius-md: 10px;--card-shadow: 0 2px 10px rgba(17,24,39,.06);--max-width: 1300px;--gap: 12px;font-family:var(--font-sans)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{max-width:var(--max-width);margin:0 auto;padding:28px;width:100%}.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}.row{display:flex;gap:var(--gap);flex-wrap:wrap}.col{flex:1 1 0}.card{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--card-shadow);padding:16px}.dashboard-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:14px 0 20px}.dashboard-cards .card{padding:18px;border-radius:calc(var(--radius-md) + 2px)}.dashboard-cards.financial-cards{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}@media (max-width: 640px){.dashboard-cards{grid-template-columns:1fr}}header h1{margin-bottom:4px}header p{margin-top:0;color:#586069}.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:20px 0}.cards article{background:var(--color-surface);padding:16px;border-radius:var(--radius-md);box-shadow:var(--card-shadow)}.cards h3{margin:0 0 8px;font-size:13px;text-transform:uppercase;color:var(--color-muted)}.cards p{margin:0;font-size:24px;font-weight:700}.tabs{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}.tabs button{border:0;background:#eef3fb;padding:10px 14px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s ease}.tabs button:hover{background:#e4ebfb}.tabs .active{background:var(--color-primary);color:#fff}.panel{background:var(--color-surface);padding:16px;border-radius:var(--radius-md);box-shadow:var(--card-shadow)}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.toolbar-actions{display:flex;gap:8px;align-items:center}.file-label input{display:none}.filter-row{display:grid;gap:10px;grid-template-columns:1fr 180px 220px auto;margin:12px 0}.form-grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));margin:14px 0}.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:#243b53}.form-grid input,.form-grid textarea,.form-grid select,.filter-row input,.filter-row select,.sale-cart-form input,.sale-cart-form select,.sale-cart-form textarea{padding:10px 12px;border:1px solid #e3e8ef;border-radius:var(--radius-sm);font:inherit;transition:border-color .12s ease,box-shadow .12s ease}.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 4px #243b7d14}.form-grid textarea,.sale-cart-form textarea{min-height:80px;resize:vertical}.full-width{grid-column:1 / -1}.form-actions{display:flex;justify-content:flex-end;gap:10px}.cart-add-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin:10px 0}.sales-summary-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}.sales-summary-cards article{background:#f5f8ff;border:1px solid #dde5fb;padding:10px;border-radius:var(--radius-sm)}.sales-summary-cards h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;color:#475467}.sales-summary-cards p{margin:0;font-size:20px;font-weight:700}.sale-totals{background:#f8fafc;border:1px solid #e2e8f0;padding:12px;border-radius:var(--radius-sm);margin-bottom:10px}.sale-totals p,.sale-totals h3{margin:4px 0}table{width:100%;border-collapse:collapse;margin-bottom:14px}th,td{border-bottom:1px solid #e8ecf2;text-align:left;padding:12px 10px;vertical-align:top}.warning{color:#c0392b;font-weight:700}.muted{color:#667085}.action-row{display:flex;gap:8px}.pagination-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.btn{border:none;padding:10px 14px;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;transition:transform .06s ease,box-shadow .06s ease,background .12s ease}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-600)}.btn-light{background:#eef3fb;color:var(--color-text)}.btn-danger{background:var(--color-danger);color:#fff}.btn-outline{background:transparent;border:1px solid #e6eef8;color:var(--color-text)}.error-text{color:#b42318;font-weight:600;margin:0 0 10px}.success-text{color:#067647;font-weight:600;margin:0 0 10px}@media (max-width: 980px){.form-grid,.filter-row,.cart-add-row{grid-template-columns:1fr}.panel-header{flex-direction:column;align-items:flex-start}.sales-summary-cards{grid-template-columns:1fr}}.sales-container{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start}.sales-search{width:100%;margin:12px 0;padding:10px;border:1px solid #ccd6e0;border-radius:8px}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.product-card{border:1px solid #dbe5f0;background:var(--color-surface);border-radius:var(--radius-sm);padding:12px;text-align:left;display:grid;gap:6px;cursor:pointer}.product-card:disabled{cursor:not-allowed;opacity:.6}.purchases-layout{display:grid;grid-template-columns:1fr 460px;gap:18px;align-items:start}.purchase-form label{display:block;margin-bottom:10px;font-weight:600}.purchase-form input,.purchase-form select,.purchase-form textarea{width:100%;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid #e6eef8;font:inherit}.purchase-item-row{display:grid;grid-template-columns:1fr 84px 120px auto;gap:8px;align-items:center;margin:10px 0 14px}.purchase-item-row select,.purchase-item-row input{min-width:0}.purchase-item-row .btn{padding:8px 10px}.purchase-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}.purchase-actions p{margin:0;font-size:15px}.history-items-list{margin:6px 0 0;padding-left:18px}@media (max-width: 980px){.purchases-layout{grid-template-columns:1fr}.purchase-item-row{grid-template-columns:1fr 80px 100px auto}}@media (max-width: 520px){.purchase-item-row{grid-template-columns:1fr}.purchase-item-row .btn{justify-self:start}.purchase-actions{flex-direction:column;align-items:stretch}}.sales-cart-panel{position:sticky;top:20px}.cart-list{display:grid;gap:10px;margin-bottom:12px}.cart-item{border:1px solid #e5eaf1;border-radius:8px;padding:10px;display:grid;gap:10px}.cart-item p{margin:4px 0 0}.cart-controls{display:grid;grid-template-columns:80px auto;gap:8px}.cart-controls input,.bill-form input,.bill-form select{padding:8px;border:1px solid #ccd6e0;border-radius:8px}.bill-form{display:grid;gap:10px;margin-bottom:12px}.bill-form label{display:grid;gap:6px;font-size:14px;color:#243b53}.complete-sale-btn{width:100%;font-size:16px;padding:12px}@media (max-width: 980px){.sales-container{grid-template-columns:1fr}.sales-cart-panel{position:static}}.app-nav{max-width:var(--max-width);margin:0 auto;padding:12px 24px;display:flex;flex-direction:column;background:var(--color-surface);border-bottom:1px solid #e8ecf2}.nav-header{display:flex;justify-content:space-between;align-items:center;width:100%}.nav-brand{font-weight:800;font-size:1.1rem;color:var(--color-primary)}.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:#475467}.nav-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;width:100%}.nav-user{display:flex;align-items:center;gap:12px}@media (max-width: 1024px){.menu-toggle{display:block}.nav-links{display:none;flex-direction:column;align-items:stretch;gap:8px;padding:12px 0}.nav-links.open{display:flex}.nav-links .btn{text-align:left;justify-content:flex-start}.nav-spacer{display:none}.nav-user{margin-top:8px;padding-top:12px;border-top:1px solid #f0f3f7;justify-content:space-between}}.table-container{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1rem;border-radius:var(--radius-sm);border:1px solid #e8ecf2}table{width:100%;border-collapse:collapse;min-width:600px}@media (max-width: 768px){.app{padding:12px}.app-nav{padding:0 12px}.panel{padding:12px}.pagination-row{flex-direction:column;align-items:stretch;text-align:center}.action-row{justify-content:center;flex-wrap:wrap}.mobile-stack-table table,.mobile-stack-table thead,.mobile-stack-table tbody,.mobile-stack-table th,.mobile-stack-table td,.mobile-stack-table tr{display:block}.mobile-stack-table thead tr{position:absolute;top:-9999px;left:-9999px}.mobile-stack-table tr{border:1px solid #e6edf6;margin-bottom:10px;border-radius:var(--radius-sm);overflow:hidden}.mobile-stack-table table{min-width:0;width:100%}.mobile-stack-table td{display:flex;align-items:center;gap:8px;border:none;border-bottom:1px solid #f1f5f9;padding:6px 10px;text-align:left}.mobile-stack-table td:last-child{border-bottom:none}.mobile-stack-table td:before{content:attr(data-label);flex:0 0 22%;color:var(--color-muted);font-weight:600;padding-right:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.mobile-stack-table td>*{flex:1 1 auto;min-width:0}.mobile-stack-table td .action-row{gap:6px}.mobile-stack-table td .btn{padding:6px 8px;font-size:13px}.mobile-stack-table td .status-pill{font-size:12px;padding:4px 8px}.mobile-stack-table td .action-row{display:flex;gap:6px;flex:0 0 auto;justify-content:flex-end;align-items:center}.mobile-stack-table td .action-row .btn{white-space:nowrap;padding:6px 8px}@media (max-width: 420px){.mobile-stack-table td:before{flex:0 0 18%;font-size:12px}.mobile-stack-table td{padding:6px 8px}}}.history-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end}.panel-header h2{margin:0;font-size:1.05rem}.history-filters label{display:flex;flex-direction:column;gap:6px;font-weight:600}.history-filters input,.history-filters select{width:100%;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid #e6eef8}.panel .action-row .btn{padding:8px 10px}.status-pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#e6f4ea;color:#0f5132;font-weight:700;font-size:13px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#060a0f73;display:grid;place-items:center;z-index:60;padding:20px}.modal-card{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:0 10px 30px #02061740;max-width:880px;width:100%;padding:18px}.modal-card .panel-header{margin-bottom:12px}.modal-items-list{margin:8px 0 0;padding-left:18px}.table-container .action-row .btn{padding:6px 10px;font-size:13px}thead th{text-align:left;border-bottom:1px solid #e8ecf2}tbody td{vertical-align:middle}@media (max-width: 640px){.panel{padding:12px}.history-filters{grid-template-columns:1fr}.panel .action-row{gap:6px}}.login-page{min-height:calc(100vh - 40px);display:grid;place-items:center}.login-card{width:min(420px,100%)}.btn:focus,.menu-toggle:focus,input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 4px #243b7d14;border-color:var(--color-primary)}.login-form{display:grid;gap:12px}.login-form label{display:grid;gap:6px}.login-form input{padding:10px;border:1px solid #ccd6e0;border-radius:8px}.password-container{position:relative;display:flex}.password-container input{flex:1;padding-right:40px}.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#667085}.password-toggle:hover{color:#17202a}.chart-section{margin-top:18px}.mini-chart{display:flex;gap:12px;align-items:flex-end;padding:12px 6px}.mini-chart-col{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:36px}.mini-chart-value{font-size:12px;color:var(--color-muted)}.mini-chart-bar{width:28px;background:linear-gradient(180deg,var(--color-primary),var(--color-primary-600));border-radius:6px 6px 4px 4px;transition:transform .12s ease}.mini-chart-bar:hover{transform:translateY(-4px)}.mini-chart-label{font-size:12px;color:var(--color-muted)}.table-container{background:transparent;border-radius:var(--radius-sm)}thead th{background:#fbfdff;position:sticky;top:0;z-index:1;font-weight:700}tbody tr:nth-child(2n){background:#fbfdff}td,th{padding:14px 12px}@media (max-width: 480px){.mini-chart{gap:8px}.mini-chart-col{min-width:28px}.mini-chart-bar{width:18px}}
