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

/* FBM Reception Portal */
:root {
  --bg: #f5f6f8;
  --sidebar-bg: #1a2332;
  --sidebar-text: #8fa3b8;
  --sidebar-active: #ffffff;
  --sidebar-accent: #7ecfe0;
  --card-bg: #ffffff;
  --text: #1a2332;
  --text-muted: #5a6a7a;
  --border: #dde3ea;
  --primary: #2176ae;
  --primary-dark: #1a5f8f;
  --primary-light: #e3f0fa;
  --success: #3d9e3d;
  --warning: #e8720c;
  --danger: #c0392b;
  --info: #2176ae;
  /* FBM fruit bowl palette */
  --fbm-blue: #2176ae;
  --fbm-orange: #e8720c;
  --fbm-green: #3d9e3d;
  --fbm-yellow: #f0b429;
  --fbm-red: #d63031;
  --fbm-purple: #6c3483;
  --fbm-teal: #00838f;
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ── */
#sidebar {
  width: 230px;
  min-width: 230px;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
}

/* Fixed height (rather than letting padding + the logo's natural size
   decide it) so this lines up exactly with #topbar's height below --
   they're deliberately set to the same value. */
#sidebar .brand {
  height: 64px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  background: #ffffff;
}

#sidebar .brand img {
  max-width: 150px;
  height: auto;
}

#sidebar nav {
  flex: 1;
  padding: 10px 0;
}

#sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 14px;
  border-left: 3px solid transparent;
  transition: all 0.15s;
  cursor: pointer;
}

#sidebar nav a:hover {
  color: var(--sidebar-active);
  background: rgba(255,255,255,0.05);
}

#sidebar nav a.active {
  color: var(--sidebar-active);
  border-left-color: var(--sidebar-accent);
  background: rgba(126,207,224,0.12);
}

#sidebar nav .section-label {
  padding: 14px 18px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(143,163,184,0.6);
}

/* Signed-in user identity + Settings + Sign Out -- lives in the topbar's
   top-right corner now (moved out of the sidebar, per user request, since
   that's the more conventional location for account/settings controls). */
#topbar-user {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid var(--border);
}

/* Sized (and object-fit: cover) so it stays a clean circle like Google's
   own account icon regardless of the source photo's aspect ratio, and
   small enough that it never grows the topbar taller than the sidebar's
   own header row. Name text is hidden -- see .user-name below -- so this
   icon is the only visible identity indicator, matching the request to
   keep the topbar compact. */
#topbar-user img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Kept in the DOM (app.js reads its textContent for the portal-home
   greeting and sets it as the #user-photo tooltip target) but not shown --
   the photo alone represents the signed-in user in the topbar now. */
#topbar-user .user-name {
  display: none;
}

#topbar-user button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 15px;
  padding: 4px;
  border-radius: 4px;
}

#topbar-user button:hover { color: var(--text); background: var(--bg); }

/* Gear icon (#settings-btn) toggled visible only for admins/editors in
   app.js; gets a highlight while the Settings page is open, matching how
   regular sidebar nav links show .active. */
#settings-btn.active { color: var(--primary); background: var(--primary-light); }

/* ── Main ── */
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Matches #sidebar .brand's height exactly (64px) so the topbar lines up
   visually with the sidebar's logo row across the whole app. */
#topbar {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
}

#topbar h2 {
  font-size: 17px;
  font-weight: 600;
  flex: 1;
}

#search-box {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  width: 240px;
  outline: none;
  background: var(--bg);
}

#search-box:focus { border-color: var(--primary); }

#content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* ── Login ── */
#login-screen {
  position: fixed;
  inset: 0;
  background: #1a2332;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.login-card {
  background: #fff;
  border-radius: 14px;
  padding: 40px;
  width: 380px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}

.login-card .login-logo {
  width: 200px;
  margin: 0 auto 20px;
  display: block;
}

.login-card h2 { font-size: 18px; font-weight: 700; margin-bottom: 4px; color: var(--text); }
.login-card p { color: var(--text-muted); font-size: 13px; margin-bottom: 28px; }

#login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
  transition: box-shadow 0.15s;
}

#login-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

/* ── Portal Landing ── */
.portal-hero {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}

