/* ── CIRCL portal overrides ─────────────────────────────────────────────
   Brand layer over the vendor admin theme (bootstrap.min.css + app.min.css),
   loaded by the patient, practitioner, admin, pharmacy, outbound, login and
   error pages. Tokens come from brand/circl.css — keep colours as variables. */

/* Typography */
body,
.btn, .form-control, .form-select, .dropdown-menu, .table, .nav, .modal, .tooltip, .popover, .toast, .swal-modal,
#sidebar-menu, .navbar-header, .page-title-box, .card,
.badge:not([class*="uil-"]):not([class*="fa-"]):not([class*="bi-"]):not([class*="mdi-"]) {
    font-family: var(--circl-font) !important;
}
/* Icon fonts must keep their own family or the glyphs vanish */
[class^="uil-"], [class*=" uil-"], i[class*="uil-"] { font-family: 'unicons-line' !important; }
.fa, .fas, .far, .fab, [class*=" fa-"] { font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', FontAwesome !important; }
.bi, [class*=" bi-"] { font-family: 'bootstrap-icons' !important; }
.mdi, [class*=" mdi-"] { font-family: 'Material Design Icons' !important; }
body {
    color: var(--circl-ink);
    letter-spacing: var(--circl-tracking-tight);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title, .page-title-box h4, .modal-title, .swal-title {
    font-family: var(--circl-font) !important;
    font-weight: 500;
    letter-spacing: var(--circl-tracking-tight);
    color: var(--circl-ink);
}
h4, .card-title { font-weight: 500; }
.card-title.card-title1 { font-size: 28px; padding-bottom: 16px; line-height: 1.1; }
.text-muted { color: var(--circl-ink-subtle) !important; }
a { color: var(--circl-ink); }
a:hover { color: var(--circl-black-hover); }

/* Page & body background */
body,
.page-content,
#page-topbar,
.navbar-header,
.main-content {
    background: transparent !important;
}
body {
    background: var(--circl-gradient-light) fixed !important;
    min-height: 100vh;
}
.page-content { min-height: 100vh; }

/* Sidebar */
.vertical-menu {
    background: var(--circl-white) !important;
    border-right: 1px solid var(--circl-line);
}
.navbar-brand-box { background: var(--circl-white) !important; }
#sidebar-menu ul li a {
    color: var(--circl-ink) !important;
    font-weight: 500;
    border-radius: var(--circl-radius-pill) !important;
    margin: 0 12px;
    transition: background-color .15s;
}
/* One layout for every menu row, so label and icon disc centre on each other
   whether or not the link carries the theme's waves-effect (overflow:hidden)
   class. The per-page header styles set 25px between rows and an uneven
   11/8/27px pad; the extra class in the selector lets these win over them. */
#sidebar-menu ul.metismenu > li { margin-top: 6px; }
#sidebar-menu ul.metismenu li a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px 8px 16px !important;
}
#sidebar-menu ul.metismenu li a > .badge.rounded-pill { float: none; flex: 0 0 auto; }
#sidebar-menu ul li a:hover { background: var(--circl-light-grey) !important; }
#sidebar-menu ul li a i { color: var(--circl-ink) !important; }
/* Circular icon badges on the right of each menu item: ink disc, white glyph */
#sidebar-menu ul li a i.badge.rounded-pill,
#sidebar-menu ul li a .badge.rounded-pill {
    background-color: var(--circl-black) !important;
    color: var(--circl-white) !important;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 !important; font-size: 15px;
}
#sidebar-menu ul li a.active .badge.rounded-pill,
.mm-active .active .badge.rounded-pill { background-color: var(--circl-black) !important; color: var(--circl-white) !important; }
.mm-active > a,
.mm-active .active,
#sidebar-menu ul li a.active {
    background: var(--circl-light-blue) !important;
    color: var(--circl-ink) !important;
    font-weight: 600 !important;
    border-radius: var(--circl-radius-pill) !important;
    box-shadow: none !important;
}
.mm-active .active:before { display: none !important; }
i.badge.rounded-pill.float-end {
    background-color: var(--circl-black) !important;
    color: var(--circl-white) !important;
}
.noti-icon i { background: var(--circl-black) !important; color: var(--circl-white) !important; }
.prahe:after { background-color: var(--circl-lemon) !important; }
.prahe { color: var(--circl-ink); font-weight: 500 !important; }

