/* ==========================================================================
   Healty × shadcn — dashboard design layer
   Structure & component styling follow Kiranism/next-shadcn-dashboard-starter
   (shadcn/ui: Sidebar, Header, Card/KPI, DataTable, Button, Input, Badge, Dialog,
   Tabs). Brand colours (medical teal) and the Healty 3D motion layer are kept.
   Design-system checks from ui-ux-pro-max: compound Card pattern, semantic
   tables with horizontal scroll, stagger-list motion (300-450ms, back-out),
   contrast ≥ 4.5:1, visible focus rings, 44px targets on touch devices,
   monospaced numerals for data.
   ========================================================================== */

:root {
    --sc-background: #F7FAFB;
    --sc-foreground: #0B1F29;
    --sc-card: #FFFFFF;
    --sc-muted: #F1F5F7;
    --sc-muted-foreground: #576A74;
    --sc-border: #E2E9ED;
    --sc-input: #DCE5EA;
    --sc-primary: #0E7490;
    --sc-primary-hover: #0C6680;
    --sc-primary-foreground: #FFFFFF;
    --sc-accent: #E7F5F8;
    --sc-accent-foreground: #0B5368;
    --sc-destructive: #DC2626;
    --sc-success: #059669;
    --sc-ring: rgba(14, 116, 144, .32);
    --sc-sidebar: rgba(250, 252, 253, .97);
    --sc-sidebar-border: #E4ECEF;
    --sc-radius: .625rem;          /* 10px — shadcn --radius */
    --sc-radius-md: .5rem;
    --sc-radius-sm: .375rem;
    --sc-shadow-xs: 0 1px 2px 0 rgba(11, 31, 41, .05);
    --sc-shadow-sm: 0 1px 3px 0 rgba(11, 31, 41, .08), 0 1px 2px -1px rgba(11, 31, 41, .08);
    --sc-shadow-md: 0 4px 6px -1px rgba(11, 31, 41, .08), 0 2px 4px -2px rgba(11, 31, 41, .06);
    --sc-shadow-lg: 0 10px 15px -3px rgba(11, 31, 41, .1), 0 4px 6px -4px rgba(11, 31, 41, .08);
    --sc-font: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sc-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --sc-ease: cubic-bezier(.2, .8, .2, 1);
    --sc-back: cubic-bezier(.34, 1.56, .64, 1);   /* back.out(1.4) */
    --sc-sidebar-w: 16rem;
    --sc-sidebar-w-icon: 4rem;
}

/* ---------- Base ---------- */
html.hl3d body {
    font-family: var(--sc-font) !important;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--sc-foreground);
    letter-spacing: -.003em;
    -webkit-font-smoothing: antialiased;
}
html.hl3d body h1, html.hl3d body h2, html.hl3d body h3, html.hl3d body h4, html.hl3d body h5, html.hl3d body h6 {
    font-family: var(--sc-font) !important;
    color: var(--sc-foreground);
    letter-spacing: -.02em;
}
html.hl3d body .text-muted, html.hl3d body .text-gray-600, html.hl3d body .text-gray-700 { color: var(--sc-muted-foreground) !important; }
html.hl3d body :focus-visible { outline: 0 !important; box-shadow: 0 0 0 3px var(--sc-ring) !important; }

