@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --red:#C0272B;
  --red-dark:#8F1A1D;
  --red-light:#FBE7E7;
  --black:#1A1A1A;
  --ink:#232323;
  --ink-light:#6E6C66;
  --paper:#F3F2EE;
  --surface:#FFFFFF;
  --line:#E9E6DE;
  --success:#2E7D32;
  --success-bg:#E7F3E8;
  --amber:#A8760B;
  --amber-bg:#FBF0DA;
  --danger:#B3261E;
  --danger-bg:#FBE9E8;
  --radius:14px;
  --shadow:0 2px 10px rgba(26,26,26,0.06);
  --shadow-lg:0 10px 30px rgba(26,26,26,0.10);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.mono{font-family:'IBM Plex Mono',monospace;}

h1,h2,h3{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  color:var(--ink);
  margin:0;
}
h1{font-size:26px;}
h2{font-size:18px;}
h3{font-size:14px;color:var(--ink-light);}

a{color:inherit;}

/* ---------- Top bar (replaces sidebar) ---------- */
.topbar{
  background:linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:20;
  box-shadow:var(--shadow-lg);
}
.topbar-left{display:flex;align-items:center;gap:12px;}
.topbar-brand-text{color:#fff;font-family:'Poppins',sans-serif;font-weight:800;font-size:19px;letter-spacing:0.01em;line-height:1.1;}
.topbar-brand-sub{color:rgba(255,255,255,0.75);font-size:11px;font-style:italic;}

.pill-nav{display:flex;gap:6px;background:rgba(0,0,0,0.15);padding:5px;border-radius:999px;}
.pill-nav button{
  border:none;background:transparent;color:rgba(255,255,255,0.8);
  padding:8px 18px;border-radius:999px;font-size:13.5px;font-weight:600;
  font-family:'Inter',sans-serif;cursor:pointer;transition:all 0.2s ease;
}
.pill-nav button:hover{color:#fff;background:rgba(255,255,255,0.12);}
.pill-nav button.active{background:#fff;color:var(--red-dark);box-shadow:0 2px 6px rgba(0,0,0,0.15);}

.topbar-right{display:flex;align-items:center;gap:10px;}
.user-chip{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,0.14);border-radius:999px;
  padding:5px 14px 5px 5px;
}
.user-chip .avatar{
  width:30px;height:30px;border-radius:50%;background:#fff;color:var(--red-dark);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  font-family:'Poppins',sans-serif;flex-shrink:0;
}
.user-chip .u-name{font-size:13px;font-weight:600;color:#fff;}
.user-chip .u-role{font-size:11px;color:rgba(255,255,255,0.75);}
.user-chip .btn-signout{
  margin-left:4px;padding:5px 12px;font-size:11.5px;border-radius:999px;
  background:rgba(0,0,0,0.2);color:#fff;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-weight:600;
}
.user-chip .btn-signout:hover{background:rgba(0,0,0,0.32);}

.main{padding:1.75rem 2.25rem 3rem;max-width:1280px;margin:0 auto;}

.page-head{margin-bottom:1.5rem;}
.page-head .crumb{font-size:12px;color:var(--red);font-weight:600;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:4px;}

.stage-strip{margin-bottom:1.75rem;}
.stage-strip svg{width:100%;height:auto;display:block;}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.25rem 1.5rem;margin-bottom:1.25rem;box-shadow:var(--shadow);
  animation:fadeInUp 0.4s ease both;
}
.card.accent-top{border-top:4px solid var(--red);}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
.card:nth-of-type(1){animation-delay:0.02s;}
.card:nth-of-type(2){animation-delay:0.08s;}
.card:nth-of-type(3){animation-delay:0.14s;}
.card:nth-of-type(4){animation-delay:0.20s;}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}

.metric{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;
  box-shadow:var(--shadow);transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.metric:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.metric .m-label{font-size:12px;color:var(--ink-light);margin-bottom:6px;}
.metric .m-value{font-size:26px;font-weight:800;font-family:'Poppins',sans-serif;color:var(--red);}

label{display:block;font-size:12px;color:var(--ink-light);margin:0 0 5px;font-weight:600;}
input[type=text],input[type=date],input[type=number],select,textarea{
  width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;
  font-family:'Inter',sans-serif;font-size:14px;background:var(--surface);color:var(--ink);
  margin-bottom:14px;transition:border-color 0.15s ease;
}
textarea{resize:vertical;min-height:70px;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red);}

.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 20px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;
  cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.18s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red);}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark);}
