/* ============================================================
   ORA HOLISTIC WELLNESS — ADMIN THEME
   Modern, wellness-inspired admin UI skin
   Loaded on top of the base Bootstrap admin template.
   ============================================================ */

/* ---------- 1. Design Tokens (Light) ------------------------ */
:root {
    /* Public design-spec aliases (so authored markup can use the documented names directly) */
    --bg-color: #FBF9F8;
    --primary-color: #043627;
    --primary-hover: #0F3D35;
    --heading-color: #0F3D35;
    --text-color: #051E13;
    --secondary-bg: #FEF8F1;
    --secondary-color: #CFA141;
    --secondary-border: #CFA141;

    /* Typography */
    --ora-font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ora-font-display: "Noto Serif", Georgia, "Times New Roman", serif;

    /* Primary palette — deep wellness green */
    --ora-primary: #043627;
    --ora-primary-50: #ECF3F1;
    --ora-primary-100: #D6E4E0;
    --ora-primary-200: #A8C4BC;
    --ora-primary-300: #6E9990;
    --ora-primary-500: #043627;
    --ora-primary-600: #0F3D35;
    --ora-primary-700: #062B1F;
    --ora-primary-grad: linear-gradient(135deg, #043627 0%, #0F3D35 100%);

    /* Secondary palette — warm gold accent */
    --ora-secondary: #CFA141;
    --ora-secondary-50: #FEF8F1;
    --ora-secondary-100: #FBEBC9;
    --ora-secondary-500: #CFA141;
    --ora-secondary-600: #B68A2E;
    --ora-secondary-grad: linear-gradient(135deg, #CFA141 0%, #E0BB6A 100%);

    --ora-accent: #CFA141;
    --ora-success: #2BBF8C;
    --ora-warning: #F5B544;
    --ora-danger: #EF6F6C;
    --ora-info: #56C5DC;

    /* Surfaces & background */
    --ora-bg: #FBF9F8;
    --ora-bg-subtle: #F2EFEC;
    --ora-surface: #FFFFFF;
    --ora-surface-2: #FBF9F8;
    --ora-surface-hover: #F4F0EC;

    /* Text */
    --ora-text: #051E13;
    --ora-text-secondary: #2B3F35;
    --ora-text-muted: #6B7B73;
    --ora-text-on-primary: #FBF9F8;

    /* Borders & dividers */
    --ora-border: #E6E0DA;
    --ora-border-strong: #CFC6BD;
    --ora-divider: #EFE9E3;

    /* Shadows tuned to deep-green primary */
    --ora-shadow-xs: 0 1px 2px rgba(15, 61, 53, 0.05);
    --ora-shadow-sm: 0 2px 6px rgba(15, 61, 53, 0.06), 0 1px 2px rgba(15, 61, 53, 0.04);
    --ora-shadow-md: 0 6px 16px rgba(15, 61, 53, 0.08), 0 2px 4px rgba(15, 61, 53, 0.04);
    --ora-shadow-lg: 0 16px 32px rgba(15, 61, 53, 0.10), 0 4px 8px rgba(15, 61, 53, 0.05);
    --ora-shadow-focus: 0 0 0 4px rgba(4, 54, 39, 0.18);

    --ora-radius-xs: 6px;
    --ora-radius-sm: 8px;
    --ora-radius-md: 12px;
    --ora-radius-lg: 16px;
    --ora-radius-xl: 20px;
    --ora-radius-pill: 999px;

    --ora-sidebar-width: 260px;
    --ora-sidebar-width-mini: 78px;
    --ora-topbar-height: 64px;

    --ora-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --ora-transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 2. Design Tokens (Dark) ------------------------- */
[data-theme="dark"] {
    --ora-primary: #4CB8A9;
    --ora-primary-50: #14241F;
    --ora-primary-100: #1A2F28;
    --ora-primary-200: #214038;
    --ora-primary-300: #36665A;
    --ora-primary-500: #4CB8A9;
    --ora-primary-600: #0F3D35;
    --ora-primary-700: #043627;
    --ora-primary-grad: linear-gradient(135deg, #0F3D35 0%, #043627 100%);

    --ora-bg: #0E1714;
    --ora-bg-subtle: #131D19;
    --ora-surface: #182521;
    --ora-surface-2: #1D2C27;
    --ora-surface-hover: #22332D;

    --ora-text: #EDE7DE;
    --ora-text-secondary: #C7C0B5;
    --ora-text-muted: #8B948C;
    --ora-text-on-primary: #FBF9F8;

    --ora-border: #283831;
    --ora-border-strong: #3A4F46;
    --ora-divider: #223129;

    --ora-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ora-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
    --ora-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.35);
    --ora-shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.45);
    --ora-shadow-focus: 0 0 0 4px rgba(76, 184, 169, 0.25);
}

/* ---------- 3. Base ----------------------------------------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--ora-font-sans);
    background-color: var(--ora-bg);
    color: var(--ora-text);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0;
}

.auth-wrapper .auth-box {
    background: #ffffff30;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ora-font-display);
    color: var(--heading-color);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: capitalize;
}

/* Default heading sizing aligned with the design spec
   (23px / 35px line-height for the primary heading scale). */
h1, .h1 { font-size: 28px; line-height: 38px; }
h2, .h2 { font-size: 25px; line-height: 36px; }
h3, .h3 { font-size: 23px; line-height: 35px; }
h4, .h4 { font-size: 20px; line-height: 30px; }
h5, .h5 { font-size: 17px; line-height: 26px; }
h6, .h6 { font-size: 15px; line-height: 24px; }

p { color: var(--ora-text); font-weight: 300; font-size: 16px; line-height: 25px; }

a { color: var(--ora-primary-600); transition: color var(--ora-transition); }
a:hover { color: var(--ora-primary-700); text-decoration: none; }

::selection { background: var(--ora-primary-100); color: var(--ora-primary-700); }

/* Custom scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--ora-border-strong);
    border-radius: 999px;
    border: 2px solid var(--ora-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--ora-primary-300); }

/* Focus ring */
:focus-visible {
    outline: none;
    box-shadow: var(--ora-shadow-focus);
    border-radius: var(--ora-radius-xs);
}

/* ---------- 4. Layout --------------------------------------- */
#main-wrapper {
    background: var(--ora-bg);
    min-height: 100vh;
}

.page-wrapper {
    background: var(--ora-bg);
    min-height: calc(100vh - var(--ora-topbar-height));
}

.page-wrapper > .container-fluid {
    padding: 24px 28px 36px;
}

.page-breadcrumb {
    padding: 22px 28px 14px;
    background: transparent;
    border: none;
}

.page-breadcrumb .page-title {
    font-family: var(--ora-font-display);
    font-size: 23px;
    line-height: 35px;
    font-weight: 500;
    margin: 0;
    color: var(--heading-color);
    letter-spacing: 0;
    text-transform: capitalize;
}

.page-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 13px;
}

