/*
 * MediCode skin — applied on top of the Bootstrap 5 core.
 * The brand colour (--mc-primary*) is set per company in the layout <head>.
 */
:root {
    --mc-primary: #1e40af;
    --mc-primary-rgb: 30, 64, 175;
    --mc-primary-dark: #1a3899;
    --mc-sidebar: #0f1b2d;
    --mc-sidebar-2: #15253d;
    --mc-sidebar-text: #b6c2d4;
    --mc-sidebar-muted: #6f7f96;
    --mc-body: #f3f5f9;
    --mc-border: #e3e8ef;
    --mc-heading: #0f172a;
    --mc-text: #334155;
    --mc-muted: #64748b;
    --mc-radius: 10px;
    --bs-primary: var(--mc-primary);
    --bs-primary-rgb: var(--mc-primary-rgb);
    --bs-body-font-family: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    font-family: var(--bs-body-font-family);
    background: var(--mc-body);
    color: var(--mc-text);
    font-size: 0.9rem;
    letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .text-heading { color: var(--mc-heading); font-weight: 600; letter-spacing: -0.015em; }
.text-muted { color: var(--mc-muted) !important; }
a { color: var(--mc-primary); }

/* ---------- Sidebar ---------- */
.layout-menu.bg-menu-theme {
    background: linear-gradient(180deg, var(--mc-sidebar) 0%, var(--mc-sidebar-2) 100%) !important;
    color: var(--mc-sidebar-text);
    box-shadow: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}
/* Sidebar brand: MediCode logo on a white card (its red/blue need a light ground),
   the licensed company below it, smaller. */
.mc-brand { padding: 0.9rem 0.85rem 0.6rem !important; height: auto !important; min-height: 76px; align-items: flex-start !important; position: relative; }
.mc-brand-link { display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem; text-decoration: none; flex: 1; min-width: 0; }
.mc-brand-card {
    display: flex; align-items: center; gap: 0.5rem; background: #fff; border-radius: 12px;
    padding: 0.45rem 0.7rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.mc-brand-mark { height: 38px; width: auto; flex: 0 0 auto; }
.mc-brand-card { min-width: 0; overflow: hidden; }
.mc-brand-word { flex: 1 1 0; min-width: 0; width: 100%; height: 22px; object-fit: contain; object-position: left center; }
.mc-brand-company { display: flex; align-items: center; gap: 0.5rem; padding: 0 1.9rem 0 0.15rem; min-width: 0; }
.mc-brand-company-logo { width: 34px; height: 24px; background: #fff; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; padding: 2px 3px; flex: 0 0 auto; }
.mc-brand-company-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mc-brand-company-name { color: var(--mc-sidebar-text); font-size: 0.74rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Collapse button sits on the company row, so the logo card gets the full width. */
.mc-brand .layout-menu-toggle { position: absolute !important; right: 0.9rem; top: 4.75rem; margin: 0 !important; }
.bg-menu-theme .menu-inner-shadow { display: none !important; }
.bg-menu-theme .menu-header { padding: 1.1rem 1.5rem 0.4rem !important; margin: 0 !important; }
.bg-menu-theme .menu-header .menu-header-text {
    color: var(--mc-sidebar-muted) !important; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em;
}
.bg-menu-theme .menu-header:before { display: none !important; }
.bg-menu-theme .menu-link, .bg-menu-theme .menu-link .menu-icon { color: var(--mc-sidebar-text) !important; }
.bg-menu-theme .menu-inner > .menu-item > .menu-link { border-radius: 8px; margin: 1px 0.75rem; padding: 0.5rem 0.75rem; font-size: 0.86rem; font-weight: 500; }
.bg-menu-theme .menu-inner > .menu-item:not(.active) > .menu-link:hover,
.bg-menu-theme .menu-sub > .menu-item:not(.active) > .menu-link:hover { background: rgba(255, 255, 255, 0.06) !important; color: #fff !important; }
.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    background: var(--mc-primary) !important; box-shadow: 0 4px 12px rgba(var(--mc-primary-rgb), 0.35) !important; color: #fff !important;
}
.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon { color: #fff !important; }
.bg-menu-theme .menu-item.open > .menu-toggle,
.bg-menu-theme .menu-item.active > .menu-toggle { background: rgba(255, 255, 255, 0.06) !important; color: #fff !important; }
.bg-menu-theme .menu-sub > .menu-item > .menu-link { font-size: 0.82rem; }
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link { color: #fff !important; background: transparent !important; box-shadow: none !important; }
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before { background: var(--mc-primary) !important; border-color: var(--mc-primary) !important; }
.layout-menu-toggle, .layout-menu-toggle i { color: var(--mc-sidebar-text) !important; }
.layout-menu-collapsed:not(.layout-menu-hover) .mc-brand-card { padding: 0.35rem; justify-content: center; }
.layout-menu-collapsed:not(.layout-menu-hover) .mc-brand-mark { height: 30px; }
.layout-menu-collapsed:not(.layout-menu-hover) .mc-brand-company,
.layout-menu-collapsed:not(.layout-menu-hover) .mc-brand-word { display: none !important; }

/* ---------- Top bar ---------- */
.layout-navbar.mc-topbar {
    background: #fff !important; border-bottom: 1px solid var(--mc-border); box-shadow: none !important;
    height: 64px !important; border-radius: 0 !important; margin: 0 !important;
    padding: 0 1.5rem !important; max-width: none !important;
}
/* Fixed top bar spans only the space beside the sidebar. */
@media (min-width: 1200px) {
    .layout-navbar-fixed .layout-navbar.mc-topbar { left: 260px !important; right: 0 !important; width: auto !important; }
    .layout-menu-collapsed:not(.layout-menu-hover) .layout-navbar.mc-topbar { left: 84px !important; }
}
@media (max-width: 1199.98px) {
    .layout-navbar-fixed .layout-navbar.mc-topbar { left: 0 !important; right: 0 !important; width: auto !important; }
}
.layout-navbar-fixed .layout-page:before { display: none !important; }
.layout-navbar-fixed .layout-content-navbar .layout-navbar.mc-topbar { top: 0 !important; }
.mc-topbar-company { font-weight: 600; color: var(--mc-heading); line-height: 1.1; }
.mc-topbar-title small { font-size: 0.72rem; }
.mc-search {
    display: flex; align-items: center; gap: 0.5rem; max-width: 560px; background: var(--mc-body);
    border: 1px solid var(--mc-border); border-radius: 8px; padding: 3px 4px 3px 12px;
}
.mc-search i { color: var(--mc-muted); }
.mc-search .form-control { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0.35rem 0; font-size: 0.85rem; }
.mc-search .btn { border-radius: 6px; }
.mc-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: rgba(var(--mc-primary-rgb), 0.12); color: var(--mc-primary);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.layout-page { background: var(--mc-body); }
.content-wrapper > .container-p-y { padding-top: 1.75rem !important; }
@media (min-width: 1200px) {
    .layout-navbar-fixed .layout-page { padding-top: 64px !important; }
}

/* ---------- Page header (title + actions) ---------- */
.mc-page-header { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.25rem; }
.mc-page-header h4 { margin: 0; font-size: 1.35rem; }
.mc-page-header p { margin: 0.25rem 0 0; color: var(--mc-muted); font-size: 0.86rem; max-width: 760px; }
.mc-page-header .mc-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Old page titles ("<h4 class=\"py-3 mb-4\">") */
.content-wrapper h4.py-3.mb-4, .content-wrapper h4.fw-bold.py-3 { padding-top: 0 !important; margin-bottom: 1.25rem !important; font-size: 1.35rem; }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--mc-border) !important; border-radius: var(--mc-radius) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.card-header { background: transparent; border-bottom: 1px solid var(--mc-border); padding: 1rem 1.25rem; }
.card-header .card-title, .card-header h5 { font-size: 1rem; font-weight: 600; margin-bottom: 0; }
.card-body { padding: 1.25rem; }
.mc-stat { display: flex; align-items: center; gap: 1rem; }
.mc-stat-icon {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--mc-primary-rgb), 0.1); color: var(--mc-primary); font-size: 1.4rem;
}
.mc-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--mc-heading); line-height: 1.1; }
.mc-stat-label { font-size: 0.8rem; color: var(--mc-muted); }

/* ---------- Tables ---------- */
.table { --bs-table-hover-bg: rgba(var(--mc-primary-rgb), 0.03); color: var(--mc-text); }
.table > thead > tr > th, .table > :not(caption) > * > th {
    background: #f8fafc !important; color: var(--mc-muted) !important; font-size: 0.7rem !important; font-weight: 600 !important;
    text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--mc-border) !important; white-space: nowrap;
    padding-top: 0.7rem !important; padding-bottom: 0.7rem !important;
}
.table > :not(caption) > * > td { border-color: #eef1f5 !important; vertical-align: middle; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.table tbody tr:hover > td { background: rgba(var(--mc-primary-rgb), 0.025); }
.card-datatable, .dataTables_wrapper { font-size: 0.86rem; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border-radius: 8px; }
.dataTables_wrapper .dataTables_info { color: var(--mc-muted); font-size: 0.8rem; }
.page-link { border-radius: 6px !important; margin: 0 2px; }
.code-mono, .font-monospace { font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; font-size: 0.8rem; }

/* ---------- Buttons & forms ---------- */
.btn { border-radius: 8px; font-weight: 500; letter-spacing: 0; }
.btn-primary { background: var(--mc-primary) !important; border-color: var(--mc-primary) !important; box-shadow: none !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus { background: var(--mc-primary-dark) !important; border-color: var(--mc-primary-dark) !important; }
/* The template's grey "label" buttons and badges are so faint they look disabled. */
.btn-label-secondary { color: #334155 !important; background: #eef2f7 !important; border: 1px solid #dfe5ee !important; }
.btn-label-secondary:hover, .btn-label-secondary:focus { color: var(--mc-primary) !important; background: #e6ebf3 !important; border-color: rgba(var(--mc-primary-rgb), 0.35) !important; }
.btn-label-primary { border: 1px solid rgba(var(--mc-primary-rgb), 0.25) !important; }
.bg-label-secondary { color: #475569 !important; background-color: #eef2f7 !important; }
.btn-icon { width: 34px; height: 34px; border-radius: 8px; }
.btn-icon:hover { background: rgba(var(--mc-primary-rgb), 0.08); }
.form-label { font-weight: 500; color: var(--mc-text); font-size: 0.82rem; text-transform: none; letter-spacing: 0; margin-bottom: 0.35rem; }
.form-control, .form-select, .select2-container--default .select2-selection--single {
    border-radius: 8px !important; border-color: #d7dde6 !important; font-size: 0.875rem;
}
.form-control:focus, .form-select:focus { border-color: var(--mc-primary) !important; box-shadow: 0 0 0 3px rgba(var(--mc-primary-rgb), 0.12) !important; }
.form-text { color: var(--mc-muted); font-size: 0.76rem; }
.form-section-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mc-muted); margin: 0.5rem 0 0.75rem; }
.required:after { content: " *"; color: #dc2626; }
/* (i) help icon after a field label; the label's "*" stays next to the text. */
.mc-help { font-size: 0.85rem; color: #94a3b8; margin-left: 0.3rem; cursor: help; vertical-align: -1px; }
.mc-help:hover, .mc-help:focus { color: var(--mc-primary); outline: none; }
label.required { display: inline-flex; align-items: center; flex-wrap: wrap; }
label.required:after { order: 1; margin-left: 2px; }
label.required .mc-help { order: 2; }
.text-uppercase::placeholder { text-transform: none; }
/* Warning boxes: dark text on the light amber background (the template's orange-on-orange is hard to read). */
.alert-warning { color: #78350f !important; background-color: #fff7e6 !important; border: 1px solid #fcd9a0 !important; }
.alert-warning a { color: #92400e; text-decoration: underline; }
/* Report tables: one line per cell; the table scrolls sideways when needed. */
.mc-report-table td, .mc-report-table th { white-space: nowrap; }
/* Repeater "Add" button (print-job batches) needs room before the next field. */
button[data-repeater-create] { margin-bottom: 1rem; }
.modal-content { border-radius: 12px; border: 0; }
/* The template pushes the close button outside the dialog corner; keep it inside the header. */
.modal .modal-header .btn-close { transform: none !important; box-shadow: none !important; background-color: transparent !important; padding: 0.5rem !important; margin: -0.25rem -0.5rem -0.25rem auto; }
.modal .modal-header .btn-close:hover { background-color: #eef2f7 !important; }
/* Older dialogs (centred title, pinned close button): same look as the new ones. */
.modal .btn-close.btn-pinned { transform: none !important; box-shadow: none !important; background-color: transparent !important;
    position: absolute; top: 1rem; right: 1rem; padding: 0.5rem !important; }
.modal .btn-close.btn-pinned:hover { background-color: #eef2f7 !important; }
.modal-content.p-3.p-md-5 { padding: 1.5rem 1.75rem !important; }
.modal-body .text-center.mb-4 { text-align: left !important; border-bottom: 1px solid var(--mc-border); margin: -0.25rem -0.25rem 1.25rem !important; padding-bottom: 0.9rem; }
.modal-body .text-center.mb-4 h3 { font-size: 1.15rem; margin-bottom: 0.2rem !important; }
.modal-body .text-center.mb-4 p { font-size: 0.82rem; margin-bottom: 0; }
.modal-body .col-12.text-center { text-align: right !important; border-top: 1px solid var(--mc-border); padding-top: 1rem; margin-top: 0.5rem; }
.modal-header { border-bottom: 1px solid var(--mc-border); padding: 1rem 1.5rem; }
.modal-footer { border-top: 1px solid var(--mc-border); padding: 0.85rem 1.5rem; }
.modal-body { padding: 1.25rem 1.5rem; }
.badge { font-weight: 600; letter-spacing: 0.01em; }
/* Tooltips never block a click on the button next to them. */
.tooltip { --bs-tooltip-bg: #0f172a; --bs-tooltip-font-size: 0.76rem; --bs-tooltip-max-width: 280px; pointer-events: none; }
.alert-info-soft { background: rgba(var(--mc-primary-rgb), 0.06); border: 1px solid rgba(var(--mc-primary-rgb), 0.18); color: var(--mc-text); border-radius: 10px; }

/* ---------- Footer ---------- */
.mc-footer { border-top: 1px solid var(--mc-border); background: #fff; font-size: 0.78rem; color: var(--mc-muted); }

/* Hide the template's floating customizer if anything injects it. */
#template-customizer { display: none !important; }

/* Tabs in the brand colour */
.nav-tabs .nav-link { color: var(--mc-text); }
.nav-tabs .nav-link:hover { color: var(--mc-primary); }
.nav-tabs .nav-link.active, .nav-tabs .nav-link.active:hover, .nav-tabs .nav-link.active:focus { color: var(--mc-primary); border-bottom-color: var(--mc-primary); box-shadow: 0 -2px 0 var(--mc-primary) inset; }
.mc-tabs { background: #fff; border-radius: var(--mc-radius) var(--mc-radius) 0 0; overflow-x: auto; flex-wrap: nowrap; }
.mc-tabs .nav-link { white-space: nowrap; }

/* Tables that turn into stacked cards on phones (td data-label = caption) */
@media (max-width: 767.98px) {
    .mc-stack thead { display: none; }
    .mc-stack, .mc-stack tbody, .mc-stack tr, .mc-stack td { display: block; width: 100%; }
    .mc-stack tr { padding: 0.75rem 1rem; border-bottom: 1px solid var(--mc-border); }
    .mc-stack td { border: 0 !important; padding: 0.2rem 0 !important; text-align: left !important; }
    .mc-stack td[data-label] { display: flex; align-items: center; gap: 0.75rem; }
    .mc-stack td[data-label]:before { content: attr(data-label); flex: 0 0 38%; font-size: 0.78rem; color: var(--mc-muted); text-align: left; font-family: var(--bs-body-font-family); letter-spacing: 0; }
    .mc-stack td[data-label] > * { min-width: 0; }
    .mc-stack td[data-label] > .form-select, .mc-stack td[data-label] > .form-control { flex: 1; }
    .mc-stack td.mc-stack-title { padding-bottom: 0.4rem !important; }
    .mc-stack td:empty { display: none; }
}