/* Cards */
.card {
    border: none;
    border-radius: var(--circl-radius-card);
    box-shadow: var(--circl-shadow-card);
    overflow: hidden;
    background: var(--circl-white);
}
.card-body { padding: 24px 32px; }
.card.box { background-color: var(--circl-light-blue) !important; }

/* Dashboard list buttons — align left */
.custom-list { padding-left: 0 !important; }
li.liul {
    text-align: left !important;
    padding-left: 20px !important;
    border-color: var(--circl-line) !important;
    background: var(--circl-white) !important;
    color: var(--circl-ink);
    border-radius: var(--circl-radius-pill) !important;
}
li.liul a { color: var(--circl-ink) !important; text-decoration: none; font-weight: 600; }
li.liul.clin { background: var(--circl-black) !important; border-color: var(--circl-black) !important; }
li.liul.clin a { color: var(--circl-white) !important; font-weight: 600; }
li.liul:hover { background: var(--circl-light-grey) !important; }
li.liul.clin:hover { background: var(--circl-black-hover) !important; }

/* Primary button — black pill */
.btn-primary,
.btn-primary12,
button.btn.btn-primary.w-sm.waves-effect.waves-light,
a.btn.btn-success.waves-effect.waves-light {
    background: var(--circl-black) !important;
    border-color: var(--circl-black) !important;
    color: var(--circl-white) !important;
    border-radius: var(--circl-radius-pill);
    font-weight: 600;
    padding: 12px 28px;
    box-shadow: none !important;
    transition: background-color .15s, border-color .15s;
    text-decoration: none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary12:hover,
button.btn.btn-primary.w-sm.waves-effect.waves-light:hover,
a.btn.btn-success.waves-effect.waves-light:hover {
    background: var(--circl-black-hover) !important;
    border-color: var(--circl-black-hover) !important;
    color: var(--circl-white) !important;
}
.btn-primary:disabled, .btn-primary.disabled {
    background: var(--circl-line) !important;
    border-color: var(--circl-line) !important;
    color: var(--circl-ink-subtle) !important;
}
.btn-primary12 a { color: var(--circl-white) !important; text-decoration: none; }

/* Secondary/outline button — outlined black pill */
.btn-outline-primary,
.btn-secondary,
.btn-outline-secondary,
.btn-light {
    background: var(--circl-white) !important;
    border: 2px solid var(--circl-black) !important;
    border-radius: var(--circl-radius-pill);
    color: var(--circl-black) !important;
    font-weight: 600;
    padding: 10px 26px;
    transition: all .15s;
}
.btn-outline-primary:hover,
.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-light:hover {
    background: var(--circl-black) !important;
    color: var(--circl-white) !important;
}

/* Success/action buttons — lemon pill (the brand's energy accent) */
.btn-success,
.btn-info,
.btn-warning {
    background: var(--circl-lemon) !important;
    border-color: var(--circl-lemon) !important;
    color: var(--circl-black) !important;
    border-radius: var(--circl-radius-pill);
    font-weight: 600;
    box-shadow: none !important;
}
.btn-success:hover, .btn-info:hover, .btn-warning:hover {
    background: var(--circl-lemon-hover) !important;
    border-color: var(--circl-lemon-hover) !important;
    color: var(--circl-black) !important;
}

/* Danger button — keep red but pill-shaped */
.btn-danger,
.btn-outline-danger {
    border-radius: var(--circl-radius-pill);
    font-weight: 600;
}
.btn-danger { background: var(--circl-danger) !important; border-color: var(--circl-danger) !important; }
.btn-sm { padding: 6px 14px !important; font-size: 13px; }

/* Links styled as text buttons in the theme */
.btn-link { color: var(--circl-ink) !important; font-weight: 600; }

/* Tables */
.table-dip,
.table thead.table-dip th,
.table-dip th {
    background-color: var(--circl-black) !important;
    color: var(--circl-white) !important;
    border: none;
    font-weight: 500;
}
.table { border-radius: 12px; overflow: hidden; color: var(--circl-ink); }
.table > :not(caption) > * > * { border-color: var(--circl-line); }
.table-hover > tbody > tr:hover > * { background-color: var(--circl-light-grey); }
.table-light, .table-light th { background: var(--circl-light-grey) !important; color: var(--circl-ink) !important; }

/* Forms — rounded */
.form-control,
.form-select {
    border-radius: var(--circl-radius-input);
    border-color: var(--circl-line);
    color: var(--circl-ink);
}
.form-control:focus, .form-select:focus {
    border-color: var(--circl-black);
    box-shadow: 0 0 0 3px rgba(11, 19, 30, .08);
}
.form-check-input:checked { background-color: var(--circl-black); border-color: var(--circl-black); }
.form-label, label { color: var(--circl-ink); font-weight: 500; }

/* Input text vs placeholder — tell a filled field from an empty one.
   The theme shipped #495057 for the value against #74788d for the
   placeholder: 8.18:1 and 4.36:1 on white, but only 1.87:1 against EACH
   OTHER, so at normal weight an example read as an answer and a filled
   field looked unfilled. Darkening the value and lifting the placeholder
   puts 4.84:1 between them while keeping the placeholder at 3.18:1 on
   white, still legible as the hint it is. Values stay near-black rather
   than the brand ink (#0b131e) so they do not read as another label.

   Qualified by element (input.form-control, not .form-control) on purpose:
   the theme ships its own inlined `.form-control { color: #495057 }` AFTER
   this file, so an equally specific rule here loses on source order and the
   login page keeps the old pair. element+class outranks it without
   reaching for !important. */
input.form-control,
select.form-select,
textarea.form-control {
    color: #212529;
}
input.form-control::placeholder,
textarea.form-control::placeholder {
    color: #8b90a0;
    opacity: 1; /* Firefox dims placeholders by default; the colour above is the intent. */
}

/* Badges — pill */
.badge { border-radius: var(--circl-radius-pill); font-weight: 600; }
.bg-primary, .badge.bg-primary { background-color: var(--circl-black) !important; }
.bg-success, .badge.bg-success { background-color: var(--circl-success) !important; }
.bg-info, .badge.bg-info { background-color: var(--circl-light-blue) !important; color: var(--circl-ink) !important; }
.bg-warning, .badge.bg-warning { background-color: var(--circl-lemon) !important; color: var(--circl-ink) !important; }
.text-primary { color: var(--circl-black) !important; }
.text-success { color: var(--circl-success) !important; }
.text-danger { color: var(--circl-danger) !important; }

/* Alerts */
.alert { border-radius: 12px; border: none; }
.alert-success { background: var(--circl-light-blue); color: var(--circl-ink); }
.alert-info { background: var(--circl-light-grey); color: var(--circl-ink); }
.alert-warning { background: var(--circl-lemon); color: var(--circl-ink); }

/* Nav tabs / pills */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--circl-black); color: var(--circl-white); border-radius: var(--circl-radius-pill); }
.nav-tabs .nav-link.active { color: var(--circl-ink); border-bottom-color: var(--circl-black); }
.nav-link { color: var(--circl-ink-muted); }