.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--ora-text-muted); content: "/"; }
.page-breadcrumb .breadcrumb-item a { color: var(--ora-text-muted); }
.page-breadcrumb .breadcrumb-item.active { color: var(--ora-text); font-weight: 500; }

/* ---------- 5. Topbar / Header ------------------------------ */
.topbar {
    background: var(--ora-surface);
    border-bottom: 1px solid var(--ora-border);
    box-shadow: var(--ora-shadow-xs);
    height: var(--ora-topbar-height);
    z-index: 50;
}

.topbar .top-navbar {
    background: transparent;
    min-height: var(--ora-topbar-height);
    padding: 0 24px;
}

.topbar .top-navbar .navbar-header {
    background: transparent !important;
    line-height: var(--ora-topbar-height);
    border-bottom: none;
    box-shadow: none;
}

.topbar .top-navbar .navbar-header .navbar-brand {
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar .top-navbar .navbar-brand .logo-icon img {
    width: 38px !important;
    height: 38px;
    object-fit: contain;
    /* background: var(--ora-primary-grad); */
    /* padding: 6px; */
    /* border-radius: var(--ora-radius-sm); */
    /* box-shadow: var(--ora-shadow-sm); */
}

.topbar .top-navbar .navbar-brand .logo-text span {
    font-family: var(--ora-font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--ora-text) !important;
    letter-spacing: -0.01em;
}

.topbar .sidebartoggler,
.topbar .nav-toggler,
.topbar .topbartoggler {
    color: var(--ora-text-secondary);
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ora-radius-sm);
    transition: background var(--ora-transition), color var(--ora-transition);
}

.topbar .sidebartoggler:hover,
.topbar .nav-toggler:hover,
.topbar .topbartoggler:hover {
    background: var(--ora-surface-hover);
    color: var(--ora-primary-600);
}

.topbar .navbar-nav .nav-link {
    color: var(--ora-text-secondary);
    padding: 10px 14px !important;
    border-radius: var(--ora-radius-sm);
    transition: background var(--ora-transition), color var(--ora-transition);
}

.topbar .navbar-nav .nav-link:hover {
    background: var(--ora-surface-hover);
    color: var(--ora-primary-600);
}

/* Profile pill */
.topbar .pro-pic {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px !important;
    background: var(--ora-surface-2);
    border: 1px solid var(--ora-border);
    border-radius: var(--ora-radius-pill);
}

.topbar .pro-pic:hover { border-color: var(--ora-primary-300); background: var(--ora-primary-50); }
.topbar .pro-pic img { border: 2px solid var(--ora-surface); box-shadow: var(--ora-shadow-xs); }
.topbar .pro-pic span { color: var(--ora-text) !important; font-weight: 500; font-size: 13px; }

/* Notification badge helper */
.topbar .nav-link .ora-badge-dot {
    position: absolute;
    top: 6px; right: 6px;
    width: 8px; height: 8px;
    background: var(--ora-danger);
    border: 2px solid var(--ora-surface);
    border-radius: 50%;
}

/* Global search */
.ora-search {
    position: relative;
    width: 100%;
    max-width: 360px;
}
.ora-search input.form-control {
    background: var(--ora-surface-2);
    border: 1px solid var(--ora-border);
    height: 42px;
    border-radius: var(--ora-radius-pill);
    padding: 0 16px 0 42px;
    color: var(--ora-text);
}
.ora-search input.form-control::placeholder { color: var(--ora-text-muted); }
.ora-search input.form-control:focus {
    background: var(--ora-surface);
    border-color: var(--ora-primary-300);
    box-shadow: var(--ora-shadow-focus);
}
.ora-search .ora-search-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--ora-text-muted);
    font-size: 16px;
}

/* ---------- 6. Sidebar -------------------------------------- */
.left-sidebar {
    background: var(--ora-surface);
    border-right: 1px solid var(--ora-border);
    width: var(--ora-sidebar-width);
    box-shadow: var(--ora-shadow-xs);
    padding-top: var(--ora-topbar-height);
    transition: width var(--ora-transition-slow);
}

/* Keep the page-wrapper offset in sync with the topbar height when the
   header is fixed (base theme hardcodes 64px in several places). */
#main-wrapper[data-layout="vertical"][data-header-position="fixed"] .page-wrapper { padding-top: var(--ora-topbar-height); }
#main-wrapper[data-layout="horizontal"][data-header-position="fixed"] .left-sidebar { padding-top: var(--ora-topbar-height); }

.scroll-sidebar { padding: 8px 14px 24px; }

.sidebar-nav ul .sidebar-item {
    margin-bottom: 4px;
    border-radius: var(--ora-radius-sm);
}

.sidebar-nav ul .sidebar-item .sidebar-link {
    /* color: var(--ora-text-white); */
    padding: 11px 14px;
    border-radius: var(--ora-radius-sm);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    font-size: 14px;
    /* transition: background var(--ora-transition), color var(--ora-transition), transform var(--ora-transition); */
    opacity: 1;
    position: relative;
}

.sidebar-nav>#sidebarnav>.sidebar-item.selected>.sidebar-link, .sidebar-nav>#sidebarnav>.sidebar-item>.sidebar-link:hover {
    background: rgb(251 251 251 / 70%);
    border-left: 2px solid #d4a44e;
}

.sidebar-nav ul .sidebar-item .sidebar-link i {
    font-size: 18px;
    width: 22px;
    text-align: center;
    color: var(--ora-text-muted);
    transition: color var(--ora-transition);
}

.sidebar-nav ul .sidebar-item .sidebar-link span.hide-menu {
    font-weight: 500;
    letter-spacing: -0.005em;
}

.sidebar-nav ul .sidebar-item .sidebar-link:hover {
    background: var(--ora-primary-50);
    color: var(--ora-primary-700);
}
.sidebar-nav ul .sidebar-item .sidebar-link:hover i { color: var(--ora-primary-600); }

