/* =============================================================================
 * EHR Platform — custom.css
 *
 * Overrides for the vendor templates. Vendor template files (under
 * public/assets/admin-template/) are NEVER modified — every customisation
 * lives here.
 *
 * Per-tenant accent colour is injected as a CSS custom property by the shell:
 *   :root { --tenant-accent: #0d6efd; }
 *
 * Philosophy: the back-office template ships a complete design system. Reuse
 * its components (.box, .alert-success, .badge-X-light, etc.) whenever
 * possible. This file only adds what the template doesn't provide.
 * ===========================================================================*/

:root {
    --tenant-accent: #0d6efd;
    --tenant-accent-dark: #0b5ed7;
    --tenant-accent-soft: rgba(13, 110, 253, 0.10);
}

/* =============================================================================
 * AUTH PAGES (sign-in, sign-up, forgot, reset)
 * Use the frontoffice template's BEM classes; we just patch error states.
 * ===========================================================================*/

.forms__input.has-error {
    border-color: #c62828 !important;
    background-color: #fff5f5 !important;
}
.forms__input.has-error:focus {
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12) !important;
}
.forms__error { color: #c62828; font-size: 13px; margin: 6px 0 0; }
.forms__hint  { color: #6b7280; font-size: 12px; margin: 6px 0 0; }

.auth-flash { animation: auth-flash-in 0.25s ease-out; }
@keyframes auth-flash-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* =============================================================================
 * TENANT ACCENT — re-tint the template's primary blues
 * ===========================================================================*/

.btn-primary,
.bg-primary {
    background-color: var(--tenant-accent) !important;
    border-color:     var(--tenant-accent) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--tenant-accent-dark) !important;
    border-color:     var(--tenant-accent-dark) !important;
}

/* =============================================================================
 * BUTTONS — never break words across lines, consistent icon-text spacing
 *
 * Bootstrap 5 sets white-space: nowrap on .btn but the template's overrides
 * sometimes lose it. Lock it in here, and prevent the icon + label combo from
 * wrapping when the button is in a tight container.
 *
 * Buttons in our app use the template's class catalog (see ui_buttons.html):
 *   - Solid:  btn-primary, btn-info, btn-success, btn-warning, btn-danger,
 *             btn-secondary, btn-dark, btn-light, btn-default
 *   - Soft:   btn-{color}-light  (paler, less attention-grabbing)
 *   - Sizes:  btn-xs, btn-sm, default, btn-lg
 *   - FX:     waves-effect waves-light  (Material ripple — template ships it)
 * ===========================================================================*/

.btn,
.btn * {
    white-space: nowrap !important;
}

/* Make .btn a flex container so the icon + label have predictable spacing
   regardless of element vs text-node siblings. Gap handles the spacing
   between flex items; a button with only one child shows no gap (so
   icon-only buttons stay tight without a special class).

   Padding is generous so text descenders ('p', 'g', 'y') never touch the
   border and the icon never crowds the edge — content always has breathing
   room. We do NOT set overflow:hidden on the button: that was clipping
   content visually even when the button had room. Instead, max-width
   prevents the button itself from exceeding its parent. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 9px 18px;
    line-height: 1.4;
    max-width: 100%;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
    line-height: 1.4;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 16px;
    line-height: 1.4;
}

/* The standard .btn is interactive — make sure the cursor reflects that even
   on disabled/aria-disabled where some browsers drop it. */
.btn:not([disabled]):not(.disabled) {
    cursor: pointer;
}

/* Feather icons inside buttons — sized consistently, let `gap` handle the
   spacing, never shrink. */
.btn > i[data-feather],
.btn > svg.feather {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
}
.btn-sm > i[data-feather],
.btn-sm > svg.feather {
    width: 14px;
    height: 14px;
}
.btn-lg > i[data-feather],
.btn-lg > svg.feather {
    width: 18px;
    height: 18px;
}

/* Edge case: when a button is genuinely too narrow for its label (e.g.
   `.btn.w-100` in a tight column with a long label), wrap the label in
   `<span>` and add `.btn-truncate` to the button to opt-in to ellipsis
   behaviour. Default buttons render content fully without clipping. */
.btn-truncate {
    overflow: hidden;
}
.btn-truncate > span {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Group of buttons in a row — uniform horizontal gap so multi-button toolbars
   don't crowd. Use as `<div class="btn-row">…</div>`. */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* =============================================================================
 * CURSOR POINTER — show clickability for everything that's clickable
 *
 * Many native-tappable elements lose pointer cursor when reset by Bootstrap
 * or template CSS. This block restores the affordance everywhere it should be.
 * ===========================================================================*/

a,
a *,
.dropdown-toggle,
.dropdown-item,
.page-link,
.nav-link,
.sidebar-menu__link,
.box-controls .btn,
.box-controls a,
[data-bs-toggle],
[data-toggle],
.fc-event,
.fc-event-container .fc-event,
.fc-day,            /* clickable empty calendar slots */
.fc-day-grid-event,
.fc-time-grid-event,
.stat-card-link,
.row-link,
.row-link td,
button:not([disabled]):not(.disabled),
input[type="checkbox"],
input[type="radio"],
select,
label[for],
summary {
    cursor: pointer;
}

/* Disabled items keep the not-allowed cursor */
.btn[disabled],
.btn.disabled,
.dropdown-item.disabled,
.module-disabled > a,
[aria-disabled="true"] {
    cursor: not-allowed !important;
}

/* =============================================================================
 * SIDEBAR — disabled-module styling
 * Template handles sidebar layout/typography. We add a pill for items that
 * are present in the menu but not yet wired up so users see the roadmap.
 * ===========================================================================*/

.sidebar-menu .module-disabled > a {
    opacity: 0.55;
}
.sidebar-menu .module-disabled > a:hover {
    background: transparent !important;
}
.sidebar-menu .module-badge {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}
.sidebar-menu .pull-right-container {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* =============================================================================
 * PAGE HEADER — the partial's wrapper sits above .content
 * ===========================================================================*/

.content-wrapper > .content-header {
    padding: 24px 30px 12px;
}
.content-wrapper > .content-header .page-title {
    font-size: 22px;
    font-weight: 600;
    color: #111827;
}
.content-wrapper > .content-header .breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 13px;
}
.content-wrapper > .content-header .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: #9ca3af;
}

/* =============================================================================
 * STAT CARD LINK — wraps the dashboard stat cards in <a>
 *
 * The card markup stays as the template ships it (.box.bg-X-light). Wrapping
 * it in <a class="stat-card-link"> turns the whole thing into a link with a
 * subtle hover lift. Keeps the template's .box styling intact.
 * ===========================================================================*/

.stat-card-link {
    display: block;
    color: inherit;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-card-link:hover,
.stat-card-link:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    color: inherit;
}
.stat-card-link:hover .box,
.stat-card-link:focus-visible .box {
    box-shadow: none;
}
.stat-card-link.disabled {
    pointer-events: none;
    opacity: 0.6;
}

/* =============================================================================
 * TABLE ROW LINK — make whole rows clickable
 * Used in patient/appointment lists where every cell links to the same row.
 * ===========================================================================*/

.row-link {
    transition: background 0.12s ease;
}
.row-link:hover {
    background: #f9fafb !important;
}

/* =============================================================================
 * FILTER BAR — horizontally aligned, wraps cleanly when space runs out
 *
 * The bar lays out as a single row when there's room; on narrower viewports
 * it wraps to multiple rows rather than overflowing or shrinking fields
 * into each other. Each control has a generous min-width so date pickers
 * and selects never get squashed.
 * ===========================================================================*/

.filter-bar {
    display: flex;
    flex-wrap: wrap;          /* wrap to a new row rather than overflow */
    align-items: center;
    gap: 12px;
    width: 100%;
}
.filter-bar > * {
    flex-shrink: 0;
}

.filter-bar .filter-search {
    flex: 1 1 260px;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0 12px;
    height: 40px;             /* match the form-control height for clean alignment */
}
.filter-bar .filter-search input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    flex: 1;
    min-width: 0;
    height: 100%;
}

