/* ==========================================================================
   MODSCALE HR · Components
   Buttons, cards, tables, badges, toasts, modals, empty states, pagination.
   ========================================================================== */

/* ---- Buttons ----------------------------------------------------------- */
.ms-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-2);
  padding: 9px 18px;
  border-radius: var(--ms-radius-sm);
  border: 1px solid transparent;
  font-size: var(--ms-text-base);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ms-fast), border-color var(--ms-fast),
              color var(--ms-fast), box-shadow var(--ms-fast);
}
.ms-btn:hover { text-decoration: none; }
.ms-btn:active { transform: translateY(0.5px); }
.ms-btn:disabled, .ms-btn.is-loading { opacity: .55; pointer-events: none; }
.ms-btn svg { width: 16px; height: 16px; flex: none; }

.ms-btn--primary {
  background: var(--ms-brass);
  border-color: var(--ms-brass);
  color: var(--ms-brass-ink);
  font-weight: 600;
}
.ms-btn--primary:hover { background: var(--ms-brass-hover); border-color: var(--ms-brass-hover); }

/* Dark button — the CRM's EXPORT / IMPORT treatment on a dark bar */
.ms-btn--dark {
  background: var(--ms-shell-raised);
  border-color: var(--ms-shell-raised);
  color: var(--ms-sand);
}
.ms-btn--dark:hover { background: var(--ms-shell); border-color: var(--ms-shell); }

.ms-btn--ghost {
  background: var(--ms-card);
  border-color: var(--ms-line-strong);
  color: var(--ms-ink);
}
.ms-btn--ghost:hover { border-color: var(--ms-brass); color: var(--ms-brass-deep); }

.ms-btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--ms-muted);
  padding-inline: 10px;
}
.ms-btn--quiet:hover { background: var(--ms-sunken); color: var(--ms-ink); }

.ms-btn--danger {
  background: var(--ms-card);
  border-color: var(--ms-stop-line);
  color: var(--ms-stop);
}
.ms-btn--danger:hover { background: var(--ms-stop); border-color: var(--ms-stop); color: #fff; }

.ms-btn--sm { padding: 6px 12px; font-size: var(--ms-text-sm); }
.ms-btn--lg { padding: 12px 26px; font-size: var(--ms-text-md); }
.ms-btn--block { display: flex; width: 100%; justify-content: center; }
.ms-btn--icon { padding: 8px; }
.ms-btn--icon svg { width: 17px; height: 17px; }

/* Spinner shown while a fetch is in flight. */
.ms-btn.is-loading { position: relative; color: transparent !important; }
.ms-btn.is-loading::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: currentColor;
  animation: ms-spin .6s linear infinite;
}
.ms-btn--primary.is-loading::after { color: var(--ms-brass-ink); }
.ms-btn--ghost.is-loading::after, .ms-btn--quiet.is-loading::after { color: var(--ms-brass-deep); }
@keyframes ms-spin { to { transform: rotate(360deg); } }

/* ---- Cards ------------------------------------------------------------- */
.ms-card {
  background: var(--ms-card);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow-sm);
}
.ms-card__head {
  display: flex; align-items: center; gap: var(--ms-3);
  padding: var(--ms-4) var(--ms-5);
  border-bottom: 1px solid var(--ms-line-soft);
}
.ms-card__head h2, .ms-card__head h3 { font-size: var(--ms-text-md); font-family: var(--ms-font-body); font-weight: 600; }
.ms-card__actions { margin-left: auto; display: flex; gap: var(--ms-2); }
.ms-card__body { padding: var(--ms-5); }
.ms-card__body--flush { padding: 0; }
.ms-card__foot {
  padding: var(--ms-3) var(--ms-5);
  border-top: 1px solid var(--ms-line-soft);
  background: var(--ms-card-alt);
  border-radius: 0 0 var(--ms-radius) var(--ms-radius);
  font-size: var(--ms-text-sm);
  color: var(--ms-muted);
}