/* ---------- App shell: sidebar ---------- */
html.hl3d body .aside-menu-container {
    width: var(--sc-sidebar-w) !important;
    min-width: var(--sc-sidebar-w) !important;
    display: flex; flex-direction: column;
    background: var(--sc-sidebar) !important;
    border-right: 1px solid var(--sc-sidebar-border) !important;
    box-shadow: none !important;
}
html.hl3d body .wrapper { padding-left: var(--sc-sidebar-w); }
html.hl3d body .aside-menu-container__aside-logo {
    height: 3.5rem; padding: 0 .5rem; border-bottom: 0 !important; flex: 0 0 auto;
}
html.hl3d body .aside-menu-container__aside-logo .sidebar-btn { display: none !important; }   /* trigger lives in the header */
.hl-brand {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .375rem .5rem; border-radius: var(--sc-radius-md);
    color: var(--sc-foreground) !important; min-width: 0;
    transition: background-color .15s var(--sc-ease);
}
.hl-brand:hover { background: var(--sc-accent); }
.hl-brand-logo {
    flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: var(--sc-radius-md);
    display: grid; place-items: center; overflow: hidden;
    background: linear-gradient(145deg, #E7F5F8, #FFFFFF);
    border: 1px solid var(--sc-border);
}
.hl-brand-logo img { width: 1.5rem !important; height: 1.5rem !important; object-fit: contain; }
.hl-brand-text { display: grid; line-height: 1.2; min-width: 0; }
.hl-brand-text strong { font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-brand-text small { font-size: .75rem; color: var(--sc-muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.hl3d body .aside-menu-container__aside-search { padding: .25rem .5rem .5rem !important; margin: 0 !important; flex: 0 0 auto; }
html.hl3d body .aside-menu-container__aside-search .form-control {
    height: 2rem !important; min-height: 2rem !important; padding: .25rem .5rem .25rem 2rem !important;
    font-size: .8125rem !important; border-radius: var(--sc-radius-md) !important;
    background: var(--sc-card) !important; box-shadow: var(--sc-shadow-xs) !important;
}
html.hl3d body .aside-menu-container__search-icon { left: .65rem; }
html.hl3d body .sidebar-scrolling { flex: 1 1 auto; min-height: 0; height: auto !important; padding: 0 .5rem .5rem; }
.hl-sb-label {
    display: flex; align-items: center; height: 2rem; padding: 0 .5rem;
    font-size: .75rem; font-weight: 500; color: var(--sc-muted-foreground);
}
html.hl3d body .aside-menu-container__aside-menu .nav-item .nav-link {
    display: flex !important; align-items: center; gap: .5rem;
    height: 2rem; margin: 1px 0 !important; padding: 0 .5rem !important;
    border: 0 !important; border-radius: var(--sc-radius-md) !important;
    font-size: .875rem; font-weight: 400; color: #34474F !important;
    background: transparent !important; box-shadow: none !important; transform: none !important;
    transition: background-color .15s var(--sc-ease), color .15s var(--sc-ease) !important;
}
html.hl3d body .aside-menu-container__aside-menu .nav-item .nav-link .aside-menu-icon {
    width: 1rem; padding: 0 !important; display: inline-flex; justify-content: center; font-size: .9rem; color: inherit;
}
html.hl3d body .aside-menu-container__aside-menu .nav-item .nav-link:hover {
    background: var(--sc-muted) !important; color: var(--sc-foreground) !important; transform: none !important;
}
html.hl3d body .aside-menu-container__aside-menu .nav-item.active > .nav-link {
    background: var(--sc-accent) !important; color: var(--sc-accent-foreground) !important; font-weight: 500;
}
html.hl3d body .aside-menu-container__aside-menu .nav-item.active > .nav-link * { color: var(--sc-accent-foreground) !important; }
html.hl3d body .aside-menu-container__aside-menu .nav-item.active > .nav-link::before {
    content: ""; position: absolute; left: -.5rem; top: .45rem; bottom: .45rem; width: 3px; border-radius: 0 3px 3px 0;
    background: var(--sc-primary);
}
html.hl3d body .aside-menu-container__aside-menu .nav-item { position: relative; }
html.hl3d body .aside-submenu {
    margin: 2px 0 2px .9rem !important; padding: 0 0 0 .6rem !important; border-left: 1px solid var(--sc-sidebar-border);
}
html.hl3d body .aside-submenu .nav-item .nav-link { height: 1.75rem; font-size: .8125rem; padding-left: .5rem !important; }
.hl-sb-user {
    flex: 0 0 auto; display: flex; align-items: center; gap: .5rem;
    margin: .5rem; padding: .5rem; border-radius: var(--sc-radius-md);
    color: var(--sc-foreground) !important;
    transition: background-color .15s var(--sc-ease);
}
.hl-sb-user:hover { background: var(--sc-muted); }
.hl-sb-avatar { width: 2rem; height: 2rem; border-radius: var(--sc-radius-md); object-fit: cover; flex: 0 0 auto; border: 1px solid var(--sc-border); }
.hl-sb-user-text { display: grid; min-width: 0; line-height: 1.25; flex: 1 1 auto; }
.hl-sb-user-text strong { font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-sb-user-text small { font-size: .75rem; color: var(--sc-muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-sb-user-chev { font-size: .7rem; color: var(--sc-muted-foreground); }

/* collapsed = shadcn "icon" mode */
@media (min-width: 1200px) {
    html.hl3d body .aside-menu-container.collapsed-menu { width: var(--sc-sidebar-w-icon) !important; min-width: var(--sc-sidebar-w-icon) !important; }
    html.hl3d body.collapsed-menu .wrapper { padding-left: var(--sc-sidebar-w-icon) !important; }
    html.hl3d body .aside-menu-container.collapsed-menu .sidebar-logo { display: flex !important; }
    html.hl3d body .aside-menu-container.collapsed-menu .hl-brand-text,
    html.hl3d body .aside-menu-container.collapsed-menu .hl-sb-label,
    html.hl3d body .aside-menu-container.collapsed-menu .hl-sb-user-text,
    html.hl3d body .aside-menu-container.collapsed-menu .hl-sb-user-chev { display: none !important; }
    html.hl3d body .aside-menu-container.collapsed-menu .nav-item .nav-link { width: 2rem !important; min-width: 2rem !important; justify-content: center; margin: 2px auto !important; padding: 0 !important; }
    html.hl3d body .aside-menu-container.collapsed-menu .sidebar-scrolling { padding: .5rem .5rem; }
    html.hl3d body .aside-menu-container.collapsed-menu .hl-sb-user { justify-content: center; }
}

/* ---------- App shell: header ---------- */
html.hl3d body .header, html.hl3d body header.header {
    height: 3.5rem !important; min-height: 3.5rem !important;
    padding: 0 1rem !important;
    background: rgba(247, 250, 251, .9) !important;
    border-bottom: 1px solid var(--sc-border) !important;
    box-shadow: none !important;
}
html.hl3d body .wrapper > .container-fluid:first-child { position: sticky; top: 0; z-index: 100; }
.hl-header-left { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
html.hl3d body .hl-trigger {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; min-height: 1.75rem !important; padding: 0 !important;
    border-radius: var(--sc-radius-md) !important; color: var(--sc-foreground) !important;
    background: transparent !important; box-shadow: none !important; font-size: .95rem;
}
html.hl3d body .hl-trigger:hover { background: var(--sc-muted) !important; }
.hl-header-sep { width: 1px; height: 1rem; background: var(--sc-border); margin-right: .25rem; }
/* section tabs (sub menu) as shadcn Tabs */
html.hl3d body #nav-header, html.hl3d body .top-navbar { background: transparent !important; }
html.hl3d body #nav-header .navbar-nav {
    display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--sc-radius);
    background: var(--sc-muted);
}
html.hl3d body #nav-header .navbar-nav .nav-item { margin: 0 !important; }
html.hl3d body #nav-header .navbar-nav .nav-link {
    display: inline-flex; align-items: center; height: 1.75rem; padding: 0 .75rem !important;
    font-size: .8125rem; font-weight: 500; color: var(--sc-muted-foreground) !important;
    border-radius: calc(var(--sc-radius) - 3px); border: 0 !important;
    transition: color .15s var(--sc-ease), background-color .15s var(--sc-ease), box-shadow .15s var(--sc-ease);
}
html.hl3d body #nav-header .navbar-nav .nav-link:hover { color: var(--sc-foreground) !important; }
html.hl3d body #nav-header .navbar-nav .nav-link.active {
    background: var(--sc-card) !important; color: var(--sc-foreground) !important;
    box-shadow: var(--sc-shadow-sm);
}
html.hl3d body #nav-header .navbar-nav .nav-link.active::after { display: none !important; }
.hl-search-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    height: 2rem; width: 15rem; padding: 0 .375rem 0 .75rem;
    font-size: .8125rem; color: var(--sc-muted-foreground);
    background: var(--sc-card); border: 1px solid var(--sc-input); border-radius: var(--sc-radius-md);
    box-shadow: var(--sc-shadow-xs);
    transition: background-color .15s var(--sc-ease), border-color .15s var(--sc-ease);
}
.hl-search-btn:hover { background: var(--sc-muted); }
.hl-search-btn span { flex: 1 1 auto; text-align: left; }
.hl-search-btn kbd {
    font-family: var(--sc-mono); font-size: .6875rem; font-weight: 500; color: var(--sc-muted-foreground);
    background: var(--sc-muted); border: 1px solid var(--sc-border); border-radius: .25rem; padding: .05rem .35rem; box-shadow: none;
}
html.hl3d body header .nav > li > a > i.fa-moon, html.hl3d body header .nav > li > a > i.fa-sun,
html.hl3d body header .fa-bell { font-size: 1rem !important; color: var(--sc-foreground) !important; }
html.hl3d body header .nav > li > a:has(> i.apply-dark-mode) {
    display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: var(--sc-radius-md);
}
html.hl3d body header .nav > li > a:has(> i.apply-dark-mode):hover { background: var(--sc-muted); }
html.hl3d body header #menuDropDown { font-size: .875rem; font-weight: 500; color: var(--sc-foreground); min-height: 2rem !important; }
html.hl3d body header .image-mini, html.hl3d body header .image-mini img { width: 2rem !important; height: 2rem !important; border-radius: 999px; }

/* ---------- Page container ---------- */
html.hl3d body .content { padding-top: 1.5rem !important; }
html.hl3d body .content > div > .container-fluid,
html.hl3d body .content .container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }
html.hl3d body .content h1 { font-size: 1.5rem !important; font-weight: 700 !important; letter-spacing: -.025em; }
html.hl3d body .content .card-title, html.hl3d body .content .card h3 { font-size: 1rem; font-weight: 600; }
html.hl3d body footer.border-top { border-color: var(--sc-border) !important; }

/* ---------- Card (compound: header / content / footer) ---------- */
html.hl3d body .card, html.hl3d body .accordion-item {
    background: var(--sc-card) !important;
    border: 1px solid var(--sc-border) !important;
    border-radius: .75rem !important;
    box-shadow: var(--sc-shadow-xs) !important;
}
html.hl3d body .card .card-header {
    padding: 1.25rem 1.5rem .75rem !important; min-height: 0 !important;
    border-bottom: 0 !important; background: transparent !important;
}
html.hl3d body .card .card-body { padding: 1.5rem !important; }
html.hl3d body .card .card-header + .card-body { padding-top: .5rem !important; }
html.hl3d body .card .card-footer { padding: 1rem 1.5rem !important; border-top: 1px solid var(--sc-border) !important; background: transparent !important; }
/* keep the Magic Card pointer border, in brand teal */
html.hl3d body .card::before, html.hl3d body .accordion-item::before {
    background: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), rgba(14, 116, 144, .55), transparent 70%);
    padding: 1px;
}
html.hl3d body .card::after { background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(14, 116, 144, .05), transparent 45%); }

