/* Admin Dashboard Design System
   Tokens are ported 1:1 from the public Sahtey website's real brand tokens
   (public/website/css/style.css) and the already-brand-correct Provider
   dashboard (public/website/css/dashboard.css), so the Admin dashboard,
   Provider dashboard and public site share one visual language. Cairo is
   self-hosted locally (node_modules/@fontsource/cairo, copied to
   public/backend/fonts/cairo) — no CDN font request. */

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url('../fonts/cairo/cairo-arabic-400-normal.woff2') format('woff2'),
         url('../fonts/cairo/cairo-arabic-400-normal.woff') format('woff');
    unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url('../fonts/cairo/cairo-latin-400-normal.woff2') format('woff2'),
         url('../fonts/cairo/cairo-latin-400-normal.woff') format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url('../fonts/cairo/cairo-arabic-500-normal.woff2') format('woff2'),
         url('../fonts/cairo/cairo-arabic-500-normal.woff') format('woff');
    unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url('../fonts/cairo/cairo-latin-500-normal.woff2') format('woff2'),
         url('../fonts/cairo/cairo-latin-500-normal.woff') format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url('../fonts/cairo/cairo-arabic-600-normal.woff2') format('woff2'),
         url('../fonts/cairo/cairo-arabic-600-normal.woff') format('woff');
    unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url('../fonts/cairo/cairo-latin-600-normal.woff2') format('woff2'),
         url('../fonts/cairo/cairo-latin-600-normal.woff') format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url('../fonts/cairo/cairo-arabic-700-normal.woff2') format('woff2'),
         url('../fonts/cairo/cairo-arabic-700-normal.woff') format('woff');
    unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url('../fonts/cairo/cairo-latin-700-normal.woff2') format('woff2'),
         url('../fonts/cairo/cairo-latin-700-normal.woff') format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

:root {
    /* Brand */
    --admin-primary: #008a7e;
    --admin-secondary: #00766c;
    --admin-primary-light: rgba(0, 138, 126, 0.1);
    --admin-navy: #172033;

    /* Semantic (shared with the Provider dashboard's badge system) */
    --admin-success: #16a34a;
    --admin-success-bg: rgba(34, 197, 94, 0.1);
    --admin-warning: #ca8a04;
    --admin-warning-bg: rgba(234, 179, 8, 0.1);
    --admin-danger: #dc2626;
    --admin-danger-bg: rgba(239, 68, 68, 0.1);
    --admin-info: #2563eb;
    --admin-info-bg: rgba(37, 99, 235, 0.1);

    /* Surface / text */
    --admin-bg: #f8fafc;
    --admin-card-bg: #ffffff;
    --admin-text: #1e293b;
    --admin-text-muted: #64748b;
    --admin-border: #e2e8f0;
    --admin-sidebar-bg: #ffffff;
    --admin-topbar-bg: #ffffff;
    --admin-hover-bg: #f1f5f9;

    /* Shape / elevation */
    --admin-radius-sm: 4px;
    --admin-radius-md: 8px;
    --admin-radius-lg: 12px;
    --admin-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --admin-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --admin-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --admin-transition: all 0.2s ease;
}

[data-bs-theme="dark"] {
    --admin-primary-light: rgba(0, 168, 154, 0.16);
    --admin-bg: #0f172a;
    --admin-card-bg: #1e293b;
    --admin-text: #f8fafc;
    --admin-text-muted: #94a3b8;
    --admin-border: #334155;
    --admin-sidebar-bg: #1e293b;
    --admin-topbar-bg: #1e293b;
    --admin-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    --admin-hover-bg: rgba(255, 255, 255, 0.05);
}

body {
    margin: 0;
    font-family: 'Cairo', 'Tajawal', sans-serif;
    background-color: var(--admin-bg);
    color: var(--admin-text);
    transition: background-color 0.3s ease, color 0.3s ease;
    direction: rtl;
}

/* Main Content */
main {
    padding: 2rem;
}

.card {
    background-color: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: 1rem;
    box-shadow: var(--admin-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 1.5rem;
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.app-card.flush:hover {
    transform: none;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--admin-border);
    padding: 1.25rem 1.5rem;
    font-weight: 700;
    color: var(--admin-text);
}

.card-body {
    padding: 1.5rem;
}

/* A flush card (no header, e.g. a data-table container) clips its content
   to the card's own corners so a table's square thead doesn't poke out. */
.app-card.flush > .card-body {
    border-radius: inherit;
    overflow: hidden;
}

/* Tables */
.table {
    color: var(--admin-text);
    vertical-align: middle;
}

.table thead th {
    background-color: var(--admin-bg);
    color: var(--admin-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--admin-border);
    padding: 1rem 1.25rem;
    white-space: nowrap;
}

.table tbody td {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--admin-border);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* Buttons */
.btn-primary {
    background-color: var(--admin-primary);
    border-color: var(--admin-primary);
    border-radius: 0.6rem;
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--admin-secondary);
    border-color: var(--admin-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 138, 126, 0.3);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

main > * {
    animation: fadeIn 0.4s ease forwards;
}

/* ==========================================================================
   Shared Dashboard Components (Medical Specialties + reusable across pages)
   Uses the --admin-* tokens defined above. Logical properties keep these
   direction-aware for both RTL (default) and LTR without duplicating rules.
   ========================================================================== */

/* Page header */
.app-page-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-block-end: 1.5rem;
}

.app-page-header__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--admin-text);
}

.app-page-header__icon {
    color: var(--admin-primary);
}

.app-page-header__desc {
    margin: 0.35rem 0 0;
    color: var(--admin-text-muted);
    font-size: 0.9rem;
}

.app-page-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Card */
.app-card__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--admin-text);
    display: flex;
    align-items: center;
}

/* Filter bar — a cohesive toolbar: fields align to the same baseline
   instead of each column floating at a different height. */
.app-filter-bar .app-form-field {
    margin-block-end: 0;
}

.app-filter-bar.row {
    align-items: end;
}

/* Form field / input / select */
.app-form-field {
    margin-block-end: 1rem;
}

.app-form-field__label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--admin-text);
    margin-block-end: 0.5rem;
}

