*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px;
       color: #333; background: #f0f4f8; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header { background: linear-gradient(135deg,#1a3a5c 0%,#24527f 100%);
               color:#fff; padding:0; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.header-inner { display:flex; align-items:center; justify-content:space-between;
                flex-wrap:wrap; gap:8px; min-height:56px; }
.brand-logo { display:flex; align-items:center; padding:6px 0; text-decoration:none; }
.brand-logo img { height:42px; width:auto; display:block; }
nav { display:flex; align-items:center; flex-wrap:wrap; gap:2px; }
nav a { color:rgba(255,255,255,.8); text-decoration:none; padding:8px 12px;
        border-radius:6px; font-size:.875rem; transition:background .15s,color .15s; }
nav a:hover { background:rgba(255,255,255,.15); color:#fff; }
nav a.nav-logout { color:rgba(255,200,200,.9); margin-left:8px; }
nav a.nav-logout:hover { background:rgba(255,100,100,.2); color:#fff; }

/* ── Main ───────────────────────────────────────────────────────────── */
main { padding:28px 0; min-height:calc(100vh - 110px); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer { background:#e2e8f0; border-top:1px solid #cbd5e1;
               padding:12px 0; text-align:center; font-size:.8rem; color:#94a3b8; }

/* ── Auth / forms ───────────────────────────────────────────────────── */
.auth-box { max-width:420px; margin:48px auto; background:#fff; padding:36px;
            border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.1); }
.auth-box h1 { margin-bottom:24px; font-size:1.5rem; color:#1a3a5c; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-weight:600; margin-bottom:5px; color:#555; font-size:.875rem; }
.form-group input { width:100%; padding:10px 12px; border:1px solid #cbd5e1;
                    border-radius:6px; font-size:.9rem; transition:border-color .15s; }
.form-group input:focus { outline:none; border-color:#24527f;
                           box-shadow:0 0 0 3px rgba(36,82,127,.15); }
button[type=submit], .btn { display:inline-flex; align-items:center; gap:6px;
    margin-top:12px; padding:10px 20px; background:#1a3a5c; color:#fff; border:none;
    border-radius:6px; cursor:pointer; text-decoration:none; font-size:.9rem;
    font-weight:600; transition:background .15s, transform .1s; }
button[type=submit]:hover, .btn:hover { background:#24527f; transform:translateY(-1px); }
button[type=submit]:active, .btn:active { transform:translateY(0); }
.link-subtle { margin-left:16px; font-size:.85rem; color:#64748b; }
.link-subtle:hover { color:#1a3a5c; }
.btn-link-danger { background:none; border:none; color:#dc2626; cursor:pointer;
                   font-size:.875rem; padding:0; text-decoration:underline; }

/* ── Alerts ─────────────────────────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:.9rem; }
.alert-error   { background:#fef2f2; border:1px solid #fca5a5; color:#991b1b; }
.alert-success { background:#f0fdf4; border:1px solid #86efac; color:#166534; }

/* ── Admin ──────────────────────────────────────────────────────────── */
.admin-menu { list-style:none; margin-top:20px; }
.admin-menu li { margin-bottom:12px; }
.admin-menu a { font-size:1rem; color:#1a3a5c; text-decoration:none; }
.admin-menu a:hover { text-decoration:underline; }
.admin-table { border-collapse:collapse; width:100%; background:#fff;
               border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.admin-table th, .admin-table td { padding:10px 14px; border-bottom:1px solid #e2e8f0;
                                    text-align:left; font-size:.875rem; }
.admin-table th { background:#1a3a5c; color:#fff; }
.admin-table tr:last-child td { border-bottom:none; }
.admin-table td a { color:#1a3a5c; margin-right:8px; }

/* ── Orders table ───────────────────────────────────────────────────── */
.table-responsive { overflow-x:auto; border-radius:8px;
                    box-shadow:0 2px 8px rgba(0,0,0,.08); }
table { border-collapse:collapse; width:100%; background:#fff; font-size:.82rem; }
th, td { padding:9px 12px; border-bottom:1px solid #e2e8f0;
         text-align:left; vertical-align:top; }
th { background:#1a3a5c; color:#fff; white-space:nowrap; font-size:.8rem; }
tr:hover td { background:#f8fafc; }

/* ── Filter form ────────────────────────────────────────────────────── */
.filter-form { display:flex; gap:12px; align-items:center; flex-wrap:wrap;
               margin-bottom:20px; background:#fff; padding:14px 18px;
               border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.filter-form label { display:flex; align-items:center; gap:6px; font-size:.875rem; }
.filter-form input[type=date] { padding:6px 10px; border:1px solid #cbd5e1;
                                 border-radius:6px; font-size:.875rem; }

/* ── Empty state ────────────────────────────────────────────────────── */
.empty-message { color:#94a3b8; font-style:italic; padding:20px 0; }

/* Login logo */
.login-logo { text-align:center; margin-bottom:20px; }
.login-logo img { max-width:200px; height:auto; }