:root{
  --ink:#1B2A2E;
  --paper:#F6F4EF;
  --panel:#FFFFFF;
  --line:#DCD6C9;
  --teal:#0E4B4F;
  --teal-deep:#0A3538;
  --amber:#C87A1F;
  --amber-soft:#F1E3CF;
  --green:#3A7350;
  --green-soft:#E1EDE3;
  --red:#B3452F;
  --red-soft:#F3E1DC;
  --mono:'JetBrains Mono','Courier New',monospace;
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1100px;padding:28px 22px 80px;}

/* Header */
header{
  border-bottom:3px solid var(--teal);
  padding-bottom:16px;margin-bottom:24px;
}
.rx-badge{
  width:42px;height:42px;border-radius:8px;background:var(--teal);
  color:var(--paper);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:19px;flex-shrink:0;
}
h1{font-size:22px;margin:0;letter-spacing:0.2px;font-weight:700;}
.sub{font-size:12.5px;color:#6b6459;margin-top:2px;letter-spacing:0.3px;text-transform:uppercase;}
.reg-count{font-family:var(--mono);font-size:13px;color:var(--teal-deep);text-align:right;}
.reg-count b{font-size:20px;display:block;}

/* Tabs */
.po-tabs{margin-bottom:20px;border-bottom:1px solid var(--line);}
.po-tabs .nav-link{
  border:none;background:transparent;padding:10px 18px;font-size:13.5px;font-weight:700;
  cursor:pointer;color:#8a8378;border-bottom:3px solid transparent;
  border-radius:0;margin-bottom:-1px;
}
.po-tabs .nav-link.active{color:var(--teal-deep);border-bottom-color:var(--teal);background:transparent;}
.po-tabs .nav-link:hover{color:var(--teal-deep);}

/* Stat cards */
.stat-grid{margin-bottom:22px;}
.stat-card{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;cursor:pointer;height:100%;
}
.stat-card .num{font-family:var(--mono);font-size:28px;font-weight:700;color:var(--teal-deep);line-height:1;}
.stat-card .lbl{font-size:11.5px;color:#8a8378;text-transform:uppercase;letter-spacing:0.4px;margin-top:6px;font-weight:700;}
.stat-card.warn .num{color:var(--amber);}
.stat-card.alert .num{color:var(--red);}
.stat-card.ok .num{color:var(--green);}

/* Attention list */
.attn-item{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap;cursor:pointer;
}
.attn-item:last-child{border-bottom:none;}
.attn-main{min-width:200px;}
.attn-product{font-weight:700;font-size:14px;}
.attn-meta{font-size:11.5px;color:#9a9384;font-family:var(--mono);margin-top:2px;}
.attn-reasons{display:flex;gap:6px;flex-wrap:wrap;}
.attn-reason{font-size:11px;font-weight:700;padding:4px 9px;border-radius:5px;}
.attn-reason.status{background:var(--amber-soft);color:#8a5714;}
.attn-reason.design{background:var(--red-soft);color:var(--red);}
.attn-reason.visual{background:#DDE7F1;color:#2A5788;}

/* Orders table */
.table-scroll{overflow-x:auto;margin-top:6px;}
.orders-table{width:100%;font-size:13px;min-width:720px;}
.orders-table th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.4px;
  color:#8a8378;padding:10px 10px;border-bottom:2px solid var(--line);font-weight:700;
  white-space:nowrap;
}
.orders-table td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle;}
.orders-table tbody tr{cursor:pointer;transition:0.1s;}
.orders-table tbody tr:hover{background:#F4F1E9;}
.orders-table .po-id-cell{font-family:var(--mono);color:var(--amber);font-weight:700;font-size:12px;}
.orders-table .mini-pill{
  font-size:10.5px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:20px;white-space:nowrap;
}
.orders-table .view-cell{text-align:right;}
.quick-filter-label{font-size:12px;color:#8a8378;margin:-10px 0 14px;font-weight:600;}

/* Modal */
.modal-header,.modal-footer{border-color:var(--line);}
.modal-title{font-size:16px;font-weight:700;}

/* Panel */
.panel{border:1px solid var(--line);border-radius:10px;margin-bottom:22px;}
.panel h2{
  font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--teal-deep);
  margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
}
.panel h2 .toggle-btn{
  font-size:12px;text-transform:none;letter-spacing:0;cursor:pointer;color:var(--amber);
  font-weight:600;
}

label.form-label{font-size:12px;font-weight:600;color:#54504a;letter-spacing:0.2px;}
.form-control,.form-select{
  border:1px solid var(--line);background:#FDFCFA;border-radius:6px;
  padding:9px 11px;font-size:14px;color:var(--ink);
}
.form-control:focus,.form-select:focus{
  outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);
  box-shadow:none;
}
textarea.form-control{resize:vertical;min-height:64px;}

/* Yes/No toggle */
.yn-toggle{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;width:fit-content;}
.yn-toggle button{
  border:none;border-radius:0;background:#FDFCFA;padding:8px 18px;font-size:13px;font-weight:600;
  cursor:pointer;color:#6b6459;
}
.yn-toggle button:first-child{border-right:1px solid var(--line);}
.yn-toggle button.active-yes{background:var(--green);color:#fff;}
.yn-toggle button.active-no{background:var(--red);color:#fff;}

/* Platform ticks */
.platform-row{display:flex;gap:10px;flex-wrap:wrap;}
.platform-chip{
  display:flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:20px;padding:8px 14px;cursor:pointer;font-size:13px;font-weight:600;
  background:#FDFCFA;color:#6b6459;user-select:none;transition:0.12s;width:fit-content;
}
.platform-chip input{display:none;}
.platform-chip .box{
  width:16px;height:16px;border-radius:4px;border:1.5px solid #a49c8c;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.platform-chip.checked{background:var(--teal);border-color:var(--teal);color:#fff;}
.platform-chip.checked .box{background:#fff;border-color:#fff;}
.platform-chip.checked .box:after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--teal);font-size:10px;}

.btn-row{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
.btn-primary-teal{background:var(--teal);color:#fff;border:none;border-radius:6px;padding:11px 22px;font-size:13.5px;font-weight:700;letter-spacing:0.2px;}
.btn-primary-teal:hover{background:var(--teal-deep);color:#fff;}
.btn-ghost{background:transparent;color:#6b6459;border:1px solid var(--line);border-radius:6px;padding:11px 22px;font-size:13.5px;font-weight:700;letter-spacing:0.2px;}
.btn-ghost:hover{background:#efece3;color:#6b6459;}

/* Filters */
.filter-bar{margin-bottom:16px;}
.filter-count{font-size:12px;color:#8a8378;font-family:var(--mono);}

/* PO cards */
.po-card{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:18px 20px;margin-bottom:14px;
}
.po-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.po-id{font-family:var(--mono);font-size:12.5px;color:var(--amber);font-weight:700;letter-spacing:0.5px;}
.po-product{font-size:17px;font-weight:700;margin:3px 0 2px;}
.po-date{font-size:11.5px;color:#9a9384;}
.status-pill{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;
  padding:5px 11px;border-radius:20px;white-space:nowrap;
}
.status-pending{background:var(--amber-soft);color:#8a5714;}
.status-progress{background:#DDE7F1;color:#2A5788;}
.status-completed{background:var(--green-soft);color:#28613C;}

.po-body{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-top:14px;font-size:13.5px;}
.po-body .kv b{display:block;font-size:11px;text-transform:uppercase;color:#9a9384;letter-spacing:0.4px;margin-bottom:2px;font-weight:700;}

.flag-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.flag{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:5px;display:flex;align-items:center;gap:5px;}
.flag.yes{background:var(--green-soft);color:#28613C;}
.flag.no{background:#EFECE3;color:#8a8378;}

.tick-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.tick{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:5px;border:1px solid var(--line);color:#b3ab9c;background:#FDFCFA;}
.tick.on{background:var(--teal);color:#fff;border-color:var(--teal);}

.remarks-box{
  margin-top:14px;background:#FBF8F0;border-left:3px solid var(--amber);
  padding:9px 13px;font-size:13px;color:#54504a;border-radius:0 6px 6px 0;
}
.remarks-box b{color:var(--amber);text-transform:uppercase;font-size:10.5px;letter-spacing:0.4px;display:block;margin-bottom:3px;}

.card-actions{display:flex;gap:8px;margin-top:14px;justify-content:flex-end;flex-wrap:wrap;}
.icon-btn{
  border:1px solid var(--line);background:#FDFCFA;border-radius:6px;padding:6px 12px;
  font-size:12px;cursor:pointer;font-weight:600;color:#54504a;
}
.icon-btn.danger:hover{background:var(--red-soft);color:var(--red);border-color:var(--red);}
.icon-btn:hover{background:#efece3;}

.empty-state{text-align:center;padding:60px 20px;color:#9a9384;}
.empty-state .big{font-size:38px;margin-bottom:10px;}

@media(max-width:640px){
  .po-body{grid-template-columns:1fr;}
}

/* Login */
.login-body{background:var(--paper);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-wrap{width:100%;max-width:400px;}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:32px 28px;box-shadow:0 10px 30px rgba(0,0,0,0.06);}
.login-card .input-group-text{background:#FDFCFA;border-color:var(--line);color:#9a9384;}
.login-card .input-group .btn-ghost{border-color:var(--line);padding:9px 14px;}
.login-card .input-group .form-control:focus{z-index:0;}

/* Top nav */
.app-nav{background:var(--panel);border-bottom:1px solid var(--line);padding:0 22px;margin-bottom:24px;}
.app-nav .nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:12px 0;}
.app-nav .nav-links{display:flex;gap:4px;flex-wrap:wrap;}
.app-nav .nav-links a{
  padding:8px 14px;border-radius:6px;font-size:13.5px;font-weight:700;color:#6b6459;text-decoration:none;
}
.app-nav .nav-links a.active,.app-nav .nav-links a:hover{background:var(--teal);color:#fff;}
.app-nav .user-box{font-size:12.5px;color:#6b6459;display:flex;align-items:center;gap:10px;}
.app-nav .user-box .role-pill{font-size:10.5px;font-weight:700;text-transform:uppercase;padding:3px 9px;border-radius:20px;background:var(--amber-soft);color:#8a5714;}
.app-nav .user-box a{color:var(--red);text-decoration:none;font-weight:700;}

/* Pagination */
.pager{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:16px;flex-wrap:wrap;}
.pager button{
  border:1px solid var(--line);background:#FDFCFA;border-radius:6px;padding:6px 12px;
  font-size:12.5px;cursor:pointer;font-weight:600;color:#54504a;
}
.pager button.active{background:var(--teal);color:#fff;border-color:var(--teal);}
.pager button:disabled{opacity:0.4;cursor:not-allowed;}