/* ═══════════════════════════════════════════════
   AGA Collections — Dashboard Shared Styles
═══════════════════════════════════════════════ */
/* Theme variables come from global.css */
.db-page { background: var(--dc-cream); min-height: calc(100vh - 72px); padding: 40px 0 72px; }
.db-wrap { display: flex; gap: 24px; align-items: flex-start; }
.db-col-side { width: 252px; flex-shrink: 0; position: sticky; top: 20px; }
.db-col-main { flex: 1; min-width: 0; }

/* ── Sidebar ── */
.dbs {
    background: var(--dc-dark);
    background-image: repeating-linear-gradient(-45deg,transparent,transparent 28px,rgba(22,20,38,.04) 28px,rgba(22,20,38,.04) 29px);
    position: relative; overflow: hidden;
}
.dbs::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background: linear-gradient(90deg,var(--dc-gold),var(--dc-gold-lt),var(--dc-gold));
}
.dbs-top {
    padding: 28px 22px 22px; text-align: center;
    border-bottom: 1px solid rgba(22,20,38,.1);
}
.dbs-avatar {
    width:56px; height:56px;
    background:rgba(22,20,38,.1); border:1px solid rgba(22,20,38,.3);
    display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
    font-family:'Fraunces',Georgia,serif; font-size:1.2rem; font-weight:300; color:#fff; /* --dc-gold is navy now, same as this panel */
}
.dbs-name  { font-family:'Fraunces',Georgia,serif; font-size:.95rem; font-weight:300; font-style:italic; color:#fff; line-height:1.3; margin-bottom:4px; }
.dbs-email { font-size:.67rem; color:rgba(255,255,255,.3); word-break:break-all; }
.dbs-nav { padding: 10px 0; }
.dbs-nav-link {
    display:flex; align-items:center; gap:12px; padding:11px 22px;
    font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
    color:rgba(255,255,255,.42); text-decoration:none;
    border-left:2px solid transparent;
    transition:color .15s, background .15s;
}
.dbs-nav-link i { font-size:1rem; flex-shrink:0; }
.dbs-nav-link:hover { color:rgba(255,255,255,.82); background:rgba(22,20,38,.05); }
.dbs-nav-link.is-active { color:#fff; border-left-color:#fff; background:rgba(255,255,255,.08); }
.dbs-foot { padding:14px 22px 22px; border-top:1px solid rgba(22,20,38,.08); }
.dbs-logout-btn {
    display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px;
    background:transparent; border:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.3); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
    cursor:pointer; font-family:'Inter',sans-serif;
    transition: border-color .15s, color .15s;
}
.dbs-logout-btn:hover { border-color:#ef4444; color:#ef4444; }

/* ── Cards ── */
.db-card { background:#fff; border:1px solid var(--dc-border); margin-bottom:20px; }
.db-card-hd {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 22px; border-bottom:1px solid var(--dc-border); background:var(--dc-cream);
}
.db-card-title { font-size:.6rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--dc-dark); }
.db-card-body { padding:22px; }

/* ── Page heading ── */
.db-ph { margin-bottom:22px; }
.db-ph-ey { font-size:.57rem; letter-spacing:.32em; text-transform:uppercase; color:var(--dc-gold); display:block; margin-bottom:5px; }
.db-ph h1 { font-family:'Fraunces',Georgia,serif; font-size:clamp(1.3rem,2.5vw,1.75rem); font-weight:300; font-style:italic; color:var(--dc-dark); margin:0; line-height:1.2; }

/* ── Status badges ── */
.db-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; font-size:.62rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; border:1px solid; }
.db-badge-dot { width:5px; height:5px; border-radius:50%; }
.db-badge.pending    { background:#fffbf0; color:#b45309; border-color:#fde68a; } .db-badge.pending .db-badge-dot    { background:#f59e0b; }
.db-badge.processing { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; } .db-badge.processing .db-badge-dot { background:#3b82f6; }
.db-badge.confirmed  { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; } .db-badge.confirmed .db-badge-dot  { background:#22c55e; }
.db-badge.shipped    { background:#f0fdfa; color:#0f766e; border-color:#99f6e4; } .db-badge.shipped .db-badge-dot    { background:#14b8a6; }
.db-badge.delivered  { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; } .db-badge.delivered .db-badge-dot  { background:#22c55e; }
.db-badge.cancelled  { background:#fff5f5; color:#c0392b; border-color:#fca5a5; } .db-badge.cancelled .db-badge-dot  { background:#ef4444; }

/* ── Table ── */
.db-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.db-table thead th { font-size:.59rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--dc-muted); padding:10px 16px; border-bottom:2px solid var(--dc-border); background:var(--dc-cream); text-align:left; white-space:nowrap; }
.db-table tbody td { padding:13px 16px; border-bottom:1px solid var(--dc-border); color:var(--dc-dark); vertical-align:middle; }
.db-table tbody tr:last-child td { border-bottom:none; }
.db-table tbody tr:hover td { background:#fdfcfb; }

/* ── Buttons ── */
.db-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 16px; font-family:'Inter',sans-serif; font-size:.64rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; border:1px solid; cursor:pointer; transition:background .18s,color .18s,border-color .18s; }
.db-btn-sm { padding:5px 12px; font-size:.6rem; }
.db-btn-dark { background:var(--dc-dark); border-color:var(--dc-dark); color:#fff; }
.db-btn-dark:hover { background:var(--dc-gold); border-color:var(--dc-gold); color:#fff; }
.db-btn-outline { background:transparent; border-color:var(--dc-border); color:var(--dc-muted); }
.db-btn-outline:hover { border-color:var(--dc-gold); color:var(--dc-dark); }
.db-btn-danger { background:transparent; border-color:#fca5a5; color:#c0392b; }
.db-btn-danger:hover { background:#fff5f5; }

/* ── Alerts ── */
.db-alert { display:flex; align-items:center; gap:10px; padding:12px 16px; font-size:.8rem; border:1px solid; margin-bottom:20px; }
.db-alert.success { background:#f0fff4; border-color:#a3d9b3; color:#217a48; }
.db-alert.danger  { background:#fff5f5; border-color:#fca5a5; color:#c0392b; }

/* ── Empty state ── */
.db-empty { text-align:center; padding:52px 24px; }
.db-empty i { font-size:2.4rem; color:var(--dc-border); margin-bottom:14px; display:block; }
.db-empty-title { font-family:'Fraunces',Georgia,serif; font-size:1.05rem; font-weight:300; font-style:italic; color:var(--dc-dark); margin-bottom:6px; }
.db-empty p { font-size:.8rem; color:var(--dc-muted); margin:0; }

/* ── Form inputs ── */
.db-label { display:block; font-size:.63rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dc-muted); margin-bottom:6px; }
.db-input, .db-select { display:block; width:100%; padding:10px 14px; font-size:.875rem; font-family:'Inter',sans-serif; color:var(--dc-dark); background:#fff; border:1px solid var(--dc-border); border-radius:0; outline:none; transition:border-color .18s,box-shadow .18s; appearance:none; -webkit-appearance:none; }
.db-input::placeholder { color:#c6c5d1; font-size:.83rem; }
.db-input:focus, .db-select:focus { border-color:var(--dc-gold); box-shadow:inset 3px 0 0 var(--dc-gold); }

/* ── Responsive ── */
@media (max-width:900px) {
    .db-col-side { width:100%; position:static; }
    /* stretch: with flex-start the main column took its content's width (wide tables) and was cut off on phones */
    .db-wrap { flex-direction:column; gap:16px; align-items:stretch; }
    .dbs { display:grid; grid-template-columns:auto 1fr auto; }
    .dbs::before { display:none; }
    .dbs-top { border-bottom:none; border-right:1px solid rgba(22,20,38,.1); padding:14px 18px; display:flex; align-items:center; gap:12px; text-align:left; }
    .dbs-avatar { margin:0; flex-shrink:0; width:42px; height:42px; font-size:1rem; }
    .dbs-nav { display:flex; flex-wrap:wrap; padding:6px 10px; }
    .dbs-nav-link { padding:8px 12px; border-left:none; border-bottom:2px solid transparent; font-size:.65rem; }
    .dbs-nav-link.is-active { border-left:none; border-bottom-color:#fff; background:none; }
    .dbs-foot { padding:8px 12px; border-top:none; border-left:1px solid rgba(22,20,38,.1); display:flex; align-items:center; }
    .db-page { padding:16px 0 40px; }
}
@media (max-width:520px) {
    .dbs { grid-template-columns:1fr; }
    .dbs-top { border-right:none; border-bottom:1px solid rgba(22,20,38,.1); }
    .dbs-foot { border-left:none; border-top:1px solid rgba(22,20,38,.08); }
    .db-card-body { padding:16px; }
}