/* =========================================================
   MyDeoDap — Bootstrap × design override layer
   Loaded AFTER bootstrap.min.css and AFTER app.css.
   Goal: make Bootstrap inputs/forms/dropdowns/tables/modals
   inherit the design's brand colors and radii.
   ========================================================= */

/* Bootstrap CSS variables → brand palette */
:root {
  --bs-primary: var(--brand);
  --bs-primary-rgb: 27, 78, 216;
  --bs-success: var(--ok);
  --bs-warning: var(--warn);
  --bs-danger: var(--danger);
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink-900);
  --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --bs-border-color: var(--line);
  --bs-border-radius: 12px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 16px;
}

/* Buttons — keep design .btn primary while letting Bootstrap modal/dropdown use it too */
.btn-primary,
.btn-primary:focus {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.btn-success { background: var(--ok); border-color: var(--ok); }
.btn-success:hover { background: #0a6b4a; border-color: #0a6b4a; }
.btn-danger  { background: var(--danger); border-color: var(--danger); }
.btn-warning { background: var(--warn); border-color: var(--warn); color: #fff; }

/* Forms */
.form-control, .form-select {
  border-color: var(--line);
  background-color: #fff;
  color: var(--ink-900);
  padding: 10px 14px;
  border-radius: 10px;
}
/* .form-select needs its chevron + room for it explicitly. The earlier
   `background: #fff` shorthand wiped Bootstrap's built-in arrow; restate
   it inline so the dropdown always shows a chevron and the selected
   text never collides with it. Also normalise the height to match the
   sibling .form-control on the same row. */
.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235c6b85' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px;
  line-height: 1.4;
}
/* Disabled selects (e.g. HOD-locked role / dept) shouldn't show the
   interactive chevron — they're read-only displays, not controls. */
.form-select:disabled,
.form-control:disabled {
  background-color: #f8fafc;
  color: #475569;
  cursor: not-allowed;
}
.form-select:disabled { background-image: none; padding-right: 14px; }
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(27,78,216,.12);
}
.form-label { font-weight: 600; font-size: 12.5px; color: var(--ink-500); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px; }

/* Tables (DataTables) */
table.dataTable thead th { background: #f7f9fc; color: var(--ink-500); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; border-bottom: 1px solid var(--line); padding: 14px 22px; font-weight: 700; }
table.dataTable tbody td { border-bottom: 1px solid var(--line); padding: 14px 22px; vertical-align: middle; }
table.dataTable tbody tr:last-child td { border-bottom: 0; }
table.dataTable tbody tr:hover { background: #fafbfd; }
/* Inputs inside DataTables UI */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
/* Pad the wrapper's top (search/length) and bottom (info/pagination) rows
   so they don't touch the card edge — the table itself stays edge-to-edge. */
.dataTables_wrapper > .row:first-child { padding: 16px 22px 8px; }
.dataTables_wrapper > .row:last-child  { padding: 12px 22px 16px; border-top: 1px solid var(--line); background: #fafbfd; margin: 0; }
.dataTables_wrapper > .row > .col-md-6,
.dataTables_wrapper > .row > div { padding: 0; }
.dataTables_wrapper .dataTables_info { color: var(--ink-500); font-size: 12.5px; }
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label { color: var(--ink-500); font-size: 12.5px; margin: 0; display: flex; align-items: center; gap: 8px; }

/* Modals — Bootstrap modal but with design rounded corners + shadow */
.modal-content { border: none; border-radius: 18px; box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--line); padding: 18px 22px; }
.modal-body { padding: 22px; }
.modal-footer { border-top: 1px solid var(--line); padding: 14px 22px; }
.modal-title { font-weight: 800; font-size: 17px; }

/* Dropdown */
.dropdown-menu { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); padding: 6px; }
.dropdown-item { border-radius: 8px; padding: 8px 12px; font-size: 13.5px; }
.dropdown-item:active { background: var(--brand); color: #fff; }

/* Select2 — make it visually match Bootstrap inputs */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  min-height: 40px;
  padding: 4px 6px;
}
.select2-container--open .select2-dropdown { border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-md); overflow: hidden; }
.select2-results__option--highlighted { background: var(--brand-50) !important; color: var(--brand) !important; }

/* Flatpickr inputs blend with bootstrap */
.flatpickr-input.form-control { background: #fff; }

/* Toastr — sit above modal backdrop */
#toast-container > div { box-shadow: var(--shadow-md); border-radius: 12px; }

/* SweetAlert title sizing */
.swal2-popup { border-radius: 18px; }
.swal2-title { font-family: 'Plus Jakarta Sans', sans-serif; }

/* Pagination (DataTables uses Bootstrap pagination) */
.pagination .page-link { color: var(--ink-700); border-color: var(--line); }
.pagination .page-item.active .page-link { background: var(--brand); border-color: var(--brand); }

/* Sidebar collapse — flip the chevron and keep the toggle clickable when collapsed */
.sidebar-toggle .bi { transition: transform .15s ease; }
body.is-sidebar-collapsed .sidebar-toggle .bi { transform: rotate(180deg); }

/* Collapsed sidebar — show only icons, hide brand mark + section labels, and stop
   text content from forcing the nav-link wider than the rail. */
body.is-sidebar-collapsed .sidebar { overflow-x: hidden; }
body.is-sidebar-collapsed .brand-mark { display: none; }
body.is-sidebar-collapsed .brand { border-bottom: none; padding: 4px 0 14px; }
body.is-sidebar-collapsed .nav-link { gap: 0; }
body.is-sidebar-collapsed .nav-link > span { display: none !important; }
body.is-sidebar-collapsed .nav-link .bi { font-size: 18px; }
body.is-sidebar-collapsed .nav-section { display: none; }
body.is-sidebar-collapsed .me-card .avatar { margin: 0 auto; }
body.is-sidebar-collapsed .nav-badge { display: none; }
body.is-sidebar-collapsed .nav-link { position: relative; }

/* When collapsed the sidebar is only ~74px wide. Stack the DD logo above the
   collapse-toggle chevron so the logo stays fully visible, and rotate the
   chevron 180° so it points to the right (= "expand") instead of left. */
body.is-sidebar-collapsed .brand {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0 14px;
}
body.is-sidebar-collapsed .brand .brand-mark { margin: 0; }
body.is-sidebar-collapsed .sidebar-toggle {
  position: static !important;
  margin: 0 !important;
  transform: rotate(180deg);
}

/* Login is centered guest layout — hide topbar/sidebar */
body.is-login .sidebar,
body.is-login .topbar,
body.is-login .mobile-nav { display: none !important; }
body.is-login .app { grid-template-columns: 1fr; }
body.is-login main { padding: 0 !important; }

/* Page padding helper for authenticated pages */
main .scene.page { padding: var(--page-pad); }
@media (max-width: 768px) { main .scene.page { padding: 16px; } }

/* =========================================================
   CARD LAYOUT INSIDE grid-12
   Stacks cards inside each grid column vertically with 24px gaps
   and stretches the last card so adjacent columns visually match heights.
   ========================================================= */
.grid-12 > .col-4,
.grid-12 > .col-5,
.grid-12 > .col-7,
.grid-12 > .col-8,
.grid-12 > .col-12 {
  display: flex;
  flex-direction: column;
  min-width: 0; /* allow children to shrink within column */
}
.grid-12 > [class*="col-"] > .card { flex: 0 0 auto; }
/* The card.mt-3 has 24px top margin from design CSS — that's the inter-card gap. */
.grid-12 > [class*="col-"] > .card.mt-3 { margin-top: 24px; }
/* When a column has multiple cards, let the last one fill remaining height. */
.grid-12 > [class*="col-"] > .card:last-child:not(:only-child) { flex: 1 1 auto; }

/* =========================================================
   LIST-ROW OVERFLOW SAFETY
   The design's `.list-row { grid-template-columns: auto minmax(0,1fr) auto }`
   can overflow in narrow cards. Allow all 3 grid items to shrink and
   keep their content from breaking the row width.
   ========================================================= */
.card .list-row > * { min-width: 0; }
.card .list-row .title,
.card .list-row .meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
/* Trailing column with multiple pills/buttons keeps them on one line. */
.card .list-row > .row-flex { flex-wrap: nowrap; flex-shrink: 0; }

/* List rows have a comfortable minimum height so 1-line and 2-line rows
   in the same card visually align. */
.card .list-row { min-height: 62px; }
.card-body.tight .list-row:first-child { border-top: 0; }

/* Avatar tiles + emoji boxes used as leading elements stay compact. */
.card .list-row .avatar.sm { flex-shrink: 0; }

/* When the trailing column has its own internal vertical stack (e.g. attendance
   double-pills), keep the stack tight and right-aligned. */
.card .list-row > [style*="flex-direction:column"] { flex-shrink: 0; }

/* The right-rail Reports table — plain HTML (no DataTables). Hover rows for clarity. */
.report-table tbody tr:hover { background: #fafbfd; }

/* Coming-soon stub centering */
.coming-soon { display: grid; place-items: center; min-height: 60vh; text-align: center; padding: 40px; }
.coming-soon .icon { width: 88px; height: 88px; border-radius: 24px; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; font-size: 38px; margin: 0 auto 18px; }

/* Alerts → use design pill tone */
.alert { border-radius: 12px; border: 1px solid var(--line); padding: 12px 16px; font-size: 13.5px; }
.alert-success { background: var(--ok-50); border-color: #b6e5cf; color: #0a6b4a; }
.alert-danger  { background: var(--danger-50); border-color: #f3b8c2; color: #9e2236; }
.alert-warning { background: var(--warn-50); border-color: #ffe49a; color: #7a5400; }

/* =========================================================
   SHARED DESIGN UTILITIES — used across all role screens
   ========================================================= */

/* Page header — replaces the inline flex pattern littered across views. */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-head > div:first-child { min-width: 0; }
.page-head .h1 { margin: 4px 0 6px; }
.page-head .sub { margin: 0; }
@media (max-width: 768px) {
  .page-head .row-flex { width: 100%; }
}

/* Flush card body — used for tables / list-rows / DataTables to remove the
   default padding so rows sit edge-to-edge. */
.card-body.flush { padding: 0; }
.card-body.flush > table { width: 100%; margin: 0; }

/* Scrollable list inside a card — caps lists like dashboard's "all departments"
   so 12 rows don't push the card to 800px height. */
.list-scroll { max-height: 360px; overflow-y: auto; }
.list-scroll::-webkit-scrollbar { width: 8px; }
.list-scroll::-webkit-scrollbar-thumb { background: #cfd6e4; border-radius: 4px; }
.list-scroll::-webkit-scrollbar-track { background: transparent; }

/* Stat-tile grid — a responsive tile grid used for dashboard summaries,
   reach metrics, dept counts, agency cards. Auto-fills, never stretches odd. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-min, 240px), 1fr));
  gap: 14px;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.tile.hover { transition: all .12s ease; }
.tile.hover:hover { border-color: #b8c6e0; box-shadow: var(--shadow-sm); }
a.tile { text-decoration: none; color: inherit; }

/* Empty-state inside a card */
.empty-state {
  padding: 28px 18px;
  text-align: center;
  color: var(--ink-500);
}
.empty-state .bi { font-size: 28px; opacity: .5; display: block; margin-bottom: 8px; }

/* Inline icon-meta — used in card-body for "Joined · Status · Department" rows */
.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  font-size: 13.5px;
}
.meta-row .meta { display: flex; align-items: center; gap: 6px; }

/* =========================================================
   MOBILE FIXES
   - Mobile bottom nav: stabilise against iOS URL-bar resize +
     Android scroll wobble by promoting it to its own GPU layer.
   - Notification panel: on phones we detach it from the bell-wrap
     and pin it under the topbar so it has full width and never
     gets clipped by sibling flex items or topbar overflow.
   ========================================================= */
@media (max-width: 768px) {
  /* Lock both shell bars to the viewport. The `transform: translateZ(0)`
     trick previously sat on .mobile-nav to dampen iOS scroll wobble, but
     on several iOS Safari versions a transformed element with
     position:fixed gets dragged back into the document flow — which is
     exactly the bug screenshotted here. We drop the transform entirely
     and re-assert `position: fixed` with !important so no later rule can
     knock either bar loose. */
  .mobile-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto;
    z-index: 1040;
  }
  .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030;
  }

  /* Notification dropdown — pin under topbar, full width on phones.
     Switching to position:fixed removes any ancestor-clipping risk
     (e.g. topbar overflow) and gives the panel breathing room. */
  .notif-panel {
    position: fixed !important;
    top: calc(var(--topbar-h, 64px) + 6px) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - var(--topbar-h, 64px) - 90px) !important;
    overflow-y: auto;
    z-index: 1050 !important;
    border-radius: 14px;
  }
  .notif-panel .list { max-height: calc(100vh - var(--topbar-h, 64px) - 170px); }

  /* Make sure page content doesn't disappear behind the bottom nav.
     Design CSS already adds 100px bottom padding to .page on mobile;
     this catches non-.page wrappers (auth screens, share/print views). */
  body:not(.is-login) main { padding-bottom: 88px; }
}

/* ===== Print stylesheet =====
   Used by the Reports module — hides chrome and stretches the main pane. */
@media print {
  .sidebar,
  .topbar,
  .mobile-nav,
  .sidebar-backdrop,
  .toast-wrap,
  .no-print { display: none !important; }
  .app { grid-template-columns: 1fr !important; }
  main { padding: 0 !important; }
  body, .scene.page { background: #fff !important; }
  .card { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; }
  .kpi { break-inside: avoid; }
  a { text-decoration: none !important; color: inherit !important; }
}

/* =========================================================
   Presence pill (Online / Away / In meeting / Offline)
   Lives here so the styles are guaranteed to load on every
   page — the component's own @push('page-css') can miss the
   head's @stack depending on when it first renders.
   ========================================================= */
.presence-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1;border:1px solid transparent;white-space:nowrap;vertical-align:middle}
.presence-pill.sm{height:22px;padding:0 9px;font-size:11px}
.presence-pill.lg{height:28px;padding:0 12px;font-size:12.5px}
.presence-pill .dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;box-shadow:0 0 0 2px #fff}
.presence-pill.dot-only{padding:0;background:transparent;border:none}
.presence-pill.dot-only .dot{width:10px;height:10px}

.presence-pill.tone-online   {background:#dcfce7;color:#15803d;border-color:#bbf7d0}
.presence-pill.tone-online   .dot{background:#10b981;animation:presence-pulse 1.8s ease-in-out infinite}
.presence-pill.tone-away     {background:#fef3c7;color:#92400e;border-color:#fde68a}
.presence-pill.tone-away     .dot{background:#f59e0b}
.presence-pill.tone-meeting  {background:#ede9fe;color:#5b21b6;border-color:#ddd6fe}
.presence-pill.tone-meeting  .dot{background:#7c3aed;animation:presence-pulse 1.8s ease-in-out infinite}
.presence-pill.tone-offline  {background:#f1f5f9;color:#64748b;border-color:#e2e8f0}
.presence-pill.tone-offline  .dot{background:#94a3b8}

@keyframes presence-pulse {
    0%,100% { box-shadow: 0 0 0 2px #fff, 0 0 0 0 rgba(16,185,129,.4); }
    50%     { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(16,185,129,0);   }
}

/* =========================================================
   COMPACT MODE — applied to admin work pages so a row of data
   lands above the fold. Each page opts in via a wrapper class
   (existing ones — .emp-directory, .emp-show, .agency-show,
   .agency-users, .agency-member-form, .perm-page, .wr-board —
   plus the marker class .compact-page added to bare pages).

   Dashboards (.dash-grid) and the task forms intentionally have
   their own spacing and are NOT included here.
   ========================================================= */
.emp-directory .page-head,
.emp-show .page-head,
.agency-show .page-head,
.agency-users .page-head,
.agency-member-form .page-head,
.perm-page .page-head,
.wr-board .page-head,
.compact-page .page-head {
    margin-bottom: 8px;
    align-items: flex-start;
}
.emp-directory .page-head .h1,
.emp-show .page-head .h1,
.agency-show .page-head .h1,
.agency-users .page-head .h1,
.agency-member-form .page-head .h1,
.perm-page .page-head .h1,
.wr-board .page-head .h1,
.compact-page .page-head .h1 {
    font-size: 22px;
    line-height: 1.2;
    margin: 0;
}
.emp-directory .page-head .eyebrow,
.emp-show .page-head .eyebrow,
.agency-show .page-head .eyebrow,
.agency-users .page-head .eyebrow,
.agency-member-form .page-head .eyebrow,
.perm-page .page-head .eyebrow,
.wr-board .page-head .eyebrow,
.compact-page .page-head .eyebrow {
    font-size: 10px;
    letter-spacing: .08em;
    margin-bottom: 1px;
}
.emp-directory .page-head .sub,
.emp-show .page-head .sub,
.agency-show .page-head .sub,
.agency-users .page-head .sub,
.agency-member-form .page-head .sub,
.perm-page .page-head .sub,
.wr-board .page-head .sub,
.compact-page .page-head .sub {
    font-size: 11.5px;
    margin-top: 2px;
    line-height: 1.4;
}

/* KPI tiles — pages with a stats row at the top */
.emp-directory .kpi,
.emp-show .kpi,
.agency-show .kpi,
.agency-users .kpi,
.perm-page .kpi,
.wr-board .kpi,
.compact-page .kpi {
    padding: 8px 12px;
}
.emp-directory .kpi .lbl,
.emp-show .kpi .lbl,
.agency-show .kpi .lbl,
.agency-users .kpi .lbl,
.perm-page .kpi .lbl,
.wr-board .kpi .lbl,
.compact-page .kpi .lbl {
    font-size: 10px;
    letter-spacing: .06em;
}
.emp-directory .kpi .val,
.emp-show .kpi .val,
.agency-show .kpi .val,
.agency-users .kpi .val,
.perm-page .kpi .val,
.wr-board .kpi .val,
.compact-page .kpi .val {
    font-size: 19px;
    line-height: 1.1;
    margin-top: 2px;
}
.emp-directory .kpi .delta,
.emp-show .kpi .delta,
.agency-show .kpi .delta,
.agency-users .kpi .delta,
.perm-page .kpi .delta,
.wr-board .kpi .delta,
.compact-page .kpi .delta {
    font-size: 10px;
    margin-top: 1px;
}
.emp-directory .grid-4,
.emp-show .grid-4,
.agency-show .grid-4,
.agency-users .grid-4,
.perm-page .grid-4,
.wr-board .grid-4,
.compact-page .grid-4 {
    gap: 8px;
    margin-bottom: 8px;
}

/* Cards — shared card chrome (NOT the dept-section cards which already
   ship their own compact rules). Targets only the generic .card. */
.emp-directory > .card,
.emp-show > .card,
.agency-show .card,
.agency-users .card,
.agency-member-form .card,
.perm-page .card,
.wr-board .card,
.compact-page .card {
    margin-bottom: 8px;
}
.emp-show .card .card-head,
.agency-show .card .card-head,
.agency-users .card .card-head,
.agency-member-form .card .card-head,
.perm-page .card .card-head,
.wr-board .card .card-head,
.compact-page .card .card-head {
    padding: 10px 14px;
}
.emp-show .card .card-head .h2,
.agency-show .card .card-head .h2,
.agency-users .card .card-head .h2,
.agency-member-form .card .card-head .h2,
.perm-page .card .card-head .h2,
.wr-board .card .card-head .h2,
.compact-page .card .card-head .h2 {
    font-size: 13.5px;
    margin: 0;
}
.emp-show .card .card-body,
.agency-show .card .card-body,
.agency-users .card .card-body,
.agency-member-form .card .card-body,
.perm-page .card .card-body,
.wr-board .card .card-body,
.compact-page .card .card-body {
    padding: 12px 14px;
}
.emp-show .card .card-foot,
.agency-show .card .card-foot,
.agency-users .card .card-foot,
.agency-member-form .card .card-foot,
.perm-page .card .card-foot,
.wr-board .card .card-foot,
.compact-page .card .card-foot {
    padding: 10px 14px;
}

/* Tables inside the cards on these pages */
.emp-directory .table > :not(caption) > * > *,
.emp-show .table > :not(caption) > * > *,
.agency-show .table > :not(caption) > * > *,
.agency-users .table > :not(caption) > * > *,
.perm-page .table > :not(caption) > * > *,
.wr-board .table > :not(caption) > * > *,
.compact-page .table > :not(caption) > * > * {
    padding: 8px 12px;
    font-size: 12.5px;
}
.emp-directory .table thead th,
.emp-show .table thead th,
.agency-show .table thead th,
.agency-users .table thead th,
.perm-page .table thead th,
.wr-board .table thead th,
.compact-page .table thead th {
    font-size: 10.5px;
    padding: 8px 12px;
    letter-spacing: .08em;
}

/* Avatar / meta / pill scale-down inside tables + lists */
.emp-directory .avatar.sm,
.emp-show .avatar.sm,
.agency-show .avatar.sm,
.agency-users .avatar.sm,
.perm-page .avatar.sm,
.wr-board .avatar.sm,
.compact-page .avatar.sm {
    width: 28px;
    height: 28px;
    font-size: 10.5px;
}
.emp-directory .pill,
.emp-show .pill,
.agency-show .pill,
.agency-users .pill,
.perm-page .pill,
.wr-board .pill,
.compact-page .pill {
    font-size: 10.5px;
    padding: 1px 7px;
}

/* Form fields inside the form pages */
.agency-member-form .form-label,
.compact-page .form-label {
    font-size: 11.5px;
    margin-bottom: 4px;
}
.agency-member-form .form-control,
.agency-member-form .form-select,
.compact-page .form-control,
.compact-page .form-select {
    height: 36px;
    font-size: 13px;
}
.agency-member-form textarea.form-control,
.compact-page textarea.form-control {
    height: auto;
}

/* Permissions matrix — extra tightening for the wide matrix table.
   Inline styles on cells get overridden via !important since they're
   set directly in the .blade template. */
.perm-page .acc-section .acc-body table th,
.perm-page .acc-section .acc-body table td {
    padding: 8px 12px !important;
    font-size: 12px !important;
}
.perm-page .acc-section .acc-body table thead th {
    font-size: 10.5px !important;
}

/* =========================================================
   MOBILE FIXES — phase 2
   Page-level adjustments that aren't covered by app.css.
   ========================================================= */

/* On phones, ignore the collapsed-sidebar body class entirely — the sidebar
   is a drawer, not a rail. The desktop rules above hide labels, logo, and
   section headings to make the 74px rail readable; on a 280px drawer they
   should be visible. Some of those rules use !important, so we mirror that
   here to win the cascade. */
@media (max-width: 768px) {
  body.is-sidebar-collapsed .sidebar { overflow-x: visible; }
  body.is-sidebar-collapsed .brand-mark { display: grid; }
  body.is-sidebar-collapsed .nav-link { gap: 12px; position: static; }
  body.is-sidebar-collapsed .nav-link > span { display: inline !important; }
  body.is-sidebar-collapsed .nav-link .bi { font-size: 17px; }
  body.is-sidebar-collapsed .nav-section { display: block; }
  body.is-sidebar-collapsed .me-card .avatar { margin: 0; }
  body.is-sidebar-collapsed .nav-badge { display: inline-flex; }
  body.is-sidebar-collapsed .brand {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 22px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  body.is-sidebar-collapsed .brand .brand-mark { margin: 0; }
  body.is-sidebar-collapsed .sidebar-toggle .bi { transform: none; }
}

/* Any data table inside a card body that doesn't already have its own
   .table-responsive wrapper still scrolls horizontally on mobile instead
   of overflowing the viewport. The card retains its rounded corners. */
@media (max-width: 768px) {
  .card-body.flush { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Plain Bootstrap tables shrink readable but legible on phones. */
  .table > :not(caption) > * > * { padding: 10px 12px; }

  /* Compact-mode pages: keep typography readable on small phones. */
  .emp-show .page-head .h1,
  .agency-show .page-head .h1,
  .agency-users .page-head .h1,
  .perm-page .page-head .h1,
  .wr-board .page-head .h1,
  .compact-page .page-head .h1 { font-size: 18px; }

  /* Generic show-page page headings on phones. */
  .page-head .h1 { font-size: 19px; }

  /* DataTables search + length controls stack vertically on phones so they
     don't overlap, and the filter input goes full-width. */
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length { text-align: left; width: 100%; margin-bottom: 6px; }
  .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; }

  /* Bootstrap modal — full-width and edge-flush on phones (no extra padding
     wrapping the dialog). Bootstrap already shrinks .modal-dialog at small
     breakpoints, but we tighten body/header/footer padding to claw back
     content width on 360px screens. */
  .modal-dialog { margin: 8px; max-width: calc(100vw - 16px); }
  .modal-body   { padding: 16px; }
  .modal-header { padding: 14px 16px; }
  .modal-footer { padding: 12px 16px; }

  /* Page padding on phones — already 16px from above; this also reduces the
     bottom padding so content sits closer to the bottom-nav. */
  main .scene.page { padding: 16px 14px 100px; }
}

@media (max-width: 480px) {
  /* Very small phones: kill the 4-wide forms and 2-wide flex rows that
     don't already have a breakpoint. */
  .fld-row,
  .row-flex.cols-2 { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; }

  /* Generic .grid-3 / .grid-4 already collapse at 768px; nothing to add. */

  /* Tighter card chrome so content gets more horizontal room. */
  main .scene.page { padding: 12px 12px 96px; }
  .card-body { padding: 12px; }
  .card-head { padding: 10px 12px; }

  /* Table-row labels (work-reports already does this; do it for any table
     that opts in with .table-stacks). Hidden by default — opt-in only. */
  table.table-stacks thead { display: none; }
  table.table-stacks tbody tr {
    display: block; padding: 12px 0; border-bottom: 1px solid var(--line);
  }
  table.table-stacks tbody td {
    display: block; padding: 4px 12px; border: none;
  }
  table.table-stacks tbody td::before {
    content: attr(data-label);
    display: block; margin-bottom: 2px;
    font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-500); font-weight: 700;
  }
}

/* =========================================================
   Rich-text content rendered from Summernote — applied to
   sanitised HTML blocks (task / agency / department / work-
   report description). Keeps images responsive, lists indented
   so bullets don't collapse, and headings sized down so they
   don't blow up the surrounding card. The base typography
   already styles paragraphs, so we only touch the bits the
   editor actually emits.
   ========================================================= */
.richtext-content { word-break: break-word; }
.richtext-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 6px 0;
}
.richtext-content ul,
.richtext-content ol { padding-left: 1.4em; margin: .4em 0; }
.richtext-content li { margin: 2px 0; }
.richtext-content h2 { font-size: 1.15rem; margin: .8em 0 .3em; }
.richtext-content h3 { font-size: 1.05rem; margin: .7em 0 .3em; }
.richtext-content h4 { font-size: 0.98rem; margin: .6em 0 .3em; }
.richtext-content p  { margin: .35em 0; }
.richtext-content blockquote {
  border-left: 3px solid var(--line);
  padding: 2px 10px; margin: .4em 0;
  color: var(--ink-500);
}
.richtext-content pre, .richtext-content code {
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  background: #f1f5f9;
  border-radius: 6px;
}
.richtext-content pre { padding: 8px 10px; overflow-x: auto; }
.richtext-content code { padding: 1px 4px; }
.richtext-content a { color: var(--brand); text-decoration: underline; }

/* =========================================================
   Summernote editor — compact horizontal toolbar.
   One row at the top, small icon-only buttons, sized to fit
   even in a narrow modal without wrapping into multiple rows.
   Matches the standard Summernote layout users expect.
   ========================================================= */
.note-editor.note-frame {
  border: 1px solid var(--line);
  border-radius: 8px;
  /* IMPORTANT: must stay `visible` (not `hidden`) so toolbar
     dropdowns — Style, Font Size, Color, Paragraph — can hang
     down past the editor's bottom edge without being clipped.
     The rounded corners are achieved by giving the toolbar and
     editing-area their own matching border-radius below. */
  overflow: visible;
  background: #fff;
}
/* Preserve the rounded-corner look without overflow:hidden by
   rounding the toolbar's top and the editing area's bottom. */
.note-editor.note-frame .note-toolbar {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
.note-editor.note-frame .note-editing-area,
.note-editor.note-frame .note-statusbar {
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

/* Horizontal toolbar — wraps onto a second row if width is tight
   (typical inside a narrow modal). No horizontal scrollbar. */
.note-editor.note-frame .note-toolbar {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;             /* allow 2 rows when needed */
  overflow: visible;
  align-items: center;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  padding: 4px 6px;
  gap: 4px;
  row-gap: 4px;
}

.note-editor.note-frame .note-btn-group {
  display: inline-flex !important;
  flex-direction: row;
  flex: 0 0 auto;
  margin: 0 2px !important;
  gap: 0;
}

/* Small, compact icon buttons in a single horizontal row. */
.note-editor.note-frame .note-btn {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-700, #334155);
  width: auto;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 5px !important;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 0;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.note-editor.note-frame .note-btn:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: var(--brand, #4f46e5);
}
.note-editor.note-frame .note-btn.active,
.note-editor.note-frame .note-btn:active {
  background: var(--brand, #4f46e5);
  border-color: var(--brand, #4f46e5);
  color: #fff;
}
.note-editor.note-frame .note-btn i { font-size: 12px; }
.note-editor.note-frame .note-btn .note-icon-caret { margin-left: 2px; font-size: 9px; }

/* Group buttons share borders so a group reads as one unit. */
.note-editor.note-frame .note-btn-group > .note-btn + .note-btn {
  margin-left: -1px;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.note-editor.note-frame .note-btn-group > .note-btn:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* =========================================================
   Dropdowns: Style / Font-size / Color / Paragraph / Line-height.
   Summernote ships these with inline styles that make each
   preview huge (Header 1 renders at real h1 size, color tiles
   spill out, font-size list looks unstyled). Overhaul the chrome
   so they match the app's other dropdowns.
   ========================================================= */
.note-editor.note-frame .note-toolbar .dropdown-menu,
.note-popover.popover .dropdown-menu {
  min-width: 160px;
  font-size: 13px;
  padding: 6px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .10);
  background: #fff;
  margin-top: 4px;
}

/* Generic dropdown item */
.note-editor.note-frame .dropdown-menu .dropdown-item,
.note-editor.note-frame .dropdown-menu > li > a,
.note-popover .dropdown-menu .dropdown-item,
.note-popover .dropdown-menu > li > a {
  display: flex;
  align-items: center;
  padding: 7px 14px;
  font-size: 13px;
  color: #0f172a;
  line-height: 1.3;
  cursor: pointer;
  background: transparent;
  border: 0;
  text-decoration: none;
}
.note-editor.note-frame .dropdown-menu .dropdown-item:hover,
.note-editor.note-frame .dropdown-menu > li > a:hover,
.note-popover .dropdown-menu .dropdown-item:hover,
.note-popover .dropdown-menu > li > a:hover {
  background: #eef2ff;
  color: var(--brand, #4f46e5);
}

/* --- STYLE dropdown (Normal / Quote / Code / Header 1-6) --- */
/* The default renders each label INSIDE its actual <h1>, <h2>,
   <blockquote>, <pre> tag, which makes "Header 1" enormous and
   overflows the dropdown. Constrain every preview tag so the list
   stays a tight uniform column. */
.note-editor .note-style .dropdown-menu h1,
.note-editor .note-style .dropdown-menu h2,
.note-editor .note-style .dropdown-menu h3,
.note-editor .note-style .dropdown-menu h4,
.note-editor .note-style .dropdown-menu h5,
.note-editor .note-style .dropdown-menu h6,
.note-editor .note-style .dropdown-menu blockquote,
.note-editor .note-style .dropdown-menu pre,
.note-editor .note-style .dropdown-menu p {
  font-size: 13px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-weight: 500;
  color: inherit;
  background: transparent !important;
}
/* Tiny visual cue so users can still distinguish heading levels:
   show the level number on the right side of each item. */
.note-editor .note-style .dropdown-menu h1::after { content: " · H1"; opacity: .5; font-size: 11px; }
.note-editor .note-style .dropdown-menu h2::after { content: " · H2"; opacity: .5; font-size: 11px; }
.note-editor .note-style .dropdown-menu h3::after { content: " · H3"; opacity: .5; font-size: 11px; }
.note-editor .note-style .dropdown-menu h4::after { content: " · H4"; opacity: .5; font-size: 11px; }
.note-editor .note-style .dropdown-menu h5::after { content: " · H5"; opacity: .5; font-size: 11px; }
.note-editor .note-style .dropdown-menu h6::after { content: " · H6"; opacity: .5; font-size: 11px; }

/* --- FONT SIZE dropdown --- */
/* Compact numeric list, no scrollbar — show all sizes in one go.
   Summernote's font-size list is short (typically 8-72 ≈ 10
   entries), so it fits without scrolling. */
.note-editor .note-fontsize .dropdown-menu {
  min-width: 70px;
  max-height: none;
  overflow-y: visible;
}
.note-editor .note-fontsize .dropdown-menu .dropdown-item,
.note-editor .note-fontsize .dropdown-menu > li > a {
  padding: 5px 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  justify-content: flex-start;
}

/* --- COLOR PICKER --- */
/* Summernote's color popover has two tabs (Background / Foreground),
   a "Recent color" pill, and a palette grid. Tighten the chrome and
   bring the palette cells closer to a square-grid with a tiny gap. */
.note-editor .note-color .dropdown-menu,
.note-color-palette + .dropdown-menu,
.note-popover .note-color .dropdown-menu {
  min-width: 220px;
  padding: 8px 10px;
}
.note-color-palette {
  display: block;
  margin-top: 4px;
}
.note-color-palette .note-color-row {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
}
.note-color-palette .note-color-btn {
  width: 18px !important;
  height: 18px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  margin: 1px !important;
  padding: 0 !important;
  outline: none;
  cursor: pointer;
}
.note-color-palette .note-color-btn:hover {
  transform: scale(1.18);
  z-index: 2;
  position: relative;
  border-color: var(--brand, #4f46e5) !important;
}
/* Tab buttons inside the colour popover */
.note-color .note-dropdown-menu .note-palette-title,
.note-color .dropdown-menu .note-palette-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #64748b;
  margin: 6px 0 4px;
  padding: 0 2px;
}
/* "Recent color" / "More color" buttons inside the popover */
.note-color .dropdown-menu .note-color-reset,
.note-color .dropdown-menu .note-color-select {
  margin: 4px 2px 2px;
  font-size: 11.5px;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: #fff;
}
.note-color .dropdown-menu .note-color-reset:hover,
.note-color .dropdown-menu .note-color-select:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: var(--brand, #4f46e5);
}

/* --- PARAGRAPH / LINE-HEIGHT dropdowns: align icons, normal size --- */
.note-editor .note-para .dropdown-menu,
.note-editor .note-height .dropdown-menu {
  min-width: 160px;
}
.note-editor .note-para .note-btn,
.note-editor .note-height .note-btn {
  height: 28px;
  width: auto !important;
}

/* Editable area below toolbar. */
.note-editor.note-frame .note-editing-area .note-editable {
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #0f172a;
  min-height: 140px;
}
.note-editor.note-frame .note-placeholder {
  padding: 12px 14px;
  color: #94a3b8;
  font-size: 13px;
}
.note-editor.note-frame .note-statusbar { background: #f8fafc; }

/* =========================================================
   Z-INDEX — Summernote dialog MUST sit above its OWN backdrop
   (otherwise clicks land on the backdrop and everything looks
   greyed-out / disabled) AND both must sit above any parent
   Bootstrap modal that contains the editor. The split between
   backdrop (lower) and dialog (higher) is the critical fix —
   they were equal before and clicks didn't register.
   ========================================================= */
.note-modal-backdrop,
.note-modal-backdrop.modal-backdrop,
div.note-modal-backdrop {
  z-index: 1990 !important;       /* below the dialog */
  background: #0f172a;
  opacity: 0.45;
}
.note-popover.popover,
.note-modal,
.note-modal.modal,
div.note-modal {
  z-index: 2000 !important;       /* above the backdrop */
}
.note-editor .dropdown-menu,
.note-popover .dropdown-menu {
  z-index: 2010 !important;
}

/* Make sure the dialog content can receive clicks/focus — explicit
   pointer-events + opacity so a stray override can't grey it out. */
.note-modal,
.note-modal .modal-dialog,
.note-modal .modal-content {
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* =========================================================
   Insert Image / Insert Link dialog — full redesign.
   Card chrome, headed sections, branded inputs, properly
   styled file picker, primary CTA aligned right.
   ========================================================= */
.note-modal .modal-dialog {
  max-width: 480px;
  margin: 72px auto;
}
.note-modal .modal-content {
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
  background: #fff;
  overflow: hidden;
}

/* Header */
.note-modal .modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: #fafbff;
  align-items: center;
}
.note-modal .modal-header .modal-title,
.note-modal .modal-header h4 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.note-modal .modal-header .close,
.note-modal .modal-header .btn-close,
.note-modal .modal-header [aria-label="Close"] {
  background: transparent;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: #94a3b8;
  opacity: 1;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.note-modal .modal-header .close:hover,
.note-modal .modal-header .btn-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Body */
.note-modal .modal-body {
  padding: 18px 20px;
  background: #fff;
}
.note-modal .modal-body .form-group,
.note-modal .modal-body label {
  display: block;
  margin-bottom: 14px;
}
.note-modal .modal-body label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #475569;
  margin-bottom: 6px;
  text-transform: none;
}

/* Inputs — text / url */
.note-modal .form-control,
.note-modal input[type="text"],
.note-modal input[type="url"] {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 13.5px;
  color: #0f172a;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.note-modal .form-control:focus,
.note-modal input[type="text"]:focus,
.note-modal input[type="url"]:focus {
  border-color: var(--brand, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
  background: #fff;
}

/* File input — browser default looks ugly. Style the wrapper so
   "Choose files" reads as a pill-style button matching the rest. */
.note-modal input[type="file"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fafbff;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
}
.note-modal input[type="file"]:hover {
  border-color: #c7d2fe;
  background: #eef2ff;
}
.note-modal input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 12px;
  background: var(--brand, #4f46e5);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .12s ease;
}
.note-modal input[type="file"]::file-selector-button:hover {
  background: #4338ca;
}

/* Checkboxes ("Open in new window", "Use default protocol") */
.note-modal .checkbox,
.note-modal .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #334155;
  margin-bottom: 10px;
}
.note-modal .checkbox input[type="checkbox"],
.note-modal .form-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand, #4f46e5);
  cursor: pointer;
}
.note-modal .checkbox label,
.note-modal .form-check label {
  margin: 0;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: #334155;
  cursor: pointer;
}

/* Footer */
.note-modal .modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: #fafbff;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Primary CTA — Insert Link / Insert Image */
.note-modal .btn.note-btn-primary,
.note-modal .btn-primary {
  background: var(--brand, #4f46e5);
  border: 1px solid var(--brand, #4f46e5);
  color: #fff;
  height: 36px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.note-modal .btn.note-btn-primary:hover,
.note-modal .btn-primary:hover {
  background: #4338ca;
  border-color: #4338ca;
}
.note-modal .btn.note-btn-primary[disabled],
.note-modal .btn.note-btn-primary:disabled,
.note-modal .btn-primary[disabled],
.note-modal .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #a5b4fc;
  border-color: #a5b4fc;
}

/* Secondary CTA (rare but Summernote occasionally renders one) */
.note-modal .btn:not(.note-btn-primary):not(.btn-primary) {
  background: #fff;
  border: 1px solid var(--line);
  color: #334155;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.note-modal .btn:not(.note-btn-primary):not(.btn-primary):hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

/* Popover (hover toolbar over images / links inside the editor) */
.note-popover.popover {
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(15, 23, 42, .08);
}
.note-popover.popover .note-btn { height: 26px; padding: 0 7px; width: auto !important; }


/* =====================================================================
   SOPs & Manuals + Announcements — component styles
   Ported from the platform design (test.html) for the real /sops and
   /announcements modules. Uses the existing CSS custom properties.
   ===================================================================== */

/* ----- Shared: read-pill (MANDATORY / OPTIONAL / READ) ----- */
.read-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  padding: 4px 8px; border-radius: 6px; text-transform: uppercase;
  white-space: nowrap;
}
.read-pill.mandatory { background: var(--danger-50); color: var(--danger); }
.read-pill.optional  { background: #eef1f6; color: var(--ink-500, #64748b); }

/* Let the existing .seg pill style work on anchors too */
.seg a {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; color: inherit;
}

/* Rendered rich-text body */
.rich-content { font-size: 14px; line-height: 1.6; color: var(--ink-700, #334155); }
.rich-content :where(h1,h2,h3) { font-weight: 700; margin: 14px 0 6px; }
.rich-content p { margin: 0 0 10px; }
.rich-content ul, .rich-content ol { margin: 0 0 10px 20px; }
.rich-content img { max-width: 100%; border-radius: 10px; }

/* ----- SOP category cards ----- */
.sop-cat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.sop-cat {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 18px; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.sop-cat:hover { box-shadow: 0 10px 30px rgba(15,23,42,.08); transform: translateY(-2px); border-color: #d8e0ee; }
.sc-icon {
  width: 42px; height: 42px; border-radius: 12px; color: #fff;
  display: grid; place-items: center; font-size: 18px; margin-bottom: 14px;
}
.sc-title { font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.sc-desc  { font-size: 12.5px; color: var(--ink-500, #64748b); line-height: 1.5; min-height: 54px; }
.sc-stat  { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.sc-count { font-weight: 800; font-size: 28px; line-height: 1; }

/* ----- SOP document rows ----- */
.sop-doc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
}
.sop-doc-row + .sop-doc-row { border-top: 1px solid var(--line); border-radius: 0; }
.sop-doc-row:hover { background: #fafbfd; }
.sop-doc-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; font-size: 16px; flex-shrink: 0;
}

/* ----- Announcements: scope note ----- */
.scope-note {
  display: flex; align-items: center; gap: 12px;
  background: var(--brand-50); border: 1px solid #cfdcff; color: var(--ink-900, #0f172a);
  border-radius: 12px; padding: 12px 14px; font-size: 13px; margin-bottom: 16px;
}
.scope-note > i { color: var(--brand); font-size: 18px; }

/* ----- Announcements: wall tabs ----- */
.wall-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.wall-tabs button {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--ink-700, #334155); transition: background .12s ease, border-color .12s ease;
}
.wall-tabs button:hover { background: #f6f8fc; }
.wall-tabs button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.wall-tabs .cnt {
  font-size: 11px; font-weight: 700; background: rgba(0,0,0,.08);
  border-radius: 999px; padding: 1px 7px;
}
.wall-tabs button.on .cnt { background: rgba(255,255,255,.25); }

/* ----- Announcement card ----- */
.ann-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  margin-bottom: 16px; overflow: hidden;
}
.ann-card.mandatory { border-left: 4px solid var(--danger); }
.ann-card.optional  { border-left: 4px solid var(--line); }
.ann-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; }
.ann-body { padding: 12px 16px 16px; }
.ann-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--line); background: #fafbfd;
}

/* ----- Reactions ----- */
.react-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.react-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--ink-700, #334155); transition: background .12s ease, border-color .12s ease;
}
.react-chip:hover { background: #f6f8fc; }
.react-chip.on { background: var(--brand-50); border-color: #cfdcff; color: var(--brand); }
.react-chip .em { font-size: 14px; }

/* ----- Acknowledgement progress bar ----- */
.ack-bar {
  flex: 1; height: 7px; background: #eef1f6; border-radius: 999px; overflow: hidden;
}
.ack-bar > span { display: block; height: 100%; background: var(--ok); border-radius: 999px; }

/* ----- Responsive ----- */
@media (max-width: 900px) {
  .sop-cat-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   SOPs / Announcements — robust 2-column page layout
   Self-contained grid that does NOT depend on the 12-col `.grid-12`
   helper (which collapsed the side column to a single track on these
   pages). Main column is fluid; side column is a fixed comfortable
   width. Stacks below 1000px.
   ===================================================================== */
.page-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}
.page-2col > .p2c-main { min-width: 0; }
.page-2col > .p2c-side { min-width: 0; }
@media (max-width: 1000px) {
  .page-2col { grid-template-columns: 1fr; }
}

/* SOP category cards: 3 → 2 → 1 as width shrinks */
@media (max-width: 1100px) { .sop-cat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .sop-cat-grid { grid-template-columns: 1fr; } }

/* Make the New/Edit modals comfortably wide for the forms */
.sop-modal .modal-dialog,
.ann-modal .modal-dialog { max-width: 720px; }
.sop-modal .modal-body,
.ann-modal .modal-body { max-height: 72vh; overflow-y: auto; }

/* =====================================================================
   SOP New/Edit modal — enlarged + segmented-pill redesign (matches the
   platform design). Overrides the earlier .sop-modal sizing above.
   ===================================================================== */
.sop-modal .modal-dialog { max-width: 880px; }
.sop-modal .modal-content { min-height: 72vh; }
.sop-modal .modal-body { max-height: 82vh; overflow-y: auto; padding: 22px 22px 0; }

/* Blue rounded header icon */
.mf-head-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, #3a6cff, #1b4ed8); color: #fff;
  display: grid; place-items: center; font-size: 18px;
}

/* Small uppercase field labels */
.mf-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-300); margin-bottom: 7px;
}
.mf-field { margin-bottom: 18px; }
.modal-form .row { margin-bottom: 18px; }
.modal-form .form-control-lg, .modal-form .form-select-lg { font-size: 15px; padding: 11px 14px; border-radius: 11px; }

/* Segmented pill selector */
.modal-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.modal-pills .pill-btn {
  border: 1.5px solid var(--line); background: #fff; border-radius: 999px;
  padding: 9px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: var(--ink-700, #334155); transition: background .12s ease, border-color .12s ease, color .12s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.modal-pills .pill-btn:hover { background: #f6f8fc; }
.modal-pills .pill-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.modal-pills .pill-btn.danger.active { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Sticky action footer inside the scrollable modal body */
.modal-form-foot {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  margin: 18px -22px 0; padding: 14px 22px;
  background: #fafbfd; border-top: 1px solid var(--line);
  border-radius: 0 0 18px 18px;
}

/* ----- Announcement modal: same enlarged shell as SOP + orange head + voice ----- */
.ann-modal .modal-dialog { max-width: 880px; }
.ann-modal .modal-content { min-height: 72vh; }
.ann-modal .modal-body { max-height: 82vh; overflow-y: auto; padding: 22px 22px 0; }

.mf-head-icon.accent { background: linear-gradient(135deg, #ff9a5a, #ff7a3d); }

/* Voice-note recorder card */
.voice-card {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: #fafbfd;
}
.voice-card + .voice-card { margin-top: 10px; }
.voice-mic {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--danger); color: #fff; border: none; cursor: pointer;
  display: grid; place-items: center; font-size: 18px; transition: transform .1s ease;
}
.voice-mic:hover { transform: scale(1.05); }
.voice-mic.recording { animation: voice-pulse 1.1s infinite; }
@keyframes voice-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220,40,60,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(220,40,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,40,60,0); }
}
.voice-title { font-weight: 700; font-size: 14px; }
.voice-sub { font-size: 12.5px; color: var(--ink-300); }