/* ==========================================================================
   Healty UI — design system layer (generated with ui-ux-pro-max skill)
   Product: Healthcare clinic / appointment dashboard
   Palette: Medical teal + health green · Type: Atkinson Hyperlegible
   Loaded after the base theme; overrides tokens, surfaces and components.
   ========================================================================== */

:root {
    --hl-primary: #0E7490;
    --hl-primary-hover: #155E75;
    --hl-primary-rgb: 14, 116, 144;
    --hl-secondary: #22D3EE;
    --hl-accent: #059669;
    --hl-accent-strong: #047857;
    --hl-bg: #F0F7FA;
    --hl-surface: #FFFFFF;
    --hl-surface-2: #F6FAFC;
    --hl-tint: #E6F6FA;
    --hl-tint-2: #CFF0F7;
    --hl-fg: #0F2A37;
    --hl-fg-muted: #475569;
    --hl-border: #DCEAF0;
    --hl-danger: #DC2626;
    --hl-warning: #B45309;
    --hl-ring: rgba(8, 145, 178, .35);

    --hl-radius-sm: 8px;
    --hl-radius: 12px;
    --hl-radius-lg: 16px;
    --hl-shadow-sm: 0 1px 2px rgba(15, 42, 55, .06);
    --hl-shadow: 0 1px 3px rgba(15, 42, 55, .06), 0 6px 16px -4px rgba(15, 42, 55, .08);
    --hl-shadow-lg: 0 10px 30px -8px rgba(15, 42, 55, .18);
    --hl-ease: cubic-bezier(.2, .7, .2, 1);
    --hl-font: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --bs-primary: var(--hl-primary);
    --bs-primary-rgb: var(--hl-primary-rgb);
    --bs-success: var(--hl-accent);
    --bs-success-rgb: 5, 150, 105;
    --bs-body-bg: var(--hl-bg);
    --bs-body-color: var(--hl-fg);
    --bs-body-font-family: var(--hl-font);
    --bs-link-color: var(--hl-primary);
    --bs-border-color: var(--hl-border);
}

/* ---------- Base ---------- */
html, body { -webkit-font-smoothing: antialiased; }
body {
    font-family: var(--hl-font) !important;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--hl-fg);
    background-color: var(--hl-bg) !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--hl-font);
    color: var(--hl-fg);
    letter-spacing: -.01em;
    font-weight: 700;
}
a { color: var(--hl-primary); transition: color .15s var(--hl-ease); }
a:hover { color: var(--hl-primary-hover); }
.text-muted, .text-gray-600, .text-gray-700 { color: var(--hl-fg-muted) !important; }
::selection { background: var(--hl-tint-2); color: var(--hl-fg); }

/* Visible keyboard focus everywhere (a11y priority 1) */
:focus-visible {
    outline: 3px solid var(--hl-ring) !important;
    outline-offset: 2px !important;
}
button, [role="button"], a, .btn, .nav-link, .form-check-input, select { cursor: pointer; }

/* ---------- Layout: sidebar ---------- */
.aside-menu-container {
    background: var(--hl-surface) !important;
    border-right: 1px solid var(--hl-border);
    box-shadow: none;
}
.aside-menu-container__aside-logo {
    height: 72px;
    border-bottom: 1px solid var(--hl-border) !important;
}
.aside-menu-container__aside-search .form-control {
    background: var(--hl-surface-2);
    border-color: var(--hl-border);
    border-radius: var(--hl-radius-sm);
}
.aside-menu-container__aside-menu .nav-item .nav-link {
    margin: 2px 12px;
    padding-top: .65rem;
    padding-bottom: .65rem;
    border-left: 0 !important;
    border-radius: var(--hl-radius-sm);
    color: var(--hl-fg-muted);
    font-weight: 500;
    transition: background-color .18s var(--hl-ease), color .18s var(--hl-ease);
}
.aside-menu-container__aside-menu .nav-item .nav-link i,
.aside-menu-container__aside-menu .nav-item .nav-link svg { color: inherit; opacity: .9; }
.aside-menu-container__aside-menu .nav-item .nav-link:hover {
    background: var(--hl-tint) !important;
    color: var(--hl-primary-hover) !important;
}
.aside-menu-container__aside-menu .nav-item.active > .nav-link {
    background: var(--hl-primary) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px -6px rgba(var(--hl-primary-rgb), .6);
}
.aside-menu-container__aside-menu .nav-item.active > .nav-link * { color: #fff !important; fill: currentColor; }

/* ---------- Layout: top header ---------- */
.header, .top-navbar, #nav-header {
    background: rgba(255, 255, 255, .85) !important;
    backdrop-filter: saturate(160%) blur(10px);
}
.header { border-bottom: 1px solid var(--hl-border); min-height: 72px; }
.top-navbar .nav-link { color: var(--hl-fg-muted); font-weight: 600; border-radius: var(--hl-radius-sm); }
.top-navbar .nav-link.active, .top-navbar .nav-item.active .nav-link {
    color: var(--hl-primary) !important;
    border-bottom-color: var(--hl-primary) !important;
}