/* ---- Stat tiles (dashboard) -------------------------------------------- */
.ms-stats { display: grid; gap: var(--ms-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.ms-stat {
  background: var(--ms-card);
  border: 1px solid var(--ms-line);
  border-top: 2px solid var(--ms-brass);
  border-radius: var(--ms-radius);
  padding: var(--ms-4) var(--ms-5) var(--ms-5);
  box-shadow: var(--ms-shadow-sm);
  min-width: 0;
}
.ms-stat__label {
  font-family: var(--ms-font-mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ms-muted);
  display: block;
  margin-bottom: var(--ms-2);
}
.ms-stat__value {
  font-family: var(--ms-font-display);
  font-size: var(--ms-text-2xl);
  color: var(--ms-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ms-stat__meta { font-size: var(--ms-text-xs); color: var(--ms-muted); margin-top: var(--ms-2); }
.ms-stat--dark {
  background: var(--ms-shell-raised);
  border-color: var(--ms-shell-raised);
  border-top-color: var(--ms-brass);
}
.ms-stat--dark .ms-stat__label { color: var(--ms-shell-muted); }
.ms-stat--dark .ms-stat__value { color: var(--ms-sand); }
.ms-stat--dark .ms-stat__meta  { color: var(--ms-shell-muted); }

.ms-stat--ok   { border-top-color: var(--ms-ok); }
.ms-stat--warn { border-top-color: var(--ms-warn); }
.ms-stat--stop { border-top-color: var(--ms-stop); }
.ms-stat--info { border-top-color: var(--ms-info); }

/* ---- Badges ------------------------------------------------------------ */
.ms-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--ms-radius-pill);
  font-size: var(--ms-text-xs);
  font-weight: 500;
  line-height: 1.6;
  border: 1px solid;
  white-space: nowrap;
}
.ms-badge::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none;
}
.ms-badge--ok      { color: var(--ms-ok);      background: var(--ms-ok-bg);      border-color: var(--ms-ok-line); }
.ms-badge--warn    { color: var(--ms-warn);    background: var(--ms-warn-bg);    border-color: var(--ms-warn-line); }
.ms-badge--stop    { color: var(--ms-stop);    background: var(--ms-stop-bg);    border-color: var(--ms-stop-line); }
.ms-badge--info    { color: var(--ms-info);    background: var(--ms-info-bg);    border-color: var(--ms-info-line); }
.ms-badge--neutral { color: var(--ms-neutral); background: var(--ms-neutral-bg); border-color: var(--ms-neutral-line); }
.ms-badge--plain::before { display: none; }

/* ---- Avatar ------------------------------------------------------------ */
.ms-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ms-brass-wash);
  color: var(--ms-brass-deep);
  display: grid; place-items: center;
  font-size: var(--ms-text-sm);
  font-weight: 600;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--ms-brass-line);
  text-transform: uppercase;
}
.ms-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ms-avatar--sm { width: 26px; height: 26px; font-size: 10.5px; }
.ms-avatar--lg { width: 76px; height: 76px; font-size: var(--ms-text-xl); }
.ms-avatar--shell { background: var(--ms-shell-deep); color: var(--ms-brass-lit); border-color: var(--ms-shell-line); }

/* ---- Tables ------------------------------------------------------------ */
.ms-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ms-table { width: 100%; border-collapse: collapse; font-size: var(--ms-text-base); }
.ms-table th, .ms-table td { padding: 11px var(--ms-4); text-align: left; vertical-align: middle; }
.ms-table thead th {
  font-family: var(--ms-font-mono);
  font-size: 10.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ms-muted);
  font-weight: 400;
  background: var(--ms-card-alt);
  border-bottom: 1px solid var(--ms-line);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
  letter-spacing: .13em;
}
.ms-table tbody tr { border-bottom: 1px solid var(--ms-line-soft); }
.ms-table tbody tr:last-child { border-bottom: 0; }
.ms-table tbody tr:hover { background: var(--ms-paper); }
.ms-table td.ms-num, .ms-table th.ms-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Sortable header */
.ms-table th[data-sort] { cursor: pointer; user-select: none; }
.ms-table th[data-sort]:hover { color: var(--ms-ink); }
.ms-table th[data-sort]::after {
  content: "↕"; margin-left: 6px; opacity: .3; font-size: 10px;
}
.ms-table th[data-sort][aria-sort="ascending"]::after  { content: "↑"; opacity: 1; color: var(--ms-brass-deep); }
.ms-table th[data-sort][aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--ms-brass-deep); }

.ms-table__person { display: flex; align-items: center; gap: var(--ms-3); min-width: 0; }
.ms-table__person strong { display: block; color: var(--ms-ink); font-weight: 500; }
.ms-table__person small { display: block; color: var(--ms-muted); font-size: var(--ms-text-xs); }

.ms-row-actions { display: flex; gap: 2px; justify-content: flex-end; }

/* Mobile: each row becomes a card, headers move into ::before labels. */
@media (max-width: 760px) {
  .ms-table--stack thead { display: none; }
  .ms-table--stack tbody tr {
    display: block;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    margin-bottom: var(--ms-3);
    padding: var(--ms-2) var(--ms-3);
    background: var(--ms-card);
  }
  .ms-table--stack tbody tr:hover { background: var(--ms-card); }
  .ms-table--stack td {
    display: flex;
    justify-content: space-between;
    gap: var(--ms-4);
    padding: 7px 0;
    border-bottom: 1px dotted var(--ms-line-soft);
    text-align: right;
  }
  .ms-table--stack td:last-child { border-bottom: 0; }
  .ms-table--stack td::before {
    content: attr(data-label);
    font-family: var(--ms-font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ms-muted);
    text-align: left;
    flex: none;
  }
  .ms-table--stack td.ms-td-wide { display: block; text-align: left; }
  .ms-table--stack td.ms-td-wide::before { display: block; margin-bottom: 4px; }
  .ms-row-actions { justify-content: flex-end; }
}

