/* AWL — Bootstrap reskin against design-handoff tokens.
   tokens.css declares the design system; this file maps Bootstrap classes
   (.btn, .card, .form-control, .table, .modal, etc.) onto those tokens so
   existing templates pick up the new look without touching markup. */

:root {
    /* Bootstrap-side overrides → design tokens
       Surface, ink scale, accent (teal), radii, semantic states. */
    --bs-primary: var(--abs-accent);
    --bs-primary-rgb: 26, 164, 207;       /* abs-teal-500 */
    --bs-body-bg: var(--abs-bg);
    --bs-body-color: var(--abs-ink-800);
    --bs-secondary-color: var(--abs-ink-500);
    --bs-border-color: var(--abs-line);
    --bs-border-radius: var(--abs-r-md);
    --bs-border-radius-sm: var(--abs-r-sm);
    --bs-border-radius-lg: var(--abs-r-lg);
    --bs-success: var(--abs-success);
    --bs-danger: var(--abs-danger);
    --bs-warning: var(--abs-warn);
    --bs-info: var(--abs-info);
}

html, body { height: 100%; }

body {
    font-family: var(--abs-font-sans);
    font-size: 13.5px;
    line-height: 1.5;
    background: var(--abs-bg);
    color: var(--abs-ink-800);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--abs-font-display);
    color: var(--abs-ink-900);
    letter-spacing: -0.01em;
    margin: 0;
}
h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 15.5px; font-weight: 600; }
h5 { font-size: 14px; font-weight: 600; }

/* Top bar / navbar
   ─────────────────────────────────────────── */
.container-fluid > .row.border-bottom {
    background: var(--abs-surface);
    border-bottom: 1px solid var(--abs-line) !important;
    box-shadow: var(--abs-shadow-xs);
}
.navbar { background: transparent; padding: 0.4rem 0; }
.navbar-brand { padding-top: 0; padding-bottom: 0; }
.nav-logo { max-height: 38px; }

.navbar-nav .nav-link {
    color: var(--abs-ink-700);
    font-weight: 500;
    font-size: 13.5px;
    padding: 0.5rem 0.85rem !important;
    border-radius: var(--abs-r-sm);
    transition: background 0.12s, color 0.12s;
}
.navbar-nav .nav-link:hover {
    color: var(--abs-ink-900);
    background: var(--abs-bg-soft);
}
.navbar-nav .nav-link.active {
    color: var(--abs-accent-ink);
    background: var(--abs-accent-soft);
}

/* Cards
   ─────────────────────────────────────────── */
.card,
.card.bg-light {
    background: var(--abs-surface) !important;
    border: 1px solid var(--abs-line);
    border-radius: var(--abs-r-lg);
    box-shadow: var(--abs-shadow-sm);
}
.card-body { padding: 24px; }

/* Buttons — map Bootstrap variants onto abs-btn aesthetics
   ─────────────────────────────────────────── */
.btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 550;
    letter-spacing: -0.005em;
    border-radius: var(--abs-r-sm);
    padding: 7px 14px;
    border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.05s;
    white-space: nowrap;
}
.btn:active { transform: translateY(0.5px); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 11px 20px; font-size: 14px; }

.btn-primary {
    background: var(--abs-accent);
    border-color: var(--abs-accent);
    color: var(--abs-on-accent);
    box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, var(--abs-shadow-xs);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--abs-accent-hover) !important;
    border-color: var(--abs-accent-hover) !important;
    color: var(--abs-on-accent) !important;
}

.btn-secondary {
    background: transparent;
    color: var(--abs-ink-700);
    border-color: var(--abs-line);
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background: var(--abs-bg-soft) !important;
    border-color: var(--abs-ink-300) !important;
    color: var(--abs-ink-900) !important;
}

.btn-info {
    background: var(--abs-accent-soft);
    color: var(--abs-accent-ink);
    border-color: transparent;
}
.btn-info:hover, .btn-info:focus, .btn-info:active {
    background: color-mix(in srgb, var(--abs-accent-soft) 60%, var(--abs-accent) 18%) !important;
    color: var(--abs-accent-ink) !important;
    border-color: transparent !important;
}

.btn-danger {
    background: var(--abs-danger);
    border-color: var(--abs-danger);
    color: #fff;
}
.btn-danger:hover, .btn-danger:focus {
    background: #c34553 !important;
    border-color: #c34553 !important;
    color: #fff !important;
}

.btn-success {
    background: var(--abs-success);
    border-color: var(--abs-success);
    color: #fff;
}
.btn-success:hover, .btn-success:focus {
    background: #258a6c !important;
    border-color: #258a6c !important;
    color: #fff !important;
}

.btn-outline-secondary, .btn-outline-danger {
    background: transparent;
    border-color: var(--abs-line);
    color: var(--abs-ink-700);
}
.btn-outline-secondary:hover, .btn-outline-danger:hover {
    background: var(--abs-bg-soft);
    border-color: var(--abs-ink-300);
    color: var(--abs-ink-900);
}
.btn-outline-danger { color: var(--abs-danger); border-color: color-mix(in srgb, var(--abs-danger) 35%, transparent); }
.btn-outline-danger:hover { background: var(--abs-danger-bg); color: #9a2f3a; }

/* Forms
   ─────────────────────────────────────────── */
.form-control, .form-select {
    height: 34px;
    padding: 0 12px;
    border-radius: var(--abs-r-sm);
    border: 1px solid var(--abs-line);
    background: var(--abs-surface);
    font-size: 13px;
    color: var(--abs-ink-800);
    transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
textarea.form-control { height: auto; padding: 10px 12px; }
.form-control:hover, .form-select:hover { border-color: var(--abs-ink-300); }
.form-control:focus, .form-select:focus {
    border-color: var(--abs-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--abs-accent) 18%, transparent);
}
.form-control::placeholder { color: var(--abs-ink-400); }
.form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--abs-ink-700);
    margin-bottom: 0.35rem;
    letter-spacing: 0.01em;
}
.input-group-text {
    background: var(--abs-bg-soft);
    border-color: var(--abs-line);
    color: var(--abs-ink-500);
}
.form-check-input {
    border-color: var(--abs-ink-300);
    border-radius: 4px;
}
.form-check-input:checked {
    background-color: var(--abs-accent);
    border-color: var(--abs-accent);
}
.form-check-input:focus {
    border-color: var(--abs-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--abs-accent) 18%, transparent);
}

