:root{
    --orange:#ff7a00;
    --orange-dark:#e96f00;
    --bg:#f4f5f7;
    --card:#ffffff;
    --text:#242424;
    --muted:#6b7280;
    --dark:#2f3136;
    --border:#e5e7eb;
    --success:#1f9d55;
    --warning:#d97706;
    --danger:#dc2626;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:var(--bg);
    color:var(--text);
}

a{
    color:inherit;
}

.page{
    min-height:100vh;
    padding:24px;
}

.page--with-sidebar{
    margin-left:260px;
}

.sidebar{
    position:fixed;
    top:0;
    left:0;
    width:260px;
    height:100vh;
    background:var(--dark);
    color:#fff;
    padding:18px;
    transition:width .2s ease;
    overflow:hidden;
}

.sidebar.collapsed{
    width:84px;
}

.sidebar__top{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:24px;
}

.sidebar__toggle{
    border:none;
    background:var(--orange);
    color:#fff;
    width:40px;
    height:40px;
    border-radius:10px;
    cursor:pointer;
}

.sidebar__brand{
    font-size:22px;
    font-weight:700;
    white-space:nowrap;
}

.sidebar__nav a{
    display:block;
    padding:12px 14px;
    border-radius:10px;
    text-decoration:none;
    color:#fff;
    margin-bottom:8px;
}

.sidebar__nav a:hover{
    background:var(--orange);
}

.flash-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:18px;
}

.flash{
    padding:14px 16px;
    border-radius:12px;
    background:#fff;
    border-left:5px solid var(--orange);
}

.flash--success{ border-left-color:var(--success); }
.flash--danger{ border-left-color:var(--danger); }
.flash--warning{ border-left-color:var(--warning); }

.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:18px;
    padding:20px;
    box-shadow:0 8px 24px rgba(0,0,0,.04);
}

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:20px;
}

.grid{
    display:grid;
    gap:20px;
    align-items:start;
}

.grid--2{
    grid-template-columns:1fr 1fr;
}

.grid--3{
    grid-template-columns:repeat(3, 1fr);
}

.grid--4{
    grid-template-columns:repeat(4, 1fr);
}

.grid-col-span-3{
    grid-column:span 3;
}

.btn{
    border:none;
    border-radius:12px;
    padding:12px 16px;
    cursor:pointer;
    font-weight:600;
}

.btn--primary{
    background:var(--orange);
    color:#fff;
}

.btn--primary:hover{
    background:var(--orange-dark);
}

.btn--secondary{
    background:#eceef2;
    color:var(--text);
}

.btn--ghost{
    background:transparent;
    color:var(--text);
}

.btn--full{
    width:100%;
}

.form-label{
    display:block;
    margin-bottom:8px;
    margin-top:12px;
    font-size:14px;
    font-weight:600;
}

.form-input{
    width:100%;
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px 14px;
    font-size:14px;
    background:#fff;
}

.form-input:focus{
    outline:none;
    border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(255,122,0,.12);
}

.form-actions{
    display:flex;
    gap:12px;
    margin-top:18px;
}

.login-wrapper{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.login-card{
    width:100%;
    max-width:420px;
}

.login-title{
    margin-top:0;
    margin-bottom:20px;
    text-align:center;
}

.checkbox{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:14px;
    margin-bottom:14px;
}

.table-wrap{
    overflow:auto;
}

.table{
    width:100%;
    border-collapse:collapse;
}

.table th,
.table td{
    padding:12px;
    border-bottom:1px solid var(--border);
    text-align:left;
    vertical-align:top;
}

.muted{
    color:var(--muted);
    font-size:13px;
}

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

.list-item{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    min-height:120px;
}

.text-right{
    text-align:right;
    min-width:170px;
    flex:0 0 170px;
}

.badge{
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    margin-top:8px;
}

.badge--success{
    background:rgba(31,157,85,.12);
    color:var(--success);
}

.badge--warning{
    background:rgba(217,119,6,.12);
    color:var(--warning);
}

.stat__label{
    color:var(--muted);
    margin-bottom:8px;
}

.stat__value{
    font-size:28px;
    font-weight:700;
}

.calendar-placeholder{
    min-height:320px;
    border:2px dashed var(--border);
    border-radius:14px;
    padding:16px;
    background:#fafafa;
}

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

.modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:30;
}

.modal.active{
    display:block;
}

.modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}

.modal__content{
    position:relative;
    z-index:2;
    width:min(720px, calc(100% - 24px));
    margin:50px auto;
}

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

@media (max-width: 1100px){
    .grid--4{
        grid-template-columns:1fr 1fr;
    }

    .grid--3{
        grid-template-columns:1fr;
    }

    .grid-col-span-3{
        grid-column:span 1;
    }
}

@media (max-width: 900px){
    .page{
        padding:16px;
    }

    .page--with-sidebar{
        margin-left:0;
        padding-top:150px;
    }

    .sidebar{
        width:100%;
        height:auto;
        min-height:auto;
        position:fixed;
        top:0;
        left:0;
        z-index:40;
        border-bottom:1px solid rgba(255,255,255,.1);
        padding:12px 16px;
    }

    .sidebar.collapsed{
        width:100%;
    }

    .sidebar__top{
        margin-bottom:12px;
    }

    .sidebar__nav{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
    }

    .sidebar__nav a{
        margin-bottom:0;
        padding:10px 12px;
        font-size:14px;
    }

    .grid--2,
    .grid--3,
    .grid--4{
        grid-template-columns:1fr;
    }

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

    .list-item{
        flex-direction:column;
        min-height:auto;
    }

    .text-right{
        text-align:left;
        min-width:0;
        flex:1 1 auto;
        width:100%;
    }
}
#calendar{
    min-height:650px;
}

.btn--sm{
    width: 130px;
    padding:8px 12px;
    font-size:13px;
    border-radius:10px;
}

.badge--danger{
    background:rgba(220,38,38,.12);
    color:var(--danger);
}

.list-item__main{
    flex:1 1 auto;
    min-width:0;
}


.detail-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.table-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.btn--danger{
    background:#dc2626;
    color:#fff;
}

.btn--danger:hover{
    background:#b91c1c;
}

.toolbar__actions{
    display:flex;
    align-items:flex-end;
}
.badge--info{
    background:rgba(59,130,246,.12);
    color:#2563eb;
}

.list-actions{
    margin-top:12px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    width:100%;
}

.list-actions__form{
    margin:0;
    width:100%;
}

.list-actions__btn{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:34px;
    text-align:center;
}

.table-status-stack{
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:flex-start;
}
.badge--primary{
    background:rgba(37,99,235,.12);
    color:#2563eb;
}

.badge--violet{
    background:rgba(124,58,237,.12);
    color:#7c3aed;
}

.badge--dark{
    background:rgba(107,114,128,.12);
    color:#4b5563;
}

.status-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:10px;
}

.view-description{
    border:1px solid var(--border);
    background:#fafafa;
    border-radius:12px;
    padding:14px;
    min-height:100px;
    white-space:pre-wrap;
}

#calendar{
    min-height:650px;
}

.fc .fc-toolbar-title{
    font-size:20px;
}

.fc .fc-button{
    background:var(--orange) !important;
    border-color:var(--orange) !important;
    box-shadow:none !important;
}

.fc .fc-button:hover{
    background:var(--orange-dark) !important;
    border-color:var(--orange-dark) !important;
}

.fc .fc-button-primary:not(:disabled).fc-button-active{
    background:var(--dark) !important;
    border-color:var(--dark) !important;
}
.list{
    max-height: 900px;
    overflow-y: auto;
    padding-right: 4px;
}

.table-wrap{
    max-height: 650px;
    overflow: auto;
}

.modal__content{
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

.list-item{
    overflow: hidden;
}

.list-item__main,
.view-description,
.table td{
    word-break: break-word;
}

.fc-scroller,
.fc-view-harness,
.fc-daygrid-body,
.fc-daygrid-body-natural{
    overflow: hidden !important;
}
.card--appointments{
    display:flex;
    flex-direction:column;
    min-height:740px;
}

.list--appointments{
    flex:1 1 auto;
    max-height:640px;
    overflow-y:auto;
    padding-right:6px;
}
.inline-group{
    display:flex;
    gap:10px;
    align-items:center;
}

.inline-group .form-input{
    flex:1 1 auto;
}

.card--nested{
    margin-top:16px;
    background:#fafafa;
}

.payment-products{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:10px;
}

.payment-product-row{
    display:grid;
    grid-template-columns: minmax(220px, 1fr) 120px 120px 120px;
    gap:10px;
    align-items:center;
}

.payment-product-line-total{
    font-weight:700;
}

.payment-summary{
    margin-top:14px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding-top:12px;
    border-top:1px solid var(--border);
}

@media (max-width: 900px){
    .payment-product-row{
        grid-template-columns: 1fr;
    }

    .inline-group{
        flex-direction:column;
        align-items:stretch;
    }
}
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.page-header h1 {
    margin: 0 0 6px 0;
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
}

.page-subtitle {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

.card-panel {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    border: 1px solid #e5e7eb;
}

.table-wrap {
    overflow-x: auto;
}

.crm-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1100px;
}

.crm-table th {
    text-align: left;
    padding: 14px 12px;
    background: #f8fafc;
    color: #374151;
    font-size: 13px;
    font-weight: 700;
    border-bottom: 1px solid #e5e7eb;
}

.crm-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #edf2f7;
    vertical-align: middle;
    color: #1f2937;
    font-size: 14px;
}

.crm-table tbody tr:hover {
    background: #f9fbff;
}

.status-badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.status-on {
    background: #dcfce7;
    color: #166534;
}

.status-off {
    background: #fee2e2;
    color: #991b1b;
}

.action-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.action-buttons form {
    margin: 0;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: 0.2s ease;
}

.btn-edit {
    background: #2563eb;
    color: #ffffff;
}

.btn-edit:hover {
    background: #1d4ed8;
}

.btn-delete {
    background: #dc2626;
    color: #ffffff;
}

.btn-delete:hover {
    background: #b91c1c;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
}

.empty-state h3 {
    margin-bottom: 8px;
    color: #111827;
}

.form-card {
    max-width: 900px;
}

.crm-form {
    width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group-full {
    grid-column: 1 / -1;
}

.form-group label {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
    color: #111827;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.checkbox-row {
    display: flex;
    gap: 24px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.btn-primary-custom,
.btn-secondary-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    padding: 11px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-primary-custom {
    background: #2563eb;
    color: #fff;
}

.btn-primary-custom:hover {
    background: #1d4ed8;
}

.btn-secondary-custom {
    background: #e5e7eb;
    color: #111827;
}

.btn-secondary-custom:hover {
    background: #d1d5db;
}

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

    .page-header {
        flex-direction: column;
        gap: 10px;
    }
}

.btn--report-hero{
    padding:14px 20px;
    font-size:15px;
    box-shadow:0 10px 24px rgba(255,122,0,.22);
}

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

.stat-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:18px 20px;
    box-shadow:0 8px 24px rgba(0,0,0,.04);
}

.stat-card__label{
    color:var(--muted);
    font-size:13px;
    margin-bottom:8px;
}

.stat-card__value{
    font-size:28px;
    font-weight:700;
}

.role-pill{
    display:inline-flex;
    align-items:center;
    padding:7px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.role-pill--master{
    background:rgba(37,99,235,.12);
    color:#2563eb;
}

.role-pill--manager{
    background:rgba(16,185,129,.14);
    color:#047857;
}

.role-pill--director{
    background:rgba(124,58,237,.14);
    color:#6d28d9;
}

@media (max-width: 1100px){
    .stats-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px){
    .stats-grid{
        grid-template-columns:1fr;
    }
}
.role-pill--neutral{
    background:rgba(107,114,128,.12);
    color:#4b5563;
}

.position-tags{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}


.page > .stats-grid,
.page > .grid,
.page > .card,
.page > .card-panel,
.page > .modal,
.page > section.card,
.page > section.stats-grid,
.page > div.grid {
    margin-top: 24px;
}

.page > :first-child {
    margin-top: 0 !important;
}

.text-right--appointments {
    min-width: 220px;
}

.list-actions--appointments {
    align-items: stretch;
}

.list-item {
    overflow: visible;
    align-items: stretch;
}

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

.position-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fafafa;
    flex-wrap: wrap;
}

.position-item__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.role-pill--neutral {
    background: rgba(107,114,128,.14);
    color: #4b5563;
}

@media (max-width: 900px) {
    .text-right--appointments {
        min-width: 0;
        width: 100%;
    }

    .position-item {
        align-items: flex-start;
    }
}

/* === Design refresh === */
:root{
    --bg:#f3f5f9;
    --card:#ffffff;
    --card-muted:#f8fafc;
    --text:#111827;
    --muted:#667085;
    --border:#e2e8f0;
    --orange:#ff7a00;
    --orange-dark:#e86f00;
    --dark:#1f2937;
    --shadow:0 18px 40px rgba(15, 23, 42, 0.08);
}

body{
    background:linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    color:var(--text);
    font-family:Inter, Arial, Helvetica, sans-serif;
}

.page{
    padding:28px;
}

.page--with-sidebar{
    margin-left:260px;
}

.page-stack{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.card,
.card-panel,
.modal__content{
    border:1px solid rgba(226,232,240,.92);
    border-radius:24px;
    background:rgba(255,255,255,.96);
    box-shadow:var(--shadow);
}

.card--spaced{
    padding:24px;
}

.page-header{
    margin-bottom:24px;
    align-items:center;
}

.page-header--dashboard{
    margin-bottom:22px;
}

.page-header h1,
.section-header h2,
.card h2{
    letter-spacing:-0.02em;
}

.section-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:18px;
}

.section-header h2{
    margin:0 0 6px;
    font-size:28px;
}

.section-subtitle{
    margin:0;
    color:var(--muted);
    font-size:14px;
}

.sidebar{
    background:linear-gradient(180deg, #1f2937 0%, #111827 100%);
    border-right:1px solid rgba(255,255,255,.06);
    box-shadow:16px 0 48px rgba(15,23,42,.16);
}

.sidebar__brand{
    font-size:26px;
    letter-spacing:-0.03em;
}

.sidebar__toggle{
    border-radius:14px;
}

.sidebar__nav a{
    padding:13px 14px;
    border-radius:14px;
    color:rgba(255,255,255,.86);
}

.sidebar__nav a:hover{
    background:rgba(255,122,0,.16);
    color:#fff;
}

.form-input,
.form-group input,
.form-group textarea,
select.form-input,
textarea.form-input{
    min-height:48px;
    border-radius:14px;
    border:1px solid var(--border);
    background:#fff;
}

textarea.form-input{
    min-height:auto;
}

.btn{
    border-radius:14px;
    padding:12px 18px;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn:hover{
    transform:translateY(-1px);
}

.btn--primary{
    box-shadow:0 10px 20px rgba(255,122,0,.2);
}

.btn--secondary{
    background:#eef2f7;
}

.btn--ghost{
    background:#f8fafc;
    border:1px solid var(--border);
}

.stats-grid{
    gap:18px;
    margin-bottom:0;
}

.stat-card{
    border-radius:22px;
    box-shadow:var(--shadow);
}

.table-wrap{
    max-height:none;
    overflow:auto;
}

.table th,
.table td,
.crm-table th,
.crm-table td{
    padding:14px 14px;
}

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

.dashboard-filters__actions{
    display:flex;
    gap:12px;
    margin-top:18px;
    flex-wrap:wrap;
}

.card--calendar{
    padding-bottom:18px;
}

#calendar{
    min-height:760px;
}

.fc{
    --fc-border-color:#e5e7eb;
    --fc-today-bg-color:rgba(255,122,0,.08);
}

.fc .fc-toolbar{
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:18px !important;
}

.fc .fc-toolbar-title{
    font-size:28px;
    text-transform:capitalize;
    font-weight:700;
    color:#111827;
}

.fc .fc-button{
    border-radius:12px !important;
    padding:.55rem .9rem !important;
    font-weight:700 !important;
}

.fc .fc-col-header-cell-cushion{
    padding:12px 6px;
    color:#475467;
    text-transform:uppercase;
    font-size:12px;
    font-weight:700;
}

.fc .fc-daygrid-day-frame{
    min-height:132px;
    padding:6px;
}

.fc .fc-daygrid-day-number{
    color:#111827;
    font-weight:700;
    padding:6px 8px;
}

.fc .fc-day-other .fc-daygrid-day-number{
    color:#98a2b3;
}

.fc .fc-daygrid-event,
.fc .fc-timegrid-event{
    border-radius:10px;
    padding:2px 6px;
    font-weight:600;
}

.list--appointments,
.list--appointments-full{
    max-height:none;
    overflow:visible;
    padding-right:0;
}

.appointment-card{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 220px;
    gap:18px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:20px;
    background:linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    box-shadow:0 10px 24px rgba(15,23,42,.05);
}

.appointment-card + .appointment-card{
    margin-top:14px;
}

.appointment-card__topline{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:8px;
}

.appointment-card__title{
    margin:0 0 4px;
    font-size:22px;
}

.appointment-card__datetime{
    color:var(--muted);
    font-size:14px;
}

.appointment-card__price{
    font-size:24px;
    font-weight:800;
    white-space:nowrap;
}

.appointment-card__description{
    margin-bottom:12px;
    font-size:15px;
}

.appointment-card__meta-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px 18px;
    margin-bottom:14px;
}