.sidebar-nav ul .sidebar-item .sidebar-link.active,
.sidebar-nav ul .sidebar-item.selected > .sidebar-link {
    /* background: var(--ora-primary-grad);
    color: var(--bg-color);
    box-shadow: 0 6px 14px -6px rgba(15, 61, 53, 0.55); */
    background: rgb(251 251 251 / 70%);
    border-left: 2px solid #d4a44e !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link.active i,
.sidebar-nav ul .sidebar-item.selected > .sidebar-link i { color: #fff; }

.sidebar-nav ul .sidebar-item .sidebar-link.has-arrow::after {
    border-color: currentColor;
    width: 7px; height: 7px;
    transform: rotate(-45deg) translate(0, 0);
    transition: transform var(--ora-transition);
}

.sidebar-nav ul .sidebar-item .sidebar-link.has-arrow[aria-expanded="true"]::after {
    transform: rotate(135deg) translate(0, 0);
}

/* Sub menu */
.sidebar-nav .collapse.first-level {
    background: transparent;
    margin: 4px 0 4px 14px;
    padding-left: 12px;
    /* border-left: 1.5px dashed var(--ora-border); */
}

.sidebar-nav .collapse.first-level .sidebar-link {
    font-size: 13px;
    padding: 9px 12px;
    color: var(--ora-text-muted);
}

.sidebar-nav .collapse.first-level .sidebar-link i { font-size: 14px; }

.sidebar-nav .collapse.first-level .sidebar-link.active {
    background: var(--ora-primary-50);
    color: var(--ora-primary-700);
    box-shadow: none;
}
.sidebar-nav .collapse.first-level .sidebar-link.active i { color: var(--ora-primary-600); }

/* Mini sidebar */
[data-sidebartype="mini-sidebar"] .left-sidebar { width: var(--ora-sidebar-width-mini); }
[data-sidebartype="mini-sidebar"] .hide-menu { display: none !important; }
[data-sidebartype="mini-sidebar"] .sidebar-nav ul .sidebar-item .sidebar-link { justify-content: center; padding: 12px; }
[data-sidebartype="mini-sidebar"] .page-wrapper { margin-left: var(--ora-sidebar-width-mini); }

/* ---------- 7. Card --------------------------------------- */
.card {
    background: var(--ora-surface);
    border: 1px solid var(--ora-border);
    border-radius: var(--ora-radius-lg);
    box-shadow: var(--ora-shadow-sm);
    transition: box-shadow var(--ora-transition), transform var(--ora-transition);
    overflow: hidden;
}

.card:hover { box-shadow: var(--ora-shadow-md); }

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--ora-divider);
    padding: 18px 22px;
    font-weight: 600;
    color: var(--ora-text);
}

.card-body { padding: 22px; }

.card-title {
    font-family: var(--ora-font-display);
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
    color: var(--heading-color);
    margin-bottom: 4px;
    text-transform: capitalize;
}

.card-subtitle { color: var(--ora-text-muted); font-size: 14px; font-weight: 300; }

/* ---------- 8. Metric / Dashboard cards --------------------- */
.ora-metric-card {
    position: relative;
    background: var(--ora-surface);
    border: 1px solid var(--ora-border);
    border-radius: var(--ora-radius-lg);
    padding: 22px 22px 18px;
    box-shadow: var(--ora-shadow-sm);
    transition: transform var(--ora-transition), box-shadow var(--ora-transition);
    overflow: hidden;
}

.ora-metric-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 4px; height: 100%;
    background: var(--ora-primary-grad);
    opacity: 0;
    transition: opacity var(--ora-transition);
}

.ora-metric-card:hover { transform: translateY(-2px); box-shadow: var(--ora-shadow-md); }
.ora-metric-card:hover::before { opacity: 1; }

.ora-metric-card .ora-metric-icon {
    width: 44px; height: 44px;
    border-radius: var(--ora-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--ora-primary-50);
    color: var(--ora-primary-600);
}

.ora-metric-card.ora-variant-secondary .ora-metric-icon { background: var(--ora-secondary-50); color: var(--ora-secondary-600); }
.ora-metric-card.ora-variant-warning .ora-metric-icon { background: #FEF6E6; color: #B47A0F; }
.ora-metric-card.ora-variant-danger .ora-metric-icon { background: #FDEEEE; color: #C44A47; }
.ora-metric-card.ora-variant-info .ora-metric-icon { background: #E6F6FB; color: #2391AB; }

.ora-metric-card .ora-metric-label {
    color: var(--ora-text-muted);
    font-size: 13px;
    font-weight: 500;
    margin: 14px 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ora-metric-card .ora-metric-value {
    font-family: var(--ora-font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--ora-text);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.ora-metric-card .ora-metric-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--ora-radius-pill);
    margin-top: 10px;
}
.ora-metric-card .ora-metric-trend.up { background: rgba(43, 191, 140, 0.12); color: var(--ora-success); }
.ora-metric-card .ora-metric-trend.down { background: rgba(239, 111, 108, 0.12); color: var(--ora-danger); }

.ora-metric-card .ora-metric-spark {
    margin-top: 14px;
    height: 50px;
    border-radius: var(--ora-radius-sm);
    background: linear-gradient(180deg, rgba(4, 54, 39, 0) 0%, rgba(4, 54, 39, 0.08) 100%);
}

/* ---------- 9. Buttons -------------------------------------- */
.btn {
    font-family: var(--ora-font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform var(--ora-transition), box-shadow 0.3s ease;
    text-align: center;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn:focus-visible { box-shadow: var(--ora-shadow-focus); }
.btn:active { transform: translateY(1px); }

/* Primary CTA — "Save / Submit / Continue".
   Also covers .btn-success since it shares the primary CTA semantic. */
.btn-primary,
.btn-success {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--bg-color);
    box-shadow: 0 4px 4px rgba(15, 61, 53, 0.2);
}

.btn-primary:hover,
.btn-success:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--bg-color);
    box-shadow: 0 6px 8px rgba(15, 61, 53, 0.25);
}

.btn-primary:focus,
.btn-primary.focus,
.btn-success:focus,
.btn-success.focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--bg-color);
    box-shadow: var(--ora-shadow-focus);
    outline: none;
}

.btn-primary:active,
.btn-primary.active,
.btn-success:active,
.btn-success.active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.show > .btn-success.dropdown-toggle {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--bg-color);
    box-shadow: 0 2px 4px rgba(15, 61, 53, 0.2);
}

.btn-primary:disabled,
.btn-primary.disabled,
.btn-success:disabled,
.btn-success.disabled {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--bg-color);
    opacity: 0.55;
    box-shadow: none;
    cursor: not-allowed;
}