/* ---------- KPI cards (shadcn SectionCards) built from the existing widget markup ---------- */
html.hl3d body .widget > a { width: 100%; }
html.hl3d body .widget > a > .rounded-10 {
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas: "body icon";
    align-items: start;
    gap: .75rem;
    min-height: 0 !important;
    padding: 1.25rem 1.5rem 1.5rem !important;
    margin: .5rem 0 !important;
    border-radius: .75rem !important;
    border: 1px solid var(--sc-border) !important;
    background: linear-gradient(to top, rgba(14, 116, 144, .06), var(--sc-card) 70%) !important;
    box-shadow: var(--sc-shadow-xs) !important;
    color: var(--sc-foreground) !important;
    overflow: hidden;
}
html.hl3d body .widget > a > .rounded-10 > .text-end {
    grid-area: body;
    display: flex !important; flex-direction: column-reverse; gap: .35rem;
    text-align: left !important; transform: none !important;
}
html.hl3d body .widget > a > .rounded-10 h3 {
    margin: 0 !important; font-size: .875rem !important; font-weight: 400 !important;
    color: var(--sc-muted-foreground) !important; opacity: 1 !important; line-height: 1.3;
}
html.hl3d body .widget > a > .rounded-10 h2 {
    margin: 0 !important; font-family: var(--sc-mono) !important;
    font-size: 1.875rem !important; font-weight: 600 !important; line-height: 1.1;
    color: var(--sc-foreground) !important; text-shadow: none !important;
    letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
html.hl3d body .widget > a > .rounded-10 .widget-icon {
    grid-area: icon;
    width: 2.25rem !important; height: 2.25rem !important; min-width: 0 !important;
    border-radius: var(--sc-radius-md) !important;
    background: var(--sc-card) !important;
    border: 1px solid var(--sc-border) !important;
    box-shadow: var(--sc-shadow-xs) !important;
    transform: none !important;
}
html.hl3d body .widget > a > .rounded-10 .widget-icon i { font-size: 1rem !important; color: var(--sc-primary) !important; }
html.hl3d body .widget > a > .bg-success .widget-icon i { color: var(--sc-success) !important; }
html.hl3d body .widget > a > .bg-warning .widget-icon i { color: #B45309 !important; }
html.hl3d body .widget > a > .bg-info .widget-icon i { color: #0369A1 !important; }
html.hl3d body .widget > a > .bg-success { background: linear-gradient(to top, rgba(5, 150, 105, .07), var(--sc-card) 70%) !important; }
html.hl3d body .widget > a > .bg-warning { background: linear-gradient(to top, rgba(217, 119, 6, .07), var(--sc-card) 70%) !important; }
html.hl3d body .widget > a > .bg-info { background: linear-gradient(to top, rgba(3, 105, 161, .07), var(--sc-card) 70%) !important; }
html.hl3d body .widget > a > .rounded-10::after { display: none !important; }
html.hl3d body .widget > a > .rounded-10:hover { box-shadow: var(--sc-shadow-md) !important; border-color: #CFDDE3 !important; }
/* stagger-list entrance (ui-ux-pro-max: 300-450ms, back.out) */
@keyframes sc-in { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.96); } to { opacity: 1; transform: none; } }
html.hl3d body .widget { animation: sc-in .42s var(--sc-back) both; }
html.hl3d body .widget:nth-child(2) { animation-delay: .06s; }
html.hl3d body .widget:nth-child(3) { animation-delay: .12s; }
html.hl3d body .widget:nth-child(4) { animation-delay: .18s; }

/* ---------- Buttons (shadcn variants, brand colours, Healty motion kept) ---------- */
html.hl3d body .btn:not(.btn-icon):not(.btn-link):not(.px-0):not(.dropdown-item):not(.hl-trigger) {
    min-height: 2.25rem; padding: .375rem 1rem; gap: .5rem;
    font-size: .875rem; font-weight: 500; line-height: 1.25rem;
    border-radius: var(--sc-radius-md) !important;
}
html.hl3d body .btn.btn-sm { min-height: 2rem; padding: .25rem .75rem; font-size: .8125rem; }
html.hl3d body .btn-primary {
    background: var(--sc-primary) !important; color: var(--sc-primary-foreground) !important;
    border: 1px solid var(--sc-primary) !important; box-shadow: var(--sc-shadow-xs) !important;
}
html.hl3d body .btn-primary:hover, html.hl3d body .btn-primary:focus { background: var(--sc-primary-hover) !important; border-color: var(--sc-primary-hover) !important; box-shadow: var(--sc-shadow-sm) !important; }
html.hl3d body .btn-primary:active { box-shadow: var(--sc-shadow-xs) !important; }
html.hl3d body .btn-success { background: var(--sc-success) !important; border: 1px solid var(--sc-success) !important; box-shadow: var(--sc-shadow-xs) !important; }
html.hl3d body .btn-danger { background: var(--sc-destructive) !important; border: 1px solid var(--sc-destructive) !important; box-shadow: var(--sc-shadow-xs) !important; }
html.hl3d body .btn-secondary, html.hl3d body .btn-light, html.hl3d body .btn-outline-primary {
    background: var(--sc-card) !important; color: var(--sc-foreground) !important;
    border: 1px solid var(--sc-input) !important; box-shadow: var(--sc-shadow-xs) !important;
}
html.hl3d body .btn-secondary:hover, html.hl3d body .btn-light:hover, html.hl3d body .btn-outline-primary:hover { background: var(--sc-muted) !important; }
html.hl3d body .btn:not(.btn-icon):not(.btn-link):not(.px-0):not(.dropdown-item):hover { transform: none; }
html.hl3d body .btn:not(.btn-icon):not(.btn-link):not(.px-0):not(.dropdown-item):active { transform: translate3d(0, 1px, 0); }
html.hl3d body .btn::before { background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .28) 50%, transparent 100%) !important; }
html.hl3d body .btn-secondary::before, html.hl3d body .btn-light::before, html.hl3d body .btn-outline-primary::before { background: linear-gradient(100deg, transparent, rgba(14, 116, 144, .08), transparent) !important; }
/* icon buttons in tables → shadcn ghost icon */
html.hl3d body .btn.btn-icon.btn-primary { width: 2.25rem; height: 2.25rem; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
html.hl3d body .table a.btn.px-1, html.hl3d body .table .btn.px-1 { border-radius: var(--sc-radius-md) !important; }

/* ---------- Inputs ---------- */
html.hl3d body .form-control, html.hl3d body .form-select,
html.hl3d body .select2-container--bootstrap-5 .select2-selection {
    min-height: 2.25rem !important; height: auto;
    padding: .375rem .75rem;
    font-size: .875rem !important; color: var(--sc-foreground) !important;
    background-color: var(--sc-card) !important; background-image: none;
    border: 1px solid var(--sc-input) !important; border-radius: var(--sc-radius-md) !important;
    box-shadow: var(--sc-shadow-xs) !important;
    transition: border-color .15s var(--sc-ease), box-shadow .15s var(--sc-ease);
}
html.hl3d body .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23576A74' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3e%3c/svg%3e") !important; background-repeat: no-repeat; background-position: right .6rem center; background-size: 14px; padding-right: 2rem; }
html.hl3d body .form-control::placeholder { color: #8396A0; }
html.hl3d body .form-control:focus, html.hl3d body .form-select:focus,
html.hl3d body .select2-container--focus .select2-selection, html.hl3d body .select2-container--open .select2-selection {
    border-color: var(--sc-primary) !important; box-shadow: 0 0 0 3px var(--sc-ring) !important;
}
html.hl3d body .form-control.w-250px { width: 16rem !important; }
html.hl3d body .livewire-search-box .form-control { height: 2.25rem; }
html.hl3d body .form-label { font-size: .875rem; font-weight: 500; margin-bottom: .375rem; color: var(--sc-foreground); }
html.hl3d body .form-check-input { border-color: var(--sc-input); box-shadow: var(--sc-shadow-xs); }
html.hl3d body .form-check-input:checked { background-color: var(--sc-primary) !important; border-color: var(--sc-primary) !important; }

/* ---------- DataTable ---------- */
html.hl3d body .table-responsive {
    background: var(--sc-card);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius) !important;
    box-shadow: var(--sc-shadow-xs);
    overflow-x: auto;
}
html.hl3d body .table, html.hl3d body .table.table-striped {
    margin-bottom: 0 !important; border: 0 !important; box-shadow: none !important;
    border-radius: 0 !important; font-size: .875rem; background: transparent;
}
html.hl3d body .table > thead > tr > th, html.hl3d body .table thead th {
    height: 2.5rem; padding: .5rem .75rem !important;
    font-size: .8125rem !important; font-weight: 500 !important; letter-spacing: 0 !important;
    text-transform: none !important; color: var(--sc-muted-foreground) !important;
    background: rgba(241, 245, 247, .6) !important;
    border-bottom: 1px solid var(--sc-border) !important; border-radius: 0 !important;
    white-space: nowrap; vertical-align: middle;
}
html.hl3d body .table > tbody > tr > td, html.hl3d body .table.table-striped > tbody > tr > td {
    padding: .625rem .75rem !important; vertical-align: middle;
    background: transparent !important; box-shadow: none !important;
    border-bottom: 1px solid var(--sc-border) !important;
    color: var(--sc-foreground) !important;
}
html.hl3d body .table > tbody > tr:last-child > td { border-bottom: 0 !important; }
html.hl3d body .table > tbody > tr { transition: background-color .15s var(--sc-ease); }
html.hl3d body .table > tbody > tr:hover > td { background: rgba(241, 245, 247, .55) !important; }
html.hl3d body .table.table-striped tbody, html.hl3d body .table.table-striped > tbody > tr:nth-of-type(odd) > * { background: transparent !important; }
/* pagination */
html.hl3d body .pagination { gap: .25rem; }
html.hl3d body .page-item .page-link {
    min-width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .5rem; margin: 0 !important; font-size: .8125rem; font-weight: 500;
    color: var(--sc-foreground); background: transparent; border: 1px solid transparent !important;
    border-radius: var(--sc-radius-md) !important; box-shadow: none !important; transform: none !important;
}
html.hl3d body .page-item .page-link:hover { background: var(--sc-muted); }
html.hl3d body .page-item.active .page-link {
    background: var(--sc-card) !important; color: var(--sc-foreground) !important;
    border-color: var(--sc-input) !important; box-shadow: var(--sc-shadow-xs) !important;
}

/* ---------- Badge ---------- */
html.hl3d body .badge {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .125rem .5rem !important; font-size: .75rem !important; font-weight: 500 !important;
    line-height: 1rem; border-radius: var(--sc-radius-sm) !important; letter-spacing: 0;
    border: 1px solid transparent; box-shadow: none !important;
}
html.hl3d body .badge.bg-primary, html.hl3d body .badge.bg-light-primary { background: var(--sc-accent) !important; color: var(--sc-accent-foreground) !important; border-color: #CBE7EE; }
html.hl3d body .badge.bg-success, html.hl3d body .badge.bg-light-success { background: #ECFDF5 !important; color: #065F46 !important; border-color: #BBF0D9; }
html.hl3d body .badge.bg-danger, html.hl3d body .badge.bg-light-danger { background: #FEF2F2 !important; color: #991B1B !important; border-color: #FBD5D5; }
html.hl3d body .badge.bg-warning, html.hl3d body .badge.bg-light-warning { background: #FFFBEB !important; color: #92400E !important; border-color: #FDE7B0; }
html.hl3d body .badge.bg-info, html.hl3d body .badge.bg-light-info { background: #F0F9FF !important; color: #075985 !important; border-color: #C7E6F9; }

/* ---------- Dropdown menu ---------- */
html.hl3d body .dropdown-menu {
    padding: .25rem !important; border: 1px solid var(--sc-border) !important;
    border-radius: var(--sc-radius-md) !important; box-shadow: var(--sc-shadow-md) !important;
    background: var(--sc-card) !important; font-size: .875rem;
}
html.hl3d body .dropdown-item {
    display: flex; align-items: center; gap: .5rem; min-height: 2rem;
    padding: .375rem .5rem !important; border-radius: var(--sc-radius-sm) !important; font-size: .875rem;
}
html.hl3d body .dropdown-item:hover, html.hl3d body .dropdown-item:focus { background: var(--sc-muted) !important; color: var(--sc-foreground) !important; }

/* ---------- Dialog ---------- */
html.hl3d body .modal-content {
    border: 1px solid var(--sc-border) !important; border-radius: .75rem !important;
    box-shadow: var(--sc-shadow-lg) !important; background: var(--sc-card) !important;
}
html.hl3d body .modal-header { padding: 1.5rem 1.5rem .5rem !important; border-bottom: 0 !important; }
html.hl3d body .modal-header .modal-title, html.hl3d body .modal-header h3, html.hl3d body .modal-header h2 { font-size: 1.125rem !important; font-weight: 600 !important; }
html.hl3d body .modal-body { padding: .75rem 1.5rem !important; }
html.hl3d body .modal-footer { padding: .75rem 1.5rem 1.5rem !important; border-top: 0 !important; gap: .5rem; }
html.hl3d body .modal-backdrop.show { background: #000; opacity: .5; }

/* ---------- Tabs ---------- */
html.hl3d body .nav-tabs {
    display: inline-flex; gap: 2px; padding: 3px; border: 0 !important;
    border-radius: var(--sc-radius); background: var(--sc-muted);
}
html.hl3d body .nav-tabs .nav-link {
    height: 1.875rem; display: inline-flex; align-items: center; padding: 0 .75rem !important;
    border: 0 !important; border-radius: calc(var(--sc-radius) - 3px) !important;
    font-size: .875rem; font-weight: 500; color: var(--sc-muted-foreground) !important; background: transparent !important;
}
html.hl3d body .nav-tabs .nav-link.active { background: var(--sc-card) !important; color: var(--sc-foreground) !important; box-shadow: var(--sc-shadow-sm); }

/* ---------- Alerts ---------- */
html.hl3d body .alert { border-radius: var(--sc-radius) !important; padding: .75rem 1rem; font-size: .875rem; }

/* ---------- Auth: two-column sign-in (shadcn starter) ---------- */
html.hl3d body .authImage { padding: 0 !important; }
.hl-auth { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
.hl-auth-aside { display: none; }
.hl-auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; }
@media (min-width: 992px) {
    .hl-auth { grid-template-columns: 1fr 1fr; }
    .hl-auth-aside {
        position: relative; display: flex; flex-direction: column; justify-content: space-between;
        padding: 2.5rem; overflow: hidden; color: #fff;
        background: radial-gradient(900px 500px at 0% 0%, rgba(34, 211, 238, .25), transparent 60%),
                    linear-gradient(160deg, #0B3B4A 0%, #072832 60%, #05202A 100%);
    }
    .hl-auth-main .text-center > a.image { display: none !important; }   /* logo moves to the brand panel */
}
.hl-auth-aside .hl-helix-panel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.hl-auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: .65rem; font-size: 1.05rem; font-weight: 600; }
.hl-auth-brand .hl-brand-logo { background: rgba(255, 255, 255, .95); border-color: rgba(255, 255, 255, .3); }
.hl-auth-quote { position: relative; z-index: 1; margin: 0; max-width: 32rem; }
.hl-auth-quote p { font-size: 1.125rem; line-height: 1.6; margin-bottom: .5rem; color: #E6F6FA; }
.hl-auth-quote footer { font-size: .875rem; color: rgba(230, 246, 250, .7); }
html.hl3d body .authImage .width-540 { max-width: 25rem !important; width: 100%; }
html.hl3d body .authImage .bg-white.rounded-15 {
    border-radius: .75rem !important; box-shadow: var(--sc-shadow-sm) !important;
    padding: 1.75rem 1.5rem !important;
}
html.hl3d body .authImage .bg-white.rounded-15 > .hl-beam-mask { background: var(--sc-card); }
html.hl3d body .authImage .bg-white.rounded-15 h1 {
    font-size: 1.5rem !important; font-weight: 600 !important; margin-bottom: 1.25rem !important;
    background: none !important; -webkit-text-fill-color: var(--sc-foreground) !important; color: var(--sc-foreground) !important;
}
html.hl3d body .authImage .mb-sm-7 { margin-bottom: 1rem !important; }

/* ---------- Touch devices: 44px targets (ui-ux-pro-max) ---------- */
@media (hover: none) and (pointer: coarse) {
    html.hl3d body .btn:not(.btn-icon):not(.btn-link):not(.px-0), html.hl3d body .form-control,
    html.hl3d body .form-select, html.hl3d body .aside-menu-container__aside-menu .nav-item .nav-link,
    html.hl3d body .page-item .page-link { min-height: 2.75rem !important; }
}
@media (max-width: 1199.98px) {
    html.hl3d body .wrapper { padding-left: 0 !important; }
}
@media (prefers-reduced-motion: reduce) { html.hl3d body .widget { animation: none !important; } }

/* --- fixes: Font Awesome renders <svg> in the admin (JS replacement) --- */
html.hl3d body .widget > a > .rounded-10 .widget-icon svg,
html.hl3d body .widget > a > .rounded-10 .widget-icon i {
    width: 1rem !important; height: 1rem !important; font-size: 1rem !important;
    color: var(--sc-primary) !important; opacity: 1 !important;
}
html.hl3d body .widget > a > .bg-success .widget-icon svg { color: var(--sc-success) !important; }
html.hl3d body .widget > a > .bg-warning .widget-icon svg { color: #B45309 !important; }
html.hl3d body .widget > a > .bg-info .widget-icon svg { color: #0369A1 !important; }
html.hl3d body .widget > a > .rounded-10 .widget-icon { display: flex !important; align-items: center; justify-content: center; }
/* sidebar: icon column + active item without legacy 3D edge */
html.hl3d body .aside-menu-container__aside-menu .nav-item .nav-link .aside-menu-icon { flex: 0 0 1.25rem; width: 1.25rem; }
html.hl3d body .aside-menu-container__aside-menu .nav-item .nav-link .aside-menu-icon svg { width: 1rem !important; height: 1rem !important; }
html.hl3d body .aside-menu-container__aside-menu .nav-item.active > .nav-link,
html.hl3d body .aside-menu-container__aside-menu .nav-item.active > .nav-link:hover {
    box-shadow: none !important; transform: none !important;
}
/* auth: label row spacing */
html.hl3d body .authImage .d-flex.justify-content-between { gap: .75rem; flex-wrap: wrap; }
html.hl3d body .authImage .link-info { font-size: .8125rem !important; font-weight: 500; }
html.hl3d body .aside-menu-container__aside-menu .nav-item .nav-link .aside-menu-icon { margin: 0 !important; }