/* Shared visual language for the workspace, Desk, admin, partner and account screens. */
:root {
  --brand-font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --brand-text-body: 0.875rem;
  --brand-text-control: 0.875rem;
  --brand-text-table: 0.875rem;
  --brand-text-label: 0.875rem;
  --brand-text-small: 0.75rem;
  --brand-text-panel-title: 1rem;
  --brand-primary: #1e3a8a;
  --brand-primary-hover: #172554;
  --brand-primary-soft: #eef2ff;
  --brand-canvas: var(--theme-surface-soft, #f6f8fb);
  --brand-surface: var(--theme-surface, #ffffff);
  --brand-surface-soft: var(--theme-surface-soft, #f8fafc);
  --brand-header-bg: var(--brand-surface);
  --brand-ink: var(--theme-ink, #0f172a);
  --brand-body: var(--theme-body, #334155);
  --brand-muted: var(--theme-muted, #58677b);
  --brand-border: var(--theme-border, #e2e8f0);
  --brand-border-strong: var(--theme-border-strong, #cbd5e1);
  --brand-success: #15803d;
  --brand-danger: #b91c1c;
  --brand-warning: #a16207;
  --brand-focus: 0 0 0 3px rgba(30, 58, 138, 0.18);
  --brand-radius: 10px;
  --brand-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.03);
}

body.app-brand {
  --bs-gradient: none;
  --app-modal-header-bg: var(--brand-header-bg);
  --bs-body-font-family: var(--brand-font-sans);
  --bs-body-font-size: var(--brand-text-body);
  --bs-body-font-weight: 400;
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 30, 58, 138;
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: var(--brand-primary-hover);
  --premium-primary: var(--brand-primary);
  --premium-primary-hover: var(--brand-primary-hover);
  --premium-primary-soft: var(--brand-primary-soft);
  --premium-danger: var(--brand-danger);
  --premium-success: var(--brand-success);
  --premium-warning: var(--brand-warning);
  --bs-success-rgb: 21, 128, 61;
  --bs-danger-rgb: 185, 28, 28;
  --bc-primary: var(--brand-primary);
  --bc-primary-soft: var(--brand-primary-soft);
  --premium-font-sans: var(--brand-font-sans);
  --app-btn-primary: var(--brand-primary);
  --app-btn-primary-hover: var(--brand-primary-hover);
  --app-btn-success: var(--brand-success);
  --app-btn-success-hover: #166534;
  --app-btn-danger: var(--brand-danger);
  --app-btn-danger-hover: #991b1b;
  --cb-shell-font-sans: var(--brand-font-sans);
  --cb-shell-font-display: var(--brand-font-sans);
  --cb-shell-primary: var(--brand-primary);
  --cb-shell-primary-strong: var(--brand-primary-hover);
  --cb-shell-primary-soft: var(--brand-primary-soft);
  --cb-shell-ink: var(--brand-ink);
  --cb-shell-body: var(--brand-body);
  --cb-shell-muted: var(--brand-muted);
  --cb-shell-border: var(--brand-border);
  --cb-shell-shadow-sm: var(--brand-shadow);
  --cb-primary: var(--brand-primary);
  --cb-blue: var(--brand-primary);
  --cb-blue-deep: var(--brand-primary-hover);
  --cb-bg: var(--brand-canvas);
  --cb-border: var(--brand-border);
  --cb-shadow: var(--brand-shadow);
  --desk-bg: var(--brand-canvas);
  --desk-surface: var(--brand-surface);
  --desk-surface-strong: var(--brand-surface);
  --desk-ink: var(--brand-ink);
  --desk-muted: var(--brand-muted);
  --desk-line: var(--brand-border);
  --desk-brand: var(--brand-primary);
  --desk-brand-soft: var(--brand-primary-soft);
  --desk-shadow: var(--brand-shadow);
  --desk-radius: 14px;
  font-family: var(--brand-font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--brand-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media screen {
  body.app-brand {
    background: var(--brand-canvas);
    font-size: var(--brand-text-body);
  }
  body.app-brand ::selection { background: var(--theme-primary-soft, #dbe4ff); color: var(--brand-ink); }

  body.app-brand :is(h1, h2, h3, h4, h5, h6, button, input, select, textarea, .btn, .form-label, .table, .font-sans) {
    font-family: var(--brand-font-sans);
  }

  body.app-brand :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
  }

  body.app-brand :is(.page-title, .page-header h1, .desk-page-title, .partner-page-head h1) {
    font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.75rem);
    font-weight: 600;
    color: var(--brand-ink);
    line-height: 1.3;
  }

  body.app-brand :is(.card-title, .card-header h5, .app-page-header__content h5, .desk-panel__head h2, .modal-title) {
    font-size: var(--brand-text-panel-title);
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  body.app-brand :is(.form-label, .form-check-label, .desk-field label, legend) {
    color: var(--brand-body);
    font-size: var(--brand-text-label);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
  }

  body.app-brand :is(.form-text, .text-muted, .desk-page-copy) { color: var(--brand-muted) !important; }
  body.app-brand :is(.form-text, .invalid-feedback, small, .small) {
    font-size: var(--brand-text-small);
    line-height: 1.5;
  }

  body.app-brand :is(.btn, .desk-btn, .partner-menu a, .partner-footer__links a) {
    font-size: var(--brand-text-label);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
  }

  body.app-brand :is(.btn-primary, .desk-btn--primary) {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
  }

  body.app-brand :is(.btn-primary, .desk-btn--primary):is(:hover, :active) {
    background: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
  }

  body.app-brand :is(.form-control, .form-select, .desk-form-control) {
    border-color: var(--brand-border-strong);
    border-radius: var(--brand-radius);
    color: var(--brand-ink);
    font-size: var(--brand-text-control);
    font-weight: 400;
    line-height: 1.5;
  }

  /* Line up dates, room counts and money without changing prose spacing. */
  body.app-brand :is(input[type="number"], input[inputmode="decimal"], input[inputmode="numeric"], time, .text-end, .text-right) {
    font-variant-numeric: lining-nums tabular-nums;
  }

  body.app-brand :is(.form-control, .form-select):focus {
    border-color: var(--brand-primary);
    box-shadow: var(--brand-focus);
  }

  body.app-brand :is(.form-control, .form-select).is-invalid { border-color: var(--brand-danger); }
  body.app-brand :is(.form-control, .form-select).is-valid { border-color: var(--brand-success); }

  body.app-brand :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 3px;
  }

  body.app-brand .table {
    --bs-table-hover-bg: var(--theme-surface-soft, #f8fafc);
    --bs-table-striped-bg: var(--brand-surface-soft);
    color: var(--brand-body);
    font-size: var(--brand-text-table);
    font-variant-numeric: tabular-nums;
  }

  body.app-brand .table thead th {
    background: var(--brand-surface-soft);
    border-color: var(--brand-border);
    color: var(--brand-body);
    font-size: var(--brand-text-label);
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
  }

  body.app-brand .table tbody td {
    border-color: var(--brand-border);
    font-size: var(--brand-text-table);
    line-height: 1.5;
  }
  body.app-brand :is(.badge, .status-badge) {
    font-size: var(--brand-text-small);
    font-weight: 600;
    letter-spacing: 0;
  }
  body.app-brand :is(.dropdown-item, .page-link, .nav-link) {
    font-size: var(--brand-text-label);
    font-weight: 500;
    line-height: 1.5;
  }

  body.app-brand :is(.nav-link.active, .nav-link[aria-current="page"]) { font-weight: 600; }

  body.app-brand.app-premium :is(#dashboardSidebar, #sidebarOffcanvas) .sidebar-menu-shell :is(.sidebar-group-title-text, .sidebar-nav-link__label) {
    color: var(--brand-body);
    font-size: var(--brand-text-label);
    font-weight: 500 !important;
    line-height: 1.4;
  }

  body.app-brand.app-premium :is(#dashboardSidebar, #sidebarOffcanvas) :is(
    .sidebar-group--active > .sidebar-group-toggle,
    .sidebar-group--direct.active > .sidebar-group-direct-link,
    .sidebar-group-direct-link[aria-current="page"],
    .sidebar-nav-item.active,
    .sidebar-nav-link.active,
    .sidebar-nav-link[aria-current="page"]
  ) :is(.sidebar-group-title-text, .sidebar-nav-link__label) {
    font-weight: 600 !important;
  }

  body.app-brand .nav-pills .nav-link.active,
  body.app-brand .pagination .page-item.active .page-link {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
  }

  body.app-brand .nav-tabs .nav-link.active { color: var(--brand-primary); }
  body.app-brand :is(.card, .desk-panel, .partner-card) {
    border-color: var(--brand-border);
    box-shadow: var(--brand-shadow);
  }

  body.app-brand .fnb-order-view { --order-primary: var(--brand-primary); }
  body.app-brand .attendance-workspace { --att-blue: var(--brand-primary); }
  body.app-brand .expense-report-page { --er-blue: var(--brand-primary); }
  body.app-brand .account-report-page { --ar-blue: var(--brand-primary); }
  body.app-brand .b2b-rate-drawer { --b2b-brand: var(--brand-primary); }
  body.app-brand .setup-shell {
    --accent: var(--brand-primary);
    --accent-2: var(--brand-primary-hover);
    --ring: rgba(30, 58, 138, 0.18);
    background: var(--brand-canvas);
  }

  body.app-brand .team-workspace {
    --team-brand: var(--brand-primary);
    --team-accent: var(--brand-primary);
    --team-accent-soft: var(--brand-primary-soft);
    --team-shadow: var(--brand-shadow);
  }

  body.app-brand.superadmin-shell :is(.superadmin-property-card__meta dt, .superadmin-user-card__meta dt) {
    color: var(--brand-muted);
    font-size: var(--brand-text-small);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
  }

  body.app-brand :is(.card-header, .card-footer) { border-color: var(--brand-border); }
  /* Content title bars share one surface across workspace layouts. */
  body.app-brand :is(
    main header:not(:where(.connect-calendar__toolbar, [role="toolbar"])),
    .modal header, .modal .modal-header,
    .card-header, .app-page-header,
    .section-header, .section-head, .section-card__header,
    .cd-page-header, .cd-card-head, .cd-ops-head, .cd-month-availability__head,
    .desk-page-header, .desk-panel__head, .desk-housekeeping-simple__head,
    .desk-item-card__head, .desk-fnb-order-card__head, .desk-fnb-menu-group__head,
    .desk-fnb-setup-drawer__head, .desk-checklist-drawer__head,
    .partner-page-head, .partner-dashboard-section-head, .partner-form-header,
    .record-header, .form-header, .report-header, .business-report-header,
    .campaign-page-header, .movement-page-header, .sales-page-head, .sales-leads-head,
    .ps-page-header, .ps-directory__head, .ps-coverage__head, .price-preview-group__header,
    .email-log-header, .template-list-header, .item-sales-header,
    .addon-stats-header, .admin-leads-header, .lead-workspace-header,
    .inv-header, .mobile-request-card__header,
    .connect-manage-header, .room-amendment-panel__header, .room-block-header,
    .rp-panel__head, .er-card__head, .detail-card__head, .api-card__head, .api-section__head,
    .booking-section-header, .guest-editor-head,
    .expense-ledger-day__header, .expense-month-block__header, .history-day-header,
    .fnb-invoices-header, .fnb-orders-header, .menu-admin-panel-head, .menu-category__header,
    .onboarding-card__header, .onboarding-section__head,
    .settings-surface__header, .settings-summary-card__header, .profile-settings-card__header,
    .properties-page-head, .permission-editor__header,
    .vendor-header, .vendor-list-header, .vendor-action-header, .salary-header,
    .purchase-detail-header, .linen-shell__header, .linen-scanner__header,
    .ci-panel-heading, .ci-dialog-header, .buddy-panel__header, .learn-center__header
  ) {
    background: var(--brand-header-bg) !important;
  }
  body.app-brand :is(
    .booking-toolbar-head, .app-page-section-header, .request-workspace-head,
    .properties-panel-head, .connect-calendar__toolbar
  ) {
    border: 0;
    background: transparent;
  }
  body.app-brand .card-header {
    color: var(--brand-ink) !important;
  }
  body.app-brand .modal-content { border-color: var(--brand-border); }

  body.app-brand :is(.partner-brand__copy strong, .desk-appbar__brand-copy strong) { font-weight: 700; }
  body.app-brand .partner-brand__copy span { color: var(--brand-muted); font-weight: 500; text-transform: none; }
  body.app-brand .desk-route-progress { background: var(--brand-primary); box-shadow: none; }

  /* Replace the old purple property-switch accent with the product navy. */
  body.app-brand .app-mobile-property-option.is-selected {
    border-color: #c7d2fe;
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
  }
  body.app-brand .app-mobile-property-option__check { background: var(--brand-primary); }
}

@media screen and (min-width: 1200px) {
  /* Fit the narrow caption rail while retaining readable navigation weight. */
  body.app-brand.app-enterprise.app-premium.sidebar-collapsed #dashboardSidebar:not(.sidebar--minimal-plan) .sidebar-group-title-text {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
  }

  body.app-brand.app-enterprise.app-premium.sidebar-collapsed #dashboardSidebar:not(.sidebar--minimal-plan) :is(
    .sidebar-group--active > .sidebar-group-toggle,
    .sidebar-group--direct.active > .sidebar-group-direct-link,
    .sidebar-group-direct-link[aria-current="page"]
  ) .sidebar-group-title-text {
    font-weight: 600 !important;
  }
}

@media screen and (min-width: 768px) {
  body.app-brand .app-list-filters :is(input.form-control, select.form-select) {
    height: auto !important;
    min-height: 36px !important;
    padding-block: 6px !important;
    border-radius: 6px !important;
    font-size: var(--brand-text-control) !important;
    line-height: 1.5 !important;
  }
}

@media screen and (max-width: 767.98px) {
  /* Use the shared readable scale throughout mobile pages and dialogs. */
  body.app-brand {
    --brand-text-body: 0.875rem;
    --brand-text-table: 0.875rem;
    --brand-text-label: 0.8125rem;
    --brand-text-small: 0.75rem;
    --brand-text-panel-title: 1rem;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    line-height: 1.55;
    letter-spacing: normal;
  }

  body.app-brand :is(.form-label, .form-check-label, legend) {
    font-size: var(--brand-text-label) !important;
    line-height: 1.5;
  }

  body.app-brand :is(.form-text, .invalid-feedback, small, .small, .badge, .status-badge) {
    font-size: var(--brand-text-small) !important;
    line-height: 1.45;
  }

  body.app-brand .table :is(td, th) {
    font-size: var(--brand-text-table) !important;
    line-height: 1.5;
  }
  body.app-brand .table thead th { font-size: var(--brand-text-label) !important; }

  body.app-brand :is(.btn, .app-button, .desk-btn, .dropdown-item, .page-link, .nav-link) {
    font-size: var(--brand-text-label) !important;
    line-height: 1.45 !important;
  }

  body.app-brand :is(.card-title, .card-header h5, .modal-title, .desk-panel__head h2) {
    font-size: var(--brand-text-panel-title) !important;
    line-height: 1.35;
  }

  /* Keep editable fields at least 16px, including inside compact forms. */
  body.app-brand :is(.form-control, .form-select, .desk-form-control) {
    font-size: max(16px, var(--brand-text-control)) !important;
    line-height: 1.5;
  }
}