:root{
    --bg:#f5f8ff;
    --card:#ffffff;
    --border:#e2e8f5;
    --text:#0f172a;
    --muted:#5b6b84;
    --primary:#1e6fd9;
    --primary-700:#1555a8;
    --primary-100:#e7f1ff;
    --secondary:#4b5c76;
    --danger:#ef4444;
    --shadow:0 1px 2px rgba(0,0,0,0.04),0 6px 24px rgba(15,23,42,0.06);
}

*{box-sizing:border-box}
@font-face{
    font-family:'yekanbakh';
    src:url('../font/YekanBakhFaNum-VF.woff') format('woff');
    src:url('../font/YekanBakhFaNum-VF.woff2') format('woff2');
}
body{
    direction:rtl;
    margin:0;
    color:var(--text);
    background:var(--bg);
    font-family:'yekanbakh',system-ui,sans-serif;
    font-size:14px;
    line-height:1.6;
    overflow-x:hidden;
}
body.menu-open{overflow:hidden}
a{color:var(--primary);text-decoration:none}
h1,h2,h3{margin:0 0 12px 0;font-weight:600}
.container{
    max-width:100%;
    width:100%;
    margin:0;
    padding:24px 32px;
    display:flex;
    gap:20px;
    align-items:flex-start;
    flex-direction:column;
}
.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:16px;
    box-shadow:var(--shadow);
    overflow:visible;
    width:100%;
}
.nav{display:none}
.nav a{width:100%}
.plan-header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.plan-form{margin-top:12px;padding:12px;border:1px dashed var(--border);border-radius:10px;background:#fafafa;display:none}
.btn,
button,
input[type=submit],
input[type=button],
input[type=reset]{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:var(--primary);
    color:#fff;
    border:1px solid transparent;
    border-radius:8px;
    padding:8px 14px;
    cursor:pointer;
    font-size:13px;
    min-height:34px;
    line-height:1.2;
    font-weight:600;
    font-family:inherit;
    transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .05s ease;
    text-decoration:none;
}
.btn:hover,
button:hover,
input[type=submit]:hover,
input[type=button]:hover,
input[type=reset]:hover{
    filter:brightness(0.98);
}
.btn:active,
button:active,
input[type=submit]:active,
input[type=button]:active,
input[type=reset]:active{
    transform:translateY(1px);
}
.btn:focus-visible,
button:focus-visible,
input[type=submit]:focus-visible,
input[type=button]:focus-visible,
input[type=reset]:focus-visible{
    outline:0;
    box-shadow:0 0 0 3px rgba(37,99,235,0.2);
}
a.btn{display:inline-flex}
.btn.secondary,
button.secondary,
input[type=submit].secondary,
input[type=button].secondary,
input[type=reset].secondary{
    background:var(--primary-100);
    color:var(--primary-700);
    border-color:var(--border);
}
.btn.danger,
button.danger,
input[type=submit].danger,
input[type=button].danger,
input[type=reset].danger{background:var(--danger)}
.btn.light,
button.light,
input[type=submit].light,
input[type=button].light,
input[type=reset].light{background:#f3f4f6;color:#111827;border-color:var(--border)}
.btn.small,
button.small,
input[type=submit].small,
input[type=button].small,
input[type=reset].small{padding:6px 10px;font-size:12px;min-height:30px}
.inline-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}
.actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin-top:12px;
}
.actions form{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}
.actions input[type="text"]{
    min-width:160px;
    flex:1 1 160px;
}
.status-form{
    flex-wrap:wrap;
    align-items:center;
}
.status-form select,
.status-form input[type="text"]{
    min-width:180px;
    flex:1 1 180px;
}
.status-form{
    max-width:100%;
}
.status-form select{
    max-width:220px;
}
.pagination{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-top:10px;
}
.pagination__list{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.page-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    color:var(--text);
    font-size:13px;
}
.page-link.active{
    background:var(--primary-100);
    color:var(--primary-700);
    font-weight:600;
}
.page-link.disabled{
    color:var(--muted);
    background:#f8fafc;
    cursor:not-allowed;
}
.page-ellipsis{
    padding:6px 10px;
    color:var(--muted);
    font-size:13px;
}
.pagination__meta{
    font-size:12px;
    color:var(--muted);
}
.inline-actions input{
    flex:1 1 240px;
}
.lead-box{
    background:#f8fbff;
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px;
}
.tabs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:6px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#f8fbff;
    width:max-content;
}
.tab-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border-radius:8px;
    border:1px solid transparent;
    background:transparent;
    color:var(--secondary);
    font-size:13px;
    position:relative;
}
.tab-pill input{position:absolute;opacity:0;pointer-events:none}
.tab-pill:hover{
    color:var(--primary-700);
    background:#fff;
    border-color:var(--border);
}
.tab-pill.is-active{
    background:#fff;
    color:var(--primary-700);
    border-color:var(--primary-100);
    box-shadow:var(--shadow);
}
.tab-pill.is-checked{
    background:#fff;
    color:var(--primary-700);
    border-color:var(--primary-100);
    box-shadow:var(--shadow);
}
.muted{color:var(--muted);font-size:12px}
.form-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}
.field-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}
.field-actions .search-select,
.field-actions input[type="text"],
.field-actions input[type="search"]{
    flex:1 1 220px;
    min-width:0;
}
.form-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}
.form-grid .form-actions{
    grid-column:1 / -1;
    justify-content:flex-start;
    margin-top:4px;
}
input,select,textarea{
    width:100%;
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 12px;
    background:#fff;
    font-family:inherit;
    font-size:13px;
    min-width:0;
    line-height:1.4;
    transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input:focus,select:focus,textarea:focus{
    outline:0;
    border-color:var(--primary-300);
    box-shadow:0 0 0 3px rgba(37,99,235,0.12);
}
input::placeholder,textarea::placeholder{
    color:#9ca3af;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
    -webkit-text-fill-color:var(--text);
    -webkit-box-shadow:0 0 0 1000px #fff inset;
    box-shadow:0 0 0 1000px #fff inset;
    transition:background-color 9999s ease-out 0s;
}
input[disabled],select[disabled],textarea[disabled],
input[readonly],textarea[readonly]{
    background:#f8fafc;
    color:#6b7280;
    cursor:not-allowed;
}
.datepicker-container,
.datepicker-plot-area,
.datepicker-plot-area *{
    font-family:inherit !important;
}
@media (max-width:640px){
    .datepicker-container{
        z-index:100000 !important;
    }
    .datepicker-container:not(.pwt-mobile-view){
        width:100vw !important;
        left:0 !important;
        right:0 !important;
        overflow:visible !important;
    }
    .datepicker-container:not(.pwt-mobile-view) .datepicker-plot-area{
        width:calc(100vw - 24px) !important;
        min-width:0 !important;
        max-width:360px !important;
        left:12px !important;
        right:12px !important;
        border-radius:18px !important;
        box-shadow:0 20px 60px rgba(15,23,42,.18) !important;
    }
    .datepicker-container.pwt-mobile-view .datepicker-plot-area{
        border-radius:0 !important;
    }
}
input.input-error, select.input-error, textarea.input-error{
    border-color:#ef4444;
    box-shadow:0 0 0 3px rgba(239,68,68,0.12);
}
.error-validation{
    color:#b91c1c;
    font-size:12px;
    margin-top:4px;
    display:block;
}
select{
    max-width:100%;
    position:relative;
    z-index:2;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%2378939d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:16px 16px;
    background-position:left 14px center;
    padding-inline-start:40px;
    padding-inline-end:12px;
}
select[dir="ltr"]{
    background-position:right 14px center;
    padding-inline-start:12px;
    padding-inline-end:40px;
}
select:focus{
    outline:0;
    border-color:var(--primary-300);
    box-shadow:0 0 0 2px rgba(37,99,235,0.15);
}
select[multiple]{
    appearance:auto;
    -webkit-appearance:auto;
    -moz-appearance:auto;
    background-image:none;
    padding-inline-start:10px;
    padding-inline-end:10px;
}
.form-row-field,
.clinic-information{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    width:100%;
}
.form-field,
.clinic-information-filed{
    flex:1 1 220px;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.select-filed{
    width:100%;
    max-width:100%;
    min-width:0;
}
button{
    font-family:inherit;
}
label{display:block;margin-bottom:6px;color:var(--muted);font-size:12px}
.field-help{font-size:12px;color:var(--muted);margin-top:6px}
.time-24-input{
    direction:ltr;
    text-align:center;
    font-variant-numeric:tabular-nums;
    letter-spacing:.04em;
}
.time-24-input::placeholder{
    color:#94a3b8;
    letter-spacing:.02em;
}
.appointment-time-picker{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.appointment-time-picker__input-row{
    display:flex;
    align-items:stretch;
    gap:8px;
}
.appointment-time-picker__input-row input{
    flex:1 1 auto;
    min-width:0;
}
.appointment-time-picker__toggle{
    flex:0 0 auto;
    white-space:nowrap;
}
.appointment-time-picker.is-disabled .appointment-time-picker__toggle{
    opacity:.56;
    cursor:not-allowed;
}
.appointment-time-picker__panel{
    position:absolute;
    inset-inline:0;
    top:calc(100% + 8px);
    z-index:80;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:10px;
    border:1px solid rgba(82,180,203,.24);
    border-radius:16px;
    background:#fff;
    box-shadow:0 18px 50px rgba(18,49,59,.16);
}
.appointment-time-picker__panel[hidden]{
    display:none !important;
}
.appointment-time-picker__selects{
    display:flex;
    align-items:center;
    gap:8px;
}
.appointment-time-picker__selects select{
    min-width:72px;
    height:40px;
    padding:0 10px;
    direction:ltr;
    text-align:center;
    font-variant-numeric:tabular-nums;
}
.appointment-time-picker__presets{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.appointment-time-picker__preset{
    min-width:62px;
    min-height:34px;
    border:1px solid rgba(82,180,203,.22);
    border-radius:999px;
    background:#f7fcfd;
    color:#0b6174;
    font:inherit;
    font-size:12px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
    cursor:pointer;
}
.appointment-time-picker__preset.is-active{
    background:#52b4cb;
    border-color:#52b4cb;
    color:#fff;
    box-shadow:0 8px 20px rgba(82,180,203,.22);
}
@media (max-width:640px){
    .appointment-time-picker__input-row,
    .appointment-time-picker__selects{
        flex-wrap:wrap;
    }
    .appointment-time-picker__toggle,
    .appointment-time-picker__selects .btn{
        width:100%;
        justify-content:center;
    }
    .appointment-time-picker__panel{
        position:static;
        box-shadow:0 10px 28px rgba(18,49,59,.1);
    }
}
input[type=checkbox]{
    width:16px;
    height:16px;
    margin:0;
    vertical-align:middle;
    accent-color:var(--primary-600);
    cursor:pointer;
}
label.has-checkbox{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:0;
    color:var(--text);
    font-size:13px;
}
table td input[type=checkbox]{
    display:block;
    margin:0 auto;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(14,165,164,0.12)}
.password-field-wrap{
    position:relative;
}
.password-field-wrap input,
.password-field-wrap input[type="password"],
.password-field-wrap input[type="text"]{
    padding-left:56px;
    padding-right:14px;
}
.password-visibility-toggle{
    position:absolute;
    top:50%;
    left:9px;
    right:auto;
    width:38px;
    height:38px;
    min-width:38px;
    padding:0;
    border:1px solid var(--border);
    border-radius:12px;
    background:#f4fbfd;
    color:var(--primary-700);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:0;
    line-height:1;
    transform:translateY(-50%);
}
.password-visibility-toggle:hover{
    background:#e8f8fb;
    border-color:var(--primary-100);
}
.password-visibility-toggle::before,
.password-visibility-toggle::after{
    content:none;
}
.password-toggle-icon,
.password-toggle-icon svg{
    display:block;
    width:20px;
    height:20px;
    flex:0 0 20px;
}
.password-toggle-icon__eye-off{
    display:none !important;
}
.password-visibility-toggle.is-visible .password-toggle-icon__eye{
    display:none !important;
}
.password-visibility-toggle.is-visible .password-toggle-icon__eye-off{
    display:block !important;
}
button.password-visibility-toggle,
button.password-visibility-toggle:not(.secondary):not(.light):not(.danger){
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
    padding:0;
    background:#f4fbfd;
    color:var(--primary-700);
    border-color:var(--border);
    transform:translateY(-50%);
}
.sr-only{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}
table{
    width:100%;
    border-collapse:collapse;
    margin-top:10px;
}
th,td{
    border-bottom:1px solid var(--border);
    padding:10px 8px;
    text-align:center;
    font-size:13px;
}
th{background:#f9fafb;color:var(--muted);font-weight:600}
.status{padding:2px 6px;border-radius:6px;font-size:12px;display:inline-block}
.status.active{background:#10b981;color:#fff}
.status.inactive{background:#9ca3af;color:#fff}
.status.unpaid{background:#f59e0b;color:#fff}
.status.partial{background:#fbbf24;color:#fff}
.status.reserved{background:#f59e0b;color:#fff}
.status.confirmed{background:#22c55e;color:#fff}
.status.done{background:#16a34a;color:#fff}
.status.canceled{background:#ef4444;color:#fff}
.status.no_show{background:#ef4444;color:#fff}
.status.waiting{background:#f59e0b;color:#fff}
.status.in_room{background:#2563eb;color:#fff}
.status.finished{background:#16a34a;color:#fff}
.btn[disabled],
.btn:disabled,
button:disabled,
input[type=submit]:disabled,
input[type=button]:disabled,
input[type=reset]:disabled{
    opacity:0.6;
    cursor:not-allowed;
}
.status.paid{background:#10b981;color:#fff}
.status.draft{background:#64748b;color:#fff}
.status.void{background:#9ca3af;color:#fff}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{background:#f9fafb;border:1px solid var(--border);border-radius:10px;padding:12px}
.stat .label{color:var(--muted);font-size:12px;margin-bottom:6px}
.stat .value{font-size:18px;font-weight:700}
.summary-card{align-self:flex-start}
.amount-group{display:flex;gap:6px;align-items:center}
.amount-group input{flex:1}
.table{display:block;width:100%;margin-top:16px}
.row{display:flex;border-bottom:1px solid var(--border)}
.row-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 16px;
}
.row-grid .row{
    border-bottom:none;
    margin:0;
    justify-content:flex-start;
    gap:8px;
    text-align:right;
    align-items:center;
}
.row-grid .label{
    color:var(--muted);
    font-size:12px;
    white-space:nowrap;
    min-width:84px;
}
.appointment-summary{
    padding:18px;
    z-index:2;
}
.appointment-page{
    display:grid;
    grid-template-columns:25% minmax(0,1fr);
    gap:16px;
    align-items:start;
    width:100%;
    direction:ltr;
}
.appointment-page__left{
    align-self:start;
    grid-column:1;
    direction:rtl;
    position:-webkit-sticky;
    position:sticky;
    top:72px;
    height:max-content;
}
.appointment-page__right{
    display:flex;
    flex-direction:column;
    gap:16px;
    grid-column:2;
    min-width:0;
    direction:rtl;
}
.appointment-page__left .appointment-summary__layout{
    grid-template-columns:1fr;
}
.appointment-page__left .appointment-summary__grid{
    grid-template-columns:1fr;
}
.appointment-summary__header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}
.appointment-summary__title{
    display:flex;
    align-items:center;
    gap:10px;
}
.appointment-summary__title h2{
    margin:0;
    font-size:16px;
}
.appointment-summary__sub{
    font-size:12px;
    color:var(--muted);
    margin-top:4px;
}
.appointment-create{
    display:flex;
    gap:16px;
    width:100%;
    direction:ltr;
    align-items:start;
}
.appointment-create__main{
    display:flex;
    flex-direction:column;
    gap:16px;
    flex:1 1 75%;
    direction:rtl;
    min-width:0;
    order:2;
}
.appointment-create__side{
    flex:0 0 25%;
    direction:rtl;
    position:sticky;
    top:72px;
    align-self:start;
    min-width:0;
    height:max-content;
    order:1;
}
.appointment-create__summary .summary-grid{
    grid-template-columns:1fr;
}
.summary-grid--stack .summary-item{
    padding:10px 12px;
}
.appointment-summary__primary{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.appointment-summary__layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
    gap:16px;
    margin-top:14px;
}
.appointment-summary__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px 16px;
}
.appointment-summary__grid .row{
    border-bottom:none;
    margin:0;
    align-items:center;
    gap:8px;
}
.appointment-summary__grid .label{
    min-width:84px;
}
.appointment-summary__panel{
    background:#f8fafc;
    border:1px dashed var(--border);
    border-radius:12px;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:0;
    overflow:hidden;
}
.appointment-summary__panel form{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.appointment-summary__panel input[type="text"],
.appointment-summary__panel select{
    width:100%;
}
.appointment-summary__panel .btn{
    width:100%;
}
.appointment-summary__actions{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
}
.appointment-summary__actions form{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.appointment-status-form,
.appointment-queue-form{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.row.header{background:#f9fafb;color:var(--muted);font-weight:600;border-radius:10px;margin-bottom:6px}
.cell{padding:10px;flex:1}
.breadcrumb{display:flex;align-items:center;gap:10px;color:var(--muted)}
.search-form{display:flex;gap:8px;align-items:center;max-width:360px;width:100%}
.search-input{border:1px solid var(--border);border-radius:10px;padding:8px 12px;background:#fff}
.alert{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;padding:10px 12px;border-radius:10px}
.alert.error{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.alert.success{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.alert .alert-title{font-weight:600;margin-bottom:6px}
.menu-side{display:flex;justify-content:space-between;align-items:center;padding:10px 8px;border-radius:10px;color:var(--text)}
.menu-side.active{background:#f1f5f9}
.menu-side-item{display:flex;align-items:center;gap:8px}
.menu-sub{display:none}
.menu-sub-title{padding:6px 10px;border:1px solid var(--border);border-radius:8px;color:var(--muted);background:#fff}
.detail{color:var(--primary);font-size:13px}
.btn-delete{background:transparent;border:none;color:var(--danger);cursor:pointer;font-size:13px}
.menu-side img,.menu-side-item img,.menu-mob img,.profile img,.dateicon img,.alert img,.search-form img,.breadcrumb img,.new img{display:none}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;background:#f1f5f9;color:var(--text)}
.pill.low{background:#fee2e2;color:#b91c1c}
.pill.success{background:#dcfce7;color:#166534}
.pill.neutral{background:#e2e8f0;color:#334155}
.month-nav{display:flex;align-items:center;gap:12px;justify-content:space-between}
.week-nav{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap}
.days{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.day-tab{padding:6px 10px;border:1px solid var(--border);border-radius:8px;cursor:pointer;background:#fff;font-size:12px}
.day-tab.active{background:var(--primary-100);border-color:var(--primary);color:var(--primary-700);font-weight:600}
.empty-slot{background:#f8fafc;color:var(--muted)}
.reserved{background:var(--primary);color:#fff}
.confirmed{background:#22c55e;color:#fff}
.done{background:#16a34a;color:#fff}
.no_show{background:#ef4444;color:#fff}
.canceled{background:#ef4444;color:#fff}
.break{background:#f59e0b;color:#fff}
#timeline-table td{vertical-align:top}
.appointment-link{
    display:block;
    color:inherit;
    text-decoration:none;
    width:100%;
    height:100%;
}
.has-link{cursor:pointer}
.overlap-row td{background:#fff7ed}
.overlap-row td:first-child{border-right:3px solid #f97316}
.overlap-slot{box-shadow:inset 0 0 0 2px #f97316}
.select-inline{max-width:360px}
.dropzone{
    border:2px dashed var(--border);
    border-radius:12px;
    padding:24px;
    text-align:center;
    background:#f9fbff;
    color:var(--muted);
    position:relative;
    transition:all 0.2s ease;
}
.dropzone-title{font-weight:600;color:var(--text)}
.dropzone-sub{font-size:12px;margin-top:4px}
.dropzone.dragover{
    border-color:var(--primary);
    background:var(--primary-100);
    color:var(--primary-700);
}
.dropzone input[type="file"]{
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}
.upload-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:12px;
}
.upload-item{
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px;
    background:#fff;
}
.upload-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}
.upload-name{font-weight:600;color:var(--text)}
.upload-meta{font-size:12px;color:var(--muted)}
.upload-progress-wrap{
    margin-top:8px;
    background:#e7eefc;
    border-radius:999px;
    height:8px;
    overflow:hidden;
}
.upload-progress{
    height:100%;
    width:0;
    background:var(--primary);
    transition:width 0.2s ease;
}
.upload-status{font-size:12px;color:var(--muted);margin-top:6px}
.upload-actions{
    display:flex;
    gap:8px;
    margin-top:8px;
    flex-wrap:wrap;
}
.media-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:12px;
    margin-top:10px;
}
.media-item{
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    background:#fff;
}
.media-item img,
.media-item video{
    width:100%;
    height:140px;
    object-fit:cover;
    display:block;
    background:#0f172a;
}
.media-meta{
    font-size:12px;
    color:var(--muted);
    padding:8px 10px 0 10px;
}
.media-actions{
    padding:8px 10px 10px 10px;
}
.crm-board{
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding-bottom:8px;
}
.crm-column{
    min-width:260px;
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.crm-column-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-weight:600;
}
.crm-count{
    font-size:12px;
    color:var(--muted);
}
.crm-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:6px;
    cursor:grab;
}
.crm-card.dragging{opacity:0.6}
.crm-column.dragover{
    border-color:var(--primary);
    background:var(--primary-100);
}
.crm-card small{color:var(--muted);font-size:12px}
.crm-card .btn{align-self:flex-start}
.tag{
    display:inline-flex;
    align-items:center;
    gap:4px;
    background:var(--primary-100);
    color:var(--primary-700);
    border-radius:999px;
    padding:2px 8px;
    font-size:11px;
}
.inline-actions{display:flex;gap:6px;flex-wrap:wrap}
.call-direction{font-size:12px;color:var(--muted)}
.call-outcome{font-weight:600}
.mini-chart{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:10px;
}
.mini-bar{
    display:flex;
    align-items:center;
    gap:8px;
}
.mini-bar__label{
    width:70px;
    font-size:11px;
    color:var(--muted);
}
.mini-bar__track{
    flex:1;
    height:8px;
    border-radius:999px;
    background:#e7eefc;
    overflow:hidden;
}
.mini-bar__fill{
    height:100%;
    background:var(--primary);
    border-radius:999px;
}
.mini-bar__value{
    width:24px;
    font-size:11px;
    color:var(--muted);
    text-align:left;
}
.app-topbar{
    position:sticky;
    top:0;
    width:100%;
    min-height:56px;
    height:auto;
    background:var(--card);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    z-index:2001;
    box-shadow:var(--shadow);
}
.app-topbar__brand{
    font-weight:700;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:8px;
}
.app-topbar__brand img{
    width:28px;
    height:28px;
    object-fit:contain;
    border-radius:6px;
}
.app-topbar__menu{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    overflow:visible;
    max-width:100%;
}
.app-topbar__toggle{
    display:none;
    background:transparent;
    border:1px solid var(--border);
    border-radius:10px;
    width:38px;
    height:34px;
    align-items:center;
    justify-content:center;
    gap:4px;
    flex-direction:column;
    cursor:pointer;
}
.app-topbar__toggle span{
    display:block;
    width:18px;
    height:2px;
    background:var(--text);
    border-radius:999px;
    transition:transform .2s ease,opacity .2s ease;
}
body.menu-open .app-topbar__toggle span:nth-child(2){opacity:0}
body.menu-open .app-topbar__toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .app-topbar__toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-item > a{
    display:flex;
    align-items:center;
    gap:6px;
}
.menu-caret{
    font-size:10px;
    opacity:0.7;
    line-height:1;
    transition:transform .2s ease,opacity .2s ease;
}
.menu-item:hover .menu-caret{opacity:1}
.app-topbar__menu a{
    color:var(--muted);
    padding:6px 8px;
    border-radius:8px;
    font-size:13px;
}
.menu-item{position:relative;display:flex;align-items:center}
.menu-item::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height:8px;
}
.menu-item--notifications > a{
    position:relative;
    display:flex;
    align-items:center;
    gap:6px;
}
.notif-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    color:var(--muted);
}
.menu-item--notifications:hover .notif-icon{color:var(--text)}
.notif-badge{
    position:absolute;
    top:2px;
    left:2px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:999px;
    background:#ef4444;
    color:#fff;
    font-size:10px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.notif-menu{min-width:260px;max-width:min(320px, calc(100vw - 32px))}
.notif-title{font-size:12px;color:var(--muted);padding:4px 6px}
.notif-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}
.notif-item{display:flex;flex-direction:column;gap:2px;padding:6px 8px;border-radius:8px;color:var(--text)}
.notif-text{font-size:13px}
.notif-item:hover{background:#f3f4f6}
.notif-item .meta{font-size:11px;color:var(--muted)}
.submenu{
    position:absolute;
    top:calc(100% + 2px);
    right:0;
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:var(--shadow);
    min-width:200px;
    max-width:min(320px, calc(100vw - 32px));
    max-height:calc(100vh - 120px);
    padding:8px;
    display:none;
    flex-direction:column;
    gap:6px;
    overflow:auto;
    z-index:3000;
}
.submenu-title{
    font-size:11px;
    color:var(--muted);
    padding:4px 6px;
    border-bottom:1px dashed var(--border);
    margin-top:4px;
}
.submenu-title:first-child{
    margin-top:0;
}
.menu-item--profile .submenu{
    left:0;
    right:auto;
}
.menu-item--notifications .submenu{
    left:0;
    right:auto;
    max-width:min(360px, calc(100vw - 24px));
}
.submenu a{
    padding:6px 8px;
    border-radius:8px;
    color:var(--text);
}
.menu-item:hover .submenu{display:flex}
.app-topbar__menu a.is-active{
    background:var(--primary-100);
    color:var(--primary-700);
    font-weight:600;
}
.app-topbar__menu a:hover{
    background:#f3f4f6;
    color:var(--text);
}
.money-input-wrap{
    display:flex;
    flex-direction:column;
    gap:4px;
    width:100%;
}
.money-words{
    font-size:11px;
    color:var(--muted);
    min-height:14px;
}
.content{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:16px;
    width:100%;
    overflow:visible;
}
.side,.menu-mob,.dateicon,.profile,.c1{display:none}
.c2{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.c2-1{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.c2-2{display:flex;flex-direction:column;gap:16px}
.overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.2);
    display:none;
}
.overlay.show{display:block}
.popup{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:16px;
    box-shadow:var(--shadow);
    display:none;
    z-index:50;
}
.popup.open{display:block}
.search-select{position:relative;width:100%;overflow:visible;z-index:20}
.search-select.is-open{z-index:1200}
.search-select input{width:100%}
.search-select__list{
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    left:0;
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    margin-top:6px;
    box-shadow:var(--shadow);
    max-height:min(260px, calc(100vh - 160px));
    overflow:auto;
    display:none;
    z-index:1200;
}
.search-select.is-open .search-select__list{display:block}
.search-select.is-flipped .search-select__list{
    top:auto;
    bottom:calc(100% + 6px);
}
.search-select__item{
    padding:8px 10px;
    cursor:pointer;
    font-size:14px;
}
.search-select__item:hover,
.search-select__item.is-active{background:#eef2ff}
.search-select__empty,
.search-select__loading{
    padding:8px 10px;
    color:#64748b;
    font-size:13px;
}
.display-page{
    background:#f8fafc;
    color:#0f172a;
}
.display-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 24px;
    border-bottom:1px solid var(--border);
    background:#fff;
    position:sticky;
    top:0;
    z-index:10;
}
.display-title{font-size:22px;font-weight:700;display:flex;align-items:center;gap:10px}
.display-logo{width:34px;height:34px;object-fit:contain;border-radius:8px}
.display-subtitle{font-size:12px;color:var(--muted);margin-top:4px}
.display-clock{
    text-align:left;
    font-weight:600;
}
.display-clock #display-date{font-size:13px;color:var(--muted)}
.display-clock #display-time{font-size:20px}
.display-content{
    padding:16px 24px 40px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:16px;
    align-items:start;
}
.display-section{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:var(--shadow);
    padding:12px;
}
.display-section__header{
    font-weight:700;
    font-size:16px;
    margin-bottom:10px;
}
.display-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.display-appointment{
    display:grid;
    grid-template-columns:140px 1fr 120px;
    gap:10px;
    align-items:center;
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 12px;
    background:#f8fafc;
}
.display-appointment__time{font-weight:600}
.display-appointment__name{font-weight:700}
.display-appointment__service{font-size:12px;color:var(--muted)}
.display-appointment__status{
    text-align:center;
    font-size:12px;
    padding:6px 8px;
    border-radius:999px;
    background:#e2e8f0;
}
.status-reserved .display-appointment__status{background:#fef3c7;color:#92400e}
.status-done .display-appointment__status{background:#dcfce7;color:#166534}
.status-canceled .display-appointment__status{background:#fee2e2;color:#991b1b}
.display-empty{color:var(--muted);font-size:13px;padding:8px 0}
@media (max-width: 1200px){
    .appointment-summary__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 1000px){
    .appointment-summary__layout{grid-template-columns:1fr}
}
@media (max-width: 1100px){
    .appointment-page{grid-template-columns:1fr}
    .appointment-create{flex-direction:column}
    .appointment-create__side{position:static;flex:1 1 auto}
}
@media (max-width: 900px){
    .display-appointment{grid-template-columns:1fr;gap:6px}
    .display-appointment__status{text-align:right;justify-self:start}
}
@media (max-width: 900px){
    .container{flex-direction:column;padding:16px}
    .app-topbar{height:auto;min-height:56px;flex-direction:row;align-items:center;gap:8px;padding:8px 12px}
    .app-topbar__toggle{display:inline-flex}
    .app-topbar__menu{
        position:fixed;
        top:64px;
        right:12px;
        left:12px;
        background:var(--card);
        border:1px solid var(--border);
        border-radius:12px;
        padding:12px;
        flex-direction:column;
        gap:6px;
        display:none;
        max-height:calc(100vh - 90px);
        overflow:auto;
        z-index:2002;
    }
    body.menu-open .app-topbar__menu{display:flex}
    body.menu-open::after{
        content:"";
        position:fixed;
        inset:0;
        background:rgba(15,23,42,0.25);
        z-index:1500;
    }
    .menu-item{width:100%;align-items:stretch;flex-direction:column}
    .menu-item > a{width:100%;justify-content:space-between;font-size:15px}
    .app-topbar__menu a{width:100%}
    .menu-item::after{display:none}
    .submenu{
        position:static;
        min-width:unset;
        width:100%;
        max-width:100%;
        box-shadow:none;
        margin-top:6px;
        border:1px solid var(--border);
        border-radius:10px;
        padding:8px;
        display:none;
        flex-direction:column;
        max-height:60vh;
        overflow:auto;
        background:#f8fafc;
        gap:4px;
    }
    .menu-item:hover .submenu{display:none}
    .menu-item.is-open .submenu{display:flex}
    .menu-item.is-open > a{
        background:var(--primary-100);
        color:var(--primary-700);
        font-weight:600;
    }
    .menu-item.is-open .menu-caret{transform:rotate(180deg)}
    .submenu a{
        display:block;
        padding:8px 10px;
        border-radius:8px;
        font-size:13px;
    }
    .submenu-title{
        padding:6px 8px;
        border-bottom:1px dashed var(--border);
        margin:2px 0;
        font-size:11px;
    }
    .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .stats{grid-template-columns:1fr 1fr}
    .search-form{flex-direction:column;align-items:stretch;max-width:100%}
    .search-input{width:100%}
    .row{flex-wrap:wrap}
    .cell{text-align:right}
    .month-nav{flex-wrap:wrap}
    .display-header{flex-direction:column;align-items:flex-start;gap:8px}
    .display-clock{text-align:right;width:100%}
}
@media (max-width: 720px){
    .form-grid{grid-template-columns:1fr}
    .row-grid{grid-template-columns:1fr}
    .appointment-summary__grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
    .stats{grid-template-columns:1fr}
    table{display:block;overflow-x:auto;white-space:nowrap}
    .pagination{flex-direction:column;align-items:flex-start}
    .card{padding:12px}
    .form-row-field,
    .clinic-information{flex-direction:column}
    .amount-group{flex-direction:column;align-items:stretch}
    .upload-header{flex-direction:column;align-items:flex-start}
    .upload-actions{width:100%}
    .tabs{width:100%;overflow-x:auto}
    .tab-pill{white-space:nowrap}
    .table{overflow-x:auto}
    .media-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
    .display-content{padding:12px 16px 28px}
    .display-title{font-size:18px}
    .search-select__list{max-height:200px}
}

/* Clinica shell v2: clean shared admin UI layer. Keep this section compact and authoritative. */
:root{
    --brand:#52b4cb;
    --brand-700:#0b6174;
    --brand-800:#074e60;
    --brand-100:#eaf8fb;
    --brand-50:#f5fcfd;
    --ink:#12313b;
    --ink-soft:#486473;
    --line:rgba(82,180,203,.18);
    --surface:#ffffff;
    --surface-soft:#f7fcfd;
    --shell-sidebar:260px;
    --shell-radius:18px;
    --shell-shadow:0 16px 42px rgba(18,49,59,.08);
}

body.has-app-topbar{
    background:linear-gradient(180deg,#f8fdfe 0%,#f1f8fa 100%);
    color:var(--ink);
}

body.has-app-topbar::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 88% 0%, rgba(82,180,203,.15), transparent 30rem),
        radial-gradient(circle at 8% 100%, rgba(82,180,203,.08), transparent 24rem);
    z-index:-1;
}

body.has-app-topbar .container{
    padding:18px 24px 32px;
}

body.has-app-topbar .content{
    width:100%;
    max-width:none;
    margin-inline:0;
}

.card,
.ce-panel,
.settings-field-card,
.settings-studio-panel,
.settings-group-card,
.settings-page-head,
.settings-kpi-card{
    border-color:var(--line);
    border-radius:var(--shell-radius);
    box-shadow:var(--shell-shadow);
}

.btn,
button,
input[type=submit],
input[type=button],
input[type=reset]{
    border-radius:12px;
}

.btn:not(.secondary):not(.light):not(.danger),
button:not(.secondary):not(.light):not(.danger),
input[type=submit]:not(.secondary):not(.light):not(.danger){
    background:var(--brand);
    color:#fff;
}

.btn.secondary,
button.secondary,
input[type=submit].secondary{
    background:var(--brand-100);
    color:var(--brand-700);
    border-color:var(--line);
}

.btn.light,
button.light{
    background:#fff;
    color:var(--ink);
    border-color:var(--line);
}

.btn.danger,
button.danger{
    background:#fee2e2;
    color:#991b1b;
    border-color:#fecaca;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--brand);
    box-shadow:0 0 0 3px rgba(82,180,203,.18);
}

@media (min-width:901px){
    body.has-app-topbar{
        padding-inline-end:var(--shell-sidebar);
        padding-inline-start:0;
    }

    .app-topbar{
        position:fixed;
        inset-block:0;
        inset-inline-end:0;
        inset-inline-start:auto;
        width:var(--shell-sidebar);
        height:100vh;
        min-height:100vh;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:8px;
        padding:14px;
        overflow:hidden;
        border:0;
        border-radius:26px 0 0 26px;
        background:linear-gradient(180deg,#52b4cb 0%,#218ba2 52%,#075466 100%);
        box-shadow:-18px 0 45px rgba(7,69,85,.18);
        z-index:1000;
    }

    .app-topbar__brand{
        min-height:58px;
        padding:6px 6px 12px;
        color:#fff;
        flex:0 0 auto;
    }

    .app-topbar__brand img{
        width:36px;
        height:36px;
        border-radius:12px;
        background:#fff;
        padding:3px;
    }

    .app-topbar__brand > span:not(.app-topbar__version){
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        color:#fff;
    }

    .app-topbar__version{
        margin-inline-start:auto;
        padding:2px 8px;
        border-radius:999px;
        background:rgba(255,255,255,.14);
        color:rgba(255,255,255,.76);
        font-size:11px;
        font-weight:600;
    }

    .app-topbar__toggle,
    .app-topbar__menu-head,
    .app-topbar__menu-search{
        display:none !important;
    }

    .app-topbar__menu{
        display:flex;
        flex:1 1 auto;
        flex-direction:column;
        flex-wrap:nowrap;
        gap:6px;
        max-width:none;
        overflow:auto;
        padding:2px 0 12px;
        scrollbar-width:thin;
        scrollbar-color:rgba(255,255,255,.32) transparent;
    }

    .app-topbar__menu::-webkit-scrollbar{width:6px}
    .app-topbar__menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:999px}

    .app-topbar__menu > .menu-item--notifications,
    .app-topbar__menu > .menu-item--profile{
        display:none !important;
    }

    .app-headerbar{
        position:sticky;
        top:12px;
        z-index:850;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:14px;
        min-height:66px;
        margin:12px 16px 4px;
        padding:10px 14px;
        border:1px solid var(--line);
        border-radius:22px;
        background:rgba(255,255,255,.94);
        box-shadow:0 16px 38px rgba(18,49,59,.08);
        backdrop-filter:blur(16px);
        overflow:visible;
    }

    .app-headerbar__title{
        display:grid;
        gap:2px;
        flex:0 0 auto;
        min-width:190px;
    }

    .app-headerbar__title strong{
        color:var(--ink);
        font-size:15px;
        font-weight:760;
    }

    .app-headerbar__title span{
        color:var(--ink-soft);
        font-size:12px;
    }

    .app-headerbar__search{
        display:flex;
        align-items:center;
        gap:8px;
        flex:1 1 360px;
        max-width:520px;
        min-width:260px;
    }

    .app-headerbar__search-field{
        position:relative;
        display:flex;
        align-items:center;
        flex:1 1 auto;
        min-width:0;
    }

    .app-headerbar__search-icon{
        position:absolute;
        inset-inline-start:12px;
        color:#0b6174;
        font-size:18px;
        line-height:1;
        pointer-events:none;
    }

    .app-headerbar__search input{
        width:100%;
        min-height:42px;
        padding-inline-start:38px;
        padding-inline-end:34px;
        background:var(--surface-soft);
        border-color:var(--line);
    }

    .app-headerbar__search input:focus{
        background:#fff;
        border-color:#52b4cb;
        box-shadow:0 0 0 3px rgba(82,180,203,.14);
        outline:none;
    }

    .app-headerbar__search.is-searching input{
        background:#fff;
        border-color:#52b4cb;
    }

    .app-headerbar__search-clear{
        position:absolute;
        inset-inline-end:9px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:24px;
        height:24px;
        border-radius:999px;
        background:#e6f7fb;
        color:#075466;
        text-decoration:none;
        font-size:17px;
        font-weight:800;
    }

    .app-headerbar__search-chip{
        display:inline-flex;
        align-items:center;
        min-height:30px;
        padding:4px 10px;
        border-radius:999px;
        background:#e6f7fb;
        color:#075466;
        font-size:12px;
        font-weight:800;
        white-space:nowrap;
    }

    .app-headerbar__actions{
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:8px;
        flex:0 0 auto;
    }
}

/* Due CRM reminders: compact, actionable and safe on small screens. */
.crm-live-reminder{
    position:fixed;
    z-index:10050;
    inset:auto auto 22px 22px;
    width:min(390px, calc(100vw - 32px));
    padding:5px;
    border:1px solid rgba(82,180,203,.42);
    border-radius:16px;
    background:rgba(255,255,255,.96);
    box-shadow:0 18px 55px rgba(20,49,59,.2);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    animation:crm-reminder-enter .24s ease-out both;
}

.crm-live-reminder__content{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:13px;
    border-radius:12px;
    color:#14313b;
    background:#f5fbfd;
}

.crm-live-reminder__eyebrow{
    color:#167b92;
    font-size:11px;
    font-weight:800;
}

.crm-live-reminder__content > strong{
    font-size:14px;
    line-height:1.7;
}

.crm-live-reminder__meta{
    color:#607780;
    font-size:11px;
    line-height:1.7;
}

.crm-live-reminder__actions{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:5px;
}

@keyframes crm-reminder-enter{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
}

@media (max-width:600px){
    .crm-live-reminder{
        inset:auto 12px 12px 12px;
        width:auto;
        border-radius:13px;
    }

    .crm-live-reminder__actions .btn{
        flex:1 1 0;
    }
}

.dashboard-crm-today{
    display:flex;
    flex-direction:column;
    gap:12px;
    border-color:#cfeaf0;
    background:#fbfdfe;
}

.dashboard-crm-today__head,
.dashboard-crm-today__actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.dashboard-crm-today__eyebrow{
    display:block;
    color:#26798a;
    font-size:12px;
    font-weight:800;
    margin-bottom:4px;
}

.dashboard-crm-today h2{
    margin:0;
    font-size:18px;
    color:var(--text);
}

.dashboard-crm-today__stats{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.dashboard-crm-today__stats span{
    border:1px solid #d8edf2;
    background:#fff;
    border-radius:8px;
    padding:7px 10px;
    color:#31515b;
    font-size:12px;
    font-weight:800;
}

.dashboard-crm-today__list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:8px;
}

.dashboard-crm-today__item{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    border:1px solid #e2f1f5;
    border-radius:8px;
    padding:10px;
    background:#fff;
    color:inherit;
    text-decoration:none;
}

.dashboard-crm-today__item:hover{
    border-color:var(--primary);
    background:#f4fbfd;
}

.dashboard-crm-today__item strong,
.dashboard-crm-today__item small{
    display:block;
}

.dashboard-crm-today__item small,
.dashboard-crm-today__item em{
    color:var(--muted);
    font-size:12px;
    font-style:normal;
}

@media (max-width:720px){
    .dashboard-crm-today__head,
    .dashboard-crm-today__actions,
    .dashboard-crm-today__item{
        align-items:stretch;
        flex-direction:column;
    }

    .dashboard-crm-today__list{
        grid-template-columns:1fr;
    }
}

.appointment-cancel-form{
    display:flex !important;
    flex-direction:column;
    gap:10px;
    align-items:stretch;
    width:100%;
    max-width:100%;
    min-width:0;
    padding:10px;
    border:1px solid rgba(239,68,68,.14);
    border-radius:14px;
    background:#fff7f7;
}

.appointment-cancel-form select,
.appointment-cancel-form input[type="text"],
.appointment-cancel-form input[type="time"]{
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:40px;
}

.appointment-cancel-form__checks,
.appointment-cancel-form__followup{
    width:100%;
    min-width:0;
    gap:8px;
}

.appointment-cancel-form__checks{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    color:var(--muted);
    font-size:12px;
}

.appointment-cancel-form__checks label{
    display:inline-flex;
    gap:6px;
    align-items:center;
    margin:0;
    max-width:100%;
}

.appointment-cancel-form__followup{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(96px,118px);
    align-items:center;
}

.appointment-cancel-form .btn{
    width:100%;
}

@media (max-width:900px){
    .appointment-cancel-form__followup{
        grid-template-columns:1fr;
    }
}

.app-topbar__menu > a,
.app-topbar__menu .menu-item > a,
.app-topbar__menu .menu-item > button,
.app-topbar__menu .notif-button{
    width:100%;
    min-height:42px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    padding:9px 11px;
    border:1px solid transparent;
    border-radius:14px;
    color:rgba(255,255,255,.88);
    background:transparent;
    font-size:13px;
    font-weight:680;
    text-align:right;
}

.app-topbar__menu .menu-item{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
}

.app-topbar__menu .menu-item::after{display:none}

.app-topbar__menu > a:hover,
.app-topbar__menu .menu-item > a:hover,
.app-topbar__menu .menu-item > button:hover,
.app-topbar__menu .notif-button:hover,
.app-topbar__menu > a.is-active,
.app-topbar__menu .menu-item > a.is-active,
.app-topbar__menu .menu-item.has-active-child > a,
.app-topbar__menu .menu-item.is-open > a{
    border-color:rgba(255,255,255,.24);
    background:rgba(255,255,255,.14);
    color:#fff;
}

.app-topbar__menu > a.is-active,
.app-topbar__menu .menu-item > a.is-active,
.app-topbar__menu .menu-item.has-active-child > a{
    background:#fff;
    color:var(--brand-700);
}

.menu-caret{
    width:22px;
    height:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:rgba(255,255,255,.14);
    color:transparent;
    transform:none;
}

.menu-caret::before{
    content:"";
    width:7px;
    height:7px;
    border-inline-end:2px solid currentColor;
    border-block-end:2px solid currentColor;
    transform:rotate(135deg);
    color:#fff;
}

.app-topbar__menu > a.is-active .menu-caret::before,
.app-topbar__menu .menu-item > a.is-active .menu-caret::before,
.app-topbar__menu .menu-item.has-active-child > a .menu-caret::before{
    color:var(--brand-700);
}

.menu-item.is-open > a .menu-caret,
.menu-item.is-open > button .menu-caret{
    transform:none;
}

.menu-item.is-open > a .menu-caret::before,
.menu-item.is-open > button .menu-caret::before{
    transform:rotate(45deg) translateY(-2px);
}

.app-topbar__menu .submenu,
.app-topbar__menu .notif-menu{
    position:static;
    display:none !important;
    width:100%;
    min-width:0;
    max-width:100%;
    max-height:none;
    margin:6px 0 8px;
    padding:8px;
    overflow:visible;
    border:1px solid rgba(255,255,255,.14);
    border-radius:16px;
    background:rgba(6,70,86,.25);
    box-shadow:none;
}

.app-topbar__menu .menu-item:hover > .submenu,
.app-topbar__menu .menu-item:focus-within > .submenu,
.app-topbar__menu .menu-item:hover > .notif-menu,
.app-topbar__menu .menu-item:focus-within > .notif-menu{
    display:none !important;
}

.app-topbar__menu .menu-item.is-open > .submenu,
.app-topbar__menu .menu-item.is-open > .notif-menu{
    display:flex !important;
    flex-direction:column;
    gap:5px;
}

.app-topbar__menu .submenu a,
.app-topbar__menu .submenu button,
.app-topbar__menu .notif-item{
    min-height:36px;
    padding:8px 10px;
    border-radius:12px;
    color:rgba(255,255,255,.84);
    background:transparent;
    border:1px solid transparent;
    text-align:right;
}

.app-topbar__menu .submenu a:hover,
.app-topbar__menu .submenu a.is-active,
.app-topbar__menu .notif-item:hover{
    background:rgba(255,255,255,.14);
    color:#fff;
}

.app-topbar__menu .submenu-title,
.app-topbar__menu .notif-title{
    color:rgba(255,255,255,.62);
    border-bottom-color:rgba(255,255,255,.14);
}

.settings-submenu{
    display:grid;
    gap:10px;
}

.settings-submenu__group{
    display:grid;
    gap:5px;
}

.settings-submenu__title{
    margin:4px 0 2px !important;
}

.app-topbar__menu .settings-submenu__link{
    display:grid;
    gap:2px;
    align-items:start;
    min-height:42px;
}

.settings-submenu__link small{
    color:inherit;
    opacity:.62;
    font-size:10px;
    font-weight:600;
}

.app-headerbar__dropdown{
    position:relative;
    width:auto;
    min-width:0;
}

.app-headerbar__dropdown > .submenu,
.app-headerbar__dropdown > .notif-menu{
    position:absolute !important;
    inset-block-start:calc(100% + 10px) !important;
    inset-inline-end:0 !important;
    inset-inline-start:auto !important;
    display:none !important;
    width:min(360px,calc(100vw - 32px));
    min-width:0;
    max-width:min(360px,calc(100vw - 32px));
    max-height:min(520px,70vh);
    overflow:auto;
    padding:12px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    color:var(--ink);
    box-shadow:0 24px 60px rgba(18,49,59,.18);
    z-index:1200;
}

.app-headerbar__dropdown.is-open > .submenu,
.app-headerbar__dropdown.is-open > .notif-menu{
    display:flex !important;
    flex-direction:column;
    gap:8px;
}

.app-headerbar__icon,
.app-headerbar__profile{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:8px 12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface-soft) !important;
    color:var(--brand-700) !important;
    box-shadow:none;
}

.app-headerbar__profile span{
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--brand-100);
    color:var(--brand-700);
    font-weight:800;
}

.app-headerbar .notif-item{
    color:var(--ink);
    background:#f8fcfd;
    border:1px solid var(--line);
    border-radius:14px;
}

.notif-badge{
    top:-4px;
    left:-4px;
}

.ce-stack,
.settings-shell,
.customers-shell,
.appointment-create-shell,
.catalog-stack{
    display:flex;
    flex-direction:column;
    gap:16px;
    width:100%;
}

.ce-page-head,
.catalog-head,
.ce-panel__head,
.settings-section-title{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.ce-page-head h1,
.ce-page-head h2,
.catalog-head h1,
.ce-panel__head h2,
.ce-panel__head h3,
.settings-section-title h2{
    margin:0 0 4px;
    color:var(--ink);
}

.ce-panel,
.dashboard-summary-card,
.dashboard-quick-action,
.service-card,
.subservice-card,
.board-card,
.detail-card,
.catalog-summary .summary-item{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:16px;
    box-shadow:var(--shell-shadow);
}

.dashboard-grid,
.ce-panel-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.dashboard-grid--wide{
    align-items:start;
}

.dashboard-summary-grid,
.dashboard-quick-actions,
.ce-kpi-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:12px;
}

.dashboard-summary-card strong,
.ce-kpi__value,
.ce-metric strong{
    display:block;
    color:var(--brand-700);
    font-size:24px;
    font-weight:800;
}

.ce-metric-strip{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:12px;
}

.ce-metric{
    padding:15px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--shell-shadow);
}

.ce-metric span,
.ce-panel__sub,
.ce-kpi__label,
.ce-kpi__hint,
.dashboard-summary-card p,
.dashboard-quick-action span{
    color:var(--ink-soft);
    font-size:12px;
}

.ce-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.ce-list__item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--surface-soft);
}

.ce-list__meta,
.dashboard-chip-list,
.ce-actions-grid,
.catalog-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}

.ce-badge,
.pill-soft,
.service-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:24px;
    padding:3px 9px;
    border-radius:999px;
    background:var(--brand-100);
    color:var(--brand-700);
    font-size:11px;
    font-weight:700;
}

.ce-note,
.daily-appointments-empty{
    padding:14px;
    border:1px dashed var(--line);
    border-radius:16px;
    background:var(--surface-soft);
    color:var(--ink-soft);
}

.ce-hero,
.dashboard-hero,
.role-hero,
.customers-hero,
.workspace-hero,
.settings-shell__hero,
.hr-hero,
.ticket-page-head{
    background:#fff;
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:var(--shell-shadow);
}

.ce-hero .muted,
.customers-hero .muted,
.workspace-hero .muted,
.settings-shell__hero .muted{
    color:var(--ink-soft) !important;
}

.settings-shell__nav,
.settings-shell__subnav,
.settings-shell__tabs{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:8px;
    padding:8px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--shell-shadow);
}

.settings-shell__nav > .card{
    width:auto;
    min-width:0;
    margin:0 !important;
    padding:10px;
    box-shadow:none;
    background:var(--surface-soft);
}

.settings-shell__subnav,
.settings-shell__tabs{
    display:flex;
    flex-wrap:wrap;
}

.settings-shell__nav-link,
.settings-shell__subnav-link,
.settings-shell__tabs a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:32px;
    padding:6px 10px;
    border:1px solid transparent;
    border-radius:12px;
    color:var(--ink-soft);
    font-size:12px;
    font-weight:700;
}

.settings-shell__nav-link.is-active,
.settings-shell__subnav-link.is-active,
.settings-shell__tabs a.is-active,
.settings-shell__nav-link:hover,
.settings-shell__subnav-link:hover,
.settings-shell__tabs a:hover{
    border-color:var(--line);
    background:var(--brand-100);
    color:var(--brand-700);
}

.settings-page-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    background:#fff;
}

.settings-page-head__eyebrow{
    color:var(--brand-700);
    font-size:12px;
    font-weight:800;
}

.settings-page-head h1{
    margin:4px 0;
    color:var(--ink);
}

.settings-page-head p{
    margin:0;
    color:var(--ink-soft);
}

.settings-page-head__meta,
.settings-kpi-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.settings-page-head__meta span,
.settings-kpi-card{
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface-soft);
    color:var(--brand-700);
    font-weight:750;
}

.settings-kpi-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}

.settings-grid,
.settings-module-card-grid,
.settings-related-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:12px;
}

.settings-home-section{
    display:grid;
    gap:14px;
    background:#fff;
}

.settings-stat,
.settings-module-card,
.settings-related-grid .summary-item{
    display:grid;
    align-content:start;
    gap:8px;
    min-height:118px;
    padding:15px;
    border:1px solid var(--line);
    border-radius:18px;
    background:linear-gradient(180deg,#fff 0%,#f9fdfe 100%);
    color:var(--ink);
    box-shadow:var(--shell-shadow);
}

.settings-stat:hover,
.settings-module-card:hover,
.settings-related-grid .summary-item:hover{
    border-color:rgba(82,180,203,.34);
    transform:translateY(-1px);
}

.settings-stat strong,
.settings-module-card strong,
.settings-related-grid .summary-item strong{
    color:var(--brand-700);
    font-size:16px;
}

.settings-module-card__badge{
    justify-self:start;
    padding:3px 9px;
    border-radius:999px;
    background:var(--brand-100);
    color:var(--brand-700);
    font-size:11px;
    font-weight:800;
}

.settings-module-card span:not(.settings-module-card__badge),
.settings-module-card small,
.settings-related-grid .summary-item span{
    color:var(--ink-soft);
    font-size:12px;
}

.settings-kpi-card{
    display:grid;
    gap:4px;
    background:#fff;
}

.settings-kpi-card span{
    color:var(--ink-soft);
    font-size:12px;
}

.settings-kpi-card strong{
    color:var(--brand-700);
    font-size:18px;
}

.settings-studio-layout{
    display:grid;
    grid-template-columns:270px minmax(0,1fr);
    gap:16px;
    align-items:start;
}

.settings-studio-aside{
    position:sticky;
    top:96px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.settings-studio-panel{
    background:#fff;
}

.settings-section-list{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.settings-section-list a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:9px 10px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface-soft);
    color:var(--ink);
}

.settings-section-list small,
.settings-section-count,
.settings-chip{
    padding:2px 8px;
    border-radius:999px;
    background:var(--brand-100);
    color:var(--brand-700);
    font-size:11px;
    font-weight:800;
}

.settings-studio-main{
    display:flex;
    flex-direction:column;
    gap:16px;
    min-width:0;
}

.settings-group-card{
    background:#fff;
}

.settings-fields-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:14px;
}

.settings-field-card{
    display:grid;
    gap:12px;
    padding:14px;
    background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

.settings-field-card__meta,
.settings-field-card__foot,
.settings-switch-inline,
.settings-input-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.settings-field-card__meta strong{
    display:block;
    color:var(--ink);
}

.settings-field-card code{
    color:var(--ink-soft);
    font-size:11px;
    direction:ltr;
}

.settings-field-card__foot{
    align-items:flex-start;
    color:var(--ink-soft);
    font-size:12px;
    border-top:1px dashed var(--line);
    padding-top:10px;
}

.settings-input-wrap input{
    flex:1 1 auto;
}

.settings-input-wrap span{
    color:var(--ink-soft);
    font-size:12px;
}

.settings-switch-control{
    position:relative;
    width:46px;
    height:26px;
    flex:0 0 auto;
}

.settings-switch-control input{
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}

.settings-switch-control i{
    position:absolute;
    inset:0;
    border-radius:999px;
    background:#dbe7eb;
    transition:.18s ease;
}

.settings-switch-control i::after{
    content:"";
    position:absolute;
    width:20px;
    height:20px;
    inset-block-start:3px;
    inset-inline-end:3px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 8px rgba(18,49,59,.18);
    transition:.18s ease;
}

.settings-switch-control input:checked + i{
    background:var(--brand);
}

.settings-switch-control input:checked + i::after{
    transform:translateX(-20px);
}

.settings-save-bar{
    position:sticky;
    bottom:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);
}

.appointment-create-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:14px !important;
    padding:16px 18px !important;
    border:1px solid var(--line) !important;
    border-radius:22px !important;
    background:#fff !important;
    box-shadow:var(--shell-shadow) !important;
}

.appointment-create-head h1{
    margin:0 0 4px !important;
    color:var(--ink) !important;
    font-size:22px !important;
}

.appointment-create{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 320px !important;
    gap:16px !important;
    align-items:start !important;
    direction:rtl !important;
}

.appointment-create__main,
.appointment-create__side{
    min-width:0;
    direction:rtl !important;
    order:initial !important;
}

.appointment-create__main{
    grid-column:1 !important;
}

.appointment-create__side{
    grid-column:2 !important;
    position:sticky;
    top:96px;
}

.appointment-create .form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.appointment-create .step-block[data-step-block="1"] .form-grid > div,
.appointment-create .step-block[data-step-block="4"] .form-grid > div:last-child{
    grid-column:1 / -1;
}

.steps-list{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.steps-item,
.step-block,
.daily-appointments-card,
.appointment-customer-picker{
    border:1px solid var(--line) !important;
    border-radius:16px !important;
    background:var(--surface-soft) !important;
}

.steps-item{
    padding:10px !important;
}

.steps-item.is-active,
.step-block.is-active{
    border-color:rgba(82,180,203,.38) !important;
    background:#fff !important;
    box-shadow:0 10px 24px rgba(82,180,203,.08);
}

.steps-item.is-done{
    border-color:rgba(21,135,101,.24) !important;
    background:#f2fbf7 !important;
}

.steps-item__badge{
    background:var(--brand-100) !important;
    color:var(--brand-700) !important;
}

.step-block{
    padding:14px !important;
    margin:12px 0 !important;
}

.step-block h4{
    color:var(--brand-700) !important;
    font-size:14px !important;
}

.appointment-customer-picker{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    padding:12px !important;
    align-items:start !important;
}

.appointment-customer-picker .search-select input,
.appointment-customer-picker input[type="text"]{
    min-height:54px;
    background:#fff;
    border-radius:16px;
    font-size:15px;
}

.appointment-customer-picker .btn{
    min-height:46px;
    min-width:154px;
    justify-self:start;
    white-space:nowrap;
}

.appointment-create .customer-picker-note{
    margin-top:8px;
    color:var(--ink-soft);
    font-size:12px;
}

.selected-customer-pill{
    display:none;
    margin-top:8px;
    padding:8px 10px;
    border-radius:12px;
    background:var(--brand-100);
    color:var(--brand-700);
    font-size:12px;
    font-weight:800;
}

.selected-customer-pill.is-visible{display:block}

.summary-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.summary-item{
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px;
}

.inline-delete-form{
    display:inline-flex;
    margin:0;
}

.table-wrap,
.catalog-table-wrap,
.service-table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

@media (max-width:1180px){
    .app-headerbar__search{max-width:360px}
    .appointment-create{grid-template-columns:1fr !important}
    .appointment-create__side{position:static}
}

@media (max-width:900px){
    body.has-app-topbar{
        padding-inline:0;
        padding-top:72px;
    }

    body.has-app-topbar .container{
        padding:14px 12px 28px;
    }

    .app-topbar{
        position:fixed;
        inset-block-start:0;
        inset-inline:0;
        width:100%;
        min-height:64px;
        height:64px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:8px 12px;
        border:0;
        border-radius:0 0 22px 22px;
        background:linear-gradient(135deg,#52b4cb,#0b6174);
        color:#fff;
        box-shadow:0 14px 36px rgba(7,69,85,.2);
        z-index:1400;
    }

    .app-topbar__brand{
        color:#fff;
        min-width:0;
        max-width:calc(100% - 58px);
    }

    .app-topbar__brand img{
        width:34px;
        height:34px;
        border-radius:12px;
        background:#fff;
        padding:3px;
    }

    .app-topbar__brand > span:not(.app-topbar__version){
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        color:#fff;
    }

    .app-topbar__version{display:none}

    .app-topbar__toggle{
        display:inline-flex;
        flex:0 0 auto;
        border-color:rgba(255,255,255,.28);
        background:rgba(255,255,255,.12);
    }

    .app-topbar__toggle span{background:#fff}

    .app-topbar__menu{
        position:fixed;
        inset-block:0;
        inset-inline-end:0;
        inset-inline-start:auto;
        width:min(72vw,340px);
        max-width:min(72vw,340px);
        height:100vh;
        max-height:none;
        display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        gap:7px;
        padding:14px 12px 22px;
        overflow:auto;
        border:0;
        border-radius:0;
        background:#fff;
        color:var(--ink);
        box-shadow:-24px 0 60px rgba(18,49,59,.24);
        transform:translateX(110%);
        transition:transform .22s ease;
        z-index:1600;
    }

    body.menu-open .app-topbar__menu{
        display:flex;
        transform:translateX(0);
    }

    body.menu-open::after{
        content:"";
        position:fixed;
        inset:0;
        background:rgba(7,39,48,.28);
        backdrop-filter:none;
        z-index:1500;
    }

    .app-topbar__menu-head,
    .app-topbar__menu-search{
        display:flex;
        position:sticky;
        background:#fff;
        z-index:2;
    }

    .app-topbar__menu-head{
        top:0;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        padding-bottom:8px;
    }

    .app-topbar__menu-title{
        color:var(--ink);
        font-weight:800;
    }

    .app-topbar__menu-close{
        width:40px;
        height:40px;
        min-height:40px;
        border-radius:14px;
        border:1px solid var(--line);
        background:var(--brand-100) !important;
        color:var(--brand-700) !important;
        font-size:22px;
        line-height:1;
    }

    .app-topbar__menu-search{
        top:48px;
        padding-bottom:8px;
    }

    .app-topbar__menu-search input{
        background:var(--surface-soft);
        border-color:var(--line);
    }

    .app-topbar__menu > a,
    .app-topbar__menu .menu-item > a,
    .app-topbar__menu .menu-item > button,
    .app-topbar__menu .notif-button{
        color:var(--ink);
        background:var(--surface-soft);
        border-color:var(--line);
    }

    .app-topbar__menu > a:hover,
    .app-topbar__menu .menu-item > a:hover,
    .app-topbar__menu .menu-item > button:hover,
    .app-topbar__menu .notif-button:hover,
    .app-topbar__menu > a.is-active,
    .app-topbar__menu .menu-item > a.is-active,
    .app-topbar__menu .menu-item.has-active-child > a,
    .app-topbar__menu .menu-item.is-open > a{
        background:var(--brand-100);
        color:var(--brand-700);
        border-color:rgba(82,180,203,.32);
    }

    .menu-caret{
        background:#dff3f7;
    }

    .menu-caret::before,
    .app-topbar__menu .menu-item > a.is-active .menu-caret::before,
    .app-topbar__menu .menu-item.has-active-child > a .menu-caret::before{
        color:var(--brand-700);
    }

    .app-topbar__menu .submenu,
    .app-topbar__menu .notif-menu{
        border-color:var(--line);
        background:#eef9fb;
    }

    .app-topbar__menu .submenu a,
    .app-topbar__menu .submenu button,
    .app-topbar__menu .notif-item{
        color:var(--ink);
    }

    .app-topbar__menu .submenu a:hover,
    .app-topbar__menu .submenu a.is-active,
    .app-topbar__menu .notif-item:hover{
        color:var(--brand-700);
        background:#fff;
    }

    .app-topbar__menu .submenu-title,
    .app-topbar__menu .notif-title,
    .app-topbar__menu .muted,
    .app-topbar__menu .meta{
        color:var(--ink-soft) !important;
        border-bottom-color:var(--line);
    }

    .settings-submenu__link small{
        color:var(--ink-soft);
        opacity:1;
    }

    .app-headerbar{
        display:none !important;
    }

    .dashboard-grid,
    .ce-panel-grid,
    .settings-studio-layout,
    .settings-fields-grid,
    .appointment-create,
    .summary-grid,
    .steps-list{
        grid-template-columns:1fr !important;
    }

    .settings-studio-aside,
    .appointment-create__side{
        position:static;
    }

    .appointment-create__main,
    .appointment-create__side{
        grid-column:1 !important;
    }

    .settings-save-bar,
    .settings-page-head,
    .appointment-create-head,
    .ce-list__item{
        flex-direction:column;
        align-items:stretch;
    }

    .appointment-customer-picker{
        grid-template-columns:1fr !important;
    }

    .appointment-customer-picker .btn,
    .appointment-create-head__actions .btn{
        width:100%;
    }
}

/* Organizational processes module. */
.process-shell{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.process-page-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:22px;
    background:
        radial-gradient(circle at 8% 20%, rgba(82,180,203,.16), transparent 18rem),
        linear-gradient(135deg,#ffffff 0%,#f4fbfd 100%);
    border:1px solid rgba(82,180,203,.18);
}

.process-page-head h1{
    margin:6px 0 8px;
    color:#10333d;
    line-height:1.45;
}

.process-kpi-grid{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.process-kpi{
    flex:1 1 180px;
    min-height:104px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border:1px solid rgba(82,180,203,.16);
    background:#fff;
}

.process-kpi span{
    color:#587380;
    font-size:13px;
}

.process-kpi strong{
    color:#0b6174;
    font-size:24px;
    line-height:1.2;
}

.process-layout,
.process-form-layout{
    display:flex;
    align-items:flex-start;
    gap:16px;
}

.process-form-main,
.process-detail-stack,
.process-table-card{
    flex:1 1 auto;
    min-width:0;
}

.process-form-main,
.process-detail-stack{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.process-form-side,
.process-side-stack{
    flex:0 0 300px;
    display:flex;
    flex-direction:column;
    gap:14px;
    position:sticky;
    top:92px;
}

.process-panel{
    border:1px solid rgba(82,180,203,.16);
    box-shadow:0 16px 34px rgba(18,49,59,.06);
}

.process-panel h2,
.process-panel h3{
    color:#10333d;
}

.process-repeat-list,
.process-mini-list,
.process-guide-list,
.process-attachment-list,
.process-timeline{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.process-repeat-row{
    padding:14px;
    border:1px solid #d9edf3;
    border-radius:18px;
    background:#fbfdfe;
}

.process-repeat-row__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.process-check-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    border:1px solid #d9edf3;
    border-radius:16px;
    background:#fbfdfe;
}

.process-check-row > input{
    flex:1 1 auto;
    min-width:0;
}

.process-inline-check{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 10px;
    border-radius:999px;
    background:#eaf8fb;
    color:#0b6174;
    font-size:13px;
    font-weight:800;
}

.process-save-card{
    display:flex;
    flex-direction:column;
    gap:10px;
    background:linear-gradient(180deg,#ffffff 0%,#f4fbfd 100%);
}

.process-guide-list span{
    display:flex;
    align-items:center;
    gap:8px;
    color:#4f6d78;
    line-height:1.8;
}

.process-guide-list span::before{
    content:"";
    width:8px;
    height:8px;
    flex:0 0 8px;
    border-radius:999px;
    background:#52b4cb;
    box-shadow:0 0 0 4px rgba(82,180,203,.13);
}

.process-info-grid,
.process-text-grid{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}

.process-info-grid .summary-item{
    flex:1 1 190px;
}

.process-text-grid article{
    flex:1 1 260px;
    min-width:0;
    padding:14px;
    border:1px solid #d9edf3;
    border-radius:18px;
    background:#fbfdfe;
}

.process-text-grid h3{
    margin:0 0 8px;
    font-size:15px;
}

.process-text-grid p,
.process-long-text,
.process-step-card p{
    white-space:pre-line;
    color:#365764;
    line-height:1.95;
}

.process-step-card{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px;
    border:1px solid #d9edf3;
    border-radius:18px;
    background:#fbfdfe;
}

.process-step-card > span{
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#52b4cb;
    color:#fff;
    font-weight:900;
    flex:0 0 auto;
}

.process-step-card h3{
    margin:0 0 6px;
}

.process-check-display strong{
    color:#10333d;
}

.process-check-display span{
    color:#0b6174;
    font-weight:800;
}

.process-attachment-list{
    margin-top:12px;
}

.process-attachment-list a,
.process-mini-list a.summary-item{
    text-decoration:none;
    color:inherit;
}

.process-attachment-list a:hover,
.process-mini-list a.summary-item:hover{
    border-color:#52b4cb;
    background:#f4fbfd;
}

.text-danger{
    color:#b42318 !important;
    font-weight:900;
}

@media (max-width:1180px){
    .process-layout,
    .process-form-layout{
        flex-direction:column;
    }

    .process-form-side,
    .process-side-stack{
        position:static;
        flex-basis:auto;
        width:100%;
    }
}

@media (max-width:720px){
    .process-page-head{
        flex-direction:column;
        align-items:flex-start;
        padding:16px;
    }

    .process-page-head .inline-actions,
    .process-page-head .btn{
        width:100%;
    }

    .process-kpi-grid{
        gap:10px;
    }

    .process-kpi{
        flex-basis:calc(50% - 5px);
        min-height:92px;
        padding:14px;
    }

    .process-kpi strong{
        font-size:20px;
    }

    .process-check-row{
        flex-direction:column;
        align-items:stretch;
    }

    .process-inline-check{
        justify-content:center;
    }

    .process-repeat-row{
        padding:12px;
        border-radius:14px;
    }

    .process-step-card{
        border-radius:14px;
    }
}

@media (max-width:640px){
    .ce-metric-strip,
    .dashboard-summary-grid,
    .dashboard-quick-actions,
    .ce-kpi-grid,
    .settings-kpi-row{
        grid-template-columns:1fr;
    }

    .card,
    .ce-panel,
    .settings-field-card{
        padding:13px;
    }
}

/* Dashboard pages should start as an operational summary, not a large marketing hero. */
.manager-dashboard-page .dashboard-hero,
.role-dashboard-page .role-hero,
body.has-dashboard-metric-strip .dashboard-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);
    gap:16px;
    align-items:stretch;
    padding:18px;
}

.manager-dashboard-page .dashboard-hero h1,
.role-dashboard-page .role-hero h1,
body.has-dashboard-metric-strip .dashboard-hero h1{
    margin:0 0 8px;
    color:var(--ink);
    font-size:24px;
    line-height:1.7;
    letter-spacing:-.02em;
}

.manager-dashboard-page .dashboard-hero__lead,
.role-dashboard-page .role-hero .muted,
body.has-dashboard-metric-strip .dashboard-hero__lead{
    max-width:760px;
    color:var(--ink-soft) !important;
}

.manager-dashboard-page .ce-hero__copy,
.role-dashboard-page .ce-hero__copy,
body.has-dashboard-metric-strip .ce-hero__copy{
    display:grid;
    align-content:start;
    gap:12px;
}

.manager-dashboard-page .ce-hero__side,
.role-dashboard-page .ce-hero__side,
body.has-dashboard-metric-strip .ce-hero__side{
    display:grid;
    gap:12px;
}

.dashboard-signal-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.dashboard-signal,
.ce-kpi{
    padding:12px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--surface-soft);
}

.dashboard-signal__label,
.dashboard-signal__hint{
    color:var(--ink-soft);
    font-size:12px;
}

.dashboard-signal__value{
    display:block;
    color:var(--brand-700);
    font-size:24px;
    font-weight:850;
}

@media (max-width:900px){
    .manager-dashboard-page .dashboard-hero,
    .role-dashboard-page .role-hero,
    body.has-dashboard-metric-strip .dashboard-hero,
    .dashboard-signal-grid{
        grid-template-columns:1fr;
    }

    .manager-dashboard-page .dashboard-hero h1,
    .role-dashboard-page .role-hero h1,
    body.has-dashboard-metric-strip .dashboard-hero h1{
        font-size:20px;
    }
}

/* Clinica shell v3: explicit RTL drawer placement + shared responsive contract. */
@media (min-width:901px){
    body.has-app-topbar{
        padding-inline-start:0 !important;
        padding-inline-end:0 !important;
        padding-right:var(--shell-sidebar) !important;
        padding-left:0 !important;
    }

    .app-topbar{
        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:auto !important;
        inset-inline-start:auto !important;
        inset-inline-end:auto !important;
        width:var(--shell-sidebar) !important;
        border-radius:26px 0 0 26px !important;
        box-shadow:-18px 0 45px rgba(7,69,85,.18) !important;
    }

    .app-topbar__menu{
        width:100%;
        min-width:0;
        overflow-x:hidden;
    }

    .app-topbar__menu .menu-item--has-submenu > a,
    .app-topbar__menu .menu-item--has-submenu > button{
        position:relative;
    }

    .app-topbar__menu .menu-item.is-open > .submenu,
    .app-topbar__menu .menu-item.has-active-child > .submenu{
        margin:5px 8px 8px 0;
        border-right:2px solid rgba(255,255,255,.2);
        border-left:0;
        border-radius:14px 6px 14px 14px;
    }
}

.app-topbar__menu > a,
.app-topbar__menu .menu-item > a,
.app-topbar__menu .menu-item > button,
.app-topbar__menu .notif-button{
    min-width:0;
    overflow:hidden;
}

.app-topbar__menu > a > span,
.app-topbar__menu .menu-item > a > span,
.app-topbar__menu .menu-item > button > span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.app-topbar__menu .menu-item--has-submenu > a,
.app-topbar__menu .menu-item--has-submenu > button{
    padding-left:9px;
}

.menu-caret{
    flex:0 0 22px;
    transition:transform .18s ease, background .18s ease, color .18s ease;
}

.app-topbar__menu .menu-link--standalone{
    border-style:solid;
}

.app-topbar__menu .submenu,
.app-topbar__menu .notif-menu{
    transform:none !important;
}

.app-topbar__menu .submenu a,
.app-topbar__menu .submenu button,
.app-topbar__menu .notif-item{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}

body.has-app-topbar .content,
body.has-app-topbar main,
body.has-app-topbar .container,
.card,
.ce-panel,
.settings-studio-panel,
.settings-group-card,
.appointment-create,
.appointment-create__main,
.appointment-create__side{
    min-width:0;
    max-width:100%;
}

.form-grid,
.row-grid,
.filter-grid,
.summary-grid,
.dashboard-grid,
.dashboard-summary-grid,
.dashboard-quick-actions,
.dashboard-signal-grid,
.ce-panel-grid,
.ce-kpi-grid,
.ce-metric-strip,
.settings-kpi-row,
.settings-studio-layout,
.settings-fields-grid,
.settings-module-card-grid,
.settings-related-grid,
.settings-grid,
.settings-submenu,
.appointment-summary__grid,
.appointment-summary__layout,
.appointment-page,
.appointment-create,
.appointment-create .form-grid,
.customers-kpi-grid,
.customer-tools-grid,
.finance-filter__grid,
.finance-grid,
.finance-grid-2,
.finance-grid-3,
.finance-grid-4,
.hr-filter__grid,
.hr-grid,
.hr-grid-2,
.hr-grid-3,
.hr-grid-4,
.inventory-grid,
.inventory-grid-2,
.inventory-grid-3,
.inventory-grid-4,
.service-grid,
.service-list-grid,
.catalog-grid,
.board-grid,
.metric-grid,
.stats,
.panel-grid{
    min-width:0;
}

.table-wrap,
.catalog-table-wrap,
.service-table-wrap,
.ce-table-wrap,
.data-table-wrap,
.list-table-wrap,
.responsive-table{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.table-wrap table,
.catalog-table-wrap table,
.service-table-wrap table,
.ce-table-wrap table,
.data-table-wrap table,
.list-table-wrap table,
.responsive-table table{
    min-width:720px;
}

@media (max-width:1180px){
    .dashboard-grid,
    .ce-panel-grid,
    .settings-studio-layout,
    .appointment-create,
    .appointment-summary__layout{
        grid-template-columns:1fr !important;
    }

    .finance-grid-4,
    .hr-grid-4,
    .inventory-grid-4,
    .metric-grid,
    .stats,
    .dashboard-signal-grid,
    .ce-metric-strip,
    .settings-kpi-row{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .settings-studio-aside,
    .appointment-create__side{
        position:static !important;
    }
}

@media (max-width:900px){
    body.has-app-topbar,
    body.has-app-topbar{
        padding-right:0 !important;
        padding-left:0 !important;
        padding-inline:0 !important;
        padding-top:72px !important;
        overflow-x:hidden;
    }

    .app-topbar{
        top:0 !important;
        right:0 !important;
        left:0 !important;
        bottom:auto !important;
        inset-inline-start:auto !important;
        inset-inline-end:auto !important;
        width:100% !important;
        border-radius:0 0 22px 22px !important;
    }

    .app-topbar__menu{
        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:auto !important;
        inset-inline-start:auto !important;
        inset-inline-end:auto !important;
        width:min(88vw,380px) !important;
        max-width:min(88vw,380px) !important;
        height:100dvh !important;
        max-height:100dvh !important;
        border-radius:24px 0 0 24px !important;
        transform:translate3d(105%,0,0) !important;
        will-change:transform;
    }

    body.menu-open .app-topbar__menu{
        transform:translate3d(0,0,0) !important;
        filter:none !important;
    }

    body.menu-open::after{
        background:rgba(7,39,48,.34) !important;
        backdrop-filter:none !important;
    }

    .app-topbar__menu .submenu,
    .app-topbar__menu .notif-menu{
        margin:6px 8px 8px 0 !important;
        border-right:2px solid rgba(82,180,203,.28) !important;
        border-left:0 !important;
        border-radius:14px 6px 14px 14px !important;
    }

    .app-topbar__menu .menu-item:hover > .submenu,
    .app-topbar__menu .menu-item:focus-within > .submenu,
    .app-topbar__menu .menu-item:hover > .notif-menu,
    .app-topbar__menu .menu-item:focus-within > .notif-menu{
        display:none !important;
    }

    .app-topbar__menu .menu-item.is-open > .submenu,
    .app-topbar__menu .menu-item.is-open > .notif-menu,
    .app-topbar__menu .menu-item.has-active-child > .submenu{
        display:flex !important;
    }

    .form-grid,
    .row-grid,
    .filter-grid,
    .summary-grid,
    .dashboard-grid,
    .dashboard-summary-grid,
    .dashboard-quick-actions,
    .dashboard-signal-grid,
    .ce-panel-grid,
    .ce-kpi-grid,
    .ce-metric-strip,
    .settings-kpi-row,
    .settings-studio-layout,
    .settings-fields-grid,
    .settings-module-card-grid,
    .settings-related-grid,
    .settings-grid,
    .settings-submenu,
    .appointment-summary__grid,
    .appointment-summary__layout,
    .appointment-page,
    .appointment-create,
    .appointment-create .form-grid,
    .customers-kpi-grid,
    .customer-tools-grid,
    .finance-filter__grid,
    .finance-grid,
    .finance-grid-2,
    .finance-grid-3,
    .finance-grid-4,
    .hr-filter__grid,
    .hr-grid,
    .hr-grid-2,
    .hr-grid-3,
    .hr-grid-4,
    .inventory-grid,
    .inventory-grid-2,
    .inventory-grid-3,
    .inventory-grid-4,
    .service-grid,
    .service-list-grid,
    .catalog-grid,
    .board-grid,
    .metric-grid,
    .stats,
    .panel-grid{
        grid-template-columns:1fr !important;
    }

    .inline-actions,
    .form-actions,
    .page-actions,
    .card-actions,
    .settings-save-bar,
    .settings-page-head,
    .appointment-create-head,
    .ce-list__item{
        flex-wrap:wrap;
        align-items:stretch;
    }

    .appointment-create__main,
    .appointment-create__side{
        grid-column:1 !important;
    }
}

@media (max-width:640px){
    body.has-app-topbar .container,
    body.has-app-topbar .container{
        padding:12px 10px 24px !important;
    }

    .app-topbar__menu{
        width:min(92vw,360px) !important;
        max-width:min(92vw,360px) !important;
        padding:12px 10px 18px !important;
    }

    .app-topbar__brand > span:not(.app-topbar__version){
        max-width:190px;
    }

    .card,
    .ce-panel,
    .settings-field-card,
    .settings-studio-panel,
    .settings-group-card{
        border-radius:16px !important;
    }

    .inline-actions > *,
    .form-actions > *,
    .page-actions > *,
    .card-actions > *,
    .appointment-create-head__actions > *{
        width:100%;
    }

    .table-wrap table,
    .catalog-table-wrap table,
    .service-table-wrap table,
    .ce-table-wrap table,
    .data-table-wrap table,
    .list-table-wrap table,
    .responsive-table table{
        min-width:640px;
    }
}

/* Clinica shell v3.1: fix RTL drawer anchoring after logical/physical inset conflicts. */
@media (min-width:901px){
    body.has-app-topbar,
    body.has-app-topbar{
        padding:0 var(--shell-sidebar) 0 0 !important;
        overflow-x:hidden;
    }

    .app-topbar{
        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:auto !important;
        inset-block-start:0 !important;
        inset-block-end:0 !important;
        inset-inline-start:0 !important;
        inset-inline-end:auto !important;
        width:var(--shell-sidebar) !important;
        max-width:var(--shell-sidebar) !important;
        border-radius:0 !important;
        box-shadow:-10px 0 28px rgba(7,69,85,.13) !important;
    }

    .app-headerbar{
        margin-right:16px !important;
        margin-left:16px !important;
    }
}

@media (max-width:900px){
    body.menu-open::after{
        display:none !important;
        content:none !important;
        background:transparent !important;
        backdrop-filter:none !important;
    }

    .app-topbar__menu{
        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:auto !important;
        inset-block-start:0 !important;
        inset-block-end:0 !important;
        inset-inline-start:0 !important;
        inset-inline-end:auto !important;
        width:70vw !important;
        max-width:70vw !important;
        min-width:260px;
        height:100dvh !important;
        max-height:100dvh !important;
        padding:12px 10px 18px !important;
        border-radius:0 !important;
        border-left:1px solid rgba(82,180,203,.18);
        background:#fff !important;
        box-shadow:-8px 0 24px rgba(18,49,59,.14) !important;
        transform:translate3d(100%,0,0) !important;
    }

    body.menu-open .app-topbar__menu{
        transform:translate3d(0,0,0) !important;
    }

    .app-topbar__menu-head,
    .app-topbar__menu-search{
        background:#fff !important;
    }

    .app-topbar__menu > a,
    .app-topbar__menu .menu-item > a,
    .app-topbar__menu .menu-item > button,
    .app-topbar__menu .notif-button{
        min-height:40px !important;
        border-radius:10px !important;
        background:#f7fcfd !important;
        box-shadow:none !important;
    }

    .app-topbar__menu .submenu,
    .app-topbar__menu .notif-menu{
        margin:5px 6px 7px 0 !important;
        padding:6px !important;
        border-radius:0 !important;
        border-right:2px solid rgba(82,180,203,.24) !important;
        background:#f4fafb !important;
    }
}

@media (max-width:640px){
    .app-topbar__menu{
        width:70vw !important;
        max-width:70vw !important;
        min-width:248px;
    }
}

.inventory-dashboard{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.inventory-hero{
    display:flex;
    justify-content:space-between;
    align-items:stretch;
    gap:18px;
    overflow:hidden;
    border:1px solid rgba(82,180,203,.18);
    background:
        radial-gradient(circle at top right, rgba(82,180,203,.18), transparent 34%),
        linear-gradient(135deg,#ffffff 0%,#f5fbfd 50%,#eef8fb 100%);
}

.inventory-hero__copy{
    display:flex;
    flex-direction:column;
    gap:8px;
    max-width:760px;
}

.inventory-hero__copy h1{
    margin:0;
    color:#10333d;
}

.inventory-hero__copy p{
    margin:0;
    color:var(--muted);
    line-height:1.9;
}

.inventory-eyebrow{
    display:inline-flex;
    width:max-content;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(82,180,203,.12);
    color:#0b6174;
    font-size:12px;
    font-weight:800;
}

.inventory-hero__actions,
.inventory-inline-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}

.inventory-kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.inventory-kpi{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
    padding:16px;
    border:1px solid #dceaf0;
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 30px rgba(18,49,59,.05);
}

.inventory-kpi span{
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

.inventory-kpi strong{
    color:#0e3a46;
    font-size:25px;
    line-height:1.2;
}

.inventory-kpi small{
    color:var(--muted);
    font-size:12px;
}

.inventory-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(310px,380px);
    gap:16px;
    align-items:start;
}

.inventory-main,
.inventory-side{
    display:flex;
    flex-direction:column;
    gap:16px;
    min-width:0;
}

.inventory-panel{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.inventory-dashboard .empty-state{
    padding:16px;
    border:1px dashed #cfe0e7;
    border-radius:14px;
    background:#fbfdfe;
    color:var(--muted);
    text-align:center;
    font-size:13px;
}

.inventory-panel__head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    flex-wrap:wrap;
}

.inventory-panel__head h2{
    margin:0;
    font-size:19px;
    color:#10333d;
}

.inventory-panel__head p{
    margin:5px 0 0;
}

.inventory-workflow-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.inventory-action-card{
    display:flex;
    min-height:98px;
    flex-direction:column;
    justify-content:space-between;
    gap:10px;
    padding:14px;
    border:1px solid #dceaf0;
    border-radius:16px;
    background:linear-gradient(180deg,#fff 0%,#f8fcfd 100%);
    color:inherit;
    text-decoration:none;
    transition:.18s ease;
}

.inventory-action-card:hover{
    transform:translateY(-2px);
    border-color:rgba(82,180,203,.5);
    box-shadow:0 14px 32px rgba(18,49,59,.08);
}

.inventory-action-card strong{
    color:#0e3a46;
}

.inventory-action-card span{
    color:var(--muted);
    font-size:12px;
    line-height:1.8;
}

.inventory-panel-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    align-items:start;
}

.inventory-list,
.inventory-alert-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.inventory-list-item,
.inventory-alert{
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
    padding:12px;
    border:1px solid #e3eef3;
    border-radius:14px;
    background:#fbfdfe;
    color:inherit;
    text-decoration:none;
}

.inventory-list-item strong,
.inventory-alert strong{
    color:#10333d;
}

.inventory-list-item span,
.inventory-alert span{
    color:#0b6174;
    font-weight:800;
}

.inventory-list-item small{
    color:var(--muted);
    line-height:1.7;
}

.inventory-list-item--link:hover,
.inventory-alert:hover{
    border-color:rgba(82,180,203,.48);
    background:#f5fbfd;
}

.inventory-alert{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
}

.inventory-alert--danger{
    background:#fff7f7;
    border-color:#ffd4d4;
}

.inventory-alert--warning{
    background:#fffaf0;
    border-color:#ffe2a8;
}

.inventory-table-card .table-wrap,
.inventory-side-table{
    border-radius:14px;
}

.inventory-table-card table,
.inventory-side-table table{
    width:100%;
    margin:0;
}

@media (max-width:1180px){
    .inventory-kpi-grid,
    .inventory-workflow-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .inventory-layout{
        grid-template-columns:1fr;
    }
}

@media (max-width:720px){
    .inventory-hero,
    .inventory-panel__head{
        flex-direction:column;
    }

    .inventory-hero__actions,
    .inventory-inline-actions{
        display:grid;
        grid-template-columns:1fr;
        width:100%;
        justify-content:stretch;
    }

    .inventory-hero__actions .btn,
    .inventory-inline-actions .btn{
        width:100%;
        justify-content:center;
    }

    .inventory-kpi-grid,
    .inventory-workflow-grid,
    .inventory-panel-grid{
        grid-template-columns:1fr;
    }

    .inventory-kpi strong{
        font-size:22px;
    }

    .inventory-alert{
        align-items:flex-start;
        flex-direction:column;
    }
}

/* Clinica shell v3.2: mobile drawer and settings card polish. */
@media (min-width:901px){
    body.has-app-topbar,
    body.has-app-topbar{
        padding-right:var(--shell-sidebar) !important;
        padding-left:0 !important;
    }

    .app-topbar{
        right:0 !important;
        left:auto !important;
        width:var(--shell-sidebar) !important;
        max-width:var(--shell-sidebar) !important;
        border-radius:0 !important;
    }

    .app-topbar__menu{
        width:100% !important;
        max-width:100% !important;
        align-items:stretch !important;
    }
}

@media (max-width:900px){
    body.menu-open::after{
        display:none !important;
        content:none !important;
    }

    .app-topbar__menu{
        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:auto !important;
        width:70vw !important;
        max-width:70vw !important;
        min-width:248px !important;
        height:100dvh !important;
        max-height:100dvh !important;
        padding:12px 10px 18px !important;
        border-radius:0 !important;
        border-left:1px solid rgba(255,255,255,.16) !important;
        background:linear-gradient(180deg,#52b4cb 0%,#177f94 58%,#075466 100%) !important;
        box-shadow:-12px 0 28px rgba(7,69,85,.18) !important;
        transform:translate3d(100%,0,0) !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        filter:none !important;
    }

    body.menu-open .app-topbar__menu{
        transform:translate3d(0,0,0) !important;
        filter:none !important;
    }

    .app-topbar__menu-head,
    .app-topbar__menu-search{
        background:transparent !important;
        color:#fff !important;
    }

    .app-topbar__menu-title{
        color:#fff !important;
    }

    .app-topbar__menu-close{
        background:rgba(255,255,255,.14) !important;
        color:#fff !important;
        border-color:rgba(255,255,255,.18) !important;
    }

    .app-topbar__menu-search input{
        background:rgba(255,255,255,.96) !important;
        color:#10333d !important;
        border-color:rgba(255,255,255,.32) !important;
    }

    .app-topbar__menu > a,
    .app-topbar__menu .menu-item > a,
    .app-topbar__menu .menu-item > button,
    .app-topbar__menu .notif-button{
        min-height:42px !important;
        width:100% !important;
        justify-content:space-between !important;
        border-radius:12px !important;
        background:transparent !important;
        color:rgba(255,255,255,.94) !important;
        border:1px solid transparent !important;
        box-shadow:none !important;
        text-align:right !important;
    }

    .app-topbar__menu > a:hover,
    .app-topbar__menu .menu-item > a:hover,
    .app-topbar__menu .menu-item > button:hover,
    .app-topbar__menu .notif-button:hover,
    .app-topbar__menu > a.is-active,
    .app-topbar__menu .menu-item > a.is-active,
    .app-topbar__menu .menu-item.has-active-child > a,
    .app-topbar__menu .menu-item.is-open > a{
        background:#fff !important;
        color:#0b6174 !important;
        border-color:rgba(255,255,255,.22) !important;
    }

    .app-topbar__menu .menu-caret{
        width:24px !important;
        height:24px !important;
        border-radius:999px !important;
        background:rgba(255,255,255,.16) !important;
        color:transparent !important;
    }

    .app-topbar__menu a.is-active .menu-caret,
    .app-topbar__menu .menu-item.is-open > a .menu-caret,
    .app-topbar__menu .menu-item.has-active-child > a .menu-caret{
        background:rgba(82,180,203,.16) !important;
    }

    .app-topbar__menu .menu-caret::before{
        color:#fff !important;
    }

    .app-topbar__menu a.is-active .menu-caret::before,
    .app-topbar__menu .menu-item.is-open > a .menu-caret::before,
    .app-topbar__menu .menu-item.has-active-child > a .menu-caret::before{
        color:#0b6174 !important;
    }

    .app-topbar__menu .submenu,
    .app-topbar__menu .notif-menu{
        position:static !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        margin:5px 0 8px !important;
        padding:8px !important;
        border-radius:12px !important;
        border:1px solid rgba(255,255,255,.14) !important;
        border-right:1px solid rgba(255,255,255,.14) !important;
        background:rgba(6,76,92,.34) !important;
        box-shadow:none !important;
    }

    .app-topbar__menu .submenu a,
    .app-topbar__menu .submenu button,
    .app-topbar__menu .notif-item{
        min-height:38px !important;
        padding:8px 10px !important;
        border-radius:10px !important;
        background:rgba(255,255,255,.06) !important;
        color:#fff !important;
    }

    .app-topbar__menu .submenu a:hover,
    .app-topbar__menu .submenu a.is-active,
    .app-topbar__menu .notif-item:hover{
        background:#fff !important;
        color:#0b6174 !important;
    }

    .app-topbar__menu .submenu-title,
    .app-topbar__menu .notif-title,
    .app-topbar__menu .muted,
    .app-topbar__menu .meta{
        color:rgba(255,255,255,.72) !important;
    }
}

.settings-field-card__meta{
    align-items:flex-start !important;
    flex-wrap:wrap !important;
}

.settings-field-card__meta > div,
.settings-field-card__control,
.settings-field-card__foot{
    min-width:0;
}

.settings-field-card code{
    display:block;
    max-width:100%;
    overflow-wrap:anywhere;
    white-space:normal;
}

.settings-field-card__control .settings-switch-inline{
    width:max-content;
    max-width:100%;
    justify-content:flex-start;
    gap:9px;
    padding:6px 8px;
    border:1px solid #d8eef3;
    border-radius:999px;
    background:#f3fbfd;
}

.settings-field-card__control .settings-switch-inline b{
    min-width:54px;
    color:#10333d;
    font-size:13px;
    text-align:right;
}

@media (max-width:520px){
    .settings-field-card__meta,
    .settings-field-card__foot{
        flex-direction:column;
        align-items:flex-start !important;
    }
}

/* Clinica shell v3.3: calmer mobile drawer and predictable accordion caret. */
.app-topbar__menu .menu-caret,
.app-headerbar .menu-caret{
    transform:none !important;
}

.app-topbar__menu .menu-caret::before,
.app-headerbar .menu-caret::before{
    transition:transform .18s ease, color .18s ease;
    transform:rotate(135deg) translateY(-1px) !important;
}

.app-topbar__menu .menu-item.is-open > a .menu-caret::before,
.app-topbar__menu .menu-item.is-open > button .menu-caret::before,
.app-headerbar .menu-item.is-open > a .menu-caret::before,
.app-headerbar .menu-item.is-open > button .menu-caret::before{
    transform:rotate(45deg) translateY(-2px) !important;
}

@media (max-width:900px){
    .app-topbar__menu{
        background:
            radial-gradient(circle at 100% 0%, rgba(82,180,203,.26), transparent 13rem),
            linear-gradient(180deg,#fbfdfe 0%,#eff8fb 100%) !important;
        border-left:1px solid rgba(82,180,203,.22) !important;
        box-shadow:-16px 0 34px rgba(18,49,59,.16) !important;
    }

    .app-topbar__menu::before{
        content:"";
        position:sticky;
        top:-12px;
        display:block;
        height:4px;
        margin:-12px -10px 8px;
        background:linear-gradient(90deg,#075466,#52b4cb);
        z-index:1;
    }

    .app-topbar__menu-head{
        margin:0 0 8px !important;
        padding:10px 10px !important;
        border:1px solid rgba(82,180,203,.18) !important;
        border-radius:14px !important;
        background:#fff !important;
        color:#10333d !important;
        box-shadow:0 10px 26px rgba(18,49,59,.06) !important;
    }

    .app-topbar__menu-title{
        color:#10333d !important;
        font-weight:850 !important;
    }

    .app-topbar__menu-close{
        background:#eaf8fb !important;
        color:#0b6174 !important;
        border-color:rgba(82,180,203,.2) !important;
    }

    .app-topbar__menu-search{
        margin:0 0 8px !important;
        background:transparent !important;
    }

    .app-topbar__menu-search input{
        min-height:42px !important;
        background:#fff !important;
        color:#10333d !important;
        border-color:rgba(82,180,203,.24) !important;
        box-shadow:0 8px 22px rgba(18,49,59,.05) !important;
    }

    .app-topbar__menu > a,
    .app-topbar__menu .menu-item > a,
    .app-topbar__menu .menu-item > button,
    .app-topbar__menu .notif-button{
        min-height:44px !important;
        margin:1px 0 !important;
        border-radius:13px !important;
        background:rgba(255,255,255,.66) !important;
        color:#10333d !important;
        border-color:rgba(82,180,203,.12) !important;
    }

    .app-topbar__menu > a:hover,
    .app-topbar__menu .menu-item > a:hover,
    .app-topbar__menu .menu-item > button:hover,
    .app-topbar__menu .notif-button:hover{
        background:#fff !important;
        color:#0b6174 !important;
        border-color:rgba(82,180,203,.28) !important;
    }

    .app-topbar__menu > a.is-active,
    .app-topbar__menu .menu-item > a.is-active,
    .app-topbar__menu .menu-item.has-active-child > a,
    .app-topbar__menu .menu-item.is-open > a,
    .app-topbar__menu .menu-item.is-open > button{
        background:linear-gradient(135deg,#52b4cb 0%,#218ba2 100%) !important;
        color:#fff !important;
        border-color:transparent !important;
        box-shadow:0 10px 22px rgba(82,180,203,.22) !important;
    }

    .app-topbar__menu .menu-caret{
        background:#eaf8fb !important;
    }

    .app-topbar__menu .menu-caret::before{
        color:#0b6174 !important;
    }

    .app-topbar__menu a.is-active .menu-caret,
    .app-topbar__menu .menu-item.is-open > a .menu-caret,
    .app-topbar__menu .menu-item.is-open > button .menu-caret,
    .app-topbar__menu .menu-item.has-active-child > a .menu-caret{
        background:rgba(255,255,255,.18) !important;
    }

    .app-topbar__menu a.is-active .menu-caret::before,
    .app-topbar__menu .menu-item.is-open > a .menu-caret::before,
    .app-topbar__menu .menu-item.is-open > button .menu-caret::before,
    .app-topbar__menu .menu-item.has-active-child > a .menu-caret::before{
        color:#fff !important;
    }

    .app-topbar__menu .submenu,
    .app-topbar__menu .notif-menu{
        margin:6px 0 10px !important;
        padding:7px !important;
        border:1px solid rgba(82,180,203,.18) !important;
        border-right:1px solid rgba(82,180,203,.18) !important;
        border-radius:14px !important;
        background:rgba(255,255,255,.68) !important;
    }

    .app-topbar__menu .submenu a,
    .app-topbar__menu .submenu button,
    .app-topbar__menu .notif-item{
        min-height:38px !important;
        border-radius:11px !important;
        background:transparent !important;
        color:#486473 !important;
    }

    .app-topbar__menu .submenu a:hover,
    .app-topbar__menu .submenu a.is-active,
    .app-topbar__menu .notif-item:hover{
        background:#eaf8fb !important;
        color:#0b6174 !important;
    }

    .app-topbar__menu .submenu-title,
    .app-topbar__menu .notif-title,
    .app-topbar__menu .muted,
    .app-topbar__menu .meta{
        color:#647987 !important;
    }
}

/* Clinica shell v3.4: safer sidebar scrolling for long accounting/inventory menus. */
.app-topbar__menu{
    scrollbar-gutter:stable;
    overscroll-behavior:contain;
}

.app-topbar__menu::-webkit-scrollbar,
.app-topbar__menu .submenu::-webkit-scrollbar{
    width:6px;
}

.app-topbar__menu::-webkit-scrollbar-thumb,
.app-topbar__menu .submenu::-webkit-scrollbar-thumb{
    background:rgba(82,180,203,.42);
    border-radius:999px;
}

@media (min-width:901px){
    .app-topbar__menu{
        max-height:calc(100vh - 92px) !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        padding-inline-end:6px !important;
    }

    .app-topbar__menu .submenu{
        max-height:none !important;
        overflow:visible !important;
    }
}

@media (max-width:900px){
    .app-topbar__menu{
        height:100dvh !important;
        max-height:100dvh !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        padding-bottom:82px !important;
    }

    .app-topbar__menu .submenu,
    .app-topbar__menu .notif-menu{
        max-height:46vh !important;
        overflow-y:auto !important;
    }
}

/* Clinica shell v3.5: slightly narrower navigation without changing layout logic. */
@media (min-width:901px){
    :root{
        --shell-sidebar:260px;
    }

    body.has-app-topbar,
    body.has-app-topbar{
        padding-right:var(--shell-sidebar) !important;
    }

    .app-topbar{
        width:var(--shell-sidebar) !important;
        max-width:var(--shell-sidebar) !important;
    }
}

@media (max-width:900px){
    .app-topbar__menu{
        width:min(70vw,340px) !important;
        max-width:min(70vw,340px) !important;
        min-width:232px !important;
    }
}

@media (max-width:640px){
    .app-topbar__menu{
        width:min(70vw,320px) !important;
        max-width:min(70vw,320px) !important;
        min-width:224px !important;
    }
}

/* Clinica shell v3.6: deterministic RTL mobile drawer position. */
@media (max-width:900px){
    .app-topbar__menu{
        inset-block:0 !important;
        inset-inline-start:auto !important;
        inset-inline-end:0 !important;
        right:0 !important;
        left:auto !important;
        border-radius:0 !important;
        transform:translateX(100%) !important;
        transition:transform .22s ease, box-shadow .22s ease !important;
    }

    body.menu-open .app-topbar__menu{
        display:flex !important;
        transform:translateX(0) !important;
    }
}

/* Mobile dialogs: keep every legacy popup usable inside narrow viewports. */
@media (max-width:720px){
    .popup,
    [role="dialog"],
    .modal,
    .modal-content,
    .dialog,
    .popup-content{
        width:calc(100vw - 24px) !important;
        max-width:calc(100vw - 24px) !important;
        max-height:calc(100dvh - 32px) !important;
        overflow:auto !important;
        -webkit-overflow-scrolling:touch;
    }

    .popup,
    [role="dialog"],
    .modal,
    .dialog{
        inset:auto 12px 16px 12px !important;
        top:auto !important;
        left:12px !important;
        right:12px !important;
        transform:none !important;
        border-radius:18px 18px 0 0 !important;
    }

    .overlay.show,
    .modal-backdrop,
    .popup-backdrop{
        background:rgba(15,23,42,.28) !important;
        backdrop-filter:none !important;
    }
}

.appointment-detail-card{
    border:1px solid rgba(82,180,203,.22);
    background:
        radial-gradient(circle at 100% 0, rgba(82,180,203,.12), transparent 34%),
        #fff;
}

.appointment-detail-card summary{
    font-weight:800;
    color:var(--text);
}

.appointment-detail-card .appointment-detail-grid{
    gap:10px;
}

.appointment-detail-card .appointment-detail-grid .row{
    border:1px solid rgba(82,180,203,.16);
    border-radius:14px;
    padding:10px 12px;
    background:rgba(255,255,255,.86);
    box-shadow:0 10px 24px rgba(15,23,42,.04);
}

.appointment-detail-card .appointment-detail-grid .label{
    color:#0f6f82;
    font-weight:700;
}

.appointment-quick-strip{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:14px;
}

.appointment-quick-chip{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
    border:1px solid rgba(82,180,203,.22);
    border-radius:16px;
    padding:10px 12px;
    background:linear-gradient(180deg, rgba(82,180,203,.06), rgba(255,255,255,.96));
}

.appointment-quick-chip span{
    color:var(--muted);
    font-size:11px;
    font-weight:760;
}

.appointment-quick-chip strong{
    color:var(--text);
    font-size:14px;
    font-weight:900;
    line-height:1.6;
    overflow-wrap:anywhere;
}

.appointment-page-alerts{
    display:grid;
    gap:8px;
    margin-top:12px;
}

.appointment-page__right{
    gap:10px;
}

.appointment-side-section{
    padding:0 !important;
    overflow:hidden;
    border-color:rgba(82,180,203,.18);
    border-radius:14px;
    box-shadow:0 8px 20px rgba(15,23,42,.035);
}

.appointment-side-section > summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:44px;
    padding:9px 12px;
    color:var(--text);
    cursor:pointer;
    list-style:none;
    user-select:none;
}

.appointment-side-section > summary::-webkit-details-marker{
    display:none;
}

.appointment-side-section > summary span:first-child{
    font-size:13px;
    font-weight:900;
}

.appointment-side-section > summary::after{
    content:"";
    flex:0 0 auto;
    width:8px;
    height:8px;
    border-right:2px solid #0f6f82;
    border-bottom:2px solid #0f6f82;
    transform:rotate(45deg);
    transition:transform .18s ease;
}

.appointment-side-section[open] > summary{
    border-bottom:1px solid rgba(82,180,203,.16);
    background:rgba(82,180,203,.045);
}

.appointment-side-section[open] > summary::after{
    transform:rotate(-135deg);
}

.appointment-side-section__badge{
    margin-inline-start:auto;
    border:1px solid rgba(82,180,203,.22);
    border-radius:999px;
    padding:3px 8px;
    background:#f5fbfd;
    color:#0f6f82;
    font-size:10.5px !important;
    font-weight:850 !important;
    line-height:1.4;
    white-space:nowrap;
}

.appointment-side-section__body{
    padding:14px 16px 16px;
}

.appointment-side-section__body > .table-wrap{
    margin-top:10px;
}

.appointment-upload-card .dropzone{
    border-color:rgba(82,180,203,.42);
    background:linear-gradient(135deg, rgba(82,180,203,.08), rgba(255,255,255,.9));
}

.appointment-upload-card .upload-item{
    border-radius:14px;
    box-shadow:0 10px 24px rgba(15,23,42,.04);
}

@media (max-width:720px){
    .appointment-page{
        display:flex !important;
        flex-direction:column !important;
        gap:10px !important;
        direction:rtl !important;
    }

    .appointment-page__left,
    .appointment-page__right{
        width:100% !important;
        grid-column:auto !important;
        position:static !important;
        top:auto !important;
    }

    .appointment-page__right{
        gap:8px !important;
    }

    .appointment-summary__header,
    .appointment-summary__primary,
    .appointment-summary__actions{
        align-items:stretch;
    }

    .appointment-summary__primary > *,
    .appointment-summary__actions > *,
    .appointment-summary__actions form,
    .appointment-summary__actions .btn{
        width:100%;
    }

    .appointment-detail-card .appointment-detail-grid .row{
        align-items:flex-start;
    }

    .appointment-quick-strip{
        grid-template-columns:1fr;
    }

    .appointment-side-section > summary{
        align-items:center;
        min-height:42px;
        padding:8px 10px;
    }

    .appointment-side-section > summary::after{
        margin-top:0;
    }

    .appointment-side-section__badge{
        margin-inline-start:auto;
    }
}

/* Work time controls */
.switch-toggle{
    --switch-bg:#dbeff4;
    --switch-on:#52b4cb;
    position:relative;
    display:inline-flex;
    width:46px;
    height:26px;
    cursor:pointer;
    vertical-align:middle;
}
.switch-toggle input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.switch-toggle span{
    position:absolute;
    inset:0;
    border-radius:999px;
    background:var(--switch-bg);
    border:1px solid rgba(82,180,203,.25);
    transition:background .18s ease, border-color .18s ease;
}
.switch-toggle span::after{
    content:"";
    position:absolute;
    top:3px;
    right:3px;
    width:18px;
    height:18px;
    border-radius:999px;
    background:#fff;
    box-shadow:0 4px 12px rgba(15,23,42,.16);
    transition:transform .18s ease;
}
.switch-toggle input:checked + span{
    background:var(--switch-on);
    border-color:var(--switch-on);
}
.switch-toggle input:checked + span::after{
    transform:translateX(-20px);
}

/* Persian datepicker mobile guard */
@media (max-width:640px){
    body .datepicker-container,
    body .datepicker-plot-area{
        box-sizing:border-box !important;
    }

    body .datepicker-container:not(.pwt-mobile-view){
        position:fixed !important;
        inset:auto 0 12px 0 !important;
        width:100vw !important;
        min-width:0 !important;
        max-width:100vw !important;
        transform:none !important;
        overflow:visible !important;
        z-index:100000 !important;
    }

    body .datepicker-container:not(.pwt-mobile-view) .datepicker-plot-area{
        width:calc(100vw - 20px) !important;
        min-width:0 !important;
        max-width:calc(100vw - 20px) !important;
        left:auto !important;
        right:auto !important;
        margin-inline:auto !important;
        border-radius:18px !important;
        overflow:hidden !important;
    }

    body .datepicker-container.pwt-mobile-view{
        position:fixed !important;
        inset:0 !important;
        width:100vw !important;
        height:100dvh !important;
        min-width:100vw !important;
        max-width:none !important;
        z-index:100000 !important;
        overflow:hidden !important;
    }

    body .datepicker-container.pwt-mobile-view .datepicker-plot-area{
        position:absolute !important;
        inset:0 !important;
        width:100vw !important;
        height:100dvh !important;
        min-width:100vw !important;
        max-width:none !important;
        margin:0 !important;
        border-radius:0 !important;
        overflow:auto !important;
    }

    body .datepicker-plot-area .datepicker-day-view,
    body .datepicker-plot-area .datepicker-month-view,
    body .datepicker-plot-area .datepicker-year-view,
    body .datepicker-plot-area table{
        width:100% !important;
    }
}

/* Invoice detail stabilization */
.invoice-grid{
    max-width:1320px;
    margin-inline:auto;
    padding-inline:16px;
    box-sizing:border-box;
}
.invoice-grid .summary-card{
    border-radius:24px !important;
    overflow:hidden;
}
.invoice-grid .summary-card .actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.invoice-grid .summary-card .actions .btn{
    flex:1 1 130px;
    justify-content:center;
}
.invoice-right{
    min-width:0;
}
.invoice-right .card{
    border-radius:22px !important;
}
.invoice-right .form-grid{
    display:flex !important;
    flex-wrap:wrap;
    gap:10px;
    align-items:flex-start;
}
.invoice-right .form-grid > *{
    flex:1 1 210px;
    min-width:0;
}
.invoice-right .amount-group{
    display:flex;
    gap:8px;
    align-items:center;
}
.invoice-right .amount-group input{
    flex:1 1 auto;
    min-width:0;
}
.invoice-right .amount-group .btn{
    flex:0 0 auto;
    white-space:nowrap;
}
.invoice-right table{
    margin-top:12px;
}

@media (max-width:1024px){
    .invoice-grid{
        flex-direction:column !important;
    }

    .invoice-grid .summary-card,
    .invoice-right{
        width:100% !important;
        max-width:none !important;
        flex-basis:auto !important;
    }
}

@media (max-width:640px){
    .invoice-grid{
        padding-inline:10px;
        gap:12px !important;
    }

    .invoice-grid .summary-card,
    .invoice-right .card{
        border-radius:18px !important;
    }

    .invoice-right .form-grid > *,
    .invoice-right .amount-group{
        flex-basis:100%;
    }

    .invoice-right .amount-group{
        flex-wrap:wrap;
    }

    .invoice-right .amount-group .btn{
        width:100%;
    }
}

/* Inventory items page */
.inventory-items-page{
    width:100%;
    max-width:none;
    margin-inline:0;
}
.inventory-page-head{
    border:1px solid rgba(82,180,203,.18);
    box-shadow:0 18px 42px rgba(18,49,59,.07);
}
.inventory-page-head__row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}
.inventory-page-head__actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    margin:0;
}
.inventory-page-head__actions .btn{
    justify-content:center;
}
.inventory-panel{
    min-width:0;
}
.inventory-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}
.inventory-section-head h3{
    margin:0 0 4px;
}
.inventory-items-hero{
    border-radius:24px;
    background:
        radial-gradient(circle at 100% 0, rgba(82,180,203,.12), transparent 28%),
        #fff;
}
.inventory-items-stats{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:16px;
}
.inventory-stat-card{
    flex:1 1 210px;
    width:auto;
    min-width:0;
    border-radius:20px;
}
.inventory-stat-card__value{
    font-size:28px;
    font-weight:850;
    color:#0f6f82;
    margin-top:6px;
}
.inventory-items-layout{
    width:100%;
    display:flex;
    gap:16px;
    align-items:flex-start;
    margin-top:16px;
}
.inventory-items-main{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:16px;
}
.inventory-items-side{
    flex:0 0 360px;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:16px;
}
.inventory-items-table-card{
    overflow:hidden;
}
.inventory-items-table{
    min-width:860px;
}
.inventory-side-card .form-grid{
    grid-template-columns:1fr;
}
.inventory-item-title{
    font-weight:850;
    color:var(--text);
}
.inventory-stock-cell,
.inventory-row-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.inventory-row-actions form{
    margin:0;
}
.inventory-locations-page{
    width:100%;
    max-width:none;
    margin-inline:0;
}
.inventory-location-layout{
    width:100%;
    display:flex;
    gap:16px;
    align-items:flex-start;
    margin-top:16px;
}
.inventory-location-form-card{
    flex:1 1 auto;
    min-width:0;
}
.inventory-location-guide{
    flex:0 0 340px;
    min-width:0;
}
.inventory-guide-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.inventory-location-list-card{
    margin-top:16px;
    overflow:hidden;
}
.inventory-location-table{
    min-width:820px;
}
.inventory-location-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.inventory-location-actions form{
    margin:0;
}
.form-grid__wide{
    grid-column:1 / -1;
}
.toggle-row{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:42px;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#f8fbfc;
    color:var(--text);
}
.toggle-row input{
    width:auto;
    min-width:16px;
}

@media (max-width:1120px){
    .inventory-items-layout{
        flex-direction:column;
    }

    .inventory-items-side,
    .inventory-location-guide{
        width:100%;
        flex-basis:auto;
    }

    .inventory-location-layout{
        flex-direction:column;
    }
}

@media (max-width:720px){
    .inventory-items-page,
    .inventory-locations-page{
        padding-inline:10px !important;
    }

    .inventory-page-head,
    .inventory-items-hero,
    .inventory-stat-card,
    .inventory-items-page .card,
    .inventory-locations-page .card{
        border-radius:18px;
    }

    .inventory-page-head__row{
        flex-direction:column;
    }

    .inventory-page-head__actions,
    .inventory-page-head__actions .btn{
        width:100%;
        justify-content:center;
    }

    .inventory-items-layout,
    .inventory-location-layout,
    .inventory-items-stats{
        gap:10px;
        margin-top:10px;
    }

    .inventory-items-page .form-grid,
    .inventory-locations-page .form-grid{
        grid-template-columns:1fr !important;
    }

    .inventory-row-actions .btn,
    .inventory-row-actions form,
    .inventory-location-actions .btn,
    .inventory-location-actions form{
        width:100%;
    }
}

/* Focused layout fixes */
body.has-app-topbar .container > .content,
body.has-app-topbar .container > main,
.inventory-dashboard,
.inventory-items-page,
.inventory-shell{
    width:100%;
    max-width:none;
    margin-inline:0;
}

.app-topbar__menu.has-user-open .menu-item.has-active-child:not(.is-open) > .submenu,
.app-topbar__menu.has-user-open .menu-item.has-active-child:not(.is-open) > .notif-menu,
.app-headerbar.has-user-open .menu-item.has-active-child:not(.is-open) > .submenu,
.app-headerbar.has-user-open .menu-item.has-active-child:not(.is-open) > .notif-menu{
    display:none !important;
}

body.has-app-topbar .inventory-dashboard .card,
body.has-app-topbar .inventory-items-page .card,
body.has-app-topbar .inventory-shell .card{
    min-width:0;
}

body.has-app-topbar .inventory-dashboard .table-wrap,
body.has-app-topbar .inventory-items-page .table-wrap,
body.has-app-topbar .inventory-shell .table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

@media (max-width:900px){
    body.has-app-topbar .card > table{
        display:block;
        width:100%;
        overflow-x:auto;
        white-space:nowrap;
        -webkit-overflow-scrolling:touch;
    }
}

.sections-admin-page{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.sections-page-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    border:1px solid rgba(82,180,203,.18);
    background:
        radial-gradient(circle at 100% 0, rgba(82,180,203,.14), transparent 32%),
        linear-gradient(135deg,#fff 0%,#f7fcfd 58%,#eef8fb 100%);
}

.sections-page-head__copy{
    display:flex;
    flex-direction:column;
    gap:7px;
    max-width:760px;
}

.sections-page-head__copy h1{
    margin:0;
    color:#12313b;
}

.sections-page-head__copy p{
    margin:0;
    line-height:1.9;
}

.sections-page-head__eyebrow{
    display:inline-flex;
    width:max-content;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(82,180,203,.13);
    color:#0c6477;
    font-size:12px;
    font-weight:800;
}

.sections-page-head__actions,
.section-action-list,
.sections-stat__links{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.sections-page-head__actions{
    justify-content:flex-end;
}

.sections-stats{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.sections-stat{
    flex:1 1 220px;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:7px;
    padding:16px;
}

.sections-stat span,
.sections-stat small{
    color:var(--muted);
    font-weight:700;
}

.sections-stat strong{
    color:#0f6f82;
    font-size:28px;
    line-height:1.2;
}

.sections-stat__links a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:7px 12px;
    border:1px solid rgba(82,180,203,.22);
    border-radius:999px;
    background:#f5fbfd;
    color:#0f6f82;
    font-weight:800;
    text-decoration:none;
}

.sections-board{
    overflow:hidden;
}

.sections-toolbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.sections-toolbar h2{
    margin:0 0 4px;
    color:#12313b;
}

.sections-search{
    width:min(100%,520px);
}

.sections-table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.sections-table{
    width:100%;
    min-width:740px;
}

.section-title-cell{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.section-title-cell strong{
    color:#12313b;
}

.sections-empty-state{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-top:14px;
}

.sections-empty-state span{
    color:var(--muted);
}

.section-action-list form{
    margin:0;
}

@media (max-width:760px){
    .sections-page-head,
    .sections-toolbar{
        align-items:stretch;
        flex-direction:column;
    }

    .sections-page-head__actions,
    .sections-search,
    .section-action-list{
        width:100%;
    }

    .sections-page-head__actions .btn,
    .sections-search .btn,
    .sections-search input,
    .section-action-list .btn,
    .section-action-list form{
        width:100%;
    }
}

/* Clinica shell v3.6 final guard: mobile menu must slide in from the right edge. */
@media (max-width:900px){
    .app-topbar__menu{
        inset-block:0 !important;
        inset-inline-start:auto !important;
        inset-inline-end:0 !important;
        right:0 !important;
        left:auto !important;
        width:clamp(224px,70vw,340px) !important;
        max-width:clamp(224px,70vw,340px) !important;
        min-width:224px !important;
        border-radius:0 !important;
        transform:translateX(100%) !important;
        transition:transform .22s ease, box-shadow .22s ease !important;
    }

    body.menu-open .app-topbar__menu{
        display:flex !important;
        right:clamp(224px,70vw,340px) !important;
        transform:translateX(100%) !important;
    }
}

/* Service catalog redesign */
.catalog-admin-page{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.catalog-page-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    border:1px solid rgba(82,180,203,.18);
    background:
        radial-gradient(circle at 100% 0, rgba(82,180,203,.14), transparent 32%),
        linear-gradient(135deg,#fff 0%,#f7fcfd 58%,#eef8fb 100%);
}

.catalog-page-head--subservices{
    background:
        radial-gradient(circle at 100% 0, rgba(82,180,203,.12), transparent 30%),
        radial-gradient(circle at 0 100%, rgba(15,111,130,.08), transparent 28%),
        linear-gradient(135deg,#fff 0%,#f8fcfd 62%,#eef8fb 100%);
}

.catalog-page-head__copy{
    display:flex;
    flex-direction:column;
    gap:7px;
    max-width:780px;
}

.catalog-page-head__copy h1{
    margin:0;
    color:#12313b;
}

.catalog-page-head__copy p{
    margin:0;
    line-height:1.9;
}

.catalog-page-head__copy small{
    color:#0f6f82;
    font-weight:800;
}

.catalog-page-head__eyebrow{
    display:inline-flex;
    width:max-content;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(82,180,203,.13);
    color:#0c6477;
    font-size:12px;
    font-weight:800;
}

.catalog-page-head__actions,
.catalog-section-head,
.catalog-card-actions,
.catalog-row-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.catalog-page-head__actions{
    justify-content:flex-end;
}

.catalog-section-head{
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:14px;
}

.catalog-section-head h2{
    margin:0 0 4px;
    color:#12313b;
}

.catalog-tab-strip{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    padding:8px;
    border:1px solid rgba(82,180,203,.18);
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 28px rgba(18,49,59,.06);
}

.catalog-tab-strip a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:8px 14px;
    border:1px solid transparent;
    border-radius:12px;
    color:var(--muted);
    font-weight:800;
}

.catalog-tab-strip a:hover,
.catalog-tab-strip a.is-active{
    border-color:rgba(82,180,203,.2);
    background:#eaf8fb;
    color:#0f6f82;
}

.catalog-stat-grid,
.catalog-board-grid,
.catalog-item-grid,
.catalog-mini-grid{
    display:grid;
    gap:12px;
}

.catalog-stat-grid{
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}

.catalog-board-grid{
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

.catalog-item-grid{
    grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}

.catalog-mini-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.catalog-stat-card,
.catalog-mini-card{
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
}

.catalog-stat-card{
    padding:16px;
}

.catalog-stat-card span,
.catalog-stat-card small,
.catalog-mini-card span,
.catalog-mini-card small{
    color:var(--muted);
    font-weight:700;
}

.catalog-stat-card strong{
    color:#0f6f82;
    font-size:28px;
    line-height:1.2;
}

.catalog-mini-card{
    padding:12px;
    border:1px solid rgba(82,180,203,.16);
    border-radius:16px;
    background:#f7fcfd;
}

.catalog-mini-card strong{
    color:#12313b;
    font-size:18px;
}

.catalog-tool-card,
.catalog-import-panel,
.catalog-list-panel,
.catalog-form-card{
    overflow:hidden;
}

.catalog-board-card{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
}

.catalog-board-card h2{
    margin:0 0 4px;
    color:#12313b;
}

.catalog-board-card ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.catalog-board-card li{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(82,180,203,.14);
}

.catalog-board-card li:last-child{
    padding-bottom:0;
    border-bottom:0;
}

.catalog-board-card li div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.catalog-board-card li span{
    color:var(--muted);
    font-size:12px;
}

.catalog-board-card li strong{
    color:#0f6f82;
    white-space:nowrap;
}

.catalog-import-panel{
    border-style:dashed;
    background:#f7fcfd;
}

.catalog-import-map-panel{
    overflow:hidden;
}

.import-columns{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:14px;
}

.import-column-card{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
    padding:16px;
    border:1px solid rgba(82,180,203,.18);
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 28px rgba(18,49,59,.06);
}

.import-column-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}

.import-column-code{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 9px;
    border-radius:999px;
    background:#eaf8fb;
    color:#0f6f82;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

.import-samples{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.import-sample{
    padding:10px 12px;
    border:1px solid rgba(82,180,203,.14);
    border-radius:12px;
    background:#f7fcfd;
    color:var(--muted);
    font-size:12px;
}

.catalog-preview-block{
    margin-top:18px;
}

.catalog-preview-block .table-wrap{
    margin-top:10px;
}

.catalog-service-card{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-width:0;
}

.catalog-service-card__head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}

.catalog-service-card__head h2{
    margin:0 0 4px;
    color:#12313b;
}

.catalog-card-actions,
.catalog-row-actions{
    align-items:center;
}

.catalog-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:5px 10px;
    border-radius:999px;
    background:#eaf8fb;
    color:#0f6f82;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

.catalog-chip--light{
    background:#fff;
    border:1px solid rgba(82,180,203,.2);
}

.catalog-table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.catalog-table-wrap table,
.catalog-table{
    width:100%;
    min-width:920px;
}

.catalog-row-actions form{
    margin:0;
}

.catalog-search{
    width:min(100%,560px);
}

.catalog-empty-card,
.catalog-empty-state{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
}

.service-show-shell{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.service-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:14px;
}

.service-summary-card{
    display:flex;
    flex-direction:column;
    gap:7px;
    border:1px solid rgba(82,180,203,.18);
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 28px rgba(18,49,59,.06);
    padding:16px;
}

.service-summary-card strong{
    color:#0f6f82;
    font-size:24px;
    line-height:1.2;
}

.service-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px;
}

.service-gallery article{
    overflow:hidden;
    border:1px solid rgba(82,180,203,.16);
    border-radius:16px;
    background:#fff;
}

.service-gallery img,
.service-gallery video{
    width:100%;
    height:180px;
    object-fit:cover;
    display:block;
    background:#eef8fb;
}

.service-gallery .meta{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:10px 12px;
    color:var(--muted);
    font-size:12px;
}

.catalog-accordion{
    border:1px solid rgba(82,180,203,.18);
    border-radius:18px;
    background:#f7fcfd;
    padding:0;
    overflow:hidden;
}

.catalog-accordion + .catalog-accordion{
    margin-top:12px;
}

.catalog-accordion summary{
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    color:#12313b;
    font-weight:850;
}

.catalog-accordion summary small{
    color:var(--muted);
    font-weight:700;
}

.catalog-accordion .form-grid{
    padding:0 16px 16px;
}

@media (max-width:760px){
    .catalog-page-head,
    .catalog-section-head,
    .catalog-service-card__head{
        flex-direction:column;
        align-items:stretch;
    }

    .catalog-page-head__actions,
    .catalog-card-actions,
    .catalog-row-actions,
    .catalog-search{
        width:100%;
    }

    .catalog-page-head__actions .btn,
    .catalog-card-actions .btn,
    .catalog-row-actions .btn,
    .catalog-row-actions form,
    .catalog-search input,
    .catalog-search .btn{
        width:100%;
    }

    .catalog-mini-grid{
        grid-template-columns:1fr;
    }

    .catalog-board-card li{
        flex-direction:column;
    }

    .catalog-board-card li strong{
        white-space:normal;
    }
}

/* Clinica shell v3.7 final EOF guard: keep the mobile drawer on-screen in RTL. */
@media (max-width:900px){
    .app-topbar__menu{
        inset-block:0 !important;
        inset-inline-start:auto !important;
        inset-inline-end:0 !important;
        right:0 !important;
        left:auto !important;
        width:min(70vw,340px) !important;
        max-width:min(70vw,340px) !important;
        min-width:224px !important;
        border-radius:0 !important;
        transform:translateX(100%) !important;
        transition:transform .22s ease, box-shadow .22s ease !important;
    }

    body.menu-open .app-topbar__menu{
        display:flex !important;
        transform:translateX(0) !important;
    }
}

/* Clinica shell v4: Didar-like calm accordion navigation. Keep this block last. */
@media (min-width:901px){
    :root{
        --shell-sidebar:232px;
    }

    body.has-app-topbar{
        padding-right:var(--shell-sidebar) !important;
        padding-left:0 !important;
    }

    .app-topbar{
        right:0 !important;
        left:auto !important;
        width:var(--shell-sidebar) !important;
        max-width:var(--shell-sidebar) !important;
        padding:12px 10px !important;
        border-left:1px solid rgba(82,180,203,.2) !important;
        border-radius:0 !important;
        background:#ffffff !important;
        box-shadow:-10px 0 28px rgba(18,49,59,.08) !important;
    }

    .app-topbar__brand{
        min-height:50px !important;
        padding:4px 6px 10px !important;
        border-bottom:1px solid rgba(82,180,203,.14);
        color:#12313b !important;
    }

    .app-topbar__brand > span:not(.app-topbar__version){
        color:#12313b !important;
        font-size:13px !important;
        font-weight:850 !important;
    }

    .app-topbar__version{
        background:#eaf8fb !important;
        color:#0b6174 !important;
    }
}

.app-topbar__menu{
    gap:4px !important;
}

.app-topbar__menu > a,
.app-topbar__menu .menu-item > a,
.app-topbar__menu .menu-item > button,
.app-topbar__menu .notif-button{
    min-height:40px !important;
    border-radius:12px !important;
    color:#12313b !important;
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
}

.app-topbar__menu > a:hover,
.app-topbar__menu .menu-item > a:hover,
.app-topbar__menu .menu-item > button:hover,
.app-topbar__menu .notif-button:hover,
.app-topbar__menu .menu-item.is-open > a,
.app-topbar__menu .menu-item.is-open > button{
    background:#f2fbfd !important;
    color:#0b6174 !important;
    border-color:rgba(82,180,203,.16) !important;
}

.app-topbar__menu > a.is-active,
.app-topbar__menu .menu-item > a.is-active,
.app-topbar__menu .menu-item.has-active-child > a{
    background:#52b4cb !important;
    color:#ffffff !important;
    border-color:#52b4cb !important;
}

.app-topbar__menu .submenu,
.app-topbar__menu .notif-menu{
    position:static !important;
    display:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    max-height:min(46vh,420px) !important;
    margin:4px 0 8px !important;
    padding:6px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    border:1px solid rgba(82,180,203,.14) !important;
    border-radius:12px !important;
    background:#f8fdfe !important;
    box-shadow:none !important;
}

.app-topbar__menu .menu-item:hover > .submenu,
.app-topbar__menu .menu-item:focus-within > .submenu,
.app-topbar__menu .menu-item:hover > .notif-menu,
.app-topbar__menu .menu-item:focus-within > .notif-menu{
    display:none !important;
}

.app-topbar__menu .menu-item.is-open > .submenu,
.app-topbar__menu .menu-item.is-open > .notif-menu,
.app-topbar__menu .menu-item.has-active-child:not(.has-user-open) > .submenu{
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
}

.app-topbar__menu.has-user-open .menu-item.has-active-child:not(.is-open) > .submenu,
.app-topbar__menu.has-user-open .menu-item.has-active-child:not(.is-open) > .notif-menu{
    display:none !important;
}

.app-topbar__menu .submenu a,
.app-topbar__menu .submenu button,
.app-topbar__menu .notif-item{
    min-height:34px !important;
    padding:7px 9px !important;
    border-radius:10px !important;
    background:transparent !important;
    color:#486473 !important;
    border:1px solid transparent !important;
}

.app-topbar__menu .submenu a:hover,
.app-topbar__menu .submenu a.is-active,
.app-topbar__menu .notif-item:hover{
    background:#eaf8fb !important;
    color:#0b6174 !important;
}

.app-topbar__menu .submenu-title,
.app-topbar__menu .notif-title,
.app-topbar__menu .muted,
.app-topbar__menu .meta{
    color:#6b7f8b !important;
    border-bottom-color:rgba(82,180,203,.14) !important;
}

.menu-caret{
    width:24px !important;
    height:24px !important;
    flex:0 0 24px !important;
    background:#eaf8fb !important;
    color:#0b6174 !important;
    font-size:0 !important;
    line-height:0 !important;
    overflow:hidden !important;
}

.menu-caret::before{
    color:currentColor !important;
    transform:rotate(135deg) translateY(-1px) !important;
}

.menu-item.is-open > a .menu-caret::before,
.menu-item.is-open > button .menu-caret::before{
    transform:rotate(45deg) translateY(-2px) !important;
}

.app-topbar__menu > a.is-active .menu-caret,
.app-topbar__menu .menu-item > a.is-active .menu-caret,
.app-topbar__menu .menu-item.has-active-child > a .menu-caret{
    background:rgba(255,255,255,.18) !important;
    color:#fff !important;
}

@media (max-width:900px){
    body.menu-open::after{
        display:none !important;
        content:none !important;
        background:transparent !important;
        backdrop-filter:none !important;
    }

    .app-topbar{
        border-radius:0 !important;
    }

    .app-topbar__menu{
        position:fixed !important;
        inset-block:0 !important;
        inset-inline-end:0 !important;
        inset-inline-start:auto !important;
        right:0 !important;
        left:auto !important;
        width:clamp(224px,70vw,340px) !important;
        max-width:clamp(224px,70vw,340px) !important;
        min-width:224px !important;
        height:100dvh !important;
        max-height:100dvh !important;
        padding:10px !important;
        padding-bottom:76px !important;
        border-left:1px solid rgba(82,180,203,.2) !important;
        border-radius:0 !important;
        background:#ffffff !important;
        box-shadow:-14px 0 32px rgba(18,49,59,.14) !important;
        transform:translateX(100%) !important;
        transition:transform .22s ease, box-shadow .22s ease !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        filter:none !important;
    }

    body.menu-open .app-topbar__menu{
        display:flex !important;
        transform:translateX(0) !important;
    }

    .app-topbar__menu::before{
        display:none !important;
        content:none !important;
    }

    .app-topbar__menu-head{
        margin:0 0 8px !important;
        padding:8px !important;
        border-radius:12px !important;
        border:1px solid rgba(82,180,203,.14) !important;
        background:#f8fdfe !important;
        box-shadow:none !important;
    }

    .app-topbar__menu-search{
        display:none !important;
    }

    .app-topbar__menu-title{
        color:#12313b !important;
    }

    .app-topbar__menu-close{
        border-radius:10px !important;
        background:#eaf8fb !important;
        color:#0b6174 !important;
        border-color:rgba(82,180,203,.18) !important;
    }
}

.ce-hero,
.dashboard-hero,
.role-hero,
.customers-hero,
.workspace-hero,
.settings-shell__hero,
.hr-hero,
.ticket-page-head,
.inventory-hero,
.inventory-items-hero,
.sections-page-head,
.catalog-page-head,
.patient-hero{
    padding:16px !important;
    border-radius:18px !important;
}

.ce-hero__eyebrow,
.workspace-hero__eyebrow,
.sections-page-head__eyebrow,
.catalog-page-head__eyebrow,
.inventory-eyebrow{
    display:none !important;
}

.ce-hero .muted,
.dashboard-hero__lead,
.workspace-hero .muted,
.patient-hero .muted,
.inventory-hero__copy p,
.sections-page-head__copy p,
.catalog-page-head__copy p{
    display:none !important;
}

.patient-shell,
.patient-shell .card,
.patient-hero,
.patient-hero > *,
.patient-hero-tags,
.patient-quick-actions,
.patient-kpi-grid,
.patient-gallery-board,
.patient-gallery,
.patient-gallery-item{
    min-width:0 !important;
    max-width:100% !important;
}

.patient-hero{
    width:100% !important;
    grid-template-columns:minmax(0,1fr) !important;
    overflow:hidden !important;
}

.patient-hero-tags,
.patient-quick-actions,
.patient-kpi-grid,
.patient-gallery{
    width:100% !important;
}

.patient-quick-actions .btn,
.patient-gallery-actions .btn{
    min-width:0 !important;
    max-width:100% !important;
}

@media (max-width:900px){
    .patient-shell{
        overflow:hidden !important;
    }

    .patient-quick-actions{
        display:grid !important;
        grid-template-columns:1fr !important;
    }

    .patient-hero-tags{
        flex-wrap:nowrap !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
    }
}

/* Clinica minimal CRM shell v5: clean, Didar-inspired system layer. Keep this block last. */
:root{
    --brand:#52b4cb;
    --brand-700:#14788d;
    --brand-800:#0f5f70;
    --brand-50:#f2fbfd;
    --brand-100:#e6f7fb;
    --ui-bg:#f6f8fa;
    --ui-surface:#ffffff;
    --ui-surface-soft:#fbfcfd;
    --ui-line:#e6edf1;
    --ui-line-strong:#d5e4ea;
    --ui-text:#172f3a;
    --ui-muted:#6d7f89;
    --ui-muted-2:#92a1a8;
    --ui-shadow:0 1px 2px rgba(18,49,59,.04),0 10px 28px rgba(18,49,59,.05);
    --ui-shadow-soft:0 1px 2px rgba(18,49,59,.04);
    --ui-radius:14px;
    --ui-radius-lg:18px;
    --shell-sidebar:238px;
    --shell-sidebar-collapsed:74px;
}

html{
    background:var(--ui-bg) !important;
}

body,
body.has-app-topbar{
    background:var(--ui-bg) !important;
    color:var(--ui-text) !important;
}

body.has-app-topbar::before{
    display:none !important;
    content:none !important;
}

body.has-app-topbar .container{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:18px 22px 34px !important;
}

body.has-app-topbar .content,
body.has-app-topbar main,
body.has-app-topbar .page-shell,
body.has-app-topbar .ce-stack,
body.has-app-topbar .settings-shell,
body.has-app-topbar .customers-shell,
body.has-app-topbar .appointment-create-shell,
body.has-app-topbar .catalog-stack{
    width:100% !important;
    max-width:none !important;
    margin-inline:0 !important;
}

@media (min-width:901px){
    body.has-app-topbar{
        padding-inline-end:var(--shell-sidebar) !important;
        padding-inline-start:0 !important;
        transition:padding-inline-end .18s ease !important;
    }

    body.has-app-topbar.sidebar-collapsed{
        padding-inline-end:var(--shell-sidebar-collapsed) !important;
    }

    .app-topbar{
        right:0 !important;
        left:auto !important;
        width:var(--shell-sidebar) !important;
        max-width:var(--shell-sidebar) !important;
        padding:12px 10px !important;
        border:0 !important;
        border-left:1px solid var(--ui-line) !important;
        border-radius:0 !important;
        background:var(--ui-surface) !important;
        box-shadow:none !important;
        transition:width .18s ease, box-shadow .18s ease !important;
    }

    body.sidebar-collapsed .app-topbar{
        width:var(--shell-sidebar-collapsed) !important;
        max-width:var(--shell-sidebar-collapsed) !important;
        overflow:visible !important;
    }

    body.sidebar-collapsed .app-topbar:hover,
    body.sidebar-collapsed .app-topbar:focus-within{
        width:var(--shell-sidebar) !important;
        max-width:var(--shell-sidebar) !important;
        box-shadow:-12px 0 30px rgba(18,49,59,.08) !important;
    }

    .app-topbar__toggle{
        display:inline-flex !important;
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
        margin:0 auto 8px !important;
        border:1px solid var(--ui-line) !important;
        border-radius:12px !important;
        background:#fff !important;
        box-shadow:none !important;
    }

    .app-topbar__toggle span{
        width:15px !important;
        height:2px !important;
        background:var(--brand-700) !important;
    }

    .app-topbar__brand{
        min-height:48px !important;
        padding:4px 8px 10px !important;
        margin-bottom:4px !important;
        border-bottom:1px solid var(--ui-line) !important;
        color:var(--ui-text) !important;
        gap:8px !important;
    }

    .app-topbar__brand img{
        width:32px !important;
        height:32px !important;
        border:1px solid var(--ui-line) !important;
        border-radius:11px !important;
        padding:4px !important;
        background:#fff !important;
        object-fit:contain !important;
    }

    .app-topbar__brand > span:not(.app-topbar__version){
        color:var(--ui-text) !important;
        font-size:13px !important;
        font-weight:850 !important;
    }

    .app-topbar__version{
        background:var(--brand-50) !important;
        color:var(--brand-700) !important;
        border:1px solid rgba(82,180,203,.18) !important;
        font-size:10px !important;
    }

    body.sidebar-collapsed .app-topbar:not(:hover):not(:focus-within) .app-topbar__brand{
        justify-content:center !important;
        padding-inline:0 !important;
    }

    body.sidebar-collapsed .app-topbar:not(:hover):not(:focus-within) .app-topbar__brand > span,
    body.sidebar-collapsed .app-topbar:not(:hover):not(:focus-within) .app-topbar__version{
        display:none !important;
    }

    .app-topbar__menu{
        gap:3px !important;
        padding:2px 0 14px !important;
        scrollbar-width:thin !important;
        scrollbar-color:#c9dde4 transparent !important;
    }

    .app-topbar__menu::-webkit-scrollbar{width:5px !important}
    .app-topbar__menu::-webkit-scrollbar-thumb{background:#c9dde4 !important;border-radius:999px !important}
}

.app-topbar__menu > a,
.app-topbar__menu .menu-item > a,
.app-topbar__menu .menu-item > button,
.app-topbar__menu .notif-button{
    min-height:38px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:8px !important;
    padding:8px 10px !important;
    border:1px solid transparent !important;
    border-radius:12px !important;
    background:transparent !important;
    color:var(--ui-muted) !important;
    font-size:13px !important;
    font-weight:720 !important;
    line-height:1.45 !important;
    box-shadow:none !important;
}

.app-topbar__menu > a:hover,
.app-topbar__menu .menu-item > a:hover,
.app-topbar__menu .menu-item > button:hover,
.app-topbar__menu .notif-button:hover,
.app-topbar__menu .menu-item.is-open > a,
.app-topbar__menu .menu-item.is-open > button{
    background:var(--ui-surface-soft) !important;
    color:var(--brand-700) !important;
    border-color:var(--ui-line) !important;
}

.app-topbar__menu > a.is-active,
.app-topbar__menu .menu-item > a.is-active,
.app-topbar__menu .menu-item.has-active-child > a{
    background:var(--brand-50) !important;
    color:var(--brand-800) !important;
    border-color:rgba(82,180,203,.24) !important;
    box-shadow:inset -3px 0 0 var(--brand) !important;
}

.menu-caret{
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
    border:1px solid var(--ui-line) !important;
    border-radius:9px !important;
    background:#fff !important;
    color:var(--ui-muted) !important;
    font-size:0 !important;
    line-height:0 !important;
    overflow:hidden !important;
}

.menu-caret::before{
    color:currentColor !important;
    transition:transform .18s ease, color .18s ease !important;
}

.menu-item.is-open > a .menu-caret::before,
.menu-item.is-open > button .menu-caret::before{
    transform:rotate(45deg) translateY(-2px) !important;
}

.app-topbar__menu > a.is-active .menu-caret,
.app-topbar__menu .menu-item > a.is-active .menu-caret,
.app-topbar__menu .menu-item.has-active-child > a .menu-caret{
    background:#fff !important;
    border-color:rgba(82,180,203,.26) !important;
    color:var(--brand-700) !important;
}

@media (min-width:901px){
    body.sidebar-collapsed .app-topbar:not(:hover):not(:focus-within) .app-topbar__menu > a,
    body.sidebar-collapsed .app-topbar:not(:hover):not(:focus-within) .app-topbar__menu .menu-item > a,
    body.sidebar-collapsed .app-topbar:not(:hover):not(:focus-within) .app-topbar__menu .menu-item > button{
        grid-template-columns:1fr !important;
        justify-items:center !important;
        padding-inline:6px !important;
        font-size:0 !important;
    }

    body.sidebar-collapsed .app-topbar:not(:hover):not(:focus-within) .app-topbar__menu > a::before,
    body.sidebar-collapsed .app-topbar:not(:hover):not(:focus-within) .app-topbar__menu .menu-item > a::before,
    body.sidebar-collapsed .app-topbar:not(:hover):not(:focus-within) .app-topbar__menu .menu-item > button::before{
        content:attr(data-menu-initial);
        width:30px;
        height:30px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius:11px;
        background:var(--brand-50);
        color:var(--brand-700);
        font-size:13px;
        font-weight:850;
    }

    body.sidebar-collapsed .app-topbar:not(:hover):not(:focus-within) .menu-caret,
    body.sidebar-collapsed .app-topbar:not(:hover):not(:focus-within) .submenu,
    body.sidebar-collapsed .app-topbar:not(:hover):not(:focus-within) .notif-menu{
        display:none !important;
    }
}

.app-topbar__menu .submenu,
.app-topbar__menu .notif-menu{
    position:static !important;
    display:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    max-height:min(48vh,430px) !important;
    margin:4px 0 8px !important;
    padding:6px !important;
    overflow:auto !important;
    border:1px solid var(--ui-line) !important;
    border-radius:12px !important;
    background:#fff !important;
    box-shadow:none !important;
}

.app-topbar__menu .menu-item:hover > .submenu,
.app-topbar__menu .menu-item:focus-within > .submenu,
.app-topbar__menu .menu-item:hover > .notif-menu,
.app-topbar__menu .menu-item:focus-within > .notif-menu{
    display:none !important;
}

.app-topbar__menu .menu-item.is-open > .submenu,
.app-topbar__menu .menu-item.is-open > .notif-menu,
.app-topbar__menu .menu-item.has-active-child:not(.has-user-open) > .submenu{
    display:flex !important;
    flex-direction:column !important;
    gap:3px !important;
}

.app-topbar__menu.has-user-open .menu-item.has-active-child:not(.is-open) > .submenu,
.app-topbar__menu.has-user-open .menu-item.has-active-child:not(.is-open) > .notif-menu{
    display:none !important;
}

.app-topbar__menu .submenu a,
.app-topbar__menu .submenu button,
.app-topbar__menu .notif-item{
    min-height:32px !important;
    padding:7px 9px !important;
    border-radius:10px !important;
    background:transparent !important;
    color:var(--ui-muted) !important;
    border:1px solid transparent !important;
    font-size:12px !important;
    font-weight:650 !important;
}

.app-topbar__menu .submenu a:hover,
.app-topbar__menu .submenu a.is-active,
.app-topbar__menu .notif-item:hover{
    background:var(--brand-50) !important;
    color:var(--brand-700) !important;
    border-color:rgba(82,180,203,.14) !important;
}

.app-topbar__menu .submenu-title,
.app-topbar__menu .notif-title,
.app-topbar__menu .muted,
.app-topbar__menu .meta{
    color:var(--ui-muted-2) !important;
    border-bottom-color:var(--ui-line) !important;
    font-size:11px !important;
    font-weight:750 !important;
}

.app-headerbar{
    min-height:58px !important;
    margin:12px 18px 0 !important;
    padding:9px 12px !important;
    border:1px solid var(--ui-line) !important;
    border-radius:var(--ui-radius-lg) !important;
    background:rgba(255,255,255,.96) !important;
    box-shadow:var(--ui-shadow-soft) !important;
    backdrop-filter:none !important;
}

.app-headerbar__title strong{
    color:var(--ui-text) !important;
    font-size:14px !important;
}

.app-headerbar__title span,
.app-headerbar__search-chip{
    color:var(--ui-muted) !important;
}

.app-headerbar__search input,
input,
select,
textarea{
    border:1px solid var(--ui-line-strong) !important;
    border-radius:12px !important;
    background:#fff !important;
    color:var(--ui-text) !important;
    box-shadow:none !important;
}

input:focus,
select:focus,
textarea:focus,
.app-headerbar__search input:focus{
    border-color:rgba(82,180,203,.72) !important;
    box-shadow:0 0 0 3px rgba(82,180,203,.12) !important;
    outline:none !important;
}

label{
    color:var(--ui-muted) !important;
    font-size:12px !important;
    font-weight:700 !important;
}

.btn,
button,
input[type=submit],
input[type=button],
input[type=reset]{
    min-height:36px;
    border-radius:11px !important;
    border:1px solid transparent;
    box-shadow:none !important;
    font-weight:800 !important;
}

.btn:not(.secondary):not(.light):not(.danger),
button:not(.secondary):not(.light):not(.danger),
input[type=submit]:not(.secondary):not(.light):not(.danger){
    background:var(--brand) !important;
    color:#fff !important;
    border-color:var(--brand) !important;
}

.btn.secondary,
button.secondary,
input[type=submit].secondary{
    background:var(--brand-50) !important;
    color:var(--brand-700) !important;
    border-color:rgba(82,180,203,.22) !important;
}

.btn.light,
button.light{
    background:#fff !important;
    color:var(--ui-text) !important;
    border-color:var(--ui-line-strong) !important;
}

.btn.danger,
button.danger{
    background:#fff5f5 !important;
    color:#b42318 !important;
    border-color:#ffd1d1 !important;
}

.card,
.ce-panel,
.dashboard-summary-card,
.dashboard-quick-action,
.service-card,
.subservice-card,
.board-card,
.detail-card,
.settings-field-card,
.settings-studio-panel,
.settings-group-card,
.settings-page-head,
.settings-kpi-card,
.summary-item,
.metric-card,
.process-kpi,
.patient-gallery-board,
.patient-gallery-item{
    border:1px solid var(--ui-line) !important;
    border-radius:var(--ui-radius-lg) !important;
    background:var(--ui-surface) !important;
    box-shadow:var(--ui-shadow-soft) !important;
}

.card{
    padding:16px !important;
}

.ce-hero,
.dashboard-hero,
.role-hero,
.customers-hero,
.workspace-hero,
.settings-shell__hero,
.hr-hero,
.ticket-page-head,
.inventory-hero,
.inventory-items-hero,
.sections-page-head,
.catalog-page-head,
.patient-hero,
.appointment-create-head,
.process-page-head,
.settings-page-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:14px 16px !important;
    border:1px solid var(--ui-line) !important;
    border-radius:var(--ui-radius-lg) !important;
    background:#fff !important;
    box-shadow:var(--ui-shadow-soft) !important;
    overflow:hidden !important;
}

.ce-hero__eyebrow,
.workspace-hero__eyebrow,
.sections-page-head__eyebrow,
.catalog-page-head__eyebrow,
.inventory-eyebrow,
.settings-page-head__eyebrow{
    display:none !important;
}

.ce-hero h1,
.dashboard-hero h1,
.role-hero h1,
.customers-hero h1,
.workspace-hero h1,
.settings-shell__hero h1,
.hr-hero h1,
.ticket-page-head h1,
.inventory-hero h1,
.inventory-items-hero h1,
.sections-page-head h1,
.catalog-page-head h1,
.patient-hero h1,
.appointment-create-head h1,
.process-page-head h1,
.settings-page-head h1{
    margin:0 !important;
    color:var(--ui-text) !important;
    font-size:clamp(18px,2vw,23px) !important;
    font-weight:900 !important;
    line-height:1.55 !important;
}

.ce-hero .muted,
.dashboard-hero__lead,
.workspace-hero .muted,
.patient-hero .muted,
.inventory-hero__copy p,
.sections-page-head__copy p,
.catalog-page-head__copy p,
.settings-page-head p,
.appointment-create-head p{
    display:none !important;
}

.ce-hero__side,
.role-hero__side,
.patient-hero__side{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    align-items:center !important;
    justify-content:flex-end !important;
}

.ce-hero__meta,
.patient-hero-tags,
.inline-actions,
.actions,
.appointment-create-head__actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    align-items:center !important;
}

.ce-hero__meta-item,
.pill,
.badge,
.status,
.tag{
    border-radius:999px !important;
    background:var(--ui-surface-soft) !important;
    color:var(--ui-muted) !important;
    border:1px solid var(--ui-line) !important;
    box-shadow:none !important;
}

.table-wrap,
.catalog-table-wrap,
.service-table-wrap,
.ce-table-wrap,
.data-table-wrap,
.list-table-wrap,
.sections-table-wrap,
.daily-appointments-table-wrap{
    width:100% !important;
    border:1px solid var(--ui-line) !important;
    border-radius:var(--ui-radius-lg) !important;
    background:#fff !important;
    box-shadow:var(--ui-shadow-soft) !important;
    overflow:auto !important;
}

table{
    width:100% !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
    background:#fff !important;
}

th{
    background:#fbfcfd !important;
    color:var(--ui-muted) !important;
    border-bottom:1px solid var(--ui-line) !important;
    font-size:12px !important;
    font-weight:850 !important;
}

td{
    border-bottom:1px solid #eef3f6 !important;
    color:var(--ui-text) !important;
    font-size:13px !important;
}

tr:hover td{
    background:#fbfdfe !important;
}

.filter-grid,
.finance-filter__grid,
.hr-filter__grid,
.form-grid,
.settings-grid,
.ce-panel-grid,
.dashboard-grid,
.dashboard-summary-grid,
.dashboard-quick-actions,
.ce-kpi-grid,
.ce-metric-strip{
    gap:12px !important;
}

.alert,
.error-validation{
    border-radius:12px !important;
}

.modal,
.customer-modal,
.modal-card,
.popup,
.dropdown-menu{
    border-radius:18px !important;
    border:1px solid var(--ui-line) !important;
    box-shadow:0 18px 60px rgba(18,49,59,.14) !important;
}

@media (max-width:900px){
    body.has-app-topbar,
    body.has-app-topbar.sidebar-collapsed{
        padding-inline:0 !important;
    }

    body.has-app-topbar .container{
        padding:12px 12px 24px !important;
    }

    .app-topbar{
        min-height:58px !important;
        padding:8px 12px !important;
        border:0 !important;
        border-bottom:1px solid var(--ui-line) !important;
        border-radius:0 !important;
        background:#fff !important;
        box-shadow:none !important;
    }

    .app-topbar__brand{
        color:var(--ui-text) !important;
        min-width:0 !important;
    }

    .app-topbar__brand > span:not(.app-topbar__version){
        color:var(--ui-text) !important;
        font-size:13px !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    .app-topbar__toggle{
        display:inline-flex !important;
        background:var(--brand) !important;
        border-radius:12px !important;
        box-shadow:none !important;
    }

    .app-topbar__toggle span{
        background:#fff !important;
    }

    .app-topbar__menu{
        width:min(78vw,340px) !important;
        max-width:min(78vw,340px) !important;
        min-width:238px !important;
        padding:10px !important;
        padding-bottom:78px !important;
        border-left:1px solid var(--ui-line) !important;
        border-radius:0 !important;
        background:#fff !important;
        box-shadow:-12px 0 32px rgba(18,49,59,.12) !important;
    }

    .app-topbar__menu-head{
        border-color:var(--ui-line) !important;
        background:#fff !important;
        border-radius:12px !important;
    }

    .app-headerbar{
        margin:10px 10px 0 !important;
        border-radius:16px !important;
        flex-direction:column !important;
        align-items:stretch !important;
    }

    .app-headerbar__search,
    .app-headerbar__actions{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
    }

    .ce-hero,
    .dashboard-hero,
    .role-hero,
    .customers-hero,
    .workspace-hero,
    .settings-shell__hero,
    .hr-hero,
    .ticket-page-head,
    .inventory-hero,
    .inventory-items-hero,
    .sections-page-head,
    .catalog-page-head,
    .patient-hero,
    .appointment-create-head,
    .process-page-head,
    .settings-page-head{
        flex-direction:column !important;
        align-items:stretch !important;
        padding:12px !important;
    }

    .card{
        padding:12px !important;
        border-radius:16px !important;
    }

    .form-grid,
    .filter-grid,
    .finance-filter__grid,
    .hr-filter__grid,
    .dashboard-grid,
    .ce-panel-grid{
        grid-template-columns:1fr !important;
        display:grid !important;
    }

    .btn,
    button{
        min-width:0 !important;
    }
}

/* Clinica minimal navigation polish v6: one active marker, true icon-only collapse. */
@media (min-width:901px){
    body.sidebar-collapsed .app-topbar,
    body.sidebar-collapsed .app-topbar:hover,
    body.sidebar-collapsed .app-topbar:focus-within{
        width:var(--shell-sidebar-collapsed) !important;
        max-width:var(--shell-sidebar-collapsed) !important;
        box-shadow:none !important;
    }

    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__brand{
        justify-content:center !important;
        padding-inline:0 !important;
    }

    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__brand > span,
    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__version,
    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__menu-head,
    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__menu-search{
        display:none !important;
    }

    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__menu{
        padding-inline:6px !important;
        gap:6px !important;
    }

    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__menu > a,
    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__menu .menu-item > a,
    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__menu .menu-item > button,
    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__menu .notif-button{
        min-height:42px !important;
        grid-template-columns:1fr !important;
        justify-items:center !important;
        padding:5px !important;
        font-size:0 !important;
        border-radius:14px !important;
        box-shadow:none !important;
    }

    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__menu > a::before,
    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__menu .menu-item > a::before,
    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__menu .menu-item > button::before,
    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__menu .notif-button::before{
        content:attr(data-menu-icon);
        width:32px !important;
        height:32px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        border:1px solid var(--ui-line) !important;
        border-radius:12px !important;
        background:#fff !important;
        color:var(--ui-muted) !important;
        font-size:16px !important;
        font-weight:850 !important;
        line-height:1 !important;
        box-shadow:none !important;
    }

    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__menu > a.is-active::before,
    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__menu .menu-item > a.is-active::before,
    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__menu .menu-item.has-active-child > a::before{
        background:var(--brand) !important;
        border-color:var(--brand) !important;
        color:#fff !important;
    }

    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .menu-caret,
    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .submenu,
    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .notif-menu{
        display:none !important;
    }
}

.app-topbar__menu .menu-item.has-active-child > a{
    box-shadow:none !important;
}

.app-topbar__menu.has-user-open .menu-item.has-active-child:not(.is-open) > a{
    background:transparent !important;
    border-color:transparent !important;
    color:var(--ui-muted) !important;
}

.app-topbar__menu .menu-item.has-active-child > a .menu-caret{
    background:#fff !important;
    color:var(--ui-muted) !important;
    border-color:var(--ui-line) !important;
}

.app-topbar__menu .submenu a.is-active{
    box-shadow:inset -3px 0 0 var(--brand) !important;
}

@media (min-width:901px){
    body:not(.sidebar-collapsed) .app-topbar__menu .menu-item.has-active-child > a.is-active{
        background:transparent !important;
        border-color:transparent !important;
        color:var(--ui-muted) !important;
        box-shadow:none !important;
    }

    body:not(.sidebar-collapsed) .app-topbar__menu .menu-item.has-active-child.is-open > a.is-active{
        background:var(--ui-surface-soft) !important;
        border-color:var(--ui-line) !important;
        color:var(--brand-700) !important;
    }
}

/* Clinica shell anti-overlap v7: reserve sidebar space before JS and on heavy pages. */
@media (min-width:901px){
    body:has(.app-topbar),
    body.has-app-topbar{
        padding-inline-end:var(--shell-sidebar) !important;
        padding-inline-start:0 !important;
    }

    body:has(.app-topbar).sidebar-collapsed,
    body.has-app-topbar.sidebar-collapsed{
        padding-inline-end:var(--shell-sidebar-collapsed) !important;
    }

    body:has(.app-topbar) .app-topbar,
    body.has-app-topbar .app-topbar{
        position:fixed !important;
        inset-block:0 !important;
        inset-inline-end:0 !important;
        inset-inline-start:auto !important;
        width:var(--shell-sidebar) !important;
        max-width:var(--shell-sidebar) !important;
        height:100dvh !important;
        min-height:100dvh !important;
    }

    body:has(.app-topbar).sidebar-collapsed .app-topbar,
    body.has-app-topbar.sidebar-collapsed .app-topbar{
        width:var(--shell-sidebar-collapsed) !important;
        max-width:var(--shell-sidebar-collapsed) !important;
    }

    body:has(.app-topbar) > .container,
    body.has-app-topbar > .container,
    body:has(.app-topbar) .app-headerbar,
    body.has-app-topbar .app-headerbar{
        width:calc(100vw - var(--shell-sidebar)) !important;
        max-width:calc(100vw - var(--shell-sidebar)) !important;
        margin-inline-start:0 !important;
        margin-inline-end:0 !important;
    }

    body:has(.app-topbar).sidebar-collapsed > .container,
    body.has-app-topbar.sidebar-collapsed > .container,
    body:has(.app-topbar).sidebar-collapsed .app-headerbar,
    body.has-app-topbar.sidebar-collapsed .app-headerbar{
        width:calc(100vw - var(--shell-sidebar-collapsed)) !important;
        max-width:calc(100vw - var(--shell-sidebar-collapsed)) !important;
    }
}

/* Clinica shell RTL fix v8: physical right sidebar and Limoo-like menu icons. */
@media (min-width:901px){
    body:has(.app-topbar),
    body.has-app-topbar{
        padding-right:var(--shell-sidebar) !important;
        padding-left:0 !important;
        padding-inline-start:0 !important;
        padding-inline-end:0 !important;
    }

    body:has(.app-topbar).sidebar-collapsed,
    body.has-app-topbar.sidebar-collapsed{
        padding-right:var(--shell-sidebar-collapsed) !important;
        padding-left:0 !important;
        padding-inline-start:0 !important;
        padding-inline-end:0 !important;
    }

    body:has(.app-topbar) .app-topbar,
    body.has-app-topbar .app-topbar{
        right:0 !important;
        left:auto !important;
        inset-inline-start:auto !important;
        inset-inline-end:auto !important;
        width:var(--shell-sidebar) !important;
        max-width:var(--shell-sidebar) !important;
        height:100dvh !important;
        min-height:100dvh !important;
    }

    body:has(.app-topbar).sidebar-collapsed .app-topbar,
    body.has-app-topbar.sidebar-collapsed .app-topbar{
        width:var(--shell-sidebar-collapsed) !important;
        max-width:var(--shell-sidebar-collapsed) !important;
    }

    body:has(.app-topbar) > .container,
    body.has-app-topbar > .container,
    body:has(.app-topbar) .app-headerbar,
    body.has-app-topbar .app-headerbar{
        width:calc(100vw - var(--shell-sidebar)) !important;
        max-width:calc(100vw - var(--shell-sidebar)) !important;
        margin-right:0 !important;
        margin-left:0 !important;
        margin-inline-start:0 !important;
        margin-inline-end:0 !important;
    }

    body:has(.app-topbar).sidebar-collapsed > .container,
    body.has-app-topbar.sidebar-collapsed > .container,
    body:has(.app-topbar).sidebar-collapsed .app-headerbar,
    body.has-app-topbar.sidebar-collapsed .app-headerbar{
        width:calc(100vw - var(--shell-sidebar-collapsed)) !important;
        max-width:calc(100vw - var(--shell-sidebar-collapsed)) !important;
    }

    .app-topbar__menu > a,
    .app-topbar__menu .menu-item > a,
    .app-topbar__menu .menu-item > button,
    .app-topbar__menu .notif-button{
        grid-template-columns:32px minmax(0,1fr) auto !important;
        justify-items:stretch !important;
        text-align:right !important;
    }

    .app-topbar__menu > a::before,
    .app-topbar__menu .menu-item > a::before,
    .app-topbar__menu .menu-item > button::before,
    .app-topbar__menu .notif-button::before{
        content:attr(data-menu-icon);
        width:28px !important;
        height:28px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        border:1px solid var(--ui-line) !important;
        border-radius:10px !important;
        background:#fff !important;
        color:#74859a !important;
        font-size:15px !important;
        font-weight:850 !important;
        line-height:1 !important;
    }

    .app-topbar__menu > a.is-active::before,
    .app-topbar__menu .menu-item > a.is-active::before,
    .app-topbar__menu .menu-item.has-active-child > a::before{
        background:var(--brand-50) !important;
        border-color:rgba(82,180,203,.3) !important;
        color:var(--brand-700) !important;
    }

    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__menu > a,
    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__menu .menu-item > a,
    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__menu .menu-item > button,
    body.sidebar-collapsed .app-topbar:not(.menu-force-expanded) .app-topbar__menu .notif-button{
        grid-template-columns:1fr !important;
        text-align:center !important;
    }
}

@media (max-width:900px){
    body:has(.app-topbar),
    body.has-app-topbar{
        padding-right:0 !important;
        padding-left:0 !important;
    }

    .app-topbar__menu{
        right:0 !important;
        left:auto !important;
        transform:translateX(100%) !important;
    }

    body.menu-open .app-topbar__menu{
        transform:translateX(0) !important;
    }
}

/* Clinica product polish v9: one calm system layer after the legacy overrides. */
:root{
    --ux-brand:#52b4cb;
    --ux-brand-700:#14788d;
    --ux-brand-800:#0f5f70;
    --ux-bg:#f7f9fb;
    --ux-surface:#ffffff;
    --ux-soft:#fbfdfe;
    --ux-line:#e4edf2;
    --ux-line-strong:#d3e2e9;
    --ux-text:#17313b;
    --ux-muted:#6f808a;
    --ux-shadow:0 1px 2px rgba(18,49,59,.04),0 10px 24px rgba(18,49,59,.045);
    --shell-sidebar:224px;
    --shell-sidebar-collapsed:68px;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body,
body.has-app-topbar{
    background:var(--ux-bg) !important;
    color:var(--ux-text) !important;
}

body{
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

body.has-app-topbar::before,
body.menu-open::after{
    display:none !important;
    content:none !important;
    backdrop-filter:none !important;
}

body.has-app-topbar .container{
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:16px 18px 30px !important;
}

body.has-app-topbar .content,
body.has-app-topbar main,
body.has-app-topbar .page-shell,
body.has-app-topbar .ce-stack,
body.has-app-topbar .settings-shell,
body.has-app-topbar .customers-shell,
body.has-app-topbar .appointment-create-shell,
body.has-app-topbar .catalog-stack,
body.has-app-topbar .inventory-dashboard,
body.has-app-topbar .patient-shell{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    min-width:0 !important;
}

.card,
.ce-panel,
.dashboard-summary-card,
.dashboard-quick-action,
.service-card,
.subservice-card,
.board-card,
.detail-card,
.settings-field-card,
.settings-studio-panel,
.settings-group-card,
.summary-item,
.metric-card,
.process-kpi,
.patient-gallery-board,
.patient-gallery-item,
.inventory-kpi,
.inventory-panel,
.inventory-action-card,
.inventory-list-item{
    border:1px solid var(--ux-line) !important;
    border-radius:16px !important;
    background:var(--ux-surface) !important;
    box-shadow:var(--ux-shadow) !important;
    color:var(--ux-text) !important;
}

.card{
    padding:14px !important;
}

.muted,
.hint,
small,
.meta{
    color:var(--ux-muted) !important;
}

a{
    color:var(--ux-brand-700);
}

.btn,
button,
input[type=submit],
input[type=button],
input[type=reset]{
    min-height:36px !important;
    border-radius:10px !important;
    box-shadow:none !important;
    font-weight:760 !important;
}

.btn:not(.secondary):not(.light):not(.danger),
button:not(.secondary):not(.light):not(.danger),
input[type=submit]:not(.secondary):not(.light):not(.danger){
    background:var(--ux-brand) !important;
    color:#fff !important;
    border-color:var(--ux-brand) !important;
}

.btn.secondary,
button.secondary,
input[type=submit].secondary{
    background:#edf9fc !important;
    color:var(--ux-brand-700) !important;
    border-color:rgba(82,180,203,.24) !important;
}

.btn.light,
button.light{
    background:#fff !important;
    color:var(--ux-text) !important;
    border-color:var(--ux-line-strong) !important;
}

.btn.danger,
button.danger{
    background:#fff5f5 !important;
    color:#b42318 !important;
    border-color:#ffd1d1 !important;
}

input,
select,
textarea{
    border:1px solid var(--ux-line-strong) !important;
    border-radius:11px !important;
    background:#fff !important;
    color:var(--ux-text) !important;
    box-shadow:none !important;
}

input:focus,
select:focus,
textarea:focus{
    border-color:rgba(82,180,203,.78) !important;
    box-shadow:0 0 0 3px rgba(82,180,203,.12) !important;
    outline:none !important;
}

label{
    color:#50636d !important;
    font-size:12px !important;
    font-weight:680 !important;
}

.table-wrap,
.catalog-table-wrap,
.service-table-wrap,
.ce-table-wrap,
.data-table-wrap,
.list-table-wrap,
.sections-table-wrap,
.daily-appointments-table-wrap,
.responsive-table{
    width:100% !important;
    max-width:100% !important;
    overflow:auto !important;
    border:1px solid var(--ux-line) !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:var(--ux-shadow) !important;
    -webkit-overflow-scrolling:touch;
}

table{
    width:100% !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
    background:#fff !important;
}

th{
    background:#fbfcfd !important;
    color:#62737d !important;
    border-bottom:1px solid var(--ux-line) !important;
    font-size:12px !important;
    font-weight:800 !important;
}

td{
    border-bottom:1px solid #edf3f6 !important;
    color:var(--ux-text) !important;
    font-size:13px !important;
}

tr:hover td{
    background:#fbfdfe !important;
}

/* De-hero admin pages: keep titles/actions, remove marketing banners and noisy stats. */
.ce-hero,
.dashboard-hero,
.role-hero,
.customers-hero,
.workspace-hero,
.settings-shell__hero,
.hr-hero,
.finance-hero,
.inventory-hero,
.inventory-items-hero,
.appointment-list-hero,
.appointment-create-head,
.ticket-page-head,
.sections-page-head,
.catalog-page-head,
.patient-hero,
.process-page-head,
.settings-page-head,
.import-hero{
    min-height:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    padding:2px 0 10px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
}

.ce-hero__eyebrow,
.workspace-hero__eyebrow,
.finance-hero__eyebrow,
.hr-hero__eyebrow,
.inventory-eyebrow,
.settings-page-head__eyebrow,
.sections-page-head__eyebrow,
.catalog-page-head__eyebrow,
.appointment-list-hero .ce-hero__eyebrow{
    display:none !important;
}

.ce-hero h1,
.dashboard-hero h1,
.role-hero h1,
.customers-hero h1,
.workspace-hero h1,
.settings-shell__hero h1,
.hr-hero h1,
.finance-hero h1,
.inventory-hero h1,
.inventory-items-hero h1,
.appointment-list-hero h1,
.appointment-create-head h1,
.ticket-page-head h1,
.sections-page-head h1,
.catalog-page-head h1,
.patient-hero h1,
.process-page-head h1,
.settings-page-head h1,
.import-hero h1{
    margin:0 !important;
    color:var(--ux-text) !important;
    font-size:clamp(18px,1.9vw,24px) !important;
    font-weight:840 !important;
    line-height:1.55 !important;
}

.ce-hero .muted,
.dashboard-hero__lead,
.role-hero__lead,
.workspace-hero .muted,
.finance-hero .muted,
.hr-hero .muted,
.patient-hero .muted,
.inventory-hero__copy p,
.sections-page-head__copy p,
.catalog-page-head__copy p,
.appointment-create-head p,
.settings-page-head p,
.import-hero .muted{
    display:none !important;
}

.ce-hero__side,
.role-hero__side,
.dashboard-hero__side,
.workspace-hero__side,
.finance-hero__side,
.hr-hero__side,
.patient-hero__side,
.appointment-hero-side{
    display:none !important;
}

.ce-hero__meta,
.patient-hero-tags,
.inline-actions,
.actions,
.appointment-create-head__actions,
.workspace-hero__actions,
.finance-hero__actions,
.inventory-hero__actions,
.page-actions,
.card-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    align-items:center !important;
}

.ce-hero__meta-item,
.pill,
.badge,
.status,
.tag{
    border-radius:999px !important;
    background:#f4fafc !important;
    color:#60727c !important;
    border:1px solid var(--ux-line) !important;
    box-shadow:none !important;
}

.form-grid,
.row-grid,
.filter-grid,
.summary-grid,
.dashboard-grid,
.dashboard-summary-grid,
.dashboard-quick-actions,
.ce-panel-grid,
.ce-kpi-grid,
.ce-metric-strip,
.settings-grid,
.settings-studio-layout,
.settings-fields-grid,
.inventory-kpi-grid,
.inventory-workflow-grid,
.inventory-layout,
.inventory-panel-grid{
    gap:12px !important;
    min-width:0 !important;
}

.app-headerbar{
    position:sticky !important;
    top:10px !important;
    z-index:850 !important;
    min-height:56px !important;
    width:auto !important;
    max-width:none !important;
    margin:10px 14px 0 !important;
    padding:8px 10px !important;
    border:1px solid var(--ux-line) !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.96) !important;
    box-shadow:0 1px 2px rgba(18,49,59,.035) !important;
    backdrop-filter:none !important;
}

.app-headerbar__title strong{
    color:var(--ux-text) !important;
    font-size:14px !important;
    font-weight:780 !important;
}

.app-headerbar__title span{
    color:var(--ux-muted) !important;
    font-size:12px !important;
}

.app-headerbar__dropdown{
    position:relative !important;
}

.app-headerbar__dropdown > .submenu,
.app-headerbar__dropdown > .notif-menu{
    position:absolute !important;
    inset-block-start:calc(100% + 8px) !important;
    inset-inline-end:0 !important;
    inset-inline-start:auto !important;
    display:none !important;
    width:min(340px,calc(100vw - 24px)) !important;
    max-width:min(340px,calc(100vw - 24px)) !important;
    max-height:min(440px,72vh) !important;
    overflow:auto !important;
    padding:10px !important;
    border:1px solid var(--ux-line) !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:0 18px 48px rgba(18,49,59,.12) !important;
    z-index:4500 !important;
}

.app-headerbar__dropdown.is-open > .submenu,
.app-headerbar__dropdown.is-open > .notif-menu{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
}

.app-headerbar__icon,
.app-headerbar__profile{
    min-height:38px !important;
    border-radius:12px !important;
    background:#fff !important;
    color:var(--ux-text) !important;
    border:1px solid var(--ux-line) !important;
}

@media (min-width:901px){
    body.has-app-topbar,
    body:has(.app-topbar){
        padding:0 var(--shell-sidebar) 0 0 !important;
        overflow-x:hidden !important;
    }

    body.has-app-topbar.sidebar-collapsed,
    body:has(.app-topbar).sidebar-collapsed{
        padding-right:var(--shell-sidebar-collapsed) !important;
    }

    .app-topbar,
    body.has-app-topbar .app-topbar,
    body:has(.app-topbar) .app-topbar{
        position:fixed !important;
        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:auto !important;
        inset:auto !important;
        width:var(--shell-sidebar) !important;
        max-width:var(--shell-sidebar) !important;
        height:100dvh !important;
        min-height:100dvh !important;
        padding:10px 9px !important;
        border:0 !important;
        border-left:1px solid var(--ux-line) !important;
        border-radius:0 !important;
        background:#fff !important;
        box-shadow:none !important;
        direction:rtl !important;
        transition:width .18s ease !important;
        z-index:1200 !important;
    }

    body.sidebar-collapsed .app-topbar{
        width:var(--shell-sidebar-collapsed) !important;
        max-width:var(--shell-sidebar-collapsed) !important;
        overflow:hidden !important;
    }

    .app-topbar__brand{
        min-height:46px !important;
        padding:4px 8px 9px !important;
        margin:0 0 6px !important;
        border-bottom:1px solid var(--ux-line) !important;
        color:var(--ux-text) !important;
    }

    .app-topbar__brand img{
        width:30px !important;
        height:30px !important;
        border:1px solid var(--ux-line) !important;
        border-radius:10px !important;
        padding:3px !important;
        background:#fff !important;
    }

    .app-topbar__brand > span:not(.app-topbar__version){
        color:var(--ux-text) !important;
        font-size:13px !important;
        font-weight:820 !important;
    }

    .app-topbar__version{
        margin-inline-start:auto !important;
        background:#eef9fc !important;
        color:var(--ux-brand-700) !important;
        border:1px solid rgba(82,180,203,.2) !important;
        font-size:10px !important;
    }

    .app-topbar__toggle{
        display:inline-flex !important;
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
        margin:0 auto 8px !important;
        border:1px solid var(--ux-line) !important;
        border-radius:11px !important;
        background:#fff !important;
    }

    .app-topbar__toggle span{
        width:15px !important;
        background:var(--ux-brand-700) !important;
    }

    .app-topbar__menu{
        width:100% !important;
        max-width:100% !important;
        flex:1 1 auto !important;
        display:flex !important;
        flex-direction:column !important;
        flex-wrap:nowrap !important;
        gap:3px !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
        padding:2px 0 16px !important;
        scrollbar-width:thin !important;
        scrollbar-color:#c8dbe3 transparent !important;
    }

    .app-topbar__menu::-webkit-scrollbar{width:5px !important}
    .app-topbar__menu::-webkit-scrollbar-thumb{background:#c8dbe3 !important;border-radius:999px !important}

    .app-topbar__menu > a,
    .app-topbar__menu .menu-item > a,
    .app-topbar__menu .menu-item > button,
    .app-topbar__menu .notif-button{
        min-height:38px !important;
        display:grid !important;
        grid-template-columns:30px minmax(0,1fr) 22px !important;
        gap:7px !important;
        align-items:center !important;
        padding:5px 7px !important;
        border:1px solid transparent !important;
        border-radius:11px !important;
        background:transparent !important;
        color:var(--ux-muted) !important;
        font-size:12.5px !important;
        font-weight:720 !important;
        text-align:right !important;
        box-shadow:none !important;
    }

    .app-topbar__menu > a::before,
    .app-topbar__menu .menu-item > a::before,
    .app-topbar__menu .menu-item > button::before,
    .app-topbar__menu .notif-button::before{
        content:attr(data-menu-icon);
        width:28px !important;
        height:28px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        border:1px solid var(--ux-line) !important;
        border-radius:10px !important;
        background:#fff !important;
        color:#768790 !important;
        font-size:14px !important;
        font-weight:820 !important;
        line-height:1 !important;
    }

    .app-topbar__menu > a:hover,
    .app-topbar__menu .menu-item > a:hover,
    .app-topbar__menu .menu-item > button:hover,
    .app-topbar__menu .notif-button:hover,
    .app-topbar__menu .menu-item.is-open > a,
    .app-topbar__menu .menu-item.is-open > button{
        background:#f7fbfc !important;
        color:var(--ux-brand-700) !important;
        border-color:var(--ux-line) !important;
    }

    .app-topbar__menu > a.is-active,
    .app-topbar__menu .menu-item > a.is-active,
    .app-topbar__menu .menu-item.has-active-child.is-open > a{
        background:#eef9fc !important;
        color:var(--ux-brand-800) !important;
        border-color:rgba(82,180,203,.22) !important;
        box-shadow:none !important;
    }

    body:not(.sidebar-collapsed) .app-topbar__menu .menu-item.has-active-child > a.is-active:not(:hover):not(:focus){
        background:transparent !important;
        color:var(--ux-muted) !important;
        border-color:transparent !important;
    }

    .menu-caret{
        width:22px !important;
        height:22px !important;
        border:1px solid var(--ux-line) !important;
        border-radius:8px !important;
        background:#fff !important;
        color:#7b8d96 !important;
    }

    .menu-caret::before{
        width:7px !important;
        height:7px !important;
        border-inline-end:2px solid currentColor !important;
        border-block-end:2px solid currentColor !important;
        transform:rotate(45deg) !important;
    }

    .menu-item.is-open > a .menu-caret::before,
    .menu-item.is-open > button .menu-caret::before{
        transform:rotate(-135deg) translate(-1px,-1px) !important;
    }

    .app-topbar__menu .submenu,
    .app-topbar__menu .notif-menu{
        position:static !important;
        display:none !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        max-height:42vh !important;
        overflow:auto !important;
        margin:3px 8px 7px 0 !important;
        padding:5px !important;
        border:1px solid var(--ux-line) !important;
        border-right:2px solid rgba(82,180,203,.28) !important;
        border-radius:12px 4px 12px 12px !important;
        background:#fbfdfe !important;
        box-shadow:none !important;
    }

    .app-topbar__menu .menu-item:hover > .submenu,
    .app-topbar__menu .menu-item:focus-within > .submenu,
    .app-topbar__menu .menu-item:hover > .notif-menu,
    .app-topbar__menu .menu-item:focus-within > .notif-menu{
        display:none !important;
    }

    .app-topbar__menu .menu-item.is-open > .submenu,
    .app-topbar__menu .menu-item.is-open > .notif-menu,
    .app-topbar__menu:not(.has-user-open) .menu-item.has-active-child > .submenu{
        display:flex !important;
        flex-direction:column !important;
        gap:2px !important;
    }

    .app-topbar__menu.has-user-open .menu-item.has-active-child:not(.is-open) > .submenu,
    .app-topbar__menu.has-user-open .menu-item.has-active-child:not(.is-open) > .notif-menu{
        display:none !important;
    }

    .app-topbar__menu .submenu a,
    .app-topbar__menu .submenu button,
    .app-topbar__menu .notif-item{
        min-height:30px !important;
        padding:6px 8px !important;
        border-radius:9px !important;
        background:transparent !important;
        color:var(--ux-muted) !important;
        border:1px solid transparent !important;
        font-size:12px !important;
        font-weight:650 !important;
    }

    .app-topbar__menu .submenu a:hover,
    .app-topbar__menu .submenu a.is-active,
    .app-topbar__menu .notif-item:hover{
        background:#eef9fc !important;
        color:var(--ux-brand-700) !important;
        border-color:rgba(82,180,203,.16) !important;
        box-shadow:none !important;
    }

    .app-topbar__menu .submenu-title,
    .app-topbar__menu .notif-title{
        color:#98a7ae !important;
        border-bottom-color:var(--ux-line) !important;
        font-size:10.5px !important;
        font-weight:760 !important;
    }

    body.sidebar-collapsed .app-topbar__brand{
        justify-content:center !important;
        padding-inline:0 !important;
    }

    body.sidebar-collapsed .app-topbar__brand > span,
    body.sidebar-collapsed .app-topbar__version,
    body.sidebar-collapsed .app-topbar__menu-head,
    body.sidebar-collapsed .app-topbar__menu-search,
    body.sidebar-collapsed .app-topbar__menu > a > span,
    body.sidebar-collapsed .app-topbar__menu .menu-item > a > span,
    body.sidebar-collapsed .app-topbar__menu .menu-item > button > span,
    body.sidebar-collapsed .menu-caret,
    body.sidebar-collapsed .submenu,
    body.sidebar-collapsed .notif-menu{
        display:none !important;
    }

    body.sidebar-collapsed .app-topbar__menu > a,
    body.sidebar-collapsed .app-topbar__menu .menu-item > a,
    body.sidebar-collapsed .app-topbar__menu .menu-item > button,
    body.sidebar-collapsed .app-topbar__menu .notif-button{
        grid-template-columns:1fr !important;
        justify-items:center !important;
        padding:5px !important;
        font-size:0 !important;
    }

    body.sidebar-collapsed .app-topbar__menu > a::before,
    body.sidebar-collapsed .app-topbar__menu .menu-item > a::before,
    body.sidebar-collapsed .app-topbar__menu .menu-item > button::before,
    body.sidebar-collapsed .app-topbar__menu .notif-button::before{
        width:32px !important;
        height:32px !important;
        border-radius:11px !important;
        font-size:15px !important;
    }

    body.sidebar-collapsed .app-topbar__menu > a.is-active::before,
    body.sidebar-collapsed .app-topbar__menu .menu-item > a.is-active::before,
    body.sidebar-collapsed .app-topbar__menu .menu-item.has-active-child > a::before{
        background:var(--ux-brand) !important;
        color:#fff !important;
        border-color:var(--ux-brand) !important;
    }
}

@media (max-width:900px){
    body.has-app-topbar,
    body.has-app-topbar.sidebar-collapsed,
    body:has(.app-topbar){
        padding:58px 0 0 !important;
        overflow-x:hidden !important;
    }

    .app-topbar{
        position:fixed !important;
        top:0 !important;
        right:0 !important;
        left:0 !important;
        bottom:auto !important;
        width:100% !important;
        min-height:58px !important;
        height:58px !important;
        padding:8px 12px !important;
        border:0 !important;
        border-bottom:1px solid var(--ux-line) !important;
        border-radius:0 !important;
        background:#fff !important;
        box-shadow:none !important;
        z-index:2200 !important;
    }

    .app-topbar__brand{
        min-width:0 !important;
        color:var(--ux-text) !important;
    }

    .app-topbar__brand > span:not(.app-topbar__version){
        max-width:46vw !important;
        color:var(--ux-text) !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    .app-topbar__toggle{
        display:inline-flex !important;
        background:var(--ux-brand) !important;
        border:0 !important;
        border-radius:11px !important;
    }

    .app-topbar__toggle span{
        background:#fff !important;
    }

    .app-topbar__menu{
        position:fixed !important;
        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:auto !important;
        width:clamp(248px,70vw,340px) !important;
        max-width:clamp(248px,70vw,340px) !important;
        height:100dvh !important;
        max-height:100dvh !important;
        display:flex !important;
        flex-direction:column !important;
        gap:4px !important;
        padding:10px !important;
        padding-bottom:72px !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
        border:0 !important;
        border-left:1px solid var(--ux-line) !important;
        border-radius:0 !important;
        background:#fff !important;
        box-shadow:-14px 0 34px rgba(18,49,59,.12) !important;
        transform:translateX(100%) !important;
        transition:transform .2s ease !important;
        z-index:2300 !important;
    }

    body.menu-open{
        overflow:hidden !important;
    }

    body.menu-open .app-topbar__menu{
        transform:translateX(0) !important;
    }

    .app-topbar__menu-head{
        min-height:42px !important;
        padding:6px 8px !important;
        border:1px solid var(--ux-line) !important;
        border-radius:12px !important;
        background:#fff !important;
    }

    .app-topbar__menu-search{
        display:none !important;
    }

    .app-topbar__menu > a,
    .app-topbar__menu .menu-item > a,
    .app-topbar__menu .menu-item > button,
    .app-topbar__menu .notif-button{
        min-height:38px !important;
        display:grid !important;
        grid-template-columns:30px minmax(0,1fr) 22px !important;
        gap:7px !important;
        align-items:center !important;
        padding:5px 7px !important;
        border-radius:11px !important;
        background:#fff !important;
        color:var(--ux-muted) !important;
        border:1px solid transparent !important;
        font-size:12.5px !important;
        font-weight:720 !important;
        text-align:right !important;
        box-shadow:none !important;
    }

    .app-topbar__menu > a::before,
    .app-topbar__menu .menu-item > a::before,
    .app-topbar__menu .menu-item > button::before,
    .app-topbar__menu .notif-button::before{
        content:attr(data-menu-icon);
        width:28px !important;
        height:28px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        border:1px solid var(--ux-line) !important;
        border-radius:10px !important;
        background:#fff !important;
        color:#768790 !important;
        font-size:14px !important;
        font-weight:820 !important;
    }

    .app-topbar__menu > a.is-active,
    .app-topbar__menu .menu-item > a.is-active,
    .app-topbar__menu .menu-item.has-active-child.is-open > a{
        background:#eef9fc !important;
        color:var(--ux-brand-800) !important;
        border-color:rgba(82,180,203,.22) !important;
    }

    .app-topbar__menu .submenu,
    .app-topbar__menu .notif-menu{
        position:static !important;
        display:none !important;
        max-height:none !important;
        overflow:visible !important;
        margin:3px 8px 7px 0 !important;
        padding:5px !important;
        border:1px solid var(--ux-line) !important;
        border-right:2px solid rgba(82,180,203,.28) !important;
        border-radius:12px 4px 12px 12px !important;
        background:#fbfdfe !important;
        box-shadow:none !important;
    }

    .app-topbar__menu .menu-item.is-open > .submenu,
    .app-topbar__menu .menu-item.is-open > .notif-menu,
    .app-topbar__menu:not(.has-user-open) .menu-item.has-active-child > .submenu{
        display:flex !important;
        flex-direction:column !important;
        gap:2px !important;
    }

    .app-topbar__menu .submenu a,
    .app-topbar__menu .submenu button,
    .app-topbar__menu .notif-item{
        min-height:30px !important;
        padding:6px 8px !important;
        border-radius:9px !important;
        background:transparent !important;
        color:var(--ux-muted) !important;
        border:1px solid transparent !important;
        font-size:12px !important;
    }

    .app-headerbar{
        position:static !important;
        margin:10px 10px 0 !important;
        border-radius:14px !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:8px !important;
    }

    .app-headerbar__search,
    .app-headerbar__actions{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
    }

    .ce-hero,
    .dashboard-hero,
    .role-hero,
    .customers-hero,
    .workspace-hero,
    .settings-shell__hero,
    .hr-hero,
    .finance-hero,
    .inventory-hero,
    .inventory-items-hero,
    .appointment-list-hero,
    .appointment-create-head,
    .ticket-page-head,
    .sections-page-head,
    .catalog-page-head,
    .patient-hero,
    .process-page-head,
    .settings-page-head,
    .import-hero{
        flex-direction:column !important;
        align-items:stretch !important;
        gap:8px !important;
        padding:0 0 8px !important;
    }

    .card{
        padding:12px !important;
        border-radius:14px !important;
    }

    .form-grid,
    .row-grid,
    .filter-grid,
    .summary-grid,
    .dashboard-grid,
    .dashboard-summary-grid,
    .dashboard-quick-actions,
    .ce-panel-grid,
    .ce-kpi-grid,
    .settings-grid,
    .settings-studio-layout,
    .settings-fields-grid,
    .inventory-kpi-grid,
    .inventory-workflow-grid,
    .inventory-layout,
    .inventory-panel-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
    }

    .table-wrap table,
    .catalog-table-wrap table,
    .service-table-wrap table,
    .ce-table-wrap table,
    .data-table-wrap table,
    .list-table-wrap table,
    .sections-table-wrap table,
    .responsive-table table{
        min-width:620px !important;
    }
}

/* Clinica menu icons v10: internal SVG icons replace text/glyph fallbacks. */
.app-topbar__menu > a::before,
.app-topbar__menu .menu-item > a::before,
.app-topbar__menu .menu-item > button::before,
.app-topbar__menu .notif-button::before{
    content:none !important;
    display:none !important;
}

.app-topbar__menu .menu-icon{
    width:28px !important;
    height:28px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 28px !important;
    border:1px solid var(--ux-line, #e4edf2) !important;
    border-radius:10px !important;
    background:#fff !important;
    color:#738691 !important;
    grid-column:1 !important;
}

.app-topbar__menu .menu-icon svg{
    width:17px !important;
    height:17px !important;
    display:block !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

.app-topbar__menu > a.is-active .menu-icon,
.app-topbar__menu .menu-item > a.is-active .menu-icon,
.app-topbar__menu .menu-item.has-active-child > a .menu-icon,
.app-topbar__menu .menu-item.is-open > a .menu-icon,
.app-topbar__menu .menu-item.is-open > button .menu-icon{
    background:#eef9fc !important;
    border-color:rgba(82,180,203,.28) !important;
    color:var(--ux-brand-700, #14788d) !important;
}

@media (min-width:901px){
    body.sidebar-collapsed .app-topbar__menu .menu-icon{
        display:inline-flex !important;
        width:32px !important;
        height:32px !important;
        flex-basis:32px !important;
        border-radius:11px !important;
    }

    body.sidebar-collapsed .app-topbar__menu .menu-icon svg{
        width:18px !important;
        height:18px !important;
    }

    body.sidebar-collapsed .app-topbar__menu > a.is-active .menu-icon,
    body.sidebar-collapsed .app-topbar__menu .menu-item > a.is-active .menu-icon,
    body.sidebar-collapsed .app-topbar__menu .menu-item.has-active-child > a .menu-icon{
        background:var(--ux-brand, #52b4cb) !important;
        border-color:var(--ux-brand, #52b4cb) !important;
        color:#fff !important;
    }
}

@media (max-width:900px){
    .app-topbar__menu .menu-icon{
        width:28px !important;
        height:28px !important;
    }
}

/* Clinica navigation toggle v11: dock the collapse control near the sidebar header. */
.app-topbar__toggle{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    border:1px solid rgba(82,180,203,.24) !important;
    background:linear-gradient(180deg,#ffffff 0%,#f4fbfd 100%) !important;
    color:var(--ux-brand-700, #14788d) !important;
    box-shadow:0 8px 22px rgba(18,49,59,.07) !important;
    transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease !important;
}

.app-topbar__toggle:hover,
.app-topbar__toggle:focus-visible{
    border-color:rgba(82,180,203,.46) !important;
    background:#eef9fc !important;
    box-shadow:0 10px 26px rgba(18,49,59,.1) !important;
    outline:none !important;
}

.app-topbar__toggle::before{
    content:"" !important;
    position:absolute !important;
    inset-block:9px !important;
    inset-inline-start:9px !important;
    width:2px !important;
    border-radius:999px !important;
    background:currentColor !important;
    opacity:.42 !important;
}

.app-topbar__toggle span{
    position:absolute !important;
    left:auto !important;
    right:13px !important;
    width:13px !important;
    height:2px !important;
    border-radius:999px !important;
    background:currentColor !important;
    transform-origin:center !important;
    transition:transform .18s ease,width .18s ease,opacity .18s ease !important;
}

.app-topbar__toggle span:nth-child(1){transform:translateY(-5px) !important}
.app-topbar__toggle span:nth-child(2){transform:translateY(0) !important}
.app-topbar__toggle span:nth-child(3){transform:translateY(5px) !important}

@media (min-width:901px){
    .app-topbar__brand{
        padding-left:52px !important;
    }

    .app-topbar__toggle{
        position:absolute !important;
        top:14px !important;
        left:12px !important;
        z-index:5 !important;
        width:38px !important;
        height:34px !important;
        min-width:38px !important;
        margin:0 !important;
        border-radius:12px !important;
    }

    body.sidebar-collapsed .app-topbar__toggle{
        top:12px !important;
        left:50% !important;
        width:38px !important;
        height:34px !important;
        transform:translateX(-50%) !important;
    }

    body.sidebar-collapsed .app-topbar__brand{
        margin-top:38px !important;
        padding-left:0 !important;
    }

    body.sidebar-collapsed .app-topbar__toggle span:nth-child(1){
        width:10px !important;
        transform:translate(-2px,-3px) rotate(45deg) !important;
    }

    body.sidebar-collapsed .app-topbar__toggle span:nth-child(2){
        width:14px !important;
        transform:translateY(0) !important;
    }

    body.sidebar-collapsed .app-topbar__toggle span:nth-child(3){
        width:10px !important;
        transform:translate(-2px,3px) rotate(-45deg) !important;
    }
}

@media (max-width:900px){
    .app-topbar__toggle{
        position:relative !important;
        inset:auto !important;
        order:-1 !important;
        width:42px !important;
        height:42px !important;
        min-width:42px !important;
        margin:0 !important;
        border-radius:14px !important;
        background:var(--ux-brand, #52b4cb) !important;
        color:#fff !important;
        border-color:transparent !important;
        box-shadow:0 10px 24px rgba(82,180,203,.2) !important;
        transform:none !important;
    }

    .app-topbar__toggle::before{
        opacity:.55 !important;
    }

    .app-topbar__toggle span{
        right:14px !important;
        width:14px !important;
    }

    body.menu-open .app-topbar__toggle{
        background:#17323b !important;
        box-shadow:0 12px 28px rgba(18,49,59,.18) !important;
    }

    body.menu-open .app-topbar__toggle span:nth-child(1){
        width:18px !important;
        transform:translateY(0) rotate(45deg) !important;
    }

    body.menu-open .app-topbar__toggle span:nth-child(2){
        opacity:0 !important;
    }

    body.menu-open .app-topbar__toggle span:nth-child(3){
        width:18px !important;
        transform:translateY(0) rotate(-45deg) !important;
    }
}

button.app-topbar__toggle:not(.secondary):not(.light):not(.danger){
    background:linear-gradient(180deg,#ffffff 0%,#f4fbfd 100%) !important;
    color:var(--ux-brand-700, #14788d) !important;
    border-color:rgba(82,180,203,.24) !important;
}

button.app-topbar__toggle:not(.secondary):not(.light):not(.danger):hover,
button.app-topbar__toggle:not(.secondary):not(.light):not(.danger):focus-visible{
    background:#eef9fc !important;
    color:var(--ux-brand-800, #0f5f73) !important;
    border-color:rgba(82,180,203,.46) !important;
}

@media (max-width:900px){
    button.app-topbar__toggle:not(.secondary):not(.light):not(.danger){
        background:var(--ux-brand, #52b4cb) !important;
        color:#fff !important;
        border-color:transparent !important;
    }

    body.menu-open button.app-topbar__toggle:not(.secondary):not(.light):not(.danger){
        background:#17323b !important;
        color:#fff !important;
    }
}

/* Clinica readability guard v12: old dark-hero fragments must stay readable after de-hero. */
.ce-hero,
.dashboard-hero,
.role-hero,
.customers-hero,
.workspace-hero,
.settings-shell__hero,
.hr-hero,
.finance-hero,
.inventory-hero,
.inventory-items-hero,
.appointment-list-hero,
.appointment-create-head,
.ticket-page-head,
.sections-page-head,
.catalog-page-head,
.patient-hero,
.process-page-head,
.settings-page-head,
.import-hero{
    color:var(--ux-text, #12313a) !important;
}

.ce-hero p,
.ce-hero span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.dashboard-hero p,
.dashboard-hero span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.role-hero p,
.role-hero span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.customers-hero p,
.customers-hero span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.workspace-hero p,
.workspace-hero span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.settings-shell__hero p,
.settings-shell__hero span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.hr-hero p,
.hr-hero span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.finance-hero p,
.finance-hero span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.inventory-hero p,
.inventory-hero span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.inventory-items-hero p,
.inventory-items-hero span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.appointment-list-hero p,
.appointment-list-hero span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.appointment-create-head p,
.appointment-create-head span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.ticket-page-head p,
.ticket-page-head span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.sections-page-head p,
.sections-page-head span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.catalog-page-head p,
.catalog-page-head span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.patient-hero p,
.patient-hero span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.process-page-head p,
.process-page-head span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.settings-page-head p,
.settings-page-head span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.import-hero p,
.import-hero span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag){
    color:var(--ux-muted, #60727c) !important;
}

.customers-hero-badge,
.customers-view-switch a,
.customers-kpi,
.workspace-hero__eyebrow,
.workspace-hero__side,
.finance-hero__eyebrow,
.finance-hero__meta,
.hr-hero__meta,
.appointment-hero-kpi,
.appointment-list-hero .ce-hero__meta-item,
.inventory-hero .pill,
.inventory-items-hero .pill,
.settings-page-head .pill,
.sections-page-head .pill,
.catalog-page-head .pill,
.patient-hero-tag{
    background:#f4fafc !important;
    color:var(--ux-muted, #60727c) !important;
    border:1px solid var(--ux-line, #dce8ef) !important;
    box-shadow:none !important;
}

.customers-view-switch a.is-active,
.appointment-view-tabs .is-active,
.patient-tab-btn.is-active{
    background:var(--ux-brand, #52b4cb) !important;
    color:#fff !important;
    border-color:var(--ux-brand, #52b4cb) !important;
}

.customers-kpi .label,
.customers-kpi .value,
.workspace-hero__side strong,
.workspace-hero__side span,
.finance-hero__meta span,
.hr-hero__meta span,
.appointment-hero-kpi span,
.appointment-hero-kpi strong{
    color:var(--ux-text, #12313a) !important;
}

.customers-hero-badges,
.customers-kpi-grid,
.customers-insight-grid,
.workspace-hero__side,
.finance-hero__side,
.hr-hero__side,
.appointment-hero-side{
    display:none !important;
}

.card,
.ce-panel,
.dashboard-summary-card,
.dashboard-quick-action,
.service-card,
.subservice-card,
.board-card,
.detail-card,
.settings-field-card,
.settings-studio-panel,
.settings-group-card,
.summary-item,
.metric-card,
.process-kpi,
.patient-gallery-board,
.patient-gallery-item,
.inventory-kpi,
.inventory-panel,
.inventory-action-card,
.inventory-list-item{
    color:var(--ux-text, #12313a) !important;
}

.card p,
.card span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.ce-panel p,
.ce-panel span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.dashboard-summary-card p,
.dashboard-summary-card span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.dashboard-quick-action p,
.dashboard-quick-action span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.metric-card p,
.metric-card span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag),
.detail-card p,
.detail-card span:not(.btn):not(.badge):not(.pill):not(.status):not(.tag){
    color:inherit !important;
}

/* Clinica summary rows v13: keep labels and values visually separated. */
.summary-item{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
    align-content:start !important;
    min-width:0 !important;
    min-height:58px !important;
    padding:12px 13px !important;
    border:1px solid var(--ux-line, #dce8ef) !important;
    border-radius:14px !important;
    background:#fff !important;
    color:var(--ux-text, #12313a) !important;
    box-shadow:none !important;
    line-height:1.65 !important;
}

.summary-item strong{
    display:block !important;
    margin:0 !important;
    color:var(--ux-muted, #60727c) !important;
    font-size:12px !important;
    font-weight:760 !important;
    line-height:1.45 !important;
}

.summary-item span{
    display:block !important;
    min-width:0 !important;
    color:var(--ux-text, #12313a) !important;
    font-size:13px !important;
    font-weight:820 !important;
    line-height:1.7 !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
}

.summary-item .muted,
.summary-item small{
    color:var(--ux-muted, #60727c) !important;
}

a.summary-item{
    text-decoration:none !important;
}

a.summary-item:hover{
    border-color:rgba(82,180,203,.34) !important;
    background:#f7fbfc !important;
}

.ticket-info-grid,
.settings-related-grid,
.summary-grid,
.process-info-grid{
    gap:10px !important;
}

/* Clinica label-value rows v14: prevent compact metadata from gluing labels to values. */
.card .row,
.appointment-summary .row,
.invoice-grid .row,
.summary-card .row,
.row-grid > .row,
.appointment-summary__grid > .row,
.ticket-info-grid > .row,
.patient-info-row,
.detail-row,
.info-row,
.meta-row,
.ce-detail-row{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:flex-start !important;
    gap:6px 10px !important;
    min-width:0 !important;
    line-height:1.75 !important;
    color:var(--ux-text, #12313a) !important;
}

.card .row .label,
.appointment-summary .row .label,
.invoice-grid .row .label,
.summary-card .row .label,
.row-grid > .row .label,
.appointment-summary__grid > .row .label,
.ticket-info-grid > .row .label,
.patient-info-row strong,
.detail-row strong,
.info-row strong,
.meta-row strong,
.ce-detail-row strong{
    display:inline-flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    margin:0 !important;
    color:var(--ux-muted, #60727c) !important;
    font-size:12px !important;
    font-weight:760 !important;
    line-height:1.55 !important;
    white-space:nowrap !important;
}

.card .row > span:not(.label):not(.status):not(.badge):not(.pill):not(.tag),
.appointment-summary .row > span:not(.label):not(.status):not(.badge):not(.pill):not(.tag),
.invoice-grid .row > span:not(.label):not(.status):not(.badge):not(.pill):not(.tag),
.summary-card .row > span:not(.label):not(.status):not(.badge):not(.pill):not(.tag),
.row-grid > .row > span:not(.label):not(.status):not(.badge):not(.pill):not(.tag),
.appointment-summary__grid > .row > span:not(.label):not(.status):not(.badge):not(.pill):not(.tag),
.ticket-info-grid > .row > span:not(.label):not(.status):not(.badge):not(.pill):not(.tag),
.patient-info-row span,
.detail-row span,
.info-row span,
.meta-row span,
.ce-detail-row span{
    display:inline-flex !important;
    min-width:0 !important;
    color:var(--ux-text, #12313a) !important;
    font-size:13px !important;
    font-weight:720 !important;
    line-height:1.75 !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
}

.row-grid,
.appointment-summary__grid,
.ticket-info-grid,
.patient-info-grid,
.detail-grid,
.info-grid{
    gap:10px !important;
}

@media (max-width:700px){
    .card .row,
    .appointment-summary .row,
    .invoice-grid .row,
    .summary-card .row,
    .row-grid > .row,
    .appointment-summary__grid > .row,
    .ticket-info-grid > .row,
    .patient-info-row,
    .detail-row,
    .info-row,
    .meta-row,
    .ce-detail-row{
        flex-direction:column !important;
        gap:4px !important;
    }

    .card .row .label,
    .appointment-summary .row .label,
    .invoice-grid .row .label,
    .summary-card .row .label,
    .row-grid > .row .label,
    .appointment-summary__grid > .row .label,
    .ticket-info-grid > .row .label,
    .patient-info-row strong,
    .detail-row strong,
    .info-row strong,
    .meta-row strong,
    .ce-detail-row strong{
        width:100% !important;
        white-space:normal !important;
    }
}

/* Clinica shell placement v15: keep the RTL navigation pinned in the right place. */
@media (min-width:901px){
    body.has-app-topbar,
    body:has(.app-topbar){
        padding:0 var(--shell-sidebar, 224px) 0 0 !important;
        margin:0 !important;
        overflow-x:hidden !important;
    }

    body.has-app-topbar.sidebar-collapsed,
    body:has(.app-topbar).sidebar-collapsed{
        padding:0 var(--shell-sidebar-collapsed, 68px) 0 0 !important;
    }

    body.has-app-topbar .app-topbar,
    body:has(.app-topbar) .app-topbar{
        position:fixed !important;
        inset:0 0 0 auto !important;
        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:auto !important;
        width:var(--shell-sidebar, 224px) !important;
        max-width:var(--shell-sidebar, 224px) !important;
        min-width:0 !important;
        height:100dvh !important;
        min-height:100dvh !important;
        margin:0 !important;
        transform:none !important;
        z-index:1200 !important;
    }

    body.sidebar-collapsed .app-topbar{
        inset:0 0 0 auto !important;
        width:var(--shell-sidebar-collapsed, 68px) !important;
        max-width:var(--shell-sidebar-collapsed, 68px) !important;
    }

    body.has-app-topbar .content,
    body.has-app-topbar main,
    body.has-app-topbar .container{
        max-width:100% !important;
        min-width:0 !important;
    }

    .app-topbar__toggle{
        right:auto !important;
        left:10px !important;
    }

    body.sidebar-collapsed .app-topbar__toggle{
        right:auto !important;
        left:50% !important;
        transform:translateX(-50%) !important;
    }
}

@media (max-width:900px){
    body.has-app-topbar,
    body.has-app-topbar.sidebar-collapsed,
    body:has(.app-topbar){
        padding:58px 0 0 !important;
        overflow-x:hidden !important;
    }

    body.has-app-topbar .app-topbar,
    body:has(.app-topbar) .app-topbar{
        position:fixed !important;
        inset:0 0 auto 0 !important;
        width:100% !important;
        max-width:100% !important;
        height:58px !important;
        min-height:58px !important;
        margin:0 !important;
        transform:none !important;
        z-index:2200 !important;
    }

    body.has-app-topbar .app-topbar__menu,
    body:has(.app-topbar) .app-topbar__menu{
        position:fixed !important;
        inset:0 0 0 auto !important;
        right:0 !important;
        left:auto !important;
        width:70vw !important;
        max-width:340px !important;
        min-width:0 !important;
        height:100dvh !important;
        max-height:100dvh !important;
        border-radius:0 !important;
        transform:translateX(100%) !important;
        z-index:2300 !important;
    }

    body.menu-open .app-topbar__menu{
        transform:translateX(0) !important;
    }

    body.menu-open::after{
        content:"" !important;
        position:fixed !important;
        inset:0 !important;
        z-index:2190 !important;
        background:rgba(18,49,59,.16) !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }
}

/* Clinica menu refinement v16: version footer, lighter icons, cleaner mobile close. */
.app-topbar__brand .app-topbar__version{
    display:none !important;
}

.app-topbar__menu-footer{
    margin-top:auto !important;
    padding:10px 6px 2px !important;
    border-top:1px solid var(--ux-line, #dce8ef) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.app-topbar__menu-version{
    min-height:26px !important;
    padding:5px 10px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid rgba(82,180,203,.18) !important;
    border-radius:999px !important;
    background:#f7fcfd !important;
    color:var(--ux-muted, #60727c) !important;
    font-size:10.5px !important;
    font-weight:760 !important;
    line-height:1 !important;
}

.app-topbar__menu .menu-icon{
    width:24px !important;
    height:24px !important;
    flex-basis:24px !important;
    border-color:transparent !important;
    border-radius:9px !important;
    background:transparent !important;
    color:#7f9098 !important;
}

.app-topbar__menu .menu-icon svg{
    width:16px !important;
    height:16px !important;
    stroke-width:1.75 !important;
}

.app-topbar__menu > a,
.app-topbar__menu .menu-item > a,
.app-topbar__menu .menu-item > button,
.app-topbar__menu .notif-button{
    grid-template-columns:26px minmax(0,1fr) 20px !important;
    gap:8px !important;
}

.app-topbar__menu > a:hover .menu-icon,
.app-topbar__menu .menu-item > a:hover .menu-icon,
.app-topbar__menu .menu-item > button:hover .menu-icon,
.app-topbar__menu .notif-button:hover .menu-icon,
.app-topbar__menu > a.is-active .menu-icon,
.app-topbar__menu .menu-item > a.is-active .menu-icon,
.app-topbar__menu .menu-item.has-active-child > a .menu-icon,
.app-topbar__menu .menu-item.is-open > a .menu-icon,
.app-topbar__menu .menu-item.is-open > button .menu-icon{
    background:#eef9fc !important;
    border-color:transparent !important;
    color:var(--ux-brand-700, #14788d) !important;
}

.app-topbar__toggle{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    border-radius:10px !important;
    background:#fff !important;
    color:var(--ux-brand-700, #14788d) !important;
    border-color:var(--ux-line, #dce8ef) !important;
    box-shadow:none !important;
}

.app-topbar__toggle::before{
    display:none !important;
}

.app-topbar__toggle span{
    right:50% !important;
    width:15px !important;
    transform:translateX(50%) !important;
}

.app-topbar__toggle span:nth-child(1){transform:translate(50%, -5px) !important}
.app-topbar__toggle span:nth-child(2){transform:translateX(50%) !important}
.app-topbar__toggle span:nth-child(3){transform:translate(50%, 5px) !important}

@media (min-width:901px){
    .app-topbar__brand{
        padding-left:46px !important;
    }

    .app-topbar__toggle{
        top:12px !important;
        left:10px !important;
        width:32px !important;
        height:32px !important;
        min-width:32px !important;
    }

    body.sidebar-collapsed .app-topbar__toggle{
        top:12px !important;
        width:32px !important;
        height:32px !important;
        min-width:32px !important;
    }

    body.sidebar-collapsed .app-topbar__menu-footer{
        padding-inline:0 !important;
    }

    body.sidebar-collapsed .app-topbar__menu-version{
        width:34px !important;
        height:24px !important;
        padding:0 !important;
        overflow:hidden !important;
        font-size:0 !important;
    }

    body.sidebar-collapsed .app-topbar__menu-version::before{
        content:"v" !important;
        font-size:10px !important;
        font-weight:820 !important;
    }
}

@media (max-width:900px){
    .app-topbar__toggle,
    button.app-topbar__toggle:not(.secondary):not(.light):not(.danger){
        width:36px !important;
        height:36px !important;
        min-width:36px !important;
        border-radius:11px !important;
        background:#fff !important;
        color:var(--ux-brand-700, #14788d) !important;
        border:1px solid var(--ux-line, #dce8ef) !important;
        box-shadow:none !important;
    }

    body.menu-open .app-topbar__toggle,
    body.menu-open button.app-topbar__toggle:not(.secondary):not(.light):not(.danger){
        background:#fff !important;
        color:var(--ux-brand-700, #14788d) !important;
        border-color:rgba(82,180,203,.3) !important;
        box-shadow:none !important;
    }

    body.menu-open .app-topbar__toggle span:nth-child(1){
        width:16px !important;
        transform:translateX(50%) rotate(45deg) !important;
    }

    body.menu-open .app-topbar__toggle span:nth-child(3){
        width:16px !important;
        transform:translateX(50%) rotate(-45deg) !important;
    }

    .app-topbar__menu-head{
        position:relative !important;
        min-height:48px !important;
        padding:8px 10px 8px 44px !important;
        border:0 !important;
        border-bottom:1px solid var(--ux-line, #dce8ef) !important;
        border-radius:0 !important;
        background:#fff !important;
        box-shadow:none !important;
    }

    .app-topbar__menu-title{
        color:var(--ux-text, #12313a) !important;
        font-size:14px !important;
        font-weight:830 !important;
        line-height:1.5 !important;
    }

    .app-topbar__menu-close{
        position:absolute !important;
        top:8px !important;
        left:8px !important;
        right:auto !important;
        width:32px !important;
        height:32px !important;
        min-width:32px !important;
        padding:0 !important;
        border:1px solid var(--ux-line, #dce8ef) !important;
        border-radius:10px !important;
        background:#f8fcfd !important;
        color:#60727c !important;
        font-size:0 !important;
        box-shadow:none !important;
    }

    button.app-topbar__menu-close,
    button.app-topbar__menu-close:not(.secondary):not(.light):not(.danger){
        background:#f8fcfd !important;
        color:#60727c !important;
        border-color:var(--ux-line, #dce8ef) !important;
        box-shadow:none !important;
    }

    button.app-topbar__menu-close:hover,
    button.app-topbar__menu-close:focus-visible{
        background:#eef9fc !important;
        color:var(--ux-brand-700, #14788d) !important;
        border-color:rgba(82,180,203,.28) !important;
    }

    .app-topbar__menu-close::before,
    .app-topbar__menu-close::after{
        content:"" !important;
        position:absolute !important;
        top:50% !important;
        left:50% !important;
        width:14px !important;
        height:2px !important;
        border-radius:999px !important;
        background:currentColor !important;
    }

    .app-topbar__menu-close::before{
        transform:translate(-50%, -50%) rotate(45deg) !important;
    }

    .app-topbar__menu-close::after{
        transform:translate(-50%, -50%) rotate(-45deg) !important;
    }

    .app-topbar__menu-footer{
        padding:12px 4px 18px !important;
    }
}

/* Clinica headerbar spacing v17: keep the top header inside the content lane. */
@media (min-width:901px){
    body.has-app-topbar .app-headerbar,
    body:has(.app-topbar) .app-headerbar{
        width:calc(100vw - var(--shell-sidebar, 224px) - 24px) !important;
        max-width:calc(100vw - var(--shell-sidebar, 224px) - 24px) !important;
        margin:10px 12px 0 !important;
        box-sizing:border-box !important;
        right:auto !important;
        left:auto !important;
        transform:none !important;
    }

    body.has-app-topbar.sidebar-collapsed .app-headerbar,
    body:has(.app-topbar).sidebar-collapsed .app-headerbar{
        width:calc(100vw - var(--shell-sidebar-collapsed, 68px) - 24px) !important;
        max-width:calc(100vw - var(--shell-sidebar-collapsed, 68px) - 24px) !important;
    }
}

/* Clinica collapsed sidebar v19: never render submenus inside the icon rail. */
@media (min-width:901px){
    body.sidebar-collapsed .app-topbar .menu-item.is-open > .submenu,
    body.sidebar-collapsed .app-topbar .menu-item.is-open > .notif-menu,
    body.sidebar-collapsed .app-topbar .menu-item.has-active-child > .submenu,
    body.sidebar-collapsed .app-topbar .menu-item.has-active-child > .notif-menu,
    body.sidebar-collapsed .app-topbar .menu-item:hover > .submenu,
    body.sidebar-collapsed .app-topbar .menu-item:hover > .notif-menu,
    body.sidebar-collapsed .app-topbar .menu-item:focus-within > .submenu,
    body.sidebar-collapsed .app-topbar .menu-item:focus-within > .notif-menu,
    body.sidebar-collapsed .app-topbar .submenu,
    body.sidebar-collapsed .app-topbar .notif-menu{
        display:none !important;
        visibility:hidden !important;
        opacity:0 !important;
        pointer-events:none !important;
        position:absolute !important;
        inset:auto !important;
        width:0 !important;
        max-width:0 !important;
        height:0 !important;
        max-height:0 !important;
        padding:0 !important;
        margin:0 !important;
        border:0 !important;
        overflow:hidden !important;
    }

    body.sidebar-collapsed .app-topbar .menu-item.is-open{
        height:42px !important;
        max-height:42px !important;
        overflow:hidden !important;
    }
}

@media (max-width:900px){
    body.has-app-topbar .app-headerbar,
    body:has(.app-topbar) .app-headerbar{
        width:auto !important;
        max-width:none !important;
        margin:10px 10px 0 !important;
    }
}

/* Clinica collapsed sidebar v18: desktop icon rail should be calm, centered, and predictable. */
@media (min-width:901px){
    body.sidebar-collapsed{
        padding-right:var(--shell-sidebar-collapsed, 68px) !important;
    }

    body.sidebar-collapsed .app-topbar{
        width:var(--shell-sidebar-collapsed, 68px) !important;
        max-width:var(--shell-sidebar-collapsed, 68px) !important;
        padding:10px 8px !important;
        overflow:hidden !important;
        background:#fff !important;
        box-shadow:0 0 0 1px rgba(220,232,239,.9) !important;
    }

    body.sidebar-collapsed .app-topbar:hover,
    body.sidebar-collapsed .app-topbar:focus-within{
        width:var(--shell-sidebar-collapsed, 68px) !important;
        max-width:var(--shell-sidebar-collapsed, 68px) !important;
        box-shadow:0 0 0 1px rgba(220,232,239,.9) !important;
    }

    body.sidebar-collapsed .app-topbar__toggle{
        position:relative !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        margin:0 auto 10px !important;
        transform:none !important;
        border-radius:14px !important;
        background:#f7fcfd !important;
        border:1px solid var(--ux-line, #dce8ef) !important;
        color:var(--ux-brand-700, #14788d) !important;
        box-shadow:none !important;
    }

    body.sidebar-collapsed .app-topbar__toggle:hover,
    body.sidebar-collapsed .app-topbar__toggle:focus-visible{
        background:#eef9fc !important;
        border-color:rgba(82,180,203,.35) !important;
    }

    body.sidebar-collapsed .app-topbar__toggle span{
        right:50% !important;
        width:15px !important;
        height:2px !important;
        background:currentColor !important;
    }

    body.sidebar-collapsed .app-topbar__toggle span:nth-child(1){
        transform:translate(50%, -5px) !important;
    }

    body.sidebar-collapsed .app-topbar__toggle span:nth-child(2){
        transform:translateX(50%) !important;
        opacity:1 !important;
    }

    body.sidebar-collapsed .app-topbar__toggle span:nth-child(3){
        transform:translate(50%, 5px) !important;
    }

    body.sidebar-collapsed .app-topbar__brand{
        min-height:42px !important;
        justify-content:center !important;
        align-items:center !important;
        padding:0 0 10px !important;
        margin:0 0 10px !important;
        border-bottom:1px solid var(--ux-line, #dce8ef) !important;
        gap:0 !important;
    }

    body.sidebar-collapsed .app-topbar__brand > span,
    body.sidebar-collapsed .app-topbar__brand .app-topbar__version{
        display:none !important;
    }

    body.sidebar-collapsed .app-topbar__brand img{
        width:34px !important;
        height:34px !important;
        padding:4px !important;
        border:1px solid var(--ux-line, #dce8ef) !important;
        border-radius:12px !important;
        background:#fff !important;
        object-fit:contain !important;
    }

    body.sidebar-collapsed .app-topbar__menu{
        width:100% !important;
        max-width:100% !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        gap:6px !important;
        padding:0 0 10px !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
        scrollbar-width:none !important;
    }

    body.sidebar-collapsed .app-topbar__menu::-webkit-scrollbar{
        width:0 !important;
        height:0 !important;
    }

    body.sidebar-collapsed .app-topbar__menu .menu-item{
        width:42px !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:0 !important;
        margin:0 auto !important;
    }

    body.sidebar-collapsed .app-topbar__menu > a,
    body.sidebar-collapsed .app-topbar__menu .menu-item > a,
    body.sidebar-collapsed .app-topbar__menu .menu-item > button,
    body.sidebar-collapsed .app-topbar__menu .notif-button{
        width:42px !important;
        height:42px !important;
        min-height:42px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        padding:0 !important;
        margin:0 auto !important;
        border:1px solid transparent !important;
        border-radius:14px !important;
        background:transparent !important;
        box-shadow:none !important;
        color:#7f9098 !important;
        font-size:0 !important;
        line-height:1 !important;
        grid-template-columns:1fr !important;
        gap:0 !important;
    }

    body.sidebar-collapsed .app-topbar__menu > a::before,
    body.sidebar-collapsed .app-topbar__menu .menu-item > a::before,
    body.sidebar-collapsed .app-topbar__menu .menu-item > button::before,
    body.sidebar-collapsed .app-topbar__menu .notif-button::before{
        content:none !important;
        display:none !important;
    }

    body.sidebar-collapsed .app-topbar__menu > a > span:not(.menu-icon):not(.menu-caret),
    body.sidebar-collapsed .app-topbar__menu .menu-item > a > span:not(.menu-icon):not(.menu-caret),
    body.sidebar-collapsed .app-topbar__menu .menu-item > button > span:not(.menu-icon):not(.menu-caret),
    body.sidebar-collapsed .app-topbar__menu-head,
    body.sidebar-collapsed .app-topbar__menu-search,
    body.sidebar-collapsed .menu-caret,
    body.sidebar-collapsed .submenu,
    body.sidebar-collapsed .notif-menu{
        display:none !important;
    }

    body.sidebar-collapsed .app-topbar__menu .menu-icon{
        width:22px !important;
        height:22px !important;
        flex:0 0 22px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        margin:0 !important;
        border:0 !important;
        background:transparent !important;
        color:currentColor !important;
    }

    body.sidebar-collapsed .app-topbar__menu .menu-item > a > .menu-icon,
    body.sidebar-collapsed .app-topbar__menu .menu-item > button > .menu-icon,
    body.sidebar-collapsed .app-topbar__menu > a > .menu-icon,
    body.sidebar-collapsed .app-topbar__menu .notif-button > .menu-icon{
        display:inline-flex !important;
    }

    body.sidebar-collapsed .app-topbar__menu .menu-icon svg{
        width:18px !important;
        height:18px !important;
        stroke-width:1.75 !important;
    }

    body.sidebar-collapsed .app-topbar__menu > a:hover,
    body.sidebar-collapsed .app-topbar__menu .menu-item > a:hover,
    body.sidebar-collapsed .app-topbar__menu .menu-item > button:hover,
    body.sidebar-collapsed .app-topbar__menu .notif-button:hover{
        background:#f4fbfd !important;
        border-color:rgba(82,180,203,.18) !important;
        color:var(--ux-brand-700, #14788d) !important;
    }

    body.sidebar-collapsed .app-topbar__menu > a.is-active,
    body.sidebar-collapsed .app-topbar__menu .menu-item > a.is-active,
    body.sidebar-collapsed .app-topbar__menu .menu-item.has-active-child > a,
    body.sidebar-collapsed .app-topbar__menu .menu-item.is-open > a,
    body.sidebar-collapsed .app-topbar__menu .menu-item.is-open > button{
        background:#eef9fc !important;
        border-color:rgba(82,180,203,.28) !important;
        color:var(--ux-brand-700, #14788d) !important;
        box-shadow:inset -2px 0 0 var(--ux-brand, #52b4cb) !important;
    }

    body.sidebar-collapsed .app-topbar__menu > a.is-active .menu-icon,
    body.sidebar-collapsed .app-topbar__menu .menu-item > a.is-active .menu-icon,
    body.sidebar-collapsed .app-topbar__menu .menu-item.has-active-child > a .menu-icon,
    body.sidebar-collapsed .app-topbar__menu .menu-item.is-open > a .menu-icon,
    body.sidebar-collapsed .app-topbar__menu .menu-item.is-open > button .menu-icon{
        background:transparent !important;
        border-color:transparent !important;
        color:inherit !important;
    }

    body.sidebar-collapsed .app-topbar__menu-footer{
        width:100% !important;
        margin-top:auto !important;
        padding:10px 0 0 !important;
        border-top:1px solid var(--ux-line, #dce8ef) !important;
    }

    body.sidebar-collapsed .app-topbar__menu-version{
        width:36px !important;
        height:24px !important;
        min-height:24px !important;
        padding:0 !important;
        border-radius:999px !important;
        background:#f7fcfd !important;
        color:var(--ux-muted, #60727c) !important;
        font-size:0 !important;
    }

    body.sidebar-collapsed .app-topbar__menu-version::before{
        content:"v" !important;
        font-size:10px !important;
        font-weight:820 !important;
        line-height:1 !important;
    }

    body.has-app-topbar.sidebar-collapsed .app-headerbar,
    body:has(.app-topbar).sidebar-collapsed .app-headerbar{
        width:calc(100vw - var(--shell-sidebar-collapsed, 68px) - 24px) !important;
        max-width:calc(100vw - var(--shell-sidebar-collapsed, 68px) - 24px) !important;
    }
}

/* Final form-control pass: keep macOS/Safari select arrows away from the hard edge. */
select:not([multiple]){
    appearance:none !important;
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    background-color:#fff !important;
    background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%2378939d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-size:16px 16px !important;
    background-position:left 14px center !important;
    padding-left:40px !important;
    padding-right:12px !important;
}

select:not([multiple])[dir="ltr"]{
    background-position:right 14px center !important;
    padding-left:12px !important;
    padding-right:40px !important;
}

select[multiple],
.appointment-time-picker__selects select{
    appearance:auto !important;
    -webkit-appearance:auto !important;
    -moz-appearance:auto !important;
    background-image:none !important;
}

.appointment-time-picker__selects select{
    padding:0 10px !important;
}

/* Final icon pass: readable, centered icons without touching logos or media. */
.app-topbar__menu .menu-icon svg,
.password-visibility-toggle svg,
.btn-icon svg,
.icon-button svg,
.action-icon svg,
.crm-card__icon svg,
.crm-card__trigger svg,
.crm-card__action-icon svg,
button[aria-label] > svg{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    flex:0 0 20px !important;
}

.app-topbar__menu .menu-icon,
.btn-icon,
.icon-button,
.action-icon,
.crm-card__trigger,
.crm-card__action-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

/* Menu scroll cleanup: keep one scrollbar in the sidebar, not one per submenu. */
@media (min-width:901px){
    body:not(.sidebar-collapsed) .app-topbar__menu{
        overflow-y:auto !important;
        scrollbar-gutter:stable !important;
    }

    body:not(.sidebar-collapsed) .app-topbar__menu .submenu:not(.notif-menu){
        max-height:none !important;
        overflow:visible !important;
        scrollbar-width:none !important;
    }

    body:not(.sidebar-collapsed) .app-topbar__menu .submenu:not(.notif-menu)::-webkit-scrollbar{
        width:0 !important;
        height:0 !important;
        display:none !important;
    }
}

@media (max-width:900px){
    .app-topbar__menu .submenu:not(.notif-menu){
        max-height:none !important;
        overflow:visible !important;
        scrollbar-width:none !important;
    }

    .app-topbar__menu .submenu:not(.notif-menu)::-webkit-scrollbar{
        width:0 !important;
        height:0 !important;
        display:none !important;
    }
}

/* Sidebar scrollbar spacing: keep the rail visually separated from submenu labels. */
@media (min-width:901px){
    body:not(.sidebar-collapsed) .app-topbar__menu{
        padding-left:10px !important;
        scrollbar-gutter:stable both-edges !important;
    }

    body:not(.sidebar-collapsed) .app-topbar__menu::-webkit-scrollbar{
        width:10px !important;
    }

    body:not(.sidebar-collapsed) .app-topbar__menu::-webkit-scrollbar-track{
        margin-block:10px !important;
        background:transparent !important;
    }

    body:not(.sidebar-collapsed) .app-topbar__menu::-webkit-scrollbar-thumb{
        border:3px solid transparent !important;
        border-radius:999px !important;
        background-clip:content-box !important;
    }
}