*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:  #003580;
  --blue:  #1a5fa8;
  --gold:  #f0a500;
  --green: #155724;
  --red:   #c0392b;
  --bg:    #f0f4fb;
  --card:  #fff;
  --border:#d0d8ea;
  --text:  #1a1a2e;
  --muted: #6c757d;
}

body { font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; background: var(--bg); color: var(--text); }

/* ── Navbar ── */
.navbar { background: var(--navy); color: #fff; padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 24px; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.nav-brand img { height: 32px; }
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-links a { color: rgba(255,255,255,0.75); text-decoration: none; padding: 6px 14px; border-radius: 6px; font-size: 13px; transition: all .15s; }
.nav-links a:hover, .nav-links a.active { background: rgba(255,255,255,0.15); color: #fff; }
.nav-user { display: flex; align-items: center; gap: 10px; font-size: 13px; }

/* ── Main ── */
.main-content { padding: 24px; max-width: 1200px; margin: 0 auto; }

/* ── Alerts ── */
.alert { padding: 10px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; }
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-danger  { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.alert-info    { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }

/* ── Cards ── */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 20px 24px; margin-bottom: 20px; }
.card h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 14px; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; text-decoration: none; transition: all .15s; }
.btn-primary   { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--blue); }
.btn-secondary { background: #e9ecef; color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: #dee2e6; }
.btn-success   { background: #28a745; color: #fff; }
.btn-success:hover { background: #218838; }
.btn-danger    { background: var(--red); color: #fff; }
.btn-danger:hover { background: #a93226; }
.btn-warning   { background: var(--gold); color: #000; }
.btn-sm        { padding: 5px 10px; font-size: 12px; }
.btn-full      { width: 100%; justify-content: center; }

/* ── Forms ── */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; font-size: 12px; color: var(--navy); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.3px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 6px;
  font-size: 13px; outline: none; background: #f8faff; transition: border-color .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--navy); background: #fff; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-actions { display: flex; gap: 10px; margin-top: 20px; }
.required { color: var(--red); }
.form-section { border-top: 2px solid var(--navy); padding-top: 16px; margin-top: 20px; }
.form-section-title { font-size: 13px; font-weight: 700; color: var(--navy); background: #eaf0fb; padding: 6px 12px; border-left: 4px solid var(--navy); border-radius: 0 4px 4px 0; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.4px; }

/* ── Badges ── */
.badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.badge-pending     { background: #fff3cd; color: #856404; }
.badge-approved    { background: #d4edda; color: #155724; }
.badge-in-progress { background: #cce5ff; color: #004085; }
.badge-completed   { background: #d1ecf1; color: #0c5460; }
.badge-rejected    { background: #f8d7da; color: #721c24; }
.badge-role-admin       { background: #003580; color: #fff; }
.badge-role-engineer    { background: #1a5fa8; color: #fff; }
.badge-role-quality     { background: #155724; color: #fff; }
.badge-role-report{ background: #6f42c1; color: #fff; }

/* ── Tables ── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { background: var(--navy); color: #fff; padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 700; }
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:hover { background: #f5f8ff; }
.data-table .actions { display: flex; gap: 6px; }

/* ── Stats grid ── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; border-top: 3px solid var(--navy); }
.stat-card .num { font-size: 32px; font-weight: 800; color: var(--navy); }
.stat-card .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

/* ── Page header ── */
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.page-header h2 { font-size: 20px; font-weight: 700; color: var(--navy); }
.header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Detail grid ── */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.detail-list { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; font-size: 13px; }
.detail-list dt { font-weight: 700; color: var(--muted); font-size: 11px; text-transform: uppercase; padding-top: 2px; }
.detail-list dd { color: var(--text); }
.detail-list code { background: #eaf0fb; padding: 2px 8px; border-radius: 4px; font-size: 12px; color: var(--navy); font-weight: 700; }

/* ── Login ── */
.login-page { background: linear-gradient(135deg, #020c1f, #041a3d, #062554); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { background: #fff; border-radius: 12px; padding: 36px 40px; width: 100%; max-width: 400px; box-shadow: 0 8px 40px rgba(0,0,0,0.3); }
.login-logo { text-align: center; margin-bottom: 24px; }
.login-logo img { height: 80px; margin-bottom: 10px; }
.login-logo h2 { font-size: 18px; color: var(--navy); font-weight: 700; }
.login-logo p { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── Sub ID lookup box ── */
.sub-lookup { background: #eaf0fb; border: 1.5px solid var(--navy); border-radius: 8px; padding: 14px 16px; margin-bottom: 20px; }
.sub-lookup label { font-weight: 700; color: var(--navy); font-size: 13px; }
.sub-lookup .lookup-row { display: flex; gap: 10px; margin-top: 8px; }
.sub-lookup input { flex: 1; }
#sub-status { margin-top: 6px; font-size: 12px; }

/* ── Comment ── */
.comment-item { border-bottom: 1px solid var(--border); padding: 10px 0; }
.comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12px; color: var(--muted); }
.comment-body { font-size: 13px; }

/* ── Empty state ── */
.empty { color: var(--muted); font-size: 13px; padding: 20px 0; text-align: center; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .form-row, .detail-grid, .stats-grid { grid-template-columns: 1fr; }
  .navbar { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 10px; }
}

/* ═══════════════════════════════════════
   MOBILE RESPONSIVE STYLES
   ═══════════════════════════════════════ */

/* ── Hamburger menu ── */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; transition: all .3s; }

@media (max-width: 768px) {
  /* Navbar */
  .navbar { padding: 0 16px; height: auto; min-height: 52px; flex-wrap: wrap; gap: 0; position: relative; }
  .nav-brand { padding: 10px 0; flex: 1; }
  .nav-brand img { height: 28px; }
  .nav-brand span { font-size: 14px; }
  .nav-toggle { display: block; }
  .nav-links {
    display: none; flex-direction: column; width: 100%;
    background: #002a6b; padding: 8px 0; gap: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 16px; font-size: 14px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .nav-user { width: 100%; padding: 8px 16px 12px; display: flex; align-items: center; gap: 8px; border-top: 1px solid rgba(255,255,255,0.1); }

  /* Main content */
  .main-content { padding: 14px; }

  /* Cards */
  .card { padding: 14px 16px; }

  /* Page header */
  .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .header-actions { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
  .header-actions .btn { flex: 1; min-width: 120px; justify-content: center; font-size: 12px; padding: 7px 10px; }

  /* Forms */
  .form-row { grid-template-columns: 1fr; gap: 10px; }
  .form-group input, .form-group select, .form-group textarea { font-size: 16px; } /* prevent zoom on iOS */
  .form-actions { flex-wrap: wrap; }
  .form-actions .btn { flex: 1; justify-content: center; }

  /* Tables — make scrollable */
  .data-table { font-size: 12px; }
  .data-table th, .data-table td { padding: 8px 8px; }
  .card > .data-table { overflow-x: auto; display: block; }
  .actions { flex-wrap: wrap; gap: 4px; }
  .actions .btn { font-size: 11px; padding: 4px 8px; }

  /* Stats grid */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card .num { font-size: 24px; }

  /* Detail grid */
  .detail-grid { grid-template-columns: 1fr; }
  .detail-list { grid-template-columns: 120px 1fr; font-size: 12px; }

  /* Sub lookup */
  .sub-lookup .lookup-row { flex-direction: column; }
  .sub-lookup .lookup-row .btn { width: 100%; justify-content: center; }

  /* Buttons */
  .btn { font-size: 13px; }
  .btn-full { width: 100%; }

  /* Login */
  .login-card { padding: 24px 20px; margin: 16px; }

  /* iframe in detail */
  iframe { height: 400px !important; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { padding: 12px 14px; }
  .stat-card .num { font-size: 20px; }
  .page-header h2 { font-size: 16px; }
  .card h3 { font-size: 14px; }
  .detail-list { grid-template-columns: 100px 1fr; font-size: 11px; }
  .badge { font-size: 10px; padding: 2px 7px; }
}

/* ══════════════════════════════════════
   SLOT BOOKING & SHIFT ALLOCATION STYLES
   ══════════════════════════════════════ */

/* FullCalendar container */
.fc { font-family: 'Segoe UI', Arial, sans-serif; font-size: 13px; }
.fc .fc-toolbar-title { font-size: 16px; font-weight: 700; color: var(--navy); }
.fc .fc-button-primary { background: var(--navy); border-color: var(--navy); }
.fc .fc-button-primary:hover { background: var(--blue); border-color: var(--blue); }
.fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--blue); border-color: var(--blue); }
.fc .fc-daygrid-event { border-radius: 4px; font-size: 11px; padding: 1px 4px; }
.fc .fc-timegrid-event { border-radius: 4px; font-size: 11px; }
.fc .fc-col-header-cell { background: #f0f4fb; }
.fc .fc-today-button { background: var(--gold); border-color: var(--gold); color: #000; }
.fc .fc-today-button:hover { background: #d4920a; border-color: #d4920a; }
.fc .fc-daygrid-day.fc-day-today { background: #fff8e1; }

/* Shift type badges in list */
.shift-badge-1 { background: #003580; color: #fff; }
.shift-badge-2 { background: #1a5fa8; color: #fff; }
.shift-badge-3 { background: #6f42c1; color: #fff; }
.shift-badge-g { background: #28a745; color: #fff; }
.shift-badge-c { background: #f0a500; color: #000; }

/* Engineer dashboard shift card */
.shift-card-today {
  background: linear-gradient(135deg, #003580, #1a5fa8);
  color: #fff; border-radius: 10px; padding: 20px 24px;
  margin-bottom: 20px;
}
.shift-card-today .shift-type { font-size: 22px; font-weight: 800; }
.shift-card-today .shift-time { font-size: 15px; opacity: 0.85; margin-top: 4px; }

/* ══════════════════════════════════════
   MOBILE FIXES FOR NEW MODULES
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  /* Lab card layout */
  .card[style*="border-left:4px"] { padding: 12px 14px !important; }

  /* Slot/Shift grid — ensure horizontal scroll works */
  .card[style*="overflow-x:auto"] { padding: 4px !important; }
  .card[style*="overflow-x:auto"] table { font-size: 10px !important; }

  /* FullCalendar mobile */
  .fc .fc-toolbar { flex-wrap: wrap; gap: 8px; }
  .fc .fc-toolbar-title { font-size: 14px !important; }
  .fc .fc-button { padding: 4px 8px !important; font-size: 11px !important; }

  /* Test checkboxes in lab form — wrap properly */
  #test-checkboxes { max-height: 300px; overflow-y: auto; }
  #test-checkboxes label { font-size: 11px !important; padding: 3px 6px !important; }

  /* Shift grid sticky column */
  table td[style*="position:sticky"], table th[style*="position:sticky"] {
    min-width: 80px !important;
    font-size: 10px !important;
  }

  /* Contact suggestions dropdown */
  #contact-suggestions { max-height: 150px; }
  #contact-suggestions div { padding: 10px 12px !important; font-size: 13px !important; }

  /* Page header on new pages */
  .page-header h2 { font-size: 16px; }
}

@media (max-width: 480px) {
  /* Even smaller screens */
  .fc .fc-toolbar-chunk:last-child { display: none; }  /* Hide view switcher on tiny screens */
  #test-checkboxes label { flex: 1 1 100%; }
}