/* ==========================================================================
   Odisha Health Clinic - admin / doctor / patient panel overrides
   --------------------------------------------------------------------------
   This file is linked directly in partials/head.blade.php (outside the Vite
   bundle), so its rules - most carrying !important - win over the compiled
   Tailwind output. It previously held the SH Binayak palette (#1e0237
   purple); retuned to the Odisha Health Clinic brand:

     primary   #0f9ec3   (cyan)
     deep      #0d4a5e   (deep teal - sidebars, headings)
     secondary #0b8969   (green-teal accent)
   ========================================================================== */

:root {
    --ohc-primary: #0f9ec3;
    --ohc-primary-dark: #0b7fa4;
    --ohc-deep: #0d4a5e;
    --ohc-secondary: #0b8969;
    --ohc-tint: #ecfbff;
    --ohc-tint-2: #d3f4fd;
}

.sidebar {
    background-color: var(--ohc-deep);
    color: #fff;
}

.text-light {
    color: #fff;
}

.data-current\:bg-white {
    &[data-current] {
        color: var(--ohc-deep) !important;
    }
}

.bg-custom {
    background-color: var(--ohc-tint) !important;
}

.bg-custom2 {
    background-color: var(--ohc-deep) !important;
}

.bg-custom1 {
    background-color: var(--ohc-tint-2) !important;
}

.bg-sidebar {
    background-color: var(--ohc-deep) !important;
}

.custom-shadow {
    box-shadow: 1px 2px 4px 10px #e1e1e1;
}

.model-head {
    background-color: var(--ohc-tint) !important;
    color: var(--ohc-deep);
    border-bottom: 2px solid var(--ohc-primary);
    padding: 1.25rem 2.25rem !important;
    position: relative;
}

/* Fullpage / Wide Admin & Doctor Flyout Modals (Matching Create Doctor) */
dialog.md\:w-320,
dialog[data-flux-flyout].md\:w-320,
[data-flux-modal] > dialog.md\:w-320,
ui-modal[data-flux-modal] > dialog.md\:w-320,
.md\:w-320 {
    width: 92vw !important;
    max-width: 1440px !important;
    min-width: min(92vw, 1200px) !important;
    box-sizing: border-box !important;
}

@media (max-width: 1280px) {
    dialog.md\:w-320,
    dialog[data-flux-flyout].md\:w-320,
    [data-flux-modal] > dialog.md\:w-320,
    ui-modal[data-flux-modal] > dialog.md\:w-320,
    .md\:w-320 {
        width: 96vw !important;
        max-width: 96vw !important;
        min-width: 96vw !important;
    }
}

@media (max-width: 768px) {
    dialog.md\:w-320,
    dialog[data-flux-flyout].md\:w-320,
    [data-flux-modal] > dialog.md\:w-320,
    ui-modal[data-flux-modal] > dialog.md\:w-320,
    .md\:w-320 {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
    }
}

dialog[data-flux-flyout] > div.absolute.top-0.end-0,
dialog > div.absolute.top-0.end-0 {
    z-index: 50 !important;
    top: 0.75rem !important;
    right: 1.25rem !important;
}

.font-bold {
    font-weight: 700 !important;
}

/* Legacy class name, kept so existing markup keeps working - now brand teal. */
.text-purple {
    color: var(--ohc-deep) !important;
}


/* Doctors portal */

.bg-light-doctor {
    background-color: var(--ohc-tint) !important;
}

.bg-sidebar-doctor {
    background-color: var(--ohc-deep) !important;
}

.bg-header-doctor {
    background-color: var(--ohc-tint-2) !important;
}