.appointment-card__actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-self:stretch;
    justify-content:center;
}

.list-actions__form{
    width:100%;
}

.list-actions__btn{
    width:100%;
    min-height:42px;
    border-radius:12px;
}

.list-item,
.card--appointments .list-item{
    overflow:visible;
}

.badge{
    border-radius:999px;
    padding:7px 11px;
}

.position-item,
.payment-summary,
.view-description,
.calendar-placeholder{
    border-radius:16px;
}

.card--nested{
    background:#f8fafc;
    border-radius:20px;
}

.payment-product-row{
    grid-template-columns:minmax(220px, 1fr) 130px 140px 120px;
}

.view-description{
    background:#f8fafc;
}

@media (max-width: 1200px){
    .appointment-card{
        grid-template-columns:1fr;
    }

    .appointment-card__actions{
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:flex-start;
    }

    .appointment-card__actions .list-actions__form{
        width:auto;
    }

    .appointment-card__actions .list-actions__btn{
        width:auto;
        min-width:150px;
    }
}

@media (max-width: 900px){
    .page{
        padding:16px;
    }

    .page-stack{
        gap:16px;
    }

    .dashboard-filters__grid,
    .toolbar{
        grid-template-columns:1fr;
    }

    #calendar{
        min-height:560px;
    }

    .fc .fc-daygrid-day-frame{
        min-height:92px;
    }

    .appointment-card__topline,
    .appointment-card__meta-grid{
        grid-template-columns:1fr;
        display:grid;
    }

    .appointment-card__price{
        font-size:20px;
    }

    .appointment-card__actions{
        flex-direction:column;
    }

    .appointment-card__actions .list-actions__form,
    .appointment-card__actions .list-actions__btn{
        width:100%;
    }
}

.card--appointments{min-height:auto;}
.card--appointments .section-header{margin-bottom:14px;}


.finance-page-header{
    align-items:flex-start;
}

.finance-page-header__actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.finance-filter-card,
.finance-chart-card,
.finance-table-card,
.finance-group-card,
.finance-summary-card{
    border-radius:22px;
}

.finance-filter-card__top,
.finance-group-card__header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:14px;
}

.finance-quick-periods{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:18px;
}

.finance-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border-radius:999px;
    background:#f3f4f6;
    color:#111827;
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    transition:.2s ease;
}

.finance-chip:hover{
    background:#e5e7eb;
}

.finance-chip--active{
    background:var(--orange);
    color:#fff;
    box-shadow:0 10px 22px rgba(255,122,0,.22);
}

.finance-filter-form__actions{
    display:flex;
    gap:10px;
    align-items:flex-end;
}

.finance-summary-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:16px;
    margin:15px 0;
}

.finance-summary-card{
    min-height:150px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.finance-summary-card--accent{
    background:linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
    border-color:#fed7aa;
}

.finance-summary-card__label{
    color:var(--muted);
    font-size:13px;
    font-weight:600;
}

.finance-summary-card__value{
    font-size:30px;
    font-weight:800;
    line-height:1.1;
}

.finance-summary-card__value--small{
    font-size:22px;
}

.finance-summary-card__split{
    display:flex;
    flex-direction:column;
    gap:6px;
    color:#374151;
    font-size:14px;
}

.finance-summary-card__hint{
    color:var(--muted);
    font-size:13px;
}

.finance-detail-grid,
.finance-tables-grid{
    margin-bottom:22px;
}

.finance-metric-list,
.finance-method-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.finance-metric-row,
.finance-method-item{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fafafa;
}

.finance-method-item__name{
    font-weight:700;
    margin-bottom:4px;
}

.finance-method-item__amount{
    font-weight:800;
}

.finance-progress-group{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-top:18px;
}

.finance-progress__label,
.finance-progress__value{
    font-size:13px;
    color:var(--muted);
    margin-bottom:6px;
}

.finance-progress{
    width:100%;
    height:10px;
    background:#edf2f7;
    border-radius:999px;
    overflow:hidden;
}

.finance-progress__bar{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg, var(--orange), #ff9a3d);
}

.finance-progress__bar--secondary{
    background:linear-gradient(90deg, #2563eb, #60a5fa);
}

.finance-chart-form{
    margin-bottom:18px;
}

.finance-chart-card__summary{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:8px;
}

.finance-chart{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(72px, 1fr));
    gap:12px;
    align-items:end;
    min-height:360px;
    padding:18px 8px 0;
}

.finance-chart__column{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    min-height:320px;
}

.finance-chart__value-top{
    font-size:12px;
    color:var(--muted);
    text-align:center;
}

.finance-chart__bar-wrap{
    width:100%;
    max-width:42px;
    height:220px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    background:linear-gradient(180deg, rgba(255,122,0,.06), rgba(37,99,235,.03));
    border-radius:14px;
    padding:8px 6px;
}

.finance-chart__bar{
    width:100%;
    border-radius:10px;
    background:linear-gradient(180deg, var(--orange), #ff9a3d);
    min-height:4px;
}

.finance-chart__bar--negative{
    background:linear-gradient(180deg, #ef4444, #f87171);
}

.finance-chart__label{
    font-size:12px;
    color:#374151;
    text-align:center;
    font-weight:700;
}

.finance-table-wrap{
    max-height:640px;
}

.finance-operation-pill{
    display:inline-flex;
    align-items:center;
    padding:7px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.finance-operation-pill--deposit{
    background:rgba(34,197,94,.14);
    color:#15803d;
}

.finance-operation-pill--salary{
    background:rgba(245,158,11,.16);
    color:#b45309;
}

.finance-operation-pill--expense{
    background:rgba(239,68,68,.14);
    color:#b91c1c;
}

.finance-operation-pill--withdrawal{
    background:rgba(107,114,128,.14);
    color:#4b5563;
}

@media (max-width: 1200px){
    .finance-summary-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px){
    .finance-summary-grid{
        grid-template-columns:1fr;
    }

    .finance-chart{
        grid-template-columns:repeat(auto-fit, minmax(56px, 1fr));
        min-height:300px;
    }

    .finance-chart__column{
        min-height:260px;
    }

    .finance-chart__bar-wrap{
        height:180px;
    }

    .finance-filter-form__actions,
    .finance-page-header__actions{
        width:100%;
    }
}

.sidebar__user{font-size:12px;color:#cbd5e1;margin-top:4px}
.page-stack-tight{margin-top:18px}
.mt-16{margin-top:16px}
.account-box,.group-card{padding:14px;border:1px solid var(--border);border-radius:14px;background:#fafafa}
.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.permission-item{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;font-size:14px}
.group-list{display:flex;flex-direction:column;gap:16px}
.finance-inline-filters{margin:8px 0 16px}
.dashboard-filters__grid--wide{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.wrap{flex-wrap:wrap}
@media (max-width: 900px){.permission-grid,.dashboard-filters__grid--wide{grid-template-columns:1fr}}

.pagination-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.pagination-bar__links{display:flex;gap:10px;flex-wrap:wrap}
.card--spaced + .card--spaced,.card--spaced + .stats-grid,.stats-grid.card--spaced + .card--spaced,.finance-summary-grid.card--spaced + .card--spaced{margin-top:0}
#appointmentClientSearchHint{min-height:18px}

.page-header--compact{
    margin-bottom:16px;
}

.inventory-stats--inside{
    margin-top:18px;
    margin-bottom:18px;
}

.inventory-reference-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:18px;
}

.inventory-reference-item{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fafafa;
}

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

.checkbox-item--boxed{
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fafafa;
}

.pagination-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-top:16px;
    flex-wrap:wrap;
}

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

    .inventory-reference-item,
    .pagination-bar{
        flex-direction:column;
        align-items:stretch;
    }
}

.grid--5{
    grid-template-columns:repeat(5, 1fr);
}

.page-header--compact,
.section-header--compact{
    margin-bottom:14px;
}

.card--compact{
    padding:16px;
}

.quick-stats{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.quick-stat{
    background:#f8f9fb;
    border:1px solid var(--border);
    border-radius:999px;
    padding:8px 12px;
    font-size:13px;
}

.dashboard-filters--compact .dashboard-filters__grid{
    gap:14px;
}

.dashboard-filters__grid--compact{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px;
}

.dashboard-filters__actions--compact{
    margin-top:14px;
}

.form-actions--end{
    justify-content:flex-end;
}

.table-actions{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}

.table-actions--wrap{
    justify-content:flex-start;
}

.btn--danger{
    background:rgba(220,38,38,.1);
    color:var(--danger);
}

.btn--danger:hover{
    background:rgba(220,38,38,.16);
}

.btn--sm{
    padding:8px 12px;
    border-radius:10px;
    font-size:13px;
}

.badge--danger{
    background:rgba(220,38,38,.12);
    color:var(--danger);
}

.badge--dark{
    background:rgba(47,49,54,.1);
    color:var(--dark);
}

.payment-products{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:12px;
}

.payment-product-row{
    display:grid;
    grid-template-columns:1.2fr 1.4fr .5fr .5fr auto;
    gap:10px;
    align-items:start;
    padding:12px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
}

.payment-product-field--total{
    display:flex;
    align-items:center;
    min-height:44px;
    font-weight:700;
}

.payment-product-hint{
    margin-top:6px;
}

.payment-summary{
    display:flex;
    justify-content:flex-end;
    gap:20px;
    margin-top:14px;
    font-size:14px;
}

.inventory-reference-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:16px;
}

.inventory-reference-item{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
}

.checkbox-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    margin-top:12px;
}

.checkbox-item--boxed{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
}

.modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:50;
}

.modal.active{
    display:flex;
}

.modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}

.modal__content{
    position:relative;
    width:min(920px, calc(100vw - 32px));
    max-height:calc(100vh - 32px);
    overflow:auto;
    z-index:1;
}

.modal__header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}

.inline-group{
    display:flex;
    gap:10px;
    align-items:center;
}

.inline-group.wrap{
    flex-wrap:wrap;
}

.account-box,
.group-card,
.card--nested{
    border:1px solid var(--border);
    border-radius:16px;
    padding:14px;
    background:#fafafa;
}

.permission-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
    margin-top:12px;
}

.permission-item{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
}

.group-editor-stack{
    margin-top:14px;
}

.group-card--editor{
    background:#fafafa;
}

.detail-list{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:10px 16px;
}

.view-description{
    min-height:90px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fafafa;
    white-space:pre-wrap;
}

.page-stack,
.page-stack-tight{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.section-header{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
}

.section-subtitle,
.page-subtitle{
    color:var(--muted);
    margin:6px 0 0;
    font-size:14px;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
}

.stat-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:18px;
    box-shadow:0 8px 24px rgba(0,0,0,.04);
}

.stat-card__label{
    color:var(--muted);
    font-size:13px;
    margin-bottom:8px;
}

.stat-card__value{
    font-size:28px;
    font-weight:700;
}

.appointment-card{
    display:grid;
    grid-template-columns:1fr auto;
    gap:16px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:18px;
    background:#fff;
}

.appointment-card__topline{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
}

.appointment-card__title{
    margin:0 0 6px;
}

.appointment-card__datetime,
.appointment-card__description{
    color:var(--muted);
}

.appointment-card__description{
    margin:12px 0;
    white-space:pre-wrap;
}

.appointment-card__price{
    font-size:20px;
    font-weight:700;
    white-space:nowrap;
}

.appointment-card__meta-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:8px 16px;
}