.app-form-field__required {
    color: var(--admin-danger, #dc2626);
    margin-inline-start: 0.15rem;
}

.app-form-field__help {
    display: block;
    margin-block-start: 0.35rem;
    color: var(--admin-text-muted);
    font-size: 0.8rem;
}

.app-form-field__error {
    font-size: 0.8rem;
    color: var(--admin-danger, #dc2626);
}

.app-input-wrap {
    position: relative;
}

.app-input-wrap--icon .app-input {
    padding-inline-start: 2.5rem;
}

.app-input-wrap__icon {
    position: absolute;
    inset-inline-start: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--admin-text-muted);
    pointer-events: none;
}

/* End-of-field icon button, e.g. the password show/hide toggle on
   <x-app.input type="password" toggleable> */
.app-input-wrap--icon-end .app-input {
    padding-inline-end: 2.5rem;
}

.app-input-wrap__toggle {
    position: absolute;
    inset-inline-end: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.2rem;
    line-height: 1;
    font-size: 1rem;
    color: var(--admin-text-muted);
    cursor: pointer;
}

.app-input-wrap__toggle:hover {
    color: var(--admin-primary);
}

/* Unified input system — every text input, select and textarea across the
   dashboard shares this same height (~46px), radius and focus treatment,
   whether it's the shared <x-app.input>/<x-app.select> components or a page
   still using plain Bootstrap form-control/form-select classes directly. */
.app-input,
.app-select,
.form-control,
.form-select {
    display: block;
    inline-size: 100%;
    background-color: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
    border-radius: 0.65rem;
    padding-block: 0.7rem;
    padding-inline: 1rem;
    font-size: 0.9rem;
    line-height: 1.3;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-select {
    padding-inline-end: 2.5rem;
}

.app-input::placeholder,
.app-textarea::placeholder,
.form-control::placeholder {
    color: var(--admin-text-muted);
    opacity: 1;
}

.app-input:hover:not(:focus):not(:disabled):not([readonly]),
.app-select:hover:not(:focus):not(:disabled),
.form-control:hover:not(:focus):not(:disabled):not([readonly]),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--admin-primary);
}

.app-input:focus,
.app-select:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 138, 126, 0.15);
    color: var(--admin-text);
    background-color: var(--admin-card-bg);
}

.app-input.is-invalid,
.app-select.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--admin-danger, #dc2626);
}

.app-input.is-invalid:focus,
.app-select.is-invalid:focus,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem var(--admin-danger-bg);
}

.app-input.is-valid,
.app-select.is-valid,
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--admin-success);
}

.app-input.is-valid:focus,
.app-select.is-valid:focus,
.form-control.is-valid:focus,
.form-select.is-valid:focus {
    box-shadow: 0 0 0 0.2rem var(--admin-success-bg);
}

.app-input:disabled,
.app-select:disabled,
.form-control:disabled,
.form-select:disabled,
.app-input[readonly],
.form-control[readonly] {
    background-color: var(--admin-hover-bg);
    color: var(--admin-text-muted);
    cursor: not-allowed;
}

/* Textarea (<x-app.textarea>) shares the same visual language but needs
   room to breathe and a controlled resize handle. */
.app-textarea,
textarea.form-control {
    min-block-size: 110px;
    resize: vertical;
    line-height: 1.6;
}

/* Select2 (<x-app.select searchable> / multi-selects) — re-themed to match
   the unified input system instead of its default gray/blue look. Only
   visual properties are touched; Select2's own JS/behavior is untouched. */
.select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    block-size: 2.9rem;
    background-color: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: 0.65rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-inline: 1rem;
    padding-inline-end: 2.3rem;
    line-height: 1.3;
    color: var(--admin-text);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--admin-text-muted);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(2.9rem - 2px);
    inset-inline-end: 0.5rem;
    inset-inline-start: auto;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--admin-text-muted) transparent transparent transparent;
}

.select2-container--default[dir='rtl'] .select2-selection--single .select2-selection__arrow {
    inset-inline-start: 0.5rem;
    inset-inline-end: auto;
}

.select2-container--default .select2-selection--multiple {
    min-block-size: 2.9rem;
    background-color: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: 0.65rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0.35rem 0.6rem;
    gap: 0.35rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    background-color: var(--admin-primary-light);
    border: 1px solid transparent;
    border-radius: 0.4rem;
    color: var(--admin-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    margin: 0.15rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--admin-secondary);
    margin-inline-end: 0.35rem;
    border: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--admin-danger);
    background: none;
}

.select2-container--default .select2-search--inline .select2-search__field {
    color: var(--admin-text);
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 138, 126, 0.15);
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--admin-hover-bg);
    color: var(--admin-text-muted);
    cursor: not-allowed;
}

.select2-dropdown {
    background-color: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: 0.65rem;
    box-shadow: var(--admin-shadow-lg);
    overflow: hidden;
}

.select2-search--dropdown {
    padding: 0.6rem;
    background-color: var(--admin-card-bg);
}

.select2-search--dropdown .select2-search__field {
    background-color: var(--admin-bg);
    border: 1px solid var(--admin-border);
    border-radius: 0.5rem;
    color: var(--admin-text);
    padding: 0.45rem 0.75rem;
}

.select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border-color: var(--admin-primary);
}

.select2-results__option {
    color: var(--admin-text);
    padding: 0.55rem 1rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--admin-primary);
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected='true'] {
    background-color: var(--admin-hover-bg);
    color: var(--admin-text);
}

.select2-results__option[role='group'] > strong {
    color: var(--admin-text-muted);
}

/* Form section */
.app-form-section {
    margin-block-end: 1.75rem;
}

.app-form-section__header {
    margin-block-end: 1rem;
    padding-block-end: 0.75rem;
    border-block-end: 1px solid var(--admin-border);
}

.app-form-section__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--admin-text);
}

.app-form-section__desc {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--admin-text-muted);
}

/* Buttons */
.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: inherit;
    font-weight: 600;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.app-btn--sm {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
}

.app-btn--md {
    padding: 0.6rem 1.4rem;
    font-size: 0.875rem;
}

.app-btn--lg {
    padding: 0.75rem 1.75rem;
    font-size: 0.95rem;
}

.app-btn--primary {
    background-color: var(--admin-primary);
    border: 1px solid var(--admin-primary);
    color: #fff;
}

.app-btn--primary:hover {
    background-color: var(--admin-secondary);
    border-color: var(--admin-secondary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 138, 126, 0.3);
}

