/*
 * TebCore shared visual identity layer.
 * Loaded on every layout (admin, doctor, patient, student, facility, lab,
 * public, auth). Provides the unified brand palette + base component
 * styling described in the design brief (reference: teb-core-front-main).
 *
 * Panel layouts keep defining their own --tc-brand / --dc-brand / --pc-brand
 * / --fc-brand / --lc-brand variables (unchanged names, so nothing that
 * already uses them breaks) — this file just gives shared secondary/accent
 * tokens and restyles the base Bootstrap components using whichever brand
 * variable is active on the page.
 */

:root {
    /* Shared accent tokens (same across every panel) */
    --id-accent: #f5ae2e;      /* amber — hover/secondary emphasis */
    --id-accent-2: #60bc97;    /* soft green — tertiary accent */
    --id-bg-soft: #f3f8fb;     /* light blue-gray page/section background */
    --id-border: #e7edf3;
    --id-radius-sm: 6px;
    --id-radius-md: 10px;
    --id-shadow-soft: 0 2px 14px rgba(0, 0, 0, 0.06);
}

/* ── Typography ─────────────────────────────────────────────────────── */
body {
    font-family: 'Almarai', 'Tajawal', 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.fw-bold, .fw-semibold {
    font-family: 'Almarai', 'Tajawal', 'Inter', sans-serif;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--tc-brand, var(--dc-brand, var(--pc-brand, var(--fc-brand, var(--lc-brand, #01566d)))));
    border-color: var(--tc-brand, var(--dc-brand, var(--pc-brand, var(--fc-brand, var(--lc-brand, #01566d)))));
    box-shadow: none;
    transition: filter .18s ease, transform .1s ease;
}
.btn-primary:hover,
.btn-primary:focus {
    filter: brightness(0.92);
    border-color: transparent;
}
.btn-outline-primary {
    color: var(--tc-brand, var(--dc-brand, var(--pc-brand, var(--fc-brand, var(--lc-brand, #01566d)))));
    border-color: var(--tc-brand, var(--dc-brand, var(--pc-brand, var(--fc-brand, var(--lc-brand, #01566d)))));
}
.btn-outline-primary:hover {
    background-color: var(--id-accent);
    border-color: var(--id-accent);
    color: #fff;
}
.btn {
    border-radius: var(--id-radius-sm);
    font-weight: 600;
    min-height: 38px;
    box-shadow: none !important;
}
.btn:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc-brand, var(--dc-brand, var(--pc-brand, var(--fc-brand, var(--lc-brand, #01566d))))) 15%, transparent) !important;
}

/* ── Cards ──────────────────────────────────────────────────────────── */
.card {
    border-radius: var(--id-radius-md);
    border: 1px solid var(--id-border);
    box-shadow: var(--id-shadow-soft);
}
.card-header {
    border-top-left-radius: var(--id-radius-md) !important;
    border-top-right-radius: var(--id-radius-md) !important;
}

/* ── Badges ─────────────────────────────────────────────────────────── */
.badge {
    font-weight: 600;
    border-radius: 6px;
}

/* ── Tables ─────────────────────────────────────────────────────────── */
.table thead th {
    background: var(--id-bg-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6b7d8f;
    border-bottom: none;
    font-weight: 700;
}
.table td, .table th {
    vertical-align: middle;
}

/* ── Forms ──────────────────────────────────────────────────────────── */
.form-control, .form-select {
    border-radius: var(--id-radius-sm);
    border-color: var(--id-border);
}
.form-control:focus, .form-select:focus {
    border-color: var(--tc-brand, var(--dc-brand, var(--pc-brand, var(--fc-brand, var(--lc-brand, #01566d)))));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc-brand, var(--dc-brand, var(--pc-brand, var(--fc-brand, var(--lc-brand, #01566d))))) 12%, transparent);
}

/* ── Booking hero banner (shared across home / doctor search / doctor profile) ── */
.tc-booking-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding: 90px 0;
    display: flex;
    align-items: center;
}
.tc-booking-hero .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11,37,48,.88) 0%, rgba(1,86,109,.75) 100%);
}
.tc-booking-hero .tc-booking-hero-content {
    position: relative;
    z-index: 1;
    color: #fff;
}
.tc-booking-hero h1 {
    font-size: clamp(24px, 3.4vw, 42px);
    font-weight: 800;
    color: #fff;
    margin-bottom: 28px;
}
.tc-booking-hero .hero-search-box { margin-top: 0; }

.hero-search-box{background:#dde3e8;border-radius:16px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.3);}
.search-field-wrap{position:relative;}
[dir="rtl"] .search-icon{right:14px;}
[dir="ltr"] .search-icon{left:14px;}
.search-icon{position:absolute;top:50%;transform:translateY(-50%);color:#f5ae2e;pointer-events:none;z-index:2;font-size:14px;}
[dir="rtl"] .search-input{padding-right:40px;}
[dir="ltr"] .search-input{padding-left:40px;}
.search-input{border:1.5px solid #e4e6ef;border-radius:11px;padding:12px 14px;font-size:14px;width:100%;background:#fff;color:#3f4254;transition:border-color .2s;}
.search-input:focus{outline:0;border-color:#01566d;box-shadow:0 0 0 3px rgba(1,86,109,.1);}
.search-btn{background:#60bc97;border:none;border-radius:12px;color:#fff;font-weight:600;transition:all .2s;}
.search-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(96,188,151,.4);color:#fff;background:#4a9d7c;}

/* ── Links ──────────────────────────────────────────────────────────── */
a {
    color: var(--tc-brand, var(--dc-brand, var(--pc-brand, var(--fc-brand, var(--lc-brand, #01566d)))));
}
a:hover {
    color: var(--id-accent);
}