/* Tables
   ─────────────────────────────────────────── */
.table {
    --bs-table-bg: transparent;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    font-size: 13px;
}
.table > thead > tr > th {
    text-align: left;
    font-weight: 550;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--abs-ink-500);
    background: var(--abs-bg-soft);
    padding: 14px var(--abs-cell-px);
    border-top: none;
    border-bottom: 1px solid var(--abs-line);
}
.table > thead > tr > th:first-child { border-top-left-radius: var(--abs-r-md); }
.table > thead > tr > th:last-child  { border-top-right-radius: var(--abs-r-md); }
.table > tbody > tr > td {
    padding: var(--abs-cell-py) var(--abs-cell-px);
    vertical-align: middle;
    border-color: var(--abs-line-soft);
    color: var(--abs-ink-800);
    height: var(--abs-row-h);
}
.table > tbody > tr > td:first-child {
    color: var(--abs-ink-900);
    font-weight: 500;
}
.table-hover > tbody > tr:hover > td {
    background: var(--abs-accent-soft);
    color: var(--abs-ink-900);
}
.table > tbody > tr:last-child > td { border-bottom: none; }

tr.patient-row,
tr.appointment-row { cursor: pointer; }

.datatable th { white-space: nowrap; }

/* Row-action buttons in datatables: keep them quiet by default. */
.datatable td:last-child .btn {
    background: transparent;
    border: 1px solid var(--abs-line);
    color: var(--abs-ink-700);
    box-shadow: none;
    font-size: 12.5px;
    padding: 5px 10px;
}
.datatable td:last-child .btn:hover,
.datatable td:last-child .btn:focus {
    background: var(--abs-bg-soft);
    border-color: var(--abs-ink-300);
    color: var(--abs-ink-900);
}
.datatable td:last-child .btn-info {
    background: var(--abs-accent-soft);
    border-color: transparent;
    color: var(--abs-accent-ink);
}
.datatable td:last-child .btn-info:hover {
    background: color-mix(in srgb, var(--abs-accent-soft) 60%, var(--abs-accent) 18%);
    border-color: transparent;
}
.datatable td:last-child .btn-danger {
    background: transparent;
    color: var(--abs-danger);
    border-color: color-mix(in srgb, var(--abs-danger) 35%, transparent);
}
.datatable td:last-child .btn-danger:hover {
    background: var(--abs-danger-bg);
    color: #9a2f3a;
    border-color: color-mix(in srgb, var(--abs-danger) 50%, transparent);
}

/* DataTables chrome reskin
   ─────────────────────────────────────────── */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-size: 13px;
    color: var(--abs-ink-500);
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--abs-ink-500);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}
.dataTables_wrapper .dataTables_length select {
    height: 32px;
    border-radius: var(--abs-r-sm);
    border: 1px solid var(--abs-line);
    padding: 0 28px 0 10px;
    font-size: 13px;
    background-color: var(--abs-surface);
    color: var(--abs-ink-800);
}
.dataTables_wrapper .dataTables_filter input {
    height: 36px;
    border-radius: var(--abs-r-sm);
    border: 1px solid var(--abs-line);
    padding: 0 12px;
    width: 260px;
    margin-left: 0.5rem;
    font-size: 13.5px;
    background: var(--abs-surface);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--abs-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--abs-accent) 18%, transparent);
    outline: none;
}
.dataTables_wrapper .dataTables_info { color: var(--abs-ink-400); padding-top: 1rem; }

.dataTables_wrapper .dataTables_paginate { padding-top: 0.75rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: none !important;
    background: transparent !important;
    color: var(--abs-ink-700) !important;
    padding: 6px 12px !important;
    margin: 0 2px !important;
    border-radius: var(--abs-r-sm) !important;
    font-weight: 500;
    font-size: 13px;
    min-width: 32px;
    text-align: center;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--abs-bg-soft) !important;
    border: none !important;
    color: var(--abs-ink-900) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--abs-accent) !important;
    color: var(--abs-on-accent) !important;
    border: none !important;
    box-shadow: var(--abs-shadow-xs);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--abs-ink-300) !important;
    background: transparent !important;
    cursor: default;
}

/* Badges
   ─────────────────────────────────────────── */