/* ---- Toolbar above a table --------------------------------------------- */
.ms-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ms-2);
  padding: var(--ms-3) var(--ms-4);
  border-bottom: 1px solid var(--ms-line-soft);
  background: var(--ms-card);
  border-radius: var(--ms-radius) var(--ms-radius) 0 0;
}
.ms-toolbar__search { position: relative; flex: 1 1 220px; min-width: 180px; max-width: 340px; }
.ms-toolbar__search .ms-input { padding-left: 34px; }
.ms-toolbar__search svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ms-faint); pointer-events: none;
}
.ms-toolbar .ms-select { width: auto; min-width: 140px; }
.ms-toolbar__end { margin-left: auto; display: flex; gap: var(--ms-2); flex-wrap: wrap; }

/* ---- Pagination -------------------------------------------------------- */
.ms-pager {
  display: flex; align-items: center; gap: var(--ms-2); flex-wrap: wrap;
  padding: var(--ms-3) var(--ms-4);
  border-top: 1px solid var(--ms-line-soft);
  font-size: var(--ms-text-sm);
  color: var(--ms-muted);
}
.ms-pager__pages { margin-left: auto; display: flex; gap: 3px; }
.ms-pager__page {
  min-width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-card);
  color: var(--ms-body);
  font-size: var(--ms-text-sm);
  font-variant-numeric: tabular-nums;
  padding: 0 8px;
}
.ms-pager__page:hover { border-color: var(--ms-brass); color: var(--ms-brass-deep); text-decoration: none; }
.ms-pager__page[aria-current="page"] {
  background: var(--ms-brass-deep); border-color: var(--ms-brass-deep); color: #fff;
}
.ms-pager__page.is-disabled { opacity: .4; pointer-events: none; }

/* ---- Empty state ------------------------------------------------------- */
.ms-empty { padding: var(--ms-12) var(--ms-6); text-align: center; }
.ms-empty svg { width: 42px; height: 42px; color: var(--ms-line-strong); margin: 0 auto var(--ms-4); }
.ms-empty h3 { font-size: var(--ms-text-md); font-family: var(--ms-font-body); font-weight: 600; margin-bottom: 6px; }
.ms-empty p { color: var(--ms-muted); max-width: 46ch; margin: 0 auto var(--ms-4); }

/* ---- Alerts ------------------------------------------------------------ */
.ms-alert {
  display: flex; gap: var(--ms-3);
  padding: var(--ms-3) var(--ms-4);
  border: 1px solid;
  border-radius: var(--ms-radius);
  font-size: var(--ms-text-base);
  margin-bottom: var(--ms-4);
  line-height: 1.55;
}
.ms-alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ms-alert--ok    { color: var(--ms-ok);   background: var(--ms-ok-bg);   border-color: var(--ms-ok-line); }
.ms-alert--warn  { color: var(--ms-warn); background: var(--ms-warn-bg); border-color: var(--ms-warn-line); }
.ms-alert--error { color: var(--ms-stop); background: var(--ms-stop-bg); border-color: var(--ms-stop-line); }
.ms-alert--info  { color: var(--ms-info); background: var(--ms-info-bg); border-color: var(--ms-info-line); }
.ms-alert strong { color: inherit; }
.ms-alert ul { margin: 6px 0 0; padding-left: 18px; }