.app-btn--secondary {
    background-color: var(--admin-hover-bg);
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
}

.app-btn--secondary:hover {
    background-color: var(--admin-border);
    color: var(--admin-text);
}

.app-btn--outline {
    background-color: transparent;
    border: 1px solid var(--admin-primary);
    color: var(--admin-primary);
}

.app-btn--outline:hover {
    background-color: var(--admin-primary-light, rgba(0, 138, 126, 0.08));
    color: var(--admin-secondary);
}

.app-btn--ghost {
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--admin-text-muted);
}

.app-btn--ghost:hover {
    background-color: var(--admin-hover-bg);
    color: var(--admin-text);
}

.app-btn--danger {
    background-color: transparent;
    border: 1px solid var(--admin-danger, #dc2626);
    color: var(--admin-danger, #dc2626);
}

.app-btn--danger:hover {
    background-color: var(--admin-danger, #dc2626);
    color: #fff;
}

.app-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.app-btn__spinner {
    inline-size: 0.9rem;
    block-size: 0.9rem;
}

/* Textarea (shares .app-input's field styling) */
textarea.app-input {
    min-height: 6.5rem;
    line-height: 1.6;
    resize: vertical;
}

/* Form actions bar, e.g. the save/cancel row under a form's sections */
.app-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-block-start: 1.25rem;
    margin-block-start: 0.25rem;
    border-block-start: 1px solid var(--admin-border);
}

/* Panel that hosts an <x-app.switch> inside a form section, e.g. "is active" */
.app-form-switch {
    display: flex;
    padding: 0.9rem 1rem;
    background-color: var(--admin-hover-bg);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
}

/* Switch (x-app.switch) — a custom pill toggle built on a visually-hidden
   native checkbox, so it stays keyboard/AT accessible while matching the
   brand tokens instead of the browser's default control. */
.app-switch {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.app-switch__input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-switch__track {
    position: relative;
    flex-shrink: 0;
    inline-size: 2.75rem;
    block-size: 1.5rem;
    margin-block-start: 0.1rem;
    background-color: var(--admin-border);
    border-radius: 999px;
    transition: background-color 0.2s ease;
}

.app-switch__thumb {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: inset-inline-start 0.2s ease;
}

.app-switch__input:checked ~ .app-switch__track {
    background-color: var(--admin-primary);
}

.app-switch__input:checked ~ .app-switch__track .app-switch__thumb {
    inset-inline-start: calc(100% - 1.25rem - 2px);
}

.app-switch__input:focus-visible ~ .app-switch__track {
    box-shadow: 0 0 0 0.2rem rgba(0, 138, 126, 0.25);
}

.app-switch__input:disabled ~ .app-switch__track {
    opacity: 0.55;
    cursor: not-allowed;
}

.app-switch__label {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--admin-text);
}

.app-switch__help {
    display: block;
    margin-block-start: 0.15rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--admin-text-muted);
}

/* Select dropdown arrow — recolor Bootstrap's chevron (exposed as a CSS
   variable by core.css) to the brand teal instead of the generic navy,
   without touching its already-RTL-correct position/size. */
.app-select {
    --bs-form-select-bg-img: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22" fill="none"%3e%3cpath d="M10.9999 12.0743L15.5374 7.53676L16.8336 8.83292L10.9999 14.6666L5.16626 8.83292L6.46243 7.53676L10.9999 12.0743Z" fill="%23008a7e" fill-opacity="0.9"/%3e%3c/svg%3e');
}

[data-bs-theme="dark"] .app-select {
    --bs-form-select-bg-img: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22" fill="none"%3e%3cpath d="M10.9999 12.0743L15.5374 7.53676L16.8336 8.83292L10.9999 14.6666L5.16626 8.83292L6.46243 7.53676L10.9999 12.0743Z" fill="%2314b8a6" fill-opacity="0.9"/%3e%3c/svg%3e');
}

/* Icon buttons (row actions) */
.app-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.15rem;
    block-size: 2.15rem;
    font-size: 0.95rem;
    border-radius: var(--admin-radius-md);
    border: 1px solid var(--admin-border);
    background-color: var(--admin-hover-bg);
    color: var(--admin-text-muted);
    transition: var(--admin-transition);
}

.app-icon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 138, 126, 0.25);
}

.app-icon-btn + .app-icon-btn {
    margin-inline-start: 0.35rem;
}

.app-icon-btn--view:hover {
    background-color: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.35);
    color: #2563eb;
}

.app-icon-btn--edit:hover {
    background-color: rgba(0, 138, 126, 0.1);
    border-color: rgba(0, 138, 126, 0.35);
    color: var(--admin-primary);
}

.app-icon-btn--delete:hover {
    background-color: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.35);
    color: #dc2626;
}

.app-icon-btn--neutral:hover {
    background-color: var(--admin-hover-bg);
    border-color: var(--admin-border);
    color: var(--admin-text);
}

/* Badges */
.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.app-badge--primary {
    background-color: rgba(0, 138, 126, 0.1);
    color: var(--admin-primary);
    border-color: rgba(0, 138, 126, 0.25);
}

.app-badge--info {
    background-color: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.25);
}

.app-badge--neutral {
    background-color: var(--admin-hover-bg);
    color: var(--admin-text-muted);
    border-color: var(--admin-border);
}

.app-badge--warning {
    background-color: rgba(202, 138, 4, 0.1);
    color: #ca8a04;
    border-color: rgba(202, 138, 4, 0.25);
}

.app-badge--danger {
    background-color: var(--admin-danger-bg);
    color: var(--admin-danger);
    border-color: rgba(220, 38, 38, 0.25);
}

.app-badge--success {
    background-color: var(--admin-success-bg);
    color: var(--admin-success);
    border-color: rgba(22, 163, 74, 0.25);
}

/* Data table (<x-app.table>) — teal hover instead of the legacy purple
   .hover-shadow-sm, rounded/clipped container, comfortable row height. */
.app-table-wrap {
    border-radius: var(--admin-radius-lg);
    overflow: hidden;
}

