/* ---------------------------------------------------------------------
   ProfMuski HR — Hubstaff-style design system
   Sidebar + topbar SaaS dashboard shell. Single source of truth for
   every screen in the app — do not fork one-off styles per page.
--------------------------------------------------------------------- */

:root {
  /* Brand */
  --hs-green: #17b48e;
  --hs-green-dark: #0e9678;
  --hs-green-tint: #e6f7f3;

  /* Neutrals */
  --hs-bg: #f4f6f8;
  --hs-surface: #ffffff;
  --hs-border: #e6e9ee;
  --hs-text: #1d2433;
  --hs-text-muted: #1d2433;
  --hs-text-faint: #1d2433;

  /* Semantic status colors */
  --hs-success: #17b48e;
  --hs-success-tint: #e6f7f3;
  --hs-warning: #b45309;
  --hs-warning-tint: #fef3e2;
  --hs-danger: #b42318;
  --hs-danger-tint: #fee4e2;
  --hs-info: #175cd3;
  --hs-info-tint: #eff4ff;
  --hs-neutral: #4b5565;
  --hs-neutral-tint: #f1f3f5;

  --hs-radius-sm: 6px;
  --hs-radius: 10px;
  --hs-sidebar-width: 210px;
  --hs-topbar-height: 64px;
}

/* ---------------------------------------------------------------------
   Dark mode — applied automatically when the OS is in dark mode (unless
   the user explicitly chose light via the toggle), or unconditionally
   once the user explicitly chooses dark. See the toggle script in
   base.html/public_base.html for how data-theme gets set/persisted.
--------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hs-green-tint: rgba(23, 180, 142, 0.16);
    --hs-bg: #10151c;
    --hs-surface: #181f28;
    --hs-border: #2a323d;
    --hs-text: #e8ecf1;
    --hs-text-muted: #e8ecf1;
    --hs-text-faint: #e8ecf1;

    --hs-success-tint: rgba(23, 180, 142, 0.16);
    --hs-warning-tint: rgba(180, 83, 9, 0.2);
    --hs-danger-tint: rgba(180, 35, 24, 0.2);
    --hs-info-tint: rgba(23, 92, 211, 0.2);
    --hs-neutral-tint: rgba(255, 255, 255, 0.06);
  }
}
:root[data-theme="dark"] {
  --hs-green-tint: rgba(23, 180, 142, 0.16);
  --hs-bg: #10151c;
  --hs-surface: #181f28;
  --hs-border: #2a323d;
  --hs-text: #e8ecf1;
  --hs-text-muted: #e8ecf1;
  --hs-text-faint: #e8ecf1;

  --hs-success-tint: rgba(23, 180, 142, 0.16);
  --hs-warning-tint: rgba(180, 83, 9, 0.2);
  --hs-danger-tint: rgba(180, 35, 24, 0.2);
  --hs-info-tint: rgba(23, 92, 211, 0.2);
  --hs-neutral-tint: rgba(255, 255, 255, 0.06);
}

* { box-sizing: border-box; }
html { background: var(--hs-bg); }
body { transition: background-color 0.15s ease, color 0.15s ease; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--hs-bg);
  color: var(--hs-text);
  line-height: 1.5;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--hs-green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; color: var(--hs-text); margin: 0 0 4px; }

/* ---------------------------------------------------------------------
   App shell: sidebar + topbar + content
--------------------------------------------------------------------- */

.hs-shell { display: flex; min-height: 100vh; }

.hs-sidebar {
  width: var(--hs-sidebar-width);
  flex-shrink: 0;
  background: var(--hs-surface);
  border-right: 1px solid var(--hs-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 10;
  transition: width 0.18s ease;
}

.hs-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 14px 14px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--hs-text);
}
.hs-sidebar__brand .hs-logo-mark {
  width: 26px; height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}
.hs-brand-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.hs-collapse-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  margin-left: auto;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-sm);
  background: var(--hs-surface);
  color: var(--hs-text-faint);
  cursor: pointer;
  flex-shrink: 0;
}
.hs-collapse-toggle:hover { color: var(--hs-text); background: var(--hs-bg); }
.hs-collapse-toggle svg { width: 15px; height: 15px; transition: transform 0.18s ease; }

