:root { --ink:#17233d; --muted:#718096; --line:#e8edf4; --surface:#fff; --canvas:#f5f7fb; --navy:#16233f; --teal:#16b8a6; }
html { min-height:100%; }
body { min-height:100vh; margin:0; background:var(--canvas); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:15px; }
#main-menu { min-height:72px; padding:0 3%; background:var(--navy); box-shadow:0 3px 18px rgba(18,31,58,.12); }
.navbar-brand { display:flex; align-items:center; gap:10px; color:#fff!important; font-size:20px; font-weight:700; letter-spacing:-.4px; }
.navbar-brand small { display:block; color:#99a9c6; font-size:10px; font-weight:500; letter-spacing:.4px; text-transform:uppercase; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#23d6c2,#168dcb); color:#fff; font-weight:800; }
.nav-section-label { margin:0 16px 0 34px; color:#7184a7; font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; }
.navbar-nav .nav-link { padding:25px 12px; color:#c5d0e3!important; font-size:13px; font-weight:600; }
.navbar-nav .nav-link:hover, .navbar-nav .show>.nav-link { color:#fff!important; }
.nav-icon { display:inline-block; width:18px; margin-right:4px; color:#69d8cd; font-size:16px; text-align:center; }
.dropdown-menu { margin-top:0; border:0; border-radius:10px; box-shadow:0 12px 30px rgba(18,31,58,.16); padding:8px; }
.dropdown-item { padding:9px 12px; border-radius:6px; color:var(--ink); font-size:13px; }
.dropdown-item:hover { background:#eef8f7; color:#087f75; }
.navbar-user { margin-left:auto; color:#adbad0; font-size:12px; }
.status-dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#35d5a0; box-shadow:0 0 0 3px rgba(53,213,160,.12); }
#main-content { max-width:1540px; min-height:calc(100vh - 126px); padding:42px 4% 64px; }
h1,h2,h3,h4,h5 { color:var(--ink); font-weight:700; letter-spacing:-.35px; }
h1 { font-size:34px; } h2 { font-size:24px; } h3 { font-size:19px; }
.welcome-panel { display:flex; align-items:center; justify-content:space-between; min-height:220px; margin-bottom:42px; padding:42px 54px; overflow:hidden; border-radius:18px; background:linear-gradient(115deg,#1c2d50 0%,#234269 70%,#176c78 100%); color:#fff; box-shadow:0 16px 32px rgba(25,45,79,.14); }
.welcome-panel h1 { margin:7px 0 10px; color:#fff; font-size:36px; }
.welcome-panel .lead { max-width:570px; margin:0; color:#cbd8eb; font-size:16px; }
.eyebrow { margin:0; color:#17b9a8; font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; }
.welcome-panel .eyebrow { color:#69e3d4; }
.welcome-orb { display:grid; place-items:center; width:150px; height:150px; margin-right:8%; border:1px solid rgba(255,255,255,.2); border-radius:50%; color:rgba(255,255,255,.8); font-size:76px; font-weight:800; box-shadow:0 0 0 22px rgba(255,255,255,.035),0 0 0 44px rgba(255,255,255,.025); }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:17px; }
.section-heading h2 { margin:4px 0 0; } .section-note { color:var(--muted); font-size:12px; }
.quick-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; margin-bottom:42px; }
.dashboard-grid--charts { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dashboard-card { padding:25px 28px 22px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:0 5px 16px rgba(31,48,80,.045); }
.card-heading { display:flex; align-items:start; justify-content:space-between; gap:18px; } .card-heading h2 { margin:4px 0 0; }
.card-link { color:#0d988d; font-size:12px; font-weight:700; white-space:nowrap; } .card-link:hover { color:#086b64; text-decoration:none; }
.chart-period { color:var(--muted); font-size:11px; font-weight:700; white-space:nowrap; }
.card-description { margin:5px 0 0; color:var(--muted); font-size:13px; }
.sales-chart { display:block; width:100%; max-height:305px; object-fit:contain; margin:8px auto -8px; }
.page-intro { margin-bottom:24px; } .page-intro h1 { margin:5px 0 7px; } .page-intro p:not(.eyebrow) { margin:0; color:var(--muted); }
.app-message { margin-bottom:22px; border:0; border-radius:9px; font-size:13px; }
.alert-error { color:#8a2638; background:#ffe8ec; }
.inventory-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.inline-action { margin:0; white-space:nowrap; }
.inventory-movement-card,.inventory-table-card { margin-bottom:28px; padding:26px 28px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:0 5px 16px rgba(31,48,80,.045); }
.movement-toolbar { display:flex; gap:16px; margin-top:20px; } .movement-toolbar .form-group { flex:0 0 260px; } .movement-toolbar .movement-note { flex:1; }
.movement-toolbar label { margin-bottom:6px; color:#52627b; font-size:12px; font-weight:700; }
.movement-line { display:grid; grid-template-columns:minmax(0,1fr) 130px 32px; gap:10px; align-items:center; margin:10px 0; }
.movement-quantity { text-align:right; } .remove-line { padding:0; color:#a0aec0; font-size:25px; line-height:1; text-decoration:none!important; } .remove-line:hover { color:#d65366; }
.movement-actions { display:flex; justify-content:space-between; gap:12px; margin-top:18px; }
.inventory-table-card { overflow:hidden; } .inventory-table { margin:17px 0 0; min-width:1120px; } .inventory-table th { white-space:nowrap; } .inventory-table td { font-size:13px; } .inventory-table td:first-child { min-width:220px; } .inventory-table td small { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
.stock-badge { display:inline-block; padding:4px 7px; border-radius:20px; font-size:10px; font-weight:800; white-space:nowrap; } .stock-ok { background:#e3f8f0; color:#218865; } .stock-warning { background:#fff3d9; color:#a56c00; } .stock-critical { background:#ffe7eb; color:#c13f55; } .stock-neutral { background:#edf1f6; color:#607086; }
.amazon-fee { color:#b05327!important; } .muted { color:var(--muted); }
.recent-movements { margin-top:36px; }
.analytics-note { display:flex; flex-direction:column; gap:7px; padding:22px 24px; border:1px solid #d8eeeb; border-radius:12px; background:#f0fbf9; color:#226d68; } .analytics-note span { color:#5b8582; font-size:13px; }
.quick-card { display:flex; align-items:center; gap:13px; min-height:104px; padding:20px; border:1px solid var(--line); border-radius:13px; background:var(--surface); color:var(--ink); text-decoration:none!important; box-shadow:0 5px 16px rgba(31,48,80,.035); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.quick-card:hover { transform:translateY(-3px); border-color:#cdd9e8; box-shadow:0 12px 24px rgba(31,48,80,.10); }
.quick-card strong,.quick-card small { display:block; } .quick-card strong { font-size:14px; } .quick-card small { margin-top:4px; color:var(--muted); font-size:11px; line-height:1.35; }
.quick-icon { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border-radius:11px; font-size:20px; font-weight:700; }
.icon-teal { background:#e3f8f5; color:#0d9d90; } .icon-violet { background:#eeeafd; color:#7563db; } .icon-amber { background:#fff3d9; color:#d39418; } .icon-blue { background:#e4efff; color:#3a79cf; }
.arrow { margin-left:auto; color:#9aa9bf; font-size:20px; }
.table { background:var(--surface); border-radius:10px; overflow:hidden; } .table thead th { border-top:0; background:#f7f9fc; color:#65738a; font-size:11px; letter-spacing:.4px; text-transform:uppercase; } .table td { vertical-align:middle; border-color:var(--line); }
.card { border:1px solid var(--line); border-radius:12px; box-shadow:0 5px 18px rgba(31,48,80,.045); } .card-header { border-bottom:1px solid var(--line); background:#fff; font-weight:700; }
.form-control,.custom-select { border-color:#dbe3ee; border-radius:7px; } .form-control:focus,.custom-select:focus { border-color:#56cfc2; box-shadow:0 0 0 .18rem rgba(22,184,166,.14); }
.btn { border-radius:7px; font-weight:600; } .btn-primary { background:#149d91; border-color:#149d91; } .btn-primary:hover { background:#0d8379; border-color:#0d8379; }
#main-footer { padding:16px 4%; border-top:1px solid var(--line); background:#fff; color:#91a0b5; font-size:11px; } #main-footer p { margin:0; } #main-footer strong { margin-right:10px; color:#53647e; } #main-footer span { padding-left:10px; border-left:1px solid #dbe3ee; }
@media (max-width: 992px) { .nav-section-label { display:none; } .navbar-nav .nav-link { padding:10px 12px; } .navbar-user { margin:10px 12px; } .welcome-panel { padding:32px; } .welcome-orb { margin-right:2%; } .quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 992px) { .dashboard-grid--charts { grid-template-columns:1fr; } }
@media (max-width: 576px) { #main-content { padding:25px 18px 48px; } .welcome-panel { min-height:0; padding:28px 24px; } .welcome-panel h1 { font-size:28px; } .welcome-orb { display:none; } .quick-grid { grid-template-columns:1fr; } .section-note { display:none; } .dashboard-card { padding:21px 18px; } .card-heading { display:block; } .card-link { display:inline-block; margin-top:12px; } .inventory-intro,.movement-toolbar { display:block; } .inline-action { margin-top:16px; } .movement-toolbar .form-group { margin-bottom:14px; } .movement-line { grid-template-columns:minmax(0,1fr) 90px 25px; } .inventory-movement-card,.inventory-table-card { padding:20px 17px; } }
.login-shell { display:grid; place-items:center; min-height:100vh; padding:24px; background:linear-gradient(135deg,#16233f,#1b4664); }
.login-card { width:min(100%,410px); padding:42px; border-radius:18px; background:#fff; box-shadow:0 24px 60px rgba(7,18,39,.22); }
.login-brand { display:flex; align-items:center; gap:10px; margin-bottom:34px; color:var(--ink); font-size:20px; }
.login-card h1 { margin:8px 0 5px; font-size:31px; } .login-copy { margin:0 0 26px; color:var(--muted); }
.login-form p { margin-bottom:17px; } .login-form label { display:block; margin-bottom:6px; color:#52627b; font-size:12px; font-weight:700; }
.login-form input[type=text],.login-form input[type=password] { display:block; width:100%; height:42px; padding:8px 11px; border:1px solid #dbe3ee; border-radius:7px; }
.login-form input[type=text]:focus,.login-form input[type=password]:focus { outline:0; border-color:#56cfc2; box-shadow:0 0 0 .18rem rgba(22,184,166,.14); }
.login-form .helptext { display:block; margin-top:5px; color:var(--muted); font-size:11px; }