.app-table tbody tr {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.app-table tbody tr:hover {
    background-color: var(--admin-hover-bg);
}

.app-table tbody tr.app-table__row--clickable {
    cursor: pointer;
}

.app-table tbody tr.app-table__row--clickable:hover {
    background-color: rgba(0, 138, 126, 0.06) !important;
}

.app-table .app-table__primary {
    color: var(--admin-primary);
    font-weight: 700;
}

.app-table .app-table__index {
    color: var(--admin-text-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    inline-size: 3rem;
}

.app-table__actions-col,
.app-table td.text-nowrap {
    width: 1%;
    white-space: nowrap;
}

.app-table__actions-col {
    text-align: center;
}

.app-table__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.app-table__actions .app-icon-btn + .app-icon-btn {
    margin-inline-start: 0;
}

/* Responsive: let wide tables scroll within their own container instead of
   pushing the page width, per the shared responsive-table pattern. */
@media (max-width: 991.98px) {
    .app-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Pagination */
.pagination .page-link {
    color: var(--admin-primary);
    border-color: var(--admin-border);
}

.pagination .page-item.active .page-link {
    background-color: var(--admin-primary);
    border-color: var(--admin-primary);
    color: #fff;
}

.pagination .page-link:hover {
    background-color: var(--admin-hover-bg);
    color: var(--admin-secondary);
}

.pagination .page-item.disabled .page-link {
    color: var(--admin-text-muted);
}

/* Empty state */
.app-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
}

.app-empty-state__icon {
    font-size: 2.5rem;
    color: var(--admin-primary);
    background-color: rgba(0, 138, 126, 0.08);
    inline-size: 4.5rem;
    block-size: 4.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-block-end: 1rem;
}

.app-empty-state__title {
    font-weight: 700;
    color: var(--admin-text);
    margin: 0;
}

.app-empty-state__desc {
    color: var(--admin-text-muted);
    font-size: 0.85rem;
    margin: 0.35rem 0 0;
}

/* Confirm dialog (shared destructive-action modal, e.g. includes.delete_modal) */
.app-confirm-dialog {
    border: none;
    border-radius: var(--admin-radius-lg);
    box-shadow: var(--admin-shadow-lg);
}


.app-confirm-dialog .modal-body {
    padding: 2.5rem 1.75rem 1.5rem;
}

.app-confirm-dialog__icon {
    font-size: 2rem;
    color: var(--admin-danger);
    background-color: var(--admin-danger-bg);
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-block-end: 1.25rem;
}

.app-confirm-dialog__title {
    font-weight: 700;
    color: var(--admin-text);
    margin: 0;
}

.app-confirm-dialog__message {
    color: var(--admin-text-muted);
    margin: 0.6rem 0 0;
    line-height: 1.6;
}

.app-confirm-dialog__hint {
    color: var(--admin-text-muted);
    font-size: 0.8rem;
    margin: 0.5rem 0 0;
}

.app-confirm-dialog__footer {
    border-top: none;
    justify-content: center;
    gap: 0.6rem;
    padding: 0 1.75rem 2rem;
}

.app-confirm-dialog__footer .app-btn {
    min-inline-size: 7rem;
}

/* Info / instructions card */
.app-info-card {
    background-color: var(--admin-hover-bg);
}

/* Detail list (<x-app.detail-list>/<x-app.detail-item>) — label/value rows
   for "show" pages, replacing the old .info-label/.info-value pair that used
   to be copy-pasted into a <style> block on every single show.blade.php. */
.app-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem 1.5rem;
}

.app-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-inline-size: 0;
}

.app-detail-item--full {
    grid-column: 1 / -1;
}

.app-detail-item__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--admin-text-muted);
}

.app-detail-item__value {
    font-size: 0.9rem;
    color: var(--admin-text);
    background-color: var(--admin-hover-bg);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    padding: 0.6rem 0.85rem;
    word-break: break-word;
}

.app-detail-item__value:empty::before {
    content: '—';
    color: var(--admin-text-muted);
}

/* A larger standalone preview image on a show page (as opposed to the small
   thumbnail next to a file input). */
.app-detail-image {
    max-block-size: 220px;
    max-inline-size: 100%;
    border-radius: var(--admin-radius-lg);
    border: 1px solid var(--admin-border);
    object-fit: cover;
}

/* An attachment preview on a show page — an uploaded image or a PDF iframe */
.app-attachment-preview {
    max-block-size: 420px;
    border-radius: var(--admin-radius-lg);
}

.app-attachment-frame {
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
}

/* Provider show page — cover banner + circular logo */
.app-provider-cover {
    max-block-size: 300px;
    inline-size: 100%;
    object-fit: cover;
    border-radius: var(--admin-radius-lg);
}

.app-provider-logo {
    inline-size: 150px;
    block-size: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--admin-border);
}

/* Small document thumbnail / placeholder icon (Provider show page) */
.app-doc-thumb {
    inline-size: 50px;
    block-size: 50px;
    object-fit: cover;
    border-radius: var(--admin-radius-md);
    border: 1px solid var(--admin-border);
    flex-shrink: 0;
}

.app-doc-icon {
    inline-size: 50px;
    block-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-hover-bg);
    color: var(--admin-primary);
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* Doctor create/edit — weekly availability tab + document tab helpers */
.app-doctor-avatar {
    object-fit: cover;
}

.app-slot-input-group {
    max-inline-size: 300px;
}

.app-day-th {
    inline-size: 150px;
}

.app-doc-link-truncate {
    max-inline-size: 130px;
}

.app-doc-filename {
    max-inline-size: 150px;
}

/* For a value slot that's already a styled element (badge, image, link) —
   drop the box so it doesn't double up on background/border. */
.app-detail-item__value--plain {
    background: none;
    border: none;
    padding: 0;
}

/* File input (<x-app.file-input>) — image/file upload with an optional
   current-file preview slot, used by every create/edit page with an upload. */
.app-file-input__row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.app-file-input__preview,
.app-file-input__placeholder {
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: var(--admin-radius-md);
    border: 1px solid var(--admin-border);
    flex-shrink: 0;
}

.app-file-input__preview {
    object-fit: cover;
}

.app-file-input__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--admin-hover-bg);
    color: var(--admin-text-muted);
    font-size: 1.4rem;
}