.status-row,
.appointment-card__actions,
.pagination-bar,
.pagination-bar__links{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.appointment-card__actions{
    flex-direction:column;
    align-items:stretch;
    min-width:150px;
}

.pagination-bar{
    justify-content:space-between;
    align-items:center;
    margin-top:16px;
}

.role-pill{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:6px 10px;
    font-size:12px;
    font-weight:700;
    background:#eef2f7;
}

.role-pill--master{background:rgba(31,157,85,.12);color:var(--success);}
.role-pill--manager{background:rgba(37,99,235,.12);color:#2563eb;}
.role-pill--director{background:rgba(124,58,237,.12);color:#7c3aed;}
.role-pill--other{background:#eef2f7;color:var(--dark);}

.mt-16{margin-top:16px;}

@media (max-width: 1200px){
    .grid--5,
    .dashboard-filters__grid--compact,
    .stats-grid,
    .grid--4,
    .grid--3,
    .grid--2,
    .permission-grid,
    .checkbox-grid,
    .detail-list,
    .appointment-card,
    .payment-product-row{
        grid-template-columns:1fr;
    }

    .page-header,
    .section-header,
    .payment-summary,
    .inventory-reference-item,
    .appointment-card__topline,
    .pagination-bar{
        flex-direction:column;
        align-items:stretch;
    }

    .appointment-card__actions{
        min-width:0;
    }

    .page--with-sidebar{
        margin-left:0;
        padding-top:90px;
    }

    .sidebar{
        width:100%;
        height:auto;
        position:fixed;
        z-index:60;
    }
}

.page-shell{
    width:min(100%, 1640px);
    margin:0 auto;
}

.sidebar__identity{
    min-width:0;
    transition:opacity .2s ease;
}

.sidebar__user{
    color:rgba(255,255,255,.62);
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sidebar__nav a{
    display:flex;
    align-items:center;
    gap:12px;
}

.sidebar__icon{
    width:24px;
    min-width:24px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    font-size:18px;
}

.menu-text{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sidebar.collapsed{
    width:84px;
    padding-left:12px;
    padding-right:12px;
}

.sidebar.collapsed .sidebar__identity,
.sidebar.collapsed .menu-text{
    opacity:0;
    width:0;
    pointer-events:none;
}

.sidebar.collapsed .sidebar__top{
    justify-content:center;
}

.sidebar.collapsed .sidebar__nav a{
    justify-content:center;
    padding-left:10px;
    padding-right:10px;
}

.page--with-sidebar.sidebar-collapsed{
    margin-left:104px;
}

.toolbar--compact > *{
    flex:1 1 220px;
}

.table--compact th,
.table--compact td{
    padding:10px 12px;
}

.table-actions--end{
    justify-content:flex-end;
}

.text-clamp-1{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:340px;
}

.export-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:10px;
    margin-top:8px;
}

.staff-manage-layout{
    display:grid;
    grid-template-columns:minmax(0, 2fr) minmax(320px, 1fr);
    gap:20px;
    align-items:start;
}

.staff-manage-layout__side{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.employee-report-stack{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.filter-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
    align-items:end;
}

.filter-grid__actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.employee-report-card__head{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
    margin-bottom:16px;
}

.employee-report-card__name-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin-bottom:6px;
}

.employee-report-card__name-row h2{
    margin:0;
    font-size:22px;
}

.employee-report-card__warning{
    margin-top:8px;
    color:#b91c1c;
    font-size:13px;
    font-weight:600;
}

.employee-report-summary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:12px;
}

.employee-report-metric,
.employee-report-param-box{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    min-width:0;
}

.employee-report-metric strong,
.employee-report-param-box strong{
    font-size:18px;
    line-height:1.25;
    word-break:break-word;
}

.employee-report-params{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:12px;
}

.employee-payout-panel{
    margin-top:16px;
    border-top:1px solid var(--border);
    padding-top:16px;
    display:none;
}

.employee-payout-panel.is-open,
.employee-payout-panel[data-open="true"]{
    display:block;
}

.employee-payout-form{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    align-items:end;
}

.employee-payout-form__actions{
    display:flex;
    align-items:flex-end;
}

.employee-report-days{
    margin-top:16px;
}

.employee-report-days__title{
    font-size:14px;
    color:var(--muted);
    margin-bottom:10px;
}

.permission-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:10px;
}

.permission-item{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#f8fafc;
}

@media (max-width: 1280px){
    .staff-manage-layout,
    .filter-grid,
    .employee-payout-form{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width: 1024px){
    .page--with-sidebar{
        margin-left:230px;
    }

    .page--with-sidebar.sidebar-collapsed{
        margin-left:94px;
    }

    .sidebar{
        width:230px;
    }
}

@media (max-width: 900px){
    .page-shell{
        width:100%;
    }

    .page--with-sidebar,
    .page--with-sidebar.sidebar-collapsed{
        margin-left:0;
    }

    .sidebar__identity,
    .sidebar .menu-text{
        opacity:1 !important;
        width:auto !important;
        pointer-events:auto !important;
    }

    .staff-manage-layout,
    .filter-grid,
    .employee-payout-form{
        grid-template-columns:1fr;
    }

    .employee-report-card__head,
    .filter-grid__actions{
        flex-direction:column;
        align-items:stretch;
    }

    .table-actions--end{
        justify-content:flex-start;
    }

    .text-clamp-1{
        max-width:none;
    }
}

.app-shell{
    min-height:100vh;
}

.page-shell{
    width:100%;
    max-width:100%;
}

.mobile-header{
    display:none;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
    position:sticky;
    top:0;
    z-index:40;
    padding:8px 0 12px;
    background:linear-gradient(to bottom, var(--bg) 78%, rgba(244,245,247,0));
}

.mobile-header__title{
    font-size:18px;
    font-weight:700;
    color:#111827;
}

.mobile-menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:none;
    border-radius:12px;
    background:var(--orange);
    color:#fff;
    font-size:22px;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(255,122,0,.22);
}

.sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.44);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, visibility .22s ease;
    z-index:79;
}

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

.sidebar__nav a{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:48px;
}

.sidebar__icon{
    width:24px;
    min-width:24px;
    text-align:center;
    font-size:19px;
}

.sidebar__user{
    color:rgba(255,255,255,.72);
    font-size:13px;
    margin-top:3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.card,
.table-wrap,
.calendar-card,
.list-item,
.stat-card,
.modal__content,
.page-header,
.toolbar,
.fc,
.fc-theme-standard .fc-scrollgrid{
    max-width:100%;
}

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

.table{
    min-width:720px;
}

img,
svg,
canvas{
    max-width:100%;
}

body.sidebar-mobile-open{
    overflow:hidden;
}

@media (min-width: 1200px){
    .sidebar-overlay,
    .mobile-header{
        display:none !important;
    }
}

@media (max-width: 1199px){
    .page{
        padding:18px;
    }

    .page--with-sidebar,
    .page--with-sidebar.sidebar-collapsed{
        margin-left:0 !important;
    }

    .mobile-header{
        display:flex;
    }

    .sidebar{
        width:min(320px, calc(100vw - 40px));
        max-width:320px;
        padding:18px 14px;
        z-index:80;
        transform:translateX(calc(-100% - 18px));
        transition:transform .24s ease;
        box-shadow:0 20px 45px rgba(0,0,0,.28);
        overflow-y:auto;
    }

    .sidebar.collapsed{
        width:min(320px, calc(100vw - 40px));
        padding:18px 14px;
    }

    .sidebar.collapsed .sidebar__identity,
    .sidebar.collapsed .menu-text{
        opacity:1;
        width:auto;
        pointer-events:auto;
    }

    .sidebar.collapsed .sidebar__top,
    .sidebar.collapsed .sidebar__nav a{
        justify-content:flex-start;
        padding-left:14px;
        padding-right:14px;
    }

    .sidebar.mobile-open{
        transform:translateX(0);
    }

    .sidebar-overlay.is-visible{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .sidebar__toggle{
        display:none;
    }

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

    .grid--3,
    .grid--2,
    .staff-manage-layout,
    .filter-grid,
    .employee-payout-form,
    .form-actions,
    .page-header{
        grid-template-columns:1fr;
    }

    .page-header,
    .form-actions{
        display:flex;
        flex-direction:column;
        align-items:stretch;
    }

    .toolbar,
    .filter-grid__actions{
        width:100%;
    }

    .toolbar > *,
    .filter-grid__actions > *,
    .form-actions > *,
    .page-header > *{
        width:100%;
        max-width:100%;
    }
}

@media (max-width: 900px){
    .page{
        padding:14px;
    }

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

    .list-item{
        flex-direction:column;
        min-height:0;
    }

    .text-right{
        min-width:0;
        flex:1 1 auto;
        text-align:left;
    }

    .grid--4,
    .grid--3,
    .grid--2,
    .employee-report-summary-grid,
    .employee-report-params,
    .permission-grid,
    .export-grid{
        grid-template-columns:1fr;
    }

    .table{
        min-width:640px;
    }

    .fc .fc-toolbar{
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    .fc .fc-toolbar-title{
        font-size:1.5rem;
        text-align:center;
    }

    .fc .fc-toolbar-chunk{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:8px;
    }

    .fc .fc-button{
        padding:.55em .85em;
        font-size:.92rem;
    }
}

@media (max-width: 640px){
    .page{
        padding:12px;
    }

    .mobile-header{
        margin-bottom:14px;
        padding-top:4px;
    }

    .mobile-header__title{
        font-size:16px;
    }

    .mobile-menu-toggle{
        width:42px;
        height:42px;
        font-size:20px;
    }

    .sidebar{
        width:min(300px, calc(100vw - 24px));
    }

    .card{
        padding:14px;
        border-radius:14px;
    }

    .btn{
        width:100%;
    }

    .table{
        min-width:560px;
    }

    .fc .fc-toolbar-title{
        font-size:1.25rem;
    }

    .fc .fc-daygrid-day-frame{
        min-height:84px;
    }

    .fc .fc-col-header-cell-cushion,
    .fc .fc-daygrid-day-number,
    .fc .fc-event-time,
    .fc .fc-event-title,
    .fc .fc-list-event-time,
    .fc .fc-list-event-title{
        font-size:.82rem;
    }

    .fc .fc-daygrid-event{
        margin:1px 2px;
    }
}


.presence-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    line-height:1;
}

.presence-badge::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:currentColor;
}

.presence-badge--online{
    background:rgba(31,157,85,.12);
    color:var(--success);
}

.presence-badge--offline{
    background:rgba(107,114,128,.14);
    color:var(--muted);
}

/* --- 2026-03 tablet and navigation fixes --- */
.sidebar__brand,
.mobile-header__title{
    text-decoration:none;
}

.sidebar__nav a.is-active{
    background:rgba(255,122,0,.18);
    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,122,0,.3);
}

.sidebar__nav a.is-active .sidebar__icon,
.sidebar__nav a.is-active .menu-text{
    color:#fff;
}

.form-input,
select.form-input,
input.form-input{
    min-height:48px;
    line-height:1.25;
}

textarea.form-input{
    min-height:110px;
    resize:vertical;
}

.grid{
    align-items:start;
}

.finance-filter-form--compact{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.finance-filter-form__grid{
    display:grid;
    gap:14px;
    align-items:end;
}

.finance-filter-form__grid--main{
    grid-template-columns:repeat(4, minmax(0, 1fr));
}

.finance-filter-form__grid--inline{
    grid-template-columns:minmax(0, 1.8fr) minmax(220px, 1fr);
}

.finance-filter-form__grid--operations{
    grid-template-columns:minmax(0, 1.5fr) minmax(220px, .9fr) minmax(220px, .9fr);
}

.finance-filter-sections{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.finance-inline-filter-card{
    padding:14px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#fafafa;
}

.finance-inline-filter-card__title{
    font-weight:700;
    margin-bottom:10px;
}

.finance-filter-form__actions--compact{
    margin-top:0;
}

.account-fields-grid{
    align-items:end;
}

.inventory-reference-item--position{
    align-items:center;
}

.inventory-reference-item__main{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.inventory-reference-item__status{
    margin-top:0;
}

.table-actions--wrap{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;
}

@media (max-width: 1199px){
    .grid-col-span-2,
    .grid-col-span-3,
    .grid-col-span-4,
    .grid-col-span-5{
        grid-column:span 1;
    }

    .dashboard-filters__grid--compact,
    .filter-grid,
    .finance-filter-form__grid--main,
    .finance-filter-form__grid--inline,
    .finance-filter-form__grid--operations,
    .account-fields-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .finance-filter-sections{
        grid-template-columns:1fr;
    }
}

@media (max-width: 900px){
    .dashboard-filters__grid--compact,
    .filter-grid,
    .finance-filter-form__grid--main,
    .finance-filter-form__grid--inline,
    .finance-filter-form__grid--operations,
    .account-fields-grid{
        grid-template-columns:1fr;
    }

    .inventory-reference-item--position,
    .table-actions--wrap{
        align-items:stretch;
    }

    .table-actions--wrap{
        justify-content:flex-start;
    }
}


/* --- Safari form fix + finance tabs + positions tweaks --- */
.form-label{
    line-height:1.2;
}

.form-input,
input.form-input,
select.form-input,
textarea.form-input{
    display:block;
    width:100%;
    min-width:0;
    margin:0;
    border-radius:12px;
    border:1px solid var(--border);
    background:#fff;
    font:inherit;
    font-size:14px;
    line-height:1.35;
    box-sizing:border-box;
    box-shadow:none;
    background-clip:padding-box;
}

input.form-input,
select.form-input{
    min-height:48px;
    height:48px;
    padding:12px 14px;
}

input.form-input[type="date"],
input.form-input[type="datetime-local"],
input.form-input[type="time"],
input.form-input[type="number"],
input.form-input[type="text"],
input.form-input[type="password"],
input.form-input[type="email"],
input.form-input[type="search"],
input.form-input[type="tel"],
select.form-input{
    -webkit-appearance:none;
    appearance:none;
}

textarea.form-input{
    min-height:110px;
    height:auto;
    padding:12px 14px;
    resize:vertical;
}

.grid > *,
.toolbar > *,
.form-grid > *,
.finance-filter-form__grid > *,
.staff-auth-grid > *,
.inline-group > *,
.modal .grid > *{
    min-width:0;
}

.finance-history-tabs{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.finance-history-panel{
    display:none;
}

.finance-history-panel.is-active{
    display:block;
}

.position-name-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:132px;
    min-width:132px;
    max-width:132px;
    padding:7px 10px;
    border-radius:999px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.position-name-pill--active{
    background:rgba(52,211,153,.14);
    color:#86f3c3;
    border:1px solid rgba(52,211,153,.22);
}

.position-name-pill--inactive{
    background:rgba(148,163,184,.12);
    color:#c5cfdf;
    border:1px solid rgba(148,163,184,.16);
}

.position-name-pill:hover{
    transform:translateY(-1px);
}

.position-status-pill{
    width: 132px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    line-height:1;
}

.position-status-pill--active{
    background:rgba(31,157,85,.12);
    color:var(--success);
}

.position-status-pill--inactive{
    background:rgba(107,114,128,.14);
    color:#4b5563;
}

.inventory-reference-item--position{
    align-items:center;
}

.inventory-reference-item--position .inventory-reference-item__main{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.inventory-reference-item--position .table-actions{
    justify-content:flex-end;
}

.position-creator-row{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
}

.position-card__actions{
    justify-content:flex-end;
}

.position-action-btn{
    width:36px;
    min-width:36px;
    height:36px;
    min-height:36px;
}

.position-action-btn--add:hover .inventory-action-btn__icon{
    transform:scale(1.2) rotate(90deg);
}

.compensation-profiles-table td{
    vertical-align:middle;
}

.compensation-profiles-table__actions{
    justify-content:flex-end;
}

@supports (-webkit-touch-callout:none){
    input.form-input,
    select.form-input{
        padding-top:0;
        padding-bottom:0;
    }
}

@media (max-width: 900px){
    .finance-history-tabs{
        gap:8px;
    }

    .position-name-pill{
        width:118px;
        min-width:118px;
        max-width:118px;
    }
}


/* современная панель фильтра кассы */
.finance-toolbar{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom:18px;
}

.finance-toolbar__top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}

.finance-toolbar__title{
    margin:0 0 4px;
    font-size:20px;
}

.finance-toolbar__subtitle{
    margin:0;
    color:var(--muted);
}

.finance-toolbar__meta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    color:#334155;
    font-size:13px;
    font-weight:600;
}

.finance-toolbar__meta-label{
    color:var(--muted);
    font-weight:500;
}

.finance-toolbar__body{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.finance-toolbar__quick{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.finance-chip--compact{
    min-height:34px;
    padding:7px 12px;
    font-size:13px;
    font-weight:700;
}

.finance-toolbar__custom{
    display:grid;
    grid-template-columns:minmax(180px, 1fr) minmax(180px, 1fr) auto;
    gap:12px;
    align-items:end;
}

.finance-toolbar__field{
    min-width:0;
}

.finance-toolbar__actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

@media (max-width: 900px){
    .finance-toolbar__custom{
        grid-template-columns:1fr;
    }

    .finance-toolbar__actions{
        width:100%;
    }

    .finance-toolbar__actions .btn{
        flex:1 1 auto;
        justify-content:center;
    }
}


:root{
    --app-bg:#08101f;
    --app-bg-accent:#0c1730;
    --surface:#101b33;
    --surface-2:#14223f;
    --surface-3:#1a2948;
    --surface-soft:rgba(21,34,63,.72);
    --line:rgba(148,163,184,.18);
    --line-strong:rgba(96,165,250,.28);
    --text:#ecf2ff;
    --text-soft:#9fb0d1;
    --text-muted:#7f8fb0;
    --blue:#4ea2ff;
    --blue-strong:#2d74ff;
    --orange:#ff9b4a;
    --orange-strong:#ff7f31;
    --green:#35d08f;
    --red:#ff6b7d;
    --shadow-xl:0 28px 70px rgba(3, 9, 24, .55);
    --shadow-lg:0 18px 45px rgba(4, 10, 28, .38);
    --radius-xl:28px;
    --radius-lg:22px;
    --radius-md:16px;
    --radius-sm:12px;
}

html{
    color-scheme:dark;
}

body.app-authenticated{
    background:
        radial-gradient(circle at top left, rgba(45,116,255,.24), transparent 34%),
        radial-gradient(circle at top right, rgba(255,127,49,.14), transparent 28%),
        linear-gradient(180deg, #050b17 0%, #091121 34%, #07101d 100%);
    color:var(--text);
    font-family:"Segoe UI", "DejaVu Sans", Arial, sans-serif;
}

body.app-authenticated::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size:36px 36px;
    mask-image:linear-gradient(180deg, rgba(0,0,0,.8), transparent 92%);
    opacity:.55;
}

body.app-guest{
    min-height:100vh;
    background:
        radial-gradient(circle at top left, rgba(45,116,255,.28), transparent 34%),
        radial-gradient(circle at bottom right, rgba(255,127,49,.16), transparent 30%),
        linear-gradient(180deg, #050b17 0%, #091121 100%);
    color:var(--text);
    font-family:"Segoe UI", "DejaVu Sans", Arial, sans-serif;
}

body.sidebar-mobile-open{
    overflow:hidden;
}

.app-shell{
    min-height:100vh;
}

.sidebar{
    display:flex;
    flex-direction:column;
    gap:20px;
    padding:22px 18px;
    background:linear-gradient(180deg, rgba(10,18,34,.98) 0%, rgba(8,15,28,.96) 100%);
    border-right:1px solid rgba(255,255,255,.06);
    box-shadow:22px 0 48px rgba(0,0,0,.32);
    backdrop-filter:blur(18px);
}

.sidebar__top{
    align-items:flex-start;
    gap:14px;
    margin-bottom:0;
}

.sidebar__toggle,
.mobile-menu-toggle,
.topbar__icon-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border:none;
    border-radius:14px;
    color:#f8fbff;
    background:linear-gradient(180deg, rgba(78,162,255,.95) 0%, rgba(45,116,255,.95) 100%);
    box-shadow:0 14px 28px rgba(45,116,255,.26);
    cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.sidebar__toggle:hover,
.mobile-menu-toggle:hover,
.topbar__icon-btn:hover,
.btn:hover{
    transform:translateY(-1px);
}

.sidebar__identity{
    min-width:0;
    flex:1 1 auto;
}

.sidebar__brand,
.mobile-header__title,
.login-showcase__brand{
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:#fff;
    text-decoration:none;
    font-weight:800;
    letter-spacing:-.03em;
}

.sidebar__brand{
    font-size:2rem;
}

.sidebar__brand-text{
    line-height:1;
}

.brand-mark{
    position:relative;
    width:34px;
    height:28px;
    display:inline-block;
}

.brand-mark--sm{
    width:28px;
    height:22px;
}

.brand-mark__shape{
    position:absolute;
    inset:0;
    border-radius:8px;
    transform:skewX(-24deg);
}

.brand-mark__shape--back{
    background:linear-gradient(180deg, rgba(78,162,255,.45) 0%, rgba(45,116,255,.2) 100%);
    left:-6px;
    top:-2px;
}

.brand-mark__shape--front{
    background:linear-gradient(135deg, #4ea2ff 0%, #2d74ff 75%);
    box-shadow:0 10px 24px rgba(45,116,255,.3);
}

.sidebar__user{
    margin-top:8px;
    color:var(--text-soft);
    font-size:.9rem;
    letter-spacing:.02em;
}

.sidebar__nav{
    gap:10px;
    margin-top:6px;
}

.sidebar__nav a{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    min-height:54px;
    padding:14px 16px;
    border-radius:16px;
    color:var(--text-soft);
    text-decoration:none;
    background:transparent;
    border:1px solid transparent;
    transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.sidebar__nav a::before{
    content:"";
    position:absolute;
    left:-18px;
    top:10px;
    bottom:10px;
    width:3px;
    border-radius:999px;
    background:linear-gradient(180deg, #4ea2ff 0%, #2d74ff 100%);
    opacity:0;
    transition:opacity .2s ease;
}

.sidebar__nav a:hover,
.sidebar__nav a.is-active{
    color:#fff;
    background:linear-gradient(180deg, rgba(28,42,74,.92) 0%, rgba(20,32,57,.92) 100%);
    border-color:rgba(96,165,250,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 22px rgba(1,6,18,.28);
}

.sidebar__nav a.is-active::before{
    opacity:1;
}

.sidebar__icon{
    width:24px;
    min-width:24px;
    font-size:1.15rem;
}

.menu-text{
    font-weight:600;
    letter-spacing:.01em;
}

.sidebar__footer{
    margin-top:auto;
    padding-top:12px;
}

.sidebar-profile-card,
.topbar-user{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(18,28,50,.95) 0%, rgba(13,22,40,.95) 100%);
    box-shadow:var(--shadow-lg);
}

.sidebar-profile-card__avatar,
.topbar-user__avatar{
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    flex:0 0 44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08));
    border:1px solid rgba(255,255,255,.12);
    font-weight:800;
    color:#fff;
}

.sidebar-profile-card__name,
.topbar-user__name{
    font-weight:700;
    color:#fff;
    line-height:1.2;
    overflow-wrap:anywhere;
}

.sidebar-profile-card__role,
.topbar-user__status{
    color:var(--text-soft);
    font-size:.85rem;
}

.page{
    position:relative;
    min-height:100vh;
    padding:28px;
}

.page--with-sidebar{
    margin-left:260px;
}

.page-shell{
    width:min(100%, 1480px);
    margin:0 auto;
}

.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:24px;
    padding:18px 22px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    background:linear-gradient(180deg, rgba(18,28,50,.94) 0%, rgba(11,18,33,.92) 100%);
    box-shadow:var(--shadow-xl);
    backdrop-filter:blur(18px);
}

.topbar__eyebrow,
.login-card__eyebrow{
    color:var(--blue);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.topbar__title{
    margin-top:4px;
    font-size:1.35rem;
    font-weight:800;
    letter-spacing:-.03em;
    color:#fff;
}

.topbar__actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex-wrap:wrap;
}

.topbar__icon-btn{
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    box-shadow:none;
}

.mobile-header{
    position:sticky;
    top:0;
    z-index:50;
    margin-bottom:18px;
    padding:10px 14px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:rgba(9,15,29,.92);
    backdrop-filter:blur(16px);
    box-shadow:var(--shadow-lg);
}

.mobile-header__title{
    font-size:1.2rem;
}

.flash-list{
    margin-bottom:20px;
}

.flash{
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
    border-left:4px solid var(--blue);
    padding:15px 18px;
    background:linear-gradient(180deg, rgba(18,28,50,.94) 0%, rgba(13,21,39,.94) 100%);
    color:#f3f7ff;
    box-shadow:var(--shadow-lg);
}

.flash--success{ border-left-color:var(--green); }
.flash--danger{ border-left-color:var(--red); }
.flash--warning{ border-left-color:var(--orange); }

.page-header,
.section-header,
.page-header.page-header--compact{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px;
}

.page-header h1,
.section-header h2,
.card h2,
.modal__header h2,
.login-title,
.login-showcase__title{
    margin:0;
    color:#fff;
    letter-spacing:-.04em;
}

.page-header h1{
    font-size:clamp(2rem, 2.5vw, 2.85rem);
}

.section-header h2,
.card h2,
.modal__header h2{
    font-size:clamp(1.35rem, 1.8vw, 2rem);
}

.page-subtitle,
.section-subtitle,
.muted,
.login-card__subtitle,
.login-showcase__text,
.finance-toolbar__subtitle,
.finance-toolbar__meta-label{
    color:var(--text-soft);
}

.page-subtitle,
.section-subtitle,
.login-card__subtitle,
.login-showcase__text{
    margin:8px 0 0;
    line-height:1.6;
}

.page-stack,
.list,
.detail-list,
.payment-products,
.inventory-reference-list,
.position-list,
.employee-report-stack{
    gap:18px;
}

.card,
.card-panel,
.modal__content,
.calendar-card,
.list-item,
.stat-card,
.finance-summary-card,
.finance-group-card,
.finance-inline-filter-card,
.employee-report-metric,
.employee-report-param-box,
.permission-item,
.position-item,
.inventory-reference-item,
.crm-table tbody tr,
.fc-theme-standard .fc-scrollgrid,
.fc .fc-toolbar,
.fc .fc-view-harness{
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(18,28,50,.94) 0%, rgba(11,18,33,.94) 100%);
    box-shadow:var(--shadow-lg);
    backdrop-filter:blur(18px);
}

.card,
.card-panel,
.modal__content,
.finance-summary-card,
.finance-group-card{
    border-radius:24px;
}

.card,
.card-panel{
    padding:22px;
}

.card--compact,
.card--nested,
.finance-inline-filter-card{
    background:linear-gradient(180deg, rgba(21,34,63,.9) 0%, rgba(13,22,41,.9) 100%);
}

.card--nested{
    border-radius:20px;
}

.grid,
.form-grid,
.stats-grid,
.finance-summary-grid,
.export-grid,
.permission-grid,
.finance-filter-form__grid,
.finance-filter-sections,
.filter-grid,
.account-fields-grid,
.employee-report-summary-grid,
.employee-report-params,
.dashboard-filters__grid,
.checkbox-grid,
.payment-product-row,
.staff-manage-layout{
    gap:16px;
}

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

.finance-summary-card{
    position:relative;
    overflow:hidden;
    min-height:168px;
}

.finance-summary-card::after,
.stat-card::after,
.appointment-card::after{
    content:"";
    position:absolute;
    inset:auto -40px -60px auto;
    width:140px;
    height:140px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(78,162,255,.18) 0%, transparent 70%);
    pointer-events:none;
}

.finance-summary-card--accent{
    background:linear-gradient(135deg, rgba(21,42,84,.98) 0%, rgba(17,31,58,.94) 48%, rgba(34,49,90,.92) 100%);
    border-color:rgba(96,165,250,.24);
}

.finance-summary-card__label,
.stat-card__label,
.stat__label,
.finance-group-card__header p,
.quick-stat,
.finance-toolbar__meta,
.employee-report-days__title{
    color:var(--text-soft);
}

.finance-summary-card__value,
.stat-card__value,
.stat__value,
.quick-stat strong,
.finance-chart__value,
.employee-report-metric strong,
.employee-report-param-box strong,
.finance-metric-row strong,
.payment-summary strong,
.login-showcase__stat strong{
    color:#fff;
    font-weight:800;
    letter-spacing:-.03em;
}

.finance-summary-card__value,
.stat-card__value,
.stat__value{
    font-size:clamp(1.8rem, 2.3vw, 2.5rem);
    margin-top:10px;
}

.finance-summary-card__hint,
.finance-summary-card__split{
    margin-top:12px;
    color:var(--text-soft);
}

.finance-summary-card__split{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.quick-stats,
.quick-stats--inline{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.quick-stat{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    padding:10px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.05);
}

.toolbar,
.filter-grid__actions,
.form-actions,
.dashboard-filters__actions,
.pagination-bar,
.pagination-bar__links,
.table-actions,
.action-buttons,
.finance-page-header__actions,
.finance-toolbar__quick,
.finance-toolbar__actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.btn,
.btn-action,
.btn-primary-custom,
.btn-secondary-custom,
.finance-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:11px 18px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.08);
    text-decoration:none;
    font-weight:700;
    letter-spacing:.01em;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.btn--primary,
.btn-primary-custom,
.btn-edit,
.finance-chip--active,
.btn--report-hero{
    color:#fff;
    background:linear-gradient(135deg, var(--blue) 0%, var(--blue-strong) 100%);
    border-color:rgba(96,165,250,.4);
    box-shadow:0 16px 30px rgba(45,116,255,.24);
}

.btn--secondary,
.btn-secondary-custom,
.btn--ghost,
.finance-chip,
.btn-action{
    color:#e8efff;
    background:rgba(255,255,255,.06);
}

.btn--danger,
.btn-delete{
    color:#fff;
    background:linear-gradient(135deg, #ff7d7d 0%, #e54863 100%);
    border-color:rgba(255,107,125,.38);
    box-shadow:0 14px 28px rgba(229,72,99,.24);
}

.btn--full{
    width:100%;
}

.btn--sm,
.finance-chip--compact,
.btn-action{
    min-height:38px;
    padding:8px 14px;
    border-radius:12px;
    font-size:.92rem;
}

.form-label,
.form-group label{
    display:block;
    margin:0 0 8px;
    color:#dce7ff;
    font-size:.92rem;
    font-weight:600;
}

.form-input,
.form-group input,
.form-group textarea,
select.form-input,
textarea.form-input{
    width:100%;
    min-height:48px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(5,11,23,.45);
    color:#f3f7ff;
    font-size:.95rem;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.form-input::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder{
    color:#7d8db0;
}

.form-input:focus,
.form-group input:focus,
.form-group textarea:focus,
select.form-input:focus,
textarea.form-input:focus{
    outline:none;
    border-color:rgba(78,162,255,.68);
    box-shadow:0 0 0 3px rgba(78,162,255,.16), inset 0 1px 0 rgba(255,255,255,.04);
}

option{
    color:#f3f7ff;
    background:#101b33;
}

.checkbox,
.checkbox-item,
.checkbox-item--boxed,
.permission-item,
.position-item,
.inventory-reference-item,
.finance-toolbar__meta,
.presence-badge,
.role-pill,
.position-name-pill,
.position-status-pill{
    border-radius:16px;
}

.checkbox{
    display:flex;
    align-items:center;
    gap:10px;
    margin:18px 0;
    color:var(--text-soft);
}

.checkbox input,
.checkbox-item input,
.permission-item input{
    accent-color:var(--blue);
}

.checkbox-item--boxed,
.permission-item,
.inventory-reference-item,
.position-item,
.finance-toolbar__meta{
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
}

.table-wrap,
.crm-table,
.table,
.fc,
.view-description,
.calendar-placeholder{
    border-radius:22px;
}

.table-wrap{
    border:1px solid rgba(255,255,255,.08);
    background:rgba(5,10,21,.28);
    box-shadow:var(--shadow-lg);
}

.table,
.crm-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    min-width:720px;
    color:#eaf1ff;
}

.table th,
.table td,
.crm-table th,
.crm-table td{
    border-bottom:1px solid rgba(255,255,255,.06);
    padding:14px 16px;
    text-align:left;
    vertical-align:top;
}

.table th,
.crm-table th{
    color:#bac8e8;
    background:rgba(255,255,255,.04);
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.table tbody tr:hover,
.crm-table tbody tr:hover{
    background:rgba(255,255,255,.03);
}

.badge,
.status-badge,
.role-pill,
.presence-badge,
.position-name-pill,
.position-status-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:7px 12px;
    border-radius:999px;
    font-size:.8rem;
    font-weight:800;
    letter-spacing:.01em;
    border:1px solid transparent;
}

.badge--success,
.status-on,
.presence-badge--online,
.position-status-pill--active{
    background:rgba(53,208,143,.12);
    color:#80f4bd;
    border-color:rgba(53,208,143,.2);
}

.badge--warning{
    background:rgba(255,155,74,.12);
    color:#ffc48f;
    border-color:rgba(255,155,74,.22);
}

.badge--danger,
.status-off,
.position-status-pill--inactive{
    background:rgba(255,107,125,.12);
    color:#ffb0bc;
    border-color:rgba(255,107,125,.22);
}

.badge--dark,
.badge--info,
.badge--primary,
.badge--violet,
.role-pill--neutral,
.role-pill--master,
.role-pill--manager,
.role-pill--director,
.presence-badge--offline{
    background:rgba(78,162,255,.12);
    color:#9ed0ff;
    border-color:rgba(78,162,255,.22);
}

.list-item,
.appointment-card,
.inventory-reference-item,
.position-item{
    position:relative;
    overflow:hidden;
}

.list-item,
.appointment-card{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:20px;
    border-radius:22px;
}

.appointment-card__main,
.list-item__main,
.inventory-reference-item__main{
    min-width:0;
    flex:1 1 auto;
}

.appointment-card__topline,
.employee-report-card__head,
.finance-toolbar__top,
.payment-summary,
.inventory-reference-item,
.position-item,
.page-header.finance-page-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.appointment-card__title,
.employee-report-card__name-row h2{
    margin:0;
    color:#fff;
    font-size:1.25rem;
}

.appointment-card__datetime,
.appointment-card__description,
.appointment-card__meta-grid,
.detail-list,
.view-description,
.login-showcase__stat span{
    color:var(--text-soft);
}

.appointment-card__price{
    font-size:1.6rem;
    font-weight:800;
    color:#fff;
    white-space:nowrap;
}

.appointment-card__description,
.view-description{
    margin-top:14px;
    padding:14px 16px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    border-radius:16px;
    line-height:1.6;
}

.appointment-card__meta-grid,
.employee-report-params,
.employee-report-summary-grid,
.stats-grid,
.export-grid,
.permission-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}

.appointment-card__meta-grid{
    margin-top:14px;
}

.appointment-card__actions,
.list-actions,
.text-right,
.text-right--appointments,
.employee-payout-form__actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:170px;
}

.status-row,
.position-tags,
.finance-history-tabs{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:14px;
}

.finance-metric-list,
.detail-list,
.position-list,
.inventory-reference-list{
    display:flex;
    flex-direction:column;
}

.finance-metric-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
    color:#d8e3fb;
}

.finance-metric-row:last-child{
    border-bottom:none;
}

.finance-chart{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(80px, 1fr));
    gap:18px;
    align-items:end;
    margin-top:22px;
    min-height:300px;
}

.finance-chart__item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.finance-chart__bar-wrap{
    display:flex;
    align-items:flex-end;
    width:100%;
    min-height:220px;
    padding:10px 12px;
    border-radius:18px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
}

.finance-chart__bar{
    width:100%;
    border-radius:14px 14px 8px 8px;
    background:linear-gradient(180deg, rgba(255,155,74,1) 0%, rgba(255,127,49,1) 100%);
    box-shadow:0 16px 28px rgba(255,127,49,.22);
}

.finance-chart__bar--negative{
    background:linear-gradient(180deg, #7aaeff 0%, #2d74ff 100%);
    box-shadow:0 16px 28px rgba(45,116,255,.24);
}

.finance-chart__label{
    color:var(--text-soft);
    text-align:center;
}

.modal{
    padding:16px;
}

.modal__backdrop{
    background:rgba(3,7,16,.72);
    backdrop-filter:blur(10px);
}

.modal__content{
    width:min(860px, calc(100% - 24px));
    padding:24px;
}

.modal__header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.login-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:32px 20px;
}

.login-showcase{
    display:grid;
    grid-template-columns:minmax(0, 1.1fr) minmax(380px, .9fr);
    gap:28px;
    width:min(1180px, 100%);
    align-items:stretch;
}

.login-showcase__panel,
.login-card{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    border-radius:30px;
    background:linear-gradient(180deg, rgba(18,28,50,.94) 0%, rgba(11,18,33,.94) 100%);
    box-shadow:var(--shadow-xl);
    padding:34px;
}

.login-showcase__panel::after,
.login-card::after{
    content:"";
    position:absolute;
    inset:auto -80px -80px auto;
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(78,162,255,.22) 0%, transparent 72%);
    pointer-events:none;
}

.login-showcase__brand{
    font-size:1.5rem;
}

.login-showcase__title{
    margin-top:28px;
    font-size:clamp(2.25rem, 4vw, 4.4rem);
    line-height:1.05;
}

.login-showcase__text{
    max-width:34rem;
    font-size:1.02rem;
}

.login-showcase__stats{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-top:26px;
}

.login-showcase__stat{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:180px;
    padding:18px 20px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.05);
}