/* Pagination — joined button group with rounded ends, matching the
   DataTables treatment below */
.pagination .page-item { margin: 0; }
.pagination .page-link {
    border-radius: 0;
    padding: 8px 16px;
    border: 1px solid var(--circl-line);
    background: var(--circl-white);
    color: var(--circl-ink);
    font-size: 13px;
}
.pagination .page-item:first-child .page-link { border-radius: 8px 0 0 8px; }
.pagination .page-item:last-child .page-link { border-radius: 0 8px 8px 0; }
.pagination .page-item.active .page-link,
.page-item.active .page-link {
    background: var(--circl-black) !important;
    color: var(--circl-white) !important;
    border-color: var(--circl-black) !important;
}
.pagination .page-link:hover { background: var(--circl-light-grey); color: var(--circl-ink); }
.pagination .page-item.disabled .page-link { color: #ccc; background: var(--circl-white); }

/* DataTables pagination */
.dataTables_paginate { text-align: center !important; padding: 16px 0; }
.dataTables_paginate .pagination { justify-content: center; margin: 0; }
.dataTables_paginate .page-item,
.dataTables_paginate li.paginate_button,
li.paginate_button.page-item {
    margin: 0 !important; border: none !important; padding: 0 !important;
    background: none !important; box-shadow: none !important; outline: none !important; border-radius: 0 !important;
}
.dataTables_paginate .page-item .page-link,
.dataTables_paginate .paginate_button {
    border-radius: 0 !important;
    padding: 8px 16px !important;
    border: 1px solid var(--circl-line) !important;
    background: var(--circl-white) !important;
    color: var(--circl-ink) !important;
    font-size: 13px;
    box-shadow: none !important;
    margin: 0 !important;
}
.dataTables_paginate .page-item:first-child .page-link,
.dataTables_paginate .paginate_button.previous { border-radius: 8px 0 0 8px !important; }
.dataTables_paginate .page-item:last-child .page-link,
.dataTables_paginate .paginate_button.next { border-radius: 0 8px 8px 0 !important; }
.dataTables_paginate .page-item.active .page-link,
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--circl-black) !important;
    color: var(--circl-white) !important;
    border-color: var(--circl-black) !important;
}
.dataTables_paginate .page-link:hover,
.dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background: var(--circl-light-grey) !important;
    color: var(--circl-ink) !important;
}
.dataTables_paginate .page-item.disabled .page-link,
.dataTables_paginate .paginate_button.disabled { color: #ccc !important; background: var(--circl-white) !important; cursor: default; }
.serchbtn { background-color: var(--circl-light-blue) !important; border-radius: var(--circl-radius-input); border: none; }

/* Back link */
.back-link {
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent; color: var(--circl-ink); border: none; padding: 0;
    font-size: 13px; font-weight: 600; text-decoration: none; margin-bottom: 16px;
}
.back-link:hover { color: var(--circl-black-hover); text-decoration: underline; }
.back-link::before { content: '\2190'; margin-right: 4px; }

/* Wizard step numbers (booking flow) */
.wizard .steps .number {
    background-color: var(--circl-black) !important;
    border-color: var(--circl-black) !important;
    color: var(--circl-white) !important;
}
p#basic-example-t-0 { color: var(--circl-ink) !important; }

/* Auth pages (vendor theme) */
.auth-full-bg, .authentication-bg { background: var(--circl-gradient-light) !important; }
.auth-logo .logo { max-height: 40px; }

/* Mobile top bar */
.mobile-topbar { border-bottom-color: var(--circl-line) !important; }
.mobile-topbar-btn, .mobile-topbar .fa-user-circle { color: var(--circl-ink) !important; }

/* Toastr notifications — CIRCL treatment. Ink card, white text, brand font;
   warnings flip to lemon with ink text, errors go burgundy. !important because
   load order vs the vendor toastr stylesheet varies by page. */
#toast-container > div {
    opacity: 1 !important;
    font-family: var(--circl-font) !important;
    font-size: 14px;
    letter-spacing: var(--circl-tracking-tight);
    border-radius: 14px !important;
    padding: 16px 20px 16px 52px !important;
    box-shadow: 0 10px 30px rgba(11, 19, 30, .18) !important;
    background-position: 18px center !important;
    background-size: 20px !important;
    color: var(--circl-white) !important;
    width: 340px !important;
}
#toast-container > .toast-success,
#toast-container > .toast-info { background-color: var(--circl-black) !important; }
#toast-container > .toast-error { background-color: var(--circl-burgundy) !important; }
#toast-container > .toast-warning { background-color: var(--circl-lemon) !important; color: var(--circl-black) !important; }
#toast-container > .toast-success { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffcab' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important; }
#toast-container > .toast-info { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Cline x1='12' y1='8' x2='12' y2='8.01'/%3E%3C/svg%3E") !important; }
#toast-container > .toast-error { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E") !important; }
#toast-container > .toast-warning { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b131e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cline x1='12' y1='10' x2='12' y2='14'/%3E%3Cline x1='12' y1='17' x2='12' y2='17.01'/%3E%3C/svg%3E") !important; }
.toast-title { font-weight: 600; }
.toast-message { font-weight: 500; line-height: 1.4; }
.toast-close-button { color: inherit !important; opacity: .7; text-shadow: none !important; font-weight: 400 !important; top: -2px !important; right: -6px !important; }
.toast-close-button:hover { opacity: 1; }
#toast-container > div:hover { box-shadow: 0 12px 34px rgba(11, 19, 30, .24) !important; }
.toast-progress { background: var(--circl-lemon) !important; opacity: .9 !important; height: 3px !important; }
#toast-container > .toast-warning .toast-progress { background: var(--circl-black) !important; }

