/*
 * SympWatch — Health Worker Portal Design System
 * hw-portal.css  |  Version 2025
 * ISO/IEC 25010 | ISO/IEC 25002 Compliant
 * Mobile-First Fluid Responsive Design
 * No external dependencies — Pure CSS
 */

/* ================================================================
   HEALTH WORKER PORTAL — CSS CUSTOM PROPERTIES
   ================================================================ */

:root {
  /* ── HW Portal Teal Palette ────────────────────────────────── */
  --hw-50:  #f0fdfa;
  --hw-100: #ccfbf1;
  --hw-200: #99f6e4;
  --hw-300: #5eead4;
  --hw-400: #2dd4bf;
  --hw-500: #14b8a6;
  --hw-600: #0d9488;   /* main interactive */
  --hw-700: #0f766e;
  --hw-800: #115e59;
  --hw-900: #134e4a;

  /* ── HW Semantic Tokens ────────────────────────────────────── */
  --hw-primary:       var(--hw-600);
  --hw-primary-dark:  var(--hw-700);
  --hw-primary-light: var(--hw-50);
  --hw-border:        rgba(13,148,136,.18);
  --hw-focus-ring:    rgba(13,148,136,.28);

  /* ── Surface & Background ──────────────────────────────────── */
  --hw-bg:        #f1f5f9;
  --hw-surface:   #ffffff;
  --hw-surface-2: #f8fafc;
  --hw-card-bd:   #e2e8f0;

  /* ── Status Tokens ─────────────────────────────────────────── */
  --hw-pending-bg:  #fef9c3; --hw-pending-fg:  #713f12; --hw-pending-bd:  #fde68a;
  --hw-active-bg:   #fef2f2; --hw-active-fg:   #991b1b; --hw-active-bd:   #fecaca;
  --hw-cleared-bg:  #ecfdf5; --hw-cleared-fg:  #065f46; --hw-cleared-bd:  #a7f3d0;
  --hw-approved-bg: #eff6ff; --hw-approved-fg: #1e40af; --hw-approved-bd: #bfdbfe;
  --hw-rejected-bg: #fef2f2; --hw-rejected-fg: #991b1b; --hw-rejected-bd: #fecaca;

  /* ── Spacing tokens (already in main.css but re-exported for HW) */
  --hw-radius-sm:  0.25rem;
  --hw-radius-md:  0.5rem;
  --hw-radius-lg:  0.75rem;
  --hw-radius-xl:  1rem;
  --hw-radius-2xl: 1.5rem;
  --hw-radius-full:9999px;

  /* ── Shadows ───────────────────────────────────────────────── */
  --hw-shadow-xs:  0 1px 2px rgba(15,22,48,.05);
  --hw-shadow-sm:  0 2px 6px rgba(15,22,48,.07);
  --hw-shadow-md:  0 4px 16px rgba(15,22,48,.09);
  --hw-shadow-lg:  0 8px 28px rgba(15,22,48,.11);
  --hw-shadow-card:0 0 0 1px rgba(15,22,48,.05),0 2px 8px rgba(15,22,48,.06);
}

/* ================================================================
   GLOBAL BODY — Health Worker pages
   ================================================================ */

body {
  background: var(--hw-bg);
  -webkit-font-smoothing: antialiased;
}

/* ================================================================
   HW NAVIGATION IMPROVEMENTS
   ── Adds icon slots to the existing sw-navbar--hw variant
   ================================================================ */

.sw-navbar--hw {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 50%, #115e59 100%);
  box-shadow: 0 2px 12px rgba(13,148,136,.25);
}

/* Nav link with icon (wrap icon + label) */
.sw-nav-link-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sw-nav-link-inner svg {
  flex-shrink: 0;
  opacity: .75;
  transition: opacity .15s;
}
.sw-nav-link--active .sw-nav-link-inner svg,
.sw-nav-link:hover .sw-nav-link-inner svg {
  opacity: 1;
}

/* ================================================================
   PAGE WRAPPER — Content spacing accounting for sticky nav
   ================================================================ */

.hw-page-body {
  background: var(--hw-bg);
  min-height: calc(100dvh - 60px);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 768px) {
  .hw-page-body { min-height: calc(100dvh - 68px); }
}

/* ================================================================
   HW PAGE HEADER BAND
   Compact, professional banner below navbar
   ================================================================ */

.hw-pheader {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 60%, #115e59 100%);
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 3vw, 1.5rem) 0;
}

.hw-pheader::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04' fill-rule='evenodd'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.hw-pheader .container {
  position: relative;
  z-index: 1;
}

.hw-pheader-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(.75rem, 2vw, 1.5rem);
  flex-wrap: wrap;
}

.hw-pheader-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255,255,255,.65);
  margin-bottom: .375rem;
}

.hw-pheader-title {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
  margin: 0 0 .25rem;
  line-height: 1.2;
}

.hw-pheader-sub {
  font-size: clamp(.75rem, 2vw, .875rem);
  color: rgba(255,255,255,.65);
  margin: 0;
  max-width: 520px;
  line-height: 1.5;
}

.hw-pheader-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.btn-hw-ghost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: var(--hw-radius-full);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
  font-size: .8125rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.btn-hw-ghost:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.35);
  color: #fff;
}

/* ================================================================
   HW STAT CARDS  — Redesigned with icon, number, label, accent line
   ================================================================ */

.hw-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 22vw, 180px), 1fr));
  gap: clamp(.5rem, 1.5vw, .875rem);
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

/* Compact version for 2-col use */
.hw-stats-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(clamp(100px, 18vw, 150px), 1fr));
  gap: clamp(.375rem, 1.2vw, .625rem);
}