/* ---- Toasts ------------------------------------------------------------ */
.ms-toasts {
  position: fixed;
  right: var(--ms-5); bottom: var(--ms-5);
  z-index: var(--ms-z-toast);
  display: flex; flex-direction: column; gap: var(--ms-2);
  max-width: min(380px, calc(100vw - 40px));
  pointer-events: none;
}
.ms-toast {
  pointer-events: auto;
  display: flex; gap: var(--ms-3); align-items: flex-start;
  background: var(--ms-shell);
  color: var(--ms-shell-text);
  border-left: 3px solid var(--ms-brass);
  border-radius: var(--ms-radius-sm);
  padding: var(--ms-3) var(--ms-4);
  box-shadow: var(--ms-shadow-lg);
  font-size: var(--ms-text-base);
  animation: ms-toast-in var(--ms-normal) ease-out;
}
.ms-toast--ok    { border-left-color: #6FA97C; }
.ms-toast--error { border-left-color: #CE7C6E; }
.ms-toast--warn  { border-left-color: #D9AC5E; }
.ms-toast__close { background: none; border: 0; color: var(--ms-shell-muted); margin-left: auto; padding: 0 2px; }
.ms-toast__close:hover { color: #fff; }
@keyframes ms-toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 560px) {
  .ms-toasts { left: var(--ms-4); right: var(--ms-4); bottom: var(--ms-4); max-width: none; }
}

/* ---- Modal ------------------------------------------------------------- */
.ms-modal {
  position: fixed; inset: 0;
  z-index: var(--ms-z-modal);
  display: grid; place-items: center;
  padding: var(--ms-4);
  background: rgba(20, 17, 16, .55);
  animation: ms-fade var(--ms-fast) ease-out;
}
@keyframes ms-fade { from { opacity: 0; } }
.ms-modal__panel {
  background: var(--ms-card);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-lg);
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ms-modal__panel--wide { width: min(860px, 100%); }
.ms-modal__head {
  padding: var(--ms-5) var(--ms-5) var(--ms-3);
  border-bottom: 1px solid var(--ms-line-soft);
}
.ms-modal__head h2 { font-size: var(--ms-text-lg); }
.ms-modal__body { padding: var(--ms-5); overflow-y: auto; }
.ms-modal__foot {
  padding: var(--ms-4) var(--ms-5);
  border-top: 1px solid var(--ms-line-soft);
  display: flex; gap: var(--ms-2); justify-content: flex-end;
  background: var(--ms-card-alt);
}

/* ---- Tabs -------------------------------------------------------------- */
.ms-tabs {
  display: flex; gap: var(--ms-1);
  border-bottom: 1px solid var(--ms-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.ms-tabs::-webkit-scrollbar { display: none; }
.ms-tab {
  padding: 10px var(--ms-4);
  border: 0; background: none;
  border-bottom: 2px solid transparent;
  color: var(--ms-muted);
  font-size: var(--ms-text-base);
  white-space: nowrap;
  text-decoration: none;
}
.ms-tab:hover { color: var(--ms-ink); text-decoration: none; }
.ms-tab.is-active { color: var(--ms-brass-deep); border-bottom-color: var(--ms-brass); font-weight: 500; }

/* ---- Definition list (profile fields) ---------------------------------- */
.ms-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--ms-4) var(--ms-6); }
.ms-dl > div { min-width: 0; }
.ms-dl dt {
  font-family: var(--ms-font-mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ms-muted); margin-bottom: 3px;
}
.ms-dl dd { margin: 0; color: var(--ms-ink); word-break: break-word; }

/* ---- Divider / section label ------------------------------------------- */
.ms-divider {
  display: flex; align-items: center; gap: var(--ms-3);
  margin: var(--ms-6) 0 var(--ms-4);
}
.ms-divider::after { content: ""; flex: 1; height: 1px; background: var(--ms-line); }
.ms-divider span {
  font-family: var(--ms-font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ms-muted);
}

/* ---- Dropdown ---------------------------------------------------------- */
.ms-dropdown { position: relative; }
.ms-dropdown__menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 200px;
  background: var(--ms-card);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow-lg);
  padding: var(--ms-1);
  z-index: var(--ms-z-dropdown);
}
.ms-dropdown__item {
  display: flex; align-items: center; gap: var(--ms-2);
  width: 100%;
  padding: 8px 12px;
  border: 0; background: none;
  border-radius: var(--ms-radius-sm);
  color: var(--ms-body);
  font-size: var(--ms-text-base);
  text-align: left;
  text-decoration: none;
}
.ms-dropdown__item:hover { background: var(--ms-sunken); color: var(--ms-ink); text-decoration: none; }
.ms-dropdown__item--danger { color: var(--ms-stop); }
.ms-dropdown__sep { height: 1px; background: var(--ms-line-soft); margin: var(--ms-1) 0; }

/* ---- Progress / meter --------------------------------------------------- */
.ms-meter {
  height: 6px; background: var(--ms-sunken);
  border-radius: var(--ms-radius-pill); overflow: hidden;
}
.ms-meter__fill {
  height: 100%; background: var(--ms-brass);
  border-radius: inherit; transition: width var(--ms-normal);
}
.ms-meter__fill--ok   { background: var(--ms-ok); }
.ms-meter__fill--warn { background: var(--ms-warn); }
.ms-meter__fill--stop { background: var(--ms-stop); }

/* ---- Auth screens (login, reset, setup) --------------------------------- */
.ms-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--ms-shell);
}
.ms-auth__aside {
  padding: var(--ms-12) var(--ms-10);
  color: var(--ms-shell-text);
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(176, 141, 79, .16), transparent 62%),
    var(--ms-shell);
  border-right: 1px solid var(--ms-shell-line);
}
.ms-auth__aside h1 {
  font-family: var(--ms-font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  color: var(--ms-shell-text);
  max-width: 15ch;
  line-height: 1.12;
}
.ms-auth__aside p { color: var(--ms-shell-muted); max-width: 42ch; margin-top: var(--ms-4); font-weight: 300; }
.ms-auth__points { list-style: none; padding: 0; margin: var(--ms-8) 0 0; display: grid; gap: var(--ms-3); }
.ms-auth__points li {
  display: flex; gap: var(--ms-3); align-items: baseline;
  color: var(--ms-shell-muted); font-size: var(--ms-text-base);
}
.ms-auth__points b { color: var(--ms-brass-lit); font-family: var(--ms-font-mono); font-size: 11px; }

.ms-auth__main {
  background: var(--ms-paper);
  display: grid; place-items: center;
  padding: var(--ms-8) var(--ms-6);
}
.ms-auth__panel { width: min(400px, 100%); }
.ms-auth__panel h2 { font-size: var(--ms-text-xl); margin-bottom: 6px; }
.ms-auth__panel > p { color: var(--ms-muted); margin-bottom: var(--ms-6); }

@media (max-width: 900px) {
  .ms-auth { grid-template-columns: minmax(0, 1fr); }
  .ms-auth__aside { padding: var(--ms-8) var(--ms-6) var(--ms-6); }
  .ms-auth__aside h1 { font-size: var(--ms-text-2xl); }
  .ms-auth__points { display: none; }
}

/* ---- Setup wizard steps ------------------------------------------------- */
.ms-steps { display: flex; gap: 0; margin-bottom: var(--ms-8); flex-wrap: wrap; }
.ms-step {
  display: flex; align-items: center; gap: var(--ms-2);
  padding-right: var(--ms-4); margin-right: var(--ms-4);
  border-right: 1px solid var(--ms-line);
  font-size: var(--ms-text-sm); color: var(--ms-faint);
}
.ms-step:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.ms-step__n {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ms-line-strong);
  font-family: var(--ms-font-mono); font-size: 11px;
}
.ms-step.is-active { color: var(--ms-ink); font-weight: 500; }
.ms-step.is-active .ms-step__n { background: var(--ms-brass-deep); border-color: var(--ms-brass-deep); color: #fff; }
.ms-step.is-done { color: var(--ms-ok); }
.ms-step.is-done .ms-step__n { background: var(--ms-ok-bg); border-color: var(--ms-ok-line); color: var(--ms-ok); }

/* ---- Utilities ---------------------------------------------------------- */
.ms-stack   { display: flex; flex-direction: column; gap: var(--ms-4); }
.ms-stack-2 { display: flex; flex-direction: column; gap: var(--ms-2); }
.ms-row     { display: flex; align-items: center; gap: var(--ms-3); flex-wrap: wrap; }
.ms-row--tight { gap: var(--ms-2); }
.ms-spacer  { margin-left: auto; }
.ms-mt-4 { margin-top: var(--ms-4); }
.ms-mt-6 { margin-top: var(--ms-6); }
.ms-mb-4 { margin-bottom: var(--ms-4); }
.ms-mb-6 { margin-bottom: var(--ms-6); }

/* ---- Charts (hand-drawn SVG, see assets/js/modules/charts.js) ----------- */
.ms-chart { width: 100%; min-height: 60px; }
.ms-chart svg { display: block; max-width: 100%; overflow: visible; }
.ms-chart svg text { font-family: var(--ms-font-body); }
.ms-chart rect[fill] { transition: opacity var(--ms-fast); }
.ms-chart svg:hover rect[fill]:hover,
.ms-chart svg:hover path[stroke]:hover { opacity: .82; }

/* ---- Attendance calendar ------------------------------------------------ */
.ms-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.ms-cal__head {
  font-family: var(--ms-font-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ms-muted); text-align: center; padding-bottom: 6px;
}
.ms-cal__cell {
  position: relative;
  aspect-ratio: 1 / .82;
  min-height: 46px;
  border: 1px solid var(--ms-line-soft);
  border-radius: var(--ms-radius-sm);
  padding: 5px 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--ms-card);
}
.ms-cal__cell--empty { border: 0; background: none; }
.ms-cal__num { font-size: 12px; color: var(--ms-body); font-variant-numeric: tabular-nums; }
.ms-cal__time {
  font-family: var(--ms-font-mono); font-size: 10px;
  color: var(--ms-muted); margin-top: auto;
}
.ms-cal__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .55; margin-top: auto;
}
.ms-cal__flag {
  position: absolute; top: 4px; right: 5px;
  font-family: var(--ms-font-mono); font-size: 8.5px;
  color: var(--ms-warn); font-weight: 500;
}
.ms-cal__cell.is-today { box-shadow: inset 0 0 0 2px var(--ms-brass); }
.ms-cal__cell.is-future { opacity: .45; }

