/*
 * MSalon SaaS foundation
 *
 * Loaded after Bootstrap and the legacy business stylesheet. This file owns
 * the shared application shell and cross-module interaction baseline while
 * feature screens are migrated incrementally.
 */

:root {
    --saas-content-max: 1480px;
    --saas-topbar-height: 64px;
    --saas-mobile-nav-height: 72px;
    --saas-page-gutter: clamp(16px, 2.2vw, 32px);
    --saas-focus-ring: 0 0 0 3px rgba(204, 35, 80, 0.2);
    --saas-surface: #ffffff;
    --saas-canvas: #f7f8fa;
}

html {
    scroll-behavior: smooth;
}

body.saas-app {
    min-height: 100vh;
    color: var(--sb-text);
    background: var(--saas-canvas) !important;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.saas-app .header {
    min-height: var(--saas-topbar-height);
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--sb-border);
    box-shadow: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.saas-app .header .navbar {
    min-height: var(--saas-topbar-height);
    padding: 0 var(--saas-page-gutter);
}

body.saas-app .header .container-fluid {
    max-width: var(--saas-content-max);
    padding: 0;
}

body.saas-app .page-heading {
    max-width: min(42vw, 520px);
    overflow: hidden;
    color: var(--sb-text) !important;
    font-family: var(--sb-font-brand);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.saas-app main,
body.saas-app .client-section,
body.saas-app .plan-section,
body.saas-app .page-content {
    scroll-margin-top: calc(var(--saas-topbar-height) + 16px);
}

body.saas-app .client-section,
body.saas-app .plan-section {
    width: min(calc(100% - (var(--saas-page-gutter) * 2)), var(--saas-content-max));
    max-width: var(--saas-content-max);
    margin-right: auto;
    margin-left: auto;
}

body.saas-app :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--saas-focus-ring) !important;
}

body.saas-app :where(.btn, .form-control, .form-select, .input-group-text) {
    min-height: 40px;
}

body.saas-app :where(.form-control, .form-select) {
    border-color: var(--sb-border);
    border-radius: var(--sb-radius-md);
}

body.saas-app :where(.form-control, .form-select):hover:not(:disabled) {
    border-color: var(--sb-neutral-300);
}

body.saas-app :where(.form-control, .form-select):focus {
    border-color: var(--sb-accent);
    box-shadow: var(--saas-focus-ring) !important;
}

body.saas-app .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
}

body.saas-app .dropdown-menu {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-lg);
}

body.saas-app .modal-content,
body.saas-app .offcanvas:not(.sidepanel) {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-lg);
}

body.saas-app .card {
    background: var(--saas-surface);
}

/* Shared page header for list/detail/form workspaces. */
body.saas-app .saas-workspace-header {
    width: min(calc(100% - (var(--saas-page-gutter) * 2)), var(--saas-content-max));
    margin: 24px auto 16px;
}

body.saas-app .saas-workspace-header__main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

body.saas-app .saas-workspace-header__copy {
    min-width: 0;
}

body.saas-app .saas-workspace-header__eyebrow {
    margin-bottom: 4px;
    color: var(--sb-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.saas-app .saas-workspace-header__title {
    margin: 0;
    color: var(--sb-text);
    font-family: var(--sb-font-brand);
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

body.saas-app .saas-workspace-header__subtitle {
    max-width: 680px;
    margin: 6px 0 0;
    color: var(--sb-text-soft);
    font-size: 13.5px;
    line-height: 1.5;
}

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

body.saas-app .saas-workspace-header__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

body.saas-app .saas-workspace-search {
    width: min(100%, 420px);
}

body.saas-app .saas-workspace-search .input-group-text,
body.saas-app .saas-workspace-search .form-control {
    min-height: 44px;
    background: var(--saas-surface);
    border-color: var(--sb-border);
}

body.saas-app .saas-workspace-search .input-group-text {
    padding-right: 4px;
    color: var(--sb-text-soft);
    border-right: 0;
    border-radius: var(--sb-radius-md) 0 0 var(--sb-radius-md);
}

body.saas-app .saas-workspace-search .form-control {
    border-left: 0;
    border-radius: 0 var(--sb-radius-md) var(--sb-radius-md) 0;
}

body.saas-app .saas-view-toggle {
    padding: 3px;
    border: 1px solid var(--sb-border) !important;
    border-radius: var(--sb-radius-md);
    background: var(--saas-surface);
}

body.saas-app .saas-view-toggle .btn {
    width: 38px;
    min-height: 36px;
    padding: 0;
    border: 0 !important;
    box-shadow: none !important;
}

body.saas-app .stat-card-icon--success {
    color: var(--sb-success-ink);
    background: var(--sb-success-soft);
}

body.saas-app .stat-card-icon--info {
    color: var(--sb-info-ink);
    background: var(--sb-info-soft);
}

body.saas-app .stat-card-icon--warning {
    color: var(--sb-warning-ink);
    background: var(--sb-warning-soft);
}

body.saas-app .saas-filter-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px 12px;
}

body.saas-app .saas-filter-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--sb-text);
    font-size: 14px;
    font-weight: 700;
}

body.saas-app .saas-filter-card__hint {
    margin: 3px 0 0;
    color: var(--sb-text-soft);
    font-size: 12.5px;
}

body.saas-app .saas-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    color: var(--sb-accent-ink);
    font-size: 11px;
    background: var(--sb-accent-soft);
    border-radius: var(--sb-radius-full);
}

body.saas-app .saas-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 0 18px 18px;
}