.login-showcase__stat strong{
    font-size:1.5rem;
}

.login-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    max-width:none;
}

.login-card__header{
    margin-bottom:10px;
}

.login-title{
    margin-top:10px;
    font-size:2.1rem;
}

.list{
    max-height:none;
}

.fc{
    padding:16px;
    background:rgba(5,11,23,.2);
}

.fc-theme-standard .fc-scrollgrid,
.fc-theme-standard td,
.fc-theme-standard th{
    border-color:rgba(255,255,255,.08) !important;
}

.fc .fc-toolbar-title,
.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number{
    color:#f1f6ff;
}

.fc .fc-button{
    border:none !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.08) !important;
    color:#fff !important;
    box-shadow:none !important;
}

.fc .fc-button:hover,
.fc .fc-button-primary:not(:disabled).fc-button-active{
    background:linear-gradient(135deg, var(--blue) 0%, var(--blue-strong) 100%) !important;
}

.fc .fc-daygrid-event,
.fc .fc-timegrid-event{
    border:none;
    background:linear-gradient(135deg, rgba(255,155,74,.95) 0%, rgba(255,127,49,.95) 100%) !important;
    color:#fff;
    border-radius:10px;
}

.fc .fc-day-today{
    background:rgba(78,162,255,.08) !important;
}