.ms-cal__cell--present  { background: var(--ms-ok-bg);      border-color: var(--ms-ok-line);      color: var(--ms-ok); }
.ms-cal__cell--half_day { background: var(--ms-warn-bg);    border-color: var(--ms-warn-line);    color: var(--ms-warn); }
.ms-cal__cell--absent   { background: var(--ms-stop-bg);    border-color: var(--ms-stop-line);    color: var(--ms-stop); }
.ms-cal__cell--leave    { background: var(--ms-info-bg);    border-color: var(--ms-info-line);    color: var(--ms-info); }
.ms-cal__cell--holiday  { background: var(--ms-brass-wash); border-color: var(--ms-brass-line);   color: var(--ms-brass-deep); }
.ms-cal__cell--week_off { background: var(--ms-sunken);     border-color: var(--ms-line);         color: var(--ms-muted); }
.ms-cal__cell--not_marked { border-style: dashed; }

.ms-cal__legend {
  display: flex; flex-wrap: wrap; gap: var(--ms-4);
  margin-top: var(--ms-5); padding-top: var(--ms-4);
  border-top: 1px solid var(--ms-line-soft);
  font-size: var(--ms-text-xs); color: var(--ms-muted);
}
.ms-cal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.ms-cal__swatch { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.ms-cal__swatch--present  { background: var(--ms-ok-bg);      border: 1px solid var(--ms-ok-line); }
.ms-cal__swatch--half_day { background: var(--ms-warn-bg);    border: 1px solid var(--ms-warn-line); }
.ms-cal__swatch--absent   { background: var(--ms-stop-bg);    border: 1px solid var(--ms-stop-line); }
.ms-cal__swatch--leave    { background: var(--ms-info-bg);    border: 1px solid var(--ms-info-line); }
.ms-cal__swatch--holiday  { background: var(--ms-brass-wash); border: 1px solid var(--ms-brass-line); }
.ms-cal__swatch--week_off { background: var(--ms-sunken);     border: 1px solid var(--ms-line); }

@media (max-width: 560px) {
  .ms-cal { gap: 3px; }
  .ms-cal__cell { min-height: 38px; padding: 3px 4px; }
  .ms-cal__num { font-size: 11px; }
  .ms-cal__time { display: none; }

  /* Two-up stat cards on a phone. This lives here rather than in base.css
     because the auto-fit rule above is in this file and would otherwise win
     on source order alone — same specificity, later in the cascade. At
     one-up, four cards are most of a screen's scrolling before the page's
     real content begins. */
  .ms-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ms-3); }
}