body.saas-app .saas-filter-field {
    min-width: 0;
}

body.saas-app .saas-filter-field .form-label {
    margin-bottom: 6px;
    color: var(--sb-text-soft);
    font-size: 11.5px;
    font-weight: 650;
}

body.saas-app .saas-filter-field :where(.select2-container, .form-control, .form-select) {
    width: 100% !important;
}

body.saas-app .saas-client-card .card-body {
    padding: 18px;
}

body.saas-app .saas-client-card__top,
body.saas-app .saas-client-card__identity,
body.saas-app .saas-client-card__status-row,
body.saas-app .saas-client-card__actions {
    display: flex;
    align-items: center;
}

body.saas-app .saas-client-card__top {
    justify-content: space-between;
    gap: 12px;
}

body.saas-app .saas-client-card__identity {
    min-width: 0;
    gap: 12px;
    color: var(--sb-text);
    text-decoration: none;
}

body.saas-app .saas-client-card__avatar {
    flex: 0 0 auto;
}

body.saas-app .saas-client-card__identity-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

body.saas-app .saas-client-card__name {
    overflow: hidden;
    color: var(--sb-text);
    font-size: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.saas-app .saas-client-card__meta,
body.saas-app .saas-client-card__plan {
    overflow: hidden;
    color: var(--sb-text-soft);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.saas-app .saas-icon-button {
    width: 40px;
    min-height: 40px;
    padding: 0;
}

body.saas-app .saas-client-card__status-row {
    gap: 8px;
    min-width: 0;
    margin-top: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sb-border);
}

body.saas-app .saas-client-card__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    margin: 16px 0 0;
}

body.saas-app .saas-client-card__facts div {
    min-width: 0;
}

body.saas-app .saas-client-card__facts dt {
    margin-bottom: 3px;
    color: var(--sb-text-soft);
    font-size: 11px;
    font-weight: 600;
}

body.saas-app .saas-client-card__facts dd {
    overflow: hidden;
    margin: 0;
    color: var(--sb-text);
    font-size: 13px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.saas-app .saas-client-card__facts dd.is-due {
    color: var(--sb-danger-ink);
}

body.saas-app .saas-client-card__actions {
    gap: 8px;
    padding: 12px 18px;
    background: var(--sb-neutral-50);
    border-top: 1px solid var(--sb-border);
    border-radius: 0 0 14px 14px;
}

body.saas-app .saas-client-card__actions .btn:first-child {
    flex: 1;
}

body.saas-app .saas-results-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}

body.saas-app .saas-results-footer p {
    margin: 0;
    color: var(--sb-text-soft);
    font-size: 12.5px;
}

/* Shared long-form workspace */
body.saas-app .saas-form-page {
    width: min(calc(100% - (var(--saas-page-gutter) * 2)), 1180px);
    max-width: 1180px;
    margin: 0 auto 40px;
}

body.saas-app .saas-form-card {
    overflow: hidden;
}

body.saas-app .saas-form-card > .card-body {
    padding: 22px 24px 24px;
}

body.saas-app .saas-form-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: -2px 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sb-border);
}

body.saas-app .saas-form-section-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--sb-accent-ink);
    font-size: 17px;
    background: var(--sb-accent-soft);
    border-radius: var(--sb-radius-md);
}

body.saas-app .saas-form-section-heading h2 {
    margin: 0;
    color: var(--sb-text);
    font-family: var(--sb-font-brand);
    font-size: 15px;
    font-weight: 700;
}

body.saas-app .saas-form-section-heading p {
    margin: 3px 0 0;
    color: var(--sb-text-soft);
    font-size: 12.5px;
    line-height: 1.45;
}

body.saas-app .saas-client-form .row {
    --bs-gutter-x: 18px;
    --bs-gutter-y: 16px;
}

body.saas-app .saas-client-form label:not(.btn):not(.radio-inline):not(.saas-photo-preview) {
    display: inline-block;
    margin-bottom: 6px !important;
    color: var(--sb-text);
    font-size: 12px;
    font-weight: 650;
}

body.saas-app .saas-client-form .input-group-text {
    min-width: 42px;
    justify-content: center;
    color: var(--sb-text-soft);
    background: var(--sb-neutral-50);
    border-color: var(--sb-border);
}

body.saas-app .saas-client-form .input-group > :first-child {
    border-radius: var(--sb-radius-md) 0 0 var(--sb-radius-md);
}

body.saas-app .saas-client-form .radio-inline {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    cursor: pointer;
}

body.saas-app .saas-photo-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

body.saas-app .saas-photo-preview {
    display: inline-flex;
    padding: 4px;
    cursor: pointer;
    background: var(--sb-neutral-50);
    border: 1px dashed var(--sb-neutral-300);
    border-radius: var(--sb-radius-full);
}

body.saas-app .saas-photo-preview .form-user-img {
    width: 88px;
    height: 88px;
    object-fit: cover;
}

body.saas-app .saas-photo-action {
    cursor: pointer;
}

body.saas-app .saas-payment-summary .list-group-item {
    border-color: var(--sb-border);
}

body.saas-app .saas-summary-breakdown {
    font-size: 11px;
}

