/* ============================= TOKENS (shared with front page) ============================= */
:root{
  --maroon:#5C1030;
  --maroon-deep:#3C0A20;
  --magenta:#E01C7B;
  --magenta-soft:#F0509E;
  --cyan:#2FC6E8;
  --blue:#1F6FD1;
  --yellow:#FFCE33;
  --ink:#1A1114;
  --ink-soft:#4a3a40;
  --ink-50:rgba(26,17,20,.5);
  --paper:#FBF8F6;
  --paper-dim:#F2ECE9;
  --paper-card:#FFFFFF;
  --line:rgba(26,17,20,0.1);
  --line-strong:rgba(26,17,20,0.2);
  --shadow:0 20px 60px -20px rgba(60,10,32,0.25);
  --shadow-soft:0 10px 30px -12px rgba(60,10,32,0.18);
  --radius-lg:28px;
  --radius-md:20px;
  --radius-sm:12px;
  --ease:cubic-bezier(.16,.84,.44,1);
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-.01em;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:999px; font-weight:600; font-size:14px; cursor:pointer; border:none; transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.btn-primary{background:linear-gradient(135deg, var(--magenta), var(--maroon)); color:#fff; box-shadow:0 10px 26px -10px rgba(224,28,123,.5);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-primary:disabled{opacity:.5; cursor:not-allowed; transform:none;}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line-strong);}
.btn-ghost:hover{border-color:var(--maroon); color:var(--maroon);}
.btn-danger{background:transparent; color:var(--magenta); border:1.5px solid var(--magenta);}
.btn-danger:hover{background:rgba(224,28,123,.08);}
.btn-sm{padding:9px 15px; font-size:13px;}

/* ============================= SHELL ============================= */
.dash-shell{display:flex; min-height:100vh;}
.dash-sidebar{width:240px; max-width:84vw; flex-shrink:0; border-right:1px solid var(--line); background:var(--paper-card); display:flex; flex-direction:column; padding:22px 18px; position:sticky; top:0; height:100vh;}
.dash-brand{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-size:16px; font-weight:700; padding:0 8px 22px;}
.dash-brand .tag{font-family:var(--font-mono); font-size:10px; color:var(--magenta); text-transform:uppercase; letter-spacing:.1em; display:block; margin-top:2px; font-weight:500;}
.dash-brand img{width:26px; height:26px; border-radius:50%; flex-shrink:0;}
.dash-nav{display:flex; flex-direction:column; gap:2px; flex:1;}
.dash-nav a{display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:var(--radius-sm); font-size:14px; color:var(--ink-soft); transition:background .2s, color .2s;}
.dash-nav a svg{width:16px; height:16px; flex-shrink:0; opacity:.85;}
.dash-nav a:hover{background:rgba(224,28,123,.06); color:var(--maroon);}
.dash-nav a.active{background:rgba(224,28,123,.08); color:var(--magenta); font-weight:600;}
.dash-sidebar-foot{border-top:1px solid var(--line); padding-top:14px; margin-top:14px;}
.dash-user{font-size:13.5px; font-weight:600; padding:0 8px 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dash-user span{display:block; font-weight:400; font-size:12px; color:var(--ink-50); font-family:var(--font-mono); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dash-sidebar-foot .btn{width:100%;}

.dash-main{flex:1; min-width:0;}
.dash-topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 32px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(251,248,246,.9); backdrop-filter:blur(10px); z-index:5;}
.topbar-left{display:flex; align-items:center; gap:14px; min-width:0;}
.topbar-right{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.topbar-left h1{overflow-wrap:break-word; font-size:22px;}
.dash-topbar .sub{margin-top:3px; font-size:13px; color:var(--ink-50); overflow-wrap:break-word;}
.dash-content{padding:28px 32px 60px; max-width:1180px;}
.mobile-menu-btn{display:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--ink); cursor:pointer; align-items:center; justify-content:center; flex-shrink:0;}

/* ============================= CARDS / GRID ============================= */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:28px;}
.stat-card{background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; box-shadow:var(--shadow-soft);}
.stat-card .k{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-50);}
.stat-card .v{margin-top:10px; font-size:26px; font-family:var(--font-display);}
.stat-card .v.accent{color:var(--magenta);}
.stat-card .d{margin-top:6px; font-size:12.5px; color:var(--ink-50);}

.card{background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-md); padding:24px; margin-bottom:22px; box-shadow:var(--shadow-soft);}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap;}
.card-head h2{font-size:18px;}
.card-head .sub{font-size:12.5px; color:var(--ink-50); margin-top:3px;}