.app-file-input__control {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.app-file-input__field {
    display: block;
    inline-size: 100%;
    background-color: var(--admin-card-bg);
    border: 1px dashed var(--admin-border);
    color: var(--admin-text-muted);
    border-radius: 0.6rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    transition: border-color 0.2s ease;
}

.app-file-input__field:hover {
    border-color: var(--admin-primary);
}

.app-file-input__field.is-invalid {
    border-color: var(--admin-danger, #dc2626);
}

.app-file-input__field::file-selector-button {
    margin-inline-end: 0.75rem;
    padding: 0.35rem 0.8rem;
    border-radius: 0.4rem;
    border: 1px solid var(--admin-border);
    background-color: var(--admin-hover-bg);
    color: var(--admin-text);
    font-weight: 600;
    cursor: pointer;
    transition: var(--admin-transition);
}

.app-file-input__field:hover::file-selector-button {
    background-color: var(--admin-primary-light);
    color: var(--admin-primary);
}

/* Radio group (<x-app.radio-group>) — segmented pill radios, e.g. gender */
.app-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.app-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--admin-border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--admin-text-muted);
    background-color: var(--admin-card-bg);
    transition: var(--admin-transition);
}

.app-radio:hover {
    border-color: var(--admin-primary);
    color: var(--admin-text);
}

.app-radio__input {
    accent-color: var(--admin-primary);
    inline-size: 1rem;
    block-size: 1rem;
    margin: 0;
}

.app-radio:has(.app-radio__input:checked) {
    border-color: var(--admin-primary);
    background-color: var(--admin-primary-light);
    color: var(--admin-primary);
}

/* Preformatted message box (e.g. a contact-us submission's free-text body) */
.app-message-box {
    padding: 1.25rem 1.5rem;
    min-block-size: 150px;
    white-space: pre-wrap;
    line-height: 1.6;
    background-color: var(--admin-hover-bg);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-lg);
}

/* Permission groups (roles create/edit/show) — a grid of cards, each one
   holding a single permission group's items: editable checkboxes on
   create/edit, a read-only checklist on show. */
.app-permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.app-permission-group {
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-lg);
    overflow: hidden;
}

.app-permission-group__header {
    padding: 0.75rem 1.1rem;
    background-color: var(--admin-hover-bg);
    border-bottom: 1px solid var(--admin-border);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--admin-primary);
}

.app-permission-group__body {
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.app-permission-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    color: var(--admin-text);
}

.app-permission-item input[type="checkbox"] {
    accent-color: var(--admin-primary);
    inline-size: 1rem;
    block-size: 1rem;
    margin: 0;
    flex-shrink: 0;
}

.app-permission-item__check {
    color: var(--admin-success);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 767.98px) {
    .app-form-actions {
        flex-direction: column;
    }

    .app-form-actions .app-btn {
        width: 100%;
    }

    .app-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .app-page-header__actions {
        justify-content: stretch;
    }

    .app-page-header__actions .app-btn {
        flex: 1 1 auto;
    }

    .app-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Sneat template retarget — this is the actual live admin shell
   (dashboard/header|sidebar|navbar|footer.blade.php -> master.blade.php),
   distinct from the unused .sidebar/.custom-navbar rules above (those only
   applied to the orphaned resources/views/layouts/admin.blade.php, which
   nothing @extends). Sneat drives almost all of its own color decisions
   (menu active state, buttons, focus rings, subtle badges, table active
   rows, links) from these Bootstrap 5.3 CSS variables, so overriding them
   once here recolors every page that already uses plain Bootstrap classes
   — no per-page markup changes needed for the color system.
   ========================================================================== */

:root {
    --bs-primary: var(--admin-primary);
    --bs-primary-rgb: 0, 138, 126;
    --bs-primary-bg-subtle: #e3f4f2;
    --bs-primary-border-subtle: #b8e3de;
    --bs-primary-text-emphasis: var(--admin-secondary);

    --bs-success: var(--admin-success);
    --bs-success-rgb: 22, 163, 74;
    --bs-success-bg-subtle: #dcfce7;
    --bs-success-border-subtle: #86efac;
    --bs-success-text-emphasis: #15803d;

    --bs-warning: var(--admin-warning);
    --bs-warning-rgb: 202, 138, 4;
    --bs-warning-bg-subtle: #fef9c3;
    --bs-warning-border-subtle: #fde047;
    --bs-warning-text-emphasis: #a16207;

    --bs-danger: var(--admin-danger);
    --bs-danger-rgb: 220, 38, 38;
    --bs-danger-bg-subtle: #fee2e2;
    --bs-danger-border-subtle: #fca5a5;
    --bs-danger-text-emphasis: #b91c1c;

    --bs-info: var(--admin-info);
    --bs-info-rgb: 37, 99, 235;
    --bs-info-bg-subtle: #dbeafe;
    --bs-info-border-subtle: #93c5fd;
    --bs-info-text-emphasis: #1d4ed8;

    --bs-custom-link-color: var(--admin-primary);
    --bs-link-color: var(--bs-custom-link-color);
    --bs-link-color-rgb: 0, 138, 126;
    --bs-link-hover-color: var(--admin-secondary);
    --bs-link-hover-color-rgb: 0, 118, 108;

    --bs-body-color: var(--admin-text);
    --bs-body-color-rgb: 30, 41, 59;
    --bs-body-bg: var(--admin-bg);
    --bs-body-bg-rgb: 248, 250, 252;
    --bs-emphasis-color: var(--admin-navy);
}

[data-bs-theme="dark"] {
    --bs-primary: #14b8a6;
    --bs-primary-rgb: 20, 184, 166;
    --bs-primary-bg-subtle: #0f3d38;
    --bs-primary-border-subtle: #155e56;
    --bs-custom-link-color: #14b8a6;
    --bs-link-color: var(--bs-custom-link-color);
    --bs-link-color-rgb: 20, 184, 166;
    --bs-body-color: var(--admin-text);
    --bs-body-bg: var(--admin-bg);
}

/* ==========================================================================
   App Sidebar (Dashboard side navigation) — 2026 redesign: grouped sections,
   icon-chip nav items, a soft active glow, and a refined brand header.
   Structural classes (layout-menu, menu-vertical, menu-inner, menu-item,
   menu-link, menu-sub, has-submenu, app-brand, layout-menu-toggle,
   menu-header) belong to the Sneat template and are wired to
   public/backend/vendor/js/menu.js + public/backend/js/main.js — only their
   visual skin is overridden here, never their markup contract.

   Sneat's active/hover menu colors come from --bs-menu-* variables (NOT
   --bs-primary directly), redeclared at ":root, [data-bs-theme=light]" in
   core.css. Overriding just --bs-primary-bg-subtle wasn't reliable because
   core.css redeclares that same block more than once internally, so these
   are set directly — they're the exact variables the active/hover menu-link
   rules consume.
   ========================================================================== */
:root,
[data-bs-theme="light"] {
    --bs-menu-active-bg: var(--admin-primary-light);
    --bs-menu-active-color: var(--bs-custom-link-color);
    --bs-menu-hover-bg: var(--admin-hover-bg);
    --bs-menu-hover-color: var(--bs-custom-link-color);
    --bs-menu-sub-active-bg: var(--admin-primary-light);
    --bs-menu-sub-active-color: var(--bs-custom-link-color);
    --bs-menu-color: var(--admin-text);
}

.layout-menu {
    background-color: var(--admin-sidebar-bg) !important;
    border-inline-end: 1px solid var(--admin-border);
    box-shadow: none !important;
}

/* Brand header — logo chip + wordmark + collapse toggle as one refined row */
.app-brand.demo {
    padding-inline: 1.25rem;
    block-size: 4.25rem;
}

.app-brand-link {
    gap: 0.65rem;
}

.app-brand-logo.demo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--admin-radius-md);
    background: linear-gradient(135deg, var(--admin-primary), var(--admin-secondary));
    box-shadow: 0 4px 10px -2px rgba(0, 138, 126, 0.45);
    flex-shrink: 0;
}