.hs-nav { flex: 1; padding: 8px 12px; overflow-y: auto; }
.hs-nav__section-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--hs-text-faint); padding: 14px 12px 6px;
}
.hs-nav__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 2px;
  border-radius: var(--hs-radius-sm);
  color: var(--hs-text);
  font-weight: 500;
}
.hs-nav__item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
.hs-nav__item:hover { background: var(--hs-bg); text-decoration: none; color: var(--hs-text); }
.hs-nav__item.is-active {
  background: var(--hs-green-tint);
  color: var(--hs-green-dark);
  font-weight: 600;
}
.hs-nav__item.is-active svg { opacity: 1; }
.hs-nav__badge {
  margin-left: auto;
  background: var(--hs-danger);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}

.hs-sidebar__footer {
  border-top: 1px solid var(--hs-border);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.hs-sidebar__footer-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hs-sidebar__footer .hs-avatar { flex-shrink: 0; }
.hs-sidebar__footer .hs-user-meta { flex: 1; min-width: 0; }
.hs-sidebar__footer .hs-user-name {
  font-weight: 600; font-size: 0.85rem; color: var(--hs-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-sidebar__footer .hs-user-role {
  font-size: 0.72rem; color: var(--hs-text-faint); text-transform: capitalize;
}
.hs-sidebar__footer a.hs-logout {
  color: var(--hs-text-faint);
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: var(--hs-radius-sm);
  font-size: 0.82rem; font-weight: 500;
}
.hs-sidebar__footer a.hs-logout:hover { color: var(--hs-danger); background: var(--hs-bg); text-decoration: none; }
.hs-sidebar__footer a.hs-logout svg { width: 18px; height: 18px; flex-shrink: 0; }

.hs-main { flex: 1; margin-left: var(--hs-sidebar-width); min-width: 0; display: flex; flex-direction: column; transition: margin-left 0.18s ease; }

/* ---------------------------------------------------------------------
   Collapsible sidebar (desktop only — mobile already has its own
   off-canvas drawer via the hamburger button, so this is scoped above
   the 900px breakpoint to avoid the two interacting).
--------------------------------------------------------------------- */

@media (min-width: 901px) {
  :is(.hs-shell.is-sidebar-collapsed, html.hs-preload-collapsed) .hs-sidebar { width: 64px; }
  :is(.hs-shell.is-sidebar-collapsed, html.hs-preload-collapsed) .hs-main { margin-left: 64px; }

  :is(.hs-shell.is-sidebar-collapsed, html.hs-preload-collapsed) .hs-sidebar__brand {
    flex-direction: column; gap: 10px; padding: 18px 0 14px;
  }
  :is(.hs-shell.is-sidebar-collapsed, html.hs-preload-collapsed) .hs-brand-name { display: none; }
  :is(.hs-shell.is-sidebar-collapsed, html.hs-preload-collapsed) .hs-collapse-toggle { margin-left: 0; }

  :is(.hs-shell.is-sidebar-collapsed, html.hs-preload-collapsed) .hs-nav__section-label { display: none; }
  :is(.hs-shell.is-sidebar-collapsed, html.hs-preload-collapsed) .hs-nav__item {
    justify-content: center; padding: 10px 0; position: relative;
  }
  :is(.hs-shell.is-sidebar-collapsed, html.hs-preload-collapsed) .hs-nav__label { display: none; }
  :is(.hs-shell.is-sidebar-collapsed, html.hs-preload-collapsed) .hs-nav__badge {
    position: absolute; top: 4px; right: 10px; margin-left: 0;
  }

  /* Tooltip: the label re-appears as a floating chip on hover, since it's
     otherwise not visible anywhere in the collapsed rail. */
  :is(.hs-shell.is-sidebar-collapsed, html.hs-preload-collapsed) .hs-nav__item:hover .hs-nav__label {
    display: block;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 12px;
    background: var(--hs-text);
    color: var(--hs-surface);
    padding: 6px 10px;
    border-radius: var(--hs-radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 60;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.18);
    pointer-events: none;
  }

  :is(.hs-shell.is-sidebar-collapsed, html.hs-preload-collapsed) .hs-sidebar__footer { justify-content: center; }
  :is(.hs-shell.is-sidebar-collapsed, html.hs-preload-collapsed) .hs-sidebar__footer .hs-user-meta,
  :is(.hs-shell.is-sidebar-collapsed, html.hs-preload-collapsed) .hs-sidebar__footer a.hs-logout { display: none; }

  :is(.hs-shell.is-sidebar-collapsed, html.hs-preload-collapsed) .hs-collapse-toggle svg { transform: rotate(180deg); }
}

.hs-topbar {
  height: var(--hs-topbar-height);
  background: var(--hs-surface);
  border-bottom: 1px solid var(--hs-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  position: sticky; top: 0; z-index: 5;
}
.hs-topbar__title { font-size: 1.15rem; font-weight: 600; color: var(--hs-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hs-topbar__actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

.hs-content { padding: 28px; width: 100%; }
.hs-content.is-flush { padding: 0; }
.hs-content.is-flush > .messages { margin: 12px 16px 0; }

/* ---------------------------------------------------------------------
   Avatar
--------------------------------------------------------------------- */

.hs-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--hs-green-tint); color: var(--hs-green-dark);
  font-weight: 700; font-size: 0.8rem; flex-shrink: 0;
}
.hs-avatar--sm { width: 26px; height: 26px; font-size: 0.68rem; }
.hs-avatar--md { width: 48px; height: 48px; font-size: 1rem; }
.hs-avatar--lg { width: 84px; height: 84px; font-size: 1.6rem; }
img.hs-avatar { object-fit: cover; }

.hs-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hs-profile-trigger { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; }
.hs-profile-form { padding: 14px; }
.hs-profile-avatar-row { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.hs-profile-avatar-btn { cursor: pointer; display: inline-block; }
.hs-profile-avatar-remove {
  display: block; margin-top: 8px;
  background: none; border: none; cursor: pointer; padding: 0; font: inherit;
  color: var(--hs-danger); font-weight: 600; font-size: 0.8rem;
}
.hs-profile-avatar-remove:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   Cards & page furniture
--------------------------------------------------------------------- */

.card {
  background: var(--hs-surface);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  padding: 22px;
  margin-bottom: 20px;
}
.card + .card { margin-top: 0; }

.hs-modal {
  background: var(--hs-surface);
  color: var(--hs-text);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  padding: 24px;
  width: 100%;
  max-width: 460px;
}
.hs-modal::backdrop { background: rgba(16, 24, 40, 0.45); }
.hs-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hs-modal__header h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.hs-modal__close { background: none; border: none; color: var(--hs-text-faint); font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 4px; }
.hs-modal__close:hover { color: var(--hs-text); }
.hs-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.card__header {
  display: flex; align-items: center; justify-content: space-between;
  margin: -22px -22px 18px; padding: 16px 22px;
  border-bottom: 1px solid var(--hs-border);
}
.card__header h3 { margin: 0; font-size: 0.95rem; }

.hs-page-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; align-items: center; justify-content: space-between; }
.hs-page-actions__buttons { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------------------
   Two-line list rows (primary label + muted meta line beneath)
--------------------------------------------------------------------- */

.hs-row {
  display: flex; align-items: center; gap: 12px;
}
.hs-row__body { min-width: 0; }
.hs-row__title { font-weight: 600; color: var(--hs-text); }
.hs-row__meta { font-size: 0.8rem; color: var(--hs-text-muted); margin-top: 2px; }

/* Bordered row list — same look as a table's tbody rows, without the
   <table> markup that forces horizontal scrolling on narrow phones for
   what's otherwise a short, low-column list (documents, blackout dates). */
.hs-list-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 4px;
  border-bottom: 1px solid var(--hs-border);
}
.hs-list-row:last-child { border-bottom: none; }
.hs-list-row:hover { background: var(--hs-bg); }

.messages { list-style: none; margin: 0 0 20px; padding: 0; }
.messages li {
  padding: 11px 16px;
  border-radius: var(--hs-radius-sm);
  margin-bottom: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  border: 1px solid transparent;
}
.messages .success { background: var(--hs-success-tint); color: var(--hs-green-dark); border-color: #c3ecdf; }
.messages .error { background: var(--hs-danger-tint); color: var(--hs-danger); border-color: #fbcbc5; }
.messages .warning { background: var(--hs-warning-tint); color: var(--hs-warning); border-color: #fce1b6; }
.messages .info { background: var(--hs-info-tint); color: var(--hs-info); border-color: #c7dbfa; }

/* ---------------------------------------------------------------------
   Tables
--------------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 14px; font-size: 0.87rem; }
thead th {
  color: var(--hs-text-faint); font-weight: 600; text-transform: uppercase;
  font-size: 0.68rem; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--hs-border);
  padding-top: 0; padding-bottom: 10px;
}
tbody tr { border-bottom: 1px solid var(--hs-border); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--hs-bg); }
td .hs-row-primary { display: flex; align-items: center; gap: 10px; font-weight: 600; }

/* ---------------------------------------------------------------------
   Badges (status pills) — see core/templatetags/core_extras.py badge_class
--------------------------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--hs-neutral-tint); color: var(--hs-neutral);
}
.badge-success { background: var(--hs-success-tint); color: var(--hs-green-dark); }
.badge-warning { background: var(--hs-warning-tint); color: var(--hs-warning); }
.badge-danger  { background: var(--hs-danger-tint);  color: var(--hs-danger); }
.badge-info    { background: var(--hs-info-tint);    color: var(--hs-info); }
.badge-neutral { background: var(--hs-neutral-tint); color: var(--hs-neutral); }

/* ---------------------------------------------------------------------
   Forms
--------------------------------------------------------------------- */

form.stacked label { display: block; margin: 14px 0 5px; font-size: 0.82rem; font-weight: 600; color: var(--hs-text-muted); }
form.stacked label:first-child { margin-top: 0; }
form.stacked input, form.stacked select, form.stacked textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--hs-surface);
  color: var(--hs-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
form.stacked input:focus, form.stacked select:focus, form.stacked textarea:focus {
  outline: none;
  border-color: var(--hs-green);
  box-shadow: 0 0 0 3px var(--hs-green-tint);
}
form.stacked textarea { resize: vertical; }

/* Disabled/read-only fields are the one place text is intentionally
   de-emphasized — grey is reserved for this inactive state only. */
form.stacked input:disabled, form.stacked select:disabled, form.stacked textarea:disabled,
form.stacked input[readonly] {
  background: var(--hs-neutral-tint);
  color: var(--hs-neutral);
  cursor: not-allowed;
}

form.stacked.stacked--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
form.stacked.stacked--grid .field { margin-bottom: 14px; }
form.stacked.stacked--grid .field label { display: block; margin: 0 0 5px; font-size: 0.82rem; font-weight: 600; color: var(--hs-text-muted); }
form.stacked.stacked--grid .field--full { grid-column: 1 / -1; }
form.stacked.stacked--grid > button[type="submit"],
form.stacked.stacked--grid .hs-modal__actions { grid-column: 1 / -1; }
@media (max-width: 640px) {
  form.stacked.stacked--grid { grid-template-columns: 1fr; }
}

.hs-modal--wide { max-width: 640px; }

.hs-password-wrap { position: relative; }
.hs-password-wrap input { padding-right: 40px !important; }
.hs-password-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 6px; cursor: pointer;
  color: var(--hs-text-faint); display: flex; align-items: center; justify-content: center;
  border-radius: var(--hs-radius-sm);
}
.hs-password-toggle:hover { color: var(--hs-text-muted); background: var(--hs-bg); }
.hs-password-toggle svg { width: 18px; height: 18px; }
.hs-password-toggle .icon-eye-off { display: none; }
.hs-password-toggle.is-visible .icon-eye { display: none; }
.hs-password-toggle.is-visible .icon-eye-off { display: block; }

/* ---------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------- */

.btn, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 18px;
  border-radius: var(--hs-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.87rem;
  font-weight: 600;
  font-family: inherit;
  transition: background-color 0.15s ease;
}
.btn {
  background: var(--hs-green);
  color: #fff;
}
.btn:hover { background: var(--hs-green-dark); text-decoration: none; }
.btn-secondary { background: var(--hs-surface); color: var(--hs-text); border-color: var(--hs-border); }
.btn-secondary:hover { background: var(--hs-bg); }
.btn:disabled, .btn[disabled],
.btn-secondary:disabled, .btn-secondary[disabled] {
  background: var(--hs-neutral-tint);
  color: var(--hs-neutral);
  border-color: transparent;
  cursor: not-allowed;
}
.btn:disabled:hover, .btn-secondary:disabled:hover { background: var(--hs-neutral-tint); }

/* ---------------------------------------------------------------------
   Auth screen (login) — no sidebar shell
--------------------------------------------------------------------- */

.hs-auth-screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--hs-bg);
  padding: 24px;
}
.hs-auth-card {
  width: 100%; max-width: 380px;
  background: var(--hs-surface);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  padding: 36px 32px;
}
.hs-auth-card .hs-sidebar__brand { justify-content: center; padding: 0 0 24px; font-size: 1.2rem; }
.hs-auth-card h2 { text-align: center; margin-bottom: 22px; font-size: 1.1rem; }
.hs-auth-card .btn { width: 100%; margin-top: 20px; padding: 11px; }

.hs-public-page { max-width: 720px; margin: 0 auto; padding: 48px 24px; }

/* ---------------------------------------------------------------------
   Utility
--------------------------------------------------------------------- */

.muted { color: var(--hs-text-muted); font-size: 0.85rem; }
.hs-empty { color: var(--hs-text-muted); font-size: 0.87rem; padding: 8px 0; }

.hs-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 32px 16px; text-align: center;
  color: var(--hs-text-muted); font-size: 0.87rem;
}
.hs-empty-state__icon { width: 34px; height: 34px; color: var(--hs-text-faint); }
.hs-score {
  font-weight: 700; color: var(--hs-green-dark);
}
.hs-reasons { color: var(--hs-text-muted); font-size: 0.82rem; }

/* ---------------------------------------------------------------------
   Conversation thread
--------------------------------------------------------------------- */

.hs-chat { display: flex; flex-direction: column; gap: 14px; }
.hs-bubble-row { display: flex; flex-direction: column; max-width: 68%; }
.hs-bubble-row--out { align-self: flex-end; align-items: flex-end; }
.hs-bubble-row--in { align-self: flex-start; align-items: flex-start; }
.hs-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
.hs-bubble-row--in .hs-bubble { background: var(--hs-bg); border: 1px solid var(--hs-border); border-bottom-left-radius: 4px; }
.hs-bubble-row--out .hs-bubble { background: var(--hs-green-tint); border: 1px solid #c3ecdf; border-bottom-right-radius: 4px; }
.hs-bubble-meta { font-size: 0.72rem; color: var(--hs-text-faint); margin-top: 4px; padding: 0 4px; display: flex; gap: 6px; align-items: center; }

.hs-section-title {
  font-size: 0.7rem; font-weight: 700; margin: 0 0 14px;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--hs-text-faint);
}
.hs-section-title--brand { color: var(--hs-green-dark); }

.hs-scorebar-wrap { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.hs-scorebar { flex: 1; height: 6px; border-radius: 999px; background: var(--hs-bg); overflow: hidden; }
.hs-scorebar__fill { height: 100%; background: var(--hs-green); border-radius: 999px; }

.hs-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.hs-detail-grid > div { background: var(--hs-bg); border: 1px solid var(--hs-border); border-radius: 8px; padding: 10px 12px; }
.hs-detail-grid dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hs-text-faint); font-weight: 700; margin-bottom: 4px; }
.hs-detail-grid dd { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--hs-text); overflow-wrap: anywhere; }
.hs-detail-grid .hs-detail-full { grid-column: 1 / -1; }
.hs-detail-grid .hs-detail-full dd { font-weight: 400; }

.hs-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.hs-card-grid > .card { margin: 0; }

/* ---------------------------------------------------------------------
   Segmented toggle — sliding pill switcher that flips between two panels
   on the same page (Jobs/Shifts, Workers/Agents) without a reload. See
   the .hs-segmented init in core/base.html for the show/hide + slide JS.
--------------------------------------------------------------------- */

.hs-segmented {
  position: relative;
  display: inline-flex;
  background: var(--hs-bg);
  border: 1px solid var(--hs-border);
  border-radius: 999px;
  padding: 3px;
}
.hs-segmented__option {
  position: relative;
  z-index: 1;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 999px;
  color: var(--hs-text);
  transition: color 0.2s ease;
}
.hs-segmented__option.is-active { color: #fff; }
.hs-segmented__thumb {
  position: absolute;
  top: 3px;
  left: 0;
  height: calc(100% - 6px);
  border-radius: 999px;
  background: var(--hs-green);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

/* ---------------------------------------------------------------------
   Hamburger button — hidden on desktop, shown in the topbar below 900px
--------------------------------------------------------------------- */

.hs-hamburger-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-sm);
  background: var(--hs-surface);
  color: var(--hs-text);
  cursor: pointer;
  flex-shrink: 0;
}
.hs-hamburger-btn svg { width: 20px; height: 20px; }

.hs-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-sm);
  background: var(--hs-surface);
  color: var(--hs-text-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.hs-theme-toggle:hover { color: var(--hs-text); background: var(--hs-bg); }
.hs-theme-toggle svg { width: 18px; height: 18px; }
.hs-theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .hs-theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .hs-theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hs-theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .hs-theme-toggle .icon-moon { display: block; }
}
.hs-theme-toggle--floating { position: fixed; top: 16px; right: 16px; z-index: 60; }

.hs-topbar-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  width: 34px; height: 34px;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-sm);
  background: var(--hs-surface);
  color: var(--hs-text-muted);
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}
.hs-topbar-icon-btn:hover { color: var(--hs-text); background: var(--hs-bg); text-decoration: none; }
.hs-topbar-icon-btn svg { width: 18px; height: 18px; }
.hs-topbar-icon-btn.is-active { color: var(--hs-green); border-color: var(--hs-green); background: var(--hs-green-tint); }
.hs-topbar-icon-btn__badge {
  position: absolute; top: -5px; right: -5px;
  background: var(--hs-danger); color: #fff;
  font-size: 0.62rem; font-weight: 700; line-height: 1;
  border-radius: 999px; min-width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

/* ---------------------------------------------------------------------
   Notifications — floating panel anchored under the topbar bell (see
   the .hs-notif-panel init in core/base.html), not its own page.
--------------------------------------------------------------------- */

.hs-notif-wrap { position: relative; }
.hs-notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--hs-surface);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18);
  z-index: 55;
}
.hs-notif-panel[hidden] { display: none; }
.hs-notif-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hs-border);
  position: sticky; top: 0;
  background: var(--hs-surface);
}
.hs-notif-panel__title { font-weight: 700; font-size: 0.85rem; color: var(--hs-text); }
.hs-notif-mark-all { margin: 0; }
.hs-notif-panel__mark-all {
  background: none; border: none; cursor: pointer; font: inherit;
  color: var(--hs-green-dark); font-weight: 600; font-size: 0.78rem;
  padding: 0;
}
.hs-notif-panel__mark-all:hover { text-decoration: underline; }

