/* ==========================================================================
   H-Care portals — modern visual refresh (HUNZA operational + Owner).

   Presentation-only override stylesheet. It is loaded AFTER
   style.bundle.css and the portal brand sheet (hcare-brand.css for HUNZA,
   hcare-owner-brand.css for the Owner Portal), and must never change layout
   structure, business behaviour, routes or permissions. It only restyles the
   existing Metronic components (cards, buttons, inputs, tables, navigation).

   Brand colours are read from the active portal's CSS variables
   (`--bs-primary`, `--bs-primary-rgb`, `--bs-primary-active`, `--bs-primary-light`)
   so the same neutral modernisation applies to both portals.

   Design direction:
     - neutral light application background
     - white floating cards with a 16px radius and soft shadow
     - a consistent radius scale (16 card / 10 control / 8 small)
     - calmer typography hierarchy and softer navigation states
     - modern buttons, inputs and cleaner tables
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root,
[data-bs-theme="light"] {
    /* Surfaces */
    --bs-app-bg-color: #F4F5F7;
    --bs-app-blank-bg-color: #F4F5F7;

    /* Neutral palette (harmonised with the new background) */
    --bs-gray-100: #F5F6F8;
    --bs-gray-200: #EAECF0;
    --bs-gray-300: #D0D5DD;
    --bs-gray-400: #98A2B3;
    --bs-gray-500: #667085;
    --bs-gray-600: #475467;
    --bs-gray-700: #344054;
    --bs-gray-800: #1D2939;
    --bs-gray-900: #101828;

    /* Light utility tokens follow the same neutral so `.bg-light` and
       `.btn-light` match the new surface tone. */
    --bs-light: #F5F6F8;
    --bs-light-rgb: 245, 246, 248;

    /* Borders */
    --bs-border-color: #EAECF0;
    --bs-border-color-translucent: rgba(16, 24, 40, .08);
    --bs-border-dashed-color: #D0D5DD;

    /* Text hierarchy — nudge the demo greys toward a clearer, neutral scale */
    --bs-text-muted: #667085;
    --bs-text-gray-400: #98A2B3;
    --bs-text-gray-500: #667085;
    --bs-text-gray-600: #475467;
    --bs-text-gray-700: #344054;
    --bs-text-gray-800: #1D2939;
    --bs-text-gray-900: #101828;

    /* Component states — replace the demo orange with the active brand colour */
    --bs-component-active-color: #ffffff;
    --bs-component-active-bg: var(--bs-primary-active);
    --bs-component-hover-color: var(--bs-primary-active);
    --bs-component-hover-bg: #F5F6F8;
    --bs-component-checked-color: #ffffff;
    --bs-component-checked-bg: var(--bs-primary-active);

    /* Cards — white, floating */
    --bs-card-border-color: #EAECF0;
    --bs-card-border-radius: 16px;
    --bs-card-box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 20px -6px rgba(16, 24, 40, .09);
    --bs-card-cap-bg: transparent;

    /* Popovers / dropdowns */
    --bs-menu-dropdown-box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .18);

    /* H-Care shared tokens */
    --hc-radius-card: 16px;
    --hc-radius-control: 10px;
    --hc-radius-sm: 8px;
    --hc-border: #EAECF0;
    --hc-border-soft: #F1F3F5;
    --hc-shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 20px -6px rgba(16, 24, 40, .09);
    --hc-shadow-pop: 0 12px 32px -8px rgba(16, 24, 40, .18);
    --hc-focus-ring: 0 0 0 3px rgba(var(--bs-primary-rgb), .18);
}

/* ==========================================================================
   2. Base surfaces & typography
   ========================================================================== */
body,
.app-default {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -0.01em;
}

/* Toolbar heading hierarchy */
.page-heading {
    letter-spacing: -0.015em;
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--bs-gray-400);
}

/* ==========================================================================
   3. HUNZA header (brown brand retained, softened chrome)
   ========================================================================== */
.app-header {
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}

[data-bs-theme="light"] .app-header {
    border-bottom: 0;
}

/* Keep the top navigation menu on-brand: the active/hover states inherit the
   header menu variables, which still defaulted to the demo orange. */