/* ---- Daily register grid ------------------------------------------------ */
.ms-mark-group { display: inline-flex; border: 1px solid var(--ms-line-strong); border-radius: var(--ms-radius-sm); overflow: hidden; }
.ms-mark-group input { position: absolute; opacity: 0; pointer-events: none; }
.ms-mark-group label {
  padding: 5px 9px; font-size: var(--ms-text-xs); cursor: pointer;
  border-right: 1px solid var(--ms-line-soft); background: var(--ms-card);
  color: var(--ms-muted); white-space: nowrap; user-select: none;
}
.ms-mark-group label:last-of-type { border-right: 0; }
.ms-mark-group label:hover { background: var(--ms-sunken); color: var(--ms-ink); }
.ms-mark-group input:checked + label { background: var(--ms-brass-deep); color: #fff; font-weight: 500; }
.ms-mark-group input:focus-visible + label { outline: 2px solid var(--ms-brass); outline-offset: -2px; }

/* ---- Leave request timeline -------------------------------------------- */
.ms-leave-bar {
  height: 5px; border-radius: var(--ms-radius-pill);
  background: var(--ms-line); overflow: hidden; margin-top: 5px;
}
.ms-leave-bar > i { display: block; height: 100%; border-radius: inherit; }

/* ---- Recruitment pipeline ------------------------------------------------ */
.ms-pipeline { display: flex; gap: 2px; flex-wrap: wrap; }
.ms-pipeline__step {
  flex: 1 1 110px; min-width: 96px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px;
  background: var(--ms-card-alt);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-sm);
  text-decoration: none;
  transition: background var(--ms-fast), border-color var(--ms-fast);
}
.ms-pipeline__step:hover { background: var(--ms-brass-wash); border-color: var(--ms-brass-line); text-decoration: none; }
.ms-pipeline__n {
  font-family: var(--ms-font-display); font-size: var(--ms-text-xl);
  color: var(--ms-ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.ms-pipeline__label {
  font-family: var(--ms-font-mono); font-size: 9.5px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ms-muted);
}

/* ---- Star rating --------------------------------------------------------- */
.ms-stars { display: inline-flex; gap: 2px; }
.ms-stars i { width: 13px; height: 13px; color: var(--ms-line-strong); }
.ms-stars i.is-on { color: var(--ms-brass); }
.ms-rating-input { display: inline-flex; gap: 4px; }
.ms-rating-input input { position: absolute; opacity: 0; pointer-events: none; }
.ms-rating-input label {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--ms-line-strong); border-radius: var(--ms-radius-sm);
  cursor: pointer; font-size: var(--ms-text-sm); background: var(--ms-card);
  color: var(--ms-muted);
}
.ms-rating-input label:hover { border-color: var(--ms-brass); color: var(--ms-ink); }
.ms-rating-input input:checked + label {
  background: var(--ms-brass); border-color: var(--ms-brass);
  color: var(--ms-brass-ink); font-weight: 600;
}
.ms-rating-input input:focus-visible + label { outline: 2px solid var(--ms-brass); outline-offset: 2px; }