.app-brand-logo.demo .text-primary {
    display: inline-flex;
    color: #fff !important;
    font-size: 1.15rem;
}

.app-brand-text.demo {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--admin-text) !important;
    letter-spacing: 0.2px;
}

.layout-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    color: var(--admin-text-muted) !important;
    transition: var(--admin-transition);
}

.layout-menu-toggle:hover {
    background-color: var(--admin-hover-bg);
    color: var(--bs-custom-link-color) !important;
}

/* Section labels — quiet, uppercase group dividers between nav clusters */
.menu-header .menu-header-text {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--admin-text-muted);
    opacity: 0.85;
}

/* Nav items */
.menu-item {
    margin-block-end: 0.15rem;
}

.menu-link {
    color: var(--admin-text);
    border-radius: var(--admin-radius-md);
    gap: 0.75rem;
    transition: var(--admin-transition);
}

.menu-link:hover,
.menu-link:focus {
    background-color: var(--admin-hover-bg);
    color: var(--bs-custom-link-color);
}

.menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.85rem;
    block-size: 1.85rem;
    border-radius: var(--admin-radius-sm);
    color: var(--admin-text-muted);
    transition: var(--admin-transition);
    margin-inline-end: 0 !important;
}

.menu-link:hover .menu-icon {
    background-color: var(--admin-card-bg);
    color: var(--bs-custom-link-color);
}

.menu-item.active > .menu-link {
    background-color: var(--admin-primary-light);
    color: var(--bs-custom-link-color);
    font-weight: 700;
    position: relative;
}

.menu-item.active > .menu-link .menu-icon {
    background-color: var(--admin-card-bg);
    color: var(--bs-custom-link-color);
    box-shadow: 0 2px 6px -1px rgba(0, 138, 126, 0.35);
}

.menu-item.active > .menu-link::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    inline-size: 3px;
    block-size: 60%;
    border-radius: 0 4px 4px 0;
    background-color: var(--admin-primary);
}

[dir="rtl"] .menu-item.active > .menu-link::before {
    border-radius: 4px 0 0 4px;
}

/* Submenu — indented under a connecting guideline, quieter type scale */
.menu-sub {
    position: relative;
    margin-inline-start: 0.9rem;
    padding-inline-start: 0.9rem;
    border-inline-start: 1px dashed var(--admin-border);
}

.menu-sub .menu-link {
    color: var(--admin-text-muted);
    font-size: 0.85rem;
}

.menu-sub .menu-icon {
    inline-size: 1.6rem;
    block-size: 1.6rem;
    font-size: 0.95rem;
}

.menu-sub .menu-item.active > .menu-link {
    box-shadow: none;
    color: var(--bs-custom-link-color);
    font-weight: 700;
}

/* Submenu collapse chevron — rotates smoothly instead of swapping icons */
.menu-toggle-arrow {
    transition: transform 0.25s ease;
    color: var(--admin-text-muted);
}

.menu-link[aria-expanded="true"] .menu-toggle-arrow {
    transform: rotate(180deg);
    color: var(--bs-custom-link-color);
}

/* Scrollbar — thin and tinted to match the theme instead of the OS default */
.menu-inner {
    scrollbar-width: thin;
    scrollbar-color: var(--admin-border) transparent;
}

.menu-inner::-webkit-scrollbar {
    inline-size: 5px;
}

.menu-inner::-webkit-scrollbar-thumb {
    background-color: var(--admin-border);
    border-radius: 999px;
}

.menu-inner::-webkit-scrollbar-thumb:hover {
    background-color: var(--admin-text-muted);
}

/* Topbar / navbar */
.layout-navbar {
    background-color: var(--admin-topbar-bg) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--admin-border);
}

.layout-navbar .nav-link:hover,
.layout-navbar .dropdown-item:hover {
    color: var(--bs-custom-link-color);
}

/* Navbar icon buttons (theme switcher, notifications, …) — a circular hit
   target with a tinted hover/active state instead of Sneat's bare icon link. */
.navbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 50%;
    color: var(--admin-text-muted);
    transition: var(--admin-transition);
}

.navbar-icon-btn:hover,
.navbar-icon-btn:focus,
.navbar-icon-btn[aria-expanded="true"] {
    background-color: var(--admin-hover-bg);
    color: var(--bs-custom-link-color);
}

.navbar-icon-btn .icon-base {
    transition: var(--admin-transition);
}

.navbar-icon-btn:hover .icon-base {
    transform: scale(1.05);
}

.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--admin-primary) !important;
    color: #fff !important;
}

/* ==========================================================================
   App Header (Dashboard topbar) — compact, brand-aligned redesign.
   Neutralises the Sneat "navbar-detached" floating-card look (margin/radius)
   while keeping the vendor width/sticky math (which is keyed to the sidebar
   width) untouched, so it reads as one unified bar with the sidebar instead
   of a card floating above the page.
   ========================================================================== */
