/* MSalon business panel — visual refresh (light + dark). Loaded last, uses the --sb-* tokens only,
   so it follows the theme automatically. Matches the admin panel's rounded, soft-shadow look. */

body.saas-app { font-family: var(--sb-font-body); }
body.saas-app h1, body.saas-app h2, body.saas-app h3, body.saas-app h4 { letter-spacing: -.015em; }

/* Cards & panels */
body.saas-app .card,
body.saas-app .stat-card,
body.saas-app .dashboard-kpi-card,
body.saas-app .premium-section,
body.saas-app .compact-kpi-card,
body.saas-app .reportcard {
    border-radius: 16px;
    border-color: var(--sb-border);
    box-shadow: 0 1px 2px rgba(20, 16, 15, .04), 0 10px 26px -20px rgba(20, 16, 15, .28);
}
body.saas-app .stat-card, body.saas-app .dashboard-kpi-card { transition: transform .15s ease, box-shadow .15s ease; }
body.saas-app .stat-card:hover, body.saas-app .dashboard-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(20, 16, 15, .4); }
body.saas-app .card > .card-header { background: transparent; border-bottom-color: var(--sb-border); padding: 1rem 1.25rem; }
body.saas-app .card-title { font-weight: 700; letter-spacing: -.01em; }

/* Tables */
body.saas-app .table > thead > tr > th {
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--sb-text-soft); background: var(--sb-neutral-100); border-bottom: 1px solid var(--sb-border);
    padding-top: .8rem; padding-bottom: .8rem; white-space: nowrap;
}
body.saas-app .table > tbody > tr > td { vertical-align: middle; border-color: var(--sb-border); }
body.saas-app .table-hover > tbody > tr:hover > * { background-color: var(--sb-accent-50); }
body.saas-app .table-responsive { border-radius: 14px; }

/* Forms */
body.saas-app .form-control, body.saas-app .form-select { border-radius: 10px; border-color: var(--sb-neutral-300); transition: border-color .15s ease, box-shadow .15s ease; }
body.saas-app .form-control:focus, body.saas-app .form-select:focus { border-color: var(--sb-accent); box-shadow: 0 0 0 3px var(--sb-accent-100); }
body.saas-app .form-label { font-weight: 600; font-size: 13px; }

/* Buttons */
body.saas-app .btn { border-radius: 10px; font-weight: 600; transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease; }
body.saas-app .btn:not(:disabled):not(.disabled):active { transform: translateY(1px); }
body.saas-app .btn-primary { box-shadow: 0 8px 18px -12px rgba(204, 35, 80, .9); }
body.saas-app .btn-sm { border-radius: 8px; }

/* Dropdowns, modals */
body.saas-app .dropdown-menu { border-radius: 14px; padding: .4rem; box-shadow: 0 24px 48px -20px rgba(20, 16, 15, .4); border: 1px solid var(--sb-border); }
body.saas-app .dropdown-item { border-radius: 9px; padding: .5rem .7rem; font-weight: 500; }
body.saas-app .modal-content { border: 0; border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(20, 16, 15, .45); }
body.saas-app .modal-header, body.saas-app .modal-footer { border-color: var(--sb-border); }
body.saas-app .modal-title { font-weight: 700; }

/* Top bar & sidebar polish */
body.saas-app .header { box-shadow: 0 6px 20px -18px rgba(20, 16, 15, .5); }
body.saas-app .topbar-search { border-radius: 12px; }
body.saas-app .topbar-quick-btn { border-radius: 11px; box-shadow: 0 8px 18px -12px rgba(204, 35, 80, .9); }
.sidepanel .nav-link, .sidepanel a.nav-link { border-radius: 11px; }
.sidepanel .nav-link.active, .sidepanel .nav-item.active > .nav-link { box-shadow: inset 3px 0 0 var(--sb-accent-500); }

/* Pagination, badges, tabs */
body.saas-app .page-link { border-radius: 9px !important; font-weight: 600; margin: 0 2px; }
body.saas-app .badge { border-radius: 999px; font-weight: 700; letter-spacing: .01em; }
body.saas-app .nav-tabs .nav-link { border-radius: 10px 10px 0 0; font-weight: 600; }

/* Phone: tap-friendly inputs, tighter gutters */
@media (max-width: 767.98px) {
    body.saas-app .form-control, body.saas-app .form-select { font-size: 16px; min-height: 44px; }
    body.saas-app .card, body.saas-app .stat-card { border-radius: 14px; }
    body.saas-app .modal-dialog { margin: .75rem; }
    body.saas-app .table-responsive { -webkit-overflow-scrolling: touch; }
}