/*
|--------------------------------------------------------------------------
| SALAMA 1 POLYCLINIC — Admin Panel Design System
| Clean, flat, professional. No gradients.
|--------------------------------------------------------------------------
| Primary Blue:  #1d4ed8
| Green:         #16a34a
| Dark:          #0f172a
|--------------------------------------------------------------------------
*/

/* ==========================================================================
   BASE / TYPOGRAPHY
   ========================================================================== */

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #1e293b !important;
    background-color: #f1f5f9 !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
}

h1, .h1 { font-size: 22px !important; }
h2, .h2 { font-size: 18px !important; }
h3, .h3 { font-size: 16px !important; }
h4, .h4 { font-size: 14px !important; }
h5, .h5 { font-size: 13px !important; }
h6, .h6 { font-size: 12px !important; }

p {
    font-size: 13px !important;
    color: #475569 !important;
    line-height: 1.55 !important;
    margin-bottom: 0.4rem !important;
}

/* ==========================================================================
   COLOR UTILITIES
   ========================================================================== */

.text-primary  { color: #1d4ed8 !important; }
.text-success  { color: #16a34a !important; }
.text-warning  { color: #d97706 !important; }
.text-danger   { color: #dc2626 !important; }
.text-muted    { color: #64748b !important; }

.bg-primary    { background-color: #1d4ed8 !important; }
.bg-success    { background-color: #16a34a !important; }
.bg-warning    { background-color: #d97706 !important; }
.bg-danger     { background-color: #dc2626 !important; }

.border-primary { border-color: #1d4ed8 !important; }

/* ==========================================================================
   FORM ELEMENTS
   --------------------------------------------------------------------------
   PJAX CONTEXT — encore/laravel-admin uses pjax (pushState + XHR) for all
   menu navigation. The browser swaps only the .content-wrapper div; the
   <head> is never replaced. Therefore:
     • CSS here applies globally across every pjax navigation — no extra work.
     • Scripts run via Admin::script() ARE re-evaluated on each pjax load
       because pjax executes <script> tags found in the XHR response.
     • Scripts placed in bare $(document).ready() in layout files run ONCE
       on the initial page load only. Hook into $(document).on('pjax:complete')
       for anything that needs re-running after navigation.
   ========================================================================== */

/*
 * DESIGN TOKEN
 * All form inputs are SQUARE (0px radius). This is intentional:
 *  — icon addons and inputs share a single solid border with no radius gap
 *  — consistent with a clinical/professional system aesthetic
 *  — eliminates the "icon square, input rounded" mismatch entirely
 */
:root {
    --input-height: 34px;
    --input-border: 1px solid #d1d5db;
    --input-border-focus: 1px solid #1d4ed8;
    --input-radius: 0px;
    --input-font: 13px;
    --input-color: #1e293b;
    --input-bg: #ffffff;
    --addon-bg: #f8fafc;
    --addon-color: #64748b;
    --focus-ring: 0 0 0 2px rgba(29,78,216,0.12);
}

/* ------------------------------------------------------------------
   BASE INPUT / TEXTAREA / SELECT
   ------------------------------------------------------------------ */

.form-control {
    height: var(--input-height) !important;
    padding: 0 10px !important;
    font-size: var(--input-font) !important;
    font-family: inherit !important;
    color: var(--input-color) !important;
    background-color: var(--input-bg) !important;
    border: var(--input-border) !important;
    border-radius: var(--input-radius) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    line-height: var(--input-height) !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
}

textarea.form-control {
    height: auto !important;
    min-height: 80px !important;
    padding: 8px 10px !important;
    line-height: 1.5 !important;
    resize: vertical !important;
}

.form-control:focus {
    border: var(--input-border-focus) !important;
    box-shadow: var(--focus-ring) !important;
    outline: none !important;
}

.form-control::placeholder { color: #9ca3af !important; }

.form-control[disabled],
.form-control[readonly] {
    background-color: #f8fafc !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
}

.form-control.is-invalid,
.form-control.border-danger { border-color: #dc2626 !important; }

/* Native select */
select.form-control {
    padding-right: 28px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.41.59L6 5.17 10.59.59 12 2 6 8 0 2z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    cursor: pointer !important;
}

.form-group { margin-bottom: 16px !important; }

.form-label,
label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 5px !important;
    display: block !important;
}

/* ------------------------------------------------------------------
   INPUT GROUPS — addon + input render as ONE seamless element.
   The fix: every child inside .input-group gets 0 radius (already 0
   from our token), plus we remove the shared inner border so there
   is only ONE visible border between adjacent pieces.
   ------------------------------------------------------------------ */

.input-group {
    position: relative !important;
    display: table !important;
    border-collapse: separate !important;
    width: 100% !important;
}

.input-group .form-control {
    /* Override any stray radius from Bootstrap's own rules */
    border-radius: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    float: left !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* Remove the border between addon and adjacent input so they share one edge */
.input-group > .input-group-addon + .form-control,
.input-group > .input-group-addon + .input-group-btn > .btn {
    border-left: none !important;
}

.input-group > .form-control + .input-group-addon,
.input-group > .form-control + .input-group-btn > .btn {
    border-left: none !important;
}

/* The addon itself */
.input-group-addon {
    display: table-cell !important;
    padding: 0 10px !important;
    height: var(--input-height) !important;
    min-width: 36px !important;
    font-size: var(--input-font) !important;
    color: var(--addon-color) !important;
    background-color: var(--addon-bg) !important;
    border: var(--input-border) !important;
    border-radius: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    line-height: var(--input-height) !important;
}

.input-group-addon i { vertical-align: middle !important; line-height: 1 !important; }

/* Focus: when the sibling input is focused, highlight the whole group */
.input-group:focus-within .input-group-addon {
    border-color: #1d4ed8 !important;
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
}
.input-group:focus-within .form-control {
    border-color: #1d4ed8 !important;
    box-shadow: none !important;   /* glow only on the outer group, not the inner border */
}
.input-group:focus-within {
    box-shadow: var(--focus-ring) !important;
}

/* Button addons */
.input-group-btn { display: table-cell !important; white-space: nowrap !important; vertical-align: middle !important; }
.input-group-btn > .btn {
    border-radius: 0 !important;
    height: var(--input-height) !important;
    border: var(--input-border) !important;
}

/* ------------------------------------------------------------------
   SELECT2 — single
   ------------------------------------------------------------------ */

.select2-container { display: block !important; width: 100% !important; }

.select2-container--default .select2-selection--single {
    height: var(--input-height) !important;
    border: var(--input-border) !important;
    border-radius: var(--input-radius) !important;
    background-color: var(--input-bg) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border: var(--input-border-focus) !important;
    box-shadow: var(--focus-ring) !important;
    outline: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: var(--input-height) !important;
    font-size: var(--input-font) !important;
    color: var(--input-color) !important;
    padding-left: 10px !important;
    padding-right: 28px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: var(--input-height) !important;
    width: 28px !important;
    right: 2px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #64748b transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
    margin-top: -2px !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #64748b transparent !important;
    border-width: 0 4px 5px 4px !important;
}

/* ------------------------------------------------------------------
   SELECT2 — multiple / tags
   ------------------------------------------------------------------ */

.select2-container--default .select2-selection--multiple {
    min-height: var(--input-height) !important;
    border: var(--input-border) !important;
    border-radius: var(--input-radius) !important;
    background-color: var(--input-bg) !important;
    box-shadow: none !important;
    padding: 3px 6px !important;
    cursor: text !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: var(--input-border-focus) !important;
    box-shadow: var(--focus-ring) !important;
    outline: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #dbeafe !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 3px !important;
    color: #1e40af !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 1px 6px !important;
    margin: 2px 3px 2px 0 !important;
    line-height: 18px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #3b82f6 !important;
    margin-right: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline input {
    font-size: var(--input-font) !important;
    color: var(--input-color) !important;
    margin-top: 2px !important;
}

/* ------------------------------------------------------------------
   SELECT2 — dropdown panel
   ------------------------------------------------------------------ */

.select2-dropdown {
    border: var(--input-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important;
    background: #fff !important;
    z-index: 9999 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: var(--input-border) !important;
    border-radius: 0 !important;
    padding: 5px 8px !important;
    font-size: var(--input-font) !important;
    outline: none !important;
}

.select2-container--default .select2-results__option {
    font-size: var(--input-font) !important;
    padding: 7px 10px !important;
    color: var(--input-color) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #1d4ed8 !important;
    color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
}

/* ------------------------------------------------------------------
   BOOTSTRAP TAGS INPUT (used by $form->tags())
   ------------------------------------------------------------------ */

.bootstrap-tagsinput {
    border: var(--input-border) !important;
    border-radius: var(--input-radius) !important;
    background: var(--input-bg) !important;
    box-shadow: none !important;
    padding: 4px 8px !important;
    min-height: var(--input-height) !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 3px !important;
    cursor: text !important;
}

.bootstrap-tagsinput input {
    font-size: var(--input-font) !important;
    color: var(--input-color) !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    min-width: 60px !important;
    flex: 1 !important;
    background: transparent !important;
}

.bootstrap-tagsinput .tag {
    background-color: #dbeafe !important;
    border: 1px solid #bfdbfe !important;
    color: #1e40af !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 1px 6px !important;
    line-height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.bootstrap-tagsinput .tag [data-role="remove"] {
    color: #3b82f6 !important;
    cursor: pointer !important;
    font-weight: 700 !important;
}

/* ------------------------------------------------------------------
   RADIO CARDS — encore/laravel-admin $form->radioCard()
   ------------------------------------------------------------------ */

.la-checkbox,
.la-radio-card,
.radio-card {
    margin-bottom: 6px !important;
}

.la-radio-card input[type="radio"] + label,
.radio-card input[type="radio"] + label {
    border: var(--input-border) !important;
    border-radius: 0 !important;
    padding: 7px 14px !important;
    font-size: var(--input-font) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: border-color 0.13s, background 0.13s !important;
}

.la-radio-card input[type="radio"]:checked + label,
.radio-card input[type="radio"]:checked + label {
    border-color: #1d4ed8 !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-weight: 600 !important;
}

/* ------------------------------------------------------------------
   DATE / DATETIME PICKER (uses .input-group internally)
   ------------------------------------------------------------------ */

.date .input-group-addon,
.datetime .input-group-addon,
.input-group.date .input-group-addon,
.input-group.datetime .input-group-addon {
    cursor: pointer !important;
}

/* Datepicker calendar panel */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active {
    background-color: #1d4ed8 !important;
    border-radius: 0 !important;
}

.datepicker table tr td:hover,
.datepicker table tr td span:hover { background-color: #eff6ff !important; border-radius: 0 !important; }
.datepicker table tr th { font-weight: 700 !important; font-size: 12px !important; }

/* ------------------------------------------------------------------
   VALIDATION STATES
   ------------------------------------------------------------------ */

.has-error .form-control,
.has-error .select2-container--default .select2-selection--single,
.has-error .select2-container--default .select2-selection--multiple,
.has-error .bootstrap-tagsinput {
    border-color: #dc2626 !important;
}

.has-error .help-block { color: #dc2626 !important; font-size: 12px !important; margin-top: 4px !important; }
.has-error label { color: #dc2626 !important; }

.has-success .form-control { border-color: #16a34a !important; }

/* ------------------------------------------------------------------
   QUILL EDITOR WRAPPER
   ------------------------------------------------------------------ */

.ql-toolbar.ql-snow {
    border: var(--input-border) !important;
    border-radius: 0 !important;
    background: var(--addon-bg) !important;
}

.ql-container.ql-snow {
    border: var(--input-border) !important;
    border-top: none !important;
    border-radius: 0 !important;
    font-size: var(--input-font) !important;
    min-height: 120px !important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 16px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
    border-radius: 7px !important;
    border-width: 1px !important;
    border-style: solid !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.14s ease, border-color 0.14s ease,
                box-shadow 0.14s ease, transform 0.1s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06) !important;
}

.btn:hover  { transform: translateY(-1px) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.12) !important; }
.btn:active { transform: translateY(0)    !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; }
.btn:focus  { outline: none !important; box-shadow: 0 0 0 3px rgba(29,78,216,0.18) !important; }

/* icon inside buttons */
.btn > i, .btn > .fa, .btn > .glyphicon { font-size: 13px !important; line-height: 1 !important; }

.btn-outline-primary {
    background-color: transparent !important;
    border-color: #1d4ed8 !important;
    color: #1d4ed8 !important;
}
.btn-outline-primary:hover {
    background-color: #1d4ed8 !important;
    color: #fff !important;
}

.btn-xs { padding: 3px 8px  !important; font-size: 11px   !important; border-radius: 5px !important; }
.btn-sm { padding: 5px 11px !important; font-size: 12px   !important; border-radius: 6px !important; }
.btn-lg { padding: 10px 22px !important; font-size: 14px  !important; border-radius: 8px !important; }
.btn-block { width: 100% !important; display: flex !important; }

/* Grid-level action toolbar spacing */
.grid-actions-right .btn,
.btn-group > .btn { margin-left: 0 !important; }

/* Split-button dropdown arrow */
.btn-group > .btn + .dropdown-toggle {
    padding-left: 9px  !important;
    padding-right: 9px !important;
    border-left-width: 1px !important;
    border-left-style: solid !important;
}

/* ==========================================================================
   CARDS & BOXES
   ========================================================================== */

.card {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    margin-bottom: 14px;
}

.box {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    margin-bottom: 16px;
    overflow: hidden;
}

.box-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 10px 14px !important;
}

.box-header.with-border { border-bottom: 2px solid #e2e8f0 !important; }

.box-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
}

.box.box-primary > .box-header { background: #1d4ed8 !important; }
.box.box-primary > .box-header .box-title,
.box.box-primary > .box-header .btn { color: #fff !important; }

.box.box-success > .box-header { background: #16a34a !important; }
.box.box-success > .box-header .box-title { color: #fff !important; }

.box-body   { padding: 14px !important; }
.box-footer { background: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; padding: 9px 14px !important; }

/* ==========================================================================
   TABLES
   ========================================================================== */

.table { margin-bottom: 0 !important; width: 100%; }

.table thead th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 9px 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-top: none !important;
    white-space: nowrap;
}

.table tbody td {
    padding: 9px 12px !important;
    font-size: 12px !important;
    color: #374151 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}

.table tbody tr:hover { background-color: #f8fafc !important; }
.table tbody tr:last-child td { border-bottom: none !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: #fafafa !important; }

/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert {
    padding: 9px 12px !important;
    margin-bottom: 14px !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
}

.alert-success  { background: #f0fdf4 !important; color: #15803d !important; border-color: #bbf7d0 !important; }
.alert-warning  { background: #fffbeb !important; color: #92400e !important; border-color: #fde68a !important; }
.alert-danger, .alert-error { background: #fef2f2 !important; color: #b91c1c !important; border-color: #fecaca !important; }
.alert-info     { background: #eff6ff !important; color: #1e40af !important; border-color: #bfdbfe !important; }

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
    display: inline-flex !important;
    align-items: center;
    padding: 2px 7px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
}

.badge-primary   { background: #dbeafe !important; color: #1e40af !important; }
.badge-success   { background: #dcfce7 !important; color: #15803d !important; }
.badge-warning   { background: #fef9c3 !important; color: #854d0e !important; }
.badge-danger    { background: #fee2e2 !important; color: #991b1b !important; }
.badge-secondary { background: #f1f5f9 !important; color: #475569 !important; }

/* ==========================================================================
   SIDEBAR — Dark
   ========================================================================== */

.main-sidebar,
.skin-blue .main-sidebar,
.skin-blue .wrapper,
.skin-blue .left-side {
    background: #0f172a !important;
}

/* Logo area */
.skin-blue .main-header .logo,
.main-header .logo {
    background: #1d4ed8 !important;
    color: #fff !important;
    border-bottom: none !important;
    padding: 0 14px !important;
    height: 50px;
    display: flex !important;
    align-items: center !important;
}
.skin-blue .main-header .logo:hover { background: #1e40af !important; }

/* Only show one logo at a time — let AdminLTE handle collapse state */
.logo-lg   { display: flex !important; align-items: center !important; }
.logo-mini { display: none !important; }
.sidebar-collapse .logo-lg   { display: none !important; }
.sidebar-collapse .logo-mini { display: flex !important; align-items: center !important; justify-content: center !important; }

/* Sidebar menu items — compact */
.sidebar-menu > li > a {
    color: #94a3b8 !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-left: 3px solid transparent !important;
    transition: color 0.13s, background 0.13s !important;
}
.sidebar-menu > li > a:hover {
    background: rgba(255,255,255,0.05) !important;
    color: #e2e8f0 !important;
    border-left-color: #1d4ed8 !important;
}
.sidebar-menu > li.active > a {
    background: rgba(29,78,216,0.15) !important;
    color: #fff !important;
    border-left-color: #16a34a !important;
}

.sidebar-menu > li > a > i { color: #475569 !important; margin-right: 8px; width: 16px; text-align: center; font-size: 13px; }
.sidebar-menu > li.active > a > i { color: #60a5fa !important; }
.sidebar-menu > li > a:hover > i  { color: #93c5fd !important; }

.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a { border-left-color: #16a34a !important; }

/* Treeview */
.skin-blue .sidebar-menu > li > .treeview-menu,
.treeview-menu { background: rgba(0,0,0,0.25) !important; margin: 0 !important; }
.treeview-menu > li > a { color: #64748b !important; padding: 7px 16px 7px 36px !important; font-size: 12px !important; }
.treeview-menu > li.active > a,
.treeview-menu > li > a:hover { color: #e2e8f0 !important; }

.sidebar-menu > li.header {
    color: #334155 !important;
    background: transparent !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 10px 16px 4px !important;
}

.user-panel { padding: 10px 14px !important; border-bottom: 1px solid #1e293b !important; }
.skin-blue .user-panel > .info,
.skin-blue .user-panel > .info > a { color: #cbd5e1 !important; font-size: 12px !important; }

.skin-blue .sidebar a { color: #94a3b8 !important; }
.skin-blue .sidebar a:hover { color: #e2e8f0 !important; text-decoration: none; }

/* ==========================================================================
   TOP HEADER / NAVBAR
   ========================================================================== */

.main-header {
    border-bottom: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10) !important;
}

.skin-blue .main-header .navbar { background: #1d4ed8 !important; }

.skin-blue .main-header .navbar .nav > li > a {
    color: rgba(255,255,255,0.88) !important;
    font-size: 13px !important;
    padding: 14px 12px !important;
}

.skin-blue .main-header .navbar .nav > li > a:hover {
    background: rgba(255,255,255,0.10) !important;
    color: #fff !important;
}

.skin-blue .main-header .navbar .sidebar-toggle {
    color: rgba(255,255,255,0.88) !important;
    padding: 14px 16px !important;
}
.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background: rgba(255,255,255,0.10) !important;
    color: #fff !important;
}

.skin-blue .main-header li.user-header { background: #1d4ed8 !important; }
.navbar-nav > .user-menu > .dropdown-menu > li.user-header { background: #1d4ed8 !important; }

/* ==========================================================================
   CONTENT HEADER
   ========================================================================== */

.content-header {
    background: #fff !important;
    padding: 12px 16px !important;
    margin-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

.content-header h1 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.content-header::before {
    content: '';
    display: block;
    height: 3px;
    background: #1d4ed8;
    margin: -12px -16px 10px;
}

/* Main content padding */
.content {
    padding: 12px 16px !important;
}

.content-wrapper { background: #f1f5f9 !important; }

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.breadcrumb { background: transparent !important; padding: 4px 0 !important; margin-bottom: 0 !important; }
.breadcrumb-item, .breadcrumb > li { font-size: 11px !important; color: #64748b !important; }
.breadcrumb-item.active, .breadcrumb > li.active { color: #0f172a !important; font-weight: 600 !important; }
.breadcrumb-item a, .breadcrumb > li a { color: #1d4ed8 !important; text-decoration: none; }
.breadcrumb-item a:hover, .breadcrumb > li a:hover { text-decoration: underline !important; }
.breadcrumb-item + .breadcrumb-item::before,
.breadcrumb > li + li::before { color: #cbd5e1 !important; }

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pagination { margin-top: 14px !important; display: flex; gap: 2px; flex-wrap: wrap; }

.page-item .page-link {
    color: #374151 !important;
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 5px !important;
    margin: 0 1px;
}
.page-item .page-link:hover { background: #f1f5f9 !important; border-color: #94a3b8 !important; }
.page-item.active .page-link { background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff !important; }
.page-item.disabled .page-link { background: #f8fafc !important; color: #94a3b8 !important; cursor: not-allowed; }

/* ==========================================================================
   MODALS
   ========================================================================== */

.modal-content {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.14) !important;
}

.modal-header {
    background: #1d4ed8 !important;
    border-bottom: none !important;
    padding: 12px 16px !important;
    border-radius: 10px 10px 0 0 !important;
}

.modal-title { font-size: 14px !important; font-weight: 700 !important; color: #fff !important; }
.modal-header .close,
.modal-header button.close { color: rgba(255,255,255,0.8) !important; opacity: 1 !important; }

.modal-body   { padding: 16px !important; }
.modal-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 10px 16px !important;
    border-radius: 0 0 10px 10px !important;
}

/* ==========================================================================
   DROPDOWNS
   ========================================================================== */

.dropdown-menu {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.09) !important;
    padding: 4px !important;
}

.dropdown-item {
    padding: 7px 10px !important;
    font-size: 12px !important;
    color: #374151 !important;
    border-radius: 5px !important;
}
.dropdown-item:hover { background: #f1f5f9 !important; color: #0f172a !important; }
.dropdown-item.active { background: #1d4ed8 !important; color: #fff !important; }
.dropdown-divider { border-top: 1px solid #e2e8f0 !important; margin: 4px 0 !important; }

/* ==========================================================================
   LINKS — exclude buttons so the link colour doesn't bleed onto btn text
   ========================================================================== */

a:not(.btn) { color: #1d4ed8 !important; text-decoration: none !important; }
a:not(.btn):hover { color: #1e40af !important; }

/* ==========================================================================
   BUTTON COLOURS — declared AFTER the link rule so !important wins
   ========================================================================== */

/* --- Primary (blue) --- */
.btn-primary,
.btn-primary:link, .btn-primary:visited, .btn-primary:active, .btn-primary:focus,
a.btn-primary, a.btn-primary:link, a.btn-primary:visited {
    background: linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%) !important;
    border-color: #1d4ed8 !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
}
.btn-primary:hover, a.btn-primary:hover {
    background: linear-gradient(135deg,#1d4ed8 0%,#1e40af 100%) !important;
    border-color: #1e40af !important;
    color: #fff !important;
}

/* --- Success / New (green) --- */
.btn-success,
.btn-success:link, .btn-success:visited, .btn-success:active, .btn-success:focus,
a.btn-success, a.btn-success:link, a.btn-success:visited {
    background: linear-gradient(135deg,#22c55e 0%,#16a34a 100%) !important;
    border-color: #15803d !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
}
.btn-success:hover, a.btn-success:hover {
    background: linear-gradient(135deg,#16a34a 0%,#15803d 100%) !important;
    border-color: #166534 !important;
    color: #fff !important;
}

/* --- Warning (amber) --- */
.btn-warning,
.btn-warning:link, .btn-warning:visited, .btn-warning:active, .btn-warning:focus,
a.btn-warning, a.btn-warning:link, a.btn-warning:visited {
    background: linear-gradient(135deg,#f59e0b 0%,#d97706 100%) !important;
    border-color: #b45309 !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
}
.btn-warning:hover, a.btn-warning:hover {
    background: linear-gradient(135deg,#d97706 0%,#b45309 100%) !important;
    border-color: #92400e !important;
    color: #fff !important;
}

/* --- Danger (red) --- */
.btn-danger,
.btn-danger:link, .btn-danger:visited, .btn-danger:active, .btn-danger:focus,
a.btn-danger, a.btn-danger:link, a.btn-danger:visited {
    background: linear-gradient(135deg,#f87171 0%,#dc2626 100%) !important;
    border-color: #b91c1c !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
}
.btn-danger:hover, a.btn-danger:hover {
    background: linear-gradient(135deg,#dc2626 0%,#b91c1c 100%) !important;
    border-color: #991b1b !important;
    color: #fff !important;
}

/* --- Secondary (slate) --- */
.btn-secondary,
.btn-secondary:link, .btn-secondary:visited, .btn-secondary:active,
a.btn-secondary, a.btn-secondary:link {
    background: linear-gradient(135deg,#64748b 0%,#475569 100%) !important;
    border-color: #475569 !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
}
.btn-secondary:hover, a.btn-secondary:hover {
    background: linear-gradient(135deg,#475569 0%,#334155 100%) !important;
    border-color: #334155 !important;
    color: #fff !important;
}

/* --- Default & Info — light pill used for Export / Filter / toggle --- */
.btn-default,
.btn-default:link, .btn-default:visited, .btn-default:active, .btn-default:focus,
a.btn-default, a.btn-default:link, a.btn-default:visited,
.btn-info,
.btn-info:link, .btn-info:visited, .btn-info:active, .btn-info:focus,
a.btn-info, a.btn-info:link, a.btn-info:visited {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    text-shadow: none !important;
}
.btn-default:hover, a.btn-default:hover,
.btn-info:hover,   a.btn-info:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* ==========================================================================
   NPROGRESS
   ========================================================================== */

#nprogress .bar { background: #16a34a !important; height: 2px !important; }
#nprogress .peg { box-shadow: 0 0 8px #16a34a, 0 0 4px #16a34a !important; }
#nprogress .spinner-icon { border-top-color: #16a34a !important; border-left-color: #16a34a !important; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.main-footer {
    background: #fff !important;
    border-top: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    font-size: 11px !important;
    padding: 10px 16px !important;
}

/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ==========================================================================
   MISC LAYOUT
   ========================================================================== */

/* Grid row spacing */
.row { margin-left: -8px !important; margin-right: -8px !important; }
.row > [class*="col-"] { padding-left: 8px !important; padding-right: 8px !important; }

/* Filter/search toolbar in grid views */
.box-body .form-horizontal .form-group { margin-bottom: 10px !important; }

/* Reduce AdminLTE info-box padding */
.info-box { min-height: 60px !important; }
.info-box-icon { width: 60px !important; font-size: 28px !important; line-height: 60px !important; }
.info-box-content { padding: 8px 12px !important; }

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
    .main-sidebar, .main-header, .btn, .table-actions { display: none !important; }
    .content-wrapper { margin-left: 0 !important; }
    body { background: #fff !important; }
}

/* ==========================================================================
   LOGIN PAGE
   ========================================================================== */

.login-page {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-box {
    width: 380px !important;
    margin: 0 auto !important;
}

.login-box-body {
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
    padding: 32px 30px !important;
    border: none !important;
}

.login-logo {
    margin-bottom: 20px !important;
}

.login-logo a {
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px;
    text-decoration: none !important;
}

.login-box-body .login-box-msg {
    font-size: 13px !important;
    color: #64748b !important;
    margin-bottom: 20px !important;
    text-align: center;
}

.login-box-body .form-group { margin-bottom: 14px !important; }

.login-box-body .btn-primary {
    height: 42px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   LOADING OVERLAY — shown during pjax navigation
   ========================================================================== */

#pjax-loading-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #16a34a;
    z-index: 99998;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

#pjax-loading-bar.active { transform: scaleX(0.7); }
#pjax-loading-bar.done   { transform: scaleX(1); opacity: 0; transition: transform 0.15s, opacity 0.3s 0.1s; }

/* ==========================================================================
   FORM — SECTION DIVIDERS
   ========================================================================== */

.form-divider {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 6px !important;
    margin: 20px 0 14px !important;
}

/* ==========================================================================
   GRID TABLE — ACTION COLUMN
   ========================================================================== */

.table .actions a,
.table .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    margin-right: 3px;
    font-size: 12px;
    transition: background 0.1s, color 0.1s;
    text-decoration: none !important;
}

/* ==========================================================================
   GRID QUICK-SEARCH
   ========================================================================== */

.grid-quick-search-input input {
    border-radius: 6px !important;
    height: 34px !important;
    font-size: 12px !important;
    padding-left: 32px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
    .content-header h1 { font-size: 15px !important; }
    .content { padding: 8px !important; }
    .box-header { padding: 8px 10px !important; }
    .box-body   { padding: 10px !important; }
    .table thead th,
    .table tbody td { padding: 7px 8px !important; font-size: 11px !important; }
    .btn { padding: 6px 10px !important; font-size: 11px !important; }
    .login-box { width: 95% !important; }
    .login-box-body { padding: 20px 16px !important; }
}

/* ==========================================================================
   PJAX TRANSITION — fade content smoothly
   ========================================================================== */

#pjax-container { animation: pjaxFadeIn 0.15s ease; }

@keyframes pjaxFadeIn {
    from { opacity: 0.5; transform: translateY(3px); }
    to   { opacity: 1;   transform: translateY(0); }
}

/* ==========================================================================
   STATUS LABEL COLOURS (consultation/service status chips)
   ========================================================================== */

.label-Pending,   .label-pending   { background: #fef3c7 !important; color: #92400e !important; }
.label-Ongoing,   .label-ongoing   { background: #dbeafe !important; color: #1e40af !important; }
.label-Approved,  .label-approved  { background: #d1fae5 !important; color: #065f46 !important; }
.label-Completed, .label-completed { background: #dcfce7 !important; color: #15803d !important; }
.label-Rejected,  .label-rejected  { background: #fee2e2 !important; color: #991b1b !important; }
.label-Cancelled, .label-cancelled { background: #f1f5f9 !important; color: #475569 !important; }

/* ==========================================================================
   CARD METRIC HIGHLIGHT — used in reports / invoices
   ========================================================================== */

.metric-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
    text-align: center;
}

.metric-card .metric-value {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    margin-bottom: 4px;
}

.metric-card .metric-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

/* ==========================================================================
   AJAX MODALS — shared across Progress Monitoring, Consultations, Patients
   ========================================================================== */

/* Sharper backdrop */
.modal-backdrop.in { opacity: 0.55 !important; }

/* Modal chrome */
#pmAddModal .modal-content,
#pmPreviewModal .modal-content,
#patAddModal .modal-content,
#patPreviewModal .modal-content {
    border: none !important;
    border-radius: 10px !important;
    overflow: hidden;
}

/* Header close button */
#pmAddModal .modal-header .close,
#pmPreviewModal .modal-header .close,
#patAddModal .modal-header .close,
#patPreviewModal .modal-header .close {
    color: #fff !important;
    opacity: 0.75 !important;
    text-shadow: none !important;
    font-size: 26px !important;
    line-height: 1 !important;
    margin-top: -2px !important;
}
#pmAddModal .modal-header .close:hover,
#pmPreviewModal .modal-header .close:hover,
#patAddModal .modal-header .close:hover,
#patPreviewModal .modal-header .close:hover {
    opacity: 1 !important;
}

/* Form labels inside modals */
#pmAddForm label,
#patAddForm label {
    font-weight: 700 !important;
    color: #374151 !important;
    font-size: 13px !important;
    margin-bottom: 5px !important;
    display: block;
}

/* Inputs inside modals */
#pmAddForm .form-control,
#patAddForm .form-control {
    border-radius: 6px !important;
    border: 1px solid #d1d5db !important;
    font-size: 13px !important;
    color: #0f172a !important;
    transition: border-color .15s, box-shadow .15s;
}
#pmAddForm .form-control:focus,
#patAddForm .form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    outline: none !important;
}

/* Vitals section stripe */
#pmAddForm > div[style*="background:#f8fafc"] {
    border: 1px solid #e2e8f0;
}

/* Grid action buttons — prevent wrapping */
.grid-row-actions { display: flex; gap: 4px; flex-wrap: nowrap; align-items: center; }

/* Grid status pills — override Bootstrap label float issues */
.status-pill {
    display: inline-block;
    border-radius: 20px;
    padding: 3px 11px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.4;
}

/* Smooth modal transitions */
.modal.fade .modal-dialog { transition: transform .2s ease-out !important; }

/* Preview modal body scrollable on small screens */
#pmPrevBody,
#patPrevBody {
    max-height: 70vh;
    overflow-y: auto;
}

/* Select2 inside modals — fix z-index */
.select2-container { z-index: 9999 !important; }
.select2-dropdown  { z-index: 9999 !important; }

/* Vitals grid in preview */
.pm-vitals-grid {
    display: grid;
    gap: 8px;
}

/* Recent consultations hover rows */
.pat-consult-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 5px;
    text-decoration: none !important;
    border: 1px solid #e2e8f0;
    transition: background .15s, border-color .15s;
    color: inherit !important;
}
.pat-consult-row:hover {
    background: #f0f9ff !important;
    border-color: #bfdbfe !important;
    text-decoration: none !important;
}
