*,*::before,*::after{box-sizing:border-box;}
body{font-family:'Segoe UI',Tahoma,sans-serif;margin:0;padding:12px;background:#f0f2f5;color:#1a1a1a;font-size:13px;}
.wrap{max-width:1400px;margin:0 auto;}
h1{margin:0 0 14px;font-size:20px;color:#1e3a5f;}

.card{background:#fff;border-radius:10px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,.08);margin-bottom:14px;}
.hidden{display:none!important;}

label{display:block;font-size:11px;font-weight:700;margin-bottom:4px;color:#6b7280;text-transform:uppercase;letter-spacing:.4px;}
input[type=text],input[type=number],input[type=date],input[type=password],input[type=email],select{width:100%;padding:7px 10px;border:1px solid #d1d5db;border-radius:6px;background:#f9fafb;font-size:13px;color:#1a1a1a;}
input:focus,select:focus{outline:2px solid #93c5fd;border-color:#3b82f6;background:#fff;}
input:disabled,select:disabled{background:#e9ecef;color:#6b7280;border:1px dashed #ccc;cursor:not-allowed;}
.form-group{margin-bottom:10px;}

.btn{background:#2563eb;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-weight:700;font-size:13px;}
.btn:hover{background:#1d4ed8;}
.btn-success{background:#10b981;}.btn-success:hover{background:#059669;}
.btn-warning{background:#f59e0b;color:#000;}.btn-warning:hover{background:#d97706;}
.btn-danger{background:#ef4444;color:#fff;border:none;padding:3px 9px;border-radius:4px;cursor:pointer;font-size:13px;font-weight:700;}
.btn-danger:hover{background:#dc2626;}
.btn-sm{padding:6px 12px;font-size:12px;}
.btn-ghost{background:transparent;border:1px solid #d1d5db;color:#374151;padding:7px 14px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;}
.btn-ghost:hover{background:#f3f4f6;}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:end;}
.g4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;align-items:end;}

.toast{padding:11px 16px;border-radius:8px;font-weight:700;font-size:13px;margin-bottom:12px;display:none;position:fixed;top:20px;right:20px;z-index:9999;min-width:300px;}
.toast.ok{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7;}
.toast.err{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;}

.tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:2px solid #ddd;flex-wrap:wrap;padding-bottom:0;}
.tab{border:none;background:transparent;padding:9px 13px;cursor:pointer;font-weight:700;color:#6b7280;font-size:12px;border-radius:6px 6px 0 0;border-bottom:3px solid transparent;margin-bottom:-2px;}
.tab.active{color:#2563eb;border-bottom-color:#2563eb;background:#eff6ff;}
.tab:hover:not(.active){background:#f3f4f6;color:#374151;}

.tbl-wrap{overflow-x:auto;border-radius:8px;border:1px solid #e5e7eb;}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead tr{background:#1e40af;}
th{color:#fff;padding:10px 8px;text-align:left;white-space:nowrap;font-weight:600;font-size:12px;}
td{border-bottom:1px solid #f0f4f8;padding:5px 5px;vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:#f8fafc;}
.td-r{text-align:right;}

.status-strip{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:7px;margin-bottom:12px;font-weight:600;font-size:13px;}
.status-strip.locked{background:#fef2f2;border:1px solid #fca5a5;color:#991b1b;}
.status-strip.open{background:#f0fdf4;border:1px solid #86efac;color:#166534;}

.total-bar{display:flex;justify-content:flex-end;align-items:center;gap:20px;padding:10px 16px;border-radius:0 0 8px 8px;color:#fff;background:#1e293b;}
.total-bar .lbl{font-size:12px;color:#94a3b8;}
.total-bar .val{font-size:20px;font-weight:800;color:#34d399;}

#userBar{display:flex;align-items:center;justify-content:space-between;background:#1e3a5f;color:#e2e8f0;padding:8px 16px;border-radius:8px;margin-bottom:12px;font-size:12px;}
#userBar .ub-left{display:flex;align-items:center;gap:10px;}
#userBar .ub-name{font-weight:700;font-size:13px;color:#fff;}
.role-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;letter-spacing:.4px;}
.role-admin{background:#7c3aed;color:#fff;}
.role-manager{background:#0d9488;color:#fff;}
.role-dataentry{background:#d97706;color:#fff;}
.role-viewonly{background:#6b7280;color:#fff;}
.btn-logout{background:transparent;border:1px solid #475569;color:#94a3b8;padding:4px 12px;border-radius:5px;cursor:pointer;font-size:11px;font-weight:600;}
.btn-logout:hover{background:#ef4444;border-color:#ef4444;color:#fff;}

#loginScreen{position:fixed;inset:0;background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 50%,#0f172a 100%);display:flex;align-items:center;justify-content:center;z-index:9999;}
.login-box{background:#fff;border-radius:16px;padding:40px 36px;width:380px;max-width:95vw;box-shadow:0 24px 64px rgba(0,0,0,.4);}
.login-logo{text-align:center;font-size:42px;margin-bottom:8px;}
.login-title{text-align:center;font-size:22px;font-weight:900;color:#1e3a5f;margin-bottom:4px;}
.login-sub{text-align:center;font-size:12px;color:#6b7280;margin-bottom:28px;}
.login-err{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;border-radius:7px;padding:10px 14px;font-size:13px;font-weight:600;margin-bottom:14px;display:none;}
.btn-login{width:100%;background:#1e40af;color:#fff;border:none;padding:13px;border-radius:8px;font-size:15px;font-weight:800;cursor:pointer;}
.btn-login:hover{background:#1e3a8a;}

.val-error{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;border-radius:7px;padding:10px 14px;font-weight:600;font-size:13px;margin-bottom:10px;display:none;}

.pill-wrap{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px;}
.pill-wrap label{display:flex;align-items:center;gap:5px;font-weight:600;font-size:12px;cursor:pointer;background:#f3f4f6;border:1px solid #d1d5db;border-radius:20px;padding:5px 12px;transition:all .15s;text-transform:none;letter-spacing:0;color:#374151;}
.pill-wrap label.on{background:#2563eb;color:#fff;border-color:#2563eb;}
.pill-wrap label:hover:not(.on){background:#dbeafe;border-color:#93c5fd;}
.pill-wrap input[type=checkbox]{display:none;}

.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:30px;}
.tag{display:inline-flex;align-items:center;gap:5px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:600;}
.tag .x{cursor:pointer;color:#ef4444;font-weight:900;font-size:15px;line-height:1;}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:center;justify-content:center;}
.modal-box{background:#fff;border-radius:12px;padding:24px;width:420px;max-width:95vw;box-shadow:0 8px 32px rgba(0,0,0,.2);}
.modal-box h3{margin:0 0 14px;color:#1e3a5f;font-size:16px;}
.modal-close{float:right;cursor:pointer;color:#9ca3af;font-size:22px;font-weight:900;line-height:1;}
.modal-close:hover{color:#ef4444;}

@media print{
  .tabs,.btn,.btn-ghost,button,.toast,.val-error,.modal-overlay,#userBar{display:none!important;}
  body{background:#fff;padding:0;}
  .card{box-shadow:none;border:1px solid #e5e7eb;}
}

/* ─────────────────────────────────────────────────────
   GROUPED MENU BAR
   ───────────────────────────────────────────────────── */

.menu-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1e293b;
  padding: 8px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  position: relative;
  z-index: 100;
}

.menu-group {
  position: relative;
}

.menu-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 16px;
  border-radius: 7px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.menu-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
}

.menu-btn.active {
  background: #2563eb;
  border-color: #3b82f6;
  color: #fff;
}

.menu-btn .arrow {
  font-size: 9px;
  transition: transform 0.15s;
}

.menu-group.open .menu-btn .arrow {
  transform: rotate(180deg);
}

.menu-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  min-width: 220px;
  z-index: 1000;
  margin-top: 4px;
  overflow: hidden;
}

.menu-group.open .menu-dropdown {
  display: block;
}

.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: #1e293b;
  border: none;
  border-bottom: 1px solid #f3f4f6;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.1s;
}

.menu-item:hover {
  background: #eff6ff;
  color: #1e40af;
}

.menu-item.active {
  background: #1e40af;
  color: #fff;
  font-weight: 700;
}

.menu-item:last-child {
  border-bottom: none;
}

.current-tab-display {
  margin-left: auto;
  background: #2563eb;
  color: #fff;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
}

/* Hide old tabs class if used elsewhere */
.tabs { display: none !important; }

/* Mobile responsive */
@media (max-width: 700px) {
  .menu-bar {
    padding: 6px 8px;
  }
  .menu-btn {
    padding: 7px 10px;
    font-size: 12px;
  }
  .current-tab-display {
    width: 100%;
    margin-top: 8px;
    margin-left: 0;
    text-align: center;
  }
  .menu-dropdown {
    min-width: 180px;
  }
}