.filter-bar .form-control,
.filter-bar .form-select {
    width: auto;
    min-width: 150px;
    height: 40px;
}

.filter-bar input[type="date"] {
    /* Browsers (esp. Safari) need a slightly bigger min-width for the
       native date picker chevron + placeholder. */
    min-width: 160px;
}

.filter-bar .filter-arrow {
    color: #9ca3af;
    font-size: 13px;
    padding: 0 2px;
}

.filter-bar .filter-reset {
    margin-left: auto;        /* push reset to far right when room allows */
    color: #6b7280;
    font-size: 13px;
    text-decoration: none;
    align-self: center;
}
.filter-bar .filter-reset:hover { color: #111827; }

@media (max-width: 768px) {
    .filter-bar .filter-search {
        flex-basis: 100%;
        max-width: 100%;
    }
    .filter-bar .filter-reset {
        margin-left: 0;       /* on mobile, sit naturally with the rest */
    }
}

/* =============================================================================
 * ALERTS — use the template's filled, colourful variants for visibility
 *
 * The template ships .alert-success / .alert-info / .alert-warning /
 * .alert-danger as fully-coloured bars (white text on saturated background).
 * Those are far more visible than the washed-out -light variants. This
 * section adds an icon affordance and ensures the close button reads on the
 * coloured background.
 *
 * Markup pattern used throughout the app:
 *   <div class="alert alert-success alert-app" role="alert">
 *       <i class="alert-icon" data-feather="check-circle"></i>
 *       <span class="alert-body">Patient record saved.</span>
 *       <button class="btn-close btn-close-white" data-bs-dismiss="alert"></button>
 *   </div>
 * ===========================================================================*/

.alert.alert-app {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-left: 4px solid rgba(0,0,0,0.18);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 20px;
}
.alert.alert-app .alert-icon,
.alert.alert-app svg.feather {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.alert.alert-app .alert-body {
    flex: 1;
    line-height: 1.45;
}
.alert.alert-app .btn-close,
.alert.alert-app .btn-close-white {
    filter: brightness(0) invert(1);
    opacity: 0.85;
    margin-left: auto;
}
.alert.alert-app a {
    color: #ffffff;
    text-decoration: underline;
}

/* =============================================================================
 * PATIENT DETAIL — sticky right rail
 * ===========================================================================*/

.patient-rail-sticky {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    scrollbar-width: thin;
}
.patient-rail-sticky::-webkit-scrollbar { width: 6px; }
.patient-rail-sticky::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }

@media (max-width: 1199.98px) {
    .patient-rail-sticky {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* =============================================================================
 * FULLCALENDAR INTEGRATION — drop borders that fight with .box and add the
 * proper cursor for clickable events / empty slots.
 * ===========================================================================*/

#appointments-calendar .fc-toolbar h2 {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}
#appointments-calendar .fc-button {
    text-transform: capitalize;
}
#appointments-calendar .fc-day-grid-event,
#appointments-calendar .fc-time-grid-event {
    padding: 4px 6px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
}
#appointments-calendar .fc-event {
    border: none !important;
}
#appointments-calendar .fc-today {
    background: rgba(13,110,253,0.05) !important;
}
#appointments-calendar .fc-day:hover {
    background: rgba(13,110,253,0.04);
}