body.saas-app .saas-form-mobile-actions {
    position: sticky;
    z-index: 1010;
    bottom: calc(var(--saas-mobile-nav-height) + env(safe-area-inset-bottom));
    display: flex;
    gap: 10px;
    margin: 0 -12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--sb-border);
    box-shadow: 0 -8px 24px rgba(28, 25, 23, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.saas-app .saas-form-mobile-actions .btn {
    flex: 1;
}

/* Client record workspace */
body.saas-app .saas-client-detail {
    width: min(calc(100% - (var(--saas-page-gutter) * 2)), var(--saas-content-max));
    max-width: var(--saas-content-max);
    margin-right: auto;
    margin-left: auto;
}

body.saas-app .saas-client-results-state { position: absolute; z-index: 3; top: 12px; right: 12px; align-items: center; gap: 8px; padding: 8px 11px; color: var(--sb-text-soft); font-size: 12px; font-weight: 650; background: rgba(255,255,255,.94); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md); box-shadow: var(--sb-shadow-sm); backdrop-filter: blur(10px); }
body.saas-app .table-avatar--fallback { display: none; }
body.saas-app .table-avatar[style*="display: none"] + .table-avatar--fallback { display: inline-flex; }

body.saas-app .saas-alert-icon {
    flex: 0 0 auto;
    font-size: 19px;
}

body.saas-app .saas-detail-stat .card-body {
    padding: 16px;
}

body.saas-app .saas-detail-stat__label {
    color: var(--sb-text-soft);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

body.saas-app .saas-detail-stat__value {
    margin: 0;
    color: var(--sb-text);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 750;
    letter-spacing: -0.025em;
    line-height: 1.25;
}

body.saas-app .saas-record-card > .card-body {
    padding: 20px;
    background: linear-gradient(180deg, var(--sb-neutral-50) 0%, #fff 100%);
}

body.saas-app .saas-record-card__avatar {
    width: 80px;
    height: 80px;
    object-fit: cover;
    background: #fff;
    border: 3px solid #fff;
    border-radius: var(--sb-radius-full);
    box-shadow: var(--sb-shadow-md);
}

body.saas-app .saas-record-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--sb-border);
}

body.saas-app .saas-record-actions__danger {
    margin-left: auto;
}

body.saas-app .saas-detail-tabs-card {
    overflow: hidden;
}

body.saas-app .saas-detail-tabs-wrap {
    overflow-x: auto;
    padding: 0 16px;
    scrollbar-width: thin;
}

body.saas-app .saas-detail-tabs {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    margin: 0;
    border: 0;
}

body.saas-app .saas-detail-tabs .nav-link {
    position: relative;
    min-height: 50px;
    padding: 0 14px;
    color: var(--sb-text-soft);
    font-size: 12.5px;
    font-weight: 650;
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

body.saas-app .saas-detail-tabs .nav-link:hover {
    color: var(--sb-text);
    border-bottom-color: var(--sb-neutral-300);
}

body.saas-app .saas-detail-tabs .nav-link.active {
    color: var(--sb-accent);
    background: transparent;
    border-bottom-color: var(--sb-accent);
}

body.saas-app .saas-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 4px;
    padding: 0 5px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    background: var(--sb-danger);
    border-radius: var(--sb-radius-full);
}

body.saas-app .saas-timeline {
    position: relative;
    padding-left: 10px;
}

body.saas-app .saas-timeline__line {
    position: absolute;
    z-index: 0;
    top: 40px;
    bottom: -24px;
    left: 20px;
    width: 2px;
    background: var(--sb-border);
    transform: translateX(-50%);
}

body.saas-app .saas-timeline__marker-wrap {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}

body.saas-app .saas-timeline__marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid #fff;
    border-radius: var(--sb-radius-full);
    box-shadow: var(--sb-shadow-sm);
}

body.saas-app .saas-timeline__relative-time {
    font-size: 11px;
}

body.saas-app .saas-timeline__date,
body.saas-app .saas-utility-caption {
    font-size: 10.5px;
}

body.saas-app .saas-progress {
    display: block;
    width: 100%;
    height: 8px;
    overflow: hidden;
    appearance: none;
    background: var(--sb-neutral-150);
    border: 0;
    border-radius: var(--sb-radius-full);
}

body.saas-app .saas-progress::-webkit-progress-bar {
    background: var(--sb-neutral-150);
    border-radius: var(--sb-radius-full);
}

body.saas-app .saas-progress::-webkit-progress-value {
    background: var(--saas-progress-color, var(--sb-info));
    border-radius: var(--sb-radius-full);
}

body.saas-app .saas-progress::-moz-progress-bar {
    background: var(--saas-progress-color, var(--sb-info));
    border-radius: var(--sb-radius-full);
}

body.saas-app .saas-progress.is-success {
    --saas-progress-color: var(--sb-success);
}

body.saas-app .saas-progress.is-warning {
    --saas-progress-color: var(--sb-warning);
}

body.saas-app .saas-progress.is-danger {
    --saas-progress-color: var(--sb-danger);
}

body.saas-app .saas-utility-count {
    display: inline-flex;
    padding: 3px 8px;
    color: var(--sb-text-soft);
    font-size: 10px;
    font-weight: 650;
    background: var(--sb-neutral-100);
    border-radius: var(--sb-radius-full);
}

body.saas-app .saas-editable-badge {
    font-size: 10px;
}

body.saas-app .saas-log-date-column {
    width: 150px;
}

body.saas-app .saas-log-action-column {
    width: 130px;
}

body.saas-app .saas-detail-tabs-card .table-responsive,
body.saas-app .saas-client-detail > .table-responsive {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
    scrollbar-width: thin;
}

