/* ============================================================
   e-Hayat Theme Layer  (clean medical green -> teal)
   Loaded AFTER adminlte.css. Additive only: no markup removed.
   ============================================================ */

:root {
    --eh-green: #1e7e34;
    --eh-green-dark: #166028;
    --eh-green-light: #2aa14a;
    --eh-teal: #0d9488;
    --eh-teal-dark: #0f766e;
    --eh-mint: #d1fae5;
    --eh-ink: #1f2937;
    --eh-muted: #6b7280;
    --eh-border: #e5e7eb;
    --eh-surface: #ffffff;
    --eh-radius: 16px;
    --eh-radius-sm: 12px;
    --eh-shadow: 0 10px 30px -12px rgba(15, 118, 110, 0.28);
    --eh-shadow-hover: 0 18px 44px -14px rgba(15, 118, 110, 0.40);
    --eh-grad: linear-gradient(120deg, var(--eh-green) 0%, var(--eh-teal) 100%);
}

/* ---- Page background: soft tinted wash instead of flat gray ---- */
body.layout-fixed {
    background:
        radial-gradient(1200px 600px at 100% -10%, rgba(13, 148, 136, 0.08), transparent 60%),
        radial-gradient(1000px 500px at -10% 110%, rgba(30, 126, 52, 0.07), transparent 55%),
        #f6f8f7;
}

/* ============================================================
   HERO / BANNER  (generated backgrounds)
   ============================================================ */
.eh-hero {
    position: relative;
    border-radius: var(--eh-radius);
    overflow: hidden;
    color: #fff;
    background-size: cover;
    background-position: center;
    box-shadow: var(--eh-shadow);
    isolation: isolate;
}

.eh-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(8, 51, 36, 0.82) 0%, rgba(13, 80, 64, 0.55) 45%, rgba(13, 148, 136, 0.20) 100%);
}

.eh-hero .eh-hero-body {
    padding: 2rem 2.25rem;
}

.eh-hero h1,
.eh-hero h2,
.eh-hero h3,
.eh-hero h4 {
    color: #fff;
    font-weight: 700;
    margin-bottom: .35rem;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .25);
}

.eh-hero p,
.eh-hero .eh-sub {
    color: rgba(255, 255, 255, .88);
    margin-bottom: 0;
}

.eh-hero .eh-accent {
    color: #aef5cf;
}

/* per-page background images */
.eh-hero--dashboard { background-image: url('/images/ui/hero-dashboard.webp'); }
.eh-hero--hospital  { background-image: url('/images/ui/hero-hospital.webp'); }
.eh-hero--patient   { background-image: url('/images/ui/portal-patient.webp'); }
.eh-hero--doctor    { background-image: url('/images/ui/portal-doctor.webp'); }
.eh-hero--staff     { background-image: url('/images/ui/portal-staff.webp'); }

/* ============================================================
   CARDS  (soft glass + lift)
   ============================================================ */
.app-main .card {
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius-sm);
    box-shadow: 0 6px 18px -12px rgba(16, 24, 40, 0.18);
    transition: transform .18s ease, box-shadow .18s ease;
    overflow: hidden;
}

.app-main .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--eh-shadow-hover);
}

.app-main .card-header {
    background: #fff;
    border-bottom: 1px solid var(--eh-border);
}

.app-main .card-title {
    font-weight: 600;
    color: var(--eh-ink);
}

/* ============================================================
   KPI small-boxes  (gradient + glow + hover)
   ============================================================ */