.badge {
    font-weight: 550;
    border-radius: var(--abs-r-pill);
    padding: 2px 8px;
    font-size: 11.5px;
    letter-spacing: 0.01em;
    line-height: 1.5;
}
.badge.bg-secondary {
    background: var(--abs-bg-soft) !important;
    color: var(--abs-ink-700) !important;
}
.badge.bg-success { background: var(--abs-success-bg) !important; color: #1f7256 !important; }
.badge.bg-danger  { background: var(--abs-danger-bg) !important; color: #9a2f3a !important; }
.badge.bg-warning { background: var(--abs-warn-bg) !important; color: #8a5a10 !important; }
.badge.bg-info    { background: var(--abs-accent-soft) !important; color: var(--abs-accent-ink) !important; }

/* Modal
   ─────────────────────────────────────────── */
.modal-content {
    border: none;
    border-radius: var(--abs-r-lg);
    box-shadow: var(--abs-shadow-lg);
    background: var(--abs-surface);
}
.modal-header {
    border-bottom: 1px solid var(--abs-line);
    padding: 18px 24px;
}
.modal-body { padding: 24px; }
.modal-title { font-family: var(--abs-font-display); font-weight: 600; }

/* Alerts / lists
   ─────────────────────────────────────────── */
.alert {
    border-radius: var(--abs-r-sm);
    border: 1px solid transparent;
    padding: 0.85rem 1.1rem;
    font-size: 13.5px;
}
.alert-info {
    background: var(--abs-accent-soft);
    border-color: color-mix(in srgb, var(--abs-accent) 18%, transparent);
    color: var(--abs-accent-ink);
}
.list-group-item {
    border-color: var(--abs-line);
    padding: 12px 16px;
    font-size: 13.5px;
    color: var(--abs-ink-800);
}

/* Patient image
   ─────────────────────────────────────────── */
.patient-image {
    max-width: 200px;
    max-height: 200px;
    object-fit: cover;
    border-radius: var(--abs-r-md);
    box-shadow: var(--abs-shadow-xs);
}

/* Select2 + Flatpickr theme tweaks
   ─────────────────────────────────────────── */
.select2-container--bootstrap-5 .select2-selection {
    border-radius: var(--abs-r-sm);
    min-height: 36px;
    padding: 0.15rem 0.5rem;
    border-color: var(--abs-line);
}
.select2-container--bootstrap-5 .select2-selection:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: var(--abs-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--abs-accent) 18%, transparent);
}
.flatpickr-input.form-control { background: var(--abs-surface); }

/* Borders on the page-header rows in screens: align with token line color */
.row.border-bottom { border-bottom-color: var(--abs-line) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   App shell — side nav (240px) + top bar (60px) + scrolling main
   ───────────────────────────────────────────────────────────────────────── */
.app-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

/* Side nav
   ─────────────────────────────────────────── */
.app-nav {
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--abs-surface);
    border-right: 1px solid var(--abs-line);
    display: flex;
    flex-direction: column;
    padding: 18px 14px 14px;
    gap: 14px;
    overflow-y: auto;
}
.app-nav__brand {
    display: block;
    padding: 4px 8px 12px;
    border-bottom: 1px solid var(--abs-line-soft);
}
.app-nav__brand img {
    display: block;
    max-height: 36px;
    max-width: 100%;
    width: auto;
    height: auto;
}

.app-nav__sections {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    overflow-y: auto;
}
.app-nav__heading {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--abs-ink-400);
    padding: 12px 10px 6px;
}
.app-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--abs-r-sm);
    color: var(--abs-ink-700);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
}
.app-nav__item:hover {
    background: var(--abs-bg-soft);
    color: var(--abs-ink-900);
}
.app-nav__item.is-active {
    background: var(--abs-accent-soft);
    color: var(--abs-accent-ink);
}
.app-nav__item.is-active .app-nav__icon { color: var(--abs-accent); }
.app-nav__icon {
    width: 18px;
    text-align: center;
    color: var(--abs-ink-400);
    font-size: 14px;
}
.app-nav__item--sub {
    padding-left: 38px;
    font-size: 13px;
    color: var(--abs-ink-600);
}
.app-nav__item--pinned { gap: 8px; padding: 5px 8px; font-size: 12.5px; }
.app-nav__pin-avatar {
    width: 22px; height: 22px;
    font-size: 10px;
    background: var(--abs-warn-bg);
    color: #8a5a10;
}

.app-nav__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--abs-r-md);
    background: var(--abs-bg-soft);
    text-decoration: none;
    color: var(--abs-ink-800);
    transition: background 0.12s;
}
.app-nav__user:hover { background: color-mix(in srgb, var(--abs-bg-soft) 60%, var(--abs-line) 40%); }
.app-nav__user .abs-avatar {
    width: 34px; height: 34px;
    background: var(--abs-accent-soft);
    color: var(--abs-accent-ink);
    font-size: 12.5px;
    font-weight: 600;
}
.app-nav__user-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.app-nav__user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--abs-ink-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-nav__user-role {
    font-size: 11.5px;
    color: var(--abs-ink-500);
}
.app-nav__user-chev {
    color: var(--abs-ink-400);
    font-size: 11px;
}

/* Top bar
   ─────────────────────────────────────────── */
.app-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 60px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--abs-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
}
.app-topbar__title-block { display: flex; flex-direction: column; min-width: 0; }
.app-topbar__title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--abs-ink-900);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-topbar__sub {
    font-size: 12px;
    color: var(--abs-ink-500);
    margin-top: 2px;
}
.app-topbar__sub:empty { display: none; }
.app-topbar__actions { display: flex; align-items: center; gap: 8px; }

/* Main scrolling content
   ─────────────────────────────────────────── */
.app-content {
    flex: 1;
    padding: 28px;
}
.app-content > .page-wrap { padding: 0; }

/* Auth screen (login / reset password) — no side nav
   ─────────────────────────────────────────── */