.app-header.navbar-detached {
    margin-block: 0;
    border-radius: 0;
    padding-inline: 1.25rem;
}

.app-header {
    align-items: center;
    gap: 0.75rem;
}

.app-header__menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--admin-text-muted);
    transition: var(--admin-transition);
}

.app-header__menu-btn:hover {
    background-color: var(--admin-hover-bg);
    color: var(--bs-custom-link-color);
}

/* Page context (start side) — fills the space that used to be empty and
   grounds the bar in the current user/day instead of a bare icon cluster. */
.app-header__context {
    flex: 1 1 auto;
    min-inline-size: 0;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3;
}

.app-header__greeting {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--admin-navy);
}

.app-header__date {
    font-size: 0.78rem;
    color: var(--admin-text-muted);
}

.app-header .navbar-nav-right.app-header__actions {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.app-header__actions-list {
    gap: 0.35rem;
}

.app-header__divider {
    display: inline-block;
    inline-size: 1px;
    block-size: 1.75rem;
    background-color: var(--admin-border);
    margin-inline: 0.25rem;
}

/* Notification badge — small unread indicator, not a dominating circle */
.app-header__badge {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    min-inline-size: 16px;
    inline-size: fit-content;
    block-size: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: var(--admin-danger);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border: 2px solid var(--admin-topbar-bg);
}

/* Dropdown panels (notifications + user menu) — premium card skin layered
   on top of Bootstrap's dropdown via its CSS variable API, no !important. */
.app-header__panel {
    --bs-dropdown-min-width: 16rem;
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-spacer: 0.5rem;
    --bs-dropdown-border-color: var(--admin-border);
    --bs-dropdown-border-width: 1px;
    --bs-dropdown-border-radius: var(--admin-radius-lg);
    --bs-dropdown-box-shadow: var(--admin-shadow-lg);
    --bs-dropdown-bg: var(--admin-card-bg);
    --bs-dropdown-link-hover-bg: var(--admin-hover-bg);
    overflow: hidden;
}

.app-header__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.875rem;
}

/* Selected-state indicator for a switch-like item list (e.g. the theme
   light/dark/system picker) — a checkmark instead of relying on the fill
   alone to communicate which option is active. */
.app-header__item.active::after {
    content: '\2713';
    margin-inline-start: auto;
    font-weight: 700;
}

.app-header__item--danger {
    color: var(--admin-danger);
}

.app-header__item--danger:hover {
    background-color: var(--admin-danger-bg) !important;
    color: var(--admin-danger) !important;
}

/* Notifications panel */
.app-header__notif-panel {
    --bs-dropdown-min-width: 20rem;
}

.app-header__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 1rem 0.75rem;
    font-weight: 700;
    color: var(--admin-text);
    border-block-end: 1px solid var(--admin-border);
}

.app-header__notif-list {
    max-block-size: 320px;
    overflow-y: auto;
}

.app-header__notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    color: var(--admin-text);
    text-decoration: none;
    transition: var(--admin-transition);
}

.app-header__notif-item:hover {
    background-color: var(--admin-hover-bg);
    color: var(--admin-text);
}

.app-header__notif-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    flex-shrink: 0;
    border-radius: var(--admin-radius-md);
    font-size: 0.95rem;
}

.app-header__notif-icon--warning {
    background-color: var(--admin-warning-bg);
    color: var(--admin-warning);
}

.app-header__notif-icon--info {
    background-color: var(--admin-info-bg);
    color: var(--admin-info);
}

.app-header__notif-body {
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.app-header__notif-title {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header__notif-meta {
    font-size: 0.75rem;
    color: var(--admin-text-muted);
}

.app-header__notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 2rem 1rem;
    color: var(--admin-text-muted);
    font-size: 0.85rem;
}

.app-header__notif-empty i {
    font-size: 1.75rem;
    opacity: 0.5;
}

.app-header__panel-footer {
    display: block;
    text-align: center;
    padding: 0.65rem 1rem 0.15rem;
    margin-block-start: 0.5rem;
    border-block-start: 1px solid var(--admin-border);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-custom-link-color);
    text-decoration: none;
}

.app-header__panel-footer:hover {
    color: var(--admin-secondary);
}

/* User menu */
.app-user__trigger {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--admin-radius-lg);
    color: var(--admin-text);
    text-decoration: none;
    transition: var(--admin-transition);
}

.app-user__trigger:hover,
.app-user__trigger[aria-expanded="true"] {
    background-color: var(--admin-hover-bg);
}

.app-user__avatar {
    display: inline-flex;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--admin-primary-light);
}

.app-user__avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.app-user__avatar--lg {
    inline-size: 2.75rem;
    block-size: 2.75rem;
}

.app-user__meta {
    flex-direction: column;
    line-height: 1.25;
    text-align: start;
}

.app-user__name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--admin-text);
}

.app-user__role {
    font-size: 0.72rem;
    color: var(--admin-text-muted);
}

.app-user__caret {
    font-size: 1rem;
    color: var(--admin-text-muted);
}

.app-user__panel {
    --bs-dropdown-min-width: 15rem;
}

.app-user__panel-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem 0.75rem;
    text-decoration: none;
}

.app-user__panel-head:hover .app-user__panel-name {
    color: var(--admin-primary);
}

.app-user__panel-meta {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.app-user__panel-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--admin-text);
    transition: var(--admin-transition);
}

.app-user__panel-role {
    font-size: 0.75rem;
    color: var(--admin-text-muted);
}

/* Responsive — collapse secondary info, keep actions reachable */
@media (max-width: 575.98px) {
    .app-header.navbar-detached {
        padding-inline: 0.75rem;
    }

    .app-header__actions-list {
        gap: 0.1rem;
    }

    .app-header__notif-panel,
    .app-header__panel {
        --bs-dropdown-min-width: min(90vw, 18rem);
    }
}

/* Global loading / progress affordances — teal instead of Sneat purple */
.progress-bar-fill {
    background: var(--admin-primary) !important;
    box-shadow: 0 0 10px rgba(0, 138, 126, 0.5) !important;
}

.clickable-row::after {
    color: var(--bs-custom-link-color) !important;
}

#page-loader .spinner-border {
    color: var(--admin-primary) !important;
}