/* Bootstrap alerts used as flash messages */
.alert-success, .alert-info { background: var(--circl-light-blue) !important; color: var(--circl-ink) !important; border: none; }
.alert-danger { background: #fce8e6 !important; color: var(--circl-danger) !important; border: none; }

/* SweetAlert */
.swal-button--confirm { background: var(--circl-black) !important; border-radius: var(--circl-radius-pill); }
.swal-modal { border-radius: var(--circl-radius-card); }

/* Avatar placeholder: initials (or a person glyph) on a light-blue disc */
.circl-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 4.5rem; height: 4.5rem; flex: 0 0 auto;
    background: var(--circl-light-blue); color: var(--circl-black);
    font-family: var(--circl-font); font-weight: 600; font-size: 28px; letter-spacing: 0;
    border: none; padding: 0; overflow: visible;
}
.circl-avatar img { display: block; width: 40px; height: auto; max-width: none; }
/* A photo avatar. overflow:visible above is for the placeholder's glyph; on an
   <img> with object-fit it lets Chrome paint the photo past the rounded
   corners, so a portrait showed as a rectangle. */
img.circl-avatar { display: block; overflow: hidden; object-fit: cover; }
/* Ringed variant (dashboard practitioner): a white gap, then an ink ring. */
.circl-avatar--ringed { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--circl-black); }