.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--abs-bg);
    padding: 24px;
}
.auth-card {
    background: var(--abs-surface);
    border: 1px solid var(--abs-line);
    border-radius: var(--abs-r-lg);
    box-shadow: var(--abs-shadow-md);
    padding: 32px;
    width: 100%;
    max-width: 400px;
}
.auth-logo {
    display: block;
    margin: 0 auto 24px;
    max-height: 48px;
}

/* Card-header pattern
   Matches the design's "Patients · 5,100 total · 14 today" layout.
   ─────────────────────────────────────────── */
.card-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--abs-line);
}
.card-title { font-size: 18px; font-weight: 600; color: var(--abs-ink-900); margin: 0; }
.card-subtitle {
    font-size: 12.5px;
    color: var(--abs-ink-500);
    margin-top: 2px;
}
.card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Filter chips row
   ─────────────────────────────────────────── */
.filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--abs-line-soft);
}
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--abs-r-pill);
    background: transparent;
    border: 1px solid var(--abs-line);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--abs-ink-700);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.filter-chip:hover { background: var(--abs-bg-soft); }
.filter-chip.is-active {
    background: var(--abs-accent-soft);
    border-color: color-mix(in srgb, var(--abs-accent) 30%, transparent);
    color: var(--abs-accent-ink);
}
.filter-chip .chip-count {
    background: var(--abs-bg-soft);
    color: var(--abs-ink-500);
    font-size: 11px;
    padding: 1px 6px;
    border-radius: var(--abs-r-pill);
    font-weight: 600;
}
.filter-chip.is-active .chip-count {
    background: rgba(255,255,255,0.7);
    color: var(--abs-accent-ink);
}

/* Search input with magnifier icon
   ─────────────────────────────────────────── */
.search-input {
    position: relative;
    display: inline-block;
    width: 260px;
}
.search-input input {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 34px;
    border-radius: var(--abs-r-sm);
    border: 1px solid var(--abs-line);
    background: var(--abs-surface);
    font-size: 13px;
    color: var(--abs-ink-800);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.search-input input::placeholder { color: var(--abs-ink-400); }
.search-input input:focus {
    border-color: var(--abs-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--abs-accent) 18%, transparent);
    outline: none;
}
.search-input::before {
    content: "\f002";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--abs-ink-400);
    font-size: 12px;
    pointer-events: none;
}

/* Pin button + pinned section header rows
   ─────────────────────────────────────────── */
.pin-form { display: inline-block; margin: 0; }
.pin-btn {
    background: transparent;
    border: none;
    padding: 4px 6px;
    border-radius: var(--abs-r-sm);
    color: var(--abs-ink-300);
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
}
.pin-btn:hover { color: var(--abs-warn); background: var(--abs-warn-bg); }
.pin-btn.is-pinned { color: var(--abs-warn); }
.pin-btn.is-pinned:hover { color: #8a5a10; }

.datatable tbody tr.is-pinned > td {
    background: color-mix(in srgb, var(--abs-warn-bg) 50%, transparent);
}
.datatable tbody tr.is-pinned:hover > td {
    background: color-mix(in srgb, var(--abs-warn-bg) 80%, transparent);
}
.pinned-section-row > td {
    background: var(--abs-bg-soft) !important;
    color: var(--abs-ink-500);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 18px !important;
    height: auto;
}
.pinned-section-row > td > i { color: var(--abs-warn); margin-right: 6px; }
.pinned-section-row--all > td { background: transparent !important; }

.cell-avatar__sub {
    font-size: 11.5px;
    color: var(--abs-ink-500);
    margin-top: 1px;
}

/* Avatar in patient cells
   ─────────────────────────────────────────── */
.cell-avatar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.cell-avatar .abs-avatar {
    width: 30px;
    height: 30px;
    font-size: 11.5px;
    background: var(--abs-bg-soft);
    color: var(--abs-ink-700);
}
.cell-avatar .cell-avatar__name {
    font-weight: 500;
    color: var(--abs-ink-900);
}

/* DataTables: hide its default chrome on data-tables-clean — we'll provide
   our own header/footer and only let DataTables render the table + paging. */
.dataTables_wrapper.datatable-clean .dataTables_length,
.dataTables_wrapper.datatable-clean .dataTables_filter { display: none; }
.dataTables_wrapper.datatable-clean .dataTables_info,
.dataTables_wrapper.datatable-clean .dataTables_paginate {
    padding: 14px 24px;
}
.dataTables_wrapper.datatable-clean > .row:first-child { display: none; }
.dataTables_wrapper.datatable-clean > .row:last-child {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--abs-line-soft);
    align-items: center;
}
.dataTables_wrapper.datatable-clean > .row:last-child > [class^="col"] { padding: 0; }

/* Patient detail page
   ─────────────────────────────────────────── */
.patient-detail { display: flex; flex-direction: column; gap: 16px; }

.patient-header {
    background: var(--abs-surface);
    border: 1px solid var(--abs-line);
    border-radius: var(--abs-r-lg);
    box-shadow: var(--abs-shadow-sm);
    padding: 24px 28px;
}
.patient-header__back {
    font-size: 12.5px;
    color: var(--abs-ink-500);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}