#page-loader .text-primary {
    color: var(--admin-primary) !important;
}

/* Welcome banner (Dashboard Home) */
.app-welcome-banner {
    background: linear-gradient(135deg, var(--admin-primary-light) 0%, var(--admin-card-bg) 70%);
    border: 1px solid var(--admin-border);
}

.app-welcome-banner .app-welcome-banner__title {
    color: var(--admin-navy);
    font-weight: 800;
}

/* Stat cards (Dashboard Home + reusable across pages) */
.app-stat-card {
    background-color: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-lg);
    box-shadow: var(--admin-shadow-sm);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: var(--admin-transition);
    height: 100%;
}

.app-stat-card:hover {
    box-shadow: var(--admin-shadow);
    transform: translateY(-2px);
}

.app-stat-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.app-stat-card__label {
    color: var(--admin-text-muted);
    font-weight: 600;
    font-size: 0.9rem;
}

.app-stat-card__value {
    color: var(--admin-navy);
    font-weight: 800;
    font-size: 2rem;
    line-height: 1;
}

.app-stat-card__icon {
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--admin-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.app-stat-card__icon--primary {
    background-color: var(--admin-primary-light);
    color: var(--admin-primary);
}

.app-stat-card__icon--success {
    background-color: var(--admin-success-bg);
    color: var(--admin-success);
}

.app-stat-card__icon--warning {
    background-color: var(--admin-warning-bg);
    color: var(--admin-warning);
}

.app-stat-card__icon--danger {
    background-color: var(--admin-danger-bg);
    color: var(--admin-danger);
}

.app-stat-card__icon--info {
    background-color: var(--admin-info-bg);
    color: var(--admin-info);
}

/* Dashboard Home helpers */
.app-welcome-banner__illustration {
    max-block-size: 130px;
}

.app-chart-canvas--constrained {
    max-inline-size: 320px;
}

/* Entrance animations (Dashboard Home)
   Elements start hidden in markup order and rise into place; .stagger-*
   offsets each group's start so rows animate in sequence instead of all at
   once. Disabled under prefers-reduced-motion. */
@keyframes appFadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-header-animate,
.fade-in-up {
    animation: appFadeInUp 0.5s ease both;
}

.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.15s; }
.stagger-3 { animation-delay: 0.25s; }
.stagger-4 { animation-delay: 0.35s; }
.stagger-5 { animation-delay: 0.45s; }
.stagger-6 { animation-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
    .page-header-animate,
    .fade-in-up {
        animation: none;
    }
}

/* ==========================================================================
   Admin login page (resources/views/dashboard/auth/login.blade.php)
   Split screen: form on one side, brand/teal panel on the other. Uses the
   same --admin-* tokens and .app-form-field/.app-input/.app-btn classes as
   the rest of the dashboard so it stays visually consistent.
   ========================================================================== */
.admin-login,
.admin-login *,
.admin-login *::before,
.admin-login *::after {
    box-sizing: border-box;
}

.admin-login h1,
.admin-login h2,
.admin-login p,
.admin-login ul {
    margin: 0;
}

.admin-login {
    min-height: 100vh;
    display: flex;
}

.admin-login__form-side {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    background-color: var(--admin-bg);
}

.admin-login__form-wrap {
    width: 100%;
    max-inline-size: 400px;
}

.admin-login__title {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--admin-text);
    margin-block-end: 0.4rem;
}

.admin-login__subtitle {
    color: var(--admin-text-muted);
    margin-block-end: 2rem;
    font-size: 0.95rem;
}

.admin-login__status {
    margin-block-end: 1.25rem;
    padding: 0.65rem 1rem;
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-success-bg);
    color: var(--admin-success);
    font-size: 0.85rem;
}

.admin-login__form {
    margin-block-end: 1.5rem;
}

.admin-login__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: 1.5rem;
    font-size: 0.875rem;
}

.admin-login__remember {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--admin-text-muted);
    cursor: pointer;
}

.admin-login__remember input {
    accent-color: var(--admin-primary);
    inline-size: 15px;
    block-size: 15px;
    cursor: pointer;
}

.admin-login__forgot {
    color: var(--admin-primary);
    font-weight: 600;
    text-decoration: none;
}

.admin-login__forgot:hover {
    text-decoration: underline;
}

.admin-login__submit {
    inline-size: 100%;
}

.admin-login__back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-block-start: 1.5rem;
    color: var(--admin-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
}

.admin-login__back:hover {
    color: var(--admin-primary);
}

.admin-login__secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-block-start: 0.85rem;
    color: var(--admin-text-muted);
    font-size: 0.78rem;
}

.admin-login__brand-side {
    position: relative;
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    background-image: url('../img/auth/admin-login.png');
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
}

/* Teal wash over the photo so white text stays legible everywhere on the
   panel, regardless of how bright the underlying photo is at that spot. */
.admin-login__brand-side::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(0, 138, 126, 0.94), rgba(0, 118, 108, 0.9));
}

.admin-login__brand-side > * {
    position: relative;
    z-index: 1;
}

.admin-login__brand-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-login__brand-badge {
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--admin-radius-md);
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.admin-login__brand-name {
    display: block;
    font-weight: 700;
}

.admin-login__brand-tagline {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}

.admin-login__pill {
    align-self: flex-start;
    margin-block-start: 2.5rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    font-size: 0.8rem;
    font-weight: 600;
}

.admin-login__brand-heading {
    margin-block-start: 1.5rem;
    font-size: 2.15rem;
    font-weight: 700;
    line-height: 1.35;
    max-inline-size: 460px;
}

.admin-login__brand-desc {
    margin-block-start: 1rem;
    color: rgba(255, 255, 255, 0.85);
    max-inline-size: 420px;
    line-height: 1.8;
}

.admin-login__features {
    list-style: none;
    padding-inline-start: 0;
    margin-block-start: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-login__features li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 600;
}

.admin-login__features i {
    inline-size: 32px;
    block-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    font-size: 0.95rem;
}

.admin-login__brand-footer {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    text-align: center;
}

@media (max-width: 991.98px) {
    .admin-login {
        flex-direction: column;
    }

    .admin-login__brand-side {
        order: 1;
        min-block-size: 320px;
    }

    .admin-login__form-side {
        order: 2;
    }

    .admin-login__brand-heading {
        font-size: 1.6rem;
    }
}