/* ============================= TABLE ============================= */
.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{text-align:left; font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-50); padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap;}
td{padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
tbody tr:hover{background:rgba(224,28,123,.04);}
tbody tr:last-child td{border-bottom:none;}
.row-link{display:block; color:inherit;}
td .muted{color:var(--ink-50); font-size:12px;}
.empty-row{padding:40px 20px; text-align:center; color:var(--ink-50); font-size:14px;}

/* ============================= BADGES ============================= */
.badge{font-family:var(--font-mono); font-size:11px; padding:4px 10px; border-radius:999px; font-weight:600; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;}
.badge-accent{background:rgba(224,28,123,.1); color:var(--magenta);}
.badge-info{background:rgba(47,198,232,.14); color:#0f7a90;}
.badge-warn{background:rgba(255,206,51,.18); color:#8a6d00;}
.badge-neutral{background:var(--paper-dim); color:var(--ink-soft);}
.badge-danger{background:rgba(224,28,123,.1); color:var(--magenta);}

/* ============================= FORMS ============================= */
.field-label{display:block; font-size:12.5px; color:var(--ink-50); margin-bottom:7px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.05em;}
.text-input, select.text-input, textarea.text-input{width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--line-strong); background:var(--paper); color:var(--ink); font-size:14.5px; outline:none; transition:border-color .2s; font-family:var(--font-body);}
.text-input:focus{border-color:var(--magenta);}
textarea.text-input{resize:vertical; min-height:80px;}
.form-row{margin-bottom:16px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-error{background:rgba(224,28,123,.08); color:var(--maroon); border-radius:var(--radius-sm); padding:12px 14px; font-size:13.5px; margin-bottom:18px;}

/* ============================= AUTH SCREEN ============================= */
.auth-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-card{width:100%; max-width:400px; background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:38px; box-shadow:var(--shadow);}
.auth-logo{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-size:17px; font-weight:700; margin-bottom:6px;}
.auth-logo img{width:26px; height:26px; border-radius:50%;}
.auth-card h1{font-size:21px; margin-top:18px;}
.auth-card .sub{margin-top:8px; color:var(--ink-soft); font-size:14px; line-height:1.5;}
.auth-card form{margin-top:26px;}

/* ============================= TIMELINE ============================= */
.timeline{display:flex; flex-direction:column; gap:2px;}
.timeline-row{display:flex; gap:14px; padding:13px 4px; border-bottom:1px solid var(--line);}
.timeline-row:last-child{border-bottom:none;}
.timeline-dot{width:9px; height:9px; border-radius:50%; background:var(--line-strong); flex-shrink:0; margin-top:6px;}
.timeline-row.stage_change .timeline-dot{background:var(--magenta);}
.timeline-row.approved .timeline-dot{background:var(--cyan);}
.timeline-row.email .timeline-dot{background:var(--yellow);}
.timeline-row.change_requested .timeline-dot{background:var(--maroon);}
.timeline-body{flex:1; min-width:0;}
.timeline-msg{font-size:14px; font-weight:500;}
.timeline-meta{margin-top:3px; font-size:11.5px; color:var(--ink-50); font-family:var(--font-mono);}

.stage-pills{display:flex; flex-wrap:wrap; gap:8px;}
.stage-pill{padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:600; border:1.5px solid var(--line); background:transparent; color:var(--ink); font-family:inherit; cursor:pointer; transition:transform .2s, box-shadow .2s;}
.stage-pill:hover{transform:translateY(-1px); box-shadow:var(--shadow-soft);}
.stage-pill.done{background:rgba(224,28,123,.08); color:var(--magenta); border-color:var(--magenta);}
.stage-pill.current{background:linear-gradient(135deg, var(--magenta), var(--maroon)); color:#fff; border-color:transparent;}

/* ============================= STAGE MODALS ============================= */
.stage-modal-overlay{position:fixed; inset:0; z-index:900; display:none; align-items:center; justify-content:center; background:rgba(20,6,14,.55); backdrop-filter:blur(4px); padding:20px;}
.stage-modal-overlay.open{display:flex;}
.stage-modal{background:var(--paper-card); border-radius:var(--radius-lg); max-width:560px; width:100%; max-height:86vh; max-height:86dvh; overflow-y:auto; position:relative; box-shadow:var(--shadow);}
.stage-modal-inner{padding:30px;}
.stage-modal-close{position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; background:var(--paper-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; color:var(--ink); transition:background .2s;}
.stage-modal-close:hover{background:var(--line-strong);}
.stage-modal h3{font-size:19px; margin-bottom:14px; padding-right:30px;}
.substep-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line);}
.substep-row:last-child{border-bottom:none;}
.substep-check{width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line-strong); background:transparent; flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s, border-color .2s;}
.substep-check.done{background:var(--magenta); border-color:var(--magenta);}
.substep-label{flex:1; font-size:14px; font-weight:500;}
.substep-meta{font-size:11.5px; color:var(--ink-50); font-family:var(--font-mono);}

/* ============================= COMMENTS ============================= */
.comment-thread{display:flex; flex-direction:column; gap:10px; max-height:260px; overflow-y:auto; margin:16px 0;}
.comment-row{background:var(--paper-dim); border-radius:var(--radius-sm); padding:10px 13px;}
.comment-row.admin{background:rgba(224,28,123,.07);}
.comment-meta{font-size:11px; color:var(--ink-50); font-family:var(--font-mono); margin-bottom:3px; text-transform:uppercase; letter-spacing:.04em;}
.comment-msg{font-size:13.5px; line-height:1.5;}
.comment-empty{font-size:13px; color:var(--ink-50); font-style:italic;}
.comment-form{display:flex; gap:8px; margin-top:10px;}
.comment-form textarea{flex:1; min-height:44px; resize:vertical;}

.preview-thumb{width:100%; border-radius:var(--radius-sm); overflow:hidden; position:relative; background:var(--paper-dim); aspect-ratio:4/3;}
.preview-thumb img.product{width:100%; height:100%; object-fit:cover;}
.preview-thumb img.artwork{position:absolute; object-fit:contain; pointer-events:none;}

.two-col{display:grid; grid-template-columns:1.3fr 1fr; gap:22px; align-items:start;}

.mobile-menu-btn{display:none;}
@media (max-width: 900px){
  .dash-sidebar{position:fixed; inset:0 auto 0 0; z-index:50; transform:translateX(-100%); transition:transform .3s var(--ease); box-shadow:var(--shadow);}
  .dash-sidebar.open{transform:none;}
  .dash-shell::before{content:''; position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .3s; z-index:45;}
  .dash-shell.sidebar-open::before{opacity:1; pointer-events:auto;}
  .mobile-menu-btn{display:flex;}
  .dash-topbar{padding:16px 18px; gap:10px;}
  .topbar-left h1{font-size:18px;}
  .dash-content{padding:20px 16px 50px;}
  .form-grid{grid-template-columns:1fr;}
  .two-col{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:repeat(2,1fr); gap:12px;}
  .card{padding:18px;}
  .stage-modal-inner{padding:22px;}
  .notif-list{margin:0 -22px; padding:0 22px;}
  .comment-form{flex-wrap:wrap;}
  .comment-form button{flex:1 0 auto;}
}

/* Phones and narrow/split-screen tablets — the stage modals (order detail drill-down and the
   notification bell panel, both built on .stage-modal-overlay/.stage-modal) get the same
   bottom-sheet treatment header.php's front-page .modal already has, instead of a centered
   box whose fixed 30px padding eats too much of a narrow screen. dvh (declared after vh, so
   older browsers keep the vh fallback) keeps the sheet correctly sized when an on-screen
   keyboard is open while typing a comment — plain vh doesn't shrink for the keyboard. */
@media (max-width: 640px){
  .stage-modal-overlay{padding:0; align-items:flex-end;}
  .stage-modal{max-width:100% !important; width:100%; max-height:90vh; max-height:90dvh; border-radius:22px 22px 0 0;}
  .stage-modal-inner{padding:20px 18px 24px;}
  .notif-list{margin:0 -18px; padding:0 18px;}
  .substep-label{font-size:13.5px;}
}

/* ============================= NOTIFICATIONS ============================= */
/* The panel itself reuses .stage-modal-overlay/.stage-modal (see stage-modal rules above) — this is just the bell trigger + the list rendered inside that modal. */
.notif-widget{position:relative; display:inline-flex;}
.notif-bell-btn{position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line); background:var(--paper-card); color:var(--ink-soft); cursor:pointer; transition:border-color .2s, color .2s;}
.notif-bell-btn:hover{border-color:var(--magenta); color:var(--magenta);}
.notif-bell-btn svg{width:18px; height:18px;}
.notif-badge{position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--magenta); color:#fff; font-family:var(--font-mono); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1;}
.notif-list{max-height:50vh; overflow-y:auto; margin:0 -30px; padding:0 30px;}
.notif-item{display:flex; gap:10px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line); color:var(--ink);}
.notif-item:last-child{border-bottom:none;}
.notif-item:hover{background:var(--paper-dim);}
.notif-item.unread{background:rgba(224,28,123,.05);}
.notif-item-icon{font-size:16px; flex-shrink:0; margin-top:1px;}
.notif-item-body{display:flex; flex-direction:column; gap:2px; min-width:0;}
.notif-item-title{font-size:13.5px; font-weight:600;}
.notif-item-text{font-size:12.5px; color:var(--ink-50);}
.notif-item-time{font-size:11px; color:var(--ink-50); font-family:var(--font-mono); margin-top:2px;}