/* =========================================================
   Buying Plan System — Design tokens
   Dark-only modern merchandising aesthetic: deep charcoal-plum
   surfaces, vivid blue accent, fresh success/warning/danger.
   ========================================================= */
:root{
  --ink:        #131019;
  --ink-soft:   #1E1A2C;
  --canvas:     #1C1929;
  --paper:      #262138;
  --line:       #3B3552;
  --text:       #EDE9F5;
  --text-muted: #A79FC7;
  --heading:    #F8F5FE;
  --accent-text: #6E9BFF;
  --icon-muted: #9FB4D6;

  --tan:        #0556F5;
  --tan-dark:   #043FBB;
  --slate:      #3E5C76;
  --green:      #22A06B;
  --amber:      #F2A007;
  --red:        #E5484D;
  --violet:     #7C5CFC;

  --font-display: 'Sora', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 6px 24px rgba(0,0,0,0.42);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.58);
  --hover-row: #2E2944;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{font-family: var(--font-display); margin:0; color: var(--heading);}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
input,select,textarea,button{font-family:inherit;font-size:14px;color:inherit}
select,input[type="text"],input[type="number"],input[type="date"],input[type="email"],input[type="password"],input[type="file"]{color:var(--text)}
code{background:#EFEAE0;color:#5A4E38;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:600}

/* ---------- App Shell ---------- */
.app-shell{display:flex;min-height:100vh}

.sidebar{
  width:212px;flex-shrink:0;background:var(--ink);color:#EDEAF2;
  display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0;height:100vh;
}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:10px 4px 18px 4px;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:14px}
.brand-logo-img{height:28px;width:auto;flex-shrink:0}
.brand-mark{
  width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--tan),var(--tan-dark));
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;color:#fff;font-size:12px;flex-shrink:0;
}
.brand-mark.large{width:56px;height:56px;font-size:20px;border-radius:14px;margin-bottom:18px}
.brand-text strong{display:block;font-family:var(--font-display);font-size:13.5px;line-height:1.25}
.brand-text small{color:#B8B2C8;font-size:10px}

.sidebar-nav{flex:1;display:flex;flex-direction:column;gap:1px;overflow-y:auto;overflow-x:hidden}
.nav-label{font-size:9.5px;text-transform:uppercase;letter-spacing:0.08em;color:#8B84A0;margin:12px 8px 5px;font-weight:700}
.nav-link{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;
  color:#D6D2E2;font-size:12.5px;font-weight:500;line-height:1.3;transition:background .15s, color .15s;white-space:nowrap;
}
.nav-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.nav-link:hover{background:rgba(255,255,255,0.06);color:#fff}
.nav-link.active{background:var(--tan);color:#fff}

.sidebar-foot{border-top:1px solid rgba(255,255,255,0.08);padding-top:12px;margin-top:8px}
.sidebar-foot p{font-size:9.5px;text-transform:uppercase;letter-spacing:0.08em;color:#8B84A0;margin:0 0 7px 8px;font-weight:700}
.dept-pills{display:flex;flex-wrap:wrap;gap:5px;padding:0 8px}
.dept-pills span{font-size:10px;background:rgba(255,255,255,0.07);padding:3px 8px;border-radius:20px;color:#C8C3D8}

.app-main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:66px;flex-shrink:0;background:var(--paper);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;padding:0 26px;position:sticky;top:0;z-index:20;
}
.page-title{font-size:19px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.user-chip{display:flex;align-items:center;gap:9px}
.avatar{
  width:34px;height:34px;border-radius:50%;background:var(--slate);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;font-family:var(--font-display);
}
.user-meta{display:flex;flex-direction:column;line-height:1.2}
.user-meta strong{font-size:13px}
.user-meta small{color:var(--text-muted);font-size:11px}
.burger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:20px;height:2px;background:var(--heading);display:block;border-radius:2px}

.page-content{padding:26px;max-width:1400px;width:100%;margin:0 auto;flex:1}

.app-footer{
  padding:16px 26px;border-top:1px solid var(--line);text-align:center;
}
.app-footer p{margin:0;font-size:12px;color:var(--text-muted)}
.app-footer a{color:var(--accent-text);font-weight:600}

/* ---------- Alerts ---------- */
.alert{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:13.5px;border:1px solid transparent}
.alert-success{background:#E9F5EC;color:#2C6A44;border-color:#CBE9D3}
.alert-info{background:#E4ECFB;color:#2C4E8A;border-color:#C9D9F5}
.alert-error{background:#FBEAE8;color:#9A332C;border-color:#F3CFC9}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-radius:var(--radius-sm);border:1px solid transparent;
  font-weight:600;font-size:13.5px;cursor:pointer;transition:transform .1s, background .15s, box-shadow .15s;
}
.btn-primary{background:var(--tan);color:#fff}
.btn-primary:hover{background:var(--tan-dark)}
.btn-ghost{background:transparent;color:var(--heading);border-color:var(--line)}
.btn-ghost:hover{background:var(--canvas)}
.btn-block{width:100%}
.btn-sm{padding:7px 12px;font-size:12.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.icon-btn{
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;border:1px solid var(--line);background:var(--paper);cursor:pointer;color:var(--icon-muted);
}
.icon-btn:hover{background:var(--canvas)}
.icon-btn.danger{color:var(--red);border-color:rgba(193,68,61,0.35)}
.notif-bell{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--paper);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--heading);flex-shrink:0;
  transition:background .15s;
}
.notif-bell:hover{background:var(--canvas)}

/* ---------- Notifications ---------- */
.notif-wrap{position:relative}
.notif-bell{position:relative}
.notif-bell svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.notif-badge{
  position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--red);color:#fff;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--paper);
}
.notif-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;width:360px;max-width:92vw;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;z-index:80;overflow:hidden;
}
.notif-wrap.open .notif-dropdown{opacity:1;transform:translateY(0);pointer-events:auto}
.notif-dropdown-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.notif-dropdown-head strong{font-size:13.5px;color:var(--heading)}
.notif-viewall{font-size:11.5px;font-weight:600;color:var(--accent-text)}
.notif-list{max-height:380px;overflow-y:auto}
.notif-empty{padding:24px 16px;text-align:center;color:var(--text-muted);font-size:13px}
.notif-item{
  display:flex;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);color:var(--text);
  transition:background .12s;
}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--canvas)}
.notif-item.unread{background:rgba(192,133,82,0.08)}
.notif-icon{font-size:16px;flex-shrink:0;line-height:1.4}
.notif-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.notif-body strong{font-size:12.5px;color:var(--heading)}
.notif-body small{font-size:11.5px;color:var(--text-muted);white-space:normal}
.notif-time{color:var(--text-muted);opacity:.8}

.notif-full-list{display:flex;flex-direction:column}
.notif-item-full{padding:14px 16px;align-items:center}
.notif-item-full .notif-time{margin-left:auto;flex-shrink:0;white-space:nowrap;padding-left:12px}
.icon-btn.approve{color:var(--green);border-color:rgba(63,125,88,0.35)}
.icon-btn.extend-btn{color:var(--amber);border-color:rgba(201,130,10,0.35)}
.quick-receive-btns{display:flex;gap:10px}
.quick-receive-btns .btn{flex:1}
.receive-summary{display:flex;gap:18px;background:var(--canvas);border-radius:8px;padding:12px 14px}
.receive-summary div{display:flex;flex-direction:column;gap:3px}
.receive-summary strong{font-family:var(--font-display);font-size:18px;color:var(--heading)}
.actions{white-space:nowrap;display:flex;gap:6px}

/* ---------- KPI cards ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:22px}
.kpi-card{
  background:var(--paper);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);
  border-top:3px solid var(--tan);display:flex;flex-direction:column;gap:4px;
}
.kpi-card.accent-tan{border-top-color:var(--tan)}
.kpi-card.accent-slate{border-top-color:var(--slate)}
.kpi-card.accent-green{border-top-color:var(--green)}
.kpi-card.accent-amber{border-top-color:var(--amber)}
.kpi-card.accent-violet{border-top-color:var(--violet)}
.kpi-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:600}
.kpi-value{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--heading)}
.kpi-sub{font-size:12px;color:var(--text-muted)}

/* ---------- Panels ---------- */
.panel{background:var(--paper);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);margin-bottom:20px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.panel-head.no-border{margin-bottom:18px}
.panel-head h2{font-size:16px}
.muted{color:var(--text-muted);font-size:13px;margin:4px 0 0}

.grid-2{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* ---------- Filters ---------- */
.period-filter{display:flex;flex-wrap:wrap;gap:14px;align-items:end;margin-bottom:18px}
.period-filter label{display:flex;flex-direction:column;font-size:11.5px;color:var(--text-muted);font-weight:600;gap:5px;text-transform:uppercase;letter-spacing:.04em}
.period-filter select,.period-filter input{padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--text);min-width:140px}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{
  text-align:left;padding:10px 12px;background:var(--canvas);color:var(--text-muted);
  font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;white-space:nowrap;
}
.data-table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.data-table tbody tr:hover{background:var(--hover-row)}
.data-table th:first-child,.data-table td:first-child{border-radius:8px 0 0 8px}

.thumb{width:42px;height:42px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.passport-photo{width:45px;height:58px;object-fit:cover;border-radius:4px;border:1px solid var(--line);display:block}
.passport-photo-empty{display:flex;align-items:center;justify-content:center;color:var(--text-muted);background:var(--canvas);font-size:11px}
.report-buyer-group{margin-bottom:18px}
.report-buyer-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.report-buyer-head h3{font-size:15px;color:var(--heading)}
.plan-breakdown-row td{padding:0 0 14px 0;border-bottom:1px solid var(--line)}
.plan-breakdown-wrap{background:var(--canvas);border-radius:var(--radius-sm);padding:10px 14px;margin:0 4px}
.plan-breakdown-wrap .breakdown-table{margin-top:8px;font-size:12px}
.plan-breakdown-wrap .breakdown-table th,.plan-breakdown-wrap .breakdown-table td{padding:6px 10px}
.plan-detail-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px}
.plan-detail-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.plan-detail-head strong{font-size:13.5px;color:var(--heading);margin-right:8px}
.plan-detail-meta{display:flex;align-items:center;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.plan-detail-meta .progress-track{width:120px}
.plan-detail-card .breakdown-table{font-size:12px}
.plan-detail-card .breakdown-table th,.plan-detail-card .breakdown-table td{padding:6px 10px}
.print-header{display:none}
.print-footer{display:none}
.thumb-empty{display:flex;align-items:center;justify-content:center;color:var(--text-muted);background:var(--canvas)}
.thumb-preview{margin-top:8px;width:90px;height:90px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.zoomable{cursor:zoom-in}

.lightbox{
  position:fixed;inset:0;background:rgba(10,9,15,0.92);display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:200;
}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:88vw;max-height:88vh;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,0.5);transition:transform .15s ease;cursor:zoom-in;user-select:none}
.lightbox-close{
  position:absolute;top:22px;right:26px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.08);color:#fff;font-size:18px;cursor:pointer;
}
.lightbox-close:hover{background:rgba(255,255,255,0.18)}

/* ---------- Badges ---------- */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
.badge-dept{background:#DCE6FE;color:var(--tan-dark)}
.badge-plan-draft{background:#EFEAE0;color:#6E6754}
.badge-plan-admin_approved{background:#E4ECFB;color:#3457B2}
.badge-plan-pending_manager{background:#FDF1DA;color:var(--amber)}
.badge-plan-pending_director{background:#E4ECFB;color:#3457B2}
.badge-plan-rejected{background:#FBEAE8;color:var(--red)}
.badge-plan-approved{background:#E4EFE7;color:var(--green)}
.badge-plan-closed{background:#E7E4EF;color:#5A4E9E}
.approval-trail{background:var(--canvas);border-radius:8px;padding:10px 14px;line-height:1.7}
.badge-status-pending{background:#FDF1DA;color:var(--amber)}
.badge-status-confirmed{background:#E4ECFB;color:#3457B2}
.badge-status-received{background:#E4EFE7;color:var(--green)}
.badge-status-cancelled{background:#FBEAE8;color:var(--red)}
.badge-receive-not_received{background:#F1EEF7;color:#6E6754}
.badge-receive-partial{background:#FDF1DA;color:var(--amber)}
.badge-receive-full{background:#E4EFE7;color:var(--green)}
.reminder-note{color:var(--amber);font-weight:600}
.badge-buyerstatus-no_plan{background:#FBEAE8;color:var(--red)}
.badge-buyerstatus-pending_approval{background:#FDF1DA;color:var(--amber)}
.badge-buyerstatus-not_started{background:#F1EEF7;color:#5A4E9E}
.badge-buyerstatus-ordered{background:#E4ECFB;color:#3457B2}
.badge-buyerstatus-partial{background:#FDF1DA;color:var(--amber)}
.badge-buyerstatus-on_track{background:#E4EFE7;color:var(--green)}
.badge-design-pending{background:#FDF1DA;color:var(--amber)}
.badge-design-approved{background:#E4EFE7;color:var(--green)}
.badge-design-rejected{background:#FBEAE8;color:var(--red)}

/* ---------- Design Studio (design_form.php) ---------- */
.design-studio{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.design-studio-fields{padding:22px 24px}
.design-studio-image{padding:16px;position:sticky;top:86px}
.design-dropzone{
  position:relative;border:2px dashed var(--line);border-radius:var(--radius);background:var(--canvas);
  min-height:280px;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color .15s, background .15s;
}
.design-dropzone.drag-over{border-color:var(--tan);background:rgba(219,127,63,0.08)}
.design-dropzone-inner{width:100%;height:100%;min-height:280px;display:flex;align-items:center;justify-content:center;position:relative}
.order-dropzone{min-height:150px}
.order-dropzone .design-dropzone-inner{min-height:150px}
.order-dropzone .design-dropzone-inner img{min-height:150px}
.design-dropzone-prompt{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-muted);cursor:pointer;padding:30px;text-align:center}
.design-dropzone-prompt strong{color:var(--heading);font-size:13.5px}
.design-dropzone-prompt small{font-size:11.5px}
.design-dropzone-inner img{width:100%;height:100%;min-height:280px;object-fit:cover;cursor:zoom-in}
.design-change-btn{
  position:absolute;bottom:10px;right:10px;background:rgba(23,21,31,0.75);color:#fff;border:none;border-radius:20px;
  padding:6px 14px;font-size:11.5px;font-weight:600;cursor:pointer;backdrop-filter:blur(4px);
}
.design-change-btn:hover{background:rgba(23,21,31,0.9)}

/* ---------- Design cards (my_designs.php) ---------- */
.design-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.design-card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.design-card-img{position:relative;height:200px;background:var(--canvas)}
.design-card-img img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.design-card-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:12.5px}
.design-card-badge{position:absolute;top:10px;right:10px}
.design-card-body{padding:14px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.design-card-body strong{font-family:var(--font-display);font-size:14.5px;color:var(--heading)}
.design-card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.design-card-desc{font-size:12px;color:var(--text-muted);margin:2px 0 0;line-height:1.5}
.design-card-actions{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);align-items:center}

/* ---------- Progress ---------- */
.progress-track{height:8px;background:var(--line);border-radius:6px;overflow:hidden;margin-top:8px}
.progress-track.sm{height:6px;width:110px;margin-top:4px;display:inline-block}
.progress-fill{height:100%;background:var(--tan);border-radius:6px;transition:width .3s}
.progress-fill.full{background:var(--green)}

.bar-list{display:flex;flex-direction:column;gap:14px}
.bar-row{display:grid;grid-template-columns:110px 1fr 110px;align-items:center;gap:10px}
.bar-label{font-size:12.5px;font-weight:600;color:var(--text)}
.bar-track{position:relative;height:14px;background:var(--canvas);border-radius:7px;overflow:hidden;border:1px solid var(--line)}
.bar-fill{position:absolute;left:0;top:0;height:100%;background:#EADFCB;border-radius:7px}
.bar-fill-actual{position:absolute;left:0;top:0;height:100%;background:var(--tan);border-radius:7px}
.bar-value{font-size:11.5px;color:var(--text-muted);text-align:right}

.chart-wrap{position:relative;width:100%;height:300px}
.chart-wrap canvas{max-width:100%}
.breakdown-table{margin-top:16px;font-size:12.5px}
.breakdown-table th,.breakdown-table td{padding:8px 10px}

.buyer-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.buyer-kpi-card{background:var(--paper);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);border-top:3px solid var(--tan);display:flex;flex-direction:column;gap:12px}
.buyer-kpi-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.buyer-kpi-head strong{display:block;font-family:var(--font-display);font-size:15px;color:var(--heading)}
.buyer-kpi-head small{font-size:11.5px}
.buyer-kpi-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.buyer-kpi-stats .kpi-label{font-size:10px}
.kpi-value-sm{display:block;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--heading)}
.buyer-kpi-progress{display:flex;flex-direction:column;gap:4px}
.chart-subtitle{font-size:13px;font-weight:700;color:var(--heading);margin:0 0 10px}
.register-table-wrap{max-height:560px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.register-table{font-size:12.5px}
.register-table thead th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 var(--line)}
.register-table tbody tr:nth-child(even){background:var(--canvas)}
.register-table tbody tr:nth-child(even):hover{background:var(--hover-row)}
.register-table td{white-space:nowrap}
.inline-filter{display:flex;gap:8px}
.inline-filter select{padding:7px 10px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--text);font-size:13px}

/* ---------- Forms / Drawer ---------- */
.drawer{position:fixed;inset:0;background:rgba(28,27,41,0.4);display:flex;justify-content:flex-end;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
.drawer.open{opacity:1;pointer-events:auto}
.drawer-panel{
  width:460px;max-width:92vw;height:100%;background:var(--paper);padding:20px 22px;overflow-y:auto;
  transform:translateX(100%);transition:transform .25s ease;box-shadow:var(--shadow-lg);
}
.drawer-panel.wide{width:600px}
.drawer.open .drawer-panel{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.drawer-head h3{font-size:16px}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;align-items:start}
.form-grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.form-grid .span-3{grid-column:span 3}
.form-grid label{display:flex;flex-direction:column;font-size:10.5px;font-weight:700;color:var(--text-muted);gap:4px;text-transform:uppercase;letter-spacing:.03em}
.form-grid label{min-width:0}
.form-grid input,.form-grid select,.form-grid textarea{
  padding:6px 9px;border-radius:7px;border:1px solid var(--line);background:var(--canvas);color:var(--text);font-weight:500;font-size:12.5px;
  width:100%;min-width:0;box-sizing:border-box;
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:2px solid var(--tan);outline-offset:1px;background:var(--paper)}
.form-grid input.readonly-calc{background:#DCE6FE;font-weight:700;color:var(--tan-dark);cursor:not-allowed}
.form-grid .span-2{grid-column:span 2}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.form-actions .btn{padding:8px 15px;font-size:12.5px}
.field-hint{font-size:10px;color:var(--accent-text);font-weight:600;margin-top:1px;text-transform:none;letter-spacing:normal}

/* ---------- Modal-style drawer (centered pop-up instead of side slide) ---------- */
.drawer.modal-style{justify-content:center;align-items:center;padding:24px}
.drawer.modal-style .drawer-panel{
  width:600px;max-width:100%;height:auto;max-height:90vh;border-radius:var(--radius);
  transform:scale(0.94);opacity:0;transition:transform .22s ease, opacity .18s ease;box-shadow:var(--shadow-lg);
}
.drawer.modal-style.open .drawer-panel{transform:scale(1);opacity:1}

.inline-add{display:flex;gap:8px;margin-bottom:14px}
.cat-add-form{flex-wrap:wrap}
.cat-add-form select{flex:1;min-width:110px}
.cat-add-form input[type="text"]{flex:1;min-width:110px}
.settings-cat-scroll{max-height:520px;overflow-y:auto;padding-right:4px}
.inline-add input{flex:1;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--text)}
.inline-add select{padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--text)}
.inline-add select option{background:var(--paper);color:var(--text)}
.simple-list li{padding:9px 4px;border-bottom:1px solid var(--line);font-size:13.5px}
.simple-list li:last-child{border-bottom:none}
.row-view{display:flex;align-items:center;justify-content:space-between;gap:8px}
.row-view-actions{display:flex;gap:4px;flex-shrink:0}
.row-edit-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding-top:6px}
.row-edit-form input[type="text"]{flex:1;min-width:100px;padding:6px 8px;border-radius:6px;border:1px solid var(--line);background:var(--paper);color:var(--text)}
.row-edit-form select{padding:6px 8px;border-radius:6px;border:1px solid var(--line);background:var(--paper);color:var(--text)}
.row-edit-form select option{background:var(--paper);color:var(--text)}

.empty-state{color:var(--text-muted);font-size:13.5px;padding:18px 4px}
.empty-state a{color:var(--accent-text);font-weight:600}

/* ---------- Login page ---------- */
.login-body{background:var(--ink);margin:0;display:flex;flex-direction:column;min-height:100vh}
.login-wrap{flex:1;display:grid;grid-template-columns:1.1fr 0.9fr}
.login-footer{border-top-color:rgba(255,255,255,0.1)}
.login-footer p{color:#8B84A0}
.login-footer a{color:var(--tan)}
.login-side{
  background:radial-gradient(circle at 20% 20%, #2C2A3D, var(--ink) 70%);
  color:#EDEAF2;padding:60px;display:flex;flex-direction:column;justify-content:center;gap:16px;
}
.login-logo-img{height:28px;width:auto;align-self:flex-start;margin-bottom:18px}
.login-side h1{color:#fff;font-size:34px;line-height:1.2;max-width:420px}
.login-subtitle{display:block;font-family:var(--font-body);font-weight:500;font-size:15px;color:#B8B2C8;margin-top:6px}
.login-subtitle-standalone{font-family:var(--font-display);font-weight:600;font-size:16px;color:#fff;margin:0 0 14px;letter-spacing:.02em}
.login-side p{color:#B8B2C8;max-width:420px;line-height:1.6;font-size:14.5px}
.login-features{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.login-features li{color:#D6D2E2;font-size:13.5px;padding-left:20px;position:relative}
.login-features li::before{content:'✓';position:absolute;left:0;color:var(--tan);font-weight:700}
.login-card{background:var(--canvas);display:flex;flex-direction:column;justify-content:center;padding:60px;gap:14px}
.login-card h2{font-size:24px}
.login-card form{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.login-card label{display:flex;flex-direction:column;font-size:12px;font-weight:700;color:var(--text-muted);gap:6px;text-transform:uppercase;letter-spacing:.04em}
.login-card input{padding:11px 13px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--text);font-size:14px}
.hint{font-size:12px;color:var(--text-muted);margin-top:6px}

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .login-wrap{grid-template-columns:1fr}
  .login-side{display:none}
  .sidebar{width:192px}
}
@media (max-width: 720px){
  .sidebar{position:fixed;left:0;top:0;width:250px;transform:translateX(-100%);transition:transform .2s;z-index:60}
  .sidebar.open{transform:translateX(0)}
  .sidebar-nav{gap:2px}
  .nav-link{padding:9px 10px;font-size:13.5px}
  .burger{display:flex}
  .kpi-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-grid.cols-3{grid-template-columns:1fr}
  .form-grid .span-2{grid-column:span 1}
  .form-grid .span-3{grid-column:span 1}
  .drawer-panel{width:100%}
  .drawer.modal-style{padding:10px}
  .drawer.modal-style .drawer-panel{width:100%;max-height:94vh;border-radius:14px}
  .page-content{padding:16px}
  .notif-dropdown{position:fixed;top:64px;left:10px;right:10px;width:auto;max-width:none}
  .design-studio{grid-template-columns:1fr}
  .design-studio-image{position:static}
}

/* ---------- Pending Your Approval widget (dashboard.php / super-admin.php) ---------- */
.pending-approval-panel{
  border:2px solid var(--amber);
  background:linear-gradient(180deg, rgba(242,160,7,0.08), transparent 40%);
}
.pending-approval-panel h2{display:flex;align-items:center;gap:8px}
.pending-buyer-group{margin-bottom:16px}
.pending-buyer-name{font-family:var(--font-display);font-size:13.5px;font-weight:700;color:var(--heading);margin-bottom:8px;padding-left:2px}
.pending-chip-row{display:flex;flex-wrap:wrap;gap:10px}
.pending-chip{
  display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;min-width:200px;box-shadow:var(--shadow);
  animation:pending-pulse 2.2s ease-in-out infinite;
}
.pending-chip:hover{animation-play-state:paused}
@keyframes pending-pulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,160,7,0.35), var(--shadow); }
  50% { box-shadow: 0 0 0 6px rgba(242,160,7,0), var(--shadow); }
}
.pending-chip-link{display:flex;flex-direction:column;gap:2px;padding:10px 14px;color:var(--text);border-bottom:1px solid var(--line)}
.pending-chip-link:hover{background:var(--canvas)}
.pending-chip-dept{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--tan-dark);font-weight:700}
.pending-chip-link strong{font-size:13.5px;color:var(--heading)}
.pending-chip-link small{color:var(--text-muted);font-size:11px}
.pending-chip-approve{
  border:none;background:linear-gradient(135deg, var(--green), #1B8656);color:#fff;font-weight:700;font-size:12.5px;
  padding:9px 14px;cursor:pointer;transition:filter .15s;width:100%;
}
.pending-chip-approve:hover{filter:brightness(1.08)}

/* ---------- Order Register: Table/Grid view toggle & tiles ---------- */
.view-toggle{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.view-toggle-btn{background:var(--paper);border:none;padding:7px 13px;font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:background .15s,color .15s}
.view-toggle-btn:first-child{border-right:1px solid var(--line)}
.view-toggle-btn.active{background:var(--tan);color:#fff}
.view-toggle-btn:not(.active):hover{background:var(--canvas)}

.register-grid-view{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.register-tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.register-tile-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.register-tile-head strong{font-size:13.5px;color:var(--heading);line-height:1.3}
.register-tile-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;padding:4px 0;border-bottom:1px solid var(--line)}
.register-tile-row span:first-child{color:var(--text-muted)}
.register-tile-qty{display:flex;justify-content:space-between;gap:8px;background:var(--canvas);border-radius:8px;padding:8px 10px;margin-top:4px}
.register-tile-qty div{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1}
.register-tile-qty small{color:var(--text-muted);font-size:10px;text-transform:uppercase}
.register-tile-qty strong{font-size:14px;color:var(--heading)}

/* ---------- Buyer Summary cards (super-admin.php) ---------- */
.buyer-summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.buyer-summary-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.buyer-summary-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.buyer-summary-head strong{display:block;font-size:14px;color:var(--heading);margin-bottom:4px}
.buyer-summary-bars{display:flex;flex-direction:column;gap:6px}
.buyer-summary-bar-row{display:grid;grid-template-columns:52px 1fr 50px;align-items:center;gap:8px}
.buyer-summary-bar-row small{color:var(--text-muted);font-size:11px}
.buyer-summary-bar-row strong{font-size:12px;text-align:right;color:var(--heading)}
.buyer-summary-track{height:7px;background:var(--canvas);border-radius:5px;overflow:hidden}
.buyer-summary-fill{height:100%;border-radius:5px}
.buyer-summary-fill.accent-target{background:var(--slate)}
.buyer-summary-fill.accent-ordered{background:var(--tan)}
.buyer-summary-fill.accent-received{background:var(--green)}
.buyer-summary-foot{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.buyer-summary-foot div{display:flex;flex-direction:column;gap:2px}
.buyer-summary-foot strong{font-size:13px;color:var(--heading)}

/* ---------- Brand allocations summary inside Edit Category Plan drawer ---------- */
.edit-plan-brands-summary{margin-bottom:6px;padding:10px 12px;background:var(--canvas);border-radius:var(--radius-sm)}
.edit-plan-brands-summary .breakdown-table{margin-top:8px;font-size:12px}
.edit-plan-brands-summary .breakdown-table th,.edit-plan-brands-summary .breakdown-table td{padding:6px 10px}

/* ---------- Buyer Department/Category assignments (buyers.php) ---------- */
.buyer-assignments-block{background:var(--canvas);border-radius:var(--radius-sm);padding:12px 14px}
.assignment-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.assignment-chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--tan);
  border-radius:20px;padding:5px 8px 5px 12px;font-size:12px;color:var(--text);
}
.assignment-chip-remove{
  background:var(--tan);color:#fff;border:none;border-radius:50%;width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;font-size:10px;cursor:pointer;flex-shrink:0;
}
.assignment-chip-remove:hover{background:var(--tan-dark)}
.assignment-add-row{display:flex;gap:8px;flex-wrap:wrap}
.assignment-add-row select{flex:1;min-width:130px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--text)}
.assignment-add-row select option{background:var(--paper);color:var(--text)}

/* ---------- Sales Through KPI grid ---------- */
.kpi-grid-table input[type="number"]{width:90px;padding:6px 8px;border-radius:6px;border:1px solid var(--line);background:var(--paper);color:var(--text)}
.kpi-grid-table .kpi-calc{font-weight:700;color:var(--heading)}

/* ---------- Bulk Department/Category assignment checklist (Buyers) ---------- */
.btn-link{background:none;border:none;color:var(--accent-text);font-weight:600;font-size:12px;cursor:pointer;padding:0;text-decoration:underline}
.btn-link:hover{color:var(--tan)}
#assignCatFilter{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--text)}
#assignCatFilter::placeholder{color:var(--text-muted)}
.assignment-checklist{background:var(--ink-soft)}
.assignment-dept-group{border-bottom:1px solid var(--line)}
.assignment-dept-group:last-child{border-bottom:none}
.assignment-dept-group summary{list-style:none;color:var(--text)}
.assignment-dept-group summary::-webkit-details-marker{display:none}
.assignment-dept-group summary:before{content:'▸ ';color:var(--text-muted)}
.assignment-dept-group[open] summary:before{content:'▾ '}
.assignment-cat-option{color:var(--text)}
.assignment-cat-option input[type="checkbox"]{accent-color:var(--tan);width:15px;height:15px;flex:0 0 auto}
.assignment-cat-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dept-select-all-btn{font-size:11px !important}

/* =========================================================
   iOS "Liquid Glass" theme layer (loaded last — overrides above)
   Translucent glass surfaces, bright specular edges, big rounded
   corners, capsule controls, SF system font, floating bars.
   Blur is used only on floating elements (sidebar, top bar, pop-ups)
   so long tables stay fast.
   ========================================================= */
:root{
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;

  --ios-blue:#0A84FF; --ios-blue-2:#3D9BFF;
  --ios-green:#30D158; --ios-amber:#FF9F0A; --ios-red:#FF453A; --ios-violet:#BF5AF2;
  --tan:#0A84FF; --tan-dark:#0A6FDB; --green:#30D158; --amber:#FF9F0A; --red:#FF453A; --violet:#BF5AF2;
  --accent-text:#64B0FF;

  --glass:        rgba(255,255,255,0.075);
  --glass-strong: rgba(36,32,56,0.62);
  --glass-solid:  #272240;
  --glass-edge:   rgba(255,255,255,0.16);
  --glass-edge-dark: rgba(0,0,0,0.35);
  --specular: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.28);
  --line: rgba(255,255,255,0.10);
  --paper: rgba(255,255,255,0.075);
  --hover-row: rgba(255,255,255,0.07);

  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,0.28), var(--specular);
  --shadow-lg: 0 24px 70px rgba(0,0,0,0.5), var(--specular);
}

body{
  background:#0E0B1A;
  letter-spacing:-0.005em;
}
/* Ambient colour behind the glass, so the glass has something to refract */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vmax 60vmax at 8% 0%, rgba(10,132,255,0.34), transparent 60%),
    radial-gradient(55vmax 55vmax at 100% 12%, rgba(191,90,242,0.28), transparent 60%),
    radial-gradient(60vmax 60vmax at 55% 105%, rgba(48,209,88,0.16), transparent 60%),
    #0E0B1A;
}
.login-body{background:#0E0B1A}
code{background:rgba(255,255,255,0.12);color:var(--heading)}

/* ---------- Floating glass sidebar + top bar ---------- */
.sidebar,.topbar,.notif-dropdown,.drawer-panel,.lightbox-close{
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
}
.sidebar{
  background:var(--glass-strong);
  border:1px solid var(--glass-edge);box-shadow:var(--shadow-lg);
}
@media (min-width:721px){
  .sidebar{margin:12px 0 12px 12px;top:12px;height:calc(100vh - 24px);border-radius:28px}
  .topbar{margin:12px 26px 0;top:12px;height:60px;border-radius:999px;padding:0 20px}
}
.topbar{
  background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--shadow);
}
.sidebar-brand,.sidebar-foot{border-color:rgba(255,255,255,0.10)}
.nav-link{border-radius:12px;padding:8px 11px;color:#E6E2F2}
.nav-link:hover{background:rgba(255,255,255,0.10)}
.nav-link.active{
  background:linear-gradient(180deg,#3D9BFF,#0A84FF);color:#fff;
  box-shadow:0 4px 14px rgba(10,132,255,0.45), inset 0 1px 0 rgba(255,255,255,0.4);
}
.dept-pills span{background:rgba(255,255,255,0.10);border-radius:999px}
.avatar{background:linear-gradient(135deg,#BF5AF2,#0A84FF);box-shadow:inset 0 1px 0 rgba(255,255,255,0.4)}
.app-footer{border-top:none}

/* ---------- Glass cards / panels ---------- */
.panel,.kpi-card,.buyer-kpi-card,.design-card,.plan-detail-card,.login-card{
  background:var(--glass);border:1px solid var(--glass-edge);
  box-shadow:var(--shadow);border-radius:var(--radius);
}
.panel{padding:22px 24px}
.kpi-card,.buyer-kpi-card{
  --kpi-accent:var(--ios-blue);border-top:1px solid var(--glass-edge);
  background:
    linear-gradient(var(--kpi-accent),var(--kpi-accent)) 22px 0/36px 3px no-repeat,
    var(--glass);
}
.kpi-card.accent-tan{--kpi-accent:var(--ios-blue)}
.kpi-card.accent-slate{--kpi-accent:#8E9BB5}
.kpi-card.accent-green{--kpi-accent:var(--ios-green)}
.kpi-card.accent-amber{--kpi-accent:var(--ios-amber)}
.kpi-card.accent-violet{--kpi-accent:var(--ios-violet)}
.kpi-value{font-weight:700;letter-spacing:-0.02em}
.kpi-label{letter-spacing:.05em}
.plan-breakdown-wrap,.approval-trail,.receive-summary,.thumb-empty,.passport-photo-empty{
  background:rgba(255,255,255,0.06);border-radius:var(--radius-sm)
}
.thumb,.thumb-preview{border-radius:12px;border-color:var(--glass-edge)}

/* ---------- Buttons: capsules ---------- */
.btn{border-radius:999px;padding:10px 20px;font-weight:600;letter-spacing:-0.01em}
.btn:active{transform:scale(0.97)}
.btn-primary{
  background:linear-gradient(180deg,#3D9BFF,#0A84FF);color:#fff;
  box-shadow:0 6px 18px rgba(10,132,255,0.38), inset 0 1px 0 rgba(255,255,255,0.45);
}
.btn-primary:hover{background:linear-gradient(180deg,#52A8FF,#1A8CFF)}
.btn-ghost{
  background:rgba(255,255,255,0.09);border:1px solid var(--glass-edge);color:var(--heading);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-ghost:hover{background:rgba(255,255,255,0.16)}
.icon-btn,.notif-bell{
  border-radius:50%;background:rgba(255,255,255,0.09);border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18);
}
.icon-btn:hover,.notif-bell:hover{background:rgba(255,255,255,0.18)}
.icon-btn.danger{border-color:rgba(255,69,58,0.4)}
.notif-badge{border-color:rgba(36,32,56,0.9)}
.btn-link{color:var(--accent-text)}

/* ---------- Inputs ---------- */
.form-grid input,.form-grid select,.form-grid textarea,
.period-filter select,.period-filter input,.inline-add input,.inline-add select,
.inline-filter select,.row-edit-form input[type="text"],.row-edit-form select,
.login-card input,.assignment-add-row select,#assignCatFilter,.kpi-grid-table input[type="number"]{
  background:rgba(255,255,255,0.07);border:1px solid var(--glass-edge);border-radius:12px;color:var(--text);
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.25);
}
.form-grid input,.form-grid select,.form-grid textarea{padding:8px 11px}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,
.period-filter select:focus,.period-filter input:focus,.login-card input:focus{
  outline:none;border-color:var(--ios-blue);background:rgba(255,255,255,0.11);
  box-shadow:0 0 0 4px rgba(10,132,255,0.28);
}
.form-grid input.readonly-calc{background:rgba(10,132,255,0.18);color:#9CCBFF}
.form-grid input:disabled,.form-grid select:disabled{opacity:.75}
select option{background:#272240;color:var(--text)}
.login-card{background:var(--glass-strong);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);margin:24px;border-radius:32px}

/* ---------- Tables ---------- */
.data-table th{background:transparent;border-bottom:1px solid var(--glass-edge);color:var(--text-muted)}
.data-table td{border-bottom:1px solid rgba(255,255,255,0.07)}
.data-table tbody tr:hover{background:var(--hover-row)}
.register-table-wrap{border-color:var(--glass-edge);border-radius:var(--radius-sm)}
.register-table thead th{background:#241F3B}
.register-table tbody tr:nth-child(even){background:rgba(255,255,255,0.035)}
.progress-track,.bar-track{background:rgba(255,255,255,0.10);border:none}
.progress-fill,.bar-fill-actual{background:linear-gradient(90deg,#3D9BFF,#0A84FF);border-radius:999px}
.progress-fill.full{background:linear-gradient(90deg,#5BE07C,#30D158)}
.bar-fill{background:rgba(255,255,255,0.22)}

/* ---------- Badges: tinted translucent pills ---------- */
.badge{border-radius:999px;padding:3px 10px;font-weight:600;border:1px solid transparent}
.badge-dept,.badge-plan-admin_approved,.badge-plan-pending_director,.badge-status-confirmed,.badge-buyerstatus-ordered{
  background:rgba(10,132,255,0.20);color:#8FC2FF;border-color:rgba(10,132,255,0.35)}
.badge-plan-pending_manager,.badge-status-pending,.badge-receive-partial,.badge-buyerstatus-pending_approval,.badge-buyerstatus-partial,.badge-design-pending{
  background:rgba(255,159,10,0.18);color:#FFC266;border-color:rgba(255,159,10,0.35)}
.badge-plan-approved,.badge-status-received,.badge-receive-full,.badge-buyerstatus-on_track,.badge-design-approved{
  background:rgba(48,209,88,0.18);color:#6EE590;border-color:rgba(48,209,88,0.35)}
.badge-plan-rejected,.badge-status-cancelled,.badge-buyerstatus-no_plan,.badge-design-rejected{
  background:rgba(255,69,58,0.18);color:#FF8A82;border-color:rgba(255,69,58,0.35)}
.badge-plan-draft,.badge-receive-not_received,.badge-buyerstatus-not_started{
  background:rgba(255,255,255,0.10);color:#C9C4DA;border-color:rgba(255,255,255,0.18)}
.badge-plan-closed{background:rgba(191,90,242,0.18);color:#D9A0F8;border-color:rgba(191,90,242,0.35)}
.reminder-note{color:#FFC266}

/* ---------- Alerts ---------- */
.alert{border-radius:var(--radius-sm);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.alert-success{background:rgba(48,209,88,0.16);color:#8EF0A8;border-color:rgba(48,209,88,0.35)}
.alert-info{background:rgba(10,132,255,0.16);color:#9CCBFF;border-color:rgba(10,132,255,0.35)}
.alert-error{background:rgba(255,69,58,0.16);color:#FF9D96;border-color:rgba(255,69,58,0.35)}

/* ---------- Pop-ups, drawers, notifications ---------- */
.drawer{background:rgba(8,6,18,0.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.drawer-panel{background:var(--glass-strong);border-left:1px solid var(--glass-edge);border-radius:28px 0 0 28px}
.drawer.modal-style .drawer-panel{border:1px solid var(--glass-edge);border-radius:30px}
.notif-dropdown{background:var(--glass-strong);border:1px solid var(--glass-edge);border-radius:22px}
.notif-item.unread{background:rgba(10,132,255,0.12)}
.notif-item:hover{background:rgba(255,255,255,0.07)}
.lightbox{background:rgba(8,6,18,0.82);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.lightbox img{border-radius:18px}
.design-dropzone{border-radius:var(--radius);background:rgba(255,255,255,0.05);border-color:var(--glass-edge)}
.design-dropzone.drag-over{border-color:var(--ios-blue);background:rgba(10,132,255,0.14)}
.design-card-actions{border-top-color:var(--glass-edge)}

/* ---------- Bulk assignment checklist (Buyers) ---------- */
.assignment-checklist{background:rgba(255,255,255,0.05);border-color:var(--glass-edge) !important;border-radius:var(--radius-sm) !important}
.assignment-cat-option input[type="checkbox"]{accent-color:var(--ios-blue)}

/* ---------- Accessibility: honour reduced transparency / more contrast ---------- */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more){
  .sidebar,.topbar,.notif-dropdown,.drawer-panel,.login-card,.alert,.lightbox,.drawer{
    -webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-solid);
  }
  .panel,.kpi-card,.buyer-kpi-card,.design-card,.plan-detail-card{background:var(--glass-solid);border-color:rgba(255,255,255,0.28)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sidebar,.topbar,.notif-dropdown,.drawer-panel,.login-card{background:var(--glass-solid)}
}

/* =========================================================
   Dropdowns (select) — dark glass pop-up instead of the browser's
   white-bordered list. Modern browsers (Chrome/Edge 135+) get a fully
   styled list; older ones fall back to a dark native list.
   ========================================================= */
select{color-scheme:dark}
@supports (appearance:base-select){
  select,select::picker(select){appearance:base-select}
  select{cursor:pointer}
  select::picker-icon{color:var(--text-muted);transition:rotate .2s ease}
  select:open::picker-icon{rotate:180deg}
  select::picker(select){
    margin-block:8px;padding:6px;min-width:anchor-size(width);max-height:min(340px,60vh);
    background:rgba(34,30,54,0.92);
    -webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
    border:1px solid var(--glass-edge);border-radius:18px;
    box-shadow:0 20px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.22);
    color:var(--text);
  }
  select option{
    padding:9px 12px;border-radius:11px;font-size:13px;font-weight:500;
    background:transparent;color:var(--text);cursor:pointer;
  }
  select option::checkmark{display:none}
  select option:hover,select option:focus-visible{background:rgba(255,255,255,0.12);color:#fff}
  select option:checked{background:linear-gradient(180deg,#3D9BFF,#0A84FF);color:#fff}
  select option:disabled{opacity:.45}
}

/* =========================================================
   Modern login page (index.php)
   ========================================================= */
.login-modern{min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
.login-orbs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.login-orbs span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75;animation:orb-float 18s ease-in-out infinite}
.login-orbs span:nth-child(1){width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:#0A84FF}
.login-orbs span:nth-child(2){width:40vmax;height:40vmax;right:-10vmax;top:8vmax;background:#BF5AF2;animation-delay:-6s}
.login-orbs span:nth-child(3){width:36vmax;height:36vmax;left:30vmax;bottom:-18vmax;background:#30D158;opacity:.45;animation-delay:-12s}
@keyframes orb-float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vmax,3vmax) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.login-orbs span{animation:none}}

.login-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 18px}
.login-glass{
  width:100%;max-width:420px;padding:40px 36px 30px;border-radius:36px;
  background:rgba(30,26,48,0.58);border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(32px) saturate(190%);backdrop-filter:blur(32px) saturate(190%);
  box-shadow:0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.login-glass .login-logo-img{height:34px;margin:0 0 22px;align-self:center}
.login-glass h1{font-size:28px;letter-spacing:-0.02em;color:#fff}
.login-sub{margin:6px 0 24px;color:var(--text-muted);font-size:14px}
.login-glass .alert{width:100%;text-align:left;margin-bottom:14px}
.login-form{width:100%;display:flex;flex-direction:column;gap:12px}
.login-field{
  position:relative;display:flex;align-items:center;height:54px;border-radius:18px;
  background:rgba(255,255,255,0.08);border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);transition:box-shadow .15s, border-color .15s, background .15s;
}
.login-field:focus-within{border-color:var(--ios-blue);background:rgba(255,255,255,0.12);box-shadow:0 0 0 4px rgba(10,132,255,0.28)}
.login-field>svg{width:19px;height:19px;margin-left:16px;flex-shrink:0;fill:none;stroke:var(--text-muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-field input{
  flex:1;min-width:0;height:100%;background:transparent;border:none;outline:none;box-shadow:none;
  color:var(--heading);font-size:15px;padding:0 14px;border-radius:0;
}
.login-field input::placeholder{color:var(--text-muted)}
.login-field input:-webkit-autofill{-webkit-text-fill-color:var(--heading);transition:background-color 99999s}
.login-eye{
  width:40px;height:40px;margin-right:7px;border-radius:50%;border:none;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);
}
.login-eye:hover{background:rgba(255,255,255,0.12);color:#fff}
.login-eye svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-lg{height:54px;padding:0 24px;font-size:15px;margin-top:6px}
.login-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:24px 0 0;padding:0}
.login-pills li{font-size:11.5px;font-weight:600;color:#C9C4DA;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);padding:5px 12px;border-radius:999px}
.login-modern .login-footer{background:transparent;padding:14px 18px 22px}
.login-modern .login-footer p{color:#9A93B4}
@media (max-width:480px){.login-glass{padding:32px 22px 24px;border-radius:30px}}

/* =========================================================
   Print / Export to PDF (report_center.php) — clean white A4 report
   with logo header, summary tiles, running footer and page numbers.
   Placed last so it overrides the dark glass theme.
   ========================================================= */
@media print{
  html,body{background:#fff !important;color:#1B1F2A !important;font-size:11px}
  body::before{display:none !important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  .sidebar,.topbar,.app-footer,.period-filter,.notif-wrap,.burger,.lightbox,.alert,
  .page-content>.panel-head,.icon-btn,.drawer{display:none !important}
  .app-shell,.app-main{display:block !important}
  .page-content{padding:0 !important;max-width:none !important;margin:0 !important}
  .panel{background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important}
  h1,h2,h3{color:#0B1F44 !important}
  .muted,small{color:#6B7384 !important}

  /* ---- Header ---- */
  .print-header{display:block !important;margin-bottom:14px}
  .ph-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .ph-logo{height:15mm;width:auto}
  .ph-title{text-align:right}
  .ph-kicker{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#7A8294;font-weight:700}
  .ph-title h1{font-size:19px;line-height:1.2;margin:3px 0 0;font-weight:800;letter-spacing:-0.01em}
  .ph-bar{height:3px;border-radius:3px;margin:9px 0 8px;background:linear-gradient(90deg,#ED1C24,#7C5CFC 55%,#0A84FF)}
  .ph-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:10px;color:#3A4152}
  .ph-meta b{color:#7A8294;font-weight:700;text-transform:uppercase;font-size:8.5px;letter-spacing:.08em;margin-right:4px}
  .ph-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin-top:10px}
  .ph-tile{background:#F3F6FB;border:1px solid #E1E7F2;border-radius:8px;padding:7px 10px}
  .ph-tile span{display:block;font-size:8.5px;text-transform:uppercase;letter-spacing:.08em;color:#6B7384;font-weight:700}
  .ph-tile strong{display:block;font-size:15px;color:#0B1F44;margin-top:2px}

  /* ---- Buyer sections & tables ---- */
  .report-buyer-group{margin:0 0 14px !important}
  .report-buyer-head{
    display:flex;align-items:baseline;justify-content:space-between;
    background:#F3F6FB;border-left:4px solid #0A84FF;border-radius:4px;padding:6px 10px;margin:0 0 6px;border-bottom:none;break-after:avoid;
  }
  .report-buyer-head h3{font-size:12.5px}
  .table-wrap{overflow:visible}
  .data-table{width:100%;font-size:9.5px;border-collapse:collapse}
  .data-table thead{display:table-header-group}
  .data-table tr{break-inside:avoid}
  .data-table th{
    background:#1F2A44 !important;color:#fff !important;font-size:8px;letter-spacing:.06em;padding:6px 8px;border:none;
  }
  .data-table th:first-child{border-radius:5px 0 0 5px}
  .data-table th:last-child{border-radius:0 5px 5px 0}
  .data-table td{color:#1B1F2A !important;padding:6px 8px;border-bottom:1px solid #E5E8EF}
  .data-table tbody tr:nth-child(even){background:#F8F9FC !important}
  .data-table tbody tr:hover{background:inherit}
  code{background:#EEF1F6 !important;color:#1B1F2A !important;border:none}
  .passport-photo,.thumb{border:1px solid #D9DEE8;border-radius:3px}
  .progress-track{background:#E3E7EF !important;height:5px}
  .progress-fill{background:#0A84FF !important}
  .progress-fill.full{background:#22A06B !important}

  /* ---- Status badges (light tints, dark text) ---- */
  .badge{border:none !important;font-size:8.5px;padding:2px 8px}
  .badge-dept,.badge-plan-admin_approved,.badge-plan-pending_director,.badge-status-confirmed,.badge-buyerstatus-ordered{background:#DCE9FF !important;color:#0A4DB0 !important}
  .badge-plan-pending_manager,.badge-status-pending,.badge-receive-partial,.badge-buyerstatus-pending_approval,.badge-buyerstatus-partial,.badge-design-pending{background:#FFEBC7 !important;color:#8A5300 !important}
  .badge-plan-approved,.badge-status-received,.badge-receive-full,.badge-buyerstatus-on_track,.badge-design-approved{background:#D5F3DF !important;color:#17703F !important}
  .badge-plan-rejected,.badge-status-cancelled,.badge-buyerstatus-no_plan,.badge-design-rejected{background:#FFDAD7 !important;color:#A52620 !important}
  .badge-plan-draft,.badge-receive-not_received,.badge-buyerstatus-not_started{background:#E8EAF0 !important;color:#4A5163 !important}
  .badge-plan-closed{background:#EBDDFB !important;color:#6A2FA3 !important}

  a[href]:after{content:""}
}