.btn-success{background:var(--success);color:#fff;border-color:var(--success);}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger);}

table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{
  text-align:left;font-size:11px;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--ink-light);border-bottom:1.5px solid var(--line);padding:8px 10px;font-weight:700;
}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr{transition:background 0.15s ease;}
tbody tr:hover{background:var(--paper);}

.badge{display:inline-block;padding:3px 12px;border-radius:999px;font-size:11.5px;font-weight:700;}
.badge-progress{background:#FDEDEA;color:var(--red);}
.badge-rework{background:var(--danger-bg);color:var(--danger);}
.badge-complete{background:var(--success-bg);color:var(--success);}
.badge-waiting{background:var(--amber-bg);color:var(--amber);}

.job-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:1.05rem 1.2rem;
  margin-bottom:0.85rem;background:var(--surface);transition:box-shadow 0.2s ease, transform 0.2s ease;
}
.job-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.job-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.85rem;}
.job-id{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;}
.job-client{font-size:12.5px;color:var(--ink-light);margin-top:2px;}
.job-actions{display:flex;gap:8px;margin-top:0.9rem;padding-top:0.9rem;border-top:1px solid var(--line);}

.dept-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.25rem;}
.dept-chip{
  display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:6px 14px 6px 6px;font-size:12px;box-shadow:var(--shadow);
}
.dept-chip .avatar-sm{
  width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;
  font-family:'Poppins',sans-serif;flex-shrink:0;
}
.dept-chip .dept-name{color:var(--ink-light);}
.dept-chip .dept-person{font-weight:600;}

.in-charge-row{display:flex;align-items:center;gap:8px;margin-top:8px;}
.in-charge-row label{margin:0;white-space:nowrap;}
.in-charge-select{width:auto;flex:1;padding:6px 10px;font-size:12.5px;margin-bottom:0;}

.timeline{display:flex;flex-direction:column;}
.timeline-row{
  display:grid;grid-template-columns:120px 1fr 140px;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--line);align-items:start;
}
.timeline-row:last-child{border-bottom:none;}
.timeline-stage{font-size:12.5px;font-weight:700;color:var(--red);}
.timeline-person{font-size:11.5px;color:var(--ink-light);margin-top:2px;}
.timeline-detail{font-size:13px;color:var(--ink);}
.timeline-detail .sub{font-size:12px;color:var(--ink-light);margin-top:2px;}
.timeline-time{font-size:11px;color:var(--ink-light);font-family:'IBM Plex Mono',monospace;white-space:nowrap;}

.deadline-tag{
  display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;
  padding:2px 9px;border-radius:999px;background:var(--paper);color:var(--ink-light);
}
.deadline-tag.due-soon{background:var(--amber-bg);color:var(--amber);}
.deadline-tag.overdue{background:var(--danger-bg);color:var(--danger);}

.activity-log{display:flex;flex-direction:column;}
.activity-row{
  display:grid;grid-template-columns:1fr auto;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--line);align-items:start;
}
.activity-row:last-child{border-bottom:none;}
.activity-text{font-size:13px;color:var(--ink);}
.activity-text b{font-family:'IBM Plex Mono',monospace;font-weight:600;}
.activity-meta{font-size:11.5px;color:var(--ink-light);margin-top:2px;}
.activity-time{font-size:11.5px;color:var(--ink-light);font-family:'IBM Plex Mono',monospace;white-space:nowrap;text-align:right;}

.new-order-btn-row{display:flex;justify-content:flex-end;margin-bottom:1rem;}

.tag-new{background:var(--success-bg);color:var(--success);font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;margin-left:6px;}
.tag-old{background:#EFEDE6;color:var(--ink-light);font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;margin-left:6px;}
.tag-important{background:var(--danger-bg);color:var(--danger);font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;margin-left:6px;}
.job-card.important{border:1.5px solid var(--danger);}

.finance-select-row{display:flex;gap:10px;margin-bottom:1.25rem;}
.finance-select-row select{margin-bottom:0;max-width:170px;}

.nav-search{display:flex;align-items:center;background:rgba(255,255,255,0.16);border-radius:999px;padding:0 6px 0 16px;gap:8px;}
.nav-search input{
  background:transparent;border:none;color:#fff;font-size:13px;outline:none;width:220px;
  margin-bottom:0;padding:9px 0;
}
.nav-search input::placeholder{color:rgba(255,255,255,0.7);}
.nav-search button{
  background:#fff;color:var(--red-dark);border:none;border-radius:999px;padding:7px 16px;
  font-size:12.5px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;
}

.timeline-view-btn{
  font-size:11px;padding:3px 11px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);cursor:pointer;margin-top:6px;font-family:'Inter',sans-serif;font-weight:600;
}
.timeline-view-btn:hover{border-color:var(--red);color:var(--red);}

