/**
 * Emediora Poly Clinic - brand layer (deep green + antique gold).
 * Loaded last (layouts/partials/css.blade.php and layouts/auth2.blade.php).
 * Remove the two <link> tags to restore the previous look.
 */
:root {
    --em-green: #085040;
    --em-green-dark: #053a2e;
    --em-green-mid: #0d6b56;
    --em-green-soft: #e6f1ed;
    --em-gold: #b08038;
    --em-gold-light: #d2a964;
    --em-gold-dim: #8f6528;
    --em-gold-soft: #f6efe1;
    --em-cream: #fbf8f1;
    --em-ink: #14231f;

    /* legacy token remaps so every existing rule picks the brand colors up */
    --auth-gold: var(--em-gold);
    --auth-gold-dim: var(--em-gold-dim);
    --auth-black: var(--em-ink);
    --ing-gold: var(--em-gold);
    --ing-black: var(--em-green);
    --app-brand-gold: var(--em-gold);
    --app-brand-gold-dim: var(--em-gold-dim);
    --app-brand-black: var(--em-green);
    --sb-primary: var(--em-gold);
    --sb-primary-glow: rgba(176, 128, 56, 0.35);
}

/* ============================== LOGIN ============================== */
.auth-layout-theme,
.auth-layout-theme.pace-done {
    background-color: var(--em-cream) !important;
    background-image:
        radial-gradient(1100px 560px at 50% -20%, rgba(8, 80, 64, 0.10), transparent 58%),
        radial-gradient(760px 420px at 100% 100%, rgba(176, 128, 56, 0.12), transparent 52%),
        linear-gradient(165deg, #ffffff 0%, var(--em-cream) 55%, var(--em-gold-soft) 100%) !important;
}

.auth-layout-theme .login-showcase.login-brand-panel {
    background:
        radial-gradient(ellipse 80% 60% at 85% 10%, rgba(176, 128, 56, 0.16) 0%, transparent 58%),
        radial-gradient(ellipse 70% 50% at 5% 95%, rgba(8, 80, 64, 0.10) 0%, transparent 55%),
        linear-gradient(160deg, #ffffff 0%, var(--em-cream) 60%, var(--em-gold-soft) 100%);
    border-inline-end: 1px solid rgba(176, 128, 56, 0.28);
}

.login-showcase.login-brand-panel::before {
    background: none;
}

.login-logo-medical {
    width: min(86%, 440px);
    max-width: 440px;
    height: auto;
    filter: drop-shadow(0 10px 24px rgba(8, 80, 64, 0.14));
}

.login-brand-rule {
    display: block;
    width: 64px;
    height: 3px;
    margin: 1.4rem auto 0.9rem;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--em-green), var(--em-gold));
}

.login-brand-tagline {
    color: var(--em-green) !important;
    opacity: 0.8;
}

.login-form-col {
    background: #fff;
}

.login-form-title {
    color: var(--em-green) !important;
}

.login-form-subtitle,
.login-field-label {
    color: var(--em-ink);
}

.login-input:focus {
    border-color: var(--em-green) !important;
    box-shadow: 0 0 0 3px rgba(8, 80, 64, 0.18) !important;
}

.login-remember input[type='checkbox'] {
    accent-color: var(--em-green);
}

.auth-layout-theme button.btn-auth-gold,
.auth-layout-theme input[type='submit'].btn-auth-gold,
.auth-layout-theme .btn-auth-gold,
button.btn-auth-gold,
input[type='submit'].btn-auth-gold {
    background: linear-gradient(180deg, var(--em-green-mid) 0%, var(--em-green) 55%, var(--em-green-dark) 100%) !important;
    color: #fff !important;
    border: 1px solid var(--em-green-dark) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 2px 6px rgba(8, 80, 64, 0.28) !important;
}

.btn-auth-gold:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 6px 18px rgba(8, 80, 64, 0.35) !important;
}

.btn-auth-gold:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--em-gold) !important;
}

.link-auth-gold,
.link-auth-gold:hover {
    color: var(--em-gold-dim) !important;
}

.landing-lang-switch .ing-bg-gold {
    background: var(--em-green) !important;
    color: #fff !important;
}

/* ============================ INTERNAL SHELL ============================ */
.ingzny-bg {
    background-color: var(--em-cream);
    background-image:
        radial-gradient(1200px 600px at 50% -20%, rgba(8, 80, 64, 0.07), transparent 55%),
        radial-gradient(800px 400px at 100% 100%, rgba(176, 128, 56, 0.07), transparent 50%),
        linear-gradient(165deg, #ffffff 0%, var(--em-cream) 55%, var(--em-gold-soft) 100%);
}

/* top bar */
main.tw-flex.tw-flex-col > .no-print.tw-border-b:first-child {
    background-image: linear-gradient(90deg, var(--em-green-dark) 0%, var(--em-green) 100%) !important;
    border-bottom-color: rgba(210, 169, 100, 0.55) !important;
}

/* sidebar */
.side-bar {
    border-right-color: rgba(176, 128, 56, 0.25);
}
.side-bar-brand-header {
    background: linear-gradient(180deg, #ffffff 0%, var(--em-cream) 100%);
}
.side-bar-brand-medical {
    max-width: 210px;
    filter: none;
}
.side-bar-brand-app-row {
    display: none !important;
}

/* bootstrap / adminlte primary actions */
.btn-primary,
.btn-info,
.btn-success {
    background-color: var(--em-green) !important;
    border-color: var(--em-green-dark) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-success:hover {
    background-color: var(--em-green-mid) !important;
    border-color: var(--em-green) !important;
}
.btn-warning {
    background-color: var(--em-gold) !important;
    border-color: var(--em-gold-dim) !important;
    color: #fff !important;
}
a,
.text-primary {
    color: var(--em-green);
}
a:hover {
    color: var(--em-gold-dim);
}
.bg-primary,
.label-primary,
.badge-primary {
    background-color: var(--em-green) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-top: 3px solid var(--em-gold);
    color: var(--em-green);
}
.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--em-green) !important;
    box-shadow: 0 0 0 3px rgba(8, 80, 64, 0.15) !important;
}
.pagination > .active > a,
.pagination > .active > span,
.page-item.active .page-link {
    background-color: var(--em-green) !important;
    border-color: var(--em-green) !important;
    color: #fff !important;
}
.box.box-primary,
.box-primary {
    border-top-color: var(--em-gold) !important;
}
table.dataTable thead th,
.table > thead > tr > th {
    border-bottom-color: var(--em-gold-light);
}
.ing-bg-gold,
.bg-gold {
    background-color: var(--em-gold) !important;
}
.ing-c-gold {
    color: var(--em-gold-dim) !important;
}