/* ===== backoffice.css — DataTouch backoffice theme ===== */

/* --- Grift brand typeface --- */
@font-face {
  font-family: 'Grift';
  src: url('/fonts/grift/Grift-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Grift';
  src: url('/fonts/grift/Grift-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Grift';
  src: url('/fonts/grift/Grift-SemiBold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Grift';
  src: url('/fonts/grift/Grift-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Token system (brand palette from src/sources/UI Kit) --- */
:root {
  --dt-bo-bg:             #F4F4F4;
  --dt-bo-surface:        #FFFFFF;
  --dt-bo-surface-hover:  #EEF0F7;
  --dt-bo-border:         #E3E6EE;
  --dt-bo-border-strong:  #CBD1DF;
  --dt-bo-text:           #040813;
  --dt-bo-text-muted:     #5B6172;
  --dt-bo-text-subtle:    #8C92A4;
  --dt-bo-primary:        #183EEB;
  --dt-bo-primary-hover:  #1531C2;
  --dt-bo-primary-soft:   rgba(24, 62, 235, 0.08);
  --dt-bo-navy:           #01033E;
  --dt-bo-lavender:       #807DFE;
  --dt-bo-cyan:           #01D5E0;
  --dt-bo-success:        #0E9F6E;
  --dt-bo-danger:         #E5484D;
  --dt-bo-warning:        #B7791F;
  --dt-bo-info:           #183EEB;
  --dt-bo-radius-pill:    999px;
  --dt-bo-radius-lg:      16px;
  --dt-bo-radius-md:      10px;
  --dt-bo-radius-sm:      8px;
  --dt-bo-shadow-sm:      0 1px 3px rgba(4, 8, 19, 0.06), 0 1px 2px rgba(4, 8, 19, 0.04);
  --dt-bo-shadow-dialog:  0 12px 32px rgba(4, 8, 19, 0.18);
}

/* --- Backoffice surfaces --- */
.bo-shell {
  background: var(--dt-bo-bg);
  color: var(--dt-bo-text);
  font-family: 'Grift', 'Inter', 'Segoe UI', system-ui, sans-serif;
}
.bo-shell .mud-paper,
.bo-shell .mud-card {
  background: var(--dt-bo-surface);
  color: var(--dt-bo-text);
  border: 1px solid var(--dt-bo-border);
  border-radius: var(--dt-bo-radius-lg);
  box-shadow: var(--dt-bo-shadow-sm);
}

/* --- Tables --- */
.bo-shell .mud-table,
.bo-shell .mud-table-container,
.bo-shell .mud-data-grid {
  background: var(--dt-bo-surface);
  color: var(--dt-bo-text);
  border-radius: var(--dt-bo-radius-md);
}
.bo-shell .mud-table-head th,
.bo-shell .mud-data-grid .mud-table-head th {
  color: var(--dt-bo-navy);
  font-weight: 600;
  font-size: 12px;
  background: var(--dt-bo-surface);
  border-bottom: 1px solid var(--dt-bo-border);
}
.bo-shell .mud-table-row td {
  color: var(--dt-bo-text);
  border-bottom: 1px solid var(--dt-bo-border);
}
.bo-shell .mud-table-row:hover {
  background: var(--dt-bo-surface-hover);
}
.bo-shell .mud-table-row.mud-selected-row,
.bo-shell .mud-table-row.mud-table-row-selected {
  background: var(--dt-bo-primary-soft);
}

/* --- Inputs & selects --- */
.bo-shell .mud-input,
.bo-dialog .mud-input,
.bo-shell .mud-input-slot,
.bo-dialog .mud-input-slot,
.bo-shell .mud-input-control input,
.bo-dialog .mud-input-control input {
  color: var(--dt-bo-text);
}
.bo-shell .mud-input-outlined-border,
.bo-dialog .mud-input-outlined-border {
  border-color: var(--dt-bo-border-strong);
}
.bo-shell .mud-input.mud-focused .mud-input-outlined-border,
.bo-dialog .mud-input.mud-focused .mud-input-outlined-border {
  border-color: var(--dt-bo-primary);
}
.bo-shell .mud-input-label,
.bo-dialog .mud-input-label {
  color: var(--dt-bo-text-muted);
}
.bo-shell input::placeholder,
.bo-dialog input::placeholder {
  color: var(--dt-bo-text-subtle);
}

/* --- Popover / dropdown list --- */
.mud-popover .mud-list-item:hover { background: var(--dt-bo-surface-hover); }
.mud-popover .mud-list-item.mud-selected-item { background: var(--dt-bo-primary-soft); }
.mud-popover .mud-list-item-text { color: var(--dt-bo-text); }

/* --- Buttons --- */
.bo-shell .mud-button-filled.mud-button-filled-primary,
.bo-dialog .mud-button-filled.mud-button-filled-primary {
  background: var(--dt-bo-primary);
  color: #FFFFFF;
  border-radius: var(--dt-bo-radius-pill);
}
.bo-shell .mud-button-filled.mud-button-filled-primary:hover,
.bo-dialog .mud-button-filled.mud-button-filled-primary:hover {
  background: var(--dt-bo-primary-hover);
}
.bo-shell .mud-button-outlined.mud-button-outlined-primary,
.bo-dialog .mud-button-outlined.mud-button-outlined-primary {
  border: 1px solid var(--dt-bo-primary);
  color: var(--dt-bo-primary);
  background: var(--dt-bo-surface);
  border-radius: var(--dt-bo-radius-pill);
}
.bo-shell .mud-button-text.mud-button-text-primary,
.bo-dialog .mud-button-text.mud-button-text-primary {
  color: var(--dt-bo-primary);
}

/* --- Chips --- */
.bo-shell .mud-chip { border-radius: var(--dt-bo-radius-pill); }
.bo-shell .mud-chip.mud-chip-color-default {
  background: var(--dt-bo-surface-hover);
  color: var(--dt-bo-text-muted);
}
.bo-shell .mud-chip.mud-chip-color-primary {
  background: var(--dt-bo-primary-soft);
  color: var(--dt-bo-primary);
}
.bo-shell .mud-chip.mud-chip-color-success { background: var(--dt-bo-success); color: #FFFFFF; }
.bo-shell .mud-chip.mud-chip-color-error   { background: var(--dt-bo-danger);  color: #FFFFFF; }
.bo-shell .mud-chip.mud-chip-color-warning { background: var(--dt-bo-warning); color: #FFFFFF; }

/* --- Dialogs (render outside .bo-shell, hence the bo-dialog class) --- */
.bo-dialog .mud-dialog,
.bo-dialog.mud-dialog {
  background: var(--dt-bo-surface);
  color: var(--dt-bo-text);
  border-radius: var(--dt-bo-radius-lg);
  box-shadow: var(--dt-bo-shadow-dialog);
  font-family: 'Grift', 'Inter', 'Segoe UI', system-ui, sans-serif;
}
.bo-dialog .mud-dialog-title { color: var(--dt-bo-text); font-weight: 700; }
.bo-dialog .mud-dialog-content { color: var(--dt-bo-text); }
.bo-dialog .mud-paper { background: var(--dt-bo-surface); color: var(--dt-bo-text); }

/* --- Headings: Grift Bold for module/page titles (brandbook: titles = Grift
   Bold). MudBlazor's h3-h6 default to weight 300-500; backoffice module titles
   use these variants, so force them bold. --- */
.bo-shell .mud-typography-h3,
.bo-shell .mud-typography-h4,
.bo-shell .mud-typography-h5,
.bo-shell .mud-typography-h6 {
  font-weight: 700;
}

/* ═════════════════════════════════════════════════════════════════
   Responsive layer — every module / popup / section adapts to
   phone, tablet and desktop. Layout chrome (sidebar → drawer at
   960px) is owned by BackofficeLayout.razor. THIS layer owns the
   content area + every MudBlazor surface (tables, dialogs, grids,
   chips, forms, buttons) so each module inherits sensible mobile
   behavior without per-page tweaks.
   Breakpoints:
     ≤ 960px → tablet : narrower padding, scrollable tables, snug fonts.
     ≤ 600px → phone  : full-bleed dialogs, stacked grids, tap targets.
     ≤ 380px → narrow : extreme compactness.
   ═════════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  /* Container padding */
  .bo-shell .mud-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Heading scale shrinks one notch */
  .bo-shell .mud-typography-h3 { font-size: 1.55rem; }
  .bo-shell .mud-typography-h4 { font-size: 1.35rem; }
  .bo-shell .mud-typography-h5 { font-size: 1.15rem; }
  .bo-shell .mud-typography-h6 { font-size: 1.05rem; }

  /* Tables scroll horizontally inside their container, keeping the page
     bounded. Pages that ship a card-stack alternative (e.g. Tenants
     .tc-card) override their own visibility — this rule keeps the
     fallback graceful for the ones that don't. */
  .bo-shell .mud-table-container,
  .bo-shell .mud-data-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .bo-shell .mud-table { min-width: max-content; }

  /* Dialogs occupy most of the viewport. */
  .bo-dialog .mud-dialog,
  .bo-shell .mud-dialog {
    max-width: 94vw !important;
    width: 94vw !important;
  }

  /* Cards/paper tighter; touch room on buttons. */
  .bo-shell .mud-paper,
  .bo-shell .mud-card {
    padding: 16px;
  }
  .bo-shell .mud-button,
  .bo-dialog .mud-button {
    min-height: 40px;
  }
  .bo-shell .mud-icon-button,
  .bo-dialog .mud-icon-button {
    min-width: 40px;
    min-height: 40px;
  }

  /* Stack and wrap page-header rows so the back-link + title + chips
     + primary action don't crowd off-screen. */
  .bo-page-header,
  .bo-shell .mud-stack[row] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

@media (max-width: 600px) {
  .bo-shell .mud-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Compact heading scale on phones. */
  .bo-shell .mud-typography-h3 { font-size: 1.35rem; }
  .bo-shell .mud-typography-h4 { font-size: 1.2rem; }
  .bo-shell .mud-typography-h5 { font-size: 1.05rem; }
  .bo-shell .mud-typography-h6 { font-size: 0.95rem; }
  .bo-shell .mud-typography-body1 { font-size: 0.95rem; }
  .bo-shell .mud-typography-body2 { font-size: 0.88rem; }
  .bo-shell .mud-typography-caption { font-size: 0.78rem; }

  /* Dialogs go full-screen on phones — reinforces the layout's own rule
     and extends it to .bo-dialog scope. */
  .bo-dialog .mud-dialog,
  .bo-dialog.mud-dialog,
  .bo-shell .mud-dialog {
    margin: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
  }
  .bo-dialog .mud-dialog-content,
  .bo-shell .mud-dialog .mud-dialog-content {
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto;
    padding: 16px !important;
  }

  /* Table cells become denser; the page typically swaps to a card stack
     at this width (see Tenants), but if it doesn't, the table still
     reads. */
  .bo-shell .mud-table-row td,
  .bo-shell .mud-data-grid .mud-table-row td {
    padding: 8px 6px;
    font-size: 0.85rem;
  }
  .bo-shell .mud-table-head th {
    font-size: 0.72rem !important;
    padding: 8px 6px;
  }

  /* MudGrid safety net: a direct MudGrid child without an explicit
     xs="12" still stacks (one item per row) on phones. */
  .bo-shell .mud-grid > .mud-item {
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Cards tighter, flat (no shadow), corners stay round.
     - box-shadow: none — on phones the shadow halo looked like the widgets
       lived inside a single shadowed container and gave the bottom edge a
       "pointed" look.
     - border-radius forced with !important so no later rule squares the
       corners.
     - The :hover state is killed because on touch, a tap leaves the hover
       sticky and reintroduces the shadow halo. The card stays clickable —
       only the visual hover-feedback is suppressed on phones. */
  .bo-shell .mud-paper,
  .bo-shell .mud-card,
  .bo-shell .bo-card-glass {
    padding: 14px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }
  .bo-shell .bo-card-glass:hover {
    background: var(--dt-bo-surface) !important;
    box-shadow: none !important;
  }

  /* Touch targets — 44px is the iOS HIG floor. */
  .bo-shell .mud-button {
    min-height: 44px;
    font-size: 0.85rem;
  }
  .bo-shell .mud-icon-button,
  .bo-dialog .mud-icon-button {
    min-width: 44px;
    min-height: 44px;
  }

  /* Chips wrap nicely. */
  .bo-shell .mud-chip {
    margin: 2px;
    font-size: 0.78rem;
  }

  /* Inputs: 16px font defeats iOS Safari's zoom-on-focus. */
  .bo-shell .mud-input,
  .bo-dialog .mud-input,
  .bo-shell .mud-input input,
  .bo-dialog .mud-input input,
  .bo-shell .mud-input-slot,
  .bo-dialog .mud-input-slot {
    font-size: 16px;
  }
  .bo-shell .mud-input-label,
  .bo-dialog .mud-input-label {
    font-size: 0.88rem;
  }

  /* Tabs (e.g. SiteCmsLayout .cms-tabs) wrap properly. */
  .cms-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
  .cms-tab {
    flex: 0 0 auto;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  .cms-tab-text {
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .bo-shell .mud-container {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .bo-shell .mud-paper,
  .bo-shell .mud-card,
  .bo-shell .bo-card-glass {
    padding: 12px !important;
  }
  .bo-shell .mud-typography-h4 { font-size: 1.1rem; }
  .bo-shell .mud-typography-h5 { font-size: 1.0rem; }
}