.design-preview{
  width:88px;height:62px;border:1.5px dashed var(--line);border-radius:10px;background:var(--paper);
  display:flex;align-items:center;justify-content:center;font-size:9.5px;color:var(--ink-light);
  text-align:center;padding:4px;flex-shrink:0;
}

.note{font-size:12.5px;color:var(--ink-light);background:var(--paper);border-radius:10px;padding:10px 12px;margin-top:1rem;}

.tabs{display:flex;gap:6px;margin-bottom:1.25rem;flex-wrap:wrap;}
.tabs button{
  border:1.5px solid var(--line);background:var(--surface);color:var(--ink-light);
  padding:9px 18px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;
  transition:all 0.18s ease;font-family:'Inter',sans-serif;
}
.tabs button:hover{border-color:var(--red);color:var(--red);}
.tabs button.active{background:var(--red);border-color:var(--red);color:#fff;}

.fade-view{animation:fadeIn 0.25s ease both;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.stage-select-row{display:flex;align-items:center;gap:10px;margin-bottom:1rem;}
.stage-select-row label{margin:0;white-space:nowrap;}
.stage-select-row select{margin-bottom:0;max-width:260px;}

.toast{
  position:fixed;bottom:20px;right:20px;background:var(--black);color:#fff;
  padding:12px 20px;border-radius:999px;font-size:13px;opacity:0;transform:translateY(10px);
  transition:all 0.25s ease;pointer-events:none;z-index:50;box-shadow:var(--shadow-lg);
}
.toast.show{opacity:1;transform:translateY(0);}

/* ---------- Global search + important-only filter (every staff page) ---------- */
.topbar-search{display:flex;align-items:center;gap:14px;flex:1;justify-content:center;min-width:0;}
.important-toggle{
  display:flex;align-items:center;gap:8px;color:rgba(255,255,255,0.88);font-size:12.5px;
  cursor:pointer;user-select:none;white-space:nowrap;
}
.switch{width:30px;height:17px;border-radius:10px;background:rgba(0,0,0,0.28);position:relative;transition:background .15s;flex-shrink:0;}
.switch.on{background:#fff;}
.switch .knob{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:left .15s;}
.switch.on .knob{left:15px;background:var(--red-dark);}
.filtered-out{display:none !important;}

/* ---------- Form 1/2/4 checklist groups (Artwork approval, Job sheet, Design checklist) ---------- */
fieldset.orbit-fieldset{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px 14px;margin:0 0 14px;}
fieldset.orbit-fieldset legend{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-light);padding:0 6px;}
.checkrow{display:flex;flex-wrap:wrap;gap:8px 18px;}
.chk{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink);cursor:pointer;}
.chk input{accent-color:var(--red);width:14px;height:14px;margin:0;}
.checklist-progress{font-size:11px;color:var(--ink-light);margin:-6px 0 12px;}

/* Cross-department reference box: lets Design/Artwork/Production look back at
   what Sales originally promised the customer, per the shop's own paper forms. */
.compare-box{background:#EFF5FB;border:1px solid #CFE0EE;border-radius:12px;padding:10px 14px;margin-bottom:1.1rem;font-size:12.5px;color:#1F4A6B;}
.compare-box .cb-title{font-size:10.5px;text-transform:uppercase;letter-spacing:0.06em;color:#3F6E93;font-weight:700;margin-bottom:5px;}

.important-banner{
  display:flex;align-items:center;gap:9px;background:var(--danger-bg);color:var(--danger);
  border:1px solid #F3C9C6;border-radius:12px;padding:11px 15px;margin-bottom:1.25rem;font-size:13px;font-weight:700;
}
.important-banner svg{flex-shrink:0;}

.formgrid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}

@media (max-width:860px){
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .pill-nav{display:none;}
  .topbar-search{display:none;}
  .formgrid-2{grid-template-columns:1fr;}
}