.hs-notif-panel__empty .hs-empty-state { padding: 40px 20px; }
.notif-list { display: flex; flex-direction: column; padding: 6px; }
.notif-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: var(--hs-radius-sm); text-decoration: none; color: inherit; }

/* ---------------------------------------------------------------------
   Generic small dropdown — anchored under its trigger button, toggled by
   an .is-open class (see the Capabilities dropdown in
   ops_portal/templates/ops_portal/dashboard.html). Same visual language as
   .hs-notif-panel above but sized for a short form rather than a list.
--------------------------------------------------------------------- */

.hs-dropdown { position: relative; display: inline-block; }
.hs-dropdown__panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  max-width: calc(100vw - 32px);
  background: var(--hs-surface);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18);
  padding: 12px;
  z-index: 55;
}
.hs-dropdown__panel.is-open { display: block; }
.notif-row:hover { background: var(--hs-bg); text-decoration: none; }
.notif-dot { width: 30px; height: 30px; font-size: 0.8rem; flex-shrink: 0; }
.notif-dot.is-unread { background: var(--hs-green); color: #fff; }

.hs-sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(16, 24, 40, 0.45);
  z-index: 40;
}

/* ---------------------------------------------------------------------
   Responsive: sidebar becomes an off-canvas drawer below 900px, opened
   via the hamburger button rather than a horizontal-scrolling nav strip
--------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hs-hamburger-btn { display: flex; }

  .hs-sidebar {
    width: 260px;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 50;
  }
  .hs-sidebar.is-open { transform: translateX(0); }

  .hs-sidebar-backdrop.is-open { display: block; }

  .hs-main { margin-left: 0; }
  .hs-content { padding: 16px; }
  .hs-topbar { padding: 0 16px; gap: 12px; }
  .hs-topbar__title { font-size: 1.02rem; }

  /* Cards/forms go full-bleed on phones — explicit desktop max-widths on
     auth/profile cards would otherwise leave awkward side gutters. */
  .card { padding: 16px; }
  .card__header { margin: -16px -16px 14px; padding: 12px 16px; }

  /* Tables scroll horizontally as a unit rather than squeezing columns
     unreadably thin or forcing the whole page to scroll sideways. */
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  th, td { padding: 10px 12px; }

  .hs-bubble-row { max-width: 88%; }
  .hs-detail-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 16px; }
  .hs-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hs-auth-screen { padding: 12px; }
  .hs-auth-card { padding: 26px 20px; max-width: 100%; }
  .hs-page-actions { flex-direction: column; align-items: stretch; }
  .hs-page-actions .btn, .hs-page-actions .btn-secondary { text-align: center; }

  /* A segmented toggle with several options (e.g. the worker dashboard's
     Shifts/Available Jobs/Documents/Availability strip) can outgrow a
     narrow phone screen — scroll it horizontally within its own pill
     rather than letting it overflow the page or wrap awkwardly. */
  .hs-segmented { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hs-segmented::-webkit-scrollbar { display: none; }
  .hs-segmented__option { white-space: nowrap; flex-shrink: 0; padding: 7px 14px; }
}