/* ---- Inline label (filter bars) ------------------------------------------ */
.ms-inline-label { display: inline-flex; align-items: center; gap: var(--ms-2); min-width: 0; }
.ms-inline-label > span {
  font-size: var(--ms-text-sm); color: var(--ms-muted); white-space: nowrap;
}

/* ---- Monthly attendance sheet --------------------------------------------------
   A dense grid: one row per person, one narrow cell per day. Sized so a
   31-day month fits a laptop screen without horizontal scrolling, and
   scrolls inside its own wrapper on a phone rather than moving the page. */
.ms-sheet {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: var(--ms-text-xs);
  width: max-content;
  min-width: 100%;
}
.ms-sheet th, .ms-sheet td { padding: 0; }

.ms-sheet__name {
  position: sticky; left: 0; z-index: 2;
  background: var(--ms-card);
  text-align: left; font-weight: 500; white-space: nowrap;
  padding: 4px 10px 4px 4px; min-width: 165px;
  border-right: 1px solid var(--ms-line);
}
.ms-sheet__name a { color: var(--ms-ink); }
.ms-sheet__name a:hover { color: var(--ms-brass-deep); }
.ms-sheet__code {
  display: block; font-family: var(--ms-font-mono);
  font-size: 10px; color: var(--ms-muted); letter-spacing: .04em;
}

.ms-sheet__day {
  width: 24px; min-width: 24px;
  font-weight: 500; color: var(--ms-muted);
  font-variant-numeric: tabular-nums; line-height: 1.25; padding-bottom: 3px;
}
.ms-sheet__day.is-off { color: var(--ms-brass-deep); }
.ms-sheet__dow { display: block; font-size: 9px; opacity: .65; text-transform: uppercase; }