#kt_app_header_menu {
    --bs-menu-link-color-hover: #ffffff;
    --bs-menu-link-color-show: #ffffff;
    --bs-menu-link-color-here: #ffffff;
    --bs-menu-link-color-active: #ffffff;
    --bs-menu-link-bg-color-hover: rgba(255, 255, 255, .10);
    --bs-menu-link-bg-color-show: rgba(255, 255, 255, .10);
    --bs-menu-link-bg-color-here: rgba(255, 255, 255, .12);
    --bs-menu-link-bg-color-active: rgba(255, 255, 255, .16);
}

#kt_app_header_menu .menu-link {
    border-radius: 10px;
}

/* The top-level bar is dark brown (white treatment), but its dropdown panels
   are white surfaces — give those items the same soft brand state as the
   sidebar so the active item stays visible. */
#kt_app_header_menu .menu-sub .menu-link.active,
#kt_app_header_menu .menu-sub .menu-item.here > .menu-link {
    background-color: var(--bs-primary-light);
    color: var(--bs-primary-active);
}

#kt_app_header_menu .menu-sub .menu-link.active .menu-title,
#kt_app_header_menu .menu-sub .menu-item.here > .menu-link .menu-title,
#kt_app_header_menu .menu-sub .menu-link.active .menu-icon,
#kt_app_header_menu .menu-sub .menu-link.active .menu-icon i {
    color: var(--bs-primary-active);
}

#kt_app_header_menu .menu-sub .menu-link:hover:not(.active):not(.here) {
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-900);
}

#kt_app_header_menu .menu-sub .menu-link:hover:not(.active):not(.here) .menu-title {
    color: var(--bs-gray-900);
}

/* ==========================================================================
   4. Sidebar — softer, modern states
   ========================================================================== */
.app-sidebar {
    border-right-color: #ECEEF2 !important;
}

.app-sidebar .menu .menu-link {
    border-radius: var(--hc-radius-control);
    transition: background-color .15s ease, color .15s ease;
}

.app-sidebar .menu .menu-item {
    margin-bottom: 2px;
}

/* Icon-to-label gap: a little more breathing room between the nav icon and
   its label. Icons, font and layout are unchanged. */
.app-sidebar .menu .menu-link .menu-icon,
.app-sidebar .menu .menu-link .menu-bullet {
    margin-right: 0.875rem;
}

/* Section (accordion) headings: compact uppercase labels */
.app-sidebar .menu > .menu-item.menu-accordion > .menu-link > .menu-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-gray-500) !important;
}

/* Leaf links: soft hover */
.app-sidebar .menu .menu-sub .menu-link:hover:not(.active):not(.here),
.app-sidebar .menu > .menu-item:not(.menu-accordion) > .menu-link:hover:not(.active) {
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-900);
}

.app-sidebar .menu .menu-sub .menu-link:hover:not(.active):not(.here) .menu-title,
.app-sidebar .menu > .menu-item:not(.menu-accordion) > .menu-link:hover:not(.active) .menu-title {
    color: var(--bs-gray-900);
}

/* Leaf links: brand active pill */
.app-sidebar .menu .menu-sub .menu-link.active,
.app-sidebar .menu > .menu-item:not(.menu-accordion) > .menu-link.active {
    background-color: var(--bs-primary-light);
    color: var(--bs-primary-active);
    font-weight: 600;
}

.app-sidebar .menu .menu-sub .menu-link.active .menu-title,
.app-sidebar .menu > .menu-item:not(.menu-accordion) > .menu-link.active .menu-title {
    color: var(--bs-primary-active);
}

.app-sidebar .menu .menu-sub .menu-link.active .menu-icon,
.app-sidebar .menu .menu-sub .menu-link.active .menu-icon i,
.app-sidebar .menu .menu-sub .menu-link.active .menu-icon .svg-icon,
.app-sidebar .menu > .menu-item:not(.menu-accordion) > .menu-link.active .menu-icon,
.app-sidebar .menu > .menu-item:not(.menu-accordion) > .menu-link.active .menu-icon i,
.app-sidebar .menu > .menu-item:not(.menu-accordion) > .menu-link.active .menu-icon .svg-icon {
    color: var(--bs-primary-active);
}

/* ==========================================================================
   5. Toolbar spacing
   ========================================================================== */
.app-toolbar.pt-10 {
    padding-top: 24px !important;
}

/* ==========================================================================
   6. Cards — white floating surfaces
   ========================================================================== */
.card {
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-card);
    box-shadow: var(--hc-shadow-card);
}

.card > .card-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--hc-border-soft);
}

.card > .card-body {
    padding: 22px 24px;
}