.patient-header__back:hover { color: var(--abs-accent-ink); }
.patient-header__main {
    display: flex;
    align-items: center;
    gap: 16px;
}
.patient-header__main .abs-avatar {
    width: 64px; height: 64px;
    background: var(--abs-accent-soft);
    color: var(--abs-accent-ink);
    font-size: 22px;
    font-weight: 600;
}
.patient-header__info { flex: 1; min-width: 0; }
.patient-header__name {
    font-size: 22px;
    font-weight: 600;
    color: var(--abs-ink-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.patient-header__sub {
    font-size: 13px;
    color: var(--abs-ink-500);
    margin-top: 4px;
}
.patient-header__sub > span + span::before {
    content: "·";
    margin: 0 8px;
    color: var(--abs-ink-300);
}
.patient-header__actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Mini variant — used on Notes / Prescriptions / Body comp / Documents subpages */
.patient-header--mini { padding: 16px 22px; }
.patient-header--mini .patient-header__back { margin-bottom: 10px; }
.patient-header--mini .abs-avatar {
    width: 40px; height: 40px; font-size: 14px;
}
.patient-header--mini .patient-header__name { font-size: 16px; font-weight: 600; }
.patient-header--mini .patient-header__sub { font-size: 12px; }

/* Appointment show — current-row tint + Lipo-B pip indicator
   ─────────────────────────────────────────── */
.table > tbody > tr.row-current > td {
    background: var(--abs-warn-bg) !important;
}
.table > tbody > tr.row-current:hover > td {
    background: color-mix(in srgb, var(--abs-warn-bg) 80%, var(--abs-warn) 15%) !important;
}

.lipo-pip {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--abs-bg-soft);
    border: 1px solid var(--abs-line);
    margin-right: 2px;
    vertical-align: -1px;
}
.lipo-pip.is-on {
    background: var(--abs-accent);
    border-color: var(--abs-accent);
}

/* Marketing — delivery rate bar */
.delivery-bar {
    height: 10px;
    background: var(--abs-bg-soft);
    border-radius: var(--abs-r-pill);
    overflow: hidden;
}
.delivery-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--abs-accent) 0%, var(--abs-success) 100%);
    border-radius: var(--abs-r-pill);
    transition: width 0.3s ease;
}

/* Document grid (Documents subpage) */
.document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 18px;
}
.document-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--abs-line);
    border-radius: var(--abs-r-md);
    background: var(--abs-surface);
    text-decoration: none;
    color: var(--abs-ink-800);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.document-card:hover {
    border-color: color-mix(in srgb, var(--abs-accent) 35%, var(--abs-line) 65%);
    box-shadow: var(--abs-shadow-sm);
}
.document-card__tile {
    flex-shrink: 0;
    width: 40px;
    height: 50px;
    border-radius: var(--abs-r-xs);
    background: var(--abs-accent-soft);
    color: var(--abs-accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.document-card__body { flex: 1; min-width: 0; }
.document-card__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--abs-ink-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.document-card__meta { font-size: 11.5px; color: var(--abs-ink-500); margin-top: 2px; }
.document-card__delete {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity 0.12s;
}
.document-card:hover .document-card__delete { opacity: 1; }

/* Patient journey chip — "since starting" weight delta */
.patient-journey {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 0;
}
.journey-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--abs-r-pill);
    font-size: 13px;
    font-weight: 500;
    background: var(--abs-bg-soft);
    color: var(--abs-ink-700);
    border: 1px solid var(--abs-line-soft);
}
.journey-chip i { font-size: 12px; }
.journey-chip strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.journey-chip--down {
    background: var(--abs-success-bg);
    color: #1f7256;
    border-color: color-mix(in srgb, var(--abs-success) 25%, transparent);
}
.journey-chip--down i { color: var(--abs-success); }
.journey-chip--up {
    background: var(--abs-warn-bg);
    color: #8a5a10;
    border-color: color-mix(in srgb, var(--abs-warn) 25%, transparent);
}
.journey-chip--up i { color: var(--abs-warn); }
.journey-meta {
    font-size: 12.5px;
    color: var(--abs-ink-500);
}

/* 5-stat strip */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--abs-line-soft);
}
.stat {
    padding: 0 16px;
    border-right: 1px solid var(--abs-line-soft);
}
.stat:last-child { border-right: none; }
.stat:first-child { padding-left: 0; }
.stat__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--abs-ink-500);
}
.stat__value {
    font-size: 18px;
    font-weight: 600;
    color: var(--abs-ink-900);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.stat__hint {
    font-size: 12px;
    color: var(--abs-ink-500);
    margin-top: 2px;
}

/* Underline-style tabs */
.patient-tabs {
    border-bottom: 1px solid var(--abs-line);
    display: flex;
    gap: 4px;
    padding: 0 4px;
}
.patient-tabs .nav-link {
    border: none;
    border-radius: 0;
    padding: 12px 14px;
    color: var(--abs-ink-600);
    font-size: 13.5px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    background: transparent;
    margin-bottom: -1px;
}
.patient-tabs .nav-link:hover {
    color: var(--abs-ink-900);
    background: transparent;
    border-bottom-color: var(--abs-line);
}
.patient-tabs .nav-link.active {
    color: var(--abs-accent-ink);
    background: transparent;
    border-bottom-color: var(--abs-accent);
}
.patient-tabs .tab-count {
    display: inline-block;
    margin-left: 6px;
    background: var(--abs-bg-soft);
    color: var(--abs-ink-500);
    font-size: 11px;
    padding: 1px 6px;
    border-radius: var(--abs-r-pill);
    font-weight: 600;
}
.patient-tabs .nav-link.active .tab-count {
    background: var(--abs-accent-soft);
    color: var(--abs-accent-ink);
}

/* Weight chart */
.weight-chart {
    width: 100%;
    height: auto;
    display: block;
}
.weight-chart .grid-line { stroke: var(--abs-line-soft); stroke-width: 1; }
.weight-chart .area { fill: var(--abs-accent); fill-opacity: 0.08; }
.weight-chart .line { fill: none; stroke: var(--abs-accent); stroke-width: 2; }
.weight-chart .point { fill: var(--abs-surface); stroke: var(--abs-accent); stroke-width: 2; pointer-events: none; transition: r 0.1s ease; }
.weight-chart .area, .weight-chart .line { pointer-events: none; }
.weight-chart .point-hit { fill: transparent; cursor: pointer; }
.weight-chart .weight-point:hover .point { r: 5; }
.weight-chart-tip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 6px));
    background: var(--abs-ink-900, #1d2733);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.weight-chart-tip::after {
    content: '';
    position: absolute;
    left: 50%; top: 100%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--abs-ink-900, #1d2733);
}
.weight-chart .latest-label {
    font-size: 11.5px;
    font-weight: 600;
    fill: var(--abs-accent-ink);
    font-family: var(--abs-font-sans);
}