/* The line on practitioner pages naming the timezone their times are shown in
   (partials/doctor_zone_note). Quiet by design: it should be findable when a
   doctor wonders which clock they are reading, not compete with the table. */
.doctor-zone-note {
    font-size: 13px;
    color: var(--circl-ink-subtle);
    margin: -.25rem 0 1rem;
}

/* Marks a consult time we could not resolve to a real instant (partials/
   consult_time). The stored string is shown as-is, so it must not read as if
   it were converted like every other row on the page. */
.consult-time-unconverted {
    color: #b7791f;
    font-weight: 700;
    margin-left: 2px;
    cursor: help;
}

/* Login-access toggle in the admin doctor/vendor/user tables (partials/
   account_access). One control carries both the state and the action; the
   click only opens a confirm modal, so the switch never flips on its own. */
.access-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 2px 0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.access-switch:disabled { cursor: not-allowed; opacity: .55; }
.access-switch:focus-visible { outline: 2px solid #0e4a4a; outline-offset: 3px; border-radius: 12px; }
.access-switch__track {
    position: relative;
    flex: none;
    width: 34px;
    height: 20px;
    border-radius: 10px;
    background: #cfd4d8;
    transition: background-color .15s ease;
}
.access-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}
.access-switch.is-on .access-switch__track { background: #A7C948; }
.access-switch.is-on .access-switch__thumb { transform: translateX(14px); }
.access-switch:not(:disabled):hover .access-switch__track { filter: brightness(.93); }