body.saas-app .client-due-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 14px 16px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: var(--sb-radius-lg); }
body.saas-app .client-due-summary div { display: grid; }
body.saas-app .client-due-summary small,
body.saas-app .client-due-summary > span { color: var(--sb-text-soft); font-size: 10px; }
body.saas-app .client-due-summary strong { color: #b42318; font-size: 20px; }
body.saas-app .client-due-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.saas-app .client-due-record { padding: 15px; background: #fff; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg); box-shadow: var(--sb-shadow-sm); }
body.saas-app .client-due-record__top,
body.saas-app .client-due-money { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.saas-app .client-due-type,
body.saas-app .client-due-status { display: inline-flex; gap: 4px; align-items: center; padding: 4px 8px; color: #1d4ed8; font-size: 9px; font-weight: 750; background: #eff6ff; border-radius: 999px; }
body.saas-app .client-due-type--stylist { color: #047857; background: #ecfdf5; }
body.saas-app .client-due-type--service { color: #0369a1; background: #f0f9ff; }
body.saas-app .client-due-status { color: #a16207; background: #fef9c3; }
body.saas-app .client-due-status.is-expired { color: #b42318; background: #fef2f2; }
body.saas-app .client-due-record h6 { margin: 13px 0 1px; color: var(--sb-text); font-size: 14px; }
body.saas-app .client-due-record > small { color: var(--sb-text-soft); font-size: 10px; }
body.saas-app .client-due-money { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--sb-border); }
body.saas-app .client-due-money span { display: grid; }
body.saas-app .client-due-money small { color: var(--sb-text-soft); font-size: 9px; }
body.saas-app .client-due-money strong { color: var(--sb-text); font-size: 11px; }
body.saas-app .client-due-record progress { width: 100%; height: 6px; margin: 12px 0; overflow: hidden; appearance: none; border: 0; border-radius: 999px; }
body.saas-app .client-due-record progress::-webkit-progress-bar { background: var(--sb-neutral-100); }
body.saas-app .client-due-record progress::-webkit-progress-value { background: #16a34a; border-radius: 999px; }
body.saas-app .client-due-record progress::-moz-progress-bar { background: #16a34a; }
body.saas-app .client-due-record .btn { display: flex; justify-content: center; width: 100%; min-height: 40px; }

@media (max-width: 991.98px) { body.saas-app .client-due-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { body.saas-app .client-due-grid { grid-template-columns: 1fr; } }

body.saas-app .saas-detail-tabs-card .table {
    min-width: 680px;
    margin-bottom: 0;
}

body.saas-app .saas-tab-records,
body.saas-app .saas-audit-records { display: grid; gap: 10px; }
body.saas-app .saas-tab-record,
body.saas-app .saas-audit-record { padding: 14px; background: #fff; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg); box-shadow: var(--sb-shadow-sm); }
body.saas-app .saas-tab-record__top,
body.saas-app .saas-tab-record__meta,
body.saas-app .saas-audit-record__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.saas-app .saas-tab-record__top strong { min-width: 0; color: var(--sb-text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.saas-app .saas-tab-record__meta { margin: 8px 0 4px; color: var(--sb-text-soft); font-size: 11px; }
body.saas-app .saas-tab-record__meta span { display: inline-flex; align-items: center; gap: 4px; }
body.saas-app .saas-tab-record .btn { min-height: 36px; }
body.saas-app .saas-audit-workspace { margin-bottom: 24px; }
body.saas-app .saas-audit-card { overflow: hidden; border: 1px solid var(--sb-border) !important; border-radius: var(--sb-radius-xl); }
body.saas-app .saas-audit-card .card-header { padding: 15px 18px; background: var(--sb-neutral-50) !important; border-color: var(--sb-border); }
body.saas-app .saas-audit-record__top { margin-bottom: 10px; }
body.saas-app .saas-audit-record__top small,
body.saas-app .saas-audit-record > small { color: var(--sb-text-soft); font-size: 10px; }
body.saas-app .saas-audit-record > strong { display: block; color: var(--sb-text); font-size: 12px; }
body.saas-app .saas-audit-record__changes { display: grid; gap: 4px; margin-top: 10px; padding-top: 10px; color: var(--sb-text-soft); font-size: 11px; border-top: 1px solid var(--sb-border); }
body.saas-app .saas-audit-record__changes del { color: #b42318; }
body.saas-app .saas-audit-record__changes ins { color: #047857; font-weight: 650; text-decoration: none; }

/* Finance value workspaces: wallet, gift cards and collection summary */
body.saas-app .saas-wallet-workspace {
    width: min(calc(100% - (var(--saas-page-gutter) * 2)), var(--saas-content-max));
    max-width: var(--saas-content-max);
    margin-right: auto;
    margin-left: auto;
}

body.saas-app .saas-wallet-balance-card {
    overflow: hidden;
    border: 1px solid var(--sb-border);
    background: linear-gradient(145deg, #fff 0%, var(--sb-accent-soft) 150%);
}

body.saas-app .saas-wallet-illustration {
    width: 88px;
    height: 88px;
    object-fit: contain;
}

body.saas-app .saas-wallet-record-amount {
    margin-top: 12px;
    font-size: 21px;
    font-weight: 750;
    letter-spacing: -.02em;
}

body.saas-app .saas-wallet-record-amount.is-credit { color: var(--sb-success-ink); }
body.saas-app .saas-wallet-record-amount.is-debit { color: var(--sb-warning-ink); }
body.saas-app .saas-wallet-record-note { margin: 5px 0 0; color: var(--sb-text-soft); font-size: 13px; }

body.saas-app .saas-gift-card-record {
    background: linear-gradient(145deg, #fff 0%, var(--sb-accent-soft) 170%);
}

body.saas-app .saas-gift-card-record__value {
    margin-top: 14px;
    color: var(--sb-text);
    font-size: 23px;
    font-weight: 750;
    letter-spacing: -.025em;
}

body.saas-app .saas-gift-card-record__people,
body.saas-app .saas-gift-card-record__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.saas-app .saas-gift-card-record__people {
    margin: 14px 0 10px;
    padding: 12px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
}

body.saas-app .saas-gift-card-record__people span { min-width: 0; }
body.saas-app .saas-gift-card-record__people small { display: block; color: var(--sb-text-soft); font-size: 11px; }
body.saas-app .saas-gift-card-record__people strong { display: block; margin-top: 3px; overflow: hidden; color: var(--sb-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
body.saas-app .saas-gift-card-record__actions { margin-top: 12px; }
body.saas-app .saas-gift-card-record__actions .btn { min-height: 44px; }

body.saas-app .collection-summary-workspace {
    width: min(calc(100% - (var(--saas-page-gutter) * 2)), var(--saas-content-max));
    max-width: var(--saas-content-max);
    margin: 0 auto 32px;
}

body.saas-app .collection-summary-filters {
    display: flex;
    align-items: end;
    gap: 10px;
    width: 100%;
}

body.saas-app .collection-summary-filters > div:not(.dropdown) { min-width: 170px; }
body.saas-app .collection-summary-filters .form-label { margin-bottom: 5px; color: var(--sb-text-soft); font-size: 12px; }
body.saas-app .collection-summary-presets,
body.saas-app .collection-summary-clear { flex: 0 0 auto; }
body.saas-app .collection-summary-presets .btn,
body.saas-app .collection-summary-clear { min-height: 42px; }

body.saas-app .collection-summary-section {
    margin-top: 22px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-xl);
    box-shadow: var(--sb-shadow-sm);
}

body.saas-app .collection-summary-section__heading h2 {
    margin: 0;
    color: var(--sb-text);
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -.01em;
}

body.saas-app .collection-summary-section__heading p {
    margin: 4px 0 0;
    color: var(--sb-text-soft);
    font-size: 13px;
}

body.saas-app .collection-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

body.saas-app .collection-summary-section + .collection-summary-section .collection-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.saas-app .collection-summary-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 16px;
    color: var(--sb-text);
    background: var(--sb-neutral-50);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    transition: transform var(--sb-duration-fast) var(--sb-ease), border-color var(--sb-duration-fast) var(--sb-ease), box-shadow var(--sb-duration-fast) var(--sb-ease);
}

body.saas-app .collection-summary-card:hover {
    color: var(--sb-text);
    border-color: var(--sb-accent);
    box-shadow: var(--sb-shadow-md);
    transform: translateY(-2px);
}

body.saas-app .collection-summary-card.is-disabled { cursor: default; }
body.saas-app .collection-summary-card.is-disabled:hover { border-color: var(--sb-border); box-shadow: none; transform: none; }

body.saas-app .collection-summary-card:focus-visible { outline: 3px solid var(--sb-accent-soft); outline-offset: 2px; }
body.saas-app .collection-summary-card__top { display: flex; align-items: center; justify-content: space-between; }
body.saas-app .collection-summary-card__icon { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; color: var(--sb-text-soft); background: #fff; border: 1px solid var(--sb-border); border-radius: 10px; font-size: 18px; }
body.saas-app .collection-summary-card--success .collection-summary-card__icon { color: var(--sb-success-ink); background: var(--sb-success-soft); border-color: transparent; }
body.saas-app .collection-summary-card--warning .collection-summary-card__icon { color: var(--sb-warning-ink); background: var(--sb-warning-soft); border-color: transparent; }
body.saas-app .collection-summary-card--danger .collection-summary-card__icon { color: var(--sb-danger-ink); background: var(--sb-danger-soft); border-color: transparent; }
body.saas-app .collection-summary-card__arrow { color: var(--sb-neutral-400); font-size: 18px; }
body.saas-app .collection-summary-card__title { margin: 14px 0; }
body.saas-app .collection-summary-card__title strong { display: block; font-size: 14px; }
body.saas-app .collection-summary-card__title span { display: block; margin-top: 3px; color: var(--sb-text-soft); font-size: 12px; }
body.saas-app .collection-summary-card__metrics { display: grid; gap: 8px; margin: auto 0 0; }
body.saas-app .collection-summary-card__metrics div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--sb-border); }
body.saas-app .collection-summary-card__metrics dt { color: var(--sb-text-soft); font-size: 11px; font-weight: 550; }
body.saas-app .collection-summary-card__metrics dd { margin: 0; color: var(--sb-text); font-size: 12px; font-weight: 700; text-align: right; }
body.saas-app .collection-summary-card__metrics .is-collected { color: var(--sb-success-ink); }
body.saas-app .collection-summary-card__metrics .is-outstanding { color: var(--sb-danger-ink); }

/* Team management and reporting workspaces */
body.saas-app .stylist-card { border: 1px solid var(--sb-border); transition: transform var(--sb-duration-fast) var(--sb-ease), border-color var(--sb-duration-fast) var(--sb-ease), box-shadow var(--sb-duration-fast) var(--sb-ease); }
body.saas-app .stylist-card:hover { border-color: var(--sb-neutral-300); box-shadow: var(--sb-shadow-md); transform: translateY(-2px); }
body.saas-app .stylist-profile-img,
body.saas-app .saas-stylist-client-avatar { width: 60px; height: 60px; object-fit: cover; border: 2px solid #fff; box-shadow: var(--sb-shadow-sm); }
body.saas-app .stylist-status-dot { width: 15px; height: 15px; padding: 0; }
body.saas-app .stylist-info-section .info-item { display: flex; align-items: center; font-size: 14px; }
body.saas-app .charges-section { border: 1px solid var(--sb-border); }
body.saas-app .clients-section { font-size: 14px; }
body.saas-app .saas-stylist-client-workspace .card { border: 1px solid var(--sb-border); }

body.saas-app .saas-payout-record__amounts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 0;
    padding: 12px;
    background: var(--sb-neutral-50);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
}
body.saas-app .saas-payout-record__amounts div { min-width: 0; }
body.saas-app .saas-payout-record__amounts dt { color: var(--sb-text-soft); font-size: 11px; font-weight: 550; }
body.saas-app .saas-payout-record__amounts dd { margin: 3px 0 0; overflow: hidden; color: var(--sb-text); font-size: 13px; font-weight: 700; text-overflow: ellipsis; }

body.saas-app .saas-role-permission-search { width: min(100%, 360px); }
body.saas-app .saas-role-permission-list { height: 220px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
body.saas-app .saas-role-permission-list .form-check { min-height: 36px; }
body.saas-app .saas-role-permission-list .form-check-label { font-size: 13.5px; }

body.saas-app .saas-report-export-strip { margin: -4px auto 14px; }
body.saas-app .saas-report-export-strip > .container { display: flex; justify-content: flex-end; padding: 10px 12px; background: #fff; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg); box-shadow: var(--sb-shadow-sm); }
body.saas-app .saas-report-export-strip .col-12 { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
body.saas-app .saas-report-export-strip .btn { min-height: 42px; }

body.saas-app .saas-performance-workspace { width: min(calc(100% - (var(--saas-page-gutter) * 2)), var(--saas-content-max)); max-width: var(--saas-content-max); }
body.saas-app .saas-performance-workspace .card { overflow: hidden; border: 1px solid var(--sb-border); }
body.saas-app .saas-chart-wrap { position: relative; width: 100%; max-width: 100%; margin: auto; }
body.saas-app .saas-chart-wrap--square { max-width: 240px; aspect-ratio: 1; }
body.saas-app .saas-chart-wrap--square-lg { max-width: 320px; aspect-ratio: 1; }
body.saas-app .saas-chart-wrap--wide { height: clamp(260px, 34vw, 350px); }
body.saas-app .saas-chart-wrap canvas { max-width: 100% !important; max-height: 100% !important; }
body.saas-app .saas-chart-legend { margin-top: 10px; text-align: center; }

body.saas-app .saas-icon-button { display: inline-flex; width: 36px; min-height: 36px; align-items: center; justify-content: center; padding: 0; border-radius: var(--sb-radius-full); }
body.saas-app .saas-admission-record__contact { display: grid; gap: 6px; margin: 12px 0; color: var(--sb-text-soft); font-size: 13px; }
body.saas-app .saas-admission-record__contact span { display: flex; min-width: 0; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.saas-app .saas-admission-record__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--sb-border); }
body.saas-app .saas-admission-record__footer .btn { min-height: 42px; }
body.saas-app .saas-trend-list { display: grid; gap: 8px; }
body.saas-app .saas-trend-record { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; background: var(--sb-neutral-50); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md); }
body.saas-app .saas-trend-record strong,
body.saas-app .saas-trend-record small { display: block; }
body.saas-app .saas-trend-record small { margin-top: 2px; color: var(--sb-text-soft); font-size: 12px; }

body.saas-app .app-nav-toggle {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: var(--sb-radius-md);
}

body.saas-app .app-nav-toggle:hover {
    background: var(--sb-neutral-100);
}

body.saas-app .app-nav-toggle .ti {
    font-size: 21px;
}

body.saas-app .footer {
    height: var(--saas-mobile-nav-height);
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--sb-border);
    box-shadow: 0 -8px 24px rgba(28, 25, 23, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.saas-app .footer-link {
    min-width: 52px;
    min-height: 48px;
    border-radius: var(--sb-radius-md);
}

body.saas-app .footer-link-content .ti {
    font-size: 21px;
}

body.saas-app .footer-link-content p {
    margin-top: 3px !important;
    font-size: 10.5px;
    font-weight: 600;
}

body.saas-app .floating-help-btn {
    border-color: var(--sb-border) !important;
    box-shadow: var(--sb-shadow-md) !important;
}

@media (max-width: 991.98px) {
    body.saas-app {
        padding-bottom: calc(var(--saas-mobile-nav-height) + env(safe-area-inset-bottom));
    }

    body.saas-app .sidepanel {
        border-right: 0;
        box-shadow: var(--sb-shadow-lg);
    }

    body.saas-app .saas-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    :root {
        --saas-topbar-height: 58px;
    }

    body.saas-app .header .navbar {
        padding-right: 12px;
        padding-left: 12px;
    }

    body.saas-app .page-heading {
        max-width: 42vw;
        margin-left: 4px !important;
        font-size: 14px;
    }

    body.saas-app .header-content {
        margin-right: 0;
        gap: 2px;
    }

    body.saas-app .topbar-quick-btn,
    body.saas-app .topbar-profile > .btn,
    body.saas-app .header-right > .btn {
        min-width: 42px;
        min-height: 42px;
    }

    body.saas-app .client-section,
    body.saas-app .plan-section {
        width: calc(100% - 24px);
    }

    body.saas-app .saas-workspace-header {
        width: calc(100% - 24px);
        margin-top: 18px;
    }

    body.saas-app .saas-workspace-header__main {
        flex-direction: column;
        gap: 14px;
    }

    body.saas-app .saas-workspace-header__actions {
        width: 100%;
        justify-content: flex-start;
    }

    body.saas-app .saas-workspace-header__actions > .btn:first-child {
        flex: 1;
    }

    body.saas-app .saas-workspace-header__toolbar,
    body.saas-app .saas-workspace-search {
        width: 100%;
    }

    body.saas-app .modal-dialog:not(.modal-fullscreen) {
        margin: 12px;
    }

    body.saas-app .modal-content {
        max-height: calc(100dvh - 24px);
    }

    body.saas-app .floating-help-btn {
        right: 16px !important;
        bottom: calc(var(--saas-mobile-nav-height) + 16px) !important;
    }

    body.saas-app .saas-form-page {
        width: calc(100% - 24px);
    }

    body.saas-app .saas-form-card > .card-body {
        padding: 18px 16px;
    }

    body.saas-app .saas-photo-field {
        margin-bottom: 4px;
    }

    body.saas-app .saas-client-detail {
        width: calc(100% - 24px);
    }

    body.saas-app .saas-record-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.saas-app .saas-record-actions .btn,
    body.saas-app .saas-record-actions__danger {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    body.saas-app :where(.btn, button, [role="button"]) {
        min-height: 44px;
    }

    body.saas-app :where(.form-control, .form-select) {
        min-height: 44px;
        font-size: 16px;
    }

    body.saas-app .dropdown-menu {
        max-width: calc(100vw - 24px);
    }

    body.saas-app .saas-filter-card__header {
        align-items: center;
        padding: 14px;
    }

    body.saas-app .saas-filter-card__hint {
        display: none;
    }

    body.saas-app .saas-filter-grid {
        grid-template-columns: 1fr;
        padding: 0 14px 14px;
    }

    body.saas-app .saas-client-card .card-body {
        padding: 16px;
    }

    body.saas-app .saas-client-card__actions {
        padding: 10px 16px;
    }

    body.saas-app .saas-client-card__actions .btn {
        min-width: 44px;
        padding-right: 11px;
        padding-left: 11px;
    }

    body.saas-app .saas-results-footer {
        justify-content: center;
        text-align: center;
    }

    body.saas-app .saas-form-section-heading {
        margin-bottom: 16px;
    }

    body.saas-app .saas-form-section-heading p {
        display: none;
    }

    body.saas-app .saas-record-card > .card-body {
        padding: 16px;
    }

    body.saas-app .saas-record-card__avatar {
        width: 64px;
        height: 64px;
    }

    body.saas-app .saas-detail-tabs-card > .card-body {
        padding: 16px;
    }

    body.saas-app .saas-timeline {
        padding-left: 0;
    }

    body.saas-app .saas-timeline__line {
        left: 20px;
    }

    body.saas-app .saas-timeline .d-flex.justify-content-between {
        gap: 8px;
    }

    body.saas-app .saas-timeline .text-end {
        max-width: 84px;
    }
}

/* ── Topbar: live salon-open status ──────────────────────────────── */
.topbar-salon-status {
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    padding: 6px 12px;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-md);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.topbar-salon-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.topbar-salon-status--open {
    color: var(--sb-success-ink);
    background: var(--sb-success-soft);
}

.topbar-salon-status--open .topbar-salon-status-dot {
    background: var(--sb-success);
}

.topbar-salon-status--closed {
    color: var(--sb-text-soft);
    background: var(--sb-neutral-100);
}

.topbar-salon-status--closed .topbar-salon-status-dot {
    background: var(--sb-neutral-400);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    body.saas-app *,
    body.saas-app *::before,
    body.saas-app *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* Shared result pagination: summary and controls stay legible without forcing
   narrow screens into horizontal overflow. */
.saas-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sb-space-3, 12px);
    width: 100%;
}

.saas-pagination__summary {
    margin: 0;
    color: var(--sb-neutral-600, #78726b);
    font-size: var(--sb-text-sm, 12.5px);
}

.saas-pagination__links {
    min-width: 0;
}

.saas-pagination__links .pagination {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .saas-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .saas-pagination__links {
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
    }
}

@media (max-width: 991.98px) {
    body.saas-app .collection-summary-grid,
    body.saas-app .collection-summary-section + .collection-summary-section .collection-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    body.saas-app .saas-wallet-workspace,
    body.saas-app .collection-summary-workspace {
        width: calc(100% - 24px);
    }

    body.saas-app .collection-summary-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
    }

    body.saas-app .collection-summary-filters > div:not(.dropdown) { min-width: 0; }
    body.saas-app .collection-summary-presets .btn,
    body.saas-app .collection-summary-clear { width: 100%; min-height: 44px; }
    body.saas-app .collection-summary-section { padding: 16px; }
    body.saas-app .collection-summary-grid,
    body.saas-app .collection-summary-section + .collection-summary-section .collection-summary-grid { grid-template-columns: 1fr; }
    body.saas-app .collection-summary-card { min-height: 238px; }
    body.saas-app .saas-role-form { width: calc(100% - 24px); padding-right: 0; padding-left: 0; }
    body.saas-app .saas-role-permission-search { width: 100%; }
    body.saas-app .saas-role-permission-list { height: auto; max-height: 300px; }
    body.saas-app .saas-report-export-strip { width: calc(100% - 24px); padding: 0 !important; }
    body.saas-app .saas-report-export-strip > .container { padding: 10px; }
    body.saas-app .saas-report-export-strip .col-12 { justify-content: stretch !important; }
    body.saas-app .saas-report-export-strip .btn-group { flex: 1 1 calc(50% - 4px); }
    body.saas-app .saas-report-export-strip .btn-group > .btn:first-child { flex: 1; }
    body.saas-app .saas-performance-workspace { width: calc(100% - 24px); padding-right: 0; padding-left: 0; }
    body.saas-app .saas-chart-wrap--wide { height: 270px; }
    body.saas-app .saas-icon-button { width: 44px; min-height: 44px; }
    body.saas-app .saas-stylist-client-workspace { padding-right: 0; padding-left: 0; }
}

@media (max-width: 359.98px) {
    body.saas-app .collection-summary-filters { grid-template-columns: 1fr; }
    body.saas-app .saas-gift-card-record__people { grid-template-columns: 1fr; }
}

/* Communication and daily operations workspaces */
body.saas-app .notification-inbox-workspace,
body.saas-app .changelog-wrapper,
body.saas-app .daybook-filter-shell {
    width: min(calc(100% - (var(--saas-page-gutter) * 2)), var(--saas-content-max));
    max-width: var(--saas-content-max);
    margin-right: auto;
    margin-left: auto;
}

body.saas-app .notification-inbox-workspace { margin-bottom: 28px; }

body.saas-app .notification-inbox-shell {
    height: min(680px, calc(100dvh - 245px));
    min-height: 520px;
    overflow: hidden;
    background: var(--saas-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-xl);
    box-shadow: var(--sb-shadow-sm);
}

body.saas-app .notification-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--sb-border);
}

body.saas-app .notification-detail-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

body.saas-app .changelog-wrapper { margin-bottom: 30px; }
body.saas-app .changelog-wrapper > .container { max-width: 100%; padding: 0; }
body.saas-app .changelog-card { border-color: var(--sb-border) !important; box-shadow: var(--sb-shadow-sm) !important; }

body.saas-app .daybook-filter-shell { margin-bottom: 14px; }
body.saas-app .daybook-filter-shell .card { border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg); }
body.saas-app .daybook-filter-grid {
    display: grid;
    grid-template-columns: minmax(170px, .7fr) minmax(190px, .8fr) minmax(280px, 1.8fr) auto;
    align-items: end;
    gap: 12px;
}
body.saas-app .daybook-filter-grid .form-label { color: var(--sb-text-soft); font-size: 12px; font-weight: 650; }
body.saas-app .daybook-record > p { margin: 10px 0; color: var(--sb-text-soft); font-size: 12px; line-height: 1.5; }
body.saas-app .daybook-record__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--sb-border); }
body.saas-app .daybook-record__footer span { display: inline-flex; align-items: center; gap: 5px; color: var(--sb-text-soft); font-size: 11px; }

body.saas-app .profile-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 12px 0;
}

body.saas-app .profile-action-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 14px;
    color: var(--sb-text);
    text-decoration: none;
    background: var(--saas-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-sm);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.saas-app button.profile-action-card { width: 100%; font: inherit; }
body.saas-app .profile-action-card:hover { color: var(--sb-text); border-color: var(--sb-neutral-300); box-shadow: var(--sb-shadow-md); transform: translateY(-1px); }
body.saas-app .profile-action-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: var(--sb-accent); font-size: 19px; background: var(--sb-accent-soft); border-radius: 12px; }
body.saas-app .profile-action-card strong,
body.saas-app .profile-action-card small { display: block; }
body.saas-app .profile-action-card strong { font-size: 13px; }
body.saas-app .profile-action-card small { margin-top: 3px; color: var(--sb-text-soft); font-size: 11px; }
body.saas-app #changePasswordModal .input-group .btn { min-width: 46px; }

@media (max-width: 991.98px) {
    body.saas-app .notification-inbox-shell { height: calc(100dvh - var(--saas-topbar-height) - var(--saas-mobile-nav-height) - 190px); min-height: 470px; }
    body.saas-app .notification-detail-header { align-items: flex-start; flex-direction: column; padding: 16px; }
    body.saas-app .notification-detail-actions { width: 100%; justify-content: flex-start; }
    body.saas-app .daybook-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.saas-app .daybook-filter-grid > .flex-grow-1 { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    body.saas-app .notification-inbox-workspace,
    body.saas-app .changelog-wrapper,
    body.saas-app .daybook-filter-shell { width: calc(100% - 24px); }
    body.saas-app .notification-inbox-workspace .settings-nav { overflow-x: auto; }
    body.saas-app .notification-inbox-shell { min-height: 440px; border-radius: var(--sb-radius-lg); }
    body.saas-app .changelog-card .card-body { padding: 18px !important; }
    body.saas-app .daybook-filter-grid { grid-template-columns: 1fr; }
    body.saas-app .daybook-filter-grid > .flex-grow-1 { grid-column: auto; }
    body.saas-app .daybook-filter-grid > .btn { width: 100%; }
    body.saas-app .profile-action-grid { grid-template-columns: 1fr; margin-right: 0; margin-left: 0; }
    body.saas-app #changePasswordModal .modal-footer,
    body.saas-app #changePasswordModal form > .d-flex { display: grid !important; grid-template-columns: 1fr 1fr; }
}