/* Empty-state placeholder used inside cards on the detail page */
.empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--abs-ink-400);
    font-size: 13px;
}
.empty-state i { font-size: 22px; margin-bottom: 8px; display: block; }

/* Appointments — Day/Week view toggle + week grid
   ─────────────────────────────────────────── */
.view-toggle {
    display: inline-flex;
    background: var(--abs-bg-soft);
    border-radius: var(--abs-r-sm);
    padding: 2px;
    gap: 2px;
}
.view-toggle__btn {
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--abs-ink-600);
    border-radius: var(--abs-r-xs);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.view-toggle__btn:hover { color: var(--abs-ink-900); }
.view-toggle__btn.is-active {
    background: var(--abs-surface);
    color: var(--abs-ink-900);
    box-shadow: var(--abs-shadow-xs);
}

.lane-legend {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--abs-ink-500);
}
.lane-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 2px;
    margin-left: 8px;
    margin-right: 4px;
    vertical-align: -1px;
}
.lane-dot--provider { background: var(--abs-teal-500); }
.lane-dot--diet     { background: var(--abs-success); }
.lane-dot--other    { background: var(--abs-warn); }

.week-grid {
    --time-rail: 56px;
    --row-h: 60px;
    border-top: 1px solid var(--abs-line-soft);
}
.week-grid__header,
.week-grid__body {
    display: grid;
    grid-template-columns: var(--time-rail) repeat(6, 1fr);
}
.week-grid__header {
    border-bottom: 1px solid var(--abs-line);
    background: var(--abs-bg-soft);
}
.week-grid__time-head { border-right: 1px solid var(--abs-line-soft); }
.week-grid__day-head {
    text-align: center;
    padding: 10px 8px;
    border-right: 1px solid var(--abs-line-soft);
}
.week-grid__day-head:last-child { border-right: none; }
.week-grid__day-head.is-today {
    background: var(--abs-accent-soft);
}
.week-grid__day-name {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--abs-ink-500);
}
.week-grid__day-head.is-today .week-grid__day-name { color: var(--abs-accent-ink); }
.week-grid__day-num {
    font-size: 14px;
    font-weight: 600;
    color: var(--abs-ink-900);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.week-grid__body {
    position: relative;
}
.week-grid__time-rail {
    border-right: 1px solid var(--abs-line-soft);
    background: var(--abs-bg-soft);
    position: relative;
}
.week-grid__hour {
    height: var(--row-h);
    padding: 4px 6px 0 0;
    text-align: right;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--abs-ink-400);
    border-bottom: 1px solid var(--abs-line-soft);
    font-variant-numeric: tabular-nums;
}
.week-grid__day {
    position: relative;
    border-right: 1px solid var(--abs-line-soft);
    height: calc(9 * var(--row-h));
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent calc(var(--row-h) - 1px),
        var(--abs-line-soft) calc(var(--row-h) - 1px),
        var(--abs-line-soft) var(--row-h)
    );
}
.week-grid__day:last-child { border-right: none; }
.week-grid__day.is-today {
    background-color: color-mix(in srgb, var(--abs-accent-soft) 35%, transparent);
}

.week-event {
    position: absolute;
    left: 4px;
    right: 4px;
    background: var(--abs-surface);
    border-radius: var(--abs-r-xs);
    padding: 4px 8px;
    border-left: 3px solid var(--abs-accent);
    box-shadow: var(--abs-shadow-xs);
    text-decoration: none;
    color: var(--abs-ink-900);
    font-size: 11.5px;
    overflow: hidden;
    transition: box-shadow 0.12s, transform 0.05s;
}
.week-event:hover {
    box-shadow: var(--abs-shadow-sm);
    transform: translateY(-1px);
}
.week-event.lane-provider { border-left-color: var(--abs-teal-500); }
.week-event.lane-diet     { border-left-color: var(--abs-success); }
.week-event.lane-other    { border-left-color: var(--abs-warn); }
.week-event.is-noshow {
    background: var(--abs-danger-bg);
    border-left-color: var(--abs-danger);
}
.week-event__primary {
    font-weight: 600;
    color: var(--abs-ink-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.week-event__secondary {
    font-size: 10.5px;
    color: var(--abs-ink-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Add-patient wizard
   ─────────────────────────────────────────── */
.wizard-shell {
    max-width: 760px;
    margin: 0 auto;
}
.wizard-shell .card { padding: 0; overflow: hidden; }
.stepper {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 18px 24px;
    gap: 0;
    border-bottom: 1px solid var(--abs-line);
    background: var(--abs-bg-soft);
    counter-reset: step;
}
.stepper__step {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--abs-ink-500);
    cursor: pointer;
    position: relative;
}
.stepper__step:not(:last-child)::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--abs-line);
    margin-left: 6px;
}
.stepper__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--abs-bg);
    border: 1px solid var(--abs-line);
    font-size: 11px;
    font-weight: 600;
    color: var(--abs-ink-500);
}
.stepper__step.is-current { color: var(--abs-accent-ink); }
.stepper__step.is-current .stepper__num {
    background: var(--abs-accent);
    border-color: var(--abs-accent);
    color: var(--abs-on-accent);
}
.stepper__step.is-done .stepper__num {
    background: var(--abs-success);
    border-color: var(--abs-success);
    color: #fff;
}
.stepper__step.is-done .stepper__num::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.stepper__step.is-done .stepper__num { font-size: 0; }