.portal-hero-color-bar {
  height: 6px;
  background: linear-gradient(to right,
    var(--fbm-blue) 0%, var(--fbm-blue) 16.6%,
    var(--fbm-orange) 16.6%, var(--fbm-orange) 33.2%,
    var(--fbm-green) 33.2%, var(--fbm-green) 49.8%,
    var(--fbm-yellow) 49.8%, var(--fbm-yellow) 66.4%,
    var(--fbm-red) 66.4%, var(--fbm-red) 83%,
    var(--fbm-purple) 83%, var(--fbm-purple) 100%
  );
}

.portal-hero-banner {
  padding: 28px 48px 26px;
}

.portal-hero h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
  letter-spacing: -0.3px;
}

.portal-hero p {
  font-size: 13px;
  color: var(--text-muted);
}

.portal-body {
  padding: 32px 48px 48px;
  background: var(--bg);
  min-height: calc(100vh - 220px);
}

.portal-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 14px;
  margin-top: 28px;
}

.portal-section-label:first-child { margin-top: 0; }

.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.portal-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.portal-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-accent, var(--primary));
}

.portal-card:hover:not(.portal-card-blank) {
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  transform: translateY(-3px);
  border-color: var(--card-accent, var(--primary));
  cursor: pointer;
}

.portal-card-blank {
  opacity: 0.4;
  background: #f8fafc;
}

.portal-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.portal-card-body { flex: 1; min-width: 0; }
.portal-card-body h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.portal-card-body p { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.portal-card-count { margin-top: 10px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.portal-card-count span { font-size: 18px; font-weight: 700; color: var(--text); margin-right: 4px; }
.portal-card-arrow { font-size: 18px; color: var(--text-muted); align-self: center; flex-shrink: 0; }

/* ── Dashboard cards ── */
.dash-content { padding: 20px 24px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: box-shadow 0.15s;
  border-top: 3px solid var(--primary);
  border-radius: 8px;
}

.stat-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.stat-card .label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.stat-card .count { font-size: 28px; font-weight: 700; color: var(--primary); }
.stat-card .sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ── Tables ── */
.table-content { padding: 20px 24px; }

.table-wrap {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-toolbar {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.table-toolbar h3 { flex: 1; font-size: 14px; font-weight: 600; }

table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 14px; }

thead th:hover { background: #e8edf2; }

thead th {
  background: var(--bg);
  padding: 9px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody tr { border-bottom: 1px solid var(--border); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #f5fafe; }

tbody td {
  padding: 10px 12px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Badges ── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.badge-green { background: #dcfce7; color: #166534; }
.badge-yellow { background: #fef9c3; color: #854d0e; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-blue { background: var(--primary-light); color: var(--primary-dark); }
.badge-gray { background: #f1f5f9; color: #475569; }

/* ── Buttons ── */
.btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  font-weight: 500;
  transition: opacity 0.15s;
}

.btn:hover { opacity: 0.85; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.modal {
  background: #fff;
  border-radius: 10px;
  width: 580px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  border-top: 4px solid var(--primary);
  border-radius: 10px 10px 0 0;
}

.modal-header h3 { flex: 1; font-size: 15px; }
.modal-body { padding: 20px; }
.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }

.form-group input,
.form-group select,
.form-group textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--primary); }
.form-group textarea { resize: vertical; min-height: 70px; }

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

.pagination button {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
}

.pagination button:disabled { opacity: 0.4; cursor: default; }
.pagination .page-info { flex: 1; text-align: center; }

/* ── Toast ── */
#toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--primary-dark);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 999;
  pointer-events: none;
}

#toast.show { opacity: 1; }

/* ── Content cards (Procedures / FAQs / Emergency) ── */
.content-wrap { padding: 20px 24px; }
.content-intro {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.content-card-list { display: flex; flex-direction: column; gap: 12px; }
.content-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  padding: 16px 20px;
}
.content-card.emergency { border-left-color: var(--danger); }
.content-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.content-card .content-card-body { font-size: 13px; color: var(--text); line-height: 1.6; white-space: pre-wrap; }
.content-card .content-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.content-empty { color: var(--text-muted); font-size: 13px; padding: 24px; text-align: center; }

/* ── Mobile responsive ── */
#hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 20px;
  color: var(--text);
  line-height: 1;
}

#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99;
}

@media (max-width: 768px) {
  #hamburger { display: block; }

  #sidebar {
    position: fixed;
    left: -230px;
    top: 0;
    bottom: 0;
    z-index: 100;
    transition: left 0.25s ease;
    width: 230px;
  }

  #sidebar.open {
    left: 0;
  }

  #sidebar-overlay.open {
    display: block;
  }

  #main {
    width: 100%;
  }

  #topbar {
    padding: 0 12px;
    gap: 8px;
  }

  #search-box {
    width: 120px;
    min-width: 0;
  }

  /* Save horizontal space on small screens -- keep the Settings/Sign Out
     buttons reachable but drop the photo and name text. */
  #topbar-user img, #topbar-user .user-name {
    display: none;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portal-hero-banner {
    padding: 16px 20px;
  }

  .portal-cards {
    grid-template-columns: 1fr;
  }

  .table-content {
    padding: 12px;
  }
}