.ms-sheet__cell {
  width: 24px; height: 24px;
  text-align: center; vertical-align: middle;
  border-radius: 3px;
  font-weight: 600; font-size: 10px; letter-spacing: -.02em;
  color: var(--ms-ink);
  background: var(--ms-card-alt);
  cursor: default;
}
.ms-sheet__cell--present { background: #DCEBD8; color: #2C5226; }
.ms-sheet__cell--late    { background: #FAE6C0; color: #7A5313; }
.ms-sheet__cell--half    { background: #F5E2B8; color: #6B4E12; }
.ms-sheet__cell--absent  { background: #F2D3CE; color: #7E2F22; }
.ms-sheet__cell--leave   { background: #D9E3F0; color: #274268; }
.ms-sheet__cell--off     { background: var(--ms-card-alt); color: var(--ms-muted); }
.ms-sheet__cell--holiday { background: var(--ms-brass-wash); color: var(--ms-brass-deep); }
.ms-sheet__cell--blank   { background: transparent; color: var(--ms-line-strong); }

.ms-sheet__total {
  width: 30px; min-width: 30px; text-align: center;
  font-weight: 600; color: var(--ms-muted);
  border-left: 1px solid var(--ms-line);
}

/* The legend chip is a <span>, not a <td>, so it cannot inherit the cell's
   table sizing — it needs its own box. Tone modifiers are shared. */
.ms-sheet__key {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 3px;
  font-weight: 600; font-size: 10px; letter-spacing: -.02em;
  background: var(--ms-card-alt); color: var(--ms-ink);
}

/* ---- Document vault --------------------------------------------------------
   The vault sits in a 1.7fr column beside the upload form, and a pending row
   carries four actions. Left on one line they push the table past its wrapper
   and Approve ends up behind a horizontal scrollbar — the one control the page
   exists for. They wrap instead, and the Size column gives up its space. */
.ms-table--docs .ms-row-actions {
  flex-wrap: wrap;
  row-gap: 2px;
  justify-content: flex-end;
  max-width: 122px;
  margin-left: auto;
}
.ms-table--docs td[data-label="Size"],
.ms-table--docs td[data-label="Uploaded"] { width: 1%; white-space: nowrap; }

/* ---- Document vault --------------------------------------------------------
   The document's own name has to survive a narrow card: without a floor on
   this column the title and the rejection note wrap to one word a line and
   the row grows to the height of a paragraph. */
.ms-table--docs td.ms-td-wide { min-width: 168px; }

/* The reason a document was sent back. It is a sentence written to the
   employee, so it gets a block of its own rather than being appended to the
   grey metadata line where it reads as a filename. */
.ms-doc-note {
  margin: 6px 0 0;
  padding: 6px 9px;
  border-left: 2px solid var(--ms-stop-line);
  border-radius: 0 var(--ms-radius-sm) var(--ms-radius-sm) 0;
  background: var(--ms-stop-bg);
  color: var(--ms-stop);
  font-size: var(--ms-text-xs);
  line-height: 1.5;
  max-width: 42ch;
}

/* ---- Document review panel -------------------------------------------------
   Opens as a full row under the document it concerns, so the file name, the
   type and whose it is stay on screen while the reason is written. */
.ms-reject__cell {
  background: var(--ms-card-alt);
  padding: var(--ms-3) var(--ms-4) var(--ms-4) !important;
  text-align: left;
}
.ms-reject__cell .ms-label { margin-bottom: 4px; }
.ms-reject__cell textarea { max-width: 560px; }

/* ---- Migration output ------------------------------------------------------ */
.ms-migrate__out {
  background: var(--ms-shell);
  color: var(--ms-shell-text);
  font-family: var(--ms-font-mono);
  font-size: 12px; line-height: 1.65;
  padding: var(--ms-4);
  border-radius: var(--ms-radius-sm);
  overflow-x: auto;
  white-space: pre;
  margin: 0;
  max-height: 60vh; overflow-y: auto;
}

/* ==========================================================================
   WHERE A PUNCH HAPPENED
   A small chip under a check-in or check-out time: the work location it was
   matched to, how far from that location's pin, and how precise the device
   claimed to be. The name is the link — it opens the coordinates in a map.
   ========================================================================== */
.ms-place {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px;
  margin-top: 3px;
  font-size: var(--ms-text-xs);
  font-variant-numeric: normal;
}
.ms-place__link {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--ms-brass-deep); text-decoration: none;
  /* A map link in a dense table is still a tap target on a phone. */
  padding: 2px 0; min-height: 22px;
}
.ms-place__link:hover, .ms-place__link:focus-visible { text-decoration: underline; }
.ms-place__link svg { flex: none; }
.ms-place__meta { color: var(--ms-muted); }

/* Not an error, and not styled as one. A punch with no location is ordinary —
   an HR correction, a browser with location switched off — but it is a fact
   the page should state rather than leave as an empty cell. */
.ms-place--none {
  color: var(--ms-faint);
  font-style: italic;
}

/* Near or away from the assigned office. Not a pass/fail — being away is an
   ordinary working day — so "away" is stated in a neutral slate rather than
   the red the eye reads as an error. */
.ms-place__badge {
  font-family: var(--ms-font-mono);
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--ms-radius-pill);
  white-space: nowrap; font-weight: 500;
}
.ms-place__badge--near { background: var(--ms-ok-bg);   color: var(--ms-ok); }
.ms-place__badge--away { background: var(--ms-sunken);  color: var(--ms-muted); border: 1px solid var(--ms-line-strong); }

/* One punch on its own line in the daily register: direction, distance,
   verdict, map link. Stacked rather than inline because check-in and check-out
   are separate events and reading them as one run-on line is how "in at the
   office, out from a site" gets misread as a single place. */
.ms-place--stack { margin-top: 0; }
.ms-place__dir {
  font-family: var(--ms-font-mono);
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ms-faint);
  min-width: 18px;
}

/* The exact stored coordinates, shown as the record rather than as a label.
   Monospaced so two punches can be compared digit by digit, and tabular so
   they line up when stacked. */
.ms-place__coords {
  font-family: var(--ms-font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--ms-faint);
  white-space: nowrap;
}

/* A punch that WAS located, shown to somebody not entitled to the coordinates.
   Deliberately different from "Location not recorded": one says the fact is
   withheld, the other says it does not exist, and conflating them would tell
   a manager their team never uses GPS. */
.ms-place--masked {
  color: var(--ms-muted);
  font-size: var(--ms-text-xs);
}

/* ---- Document thumbnails + image lightbox (v1.4.1) ---------------------- */
.ms-doc-cell { display: flex; align-items: flex-start; gap: 12px; }
.ms-doc-main { min-width: 0; flex: 1 1 auto; }
.ms-doc-thumb {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--ms-line); background: var(--ms-paper); display: block;
}
.ms-doc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-doc-thumb:hover, .ms-doc-thumb:focus-visible { outline: 2px solid var(--ms-brass); outline-offset: 1px; }

.ms-lightbox {
  position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column;
  background: rgba(28, 21, 15, 0.94);
}
.ms-lightbox__bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  color: #F7F2E8; background: rgba(0, 0, 0, 0.35);
}
.ms-lightbox__title {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--ms-text-sm);
}
.ms-lightbox__bar .ms-btn { color: #F7F2E8; background: transparent; border-color: rgba(247, 242, 232, 0.35); }
.ms-lightbox__bar .ms-btn:hover { background: rgba(247, 242, 232, 0.12); }
.ms-lightbox__stage {
  flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 16px; cursor: zoom-out;
}
.ms-lightbox__stage img {
  max-width: 100%; max-height: 100%; object-fit: contain; cursor: default;
  border-radius: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); background: #fff;
}