.wizard-step {
    display: none;
    padding: 28px 32px;
}
.wizard-step.is-current { display: block; }
.wizard-step__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--abs-ink-900);
    margin: 0;
}
.wizard-step__sub {
    font-size: 13px;
    color: var(--abs-ink-500);
    margin: 4px 0 18px;
}

.review-list {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 8px 16px;
    margin: 0;
}
.review-list dt {
    font-size: 12.5px;
    color: var(--abs-ink-500);
    font-weight: 500;
    border-bottom: 1px solid var(--abs-line-soft);
    padding: 8px 0;
}
.review-list dd {
    font-size: 13.5px;
    color: var(--abs-ink-900);
    border-bottom: 1px solid var(--abs-line-soft);
    padding: 8px 0;
    margin: 0;
}

.wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--abs-bg-soft);
    border-top: 1px solid var(--abs-line);
}
.wizard-footer__nav { display: flex; gap: 8px; }

/* Today landing screen
   ─────────────────────────────────────────── */
.today-greeting { padding: 8px 4px 20px; }
.today-greeting__overline {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--abs-ink-400);
    display: flex;
    align-items: center;
    gap: 10px;
}
.today-greeting__clock {
    font-variant-numeric: tabular-nums;
    color: var(--abs-ink-600);
    background: var(--abs-bg-soft);
    padding: 2px 8px;
    border-radius: var(--abs-r-pill);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.today-greeting__clock:empty { display: none; }

.day-progress {
    margin-top: 14px;
    height: 6px;
    background: var(--abs-bg-soft);
    border-radius: var(--abs-r-pill);
    overflow: hidden;
    max-width: 360px;
}
.day-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--abs-accent) 0%, var(--abs-success) 100%);
    border-radius: var(--abs-r-pill);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.today-greeting__title {
    font-size: 26px;
    font-weight: 600;
    color: var(--abs-ink-900);
    margin-top: 4px;
}
.today-greeting__sub {
    font-size: 13px;
    color: var(--abs-ink-500);
    margin-top: 4px;
}

.timeline { padding: 6px 0; }
.timeline__row {
    display: grid;
    grid-template-columns: 64px 24px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--abs-line-soft);
    transition: background 0.12s;
}
.timeline__row:last-child { border-bottom: none; }
.timeline__row.is-now {
    background: var(--abs-accent-soft);
    border-left: 3px solid var(--abs-accent);
    padding-left: 15px;
}
.timeline__row.is-done .timeline__primary { text-decoration: line-through; color: var(--abs-ink-500); }
.timeline__row.is-canceled, .timeline__row.is-noshow { opacity: 0.6; }
.timeline__time {
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--abs-ink-700);
}
.timeline__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--abs-accent);
}
.timeline__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 2px solid var(--abs-ink-300);
}
.timeline__row.is-done .timeline__marker { color: var(--abs-success); }
.timeline__primary { font-weight: 500; color: var(--abs-ink-900); font-size: 13.5px; }
.timeline__secondary { font-size: 12px; color: var(--abs-ink-500); margin-top: 2px; }

.now-card {
    border-color: color-mix(in srgb, var(--abs-accent) 30%, var(--abs-line) 70%);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--abs-accent) 8%, transparent);
}
.now-card__eyebrow {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--abs-accent-ink);
}
.now-pulse {
    color: var(--abs-accent);
    margin-right: 4px;
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
.now-card__name {
    font-size: 19px;
    font-weight: 600;
    color: var(--abs-ink-900);
    margin-top: 6px;
}
.now-card__sub { font-size: 13px; color: var(--abs-ink-500); margin-top: 2px; }

.card-eyebrow {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--abs-ink-400);
}
.card-headline {
    font-size: 16px;
    font-weight: 600;
    color: var(--abs-ink-900);
    margin-top: 4px;
}

.quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 14px;
}
.quick-actions--strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0;
    margin-bottom: 16px;
}
@media (max-width: 768px) {
    .quick-actions--strip { grid-template-columns: repeat(2, 1fr); }
}
.quick-action {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--abs-line);
    border-radius: var(--abs-r-sm);
    background: var(--abs-surface);
    color: var(--abs-ink-700);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    cursor: pointer;
}
.quick-action:hover {
    background: var(--abs-accent-soft);
    border-color: color-mix(in srgb, var(--abs-accent) 30%, transparent);
    color: var(--abs-accent-ink);
}
.quick-action i { color: var(--abs-accent); }

/* Mini list items used in the right rail of Summary */
.mini-list { display: flex; flex-direction: column; }
.mini-list__item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--abs-line-soft);
}
.mini-list__item:last-child { border-bottom: none; }
.mini-list__primary {
    font-size: 13px;
    font-weight: 500;
    color: var(--abs-ink-900);
}
.mini-list__secondary {
    font-size: 12px;
    color: var(--abs-ink-500);
}

/* Narrow viewport: hide side nav (Stage 3 will add a hamburger toggle) */
@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-nav { display: none; }
    .app-content { padding: 16px; }
    .app-topbar { padding: 0 16px; }
    .card-header-row, .filter-row { padding-left: 16px; padding-right: 16px; }
}