/* ── Print ── */
/* Triggered by the "Print" button on every table/card view (printSection()
   in app.js just calls window.print()). Hides everything except the current
   content area so reception can print a clean copy of, e.g. Staff Contacts
   or Front-Desk Procedures for a physical binder, without the sidebar,
   search box, or Add/Edit/Delete buttons showing up in the printout. */
@media print {
  #sidebar, #topbar, #hamburger, #sidebar-overlay, #toast, .modal-overlay { display: none !important; }
  body { height: auto; overflow: visible; display: block; }
  #main { display: block; overflow: visible; }
  #content { overflow: visible; padding: 0; }
  .table-toolbar button, .content-card-actions { display: none !important; }
  .table-wrap, .content-wrap { border: none; box-shadow: none; }
  table, .content-card-body { white-space: normal; }
  tbody td { white-space: normal; max-width: none; }
  .content-card, tr { break-inside: avoid; }
}

/* ============================================================
   Unified portal additions -- sidebar department grouping and
   Support Desk ticket styling. Everything above this point is
   carried over unchanged from reception-portal's style.css.
   ============================================================ */

/* Business Services renders as a group header with nested sub-items
   (Reception / Warehouse / IT) instead of a single flat link, per the
   confirmed sidebar structure (roadmap A6). */
.sidebar-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  color: inherit;
}
.sidebar-group-header .caret {
  margin-left: auto;
  font-size: 10px;
  transition: transform 0.15s ease;
}
.sidebar-group.open .sidebar-group-header .caret {
  transform: rotate(90deg);
}
.sidebar-group .sidebar-subnav {
  display: none;
  flex-direction: column;
}
.sidebar-group.open .sidebar-subnav {
  display: flex;
}
.sidebar-subnav a {
  padding-left: 40px !important;
  font-size: 13px;
}

/* Ticket priority/status badges, same visual language as statusBadge() */
.badge-ticket-open      { background: #fef3c7; color: #92400e; }
.badge-ticket-progress  { background: #dbeafe; color: #1e40af; }
.badge-ticket-resolved  { background: #dcfce7; color: #166534; }
.badge-ticket-closed    { background: #e5e7eb; color: #374151; }
.badge-ticket-waiting-requester { background: #fee2e2; color: #991b1b; }
.badge-ticket-waiting-vendor    { background: #ede9fe; color: #5b21b6; }
.ticket-waiting-flag { font-size: 11px; color: #991b1b; font-weight: 600; margin-left: 6px; white-space: nowrap; }
.ticket-comment { border-left: 3px solid #e2e8f0; padding: 8px 12px; margin-bottom: 10px; background: #f8fafc; border-radius: 0 6px 6px 0; }
.ticket-comment-meta { font-size: 11px; color: #94a3b8; margin-bottom: 4px; }
.ticket-external-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; margin-top: 6px; }

/* Origin-department tag shown on Knowledge Base cards that were absorbed
   from Reception's old Front Desk section (roadmap A1) */
.origin-tag {
  display: inline-block;
  font-size: 11px;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 4px;
  padding: 2px 8px;
  margin-left: 8px;
}