.card > .card-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--hc-border-soft);
}

/* Metronic card-flush already removes header/footer borders; keep that. */
.card.card-flush > .card-header,
.card.card-flush > .card-footer {
    border-color: transparent !important;
}

.card .card-header .card-title,
.card .card-header .card-title .card-label {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ==========================================================================
   7. Buttons — modern, rounded, confident
   ========================================================================== */
.btn {
    border-radius: var(--hc-radius-control);
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease,
                box-shadow .15s ease, color .15s ease, transform .15s ease;
}

.btn-sm {
    border-radius: var(--hc-radius-sm);
}

.btn-lg {
    border-radius: 12px;
}

/* Metronic disables button shadows with a 6-class `:not(...)` rule, so the
   primary shadow needs to be forced. It stays presentational only and is
   tinted with the active portal's primary colour. */
.btn.btn-primary {
    box-shadow: 0 1px 2px rgba(var(--bs-primary-rgb), .28) !important;
}

.btn.btn-primary:hover:not(:disabled):not(.disabled) {
    box-shadow: 0 6px 14px -4px rgba(var(--bs-primary-rgb), .34) !important;
}

/* The primary hover/focus state switches the background to the dark brand
   brown, where the default dark inverse text becomes unreadable. Keep it white. */
.btn.btn-primary:hover:not(:disabled):not(.disabled),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary.active,
.btn.btn-primary.show {
    color: #ffffff;
}

.btn.btn-primary:hover:not(:disabled):not(.disabled) i,
.btn.btn-primary:hover:not(:disabled):not(.disabled) .svg-icon,
.btn.btn-primary:focus:not(.btn-active) i,
.btn.btn-primary:focus:not(.btn-active) .svg-icon,
.btn.btn-primary.active i,
.btn.btn-primary.active .svg-icon {
    color: #ffffff;
}

/* Keep the neutral light button consistent, but never clobber the
   `btn-active-light-*` variants (they intentionally turn brand-coloured). */
.btn.btn-light:not([class*="btn-active-light"]) {
    background-color: var(--bs-gray-100);
    border-color: var(--bs-gray-100);
    color: var(--bs-gray-700);
}

.btn.btn-light:not([class*="btn-active-light"]):hover:not(:disabled):not(.disabled) {
    background-color: var(--bs-gray-200);
    border-color: var(--bs-gray-200);
    color: var(--bs-gray-800);
}

.btn.btn-icon {
    border-radius: var(--hc-radius-control);
}

/* Keep icon/gray buttons visually quiet inside the dark header */
[data-bs-theme="light"] .app-header .btn-icon-gray-500:hover,
[data-bs-theme="light"] .app-header .btn-custom:hover {
    color: #ffffff;
}

/* ==========================================================================
   8. Forms — modern inputs, selects and labels
   ========================================================================== */
.form-label {
    font-weight: 600;
    color: var(--bs-gray-800);
    margin-bottom: .4rem;
}

.form-text {
    color: var(--bs-gray-500);
}

.form-control,
.form-select {
    border-radius: var(--hc-radius-control);
    border-color: #E4E7EC;
    color: var(--bs-gray-800);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: var(--hc-focus-ring);
}

.form-control-solid:focus,
.form-select-solid:focus {
    border-color: var(--bs-primary);
    box-shadow: var(--hc-focus-ring);
}

.input-group-text {
    border-radius: var(--hc-radius-control);
    border-color: #E4E7EC;
    color: var(--bs-gray-600);
}

/* Metronic hard-codes the demo orange for checked checkboxes/radios in
   style.bundle.css, so it is overridden here with the active brand colour
   (white tick/swatch stays legible). */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--bs-primary-active);
    border-color: var(--bs-primary-active);
}

.form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: var(--hc-focus-ring);
}

/* ==========================================================================
   9. Tables — cleaner rows
   ========================================================================== */
.table > :not(caption) > * > * {
    border-color: var(--hc-border-soft);
}

.table:not(.table-bordered).table-row-dashed tr {
    border-bottom-style: solid;
    border-bottom-color: var(--hc-border-soft);
}

.table > thead > tr > th {
    color: var(--bs-gray-500);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom-color: var(--hc-border);
    padding-top: 12px;
    padding-bottom: 12px;
}

.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--bs-gray-100);
}

/* ==========================================================================
   10. Badges, alerts, progress, pagination
   ========================================================================== */