/* Page wrapper — full width up to a soft cap. Replaces the old col-md-10
   constraint so narrower laptops aren't squeezed into ~80% of their viewport. */
.page-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Don't let the Name column wrap awkwardly to multiple lines — let the row
   breathe horizontally instead. The table-responsive wrapper already gives
   us a horizontal scroll if a column gets too wide. */
.datatable td:first-child,
.datatable th:first-child {
    white-space: nowrap;
}

/* DataTables top row layout: keep "Show … entries" and the Search input on
   one line and align them so they don't drift apart on narrower viewports. */
.dataTables_wrapper > .row:first-child {
    align-items: center;
    margin-bottom: 0.75rem;
}

/* Dim disabled user rows in the staff list */
.user-row.is-disabled > td { opacity: 0.55; }
.user-row.is-disabled .cell-avatar .abs-avatar {
    background: var(--abs-bg-soft);
    color: var(--abs-ink-400);
}

/* Motion polish
   Page fade-in on load + subtle card hover lift. Honors prefers-reduced-motion.
   ─────────────────────────────────────────── */
.app-content {
    animation: page-rise 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes page-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.card { transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; }
.card:hover {
    box-shadow: var(--abs-shadow-md);
    transform: translateY(-1px);
}
/* Don't lift cards that already use elevation as identity (Now card has its own
   colored ring) or that wrap full-page layouts. */
.now-card:hover { transform: none; }
.patient-header:hover,
.auth-card:hover { transform: none; box-shadow: var(--abs-shadow-sm); }

@media (prefers-reduced-motion: reduce) {
    .app-content { animation: none; }
    .card { transition: none; }
    .card:hover { transform: none; }
    .now-pulse { animation: none; }
    .day-progress__fill { transition: none; }
}

/* Toasts
   Stack in the bottom-right. JS in app.js inserts/removes them.
   ─────────────────────────────────────────── */
.toast-stack {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.abs-toast {
    pointer-events: auto;
    min-width: 260px;
    max-width: 380px;
    background: var(--abs-surface);
    border: 1px solid var(--abs-line);
    border-left: 3px solid var(--abs-accent);
    border-radius: var(--abs-r-md);
    box-shadow: var(--abs-shadow-md);
    padding: 12px 14px 12px 14px;
    display: grid;
    grid-template-columns: 20px 1fr auto;
    gap: 10px;
    align-items: start;
    font-size: 13px;
    color: var(--abs-ink-800);
    animation: toast-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.abs-toast.is-leaving {
    animation: toast-out 0.18s ease both;
}
.abs-toast__icon { color: var(--abs-accent); font-size: 14px; padding-top: 1px; }
.abs-toast__body { line-height: 1.4; }
.abs-toast__title { font-weight: 600; color: var(--abs-ink-900); }
.abs-toast__close {
    background: transparent;
    border: none;
    color: var(--abs-ink-400);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}
.abs-toast__close:hover { color: var(--abs-ink-700); }
.abs-toast--success { border-left-color: var(--abs-success); }
.abs-toast--success .abs-toast__icon { color: var(--abs-success); }
.abs-toast--danger  { border-left-color: var(--abs-danger); }
.abs-toast--danger  .abs-toast__icon { color: var(--abs-danger); }
.abs-toast--warn    { border-left-color: var(--abs-warn); }
.abs-toast--warn    .abs-toast__icon { color: var(--abs-warn); }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
    to { opacity: 0; transform: translateX(12px); }
}
@media (prefers-reduced-motion: reduce) {
    .abs-toast { animation: none; }
    .abs-toast.is-leaving { animation: none; opacity: 0; }
}

/* SMS preview phone frame
   Used in marketing/new to show the live message preview.
   ─────────────────────────────────────────── */
.sms-preview {
    position: sticky;
    top: 84px;
    width: 280px;
    margin: 0 auto;
}
.sms-preview__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--abs-ink-400);
    margin-bottom: 8px;
    text-align: center;
}
.sms-phone {
    background: #1c2330;
    border-radius: 32px;
    padding: 12px 10px 28px;
    box-shadow: 0 18px 40px -20px rgba(20, 30, 50, 0.45), 0 1px 0 rgba(255,255,255,0.08) inset;
    position: relative;
}
.sms-phone::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 6px;
    background: #0d111a;
    border-radius: 3px;
}
.sms-phone__screen {
    background: linear-gradient(180deg, #f3f5f9 0%, #e9eef5 100%);
    border-radius: 22px;
    min-height: 360px;
    padding: 36px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sms-phone__sender {
    text-align: center;
    font-size: 10.5px;
    color: #6b7588;
    margin-bottom: 8px;
    font-weight: 500;
}
.sms-phone__sender strong { color: #1c2330; font-weight: 600; }
.sms-bubble {
    align-self: flex-start;
    max-width: 88%;
    background: #fff;
    color: #1c2330;
    padding: 8px 12px;
    border-radius: 16px 16px 16px 4px;
    font-size: 12.5px;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(20,30,50,0.06);
    white-space: pre-wrap;
    word-wrap: break-word;
}
.sms-bubble--empty { color: #98a3b6; font-style: italic; }
.sms-phone__meta {
    text-align: center;
    font-size: 10px;
    color: #6b7588;
    margin-top: auto;
    padding-top: 12px;
    font-variant-numeric: tabular-nums;
}
.sms-phone__meta span + span::before {
    content: "·";
    margin: 0 6px;
    color: #b3bccd;
}