/* =============================================================================
 * UTILITIES — small helpers used across modules
 * ===========================================================================*/

.fs-10 { font-size: 10px !important; }
.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.text-fade { color: #6b7280; }

/* "Getting started" promo card on the dashboard uses an accent gradient. */
.box.bg-img.box-body { color: #fff; }
.box.bg-img .text-white { color: #fff !important; }
.box.bg-img .op-8 { opacity: 0.85; }

/* Topbar feather icons (keep from earlier turn, no-op if not used). */
.main-header .topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    border-radius: 8px;
}

/* =============================================================================
 * SETTINGS — billing toggle
 *
 * Pulls in the back-office template's bundled bootstrap-switch component
 * (a <button> with .btn-toggle and a .handle span). The component CSS isn't
 * loaded by the default vendors_css.css bundle, so we import it explicitly
 * here. The accompanying JS is already in vendors.min.js (Bootstrap 5's
 * bundled Button data-api), so .active toggles automatically on click.
 *
 * On the Settings page the toggle is paired with a hidden input — see
 * app/Modules/Settings/Views/index.php for the small submit-time sync
 * script. The OFF / ON pseudo-element labels position at left:-4rem /
 * right:-4rem, hence the wrapper's horizontal padding in the view.
 * ===========================================================================*/

@import url('../admin-template/assets/vendor_components/bootstrap-switch/switch.css');

/* Make the active state honour the per-tenant accent rather than the
   component default teal/orange, so the on-state colour matches the rest
   of the back-office. Falls back to Bootstrap blue if --tenant-accent is
   unset. */
.btn-toggle.btn-info.active,
.btn-toggle.btn-primary.active {
    background-color: var(--tenant-accent, #0d6efd) !important;
}

/* =============================================================================
 * OPERATOR CONSOLE — badge-light variants
 *
 * The template ships `.badge-{color}-light` rules scoped under
 * `.theme-primary` / `.theme-secondary` / etc. — body classes that the
 * STAFF dashboard shell sets, but the OPERATOR shell deliberately
 * doesn't (the operator UI strips the staff theme wrapper to avoid
 * sidebar/topbar styling that depends on TenantContext).
 *
 * Without a `theme-*` ancestor, `.badge-{color}-light` matches no
 * rule, so the bare `.badge-{color}` rules from style.css apply
 * instead — those are coloured backgrounds with WHITE text, which
 * looks like a missing-text bug inside the operator console.
 *
 * Fix: re-publish the same `-light` definitions, scoped under the
 * operator shell's main wrapper (`.opx-main`). Same shape as the
 * canonical theme-primary set, with text colours nudged darker for
 * better contrast (the template's #ee3158, #ffa800, #3596f7 don't
 * pass WCAG AA on their pale backgrounds for small text).
 * ===========================================================================*/
.opx-main .badge-primary-light   { background-color: #e8e1ff; color: #5b35d6; }
.opx-main .badge-secondary-light { background-color: #e9edf2; color: #172b4c; }
.opx-main .badge-info-light      { background-color: #cce5ff; color: #1e6fbf; }
.opx-main .badge-success-light   { background-color: #ebf9f5; color: #05825f; }
.opx-main .badge-danger-light    { background-color: #ffd6de; color: #b71d40; }
.opx-main .badge-warning-light   { background-color: #fff4d6; color: #8a5400; }

/* =============================================================================
 * TOPBAR DROPDOWNS — notifications + account
 *
 * Self-contained styling for the navbar dropdowns. The template's stock
 * notifications-menu / user-menu markup rendered cramped and misaligned, so
 * the topbar partial now emits its own .ehr-dd* structure styled here.
 * ===========================================================================*/

.main-header .topbar-icon-btn {
    color: #4b5563;
    background: transparent;
    border: 0;
}
.main-header .topbar-icon-btn:hover { background: #f1f3f5; color: #111827; }
.main-header .topbar-icon-btn svg { width: 20px; height: 20px; }

.navbar-custom-menu .nav.navbar-nav { gap: 6px; }

/* Shared dropdown panel */
.ehr-dd.dropdown-menu {
    width: 320px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(16, 24, 40, .14);
    overflow: hidden;
    margin-top: 10px;
    background: #fff;
}

.ehr-dd__head { padding: 14px 18px; border-bottom: 1px solid #f1f3f5; }
.ehr-dd__head-title { font-weight: 700; font-size: 14px; color: #111827; }

.ehr-dd__empty { padding: 32px 24px; text-align: center; }
.ehr-dd__empty-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: #f3f4f6; color: #9ca3af; margin-bottom: 12px;
}
.ehr-dd__empty-icon svg { width: 22px; height: 22px; }
.ehr-dd__empty-title { font-weight: 600; font-size: 14px; color: #374151; margin: 0 0 4px; }
.ehr-dd__empty-sub { font-size: 12.5px; color: #9ca3af; margin: 0; line-height: 1.5; }

/* Account button in the navbar */
.ehr-userbtn {
    display: inline-flex; align-items: center; gap: 9px;
    height: 40px; padding: 0 8px; border-radius: 10px;
    color: #374151; text-decoration: none; line-height: 1;
}
.ehr-userbtn:hover { background: #f1f3f5; color: #111827; }
.ehr-userbtn__name { font-weight: 600; font-size: 13.5px; color: #111827; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ehr-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--tenant-accent, #0d6efd); color: #fff;
    font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.ehr-avatar--lg { width: 44px; height: 44px; font-size: 17px; }
.ehr-userbtn__caret { width: 16px; height: 16px; color: #9ca3af; }

.ehr-dd--user { width: 288px; }
.ehr-dd__user { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #f1f3f5; }
.ehr-dd__user-meta { display: flex; flex-direction: column; min-width: 0; }
.ehr-dd__user-name { font-weight: 700; font-size: 14px; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ehr-dd__user-email { font-size: 12px; color: #9ca3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ehr-dd__menu { padding: 8px; }
.ehr-dd__item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 8px;
    color: #374151; font-size: 13.5px; font-weight: 500; text-decoration: none;
}
.ehr-dd__item:hover { background: #f1f3f5; color: #111827; }
.ehr-dd__item svg { width: 17px; height: 17px; color: #6b7280; }

.ehr-dd__foot { padding: 8px; border-top: 1px solid #f1f3f5; }
.ehr-dd__signout {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px 12px; border: 0; background: transparent; border-radius: 8px;
    color: #dc2626; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.ehr-dd__signout:hover { background: #fef2f2; }
.ehr-dd__signout svg { width: 17px; height: 17px; }

/* Profile page avatar */
.ehr-avatar--xl { width: 72px; height: 72px; font-size: 28px; }

/* -----------------------------------------------------------------------------
 * Topbar dropdown corrections
 *   1. No open animation — the template puts `transition: all` on every
 *      .dropdown-menu, which made the notification/account menus slide/fade.
 *      The menus should just appear.
 *   2. Align the bell and the account button on one row — the template's
 *      `.navbar nav > li > a` rule adds 18px vertical margin to the account
 *      button (but not the icon button), knocking the two out of line.
 * --------------------------------------------------------------------------- */
.ehr-dd.dropdown-menu { transition: none !important; animation: none !important; }

.navbar-custom-menu .nav.navbar-nav { align-items: center; }
.navbar-custom-menu .nav.navbar-nav > .nav-item { display: flex; align-items: center; }
.navbar-custom-menu .nav .ehr-userbtn,
.navbar-custom-menu .nav .topbar-icon-btn {
    margin: 0;
    display: inline-flex;
    align-items: center;
}
/* The template's `.navbar nav > li > a` rule forces block/padding/18px-margin,
   knocking the account button off-centre. Pin it to a clean, centred pill. */
.navbar-custom-menu .nav > .nav-item > a.ehr-userbtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 8px !important;
    height: 40px !important;
}
.navbar-custom-menu .nav > .nav-item.user-menu {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Client Portal tabbed auth (sign-in / sign-up on one page) ---- */
.portal-auth-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 22px;
    border-bottom: 1px solid #e5e7eb;
}
.portal-auth-tab {
    flex: 1;
    background: none;
    border: 0;
    padding: 12px 8px;
    font-weight: 600;
    font-size: 15px;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.portal-auth-tab:hover { color: #111827; }
.portal-auth-tab.active { color: #0d6efd; border-bottom-color: #0d6efd; }
.portal-auth-panel[hidden] { display: none !important; }