/* Info — keep informational meaning, but use a softer accent so it doesn't collide with primary */
.btn-info {
    background-color: var(--ora-info);
    border-color: var(--ora-info);
    color: #fff;
    box-shadow: 0 4px 4px rgba(86, 197, 220, 0.2);
}
.btn-info:hover { background-color: #3CB3CC; border-color: #3CB3CC; color: #fff; }

/* Secondary — "Cancel / Back / Learn More" */
.btn-secondary {
    background-color: var(--secondary-bg);
    border-color: var(--secondary-border);
    color: var(--secondary-color);
    box-shadow: 0 4px 4px rgba(254, 238, 211, 1);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
    background-color: #FFF4E5;
    border-color: var(--secondary-border);
    color: var(--secondary-color);
    box-shadow: 0 6px 8px rgba(254, 238, 211, 1);
}

.btn-warning { background-color: var(--ora-warning); border-color: var(--ora-warning); color: #fff; }
.btn-danger  { background-color: var(--ora-danger);  border-color: var(--ora-danger);  color: #fff; }

.btn-outline-primary {
    background: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.btn-outline-primary:hover { background: var(--primary-color); color: var(--bg-color); border-color: var(--primary-color); }

.btn-light {
    background: var(--ora-surface);
    border-color: var(--ora-border);
    color: var(--ora-text);
}
.btn-light:hover { background: var(--ora-surface-hover); border-color: var(--ora-border-strong); color: var(--ora-text); }

.btn-link { color: var(--primary-color); font-weight: 500; }
.btn-link:hover { color: var(--primary-hover); }

.btn-sm  { padding: 8px 16px; font-size: 14px; line-height: 18px; border-radius: 6px; }
.btn-lg  { padding: 14px 28px; font-size: 19px; line-height: 24px; border-radius: 10px; }

.btn-icon {
    width: 38px; height: 38px;
    padding: 0;
    border-radius: var(--ora-radius-sm);
}

/* ---------- 10. Forms --------------------------------------- */
.form-control,
.form-select,
select.form-control,
textarea.form-control {
    background: var(--ora-surface);
    border: 1px solid var(--ora-border);
    color: var(--ora-text);
    font-size: 14px;
    padding: 10px 14px;
    height: 50px;
    border-radius: var(--ora-radius-sm);
    transition: border-color var(--ora-transition), box-shadow var(--ora-transition), background var(--ora-transition);
}

textarea.form-control { height: auto; min-height: 96px; }

.form-control:focus,
.form-select:focus {
    border-color: var(--ora-primary-500);
    background: var(--ora-surface);
    box-shadow: var(--ora-shadow-focus);
    color: var(--ora-text);
}

.form-control::placeholder { color: var(--ora-text-muted); }

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--ora-danger);
    box-shadow: 0 0 0 4px rgba(239, 111, 108, 0.15);
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--ora-success);
}

.invalid-feedback,
.error {
    color: var(--ora-danger);
    font-size: 12.5px;
    margin-top: 6px;
}

.text-danger {
    color: var(--ora-danger);
    font-size: 12.5px;    
}

.form-label,
label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ora-text-secondary);
    margin-bottom: 6px;
    display: inline-block;
}

/* Floating label */
.ora-float-group {
    position: relative;
    margin-bottom: 20px;
}
.ora-float-group .form-control {
    padding-top: 22px;
    padding-bottom: 8px;
    height: 56px;
}
.ora-float-group label {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--ora-text-muted);
    pointer-events: none;
    transition: top var(--ora-transition), font-size var(--ora-transition), color var(--ora-transition);
    background: transparent;
    margin: 0;
}
.ora-float-group .form-control:focus + label,
.ora-float-group .form-control:not(:placeholder-shown) + label {
    top: 16px;
    font-size: 11px;
    color: var(--ora-primary-600);
    transform: none;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Input with leading icon */
.ora-input-icon { position: relative; }
.ora-input-icon > i {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--ora-text-muted);
    font-size: 16px;
    pointer-events: none;
}
.ora-input-icon .form-control { padding-left: 42px; }

/* Password toggle */
.ora-password-toggle {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: var(--ora-text-muted);
    padding: 6px;
    cursor: pointer;
    border-radius: var(--ora-radius-xs);
}
.ora-password-toggle:hover { color: var(--ora-primary-600); background: var(--ora-primary-50); }

/* Checkbox / Radio */
.form-check-input {
    width: 18px; height: 18px;
    border: 1.5px solid var(--ora-border-strong);
    border-radius: 5px;
    margin-top: 2px;
    transition: background var(--ora-transition), border-color var(--ora-transition);
}
.form-check-input:checked {
    background-color: var(--ora-primary-500);
    border-color: var(--ora-primary-500);
}
.form-check-input:focus { box-shadow: var(--ora-shadow-focus); }
.form-check-label { color: var(--ora-text-secondary); font-size: 13.5px; }

/* Drag-and-drop dropzone */
.ora-dropzone {
    border: 1.5px dashed var(--ora-border-strong);
    border-radius: var(--ora-radius-md);
    padding: 28px;
    text-align: center;
    background: var(--ora-surface-2);
    color: var(--ora-text-muted);
    cursor: pointer;
    transition: border-color var(--ora-transition), background var(--ora-transition);
}
.ora-dropzone:hover,
.ora-dropzone.dragover {
    border-color: var(--ora-primary-500);
    background: var(--ora-primary-50);
    color: var(--ora-primary-700);
}
.ora-dropzone i { font-size: 32px; color: var(--ora-primary-500); display: block; margin-bottom: 8px; }

/* ---------- 11. Tables ------------------------------------- */
.table {
    color: var(--ora-text);
    margin-bottom: 0;
    border-color: var(--ora-divider);
}

.table thead th {
    background: var(--ora-surface-2);
    color: var(--ora-text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--ora-border);
    border-top: 0;
    padding: 14px 18px;
    white-space: nowrap;
}

.table tbody td {
    padding: 16px 18px;
    border-top: 1px solid var(--ora-divider);
    vertical-align: middle;
    font-size: 13.5px;
}

.table tbody tr { transition: background var(--ora-transition); }
.table tbody tr:hover { background: var(--ora-surface-hover); }

.table.table-striped tbody tr:nth-of-type(odd) { background: var(--ora-surface-2); }

/* table scroll wrapper */
.table-responsive-custom {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.table-responsive-custom table {
    min-width: 1200px; /* Adjust according to your columns */
    width: 100%;
    white-space: nowrap;
}

/* DataTables — length menu & filter */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--ora-text-secondary);
    font-size: 13.5px;
    padding-bottom: 14px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 500;
    color: var(--ora-text-secondary);
}

/* Search input — full-size pill */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--ora-border);
    border-radius: var(--ora-radius-sm);
    padding: 0 14px;
    background: var(--ora-surface);
    color: var(--ora-text);
    height: 38px;
    min-width: 220px;
    font-size: 13.5px;
    margin-left: 0 !important;
    transition: border-color var(--ora-transition), box-shadow var(--ora-transition);
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--ora-primary-500);
    box-shadow: var(--ora-shadow-focus);
    outline: none;
}

.dataTables_wrapper .dataTables_filter input::placeholder { color: var(--ora-text-muted); }

/* Length menu select — compact, with custom chevron */
.dataTables_wrapper .dataTables_length select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid var(--ora-border);
    border-radius: var(--ora-radius-sm);
    background-color: var(--ora-surface);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3e%3cpath d='M1 1l4 4 4-4' stroke='%237A8B8B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    color: var(--ora-text);
    height: 38px;
    min-width: 74px;
    width: auto;
    padding: 0 30px 0 12px;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--ora-transition), box-shadow var(--ora-transition);
}