/* ---------- Surfaces ---------- */
.card {
    border: 1px solid var(--hl-border) !important;
    border-radius: var(--hl-radius-lg) !important;
    box-shadow: var(--hl-shadow) !important;
    background: var(--hl-surface);
}
.card .card-header { background: transparent; border-bottom: 1px solid var(--hl-border); }
.shadow, .shadow-md, .shadow-sm { box-shadow: var(--hl-shadow) !important; }
.rounded-10, .rounded-15, .rounded-20 { border-radius: var(--hl-radius-lg) !important; }

/* Dashboard stat widgets */
.dashboard-widget, .shadow-md.rounded-10, [class*="widget"] .card {
    transition: transform .2s var(--hl-ease), box-shadow .2s var(--hl-ease);
}
.dashboard-widget:hover { transform: translateY(-2px); box-shadow: var(--hl-shadow-lg) !important; }
.bg-primary { background-color: var(--hl-primary) !important; }
.bg-success { background-color: var(--hl-accent) !important; }
.bg-light-primary { background-color: var(--hl-tint) !important; }

/* ---------- Buttons (min 44px touch target) ---------- */
.btn {
    min-height: 44px;
    border-radius: var(--hl-radius-sm) !important;
    font-weight: 600;
    letter-spacing: .01em;
    transition: background-color .18s var(--hl-ease), border-color .18s var(--hl-ease),
                box-shadow .18s var(--hl-ease), transform .12s var(--hl-ease);
}
.btn:active { transform: translateY(1px); }
.btn.btn-sm { min-height: 36px; }
.btn.btn-icon, .btn.px-0, .btn-link { min-height: auto; }
.btn-primary {
    background-color: var(--hl-primary) !important;
    border-color: var(--hl-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px -4px rgba(var(--hl-primary-rgb), .55);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--hl-primary-hover) !important;
    border-color: var(--hl-primary-hover) !important;
}
.btn-outline-primary { color: var(--hl-primary) !important; border-color: var(--hl-primary) !important; }
.btn-outline-primary:hover { background: var(--hl-primary) !important; color: #fff !important; }
.btn-success { background-color: var(--hl-accent-strong) !important; border-color: var(--hl-accent-strong) !important; }
.btn-secondary, .btn-light { background: var(--hl-surface-2) !important; border: 1px solid var(--hl-border) !important; color: var(--hl-fg) !important; }
.btn-secondary:hover, .btn-light:hover { background: var(--hl-tint) !important; }
.text-primary { color: var(--hl-primary) !important; }
.text-success { color: var(--hl-accent-strong) !important; }
.link-info { color: var(--hl-primary) !important; font-weight: 600; }

/* ---------- Forms ---------- */
.form-label { color: var(--hl-fg); font-weight: 600; margin-bottom: .4rem; }
.form-control, .form-select, .select2-container--bootstrap5 .select2-selection,
.select2-container .select2-selection--single {
    min-height: 44px;
    border-radius: var(--hl-radius-sm) !important;
    border: 1px solid var(--hl-border) !important;
    background-color: var(--hl-surface);
    color: var(--hl-fg) !important;
    font-size: .9375rem;
    transition: border-color .15s var(--hl-ease), box-shadow .15s var(--hl-ease);
}
.form-control::placeholder { color: #8094A0; }
.form-control:focus, .form-select:focus,
.select2-container--focus .select2-selection, .select2-container--open .select2-selection {
    border-color: var(--hl-primary) !important;
    box-shadow: 0 0 0 4px var(--hl-ring) !important;
}
.form-check-input:checked { background-color: var(--hl-primary); border-color: var(--hl-primary); }
.form-check-input:focus { box-shadow: 0 0 0 4px var(--hl-ring); border-color: var(--hl-primary); }
.required:after, .required::after { color: var(--hl-danger); }
.invalid-feedback, .error, .text-danger { color: var(--hl-danger) !important; }

/* ---------- Tables (Livewire / Rappasoft) ---------- */
.table { color: var(--hl-fg); }
.table > thead > tr > th, .table thead th {
    background: var(--hl-surface-2) !important;
    color: var(--hl-fg-muted) !important;
    font-size: .75rem;
    font-weight: 700 !important;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--hl-border) !important;
}
.table.table-striped tbody, .table.table-striped tbody tr > * { background-color: var(--hl-surface) !important; }
.table.table-striped tbody tr:nth-of-type(odd) > * { background-color: #FAFDFE !important; }
.table tbody tr { transition: background-color .15s var(--hl-ease); }
.table tbody tr:hover > * { background-color: var(--hl-tint) !important; }
.table td { border-color: var(--hl-border) !important; color: var(--hl-fg); }
.table.table-striped { box-shadow: var(--hl-shadow-sm); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); overflow: hidden; }
.table-responsive { border-radius: var(--hl-radius); }

/* Pagination */
.page-link { color: var(--hl-primary); border-color: var(--hl-border); border-radius: var(--hl-radius-sm) !important; margin: 0 2px; min-width: 38px; text-align: center; }
.page-item.active .page-link { background: var(--hl-primary) !important; border-color: var(--hl-primary) !important; color: #fff !important; }
.page-link:hover { background: var(--hl-tint); color: var(--hl-primary-hover); }

/* ---------- Badges / status chips ---------- */
.badge {
    border-radius: 999px !important;
    padding: .38em .8em;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
.badge.bg-primary, .badge-primary, .badge.bg-light-primary { background: var(--hl-tint) !important; color: var(--hl-primary-hover) !important; }
.badge.bg-success, .badge-success, .badge.bg-light-success { background: #DCFCE7 !important; color: #166534 !important; }
.badge.bg-danger, .badge-danger, .badge.bg-light-danger { background: #FEE2E2 !important; color: #991B1B !important; }
.badge.bg-warning, .badge-warning, .badge.bg-light-warning { background: #FEF3C7 !important; color: #92400E !important; }
.badge.bg-info, .badge-info, .badge.bg-light-info { background: #E0F2FE !important; color: #075985 !important; }

/* ---------- Dropdowns / modals / alerts ---------- */
.dropdown-menu {
    border: 1px solid var(--hl-border) !important;
    border-radius: var(--hl-radius) !important;
    box-shadow: var(--hl-shadow-lg) !important;
    padding: .4rem;
}
.dropdown-item { border-radius: var(--hl-radius-sm); padding: .55rem .8rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--hl-tint); color: var(--hl-primary-hover); }
.dropdown-item.active, .dropdown-item:active { background: var(--hl-primary); color: #fff; }
.modal-content { border: 0; border-radius: var(--hl-radius-lg) !important; box-shadow: var(--hl-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--hl-border); }
.modal-footer { border-top: 1px solid var(--hl-border); }
.modal-backdrop.show { opacity: .45; background: #0F2A37; }
.alert { border-radius: var(--hl-radius) !important; border-width: 1px; }
.alert-success { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.alert-danger { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }

/* Nav tabs / pills */
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--hl-fg-muted); font-weight: 600; }
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover { color: var(--hl-primary) !important; border-bottom-color: var(--hl-primary) !important; background: transparent; }
.nav-pills .nav-link.active { background: var(--hl-primary); }

/* Calendar (FullCalendar) */
.fc .fc-button-primary { background: var(--hl-primary) !important; border-color: var(--hl-primary) !important; border-radius: var(--hl-radius-sm) !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--hl-primary-hover) !important; }
.fc .fc-daygrid-day.fc-day-today { background: var(--hl-tint) !important; }

/* Flatpickr / datepicker */
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--hl-primary) !important; border-color: var(--hl-primary) !important; }

/* Scrollbar */
.sidebar-scrolling::-webkit-scrollbar, .table-responsive::-webkit-scrollbar { width: 8px; height: 8px; }
.sidebar-scrolling::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb { background: #C8DCE4; border-radius: 8px; }

/* ---------- Auth pages ---------- */
.authImage {
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(34, 211, 238, .18), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(5, 150, 105, .14), transparent 60%),
        var(--hl-bg) !important;
}
.authImage .width-540 { max-width: 480px; width: 100%; }
.authImage .bg-white.rounded-15 {
    border: 1px solid var(--hl-border);
    border-radius: 20px !important;
    box-shadow: var(--hl-shadow-lg) !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2rem !important;
}
.authImage h1 { font-size: 1.75rem; }
.authImage .d-grid .btn-primary { min-height: 48px; font-size: 1rem; }
footer .copyright { color: var(--hl-fg-muted); padding: 1rem 0; }

/* ---------- Dark mode keeps teal accent ---------- */
.dark-mode, body.dark { --hl-surface: #13202A; }

/* ---------- Responsive ---------- */
@media (max-width: 575.98px) {
    .card { border-radius: var(--hl-radius) !important; }
    .authImage .bg-white.rounded-15 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Headings inside coloured widgets keep white text */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6 { color: #fff !important; }
.bg-primary .text-white, .bg-success .text-white { color: #fff !important; }