.badge {
    border-radius: var(--hc-radius-sm);
    font-weight: 600;
}

.alert {
    border-radius: 12px;
    border: 1px solid transparent;
}

.progress {
    border-radius: 999px;
}

.progress-bar {
    border-radius: 999px;
}

.pagination {
    gap: 2px;
}

.pagination .page-link {
    border-radius: var(--hc-radius-sm);
    border-color: var(--hc-border);
    color: var(--bs-gray-700);
    min-width: 34px;
    text-align: center;
}

.pagination .page-link:hover {
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-900);
}

.pagination .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-primary-inverse);
    box-shadow: 0 1px 2px rgba(var(--bs-primary-rgb), .28);
}

.pagination .page-item.disabled .page-link {
    color: var(--bs-gray-400);
}

/* ==========================================================================
   11. Dropdowns, menus & modals
   ========================================================================== */
.dropdown-menu,
.menu-sub-dropdown {
    border-radius: 12px;
    border: 1px solid var(--hc-border);
    box-shadow: var(--hc-shadow-pop);
}

.dropdown-item {
    border-radius: var(--hc-radius-sm);
}

.modal-content {
    border-radius: var(--hc-radius-card);
    border: 1px solid var(--hc-border);
    box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .25);
}

.modal-header,
.modal-footer {
    border-color: var(--hc-border-soft);
}

/* ==========================================================================
   12. Dashboard custom components (reconcile with hcare-brand.css)
   ========================================================================== */
.hc-stat {
    border-radius: var(--hc-radius-card);
    border: 1px solid var(--hc-border);
    box-shadow: var(--hc-shadow-card);
}

.hc-stat:hover {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 28px -8px rgba(16, 24, 40, .16);
    border-color: var(--bs-gray-300);
}

.hc-stat::before {
    border-radius: var(--hc-radius-card) 0 0 var(--hc-radius-card);
}

.hc-stat__icon {
    border-radius: var(--hc-radius-sm);
}

/* Dashboard icon tiles — one consistent system of line icons inside soft,
   rounded, semantically-tinted containers. Applied by the HUNZA dashboard and
   its KPI cards, replacing the old saturated gradient boxes: muted washes keep
   the dashboard premium and calm instead of overly colorful. */
.hc-icon-tile {
    --hc-tile-fg: #667085;
    --hc-tile-bg: #F2F4F7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background-color: var(--hc-tile-bg);
    color: var(--hc-tile-fg);
    flex: 0 0 auto;
    line-height: 1;
    transition: background-color .15s ease, color .15s ease;
}

.hc-icon-tile i {
    font-size: 1.4rem;
    line-height: 1;
}

.hc-icon-tile--sm {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.hc-icon-tile--sm i {
    font-size: 1.15rem;
}

.hc-icon-tile--primary   { --hc-tile-fg: #654321; --hc-tile-bg: #F4EBDF; }
.hc-icon-tile--info      { --hc-tile-fg: #0B84C4; --hc-tile-bg: #E9F4FB; }
.hc-icon-tile--success   { --hc-tile-fg: #1A9A58; --hc-tile-bg: #E8F7EF; }
.hc-icon-tile--warning   { --hc-tile-fg: #B48200; --hc-tile-bg: #FBF3DD; }
.hc-icon-tile--danger    { --hc-tile-fg: #CE2F55; --hc-tile-bg: #FBECEF; }
.hc-icon-tile--secondary { --hc-tile-fg: #667085; --hc-tile-bg: #F2F4F7; }

.hc-hero {
    /* `.rounded` in Metronic is !important; match the 16px card radius so the
       hero header meets the card edge cleanly. */
    border-radius: var(--hc-radius-card) var(--hc-radius-card) 0 0 !important;
}

.hc-welcome {
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-card);
    box-shadow: var(--hc-shadow-card);
}

.hc-hero-tile {
    border-radius: var(--hc-radius-sm);
}

.hc-hero-tile .hc-hero-tile__icon {
    border-radius: var(--hc-radius-sm);
}

.hc-target-row {
    border-radius: 12px !important;
    border-color: var(--bs-gray-300) !important;
}

/* ==========================================================================
   13. Misc — separated footer, symbols, empty states
   ========================================================================== */
.app-footer {
    color: var(--bs-gray-500);
}

.separator {
    border-color: var(--hc-border-soft);
}

.symbol-label {
    font-weight: 600;
}