.dataTables_wrapper .dataTables_length select:hover { border-color: var(--ora-primary-300); }

.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--ora-primary-500);
    box-shadow: var(--ora-shadow-focus);
    outline: none;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--ora-surface-2);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3e%3cpath d='M1 1l4 4 4-4' stroke='%23B7C2C0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

[data-theme="dark"] .dataTables_wrapper .dataTables_filter input { background: var(--ora-surface-2); }

.dataTables_info { color: var(--ora-text-muted); font-size: 13px; padding-top: 12px; }

/* ---------- 11b. Pagination (unified) ---------------------- */
/* Covers Bootstrap (.pagination > .page-item > .page-link),
   DataTables (.dataTables_paginate .paginate_button),
   and Laravel default pagination output. */

.pagination {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.pagination .page-item { margin: 0; }

.pagination .page-item .page-link,
.pagination > li > a,
.pagination > li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--ora-radius-sm);
    border: 1px solid var(--ora-border);
    background: var(--ora-surface);
    color: var(--ora-text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    transition: background var(--ora-transition), color var(--ora-transition),
                border-color var(--ora-transition), transform var(--ora-transition),
                box-shadow var(--ora-transition);
    text-decoration: none;
    cursor: pointer;
}

.pagination .page-item .page-link:hover,
.pagination > li > a:hover,
.pagination > li > span:hover {
    background: var(--ora-primary-50);
    color: var(--ora-primary-700);
    border-color: var(--ora-primary-200);
    z-index: 1;
    text-decoration: none;
}

.pagination .page-item .page-link:focus-visible {
    outline: none;
    box-shadow: var(--ora-shadow-focus);
    border-color: var(--ora-primary-500);
}

/* Active page */
.pagination .page-item.active .page-link,
.pagination > li.active > a,
.pagination > li.active > span,
.pagination .page-item.active .page-link:hover {
    background: var(--ora-primary-grad);
    color: var(--bg-color);
    border-color: transparent;
    box-shadow: 0 6px 14px -6px rgba(15, 61, 53, 0.55);
    transform: translateY(-1px);
}

/* Disabled state */
.pagination .page-item.disabled .page-link,
.pagination > li.disabled > a,
.pagination > li.disabled > span,
.pagination .page-item.disabled .page-link:hover {
    color: var(--ora-text-muted);
    background: var(--ora-surface-2);
    border-color: var(--ora-border);
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
    pointer-events: none;
}

/* First / Last rounding niceties when only one rounded group */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    border-radius: var(--ora-radius-sm);
}

/* Previous / Next labels: a hair more horizontal padding */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link,
.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span {
    padding: 0 16px;
    font-weight: 500;
    gap: 6px;
}

/* Sizes */
.pagination-sm .page-link {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    font-size: 12.5px;
    border-radius: var(--ora-radius-xs);
}

.pagination-lg .page-link {
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    font-size: 14.5px;
    border-radius: var(--ora-radius-md);
}

/* DataTables — align with the same look */
.dataTables_wrapper .dataTables_paginate {
    padding-top: 12px;
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    /* padding: 0 12px !important; */
    margin: 0 !important;
    border-radius: var(--ora-radius-sm) !important;
    /* border: 1px solid var(--ora-border) !important; */
    /* background: var(--ora-surface) !important; */
    color: var(--ora-text-secondary) !important;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1 !important;
    /* transition: background var(--ora-transition), color var(--ora-transition),
                border-color var(--ora-transition), transform var(--ora-transition),
                box-shadow var(--ora-transition); */
    cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    /* background: var(--ora-primary-50) !important; */
    color: var(--ora-primary-700) !important;
    border-color: var(--ora-primary-200) !important;
    z-index: 1;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--ora-primary-grad) !important;
    color: var(--bg-color) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 14px -6px rgba(15, 61, 53, 0.55);
    transform: translateY(-1px);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--ora-text-muted) !important;
    background: var(--ora-surface-2) !important;
    border-color: var(--ora-border) !important;
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    pointer-events: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    padding: 0 16px !important;
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
    color: var(--ora-text-muted);
    padding: 0 6px;
    align-self: center;
}

/* Optional pagination wrapper (use around tables) */
.ora-pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 4px 4px;
}

.ora-pagination-wrap .ora-pagination-info {
    color: var(--ora-text-muted);
    font-size: 13px;
}

/* Dark mode tweaks */
[data-theme="dark"] .pagination .page-item .page-link,
[data-theme="dark"] .pagination > li > a,
[data-theme="dark"] .pagination > li > span,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--ora-surface-2) !important;
    border-color: var(--ora-border) !important;
    color: var(--ora-text-secondary) !important;
}

[data-theme="dark"] .pagination .page-item .page-link:hover,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--ora-primary-100) !important;
    color: var(--ora-primary) !important;
    border-color: var(--ora-primary) !important;
}

/* Responsive */
@media (max-width: 575px) {
    .pagination .page-item .page-link,
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 34px;
        height: 34px;
        padding: 0 10px !important;
        font-size: 12.5px;
    }
    .pagination .page-item:first-child .page-link,
    .pagination .page-item:last-child .page-link,
    .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
    .dataTables_wrapper .dataTables_paginate .paginate_button.next { padding: 0 12px !important; }
    .ora-pagination-wrap { justify-content: center; }
    .ora-pagination-wrap .ora-pagination-info { width: 100%; text-align: center; order: 2; }
}