.hw-stat-card {
  background: var(--hw-surface);
  border: 1px solid var(--hw-card-bd);
  border-radius: var(--hw-radius-xl);
  padding: clamp(.875rem, 2.5vw, 1.25rem) clamp(.875rem, 2vw, 1.125rem);
  box-shadow: var(--hw-shadow-card);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.hw-stat-card:hover {
  box-shadow: var(--hw-shadow-md);
  transform: translateY(-1px);
}

/* Accent line at top */
.hw-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--hw-radius-xl) var(--hw-radius-xl) 0 0;
}
.hw-stat-card--teal::before    { background: var(--hw-600); }
.hw-stat-card--amber::before   { background: #f59e0b; }
.hw-stat-card--red::before     { background: #ef4444; }
.hw-stat-card--green::before   { background: #16a34a; }
.hw-stat-card--blue::before    { background: #2563eb; }
.hw-stat-card--purple::before  { background: #7c3aed; }

.hw-stat-icon {
  width: clamp(32px, 4.5vw, 40px);
  height: clamp(32px, 4.5vw, 40px);
  border-radius: var(--hw-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hw-stat-icon--teal    { background: #f0fdfa; color: var(--hw-600); }
.hw-stat-icon--amber   { background: #fefce8; color: #b45309; }
.hw-stat-icon--red     { background: #fef2f2; color: #b91c1c; }
.hw-stat-icon--green   { background: #f0fdf4; color: #15803d; }
.hw-stat-icon--blue    { background: #eff6ff; color: #1d4ed8; }
.hw-stat-icon--purple  { background: #faf5ff; color: #6d28d9; }

.hw-stat-body {
  flex: 1;
  min-width: 0;
}

.hw-stat-number {
  font-size: clamp(1.375rem, 4vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--neutral-900, #0f172a);
  margin-bottom: .125rem;
}

.hw-stat-label {
  font-size: clamp(.625rem, 1.5vw, .75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--neutral-500, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inline row variant (icon left, text right) */
.hw-stat-card--row {
  flex-direction: row;
  align-items: center;
}
.hw-stat-card--row .hw-stat-body {
  margin-left: .5rem;
}

/* ================================================================
   HW FILTER BAR  — Compact, chip-based filters
   ================================================================ */

.hw-filter-bar {
  background: var(--hw-surface);
  border: 1px solid var(--hw-card-bd);
  border-radius: var(--hw-radius-xl);
  padding: clamp(.625rem, 1.5vw, .875rem) clamp(.75rem, 2vw, 1rem);
  margin-bottom: clamp(.75rem, 2vw, 1rem);
  box-shadow: var(--hw-shadow-xs);
}

.hw-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.375rem, 1vw, .5rem);
  align-items: center;
}

.hw-filter-row + .hw-filter-row {
  margin-top: .5rem;
}

/* Search input */
.hw-search-input {
  flex: 1;
  min-width: clamp(120px, 28vw, 220px);
  padding: .4375rem .625rem .4375rem 2.25rem;
  border: 1px solid var(--hw-card-bd);
  border-radius: var(--hw-radius-full);
  font-size: .8125rem;
  background: var(--hw-surface-2);
  color: var(--neutral-800, #1e293b);
  transition: border-color .15s, box-shadow .15s;
  min-height: 36px;
}
.hw-search-input:focus {
  outline: none;
  border-color: var(--hw-600);
  box-shadow: 0 0 0 3px var(--hw-focus-ring);
  background: var(--hw-surface);
}
.hw-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.hw-search-wrap svg {
  position: absolute;
  left: .625rem;
  color: var(--neutral-400, #94a3b8);
  pointer-events: none;
  flex-shrink: 0;
}

/* Select filter */
.hw-filter-select {
  padding: .4375rem 1.75rem .4375rem .625rem;
  border: 1px solid var(--hw-card-bd);
  border-radius: var(--hw-radius-full);
  font-size: .8125rem;
  background: var(--hw-surface-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  color: var(--neutral-700, #334155);
  min-height: 36px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.hw-filter-select:focus {
  outline: none;
  border-color: var(--hw-600);
  box-shadow: 0 0 0 3px var(--hw-focus-ring);
}

/* Filter label */
.hw-filter-label {
  font-size: .75rem;
  font-weight: 500;
  color: var(--neutral-500, #64748b);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Filter group (label + select) */
.hw-filter-group {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}

/* ================================================================
   HW DATA TABLE  — Clean, professional, compact
   ================================================================ */

.hw-table-wrap {
  background: var(--hw-surface);
  border: 1px solid var(--hw-card-bd);
  border-radius: var(--hw-radius-xl);
  overflow: hidden;
  box-shadow: var(--hw-shadow-card);
}

.hw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(.75rem, 1.5vw, .8125rem);
}

.hw-table thead tr {
  background: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%);
}

.hw-table thead th {
  padding: clamp(.5rem, 1.2vw, .625rem) clamp(.625rem, 1.5vw, .875rem);
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--hw-700);
  text-align: left;
  white-space: nowrap;
  border-bottom: 2px solid var(--hw-100);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background .12s;
}
.hw-table thead th:hover { background: var(--hw-100); }

.hw-table tbody td {
  padding: clamp(.5rem, 1.2vw, .625rem) clamp(.625rem, 1.5vw, .875rem);
  border-bottom: 1px solid #f1f5f9;
  color: var(--neutral-700, #334155);
  vertical-align: middle;
  font-size: clamp(.75rem, 1.5vw, .8125rem);
}
.hw-table tbody tr {
  transition: background .1s;
  cursor: pointer;
}
.hw-table tbody tr:hover { background: var(--hw-50); }
.hw-table tbody tr:last-child td { border-bottom: none; }
.hw-table tbody tr:active { background: var(--hw-100); }

/* ================================================================
   HW MOBILE CARD (replaces table on small screens)
   ================================================================ */

.hw-card-list {
  display: flex;
  flex-direction: column;
  gap: clamp(.375rem, 1vw, .5rem);
}

.hw-row-card {
  background: var(--hw-surface);
  border: 1px solid var(--hw-card-bd);
  border-radius: var(--hw-radius-lg);
  padding: clamp(.625rem, 2vw, .875rem);
  box-shadow: var(--hw-shadow-xs);
  cursor: pointer;
  transition: box-shadow .12s, background .1s;
  border-left: 3px solid transparent;
}
.hw-row-card:hover  { box-shadow: var(--hw-shadow-sm); }
.hw-row-card:active { background: var(--hw-50); }

.hw-row-card--pending   { border-left-color: #f59e0b; }
.hw-row-card--active    { border-left-color: #ef4444; }
.hw-row-card--cleared   { border-left-color: #16a34a; }
.hw-row-card--approved  { border-left-color: #2563eb; }
.hw-row-card--rejected  { border-left-color: #dc2626; }

.hw-row-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .375rem;
}
.hw-row-card-title {
  font-weight: 600;
  font-size: .875rem;
  color: var(--neutral-900, #0f172a);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.hw-row-card-meta {
  font-size: .6875rem;
  color: var(--neutral-400, #94a3b8);
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .25rem;
}
.hw-row-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid #f1f5f9;
  gap: .5rem;
}

/* ================================================================
   HW DETAIL SLIDE-OUT PANEL  — Improved
   ================================================================ */

.hw-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.4);
  z-index: 1040;
  opacity: 0;
  transition: opacity .2s;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.hw-overlay.open { display: block; opacity: 1; }

.hw-detail-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(480px, 100vw);
  height: 100vh;
  height: 100dvh;
  background: var(--hw-surface);
  z-index: 1050;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: -8px 0 40px rgba(15,23,42,.15);
  transition: right .28s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
}
.hw-detail-panel.open { right: 0; }

.hw-detail-panel::-webkit-scrollbar { width: 5px; }
.hw-detail-panel::-webkit-scrollbar-thumb { background: var(--hw-200); border-radius: 3px; }

.hw-detail-header {
  position: sticky;
  top: 0;
  background: var(--hw-surface);
  border-bottom: 1px solid var(--hw-card-bd);
  padding: clamp(.75rem, 2vw, 1rem) clamp(.875rem, 2.5vw, 1.25rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  gap: .75rem;
  flex-shrink: 0;
}

.hw-detail-title {
  font-size: clamp(.9375rem, 2vw, 1rem);
  font-weight: 700;
  color: var(--neutral-900, #0f172a);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hw-detail-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--hw-card-bd);
  border-radius: var(--hw-radius-lg);
  background: var(--hw-surface-2);
  color: var(--neutral-500, #64748b);
  cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.hw-detail-close:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.hw-detail-body {
  padding: clamp(.875rem, 2.5vw, 1.25rem);
  flex: 1;
}

/* Detail section */
.hw-detail-section {
  margin-bottom: clamp(.875rem, 2vw, 1.125rem);
}

.hw-detail-section-title {
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--hw-600);
  margin-bottom: .5rem;
  padding-bottom: .375rem;
  border-bottom: 1px solid var(--hw-100);
  display: flex;
  align-items: center;
  gap: .375rem;
}

.hw-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}
@media (min-width: 400px) {
  .hw-detail-grid { grid-template-columns: repeat(2, 1fr); }
}

.hw-field {
  display: flex;
  flex-direction: column;
  gap: .125rem;
}

.hw-field-label {
  font-size: .5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--neutral-400, #94a3b8);
}

.hw-field-value {
  font-size: clamp(.8125rem, 2vw, .875rem);
  color: var(--neutral-800, #1e293b);
  font-weight: 500;
  word-break: break-word;
}
.hw-field-value--mono {
  font-family: 'Cascadia Code','Fira Code',Consolas,'Courier New',monospace;
  font-size: .75rem;
}

.hw-detail-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  padding-top: clamp(.75rem, 2vw, 1rem);
  border-top: 1px solid var(--hw-card-bd);
  margin-top: clamp(.75rem, 2vw, 1rem);
  flex-shrink: 0;
}

/* ================================================================
   HW BADGE SYSTEM  — Status + Symptom
   ================================================================ */

.hw-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--hw-radius-full);
  font-size: .6875rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  gap: 3px;
}
.hw-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hw-badge--pending  { background: var(--hw-pending-bg);  color: var(--hw-pending-fg);  border-color: var(--hw-pending-bd);  }
.hw-badge--pending::before  { background: #f59e0b; }
.hw-badge--active   { background: var(--hw-active-bg);   color: var(--hw-active-fg);   border-color: var(--hw-active-bd);   }
.hw-badge--active::before   { background: #ef4444; }
.hw-badge--cleared  { background: var(--hw-cleared-bg);  color: var(--hw-cleared-fg);  border-color: var(--hw-cleared-bd);  }
.hw-badge--cleared::before  { background: #16a34a; }
.hw-badge--approved { background: var(--hw-approved-bg); color: var(--hw-approved-fg); border-color: var(--hw-approved-bd); }
.hw-badge--approved::before { background: #2563eb; }
.hw-badge--rejected { background: var(--hw-rejected-bg); color: var(--hw-rejected-fg); border-color: var(--hw-rejected-bd); }
.hw-badge--rejected::before { background: #dc2626; }

/* No dot variant */
.hw-badge--nodot::before { display: none; }

/* Symptom badges */
.hw-sym { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--hw-radius-full); font-size: .625rem; font-weight: 600; color: #fff; }
.hw-sym--fever         { background: #ef4444; }
.hw-sym--rashes        { background: #f59e0b; }
.hw-sym--cough         { background: #3b82f6; }
.hw-sym--cold          { background: #06b6d4; }
.hw-sym--conjunctivitis{ background: #8b5cf6; }
.hw-sym--diarrhea      { background: #84cc16; }
.hw-sym--vomiting      { background: #f97316; }
.hw-sym--default       { background: #64748b; }

/* ================================================================
   HW TAB BAR  — Consistent tab component across all pages
   ================================================================ */

.hw-tabs {
  display: flex;
  border-bottom: 2px solid var(--hw-card-bd);
  margin-bottom: clamp(.75rem, 2vw, 1rem);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
}
.hw-tabs::-webkit-scrollbar { display: none; }

.hw-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: clamp(.5625rem, 1.5vw, .6875rem) clamp(.75rem, 2vw, 1.125rem);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: clamp(.8125rem, 2vw, .875rem);
  font-weight: 500;
  color: var(--neutral-500, #64748b);
  transition: color .15s, background .15s, border-color .15s;
  white-space: nowrap;
  font-family: inherit;
  min-height: 44px;
  flex-shrink: 0;
  border-radius: var(--hw-radius-md) var(--hw-radius-md) 0 0;
}
.hw-tab:hover  { color: var(--hw-700); background: var(--hw-50); }
.hw-tab.active { color: var(--hw-600); border-bottom-color: var(--hw-600); font-weight: 600; }
.hw-tab:focus-visible { outline: 2px solid var(--hw-600); outline-offset: -2px; }

.hw-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--neutral-100, #f1f5f9);
  color: var(--neutral-600, #475569);
  font-size: .625rem;
  font-weight: 700;
  transition: background .15s, color .15s;
}
.hw-tab.active .hw-tab-badge {
  background: var(--hw-600);
  color: #fff;
}

/* ================================================================
   HW FILTER CHIPS  — Severity / category chips
   ================================================================ */

.hw-chip-row {
  display: flex;
  gap: clamp(.25rem, 1vw, .375rem);
  flex-wrap: wrap;
  padding: clamp(.375rem, 1vw, .5rem) 0;
  margin-bottom: clamp(.625rem, 1.5vw, .875rem);
}

.hw-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: clamp(.3125rem, 1vw, .375rem) clamp(.5rem, 1.5vw, .75rem);
  border-radius: var(--hw-radius-full);
  border: 1px solid var(--hw-card-bd);
  background: var(--hw-surface);
  color: var(--neutral-600, #475569);
  font-size: clamp(.75rem, 2vw, .8125rem);
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  min-height: 34px;
  font-family: inherit;
}
.hw-chip:hover { background: var(--hw-surface-2); border-color: var(--neutral-300, #cbd5e1); color: var(--neutral-800, #1e293b); }
.hw-chip.active { color: #fff; font-weight: 600; border-color: transparent; }

/* chip color variants when active */
.hw-chip--all.active    { background: linear-gradient(135deg, var(--hw-600), var(--hw-700)); box-shadow: 0 2px 8px rgba(13,148,136,.28); }
.hw-chip--critical.active { background: linear-gradient(135deg, #dc2626, #b91c1c); box-shadow: 0 2px 8px rgba(220,38,38,.3); }
.hw-chip--high.active   { background: linear-gradient(135deg, #ea580c, #c2410c); box-shadow: 0 2px 8px rgba(234,88,12,.28); }
.hw-chip--medium.active { background: linear-gradient(135deg, #d97706, #b45309); box-shadow: 0 2px 8px rgba(217,119,6,.28); }
.hw-chip--low.active    { background: linear-gradient(135deg, #16a34a, #15803d); box-shadow: 0 2px 8px rgba(22,163,74,.26); }
.hw-chip--info.active   { background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 2px 8px rgba(37,99,235,.26); }
.hw-chip:focus-visible  { outline: 2px solid var(--hw-600); outline-offset: 2px; }

/* ================================================================
   HW ANNOUNCEMENT CARD  — Improved layout
   ================================================================ */

.hw-ann-list {
  display: flex;
  flex-direction: column;
  gap: clamp(.5rem, 1.5vw, .75rem);
}

.hw-ann-card {
  background: var(--hw-surface);
  border: 1px solid var(--hw-card-bd);
  border-left: 4px solid var(--neutral-300, #cbd5e1);
  border-radius: var(--hw-radius-xl);
  padding: clamp(.75rem, 2.5vw, 1.125rem);
  cursor: pointer;
  transition: box-shadow .2s, transform .15s;
  outline: none;
}
.hw-ann-card:hover   { box-shadow: var(--hw-shadow-lg); transform: translateY(-1px); }
.hw-ann-card:focus-visible { outline: 2px solid var(--hw-600); outline-offset: 2px; }

.hw-ann-card--critical  { border-left-color: #dc2626; }
.hw-ann-card--high      { border-left-color: #ea580c; }
.hw-ann-card--medium    { border-left-color: #d97706; }
.hw-ann-card--low       { border-left-color: #16a34a; }
.hw-ann-card--info      { border-left-color: #2563eb; }
.hw-ann-card--fieldnote { border-left-color: var(--hw-600); }

.hw-ann-card-top {
  display: flex;
  align-items: flex-start;
  gap: clamp(.625rem, 2vw, .875rem);
}

.hw-ann-card-icon {
  width: clamp(32px, 5vw, 38px);
  height: clamp(32px, 5vw, 38px);
  border-radius: var(--hw-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.hw-ann-card-icon--critical  { background: #dc2626; }
.hw-ann-card-icon--high      { background: #ea580c; }
.hw-ann-card-icon--medium    { background: #d97706; }
.hw-ann-card-icon--low       { background: #16a34a; }
.hw-ann-card-icon--info      { background: #2563eb; }
.hw-ann-card-icon--fieldnote { background: var(--hw-600); }

.hw-ann-card-content { flex: 1; min-width: 0; }

.hw-ann-card-title {
  font-size: clamp(.875rem, 2vw, .9375rem);
  font-weight: 700;
  color: var(--neutral-800, #1e293b);
  margin: 0 0 .25rem;
  line-height: 1.3;
}

.hw-ann-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-bottom: .5rem;
}

.hw-ann-card-preview {
  font-size: clamp(.8125rem, 2vw, .875rem);
  color: var(--neutral-600, #475569);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: .5rem;
}

.hw-ann-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid #f1f5f9;
}

.hw-ann-card-time {
  font-size: .75rem;
  color: var(--neutral-400, #94a3b8);
}

.hw-ann-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--hw-600);
}

/* ================================================================
   HW EMPTY STATE  — SVG-based, no emojis
   ================================================================ */

.hw-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2rem, 8vw, 4rem) clamp(1rem, 4vw, 2rem);
  color: var(--neutral-400, #94a3b8);
}

.hw-empty-icon {
  width: clamp(48px, 10vw, 64px);
  height: clamp(48px, 10vw, 64px);
  color: var(--neutral-300, #cbd5e1);
  margin: 0 auto clamp(.75rem, 2vw, 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hw-empty-title {
  font-size: clamp(.9375rem, 2.5vw, 1.0625rem);
  font-weight: 600;
  color: var(--neutral-600, #475569);
  margin: 0 0 .375rem;
}

.hw-empty-text {
  font-size: clamp(.8125rem, 2vw, .875rem);
  max-width: 320px;
  line-height: 1.55;
  color: var(--neutral-400, #94a3b8);
}

/* ================================================================
   HW LOADING SPINNER
   ================================================================ */

.hw-spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(120px, 20vw, 200px);
}

.hw-spinner {
  width: clamp(24px, 4vw, 32px);
  height: clamp(24px, 4vw, 32px);
  border: 2px solid var(--hw-100);
  border-top-color: var(--hw-600);
  border-radius: 50%;
  -webkit-animation: hw-spin .7s linear infinite;
  animation: hw-spin .7s linear infinite;
}
@-webkit-keyframes hw-spin { to { -webkit-transform: rotate(360deg); } }
@keyframes hw-spin { to { transform: rotate(360deg); } }

/* ================================================================
   HW CARD  — General purpose card
   ================================================================ */

.hw-card {
  background: var(--hw-surface);
  border: 1px solid var(--hw-card-bd);
  border-radius: var(--hw-radius-xl);
  box-shadow: var(--hw-shadow-card);
  overflow: hidden;
  margin-bottom: clamp(.875rem, 2vw, 1.25rem);
  transition: box-shadow .2s;
}
.hw-card:hover { box-shadow: var(--hw-shadow-md); }

.hw-card-header {
  padding: clamp(.75rem, 2vw, .9375rem) clamp(.875rem, 2.5vw, 1.25rem);
  border-bottom: 1px solid var(--hw-card-bd);
  background: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.hw-card-header-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: clamp(.875rem, 2vw, .9375rem);
  font-weight: 700;
  color: var(--hw-800);
  margin: 0;
}

.hw-card-header-title svg {
  color: var(--hw-600);
  flex-shrink: 0;
}

.hw-card-body {
  padding: clamp(.875rem, 2.5vw, 1.25rem);
}

.hw-card-body--flush {
  padding: 0;
}

/* ================================================================
   HW BARANGAY BADGE  — Assigned areas
   ================================================================ */

.hw-brgy-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: clamp(.25rem, .8vw, .375rem) clamp(.5rem, 1.2vw, .75rem);
  background: var(--hw-50);
  color: var(--hw-700);
  border: 1px solid var(--hw-200);
  border-radius: var(--hw-radius-full);
  font-size: clamp(.6875rem, 1.5vw, .75rem);
  font-weight: 600;
}

/* ================================================================
   HW BARANGAY DROPDOWN — Compact collapsible disclosure
   ISO/IEC 25010 — Usability (Operability): saves vertical space,
     keyboard-accessible, clear expand/collapse affordance.
   ISO/IEC 25002 — Efficiency: no scrolling past large badge lists.
   Mobile-first fluid layout with balanced proportions.
   ================================================================ */

.hw-brgy-dropdown {
  background: var(--hw-surface);
  border: 1px solid var(--hw-card-bd);
  border-radius: var(--hw-radius-xl);
  box-shadow: var(--hw-shadow-card);
  margin-bottom: clamp(1rem, 3vw, 1.25rem);
  overflow: hidden;
  transition: box-shadow .2s;
}
.hw-brgy-dropdown:hover {
  box-shadow: var(--hw-shadow-md);
}

/* ── Toggle button ─────────────────────────────────────────────── */
.hw-brgy-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: clamp(.375rem, 1vw, .5rem);
  width: 100%;
  padding: clamp(.5rem, 1.5vw, .625rem) clamp(.75rem, 2vw, 1rem);
  background: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%);
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background .15s;
}
.hw-brgy-dropdown-toggle:hover {
  background: linear-gradient(135deg, #e6faf6 0%, #f1f5f9 100%);
}
.hw-brgy-dropdown-toggle:focus-visible {
  outline: 2px solid var(--hw-primary);
  outline-offset: -2px;
  border-radius: var(--hw-radius-xl);
}

/* Icon container */
.hw-brgy-dropdown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(1.5rem, 4vw, 1.75rem);
  height: clamp(1.5rem, 4vw, 1.75rem);
  background: var(--hw-100);
  border-radius: var(--hw-radius-md);
  color: var(--hw-600);
  flex-shrink: 0;
}

/* Label */
.hw-brgy-dropdown-label {
  flex: 1;
  min-width: 0;
  font-size: clamp(.8125rem, 1.8vw, .875rem);
  font-weight: 700;
  color: var(--hw-800);
  letter-spacing: .01em;
}

/* Count badge */
.hw-brgy-dropdown-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 .375rem;
  background: var(--hw-600);
  color: #fff;
  border-radius: var(--hw-radius-full);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

/* Chevron */
.hw-brgy-dropdown-chevron {
  color: var(--hw-400);
  flex-shrink: 0;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.hw-brgy-dropdown.open .hw-brgy-dropdown-chevron {
  transform: rotate(180deg);
}

/* ── Collapsible list ──────────────────────────────────────────── */
.hw-brgy-dropdown-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s cubic-bezier(.4,0,.2,1);
}

.hw-brgy-dropdown-inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.25rem, .8vw, .375rem);
  padding: clamp(.5rem, 1.5vw, .75rem) clamp(.75rem, 2vw, 1rem);
  border-top: 1px solid var(--hw-card-bd);
}

/* ── Responsive refinements ────────────────────────────────────── */
/* Small phones — full-width badges for touch targets */
@media (max-width: 359px) {
  .hw-brgy-dropdown-inner {
    flex-direction: column;
  }
  .hw-brgy-dropdown-inner .hw-brgy-badge {
    width: 100%;
    justify-content: center;
  }
}

/* Tablets and up — slightly more padding */
@media (min-width: 768px) {
  .hw-brgy-dropdown-toggle {
    padding: clamp(.5rem, 1vw, .625rem) clamp(1rem, 2vw, 1.25rem);
  }
  .hw-brgy-dropdown-inner {
    padding: clamp(.625rem, 1.5vw, .875rem) clamp(1rem, 2vw, 1.25rem);
  }
}

/* Large screens — constrain max width for readability */
@media (min-width: 1200px) {
  .hw-brgy-dropdown {
    max-width: 100%;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .hw-brgy-dropdown {
    border-width: 2px;
  }
  .hw-brgy-dropdown-toggle {
    background: var(--hw-surface);
  }
}

/* Print — expand by default */
@media print {
  .hw-brgy-dropdown-list {
    max-height: none !important;
    overflow: visible;
  }
  .hw-brgy-dropdown-chevron { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hw-brgy-dropdown-chevron,
  .hw-brgy-dropdown-list {
    transition: none;
  }
}

/* ================================================================
   HW AUDIT TRAIL
   ================================================================ */

.hw-audit-item {
  background: #f8fafc;
  border-radius: var(--hw-radius-md);
  padding: clamp(.4375rem, 1.2vw, .5625rem) clamp(.625rem, 1.5vw, .875rem);
  margin-bottom: .375rem;
  font-size: .8125rem;
  border-left: 3px solid var(--hw-400);
}
.hw-audit-label { font-weight: 600; color: var(--neutral-600, #475569); }
.hw-audit-val   { color: var(--neutral-500, #64748b); }

/* ================================================================
   HW CONTROLS BAR (table info + actions)
   ================================================================ */

.hw-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
  font-size: .8125rem;
  color: var(--neutral-500, #64748b);
  flex-wrap: wrap;
  gap: .5rem;
}

/* ================================================================
   HW PAGINATION
   ================================================================ */

.hw-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .25rem;
  padding: .75rem clamp(.875rem, 2.5vw, 1.25rem);
  border-top: 1px solid #f1f5f9;
}

.hw-page-btn {
  min-width: clamp(30px, 4vw, 34px);
  height: clamp(30px, 4vw, 34px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hw-card-bd);
  border-radius: var(--hw-radius-md);
  background: var(--hw-surface);
  font-size: .8125rem;
  color: var(--neutral-600, #475569);
  cursor: pointer;
  transition: background .1s, border-color .1s, color .1s;
}
.hw-page-btn:hover:not(.active):not(:disabled) {
  background: var(--hw-50);
  border-color: var(--hw-400);
  color: var(--hw-700);
}
.hw-page-btn.active {
  background: var(--hw-600);
  border-color: var(--hw-600);
  color: #fff;
  font-weight: 700;
}
.hw-page-btn:disabled { opacity: .4; cursor: not-allowed; }

@media (max-width: 767px) {
  .hw-page-btn { min-width: 38px; height: 38px; }
}

/* ================================================================
   HW SEARCH BAR  — Dark themed for dashboard intelligence
   ================================================================ */

.hw-search-bar {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: var(--hw-radius-lg);
  padding: clamp(.875rem, 2.5vw, 1.125rem) clamp(.875rem, 2.5vw, 1.25rem);
  border: 1px solid rgba(255,255,255,.08);
  position: relative;
}

.hw-search-bar-header {
  display: flex;
  align-items: center;
  gap: clamp(5px, 1.2vw, 8px);
  margin-bottom: clamp(.625rem, 1.5vw, .75rem);
  flex-wrap: wrap;
}

.hw-search-bar-title {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hw-search-bar-badge {
  font-size: .625rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 8px;
  background: rgba(13,148,136,.25);
  color: #5eead4;
  letter-spacing: .04em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ================================================================
   HW RESPONSIVE — Mobile-first layout switches
   ================================================================ */

/* Default: table visible, cards hidden */
.hw-table-wrap  { display: block; }
.hw-card-list   { display: none; }

/* On mobile: hide table, show cards */
@media (max-width: 767px) {
  .hw-table-wrap  { display: none; }
  .hw-card-list   { display: flex; }

  .hw-filter-select,
  .hw-search-input { font-size: 16px !important; min-height: 44px; }

  .hw-pheader-actions { display: none; } /* hide header actions on mobile */
}

@media (min-width: 768px) {
  .hw-card-list { display: none !important; }
}

/* Fluid container width */
@media (min-width: 640px) {
  .hw-ann-list { max-width: 100%; }
}
@media (min-width: 768px) {
  .hw-ann-list { max-width: 740px; }
}
@media (min-width: 1024px) {
  .hw-ann-list { max-width: 780px; }
}
@media (min-width: 1280px) {
  .hw-ann-list { max-width: 820px; }
}

/* ================================================================
   HW RESPONSIVE STAT GRID
   ================================================================ */

@media (max-width: 479px) {
  .hw-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .hw-stat-number { font-size: 1.25rem; }
  .hw-stat-icon { width: 28px; height: 28px; }
  .hw-stat-icon svg { width: 14px; height: 14px; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .hw-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .hw-stats-grid { gap: 1rem; }
}

/* ================================================================
   HW ACCESSIBILITY & PRINT
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .hw-detail-panel,
  .hw-overlay,
  .hw-ann-card,
  .hw-row-card,
  .hw-stat-card { transition: none !important; }
  .hw-spinner { animation-duration: 1.5s; }
}

@media (prefers-contrast: high) {
  .hw-card,
  .hw-stat-card,
  .hw-table-wrap,
  .hw-filter-bar { border-width: 2px; border-color: #000; }
  .hw-detail-panel { border-left: 3px solid #000; }
}

@media (forced-colors: active) {
  .hw-badge, .hw-sym, .hw-chip.active { border: 1px solid ButtonText; }
  .hw-tab.active { border-bottom-width: 3px; }
}

@media print {
  .sw-navbar,
  .hw-filter-bar,
  .hw-controls-bar,
  .hw-pagination,
  .hw-overlay,
  .hw-detail-panel { display: none !important; }

  .hw-card,
  .hw-stat-card { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
  body { background: #fff !important; }
}

/* ================================================================
   HW RESPONSIVE FINE-TUNING
   ================================================================ */

/* xs: tiny phones */
@media (max-width: 359px) {
  .hw-tab { padding: 9px 10px; font-size: .75rem; }
  .hw-chip { padding: 5px 8px; font-size: .75rem; }
  .hw-stat-number { font-size: 1.125rem; }
  .hw-ann-card-title { font-size: .8125rem; }
  .hw-pheader-title { font-size: 1rem; }
}

/* sm: 360–479px */
@media (min-width: 360px) and (max-width: 479px) {
  .hw-chip { min-height: 36px; }
  .hw-tab { min-height: 44px; }
}

/* Touch coarse: larger tap targets */
@media (hover: none) and (pointer: coarse) {
  .hw-tab, .hw-chip, .hw-page-btn, .hw-detail-close { min-height: 44px; min-width: 44px; }
  .hw-search-input, .hw-filter-select { font-size: 16px !important; }
  .hw-table tbody tr:hover { background: transparent; }
  .hw-table tbody tr:active { background: var(--hw-50); }
}

/* Large screens: wider panels */
@media (min-width: 992px) {
  .hw-detail-panel { width: 460px; }
}
@media (min-width: 1200px) {
  .hw-detail-panel { width: 500px; }
}

/* ================================================================
   HW UTILITY  — Extra utilities specific to HW portal
   ================================================================ */

.hw-text-teal    { color: var(--hw-600); }
.hw-text-muted   { color: var(--neutral-500, #64748b); }
.hw-bg-teal-soft { background: var(--hw-50); }
.hw-border-teal  { border-color: var(--hw-200) !important; }

.hw-divider {
  border: none;
  border-top: 1px solid #f1f5f9;
  margin: clamp(.75rem, 2vw, 1rem) 0;
}

/* Content spacing after navbar */
.hw-main {
  padding-top: clamp(1rem, 3vw, 1.5rem);
  padding-bottom: clamp(2rem, 5vw, 3rem);
}

/* Section title within a page (below header) */
.hw-section-label {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--neutral-400, #94a3b8);
  margin-bottom: .5rem;
}

/* View detail button */
.hw-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: none;
  border-radius: var(--hw-radius-md);
  background: var(--hw-600);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.hw-view-btn:hover { background: var(--hw-700); }

/* Approve button */
.hw-approve-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: none;
  border-radius: var(--hw-radius-md);
  background: #16a34a;
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.hw-approve-btn:hover { background: #15803d; }

/* Reject button */
.hw-reject-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: 1px solid #fca5a5;
  border-radius: var(--hw-radius-md);
  background: transparent;
  color: #b91c1c;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.hw-reject-btn:hover { background: #fef2f2; border-color: #ef4444; }

/* Print button */
.hw-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 1px solid var(--hw-card-bd);
  border-radius: var(--hw-radius-md);
  background: var(--hw-surface);
  color: var(--neutral-600, #475569);
  font-size: .8125rem;
  cursor: pointer;
  transition: background .15s;
}
.hw-print-btn:hover { background: var(--hw-surface-2); }

/* Login page specific */
.hw-login-body {
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(160deg, #f0fdfa 0%, #e6f7f5 40%, #ecfdf5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2rem) clamp(.75rem, 3vw, 1.5rem);
}

/* ================================================================
   ENHANCED FLUID LAYOUT & RESPONSIVE DESIGN SYSTEM
   Mobile-first approach with granular breakpoints
   ISO/IEC 25010 — Usability (Operability): optimized for all devices
   ISO/IEC 25002 — Efficiency: fluid proportions reduce scrolling
   ================================================================ */

/* ── xs: Ultra-small (< 360px) — Compact everything ────────── */
@media (max-width: 359px) {
  .hw-pheader { padding: clamp(.75rem, 3vw, 1rem) 0; }
  .hw-pheader-title { font-size: clamp(.9375rem, 5vw, 1.125rem); }
  .hw-pheader-sub { font-size: .75rem; }
  .hw-pheader-eyebrow { font-size: .5625rem; }

  .hw-filter-bar { padding: .5rem .625rem; }
  .hw-filter-row { gap: .25rem; }
  .hw-filter-group { width: 100%; }
  .hw-filter-select { width: 100%; }
  .hw-search-input { min-width: 100%; }

  .hw-card-header { flex-direction: column; align-items: flex-start; gap: .375rem; }
  .hw-card-body { padding: .625rem; }

  .hw-detail-panel { width: 100vw; }
  .hw-detail-body { padding: .75rem; }
  .hw-detail-grid { grid-template-columns: 1fr; gap: .375rem; }

  .hw-row-card { padding: .5rem .625rem; }
  .hw-row-card-title { font-size: .8125rem; }
  .hw-row-card-meta { font-size: .625rem; }

  .hw-ann-card { padding: .625rem; }
  .hw-ann-card-icon { width: 28px; height: 28px; }
  .hw-ann-card-title { font-size: .8125rem; }
  .hw-ann-card-preview { font-size: .75rem; -webkit-line-clamp: 2; }

  .hw-pagination { gap: .125rem; }
  .hw-page-btn { min-width: 32px; min-height: 32px; font-size: .6875rem; padding: .25rem .375rem; }

  .hw-empty { padding: 1.5rem .75rem; }
  .hw-empty-icon { width: 40px; height: 40px; }
}

/* ── sm: Small phones (360px – 479px) ──────────────────────── */
@media (min-width: 360px) and (max-width: 479px) {
  .hw-filter-group { flex-wrap: wrap; }
  .hw-filter-select { flex: 1; min-width: calc(50% - .25rem); }
  .hw-search-input { width: 100%; }

  .hw-stats-grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .hw-stat-card { padding: .75rem .625rem; }
  .hw-stat-number { font-size: 1.25rem; }
  .hw-stat-label { font-size: .5625rem; }

  .hw-detail-panel { width: 100vw; }
}

/* ── sm-md: Small-medium (480px – 599px) ──────────────────── */
@media (min-width: 480px) and (max-width: 599px) {
  .hw-stats-grid { grid-template-columns: repeat(3, 1fr); gap: .625rem; }
  .hw-detail-panel { width: min(420px, 92vw); }
  .hw-detail-grid { grid-template-columns: repeat(2, 1fr); }

  .hw-filter-row { flex-wrap: wrap; }
  .hw-filter-group { flex: 0 0 auto; }
  .hw-search-input { min-width: 180px; }

  .hw-ann-list { max-width: 100%; }
}

/* ── md: Medium (600px – 767px) ────────────────────────────── */
@media (min-width: 600px) and (max-width: 767px) {
  .hw-stats-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
  .hw-stat-card { padding: 1rem .875rem; }

  .hw-detail-panel { width: min(460px, 85vw); }
  .hw-detail-grid { grid-template-columns: repeat(2, 1fr); }

  .hw-filter-bar { padding: .75rem 1rem; }
  .hw-filter-row { gap: .5rem; }

  .hw-card-header { padding: .875rem 1rem; }
  .hw-card-body { padding: 1rem; }

  .hw-ann-card { padding: .875rem; }
  .hw-ann-card-top { gap: .75rem; }
}

/* ── lg: Tablet (768px – 1023px) ───────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .hw-stats-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .875rem; }
  .hw-stat-card { padding: 1rem; }

  .hw-detail-panel { width: min(480px, 60vw); }

  .hw-filter-bar { padding: .75rem 1.125rem; }
  .hw-filter-select { min-width: 140px; }

  .hw-table thead th { padding: .625rem .875rem; }
  .hw-table tbody td { padding: .625rem .875rem; }

  .hw-card-body { padding: 1.125rem; }
}

/* ── xl: Desktop (1024px – 1279px) ─────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hw-stats-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
  .hw-detail-panel { width: 480px; }

  .hw-table thead th { padding: .625rem 1rem; }
  .hw-table tbody td { padding: .625rem 1rem; }
}

/* ── 2xl: Large desktop (1280px – 1535px) ──────────────────── */
@media (min-width: 1280px) and (max-width: 1535px) {
  .hw-stats-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .hw-detail-panel { width: 520px; }
}

/* ── 3xl: Ultra-wide (1536px+) ─────────────────────────────── */
@media (min-width: 1536px) {
  .hw-stats-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .hw-detail-panel { width: 560px; }
  .hw-ann-list { max-width: 860px; }

  .hw-table { font-size: .875rem; }
  .hw-table thead th { padding: .75rem 1.125rem; }
  .hw-table tbody td { padding: .75rem 1.125rem; }
}

/* ── Landscape orientation (mobile) ────────────────────────── */
@media (max-width: 767px) and (orientation: landscape) {
  .hw-pheader { padding: .5rem 0; }
  .hw-pheader-title { font-size: clamp(1rem, 3vw, 1.25rem); }
  .hw-stats-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .hw-stat-card { padding: .625rem .5rem; }

  .hw-detail-panel { width: min(420px, 55vw); }
}

/* ── Safe area insets (notched phones) ─────────────────────── */
@supports (padding: max(0px)) {
  .hw-pheader-inner {
    padding-left: max(var(--space-4, 1rem), env(safe-area-inset-left));
    padding-right: max(var(--space-4, 1rem), env(safe-area-inset-right));
  }
  .hw-filter-bar {
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right));
  }
  .hw-detail-body {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

/* ── Fluid date/time display — prevent overflow on small screens ── */
[data-pht] {
  display: inline;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── Balanced stat card heights via stretch ── */
.hw-stats-grid { align-items: stretch; }
.hw-stat-card { display: flex; flex-direction: column; justify-content: center; }
.hw-stat-card--row { flex-direction: row; align-items: center; }

/* ── Balanced filter row alignment ── */
.hw-filter-row { align-items: center; }
.hw-filter-group { align-items: center; }

/* ── Prevent text/icon overlap ── */
.hw-ann-card-content { overflow: hidden; }
.hw-ann-card-title { overflow: hidden; text-overflow: ellipsis; }
.hw-row-card-title { overflow: hidden; text-overflow: ellipsis; }
.hw-stat-label { overflow: hidden; text-overflow: ellipsis; }
.hw-pheader-title { overflow: hidden; text-overflow: ellipsis; }
.hw-detail-title { overflow: hidden; text-overflow: ellipsis; }

/* ── Ensure icon + text never overlap ── */
.hw-stat-card--row .hw-stat-icon { flex-shrink: 0; }
.hw-ann-card-icon { flex-shrink: 0; }
.hw-brgy-badge svg { flex-shrink: 0; }
.hw-badge svg { flex-shrink: 0; }
.hw-chip svg { flex-shrink: 0; }
.hw-tab svg { flex-shrink: 0; }

/* ── Even card/row spacing across breakpoints ── */
.hw-card-list > * + * { margin-top: 0; }  /* gap handles spacing */
.hw-ann-list > * + * { margin-top: 0; }

/* ── Balanced pagination ── */
.hw-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(.25rem, .8vw, .375rem);
  padding: clamp(.5rem, 1.5vw, .75rem) 0;
}

/* ================================================================
   SIGN-OUT CONFIRMATION MODAL
   ISO/IEC 25010 — User Error Protection: explicit two-step
     confirmation prevents accidental sign-out.
   ISO/IEC 25010 — Interaction Capability > Accessibility:
     focus-trapped, keyboard-navigable, WCAG AA contrast.
   ISO/IEC 25002 — Satisfaction: clear feedback before session end.
   Mobile-first fluid layout — adapts via %, max-width, clamp().
   ================================================================ */
.hw-signout-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(15, 23, 42, 0.45);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.hw-signout-overlay.show { display: flex; }

.hw-signout-dialog {
  background: var(--hw-surface, #fff);
  border-radius: var(--hw-radius-lg, 0.75rem);
  box-shadow: var(--hw-shadow-lg, 0 8px 28px rgba(15,22,48,.11));
  width: 100%;
  max-width: 22rem;
  padding: clamp(1rem, 4vw, 1.5rem);
  animation: hwSignoutIn 0.15s ease-out;
}
@keyframes hwSignoutIn {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.hw-signout-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #fef2f2;
  color: #dc2626;
  margin: 0 auto clamp(0.625rem, 2vw, 0.875rem);
}

.hw-signout-title {
  font-size: clamp(0.875rem, 2.8vw, 1rem);
  font-weight: 700;
  color: var(--neutral-900, #0f172a);
  text-align: center;
  margin-bottom: 0.25rem;
}

.hw-signout-msg {
  font-size: clamp(0.6875rem, 2vw, 0.8125rem);
  color: var(--neutral-500, #64748b);
  text-align: center;
  line-height: 1.55;
  margin-bottom: clamp(1rem, 3vw, 1.25rem);
}

.hw-signout-actions {
  display: flex;
  gap: 0.5rem;
}
.hw-signout-actions button {
  flex: 1;
  min-height: clamp(2.25rem, 6vw, 2.5rem);
  border-radius: var(--hw-radius-md, 0.5rem);
  font-size: clamp(0.75rem, 2.2vw, 0.8125rem);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.hw-signout-btn-cancel {
  background: var(--hw-surface, #fff);
  border: 1px solid var(--neutral-200, #e2e8f0);
  color: var(--neutral-600, #475569);
}
.hw-signout-btn-cancel:hover {
  background: var(--neutral-50, #f8fafc);
  border-color: var(--neutral-300, #cbd5e1);
}
.hw-signout-btn-cancel:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.hw-signout-btn-confirm {
  background: #dc2626;
  border: none;
  color: #fff;
}
.hw-signout-btn-confirm:hover {
  background: #b91c1c;
}
.hw-signout-btn-confirm:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.3);
}

/* Responsive: stacked buttons on very small screens */
@media (max-width: 359px) {
  .hw-signout-dialog { padding: 0.875rem; }
  .hw-signout-actions { flex-direction: column-reverse; }
}
/* Touch-friendly tap targets */
@media (hover: none) and (pointer: coarse) {
  .hw-signout-actions button { min-height: 2.75rem; }
}