.small-box {
    border-radius: var(--eh-radius-sm);
    box-shadow: var(--eh-shadow);
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.small-box:hover {
    transform: translateY(-3px);
    box-shadow: var(--eh-shadow-hover);
}

.small-box > .inner { padding: 1.1rem 1.25rem; }
.small-box h3 { font-weight: 700; text-shadow: 0 1px 8px rgba(0,0,0,.15); }

.small-box .icon > i {
    opacity: .28;
    transition: transform .25s ease, opacity .25s ease;
}

.small-box:hover .icon > i {
    transform: scale(1.08) rotate(-4deg);
    opacity: .42;
}

.small-box.bg-info    { background-image: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%) !important; }
.small-box.bg-success { background-image: linear-gradient(135deg, #166028 0%, #2aa14a 100%) !important; }
.small-box.bg-warning { background-image: linear-gradient(135deg, #b45309 0%, #f59e0b 100%) !important; color:#fff !important; }
.small-box.bg-danger  { background-image: linear-gradient(135deg, #991b1b 0%, #ef4444 100%) !important; }
.small-box.bg-warning .inner, .small-box.bg-warning .small-box-footer { color:#fff !important; }

.small-box-footer {
    background: rgba(0, 0, 0, .12);
    transition: background .18s ease;
}
.small-box-footer:hover { background: rgba(0, 0, 0, .22); }

/* ============================================================
   BUTTONS  (gradient fill + hover raise/glow)
   ============================================================ */
.btn {
    border-radius: 10px;
    font-weight: 500;
    transition: transform .14s ease, box-shadow .16s ease, filter .16s ease;
}

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

.btn-primary,
.btn-success {
    background-image: var(--eh-grad);
    border: none;
    box-shadow: 0 6px 16px -8px rgba(30, 126, 52, .7);
}

.btn-primary:hover,
.btn-success:hover,
.btn-primary:focus,
.btn-success:focus {
    background-image: linear-gradient(120deg, var(--eh-green-dark) 0%, var(--eh-teal-dark) 100%);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(13, 148, 136, .75);
}

.btn-primary:active,
.btn-success:active { transform: translateY(0); }

.btn-info {
    background-image: linear-gradient(120deg, #0d9488 0%, #14b8a6 100%);
    border: none;
    color: #fff;
}
.btn-warning {
    background-image: linear-gradient(120deg, #d97706 0%, #f59e0b 100%);
    border: none;
    color: #fff;
}
.btn-outline-primary { border-color: var(--eh-green); color: var(--eh-green); }
.btn-outline-primary:hover { background: var(--eh-green); border-color: var(--eh-green); }

/* ============================================================
   BADGES / TABLES polish
   ============================================================ */
.badge.bg-success { background-image: linear-gradient(120deg, var(--eh-green) 0%, var(--eh-teal) 100%) !important; }
.table thead th { color: var(--eh-muted); font-weight: 600; border-bottom: 2px solid var(--eh-border); }
.table tbody tr { transition: background .14s ease; }
.app-main .table tbody tr:hover { background: rgba(13, 148, 136, .05); }

/* ============================================================
   SIDEBAR brand + active accent
   ============================================================ */
.app-sidebar .sidebar-brand {
    background: var(--eh-grad);
}
.app-sidebar .sidebar-brand .brand-text,
.app-sidebar .sidebar-brand .brand-link { color: #fff !important; }

/* Logo emblem in a white badge so the green/gold mark reads on the green brand bar */
.app-sidebar .sidebar-brand .brand-badge {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .20);
    flex: 0 0 auto;
}
.app-sidebar .sidebar-brand .brand-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.app-sidebar .nav-sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(30,126,52,.14), rgba(13,148,136,.10));
    color: var(--eh-green-dark) !important;
    border-left: 3px solid var(--eh-green);
    font-weight: 600;
}

/* ============================================================
   ENTRANCE MOTION
   ============================================================ */
@keyframes eh-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.app-main .card,
.app-main .small-box,
.eh-hero {
    animation: eh-rise .5s ease both;
}

.app-main .row > [class*="col-"]:nth-child(2) .small-box { animation-delay: .06s; }
.app-main .row > [class*="col-"]:nth-child(3) .small-box { animation-delay: .12s; }
.app-main .row > [class*="col-"]:nth-child(4) .small-box { animation-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
    *, .app-main .card, .small-box, .eh-hero, .btn { animation: none !important; transition: none !important; }
}

/* ============================================================
   Mobile: turn wide data tables into stacked "cards" on phones.
   Applies to tables marked .table-tools or .eh-stack whose cells
   carry data-label="…". Each row becomes a bordered card and each
   cell shows its column name (from data-label) on the left.
   ============================================================ */
@media (max-width: 576px) {
    table.table-tools thead,
    table.eh-stack thead {
        display: none;
    }

    table.table-tools tbody tr,
    table.eh-stack tbody tr {
        display: block;
        margin-bottom: .75rem;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
    }

    table.table-tools tbody td,
    table.eh-stack tbody td {
        display: block;
        text-align: right;
        padding: .5rem .75rem;
        border: none;
        border-bottom: 1px solid #f1f5f9;
        white-space: normal !important;
    }

    table.table-tools tbody td:last-child,
    table.eh-stack tbody td:last-child {
        border-bottom: none;
    }

    table.table-tools tbody td[data-label]::before,
    table.eh-stack tbody td[data-label]::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        color: #6b7280;
        margin-right: 1rem;
        text-transform: uppercase;
        font-size: .72rem;
        letter-spacing: .02em;
        padding-top: .15rem;
    }

    /* striped backgrounds fight the card look on mobile */
    table.table-tools.table-striped tbody tr:nth-of-type(odd) td,
    table.eh-stack.table-striped tbody tr:nth-of-type(odd) td {
        background: transparent;
    }

    /* the per-table toolbar (filter + buttons) should wrap nicely */
    .table-tools-bar { width: 100%; }
    .table-tools-bar .input-group { max-width: none !important; flex: 1 1 100%; }
}

/* ============================================================
   CREATE-TICKET FORM  (icon sections + repeatable rows)
   ============================================================ */
.eh-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--eh-radius-sm);
    background: var(--eh-grad);
    color: #fff;
    font-size: 1.05rem;
    margin-right: .6rem;
    box-shadow: var(--eh-shadow);
    flex: 0 0 auto;
}

.eh-form-section .card-header {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--eh-ink);
    background: #fff;
    border-bottom: 2px solid var(--eh-mint);
}

.eh-doctor-checklist { max-height: 190px; overflow-y: auto; background: #fff; }

.eh-pool-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .8rem;
    border-radius: var(--eh-radius-sm);
    background: var(--eh-mint);
}

.eh-dim { opacity: .5; pointer-events: none; }

.eh-repeat-row {
    display: flex;
    gap: .6rem;
    align-items: flex-end;
    padding: .6rem;
    border: 1px dashed var(--eh-border);
    border-radius: var(--eh-radius-sm);
    margin-bottom: .6rem;
    background: rgba(13, 148, 136, .03);
}
.eh-repeat-row > div { min-width: 0; }
.eh-repeat-row .form-label { font-size: .78rem; color: var(--eh-muted); margin-bottom: .15rem; }

.eh-addrow-btn {
    border: 1px dashed var(--eh-teal);
    color: var(--eh-teal-dark);
    background: transparent;
}
.eh-addrow-btn:hover { background: var(--eh-mint); color: var(--eh-teal-dark); }

.eh-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--eh-border);
    padding: .75rem 1rem;
    border-radius: var(--eh-radius-sm) var(--eh-radius-sm) 0 0;
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    margin-top: .5rem;
}

@media (max-width: 768px) {
    .eh-repeat-row { flex-wrap: wrap; }
    .eh-repeat-row > div { flex: 1 1 100%; }
}