@media (max-width: 1400px){
    .finance-summary-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1199px){
    .page{
        padding:18px;
    }

    .page--with-sidebar,
    .page--with-sidebar.sidebar-collapsed{
        margin-left:0 !important;
        padding-top:96px;
    }

    .mobile-header{
        display:flex;
        align-items:center;
        gap:12px;
    }

    .sidebar{
        width:min(320px, calc(100vw - 34px));
        max-width:320px;
        transform:translateX(calc(-100% - 24px));
        transition:transform .24s ease;
        z-index:80;
    }

    .sidebar.mobile-open{
        transform:translateX(0);
    }

    .sidebar.collapsed{
        width:min(320px, calc(100vw - 34px));
        padding-left:18px;
        padding-right:18px;
    }

    .sidebar.collapsed .sidebar__identity,
    .sidebar.collapsed .menu-text{
        opacity:1;
        width:auto;
        pointer-events:auto;
    }

    .sidebar__toggle{
        display:none;
    }

    .sidebar-overlay.is-visible{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .topbar{
        display:none;
    }

    .login-showcase{
        grid-template-columns:1fr;
    }
}

@media (min-width: 1200px){
    .mobile-header,
    .sidebar-overlay{
        display:none !important;
    }

    .page--with-sidebar.sidebar-collapsed{
        margin-left:104px;
    }

    .sidebar.collapsed{
        width:84px;
        padding-left:12px;
        padding-right:12px;
    }

    .sidebar.collapsed .sidebar__identity,
    .sidebar.collapsed .menu-text,
    .sidebar.collapsed .sidebar__footer{
        opacity:0;
        width:0;
        pointer-events:none;
    }

    .sidebar.collapsed .sidebar__top,
    .sidebar.collapsed .sidebar__nav a{
        justify-content:center;
    }

    .sidebar.collapsed .sidebar__nav a::before{
        left:-12px;
    }
}

@media (max-width: 900px){
    .page,
    .login-wrapper{
        padding:14px;
    }

    .card,
    .card-panel,
    .modal__content,
    .login-showcase__panel,
    .login-card,
    .topbar,
    .mobile-header,
    .list-item,
    .appointment-card{
        border-radius:20px;
    }

    .card,
    .card-panel,
    .modal__content,
    .login-showcase__panel,
    .login-card,
    .list-item,
    .appointment-card{
        padding:18px;
    }

    .page-header,
    .section-header,
    .finance-toolbar__top,
    .appointment-card__topline,
    .employee-report-card__head,
    .payment-summary,
    .pagination-bar,
    .inventory-reference-item,
    .position-item,
    .page-header.finance-page-header,
    .form-actions,
    .toolbar,
    .filter-grid__actions,
    .finance-toolbar__actions{
        flex-direction:column;
        align-items:stretch;
    }

    .grid--2,
    .grid--3,
    .grid--4,
    .grid--5,
    .stats-grid,
    .finance-summary-grid,
    .appointment-card__meta-grid,
    .dashboard-filters__grid,
    .form-grid,
    .filter-grid,
    .finance-filter-form__grid--main,
    .finance-filter-form__grid--inline,
    .finance-filter-form__grid--operations,
    .account-fields-grid,
    .employee-report-summary-grid,
    .employee-report-params,
    .permission-grid,
    .export-grid,
    .finance-filter-sections,
    .payment-product-row,
    .staff-manage-layout{
        grid-template-columns:1fr !important;
    }

    .table,
    .crm-table{
        min-width:620px;
    }

    .appointment-card,
    .list-item{
        flex-direction:column;
    }

    .appointment-card__actions,
    .list-actions,
    .text-right,
    .text-right--appointments,
    .employee-payout-form__actions{
        min-width:0;
        width:100%;
    }

    .btn,
    .btn-action,
    .btn-primary-custom,
    .btn-secondary-custom,
    .finance-chip,
    .toolbar > *,
    .form-actions > *,
    .dashboard-filters__actions > *,
    .finance-toolbar__actions > *{
        width:100%;
    }

    .login-showcase__title{
        font-size:2.4rem;
    }
}

@media (max-width: 640px){
    .page,
    .login-wrapper,
    .modal{
        padding:12px;
    }

    .sidebar{
        width:min(300px, calc(100vw - 20px));
    }

    .table,
    .crm-table{
        min-width:560px;
    }

    .page-header h1{
        font-size:1.7rem;
    }

    .section-header h2,
    .card h2,
    .modal__header h2,
    .login-title{
        font-size:1.35rem;
    }

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

    .login-showcase__panel,
    .login-card{
        padding:16px;
    }
}

/* --- Dashboard polish fixes --- */
.page-header--dashboard{
    align-items:flex-end;
    margin-bottom:18px;
}

.page-stack{
    gap:20px;
}

.card--calendar,
.card--filters,
.card--appointments{
    position:relative;
    overflow:hidden;
}

.card--calendar::before,
.card--filters::before,
.card--appointments::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:1px;
    background:linear-gradient(90deg, rgba(78,162,255,.55), rgba(255,127,49,.24), transparent 78%);
    pointer-events:none;
}

.card--calendar{
    background:linear-gradient(180deg, rgba(16,29,55,.96) 0%, rgba(10,19,38,.94) 100%);
}

.card--filters{
    background:linear-gradient(180deg, rgba(15,31,60,.98) 0%, rgba(11,24,46,.96) 100%);
    border-color:rgba(96,165,250,.18);
}

.card--appointments{
    display:block;
    min-height:auto;
    background:linear-gradient(180deg, rgba(15,28,52,.96) 0%, rgba(10,18,34,.94) 100%);
}

.card--appointments .section-header,
.card--filters .section-header,
.card--calendar .section-header{
    position:relative;
    z-index:1;
}

.quick-stats--inline{
    justify-content:flex-end;
    align-items:center;
}

.quick-stat{
    min-width:110px;
    justify-content:center;
    border:1px solid rgba(255,255,255,.06);
    background:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.04) 100%);
    color:#dfe9ff;
}

.quick-stat:nth-child(1){
    box-shadow:inset 0 -2px 0 rgba(78,162,255,.9);
}

.quick-stat:nth-child(2){
    box-shadow:inset 0 -2px 0 rgba(255,127,49,.9);
}

.quick-stat:nth-child(3){
    box-shadow:inset 0 -2px 0 rgba(53,208,143,.9);
}

.quick-stat:nth-child(4){
    box-shadow:inset 0 -2px 0 rgba(166,139,255,.9);
}

.dashboard-filters{
    position:relative;
    z-index:1;
}

.dashboard-filters__grid--compact{
    grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
    align-items:end;
}

.dashboard-filters__grid--compact > .grid-col-span-2{
    grid-column:span 2;
}

.dashboard-filters__actions--compact{
    margin-top:18px;
    justify-content:flex-start;
}

.card--appointments .list,
.list--appointments,
.list--appointments-full{
    max-height:none;
    overflow:visible;
    padding-right:0;
}

.appointment-card + .appointment-card{
    margin-top:14px;
}

.appointment-card{
    border-color:rgba(255,255,255,.06);
    background:
        linear-gradient(180deg, rgba(20,34,63,.96) 0%, rgba(14,24,45,.96) 100%);
}

.appointment-card::before{
    content:"";
    position:absolute;
    left:0;
    top:22px;
    bottom:22px;
    width:4px;
    border-radius:0 999px 999px 0;
    background:linear-gradient(180deg, var(--orange) 0%, var(--blue) 100%);
    opacity:.95;
}

.appointment-card__main{
    padding-left:10px;
}

.appointment-card__topline{
    gap:18px;
}

.appointment-card__price{
    color:#fff3e7;
}

.appointment-card__description{
    background:rgba(255,255,255,.045);
}

.appointment-card__meta-grid{
    gap:10px 18px;
}

.appointment-card__meta-grid > div{
    padding:12px 14px;
    border-radius:14px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.05);
}

.appointment-card__actions{
    min-width:164px;
    justify-content:center;
}

.pagination-bar{
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.08);
}

@media (max-width: 1199px){
    .quick-stats--inline{
        justify-content:flex-start;
    }
}

@media (max-width: 900px){
    .page-header--dashboard{
        align-items:stretch;
    }

    .dashboard-filters__grid--compact > .grid-col-span-2{
        grid-column:span 1;
    }

    .appointment-card::before{
        top:0;
        left:18px;
        right:18px;
        bottom:auto;
        width:auto;
        height:3px;
        border-radius:999px;
    }

    .appointment-card__main{
        padding-left:0;
        padding-top:8px;
    }

    .appointment-card__actions{
        min-width:0;
    }
}



/* --- Unified CRM refresh pass --- */
:root{
    --bg:#0d172a;
    --card:#1a2742;
    --card-2:#223253;
    --card-3:#2a3d63;
    --text:#f6f9ff;
    --muted:#b8c6e3;
    --border:rgba(193,208,237,.18);
    --orange:#ff9b4a;
    --orange-dark:#ff812f;
    --success:#53d89d;
    --warning:#ffbf6d;
    --danger:#ff7f91;
}

html,
body{
    overflow-x:hidden;
}