/* ---------- 12. Badges / Status ---------------------------- */
.badge {
    font-weight: 600;
    font-size: 11.5px;
    padding: 5px 10px;
    border-radius: var(--ora-radius-pill);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.badge-primary,
.bg-primary { background-color: var(--ora-primary-500) !important; color: #fff !important; }
.badge-success, .bg-success { background-color: var(--ora-success) !important; color: #fff !important; }
.badge-warning, .bg-warning { background-color: var(--ora-warning) !important; color: #fff !important; }
.badge-danger,  .bg-danger  { background-color: var(--ora-danger) !important; color: #fff !important; }
.badge-info,    .bg-info    { background-color: var(--ora-info) !important; color: #fff !important; }
.badge-ice,     .bg-ice     { background-color: #7FB8D9 !important; color: #fff !important; }
.badge-light { background-color: var(--ora-bg-subtle) !important; color: var(--ora-text-secondary) !important; }

/* Soft badges */
.ora-badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--ora-radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.ora-badge-soft::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.ora-badge-soft.success { background: rgba(43, 191, 140, 0.12); color: var(--ora-success); }
.ora-badge-soft.warning { background: rgba(245, 181, 68, 0.15); color: #B47A0F; }
.ora-badge-soft.danger  { background: rgba(239, 111, 108, 0.12); color: var(--ora-danger); }
.ora-badge-soft.info    { background: rgba(86, 197, 220, 0.15); color: #2391AB; }
.ora-badge-soft.muted   { background: var(--ora-bg-subtle); color: var(--ora-text-secondary); }

/* ---------- 13. Dropdowns ---------------------------------- */
.dropdown-menu {
    background: var(--ora-surface);
    border: 1px solid var(--ora-border);
    border-radius: var(--ora-radius-md);
    box-shadow: var(--ora-shadow-lg);
    padding: 8px;
    min-width: 200px;
}

.dropdown-item {
    border-radius: var(--ora-radius-sm);
    padding: 9px 12px;
    font-size: 13.5px;
    color: var(--ora-text-secondary);
    transition: background var(--ora-transition), color var(--ora-transition);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--ora-primary-50);
    color: var(--ora-primary-700);
}

.dropdown-divider { border-color: var(--ora-divider); margin: 6px 0; }

.user-dd .with-arrow + div { border-top-left-radius: var(--ora-radius-md); border-top-right-radius: var(--ora-radius-md); }
.user-dd .bg-primary { background: var(--ora-primary-grad) !important; }
.user-dd .profile-dis { background: var(--ora-surface); }

/* ---------- 14. Modals ------------------------------------- */
.modal-content {
    background: var(--ora-surface);
    border: 1px solid var(--ora-border);
    border-radius: var(--ora-radius-lg);
    box-shadow: var(--ora-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--ora-divider);
    padding: 20px 24px;
}
.modal-title {
    font-family: var(--ora-font-display);
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: var(--heading-color);
    text-transform: capitalize;
}
.modal-body { padding: 24px; color: var(--ora-text); font-weight: 300; }
.modal-footer { border-top: 1px solid var(--ora-divider); padding: 16px 24px; gap: 8px; }

.modal-backdrop.show { background: rgba(15, 30, 35, 0.55); opacity: 1; backdrop-filter: blur(4px); }

/* Confirm modal helper */
.ora-confirm-modal .modal-body {
    text-align: center;
    padding: 32px 28px 16px;
}
.ora-confirm-modal .ora-confirm-icon {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(239, 111, 108, 0.14);
    color: var(--ora-danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

/* ---------- 15. Toasts / Alerts ---------------------------- */
.toast {
    background: var(--ora-surface);
    border: 1px solid var(--ora-border);
    border-radius: var(--ora-radius-md);
    box-shadow: var(--ora-shadow-lg);
    backdrop-filter: blur(8px);
}
.toast-header { background: transparent; border-bottom: 1px solid var(--ora-divider); }

.alert {
    border: 0;
    border-radius: var(--ora-radius-md);
    padding: 14px 18px;
    font-size: 13.5px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.alert-success { background: rgba(43, 191, 140, 0.10); color: #1F9A6E; }
.alert-warning { background: rgba(245, 181, 68, 0.14); color: #95610B; }
.alert-danger  { background: rgba(239, 111, 108, 0.10); color: #B84D4A; }
.alert-info    { background: rgba(86, 197, 220, 0.12); color: #1F7E94; }

/* Toastr overrides */
.toast-success { background-color: var(--ora-success) !important; box-shadow: var(--ora-shadow-lg) !important; border-radius: var(--ora-radius-md) !important; }
.toast-error   { background-color: var(--ora-danger) !important;  box-shadow: var(--ora-shadow-lg) !important; border-radius: var(--ora-radius-md) !important; }
.toast-warning { background-color: var(--ora-warning) !important; box-shadow: var(--ora-shadow-lg) !important; border-radius: var(--ora-radius-md) !important; }
.toast-info    { background-color: var(--ora-info) !important;    box-shadow: var(--ora-shadow-lg) !important; border-radius: var(--ora-radius-md) !important; }

/* ---------- 16. Tabs / Nav --------------------------------- */
.nav-tabs {
    border-bottom: 1px solid var(--ora-border);
    gap: 4px;
}
.nav-tabs .nav-link {
    border: 0;
    border-radius: var(--ora-radius-sm) var(--ora-radius-sm) 0 0;
    padding: 11px 16px;
    color: var(--ora-text-muted);
    font-weight: 500;
    position: relative;
    transition: color var(--ora-transition), background var(--ora-transition);
}
.nav-tabs .nav-link::after {
    content: "";
    position: absolute;
    left: 16px; right: 16px; bottom: -1px;
    height: 3px;
    background: var(--ora-primary-grad);
    border-radius: 3px 3px 0 0;
    opacity: 0;
    transform: scaleX(0);
    transition: opacity var(--ora-transition), transform var(--ora-transition);
}
.nav-tabs .nav-link:hover { color: var(--ora-text); background: var(--ora-surface-hover); }
.nav-tabs .nav-link.active { color: var(--ora-primary-700); background: transparent; border: 0; }
.nav-tabs .nav-link.active::after { opacity: 1; transform: scaleX(1); }

.nav-pills .nav-link { border-radius: var(--ora-radius-pill); padding: 8px 16px; color: var(--ora-text-secondary); font-weight: 500; }
.nav-pills .nav-link.active { background: var(--ora-primary-grad); color: #fff !important; }

/* ---------- 17. Skeleton loaders --------------------------- */
.ora-skeleton {
    display: block;
    background: linear-gradient(90deg, var(--ora-bg-subtle) 0%, var(--ora-surface-hover) 50%, var(--ora-bg-subtle) 100%);
    background-size: 200% 100%;
    border-radius: var(--ora-radius-sm);
    animation: oraShimmer 1.5s ease-in-out infinite;
    height: 14px;
    width: 100%;
}
.ora-skeleton.circle { border-radius: 50%; }
.ora-skeleton.title  { height: 22px; width: 60%; }
.ora-skeleton.line   { height: 12px; margin-top: 8px; }
.ora-skeleton.line.short { width: 40%; }
.ora-skeleton.block  { height: 120px; }

@keyframes oraShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- 18. Empty state -------------------------------- */
.ora-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--ora-text-muted);
}
.ora-empty .ora-empty-illustration {
    width: 120px; height: 120px;
    margin: 0 auto 16px;
    background: var(--ora-primary-50);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ora-primary-500);
    font-size: 48px;
}
.ora-empty h4 { color: var(--ora-text); margin-bottom: 4px; }
.ora-empty p { color: var(--ora-text-muted); margin: 0; }

/* ---------- 19. Theme toggle button ------------------------ */
.ora-theme-toggle {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--ora-surface-2);
    border: 1px solid var(--ora-border);
    color: var(--ora-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--ora-transition), color var(--ora-transition), transform var(--ora-transition);
}
.ora-theme-toggle:hover { background: var(--ora-primary-50); color: var(--ora-primary-600); transform: rotate(12deg); }
[data-theme="dark"] .ora-theme-toggle { background: var(--ora-surface); }

/* ---------- 20. Footer ------------------------------------- */
.footer {
    background: transparent;
    color: var(--ora-text-muted);
    padding: 20px 28px;
    text-align: center;
    font-size: 12.5px;
    border-top: 1px solid var(--ora-divider);
    margin-top: 24px;
}
.footer a { color: var(--ora-primary-600); }

/* ---------- 21. Login / Auth screens ----------------------- */
.auth-wrapper {
    /* min-height: 100vh;
    background: radial-gradient(circle at 20% 20%, rgba(4, 54, 39, 0.14), transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(207, 161, 65, 0.16), transparent 50%),
                var(--ora-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px; */
    background-size: cover !important;          /* Makes the image cover the full screen */
    background-position: center !important;     /* Centers the image */
    background-repeat: no-repeat !important;    /* Prevents repeating */
    background-attachment: fixed  !important;    /* Keeps the background fixed while scrolling */
    min-height: 100vh;               /* Full viewport height */
    width: 100%;
    margin: 0;
    padding: 0;
}
.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--ora-surface);
    border-radius: var(--ora-radius-xl);
    box-shadow: var(--ora-shadow-lg);
    padding: 36px;
    border: 1px solid var(--ora-border);
}
.auth-card .auth-logo {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    background: var(--ora-primary-grad);
    border-radius: var(--ora-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
}

/* ---------- 22. Utilities ---------------------------------- */
.ora-rounded-pill { border-radius: var(--ora-radius-pill) !important; }
.ora-shadow-sm { box-shadow: var(--ora-shadow-sm) !important; }
.ora-shadow-md { box-shadow: var(--ora-shadow-md) !important; }
.ora-shadow-lg { box-shadow: var(--ora-shadow-lg) !important; }
.ora-bg-surface { background: var(--ora-surface) !important; }
.ora-bg-subtle  { background: var(--ora-bg-subtle) !important; }
.text-muted-soft { color: var(--ora-text-muted) !important; }
.text-strong { color: var(--ora-text) !important; }
.fw-semibold { font-weight: 600 !important; }

/* Design-spec heading + body text helpers
   Opt-in versions of the spec text styles for use on landing pages,
   empty-states, auth screens etc. where centered/capitalised
   typography reads best. Admin tables/forms keep their left alignment. */
.ora-heading,
.ora-heading-primary {
    color: var(--heading-color);
    font-family: var(--ora-font-display);
    font-weight: 500;
    font-size: 23px;
    line-height: 35px;
    letter-spacing: 0;
    text-align: center;
    text-transform: capitalize;
}

.ora-text,
.ora-text-secondary {
    color: var(--text-color);
    font-family: var(--ora-font-sans);
    font-weight: 300;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 0;
    text-align: center;
}

/* Section header */
.ora-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.ora-section-header h3 {
    font-family: var(--ora-font-display);
    font-size: 20px;
    line-height: 30px;
    margin: 0;
    color: var(--heading-color);
    font-weight: 500;
    text-transform: capitalize;
}
.ora-section-header .ora-section-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 23. Animations / micro-interactions ------------ */
@keyframes oraFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes oraFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ora-animate-fade-up { animation: oraFadeUp 360ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.ora-animate-fade-in { animation: oraFadeIn 220ms ease both; }

.card,
.ora-metric-card { animation: oraFadeUp 320ms cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- 24. Responsive --------------------------------- */
/* Laptop */
@media (max-width: 1280px) {
    .page-wrapper > .container-fluid { padding: 20px 22px 28px; }
    .ora-metric-card .ora-metric-value { font-size: 24px; }
}

/* Tablet */
@media (max-width: 992px) {
    :root { --ora-sidebar-width: 240px; }
    .page-breadcrumb { padding: 18px 20px 10px; }
    .page-wrapper > .container-fluid { padding: 16px 18px 24px; }
    .topbar .top-navbar { padding: 0 16px; }
    .auth-card { padding: 28px; }
}

@media (max-width: 768px) {
    .topbar { height: auto; }
    .topbar .top-navbar { padding: 0 12px; min-height: var(--ora-topbar-height); }
    .topbar .top-navbar .navbar-header { line-height: var(--ora-topbar-height); }

    .left-sidebar {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform var(--ora-transition-slow);
        box-shadow: var(--ora-shadow-lg);
    }
    [data-sidebartype="mini-sidebar"] .left-sidebar,
    .show-sidebar .left-sidebar {
        transform: translateX(0);
        width: var(--ora-sidebar-width);
    }

    .page-wrapper { margin-left: 0 !important; }

    .page-breadcrumb .page-title { font-size: 18px; }
    .ora-section-header { flex-direction: column; align-items: flex-start; }

    /* Horizontally scrollable tables on mobile */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .table thead th { padding: 12px 14px; }
    .table tbody td { padding: 12px 14px; }
}

/* Mobile */
@media (max-width: 575px) {
    .page-wrapper > .container-fluid { padding: 12px 14px 20px; }
    .card-body { padding: 18px; }
    .ora-metric-card { padding: 18px; }
    .ora-metric-card .ora-metric-value { font-size: 22px; }
    .btn { padding: 10px 14px; }
    .modal-body { padding: 20px; }
    .auth-card { padding: 22px; border-radius: var(--ora-radius-lg); }
    .topbar .top-navbar .navbar-brand .logo-text span { font-size: 15px; }
}

/* ---------- 25. Dark mode component overrides -------------- */
[data-theme="dark"] .topbar { background: var(--ora-surface); border-bottom-color: var(--ora-border); }
[data-theme="dark"] .left-sidebar { background: var(--ora-surface); border-right-color: var(--ora-border); }
[data-theme="dark"] .card,
[data-theme="dark"] .ora-metric-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .auth-card {
    background: var(--ora-surface);
    border-color: var(--ora-border);
}
[data-theme="dark"] .table thead th { background: var(--ora-surface-2); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select { background: var(--ora-surface-2); color: var(--ora-text); border-color: var(--ora-border); }
[data-theme="dark"] .form-control:focus { background: var(--ora-surface-2); }
[data-theme="dark"] .ora-search input.form-control { background: var(--ora-surface-2); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--ora-border-strong); border-color: var(--ora-surface); }
[data-theme="dark"] .modal-backdrop.show { background: rgba(0, 0, 0, 0.65); }
[data-theme="dark"] .topbar .pro-pic { background: var(--ora-surface-2); }
[data-theme="dark"] .ora-theme-toggle { background: var(--ora-surface-2); border-color: var(--ora-border); }

/* ============================================================
   LEGACY COMPONENTS (preserved from previous custom.css)
   ============================================================ */

/* ============================================================
   Toggle switch (status pill)
   Markup expected:
     <label class="toggle-switch active|inactive">
         <input type="checkbox" class="toggle-status" data-id="X" checked>
         <span class="slider">Active|Inactive</span>
     </label>
   The JS in admin/staff/index.blade.php flips .active/.inactive on
   the wrapper and rewrites .slider's text — the visual state is
   driven entirely by those two changes (no :checked selector), so
   the rules below mirror that contract.
   ============================================================ */

.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100px;
    height: 28px;
    vertical-align: middle;
    margin: 0;
}

/* The checkbox sits invisibly on top of the whole label so the
   entire pill is clickable and keyboard-focusable. */
.toggle-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.toggle-switch .slider {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    font-family: var(--ora-font-sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    user-select: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Track colors — wellness theme: deep green for ON, neutral gray for OFF.
   Gradient adds a subtle "depth" without being noisy. */
.toggle-switch.active .slider {
    background: linear-gradient(135deg, var(--ora-success) 0%, #34D499 100%);
    justify-content: flex-start;
    padding: 0 32px 0 14px;        /* text left, room for knob on right */
}

.toggle-switch.inactive .slider {
    background: linear-gradient(135deg, #98A3A0 0%, #7A8884 100%);
    justify-content: flex-end;
    padding: 0 14px 0 32px;        /* text right, room for knob on left */
}

/* The white knob — animated via transform for GPU-accelerated motion.
   Width 112 - knob 24 - inset 4 (each side) = 80px travel. */
.toggle-switch .slider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0px;
    width: 20px;
    height: 20px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F2 100%);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.06);
    transform: translateY(-50%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.toggle-switch.active .slider::before  { transform: translate(80px, -50%); }
.toggle-switch.inactive .slider::before { transform: translate(0,    -50%); }

/* Hover lift */
.toggle-switch:hover .slider {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18),
                0 2px 8px rgba(15, 61, 53, 0.12);
}
.toggle-switch:hover .slider::before {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.28), inset 0 -1px 1px rgba(0, 0, 0, 0.06);
}

/* Keyboard focus ring (uses the input's focus state since the input
   sits on top of the pill and is the actually-focusable element) */
.toggle-switch input:focus-visible ~ .slider {
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15),
                0 0 0 3px rgba(4, 54, 39, 0.28);
}

/* Disabled */
.toggle-switch input:disabled            { cursor: not-allowed; }
.toggle-switch input:disabled ~ .slider  { opacity: 0.55; cursor: not-allowed; }

/* Reduced-motion: skip the slide animation but keep the position swap */
@media (prefers-reduced-motion: reduce) {
    .toggle-switch .slider,
    .toggle-switch .slider::before { transition: none; }
}

/* Dark mode — softer OFF track so the gray doesn't fight the surface */
[data-theme="dark"] .toggle-switch.inactive .slider {
    background: linear-gradient(135deg, #3A4F46 0%, #2A3B33 100%);
}

#pagesubmitloader {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

[data-theme="dark"] #pagesubmitloader { background: rgba(15, 21, 24, 0.7); }

.nav-pills.custom-pills .nav-link.active{
  color: #000;
  border-bottom: 2px solid #000;
}

/* ============================================================
   26. Admin Dashboard — welcome banner, metric grid extras
   Builds on the existing .ora-metric-card component (section 8).
   ============================================================ */

/* Welcome / greeting banner */
.ora-dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px;
    margin-bottom: 24px;
    border-radius: var(--ora-radius-lg);
    background: var(--ora-primary-grad);
    color: var(--ora-text-on-primary);
    box-shadow: var(--ora-shadow-sm);
    position: relative;
    overflow: hidden;
}

.ora-dashboard-welcome::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.ora-dashboard-welcome__title {
    font-family: var(--ora-font-display);
    font-size: 23px;
    line-height: 35px;
    font-weight: 500;
    margin: 0 0 4px;
    letter-spacing: 0;
    color: var(--bg-color);
    text-transform: capitalize;
}

.ora-dashboard-welcome__subtitle {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 300;
    opacity: 0.92;
    color: var(--bg-color);
}

.ora-dashboard-welcome__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    border-radius: var(--ora-radius-pill);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.ora-dashboard-welcome__meta i { font-size: 16px; }

/* Metric grid spacing */
.ora-metric-grid > [class*="col-"] { margin-bottom: 24px; }

/* Top row inside each metric card: icon + trend pill */
.ora-metric-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ora-metric-card__top .ora-metric-trend { margin-top: 0; }

/* Success variant — green accent (was missing from section 8) */
.ora-metric-card.ora-variant-success .ora-metric-icon {
    background: rgba(43, 191, 140, 0.12);
    color: var(--ora-success);
}

/* Thin inline progress bar inside each metric card */
.ora-metric-card .ora-metric-progress {
    margin-top: 16px;
    height: 6px;
    background: var(--ora-bg-subtle);
    border-radius: var(--ora-radius-pill);
    overflow: hidden;
}

.ora-metric-card .ora-metric-progress__bar {
    height: 100%;
    background: var(--ora-primary-grad);
    border-radius: var(--ora-radius-pill);
    transition: width var(--ora-transition);
}

.ora-metric-card.ora-variant-secondary .ora-metric-progress__bar { background: var(--ora-secondary-grad); }
.ora-metric-card.ora-variant-warning   .ora-metric-progress__bar { background: linear-gradient(135deg, #F5B544 0%, #F8C972 100%); }
.ora-metric-card.ora-variant-danger    .ora-metric-progress__bar { background: linear-gradient(135deg, #EF6F6C 0%, #F49391 100%); }
.ora-metric-card.ora-variant-info      .ora-metric-progress__bar { background: linear-gradient(135deg, #56C5DC 0%, #7BD6E8 100%); }
.ora-metric-card.ora-variant-success   .ora-metric-progress__bar { background: linear-gradient(135deg, #2BBF8C 0%, #6FCF97 100%); }

/* Caption line below the progress bar */
.ora-metric-card .ora-metric-foot {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--ora-text-muted);
}

/* Responsive tweaks for the welcome banner */
@media (max-width: 768px) {
    .ora-dashboard-welcome {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 22px;
    }
    .ora-dashboard-welcome__title { font-size: 19px; }
}

/* Dark mode tweaks */
[data-theme="dark"] .ora-metric-card .ora-metric-progress { background: rgba(255, 255, 255, 0.08); }

/*===drop down css===*/
select.form-control:not([size]):not([multiple]) {
    height: calc(2.625rem + 2px);
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before, .custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before {
    background-color: var(--ora-primary);
}
/* Reset button styles */
#resetFilters{
    line-height: 20px;
}

/* custom swal css */
.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    top: .65em !important;
}