body.app-authenticated{
    background:
        radial-gradient(circle at top left, rgba(78,162,255,.18), transparent 32%),
        radial-gradient(circle at top right, rgba(255,155,74,.10), transparent 24%),
        linear-gradient(180deg, #0c1424 0%, #101a30 100%);
}

.page-shell,
.page-shell > *,
.card,
.card-panel,
.modal__content,
.table-wrap,
.table,
.crm-table,
.grid > *,
.toolbar > *,
.form-grid > *,
.finance-filter-form__grid > *,
.dashboard-filters__grid > *,
.appointment-card__main,
.inventory-reference-item__main,
.employee-report-card__head > *,
.topbar > *,
.page-header > *{
    min-width:0;
}

.page-header h1,
.section-header h2,
.card h2,
.card h3,
.modal__header h2,
.login-title,
.login-showcase__title,
.topbar__title,
.appointment-card__title,
.position-name-pill,
.badge,
.role-pill,
.finance-chip,
.btn,
.table th,
.table td,
.crm-table th,
.crm-table td,
.muted,
.page-subtitle,
.section-subtitle{
    overflow-wrap:anywhere;
}

.card,
.card-panel,
.modal__content,
.finance-summary-card,
.finance-group-card,
.inventory-reference-item,
.position-item,
.group-card,
.group-card--editor,
.stat-card,
.list-item,
.appointment-card,
.permission-item,
.checkbox-item--boxed,
.finance-inline-filter-card{
    background:linear-gradient(180deg, rgba(32,46,76,.98) 0%, rgba(22,34,58,.98) 100%) !important;
    border-color:rgba(193,208,237,.12) !important;
    box-shadow:0 16px 38px rgba(3,9,24,.26) !important;
}

.card--nested,
.calendar-placeholder,
.view-description,
.appointment-card__description,
.quick-stat,
.finance-toolbar__meta,
.position-item,
.inventory-reference-item,
.permission-item,
.checkbox-item--boxed,
.employee-report-metric,
.employee-report-param-box,
.crm-table tbody tr,
.table tbody tr{
    background-color:rgba(255,255,255,.045) !important;
}

.page-subtitle,
.section-subtitle,
.muted,
.appointment-card__datetime,
.appointment-card__description,
.appointment-card__meta-grid,
.finance-summary-card__hint,
.finance-summary-card__split,
.topbar-user__status,
.sidebar__user,
.sidebar-profile-card__role,
.login-card__subtitle,
.login-showcase__text,
.login-showcase__stat span{
    color:var(--muted) !important;
}

.form-input,
input.form-input,
select.form-input,
textarea.form-input,
.form-group input,
.form-group textarea,
.crm-form .form-group input,
.crm-form .form-group textarea,
.crm-form .form-group select,
.crm-form input:not([type='hidden']):not([type='checkbox']):not([type='radio']),
.crm-form textarea,
.crm-form select,
input[type='text']:not(.payment-product-search):not(.form-input),
input[type='number']:not(.form-input),
input[type='password']:not(.form-input),
input[type='email']:not(.form-input),
input[type='search']:not(.form-input),
input[type='tel']:not(.form-input),
input[type='date']:not(.form-input),
input[type='datetime-local']:not(.form-input),
select:not(.form-input),
textarea:not(.form-input){
    color:#f7fbff !important;
    background:rgba(12,20,36,.92) !important;
    border:1px solid rgba(191,206,235,.18) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
}

.form-input::placeholder,
.crm-form input::placeholder,
.crm-form textarea::placeholder{
    color:#91a3c9 !important;
}

.form-input:focus,
.crm-form input:focus,
.crm-form textarea:focus,
.crm-form select:focus,
input:focus,
textarea:focus,
select:focus{
    border-color:rgba(116,185,255,.72) !important;
    box-shadow:0 0 0 3px rgba(116,185,255,.16), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.table-wrap{
    background:rgba(17,25,43,.92) !important;
}

.table th,
.crm-table th{
    background:rgba(255,255,255,.06) !important;
    color:#dfe9ff !important;
}

.table td,
.crm-table td{
    color:#f2f6ff !important;
}

.table tbody tr:hover,
.crm-table tbody tr:hover{
    background:rgba(255,255,255,.055) !important;
}

.quick-stat{
    min-height:46px;
    color:#eef5ff !important;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05)) !important;
}

.quick-stat strong,
.stat-card__value,
.finance-summary-card__value,
.finance-chart__value,
.appointment-card__price,
.topbar__title,
.sidebar__brand,
.login-title,
.login-showcase__title{
    color:#ffffff !important;
}

.finance-chart__bar-wrap{
    background:rgba(255,255,255,.05) !important;
}

.btn--secondary,
.btn--ghost,
.btn-secondary-custom,
.finance-chip,
.btn-action{
    background:rgba(255,255,255,.08) !important;
    color:#f3f8ff !important;
    border-color:rgba(193,208,237,.12) !important;
}

.btn--secondary:hover,
.btn--ghost:hover,
.btn-secondary-custom:hover,
.finance-chip:hover,
.btn-action:hover{
    background:rgba(255,255,255,.12) !important;
}

.btn,
.btn-primary-custom,
.btn-secondary-custom,
.finance-chip,
.table-actions,
.pagination-bar__links a{
    white-space:normal;
    text-align:center;
}

.checkbox,
.checkbox-item,
.permission-item{
    align-items:flex-start;
}

.checkbox span,
.checkbox-item span,
.permission-item span{
    line-height:1.45;
}

.helper-text{
    margin-top:8px;
}

.title-reset{
    margin:0 !important;
}

.title-reset-top{
    margin-top:0 !important;
}

.section-block-title{
    margin:0;
}

.form-actions--flush{
    margin-top:0 !important;
}

.section-gap-16{
    margin-bottom:16px !important;
}

.form-submit-inline{
    display:flex;
    align-items:flex-end;
    gap:12px;
}

.presence-text{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:700;
}

.presence-text::before{
    content:"";
    width:9px;
    height:9px;
    border-radius:50%;
    background:currentColor;
    flex:0 0 9px;
}

.presence-text--online{
    color:#7cf0b6;
}

.presence-text--offline{
    color:#a6b5d3;
}

.topbar__icon-btn{
    background:rgba(255,255,255,.08) !important;
}

@media (max-width: 1199px){
    .toolbar,
    .page-header,
    .section-header,
    .topbar__actions,
    .finance-filter-card__top,
    .finance-toolbar__top,
    .finance-toolbar__custom,
    .finance-toolbar__actions,
    .pagination-bar,
    .pagination-bar__links,
    .page-header.finance-page-header,
    .page-header.page-header--dashboard{
        flex-direction:column !important;
        align-items:stretch !important;
    }

    .quick-stats,
    .quick-stats--inline{
        justify-content:flex-start !important;
    }
}

@media (max-width: 900px){
    .table,
    .crm-table{
        min-width:540px !important;
    }

    .appointment-card__meta-grid,
    .stats-grid,
    .finance-summary-grid,
    .dashboard-filters__grid,
    .finance-filter-form__grid,
    .finance-filter-sections,
    .permission-grid,
    .export-grid,
    .employee-report-summary-grid,
    .employee-report-params,
    .payment-product-row,
    .form-grid,
    .grid--2,
    .grid--3,
    .grid--4,
    .grid--5,
    .staff-manage-layout,
    .filter-grid,
    .account-fields-grid{
        grid-template-columns:1fr !important;
    }

    .toolbar > *,
    .form-actions > *,
    .dashboard-filters__actions > *,
    .finance-toolbar__actions > *,
    .finance-page-header__actions > *,
    .pagination-bar__links > *,
    .table-actions > *{
        width:100%;
    }

    .page-header h1{
        line-height:1.12;
    }

    .inventory-table{
        min-width:1080px !important;
    }
}


/* --- CRM readability and layout pass --- */
.page > * + *{
    margin-top:24px;
}

.page > .flash-list,
.page > .flash-list + *{
    margin-top:0;
}

.card,
.stat-card,
.finance-summary-card,
.finance-group-card,
.inventory-reference-item,
.position-item,
.group-card,
.account-box,
.employee-report-card{
    overflow:hidden;
}

.account-box,
.account-box--themed,
.group-card,
.payroll-settings-box,
.employee-report-metric,
.employee-report-param-box,
.finance-metric-row,
.finance-method-item{
    background:linear-gradient(180deg, rgba(18,28,50,.9) 0%, rgba(11,18,33,.92) 100%) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    color:#f3f7ff !important;
}

.account-box .muted,
.group-card .muted,
.payroll-settings-box .muted,
.finance-metric-row span,
.finance-method-item span,
.finance-method-item__name,
.finance-group-card .muted{
    color:#a9b7d3 !important;
}

.finance-metric-list{
    gap:10px;
}

.finance-metric-row{
    align-items:center;
    min-height:58px;
}

.employee-report-card{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.employee-report-card__head,
.employee-report-summary-grid,
.employee-report-params,
.employee-report-days,
.employee-payout-panel{
    margin:0 !important;
}

.employee-report-params{
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.employee-report-param-box--action{
    justify-content:space-between;
}

.employee-report-param-box__action{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
}

.employee-payout-panel{
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:18px;
}

.filter-grid,
.dashboard-filters__grid,
.finance-toolbar__custom,
.toolbar--compact,
.compact-filter-grid{
    gap:12px !important;
}

.toolbar--compact > *,
.compact-filter-grid > div,
.filter-grid > div,
.finance-toolbar__custom > div{
    min-width:0;
}

.form-label{
    margin-top:0;
    margin-bottom:6px;
}

.compact-filter-grid .form-input,
.filter-grid .form-input,
.toolbar--compact .form-input,
.dashboard-filters--compact .form-input,
.finance-toolbar .form-input{
    min-height:44px;
    padding:10px 13px;
}

.toolbar--compact,
.finance-chart-form-modern{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
    align-items:end;
}

.finance-chart-form-modern__actions{
    display:flex;
    align-items:flex-end;
}

.finance-chart-form-modern__actions .btn{
    min-height:44px;
}

.finance-chart-block{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.finance-line-chart-wrap{
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:18px 18px 10px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(12,20,36,.9), rgba(16,27,48,.92));
}

.finance-line-chart{
    width:100%;
    min-width:760px;
    height:auto;
    display:block;
}

.finance-line-chart__axis,
.finance-line-chart__grid{
    stroke:rgba(191,206,235,.18);
    stroke-width:1;
}

.finance-line-chart__grid{
    stroke-dasharray:6 8;
}

.finance-line-chart__stroke{
    fill:none;
    stroke:url(#financeStrokeGradient);
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.finance-line-chart__dot{
    fill:#ff9f45;
    stroke:#0d1629;
    stroke-width:3;
}

.finance-line-chart-labels{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(112px, 1fr));
    gap:10px;
}

.finance-line-chart-label{
    padding:12px 14px;
    border-radius:16px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.06);
}

.finance-line-chart-label__value{
    color:#fff;
    font-weight:800;
    line-height:1.25;
    overflow-wrap:anywhere;
}

.finance-line-chart-label__month{
    margin-top:6px;
    color:#9fb0cd;
    font-size:13px;
}

.table th,
.table td,
.crm-table th,
.crm-table td{
    word-break:normal !important;
    overflow-wrap:anywhere;
    white-space:normal;
    writing-mode:horizontal-tb !important;
    text-orientation:mixed;
    hyphens:none;
}

.table td strong,
.crm-table td strong,
.table td span,
.crm-table td span,
.table td div,
.crm-table td div{
    writing-mode:horizontal-tb !important;
}

.fc{
    --fc-border-color:rgba(255,255,255,.08);
    --fc-page-bg-color:transparent;
    --fc-list-event-hover-bg-color:rgba(255,255,255,.06);
    --fc-neutral-bg-color:rgba(255,255,255,.04);
    --fc-today-bg-color:rgba(99,179,255,.1);
}

.fc .fc-toolbar{
    padding:14px;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(12,20,36,.92), rgba(18,28,50,.9));
    margin-bottom:14px !important;
}

.fc .fc-timegrid-slot,
.fc .fc-timegrid-axis,
.fc .fc-scrollgrid,
.fc .fc-daygrid-day,
.fc .fc-list-day-cushion,
.fc .fc-list-event td{
    background:transparent !important;
}

.fc .fc-col-header-cell,
.fc .fc-daygrid-day-number,
.fc .fc-timegrid-axis-cushion,
.fc .fc-list-day-text,
.fc .fc-list-day-side-text{
    color:#dbe7ff;
}

.fc .fc-event{
    border:none !important;
    border-radius:12px !important;
    padding:2px 6px !important;
    box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.fc .fc-event-title,
.fc .fc-event-time{
    font-weight:700;
}

.fc-theme-standard .fc-list{
    border:none;
}

.crm-table--profiles,
.table{
    min-width:820px;
}

@media (max-width: 1199px){
    .staff-manage-layout,
    .employee-report-params,
    .finance-summary-grid,
    .finance-detail-grid,
    .toolbar--compact,
    .finance-chart-form-modern{
        grid-template-columns:1fr 1fr !important;
    }
}

@media (max-width: 900px){
    .page > * + *{
        margin-top:18px;
    }

    .staff-manage-layout,
    .employee-report-params,
    .finance-summary-grid,
    .finance-detail-grid,
    .toolbar--compact,
    .finance-chart-form-modern,
    .finance-toolbar__custom,
    .compact-filter-grid,
    .filter-grid{
        grid-template-columns:1fr !important;
    }

    .employee-report-param-box__action,
    .filter-grid__actions,
    .form-actions,
    .toolbar,
    .table-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .finance-line-chart-wrap{
        padding:14px;
        overflow-x:auto;
    }

    .finance-line-chart-labels{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .fc .fc-toolbar{
        gap:10px;
    }

    .fc .fc-toolbar-chunk{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        justify-content:center;
    }

    .fc .fc-button{
        width:auto;
        min-width:0;
    }
}


/* --- Access, modal and spacing fixes --- */
.page-shell > * + *{
    margin-top:24px;
}

:is(#paymentModal, #quickSaleModal) .modal__content,
:is(#paymentModal, #quickSaleModal) .card,
:is(#paymentModal, #quickSaleModal) .card--nested,
:is(#paymentModal, #quickSaleModal) .payment-product-row,
:is(#paymentModal, #quickSaleModal) .payment-summary,
:is(#paymentModal, #quickSaleModal) .payment-product-field,
:is(#paymentModal, #quickSaleModal) .payment-product-line-total{
    background:#10192d !important;
    color:#f5f8ff !important;
    border-color:rgba(193,208,237,.12) !important;
}

:is(#paymentModal, #quickSaleModal){
    overflow-y:auto;
    padding:18px 0;
}

:is(#paymentModal, #quickSaleModal) .modal__content{
    width:min(920px, calc(100% - 32px));
    max-height:calc(100vh - 36px);
    margin:0 auto;
    overflow-y:auto !important;
    padding:20px !important;
    border-radius:24px;
    border:1px solid rgba(193,208,237,.12);
    box-shadow:none;
    scrollbar-gutter:stable;
}

:is(#paymentModal, #quickSaleModal) .modal__header{
    margin-bottom:16px;
}

:is(#paymentModal, #quickSaleModal) .modal__header h2{
    font-size:26px;
    line-height:1.08;
    letter-spacing:-.03em;
}

:is(#paymentModal, #quickSaleModal) .card--nested{
    padding:14px 14px 12px;
    border-radius:20px;
    background:#16213a !important;
    border:1px solid rgba(193,208,237,.1);
}

:is(#paymentModal, #quickSaleModal) .page-header--compact{
    margin-bottom:14px;
    align-items:center;
}

:is(#paymentModal, #quickSaleModal) .section-block-title{
    display:flex;
    align-items:center;
    gap:10px;
}

:is(#paymentModal, #quickSaleModal) .section-block-title::before{
    content:"✦";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:10px;
    background:#1b2946;
    color:#9bc2ff;
    font-size:12px;
}

:is(#paymentModal, #quickSaleModal) .payment-product-row{
    display:block;
    padding:12px;
    border-radius:18px;
    border:1px solid rgba(191,206,235,.08);
    background:#111b31 !important;
}

:is(#paymentModal, #quickSaleModal) .payment-product-hint,
:is(#paymentModal, #quickSaleModal) .muted{
    color:#9fb0cd !important;
}

:is(#paymentModal, #quickSaleModal) .btn--danger{
    box-shadow:none !important;
}

:is(#paymentModal, #quickSaleModal) .btn,
:is(#paymentModal, #quickSaleModal) .form-input,
:is(#paymentModal, #quickSaleModal) textarea,
:is(#paymentModal, #quickSaleModal) select,
:is(#paymentModal, #quickSaleModal) input{
    box-shadow:none !important;
}

:is(#paymentModal, #quickSaleModal) .payment-product-field__caption{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:6px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#87a0c8;
}

:is(#paymentModal, #quickSaleModal) .payment-product-field__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    border-radius:6px;
    background:rgba(255,255,255,.04);
    color:#bfd4ff;
    font-size:10px;
}

:is(#paymentModal, #quickSaleModal) .payment-product-row__type-toggle,
:is(#paymentModal, #quickSaleModal) .payment-product-row__footer,
:is(#paymentModal, #quickSaleModal) .payment-product-row__stock,
:is(#paymentModal, #quickSaleModal) .payment-product-row__custom{
    display:grid;
    gap:12px;
}

:is(#paymentModal, #quickSaleModal) .payment-product-row__stock[hidden],
:is(#paymentModal, #quickSaleModal) .payment-product-row__custom[hidden]{
    display:none !important;
}

:is(#paymentModal, #quickSaleModal) .payment-product-row__type-toggle{
    grid-template-columns:repeat(2, minmax(150px, max-content));
    margin-bottom:10px;
}

:is(#paymentModal, #quickSaleModal) .payment-product-row__stock{
    grid-template-columns:minmax(180px, 1.2fr) minmax(220px, 1.3fr) minmax(100px, .5fr);
}

:is(#paymentModal, #quickSaleModal) .payment-product-row__custom{
    grid-template-columns:minmax(180px, 1.2fr) repeat(3, minmax(100px, .55fr));
    margin-top:8px;
}

:is(#paymentModal, #quickSaleModal) .payment-product-row__footer{
    grid-template-columns:minmax(120px, 1fr) auto;
    align-items:center;
    margin-top:8px;
}

:is(#paymentModal, #quickSaleModal) .payment-product-field--comment{
    grid-column:1 / -1;
}

:is(#paymentModal, #quickSaleModal) .payment-product-custom-hint{
    grid-column:1 / -1;
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-top:2px;
    padding:8px 10px;
    border-radius:14px;
    background:#0f182b;
    color:#97accc;
    font-size:12px;
    line-height:1.35;
}

:is(#paymentModal, #quickSaleModal) .payment-product-custom-hint__icon{
    color:#9bc2ff;
    font-weight:700;
}

:is(#paymentModal, #quickSaleModal) .payment-product-line-total{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-height:38px;
    padding:0 12px;
    border:1px solid rgba(191,206,235,.12) !important;
    border-radius:12px;
    font-size:13px;
    background:#0f182b !important;
}

.payment-item-list,
.payment-item-badges{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:8px;
}

.payment-item-list__row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

:is(#paymentModal, #quickSaleModal) textarea.form-input,
:is(#paymentModal, #quickSaleModal) input.form-input,
:is(#paymentModal, #quickSaleModal) select.form-input,
:is(#paymentModal, #quickSaleModal) .payment-product-select,
:is(#paymentModal, #quickSaleModal) .payment-product-search,
:is(#paymentModal, #quickSaleModal) .payment-product-qty,
:is(#paymentModal, #quickSaleModal) .payment-product-custom-name,
:is(#paymentModal, #quickSaleModal) .payment-product-custom-purchase,
:is(#paymentModal, #quickSaleModal) .payment-product-custom-sale,
:is(#paymentModal, #quickSaleModal) .payment-product-custom-qty,
:is(#paymentModal, #quickSaleModal) .payment-product-custom-comment{
    background:#0d1527 !important;
    color:#f7fbff !important;
    border:1px solid rgba(191,206,235,.12) !important;
    min-height:38px;
    padding:0 14px !important;
    border-radius:12px !important;
    font-size:13px;
}

:is(#paymentModal, #quickSaleModal) textarea.form-input{
    min-height:96px;
    padding:14px !important;
}

:is(#paymentModal, #quickSaleModal) .payment-product-type-btn{
    min-height:34px;
    padding:0 12px;
    border-radius:12px;
    font-size:13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
    box-shadow:none !important;
}

:is(#paymentModal, #quickSaleModal) .payment-product-type-btn:hover{
    transform:translateY(-1px);
}

:is(#paymentModal, #quickSaleModal) .payment-product-type-btn__icon{
    font-size:12px;
    opacity:.9;
}

:is(#paymentModal, #quickSaleModal) .payment-product-remove-btn{
    min-height:38px;
    padding:0 14px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    box-shadow:none !important;
}

:is(#paymentModal, #quickSaleModal) .payment-product-remove-btn__icon{
    font-size:18px;
    line-height:1;
}

:is(#paymentModal, #quickSaleModal) .payment-summary{
    margin-top:14px;
    padding:14px 16px;
    font-size:14px;
    font-weight:600;
    background:#131f36 !important;
    border:1px solid rgba(193,208,237,.1);
    border-radius:16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    position:static;
}

:is(#paymentModal, #quickSaleModal) .payment-summary strong{
    font-size:24px;
    font-weight:800;
    letter-spacing:-.02em;
    color:#ffffff;
}

:is(#paymentModal, #quickSaleModal) .form-actions .btn{
    min-height:42px;
    padding:0 16px;
    border-radius:14px;
}

:is(#paymentModal, #quickSaleModal) .toolbar .btn,
:is(#paymentModal, #quickSaleModal) .page-header--compact .btn{
    min-height:38px;
    padding:0 14px;
    border-radius:14px;
}

:is(#paymentModal, #quickSaleModal) .payment-add-row-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
}

:is(#paymentModal, #quickSaleModal) .modal__header .btn--ghost{
    width:44px;
    min-width:44px;
    height:44px;
    border-radius:16px;
}

:is(#paymentModal, #quickSaleModal) .form-label{
    margin-bottom:8px;
    font-size:13px;
}

:is(#paymentModal, #quickSaleModal) .form-actions{
    position:static;
    margin-top:18px;
    padding-top:4px;
    background:#10192d;
}

@media (max-width: 900px){
    .page-shell > * + *{
        margin-top:18px;
    }

    :is(#paymentModal, #quickSaleModal) .payment-product-row__stock,
    :is(#paymentModal, #quickSaleModal) .payment-product-row__custom,
    :is(#paymentModal, #quickSaleModal) .payment-product-row__footer{
        grid-template-columns:1fr;
    }
}


.appointment-view-modal{
    background:#10192d !important;
    color:#f5f8ff;
}

.appointment-view-head{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:16px 18px;
    border:1px solid rgba(193,208,237,.12);
    border-radius:20px;
    background:#121d33;
}

.appointment-view-head__eyebrow{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#86a0c8;
}

.appointment-view-head__title{
    margin-top:6px;
    font-size:28px;
    font-weight:800;
    letter-spacing:-.03em;
}

.appointment-view-head__title--link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#f8fbff;
    text-decoration:none;
    transition:color .18s ease, opacity .18s ease;
}

.appointment-view-head__title--link:hover{
    color:#8fc2ff;
}

.appointment-view-head__title--link.is-disabled,
.appointment-view-head__title--link[aria-disabled="true"]{
    pointer-events:none;
    opacity:1;
}

.appointment-view-head__meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    margin-top:10px;
    color:#afbdd8;
    font-size:14px;
}

.appointment-view-head__sum{
    min-width:180px;
    text-align:right;
}

.appointment-view-head__sum-label{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#86a0c8;
}

.appointment-view-head__sum-value{
    margin-top:6px;
    font-size:34px;
    font-weight:800;
    letter-spacing:-.04em;
}

.appointment-view-head__sum-paid{
    margin-top:8px;
    color:#afbdd8;
    font-size:14px;
}

.appointment-view-statuses{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
}

.appointment-view-chip{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid rgba(193,208,237,.12);
    background:#121b2f;
    color:#eff5ff;
    font-size:13px;
    font-weight:700;
}

.appointment-view-chip--accent{
    background:#18284a;
    color:#bcd4ff;
}

.appointment-view-chip--muted{
    color:#9fb0cd;
}

.appointment-view-grid{
    display:grid;
    grid-template-columns:minmax(220px, .7fr) minmax(0, 1.3fr);
    gap:14px;
    margin-top:16px;
}

.appointment-view-panel{
    padding:16px 18px;
    border:1px solid rgba(193,208,237,.1);
    border-radius:18px;
    background:#121b2f;
}

.appointment-view-panel--wide{
    width:100%;
}

.appointment-view-panel__header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
}

.appointment-view-panel__label{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#86a0c8;
    margin-bottom:10px;
}

.appointment-view-panel__meta{
    color:#9fb0cd;
    font-size:13px;
}

.appointment-view-fact + .appointment-view-fact{
    margin-top:12px;
}

.appointment-view-fact__label{
    display:block;
    margin-bottom:4px;
    color:#86a0c8;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.appointment-view-fact__value{
    color:#f5f8ff;
    font-size:15px;
    font-weight:600;
}

.appointment-view-description{
    min-height:100px;
    margin:0;
    background:#0f182b;
    border:1px solid rgba(193,208,237,.08);
}

.appointment-view-items{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.appointment-view-payments{
    display:grid;
    gap:10px;
}

.appointment-view-payment{
    display:block;
    padding:12px 14px;
    border:1px solid rgba(193,208,237,.08);
    border-radius:16px;
    background:#0f182b;
}

.appointment-view-payment__method{
    color:#f5f8ff;
    font-weight:700;
}

.appointment-view-payment__meta{
    color:#9fb0cd;
    font-size:13px;
}

.appointment-view-payment__amount{
    color:#f5f8ff;
    font-weight:800;
    white-space:nowrap;
}

.appointment-view-items__empty{
    padding:14px 0 4px;
    color:#9fb0cd;
}

.appointment-view-item{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:12px 14px;
    border:1px solid rgba(193,208,237,.08);
    border-radius:16px;
    background:#0f182b;
}

.appointment-view-item__name{
    font-size:15px;
    font-weight:700;
    color:#f5f8ff;
}

.appointment-view-item__meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px 12px;
    margin-top:6px;
    color:#9fb0cd;
    font-size:13px;
}

.appointment-view-item__badge{
    display:inline-flex;
    align-items:center;
    padding:0 10px;
    min-height:24px;
    border-radius:999px;
    background:#18284a;
    color:#bcd4ff;
    font-size:12px;
    font-weight:700;
}

.appointment-view-item__total{
    white-space:nowrap;
    font-size:16px;
    font-weight:800;
    color:#ffffff;
}

@media (max-width: 900px){
    .appointment-view-head,
    .appointment-view-grid,
    .appointment-view-panel__header,
    .appointment-view-item{
        grid-template-columns:1fr;
        flex-direction:column;
    }

    .appointment-view-head__sum{
        min-width:0;
        text-align:left;
    }
}


/* --- Mobile table overflow fix --- */
@media (max-width: 900px){
    .table-wrap,
    .finance-table-wrap{
        overflow-x:auto !important;
        overflow-y:hidden !important;
        -webkit-overflow-scrolling:touch;
    }

    .table-wrap > .table,
    .table-wrap > .crm-table,
    .finance-table-wrap > .table,
    .finance-table-wrap > .crm-table,
    .crm-table,
    .table{
        display:table !important;
        width:max-content !important;
        min-width:920px !important;
    }

    .table th,
    .table td,
    .crm-table th,
    .crm-table td{
        white-space:nowrap !important;
        word-break:keep-all !important;
        overflow-wrap:normal !important;
    }

    .table td .muted,
    .crm-table td .muted,
    .table td strong,
    .crm-table td strong,
    .table td div,
    .crm-table td div,
    .table td span,
    .crm-table td span{
        white-space:normal !important;
    }
}

/* --- Final UX polish --- */
.specialist-access-box{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.specialist-access-summary{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.specialist-access-summary__inline{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
}

.specialist-access-summary__status{
    display:inline-flex;
    align-items:center;
    width:max-content;
    max-width:100%;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(95,110,138,.16);
    border:1px solid rgba(191,206,235,.14);
    color:#eaf1ff;
    font-weight:700;
}

.specialist-access-summary__status--active{
    background:rgba(37,99,235,.18);
    border-color:rgba(96,165,250,.26);
    color:#dbeafe;
}

.specialist-access-inline-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(11,18,33,.54);
    border:1px solid rgba(191,206,235,.12);
}

.specialist-access-inline-chip .muted{
    margin-right:2px;
}

.specialist-access-summary__actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
}

.specialist-access-summary__text{
    margin:0;
}

.specialist-access-secret{
    display:flex;
    align-items:center;
    gap:10px;
}

.specialist-access-secret__hint{
    font-size:13px;
    color:#9fb0cd;
}

.specialist-access-editor{
    padding:18px;
    border-radius:18px;
    background:rgba(8,14,28,.45);
    border:1px solid rgba(191,206,235,.1);
}

.specialist-access-editor.is-hidden{
    display:none;
}

.form-input.is-invalid{
    border-color:#fb7185 !important;
    box-shadow:0 0 0 3px rgba(251,113,133,.16) !important;
}

.btn--icon{
    width:42px;
    min-width:42px;
    height:42px;
    padding:0;
    border-radius:12px;
}

.finance-summary-grid,
.finance-detail-grid,
.inventory-bottom-grid{
    align-items:stretch;
}

.finance-summary-grid{
    grid-auto-rows:auto;
    align-items:start;
}

.finance-summary-grid > .card,
.finance-summary-grid > .stat-card,
.finance-detail-grid > .card,
.inventory-bottom-grid > .card{
    height:100%;
}

.finance-summary-grid > .finance-help-card{
    height:auto;
    align-self:start;
}

.finance-summary-card{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:auto;
}

.finance-help-card{
    overflow:hidden;
    position:relative;
    height:auto;
}

.finance-help-card__summary{
    list-style:none;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    cursor:pointer;
}

.finance-help-card__summary::-webkit-details-marker,
.finance-metric-row--help::-webkit-details-marker{
    display:none;
}

.finance-help-card__body{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid rgba(193,208,237,.1);
    padding:14px 16px;
    border-radius:16px;
    background:rgba(15,24,43,.42);
    color:#a8b9d6;
    font-size:13px;
    line-height:1.45;
    box-shadow:none;
}

.finance-help-toggle{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:999px;
    background:rgba(59,130,246,.12);
    color:#8fb8ff;
    font-size:12px;
    font-weight:800;
    transition:transform .18s ease, background .18s ease, color .18s ease;
}

.finance-help-card[open] .finance-help-toggle,
.finance-metric-item[open] .finance-help-toggle{
    transform:rotate(180deg);
    background:rgba(255,159,69,.14);
    color:#ffbf7c;
}

.finance-metric-item{
    border-bottom:1px solid rgba(193,208,237,.08);
}

.finance-metric-item:last-child{
    border-bottom:none;
}

.finance-metric-row{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    column-gap:18px;
}

.finance-metric-row strong{
    justify-self:end;
    text-align:right;
    min-width:132px;
}

.finance-metric-row--help{
    list-style:none;
    cursor:pointer;
    grid-template-columns:minmax(0, 1fr) auto auto;
    column-gap:14px;
}

.finance-metric-row--help .finance-help-toggle{
    margin-left:0;
}

.finance-metric-help{
    padding:4px 18px 14px;
    color:#a8b9d6;
    font-size:13px;
    line-height:1.45;
}

.finance-detail-grid > .card,
.inventory-bottom-grid > .card{
    display:flex;
    flex-direction:column;
}

.settings-grid{
    align-items:stretch;
    grid-auto-rows:1fr;
}

.settings-grid > .card{
    display:flex;
    flex-direction:column;
    height:100%;
}

.settings-grid > .card form{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
}

.settings-grid > .card .form-actions{
    margin-top:auto;
}

.finance-metric-row{
    padding:14px 18px;
    gap:14px;
}

.inventory-reference-list{
    flex:1 1 auto;
}

.inventory-bottom-grid .card form + .inventory-reference-list{
    margin-top:18px;
}

.inventory-table{
    table-layout:auto;
}

.inventory-table th,
.inventory-table td{
    padding:12px 14px;
    vertical-align:middle;
}

.inventory-table th{
    white-space:nowrap;
}

.inventory-table__product-cell{
    min-width:220px;
    vertical-align:middle !important;
}

.inventory-table__product-name{
    font-weight:700;
    line-height:1.2;
    margin-bottom:4px;
}

.inventory-table__product-meta{
    display:flex;
    flex-wrap:wrap;
    gap:4px 8px;
    font-size:12px;
    color:#9fb0cd;
    line-height:1.25;
}

.inventory-table__status-cell,
.inventory-table__actions-cell{
    white-space:nowrap;
    vertical-align:middle !important;
}

.inventory-status-indicator{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:999px;
    border:1px solid transparent;
    position:relative;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.inventory-status-indicator:hover{
    transform:scale(1.08);
}

.inventory-status-indicator__dot{
    width:10px;
    height:10px;
    border-radius:50%;
    display:block;
    position:relative;
}

.inventory-status-indicator__dot::after{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:50%;
    opacity:.38;
    animation:inventoryStatusPulse 2.2s ease-in-out infinite;
}

.inventory-status-indicator--ok{
    background:rgba(52,211,153,.08);
    border-color:rgba(52,211,153,.22);
    box-shadow:0 0 0 1px rgba(52,211,153,.04) inset;
}

.inventory-status-indicator--ok .inventory-status-indicator__dot{
    background:#5cf0b2;
    box-shadow:0 0 10px rgba(92,240,178,.45);
}

.inventory-status-indicator--ok .inventory-status-indicator__dot::after{
    background:rgba(92,240,178,.22);
}

.inventory-status-indicator--warning{
    background:rgba(245,158,11,.08);
    border-color:rgba(245,158,11,.22);
    box-shadow:0 0 0 1px rgba(245,158,11,.04) inset;
}

.inventory-status-indicator--warning .inventory-status-indicator__dot{
    background:#ffc85e;
    box-shadow:0 0 10px rgba(255,200,94,.4);
}

.inventory-status-indicator--warning .inventory-status-indicator__dot::after{
    background:rgba(255,200,94,.22);
}

.inventory-status-indicator--archived{
    background:rgba(148,163,184,.08);
    border-color:rgba(148,163,184,.18);
    box-shadow:0 0 0 1px rgba(148,163,184,.04) inset;
}

.inventory-status-indicator--archived .inventory-status-indicator__dot{
    background:#b7c1d6;
    box-shadow:none;
}

.inventory-status-indicator--archived .inventory-status-indicator__dot::after{
    animation:none;
    background:rgba(183,193,214,.16);
}

.inventory-table__actions{
    display:inline-flex;
    align-items:center;
    gap:6px;
    flex-wrap:nowrap;
}

.inventory-table__actions form{
    margin:0;
}

.inventory-action-btn{
    width:32px;
    min-width:32px;
    height:32px;
    min-height:32px;
    padding:0;
    border-radius:11px;
    font-size:14px;
    font-weight:700;
    line-height:1;
    white-space:nowrap !important;
    box-shadow:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none !important;
    position:relative;
    overflow:hidden;
    isolation:isolate;
    text-decoration:none !important;
    vertical-align:middle;
    transition:transform .22s cubic-bezier(.2,.9,.2,1), background .22s ease, color .22s ease, box-shadow .22s ease;
}

.inventory-action-btn:hover{
    transform:translateY(-2px) scale(1.04);
}

.inventory-action-btn__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
    transition:transform .24s cubic-bezier(.2,.9,.2,1), opacity .2s ease;
}

.inventory-action-btn:hover .inventory-action-btn__icon{
    transform:scale(1.18) rotate(-10deg);
}

.inventory-action-btn::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 58%);
    opacity:0;
    transform:scale(.7);
    transition:opacity .22s ease, transform .28s cubic-bezier(.2,.9,.2,1);
}

.inventory-action-btn:hover::before{
    opacity:1;
    transform:scale(1.18);
}

.inventory-action-btn:active{
    transform:translateY(0) scale(.96);
}

.inventory-action-btn--edit{
    background:rgba(255,255,255,.05);
    color:#e8edf7;
}

.inventory-action-btn--edit:hover{
    background:rgba(255,255,255,.12);
    box-shadow:0 10px 22px rgba(15,23,42,.18);
}

.inventory-action-btn--adjust{
    background:rgba(59,130,246,.1);
    color:#9bc2ff;
}

.inventory-action-btn--adjust:hover{
    background:rgba(59,130,246,.18);
    box-shadow:0 10px 24px rgba(37,99,235,.22);
}

.inventory-action-btn--delete{
    background:rgba(244,63,94,.1);
    color:#ff9baa;
}

.inventory-action-btn--delete:hover{
    background:rgba(244,63,94,.16);
    box-shadow:0 10px 24px rgba(244,63,94,.22);
}

.client-inline-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}

.clients-table__actions-cell,
.client-visits-table__actions-cell{
    position:relative;
}

.clients-table__actions-cell::after,
.client-visits-table__actions-cell::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    border-bottom:1px solid rgba(255,255,255,.06);
    pointer-events:none;
}

.table-actions{
    align-items:center;
}

.client-stats-strip{
    display:flex;
    align-items:center;
    gap:24px;
    margin-top:14px;
    padding-top:14px;
    padding-bottom:14px;
    flex-wrap:wrap;
}

.client-stats-strip__item{
    color:#afbdd8;
    font-size:14px;
}

.client-stats-strip__item strong{
    color:#f5f8ff;
    font-size:15px;
}

@media (max-width: 640px){
    .clients-table{
        min-width:0 !important;
        width:100% !important;
    }

    .client-visits-table{
        min-width:0 !important;
        width:100% !important;
    }

    .clients-table thead,
    .client-visits-table thead{
        display:none;
    }

    .clients-table tbody,
    .client-visits-table tbody{
        display:flex;
        flex-direction:column;
        gap:10px;
    }

    .clients-table tr,
    .client-visits-table tr{
        display:block;
        border:1px solid rgba(193,208,237,.1);
        border-radius:16px;
        background:rgba(15,24,43,.56);
        padding:12px 14px;
    }

    .clients-table td,
    .client-visits-table td{
        display:flex;
        justify-content:space-between;
        gap:16px;
        padding:6px 0 !important;
        border-bottom:none !important;
        text-align:left;
    }

    .clients-table td::before,
    .client-visits-table td::before{
        content:attr(data-label);
        color:#86a0c8;
        font-size:12px;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.06em;
        flex:0 0 108px;
    }

    .clients-table td:first-child::before,
    .client-visits-table td:first-child::before{
        flex-basis:70px;
    }

    .clients-table td.table-actions,
    .client-visits-table td.table-actions{
        justify-content:flex-end;
        padding-top:10px !important;
    }

    .clients-table td.table-actions::before,
    .client-visits-table td.table-actions::before{
        display:none;
    }

    .clients-table__actions-cell::after,
    .client-visits-table__actions-cell::after{
        display:none;
    }

    .client-stats-strip{
        gap:10px 16px;
        padding-top:10px;
        padding-bottom:10px;
    }

    .client-stats-strip__item{
        font-size:13px;
    }
}

.appointment-view-payment__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.appointment-view-payment__split-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:12px;
}

.appointment-view-payment__split-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,.06);
}

.appointment-view-payment__split-label{
    color:#afbdd8;
    font-size:13px;
    font-weight:600;
}

.appointment-view-payment__split-amount{
    color:#f5f8ff;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}

@keyframes inventoryStatusPulse{
    0%, 100%{
        transform:scale(.82);
        opacity:.18;
    }
    50%{
        transform:scale(1.08);
        opacity:.4;
    }
}

.employee-report-param-box__action{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.employee-report-param-box__meta{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(37,99,235,.16);
    color:#bfd7ff;
    font-size:12px;
    font-weight:700;
}

.fc .fc-daygrid-day-frame{
    min-height:152px;
}

.fc .fc-daygrid-day-events{
    margin:4px 6px 0;
}

.fc .fc-daygrid-event-harness{
    margin-top:4px !important;
}

.fc .fc-daygrid-event{
    white-space:normal !important;
    overflow:visible !important;
}

.fc-event-chip{
    display:flex;
    flex-direction:column;
    gap:3px;
    width:100%;
    line-height:1.2;
}

.fc-event-chip__time{
    font-size:11px;
    font-weight:800;
    opacity:.92;
}

.fc-event-chip__title{
    font-size:12px;
    font-weight:800;
    white-space:normal;
    word-break:break-word;
}

.calendar-mobile-shell{
    min-width:0;
}

.mobile-calendar{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.mobile-calendar__toolbar{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:14px;
    border-radius:20px;
    background:linear-gradient(180deg, rgba(12,20,36,.94), rgba(16,27,48,.94));
    border:1px solid rgba(255,255,255,.08);
}

.mobile-calendar__nav{
    display:flex;
    gap:10px;
    align-items:center;
}

.mobile-calendar__nav-btn,
.mobile-calendar__today-btn,
.mobile-calendar__view-btn{
    border:none;
    border-radius:14px;
    min-height:42px;
    padding:10px 14px;
    background:rgba(255,255,255,.08);
    color:#eef4ff;
    font-weight:700;
}

.mobile-calendar__nav-btn{
    width:42px;
    min-width:42px;
    padding:0;
    font-size:24px;
    line-height:1;
}

.mobile-calendar__title{
    color:#fff;
    font-size:1.1rem;
    font-weight:800;
    line-height:1.25;
}

.mobile-calendar__views{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;
}

.mobile-calendar__view-btn.is-active{
    background:rgba(53,110,255,.24);
    box-shadow:inset 0 0 0 1px rgba(109,160,255,.3);
}

.mobile-calendar__body{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.mobile-calendar__grid-head{
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap:6px;
}

.mobile-calendar__weekday{
    text-align:center;
    color:#9fb0cd;
    font-size:12px;
    font-weight:700;
}

.mobile-calendar__month-grid{
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap:6px;
}

.mobile-calendar__day{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:space-between;
    min-height:60px;
    padding:8px 6px;
    border:none;
    border-radius:16px;
    background:rgba(18,28,50,.64);
    color:#eef4ff;
    text-align:left;
}

.mobile-calendar__day--outside{
    opacity:.42;
}

.mobile-calendar__day--today{
    box-shadow:inset 0 0 0 1px rgba(109,160,255,.3);
}

.mobile-calendar__day--selected{
    background:rgba(53,110,255,.22);
    box-shadow:inset 0 0 0 1px rgba(109,160,255,.34);
}

.mobile-calendar__day-number{
    font-weight:800;
    font-size:13px;
}

.mobile-calendar__day-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:22px;
    padding:0 6px;
    border-radius:999px;
    background:#ff8a3d;
    color:#fff;
    font-size:11px;
    font-weight:800;
}

.mobile-calendar__day-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
}

.mobile-calendar__week-strip{
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap:8px;
}

.mobile-calendar__week-day{
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:flex-start;
    padding:10px;
    border:none;
    border-radius:16px;
    background:rgba(18,28,50,.64);
    color:#eef4ff;
    text-align:left;
}

.mobile-calendar__week-day--selected{
    background:rgba(53,110,255,.22);
    box-shadow:inset 0 0 0 1px rgba(109,160,255,.34);
}

.mobile-calendar__week-day--today{
    box-shadow:inset 0 0 0 1px rgba(109,160,255,.24);
}

.mobile-calendar__week-day-label{
    font-size:12px;
    font-weight:800;
    line-height:1.2;
}

.mobile-calendar__week-day-count{
    color:#9fb0cd;
    font-size:12px;
    font-weight:700;
}

.mobile-calendar__agenda,
.mobile-calendar__list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.mobile-calendar__agenda-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.mobile-calendar__agenda-title,
.mobile-calendar__list-group{
    color:#fff;
    font-size:1rem;
    font-weight:800;
    line-height:1.25;
}

.mobile-calendar__agenda-subtitle{
    margin-top:4px;
    color:#9fb0cd;
    font-size:12px;
}

.mobile-calendar__create-btn{
    border:none;
    border-radius:14px;
    min-height:40px;
    padding:10px 14px;
    background:rgba(53,110,255,.2);
    color:#eef4ff;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

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

.mobile-calendar__appointment{
    display:grid;
    grid-template-columns:64px 1fr;
    gap:10px 12px;
    align-items:start;
    width:100%;
    border:none;
    border-radius:18px;
    padding:14px;
    background:linear-gradient(180deg, rgba(255,138,61,.96), rgba(255,122,0,.92));
    color:#fff;
    text-align:left;
    box-shadow:0 10px 24px rgba(255,122,0,.16);
}

.mobile-calendar__appointment-time{
    font-size:13px;
    font-weight:900;
    line-height:1.2;
}

.mobile-calendar__appointment-main{
    font-size:13px;
    font-weight:800;
    line-height:1.25;
    overflow-wrap:anywhere;
}

.mobile-calendar__appointment-meta{
    grid-column:2;
    color:rgba(255,255,255,.82);
    font-size:12px;
    line-height:1.3;
}

.mobile-calendar__appointment--list{
    margin-top:0;
}

.mobile-calendar__empty,
.mobile-calendar__loading{
    padding:18px;
    border-radius:18px;
    background:rgba(18,28,50,.64);
    color:#9fb0cd;
    text-align:center;
}

@media (max-width: 1199px){
    .specialist-access-summary__inline{
        align-items:flex-start;
    }
}

@media (max-width: 900px){
    .specialist-access-summary__actions,
    .employee-report-param-box__action{
        flex-direction:column;
        align-items:stretch;
    }

    .fc .fc-daygrid-day-frame{
        min-height:120px;
    }

    .fc-event-chip__title{
        font-size:11px;
    }
}

@media (max-width: 640px){
    #calendar{
        overflow:visible;
        padding-bottom:0;
    }

    #calendar .fc-daygrid-day-frame{
        min-height:112px;
    }

    #calendar .fc-daygrid-day-events{
        margin:3px 4px 0;
    }

    #calendar .fc-daygrid-event-harness{
        margin-top:3px !important;
    }

    #calendar .fc-daygrid-event{
        padding:2px 4px !important;
        border-radius:10px !important;
    }

    .fc-event-chip--mobile{
        display:flex;
        align-items:center;
        gap:4px;
        min-width:0;
        max-width:100%;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .fc-event-chip--mobile .fc-event-chip__time,
    .fc-event-chip--mobile .fc-event-chip__title{
        display:block;
        min-width:0;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .fc-event-chip--mobile .fc-event-chip__time{
        flex:0 0 auto;
        font-size:10px;
    }

    .fc-event-chip--mobile .fc-event-chip__title{
        flex:1 1 auto;
        font-size:10px;
        word-break:normal;
    }

    .mobile-calendar__week-strip{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

/* --- Cross-page alignment sweep --- */
.page-shell > *,
.page-shell .card,
.page-shell .toolbar,
.page-shell .grid,
.page-shell .table-wrap,
.page-shell .stats-grid{
    min-width:0;
}

.btn,
.form-input{
    min-height:46px;
    box-sizing:border-box;
    line-height:1.35;
}

textarea.form-input{
    min-height:108px;
    padding-top:12px;
    padding-bottom:12px;
    resize:vertical;
}

.form-label{
    line-height:1.35;
}

.form-input + .form-label,
textarea.form-input + .form-label,
select.form-input + .form-label,
.helper-text + .form-label,
.muted + .form-label,
.checkbox + .form-label{
    margin-top:14px;
}

.toolbar,
.form-actions,
.inline-group{
    align-items:flex-end;
}

.toolbar > *,
.form-actions > *,
.inline-group > *,
.grid > *{
    min-width:0;
}

.form-actions{
    flex-wrap:wrap;
}

.checkbox{
    align-items:flex-start;
}

.checkbox input{
    margin-top:2px;
    flex:0 0 auto;
}

.sidebar-profile-card__body,
.topbar-user__meta{
    min-width:0;
    flex:1 1 auto;
}

.sidebar-profile-card__avatar,
.topbar-user__avatar{
    aspect-ratio:1 / 1;
    overflow:hidden;
}

.sidebar-profile-card__role,
.topbar-user__status{
    white-space:normal;
}

@media (max-width: 900px){
    .toolbar,
    .form-actions,
    .inline-group{
        align-items:stretch;
    }

    .toolbar > *,
    .form-actions > *,
    .inline-group > *{
        width:100%;
    }
}

.sync-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    background:#eceef2;
}

.sync-pill--pending,
.sync-pill--queued{
    background:rgba(217,119,6,.12);
    color:var(--warning);
}

.sync-pill--synced,
.sync-pill--uploaded{
    background:rgba(31,157,85,.12);
    color:var(--success);
}

.sync-pill--error{
    background:rgba(220,38,38,.12);
    color:var(--danger);
}

.call-detail-hero{
    display:flex;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
}

.call-detail-meta{
    display:grid;
    gap:8px;
    min-width:260px;
}

.section-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:16px;
}

.title-reset{
    margin:0;
}

.list-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
}

.note-box{
    border:1px solid var(--border);
    border-radius:14px;
    background:#fafafa;
    padding:14px;
}

.sync-error-item{
    border:1px solid rgba(220,38,38,.12);
    background:rgba(220,38,38,.04);
    border-radius:14px;
    padding:14px;
}

.audio-player{
    width:100%;
}

.timeline-item{
    border-left:3px solid var(--orange);
    padding-left:12px;
}

.compact-json pre,
.code-block{
    margin:0;
    padding:12px;
    border-radius:12px;
    background:#111827;
    color:#f9fafb;
    overflow:auto;
    font-size:12px;
    white-space:pre-wrap;
    word-break:break-word;
}

.checkbox--inline{
    align-items:center;
    margin:0;
}

.stack-form{
    display:grid;
    gap:10px;
    margin-top:12px;
}

.payment-splits-card{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:12px 14px;
    border:1px solid rgba(193,208,237,.12);
    border-radius:16px;
    background:#10192d;
}

.payment-splits-card__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.payment-splits{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.payment-split-row{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 140px auto;
    gap:8px;
    align-items:center;
}

.payment-split-row__amount{
    text-align:right;
    font-variant-numeric:tabular-nums;
}

.payment-split-row__amount.is-readonly{
    opacity:.92;
    cursor:default;
}

.payment-split-add-btn{
    width:34px;
    min-width:34px;
    height:34px;
    min-height:34px;
}

@media (max-width: 900px){
    .payment-split-row{
        grid-template-columns:1fr;
    }
}

body.modal-open{
    position:fixed;
    left:0;
    right:0;
    width:100%;
    overflow:hidden;
    overscroll-behavior:none;
    touch-action:none;
}

.modal{
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}

.modal__content{
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
}

@media (max-width: 767px){
    .modal{
        align-items:flex-start !important;
        padding:12px !important;
    }

    .modal__content{
        width:min(100%, calc(100vw - 24px)) !important;
        max-height:calc(100dvh - 24px) !important;
        margin:0 auto !important;
        overflow-y:auto !important;
    }
}

.finance-history-table--payments{
    table-layout:fixed !important;
    width:100%;
    min-width:1560px;
}

.finance-history-table--payments th,
.finance-history-table--payments td{
    vertical-align:top;
    word-break:break-word;
}

.finance-history-table__col-id{
    width:64px;
    white-space:nowrap;
}

.finance-history-table__col-date{
    width:148px;
    white-space:nowrap;
}

.finance-history-table__col-client{
    width:296px;
}

.finance-history-table__col-amounts{
    width:164px;
}

.finance-history-table__col-breakdown{
    width:188px;
}

.finance-history-table__col-total{
    width:136px;
    white-space:nowrap;
}

.finance-history-table__col-method{
    width:150px;
    white-space:nowrap;
}

.finance-history-table__col-user{
    width:90px;
    white-space:nowrap;
}

.finance-history-table__col-comment{
    width:190px;
}

.finance-history-table__col-action{
    width:148px;
    white-space:nowrap;
}

.finance-history-table__money-group,
.finance-history-table__breakdown{
    min-width:0;
}

.finance-history-table__money-line{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}

.finance-history-table__money-line + .finance-history-table__money-line{
    margin-top:6px;
}

.finance-history-table__money-line span{
    color:#9fb0cd;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
}

.finance-history-table__money-line strong,
.finance-history-table__breakdown strong,
.finance-history-table__col-total strong{
    display:inline-block;
    min-width:max-content;
}

.finance-history-table__breakdown div{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.finance-history-table__breakdown span{
    color:#9fb0cd;
}

.finance-history-table__money,
.finance-history-table__money strong,
.finance-history-table__breakdown strong{
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}

.finance-history-table__action-btn{
    min-width:110px;
}

@media (max-width: 767px){
    .sidebar{
        width:min(304px, calc(100vw - 24px));
        max-width:304px;
        min-height:100dvh;
        height:100dvh;
        padding:14px 12px 12px;
        gap:12px;
        overflow:hidden;
    }

    .sidebar__top{
        gap:10px;
    }

    .sidebar__brand{
        font-size:1.6rem;
        gap:10px;
    }

    .brand-mark{
        width:30px;
        height:24px;
    }

    .sidebar__user{
        margin-top:4px;
        font-size:.78rem;
    }

    .sidebar__nav{
        gap:6px;
        margin-top:0;
    }

    .sidebar__nav a{
        gap:10px;
        min-height:42px;
        padding:10px 12px;
        border-radius:14px;
    }

    .sidebar__nav a::before{
        left:-12px;
        top:8px;
        bottom:8px;
    }

    .sidebar__icon{
        width:20px;
        min-width:20px;
        font-size:1rem;
    }

    .menu-text{
        font-size:.92rem;
        font-weight:600;
    }

    .sidebar__footer{
        padding-top:6px;
    }

    .sidebar-profile-card{
        gap:10px;
        padding:10px 12px;
        border-radius:16px;
    }

    .sidebar-profile-card__avatar{
        width:36px;
        min-width:36px;
        height:36px;
        min-height:36px;
        flex-basis:36px;
        font-size:.9rem;
    }

    .sidebar-profile-card__name{
        font-size:.9rem;
    }

    .sidebar-profile-card__role{
        font-size:.76rem;
    }
}

@media (max-width: 767px) and (max-height: 760px){
    .sidebar{
        padding:12px 10px 10px;
        gap:10px;
    }

    .sidebar__brand{
        font-size:1.45rem;
    }

    .sidebar__user{
        display:none;
    }

    .sidebar__nav{
        gap:4px;
    }

    .sidebar__nav a{
        min-height:38px;
        padding:8px 10px;
    }

    .menu-text{
        font-size:.86rem;
    }

    .sidebar-profile-card{
        padding:8px 10px;
    }

    .sidebar-profile-card__avatar{
        width:32px;
        min-width:32px;
        height:32px;
        min-height:32px;
        flex-basis:32px;
    }

    .sidebar-profile-card__role{
        display:none;
    }
}

.finance-filter-sections--single{
    grid-template-columns:minmax(0, 1fr);
}

.finance-change-table-wrap{
    overflow-x:auto;
}

.finance-change-table-wrap > .finance-change-table{
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
    border-collapse:collapse;
}

.finance-change-table col.finance-change-table__col--id{
    width:110px;
}

.finance-change-table col.finance-change-table__col--date{
    width:158px;
}

.finance-change-table col.finance-change-table__col--client{
    width:260px;
}

.finance-change-table col.finance-change-table__col--event{
    width:360px;
}

.finance-change-table col.finance-change-table__col--changes{
    width:380px;
}

.finance-change-table col.finance-change-table__col--user{
    width:110px;
}

.finance-change-table th,
.finance-change-table td{
    padding:18px 16px !important;
    vertical-align:top !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
}

.finance-change-table td{
    line-height:1.42;
}

.finance-change-table__id,
.finance-change-table__date,
.finance-change-table__user{
    white-space:nowrap !important;
}

.finance-change-table__date{
    font-variant-numeric:tabular-nums;
}

.finance-change-table__event-type{
    margin-bottom:6px;
    color:#f8fbff;
    font-weight:700;
}

.finance-change-table__changes{
    display:grid;
    gap:10px;
}

.finance-change-table__change-line{
    display:grid;
    grid-template-columns:78px minmax(0, 1fr);
    align-items:start;
    gap:12px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.finance-change-table__change-line:last-child{
    padding-bottom:0;
    border-bottom:none;
}

.finance-change-table__change-label{
    color:#9fb0cd;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.finance-change-table__change-values{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 16px minmax(0, 1fr);
    align-items:start;
    gap:10px;
}

.finance-change-table__change-values span,
.finance-change-table__change-values strong{
    display:block;
}

.finance-change-table__change-values strong{
    color:#f8fbff;
    font-weight:700;
}

.finance-change-table__change-arrow{
    color:#7284a7;
    text-align:center;
    font-weight:700;
}

.finance-change-table__user{
    color:#f8fbff;
    font-weight:600;
}

@media (min-width: 1200px){
    .finance-change-table-wrap > .finance-change-table{
        display:table !important;
        width:100% !important;
        min-width:0 !important;
    }

    .finance-change-table th,
    .finance-change-table td{
        white-space:normal !important;
        word-break:normal !important;
        overflow-wrap:anywhere !important;
    }
}