/* =====================================================================
   7TH BREED admin — compact redesign layer (v5, 2026-09-27)
   Goals from the owner:
   - No "quick action" buttons in the nav/topbar; actions live where used.
   - Shrink oversized containers (quotes/orders/projects cards, panels).
   - Team tab: admins & members visible without scrolling.
   - Settings tab selections/nav untouched.
   Loaded AFTER admin-polish.css and admin-reference-redesign.css so these
   rules win without touching the other layers' files.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) Global density pass — smaller panels, headings and section headers
   --------------------------------------------------------------------- */
.tab-panel { padding-top: 2px; }

.panel {
  padding: 14px 16px !important;
  border-radius: 12px !important;
}

.section-heading {
  margin-bottom: 10px !important;
  gap: 10px !important;
}
.section-heading .section-heading-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}
.section-heading h2 {
  font-size: 1.02rem !important;
  margin: 0 !important;
}
.section-heading p {
  font-size: .74rem !important;
  margin: 1px 0 0 !important;
}

/* Dashboard home: overview heading tighter; content column centered.
   KPI cards span the full centered column in a 4-across row (never 3+1).
   Matching specificity for admin-polish's #dashboard-view-prefixed rules. */
.dashboard-overview-heading {
  margin-bottom: 10px !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#dashboard-view #tab-home:not(.hidden) {
  /* Single centered column — kills the redesign's 1.55fr/0.9fr split that
     shoved the KPI cards into a narrow right rail. */
  grid-template-columns: minmax(0, 1fr) !important;
}
#dashboard-view #tab-home>.stats,
#dashboard-view #tab-home>.dashboard-overview-heading,
#dashboard-view #tab-home>.analytics-grid,
#dashboard-view #tab-home>.attention-panel,
#dashboard-view #tab-home>.pending-transactions-panel {
  grid-column: auto !important;
  grid-row: auto !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#dashboard-view #tab-home>.stats,
#dashboard-view #tab-hr>.stats {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
#dashboard-view #tab-home .stat,
#dashboard-view #tab-hr .stat {
  min-height: 0 !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
}
/* "Total leads" hero card sits INLINE with the others (redesign gave it
   its own full-width row). */
#dashboard-view #tab-home .stat-total,
#dashboard-view #tab-hr .stat-total { grid-column: auto !important; min-height: 0 !important; }
#dashboard-view #tab-home .stat-value,
#dashboard-view #tab-hr .stat-value { font-size: clamp(1.15rem, 1.6vw, 1.4rem) !important; margin-top: 6px !important; }
#dashboard-view #tab-home .stat-icon,
#dashboard-view #tab-hr .stat-icon { width: 22px !important; height: 22px !important; top: 10px !important; right: 10px !important; }
/* Narrow screens: fall back to polish's 2-across and 1-across rows.
   Same !important strength + later load order wins over polish's media rules. */
@media (max-width: 1150px) {
  #dashboard-view #tab-home>.stats,
#dashboard-view #tab-hr>.stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  #dashboard-view #tab-home>.stats,
#dashboard-view #tab-hr>.stats { grid-template-columns: minmax(0, 1fr) !important; }
}
#tab-home .attention-panel,
#tab-home .pending-transactions-panel { padding: 12px 14px !important; margin-top: 0 !important; margin-bottom: 12px !important; }
#tab-home .attention-list { max-height: 220px; overflow: auto; }
#tab-home .pending-orders-list { max-height: 260px; overflow: auto; }

/* Stat cards outside home keep the gentle compacting */
.stat { border-radius: 12px !important; }

/* ---------------------------------------------------------------------
   2) Quotes / CRM / Orders / Projects cards — the "too big containers"
   --------------------------------------------------------------------- */

/* CRM + Quotes toolbars: one tight strip instead of stacked bands */
.quotes-toolbar {
  padding: 10px 12px !important;
  gap: 8px !important;
  border-radius: 12px !important;
  margin-bottom: 10px !important;
}
.quotes-toolbar .toolbar-row { gap: 8px !important; }
.quotes-toolbar .toolbar-group-label { font-size: .68rem !important; }
.quotes-toolbar .field { min-height: 34px !important; padding: 5px 9px !important; font-size: .8rem !important; }
.quotes-toolbar .btn { min-height: 34px !important; padding: 5px 11px !important; font-size: .78rem !important; }
.quotes-toolbar .filter-btn { padding: 4px 10px !important; font-size: .74rem !important; }

/* Lead/quote/project cards: compact rows, not mini-pages */
.quote-list { gap: 8px !important; }

.quote-card {
  padding: 10px 12px !important;
  border-radius: 11px !important;
}

.quote-card h2 { font-size: .92rem !important; }

/* The big detail table inside each card is already behind a <details>
   drawer (admin.js). Make the drawer obvious and the open state airy. */
.quote-card .quote-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 2px 10px;
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .74rem !important;
  font-weight: 700;
}
.quote-card .quote-details > summary::after { content: none !important; }
.quote-card .quote-details[open] > summary::after { content: none !important; }
.quote-card > .quote-details[open] {
  position: fixed !important;
  z-index: 1200 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(760px, 92vw) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-left: 1px solid var(--dash-border, #e5ebf3) !important;
  border-radius: 0 !important;
  background: var(--dash-surface, #fff) !important;
  box-shadow: -28px 0 80px rgba(2, 8, 23, .28) !important;
}
.quote-card > .quote-details[open] > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 0 0 auto !important;
  min-height: 62px !important;
  margin: 0 !important;
  padding: 18px 24px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dash-border, #e5ebf3) !important;
  border-radius: 0 !important;
  background: var(--dash-surface, #fff) !important;
  color: var(--dash-ink, #172033) !important;
  font-size: .9rem !important;
}
.quote-card > .quote-details[open] > summary::before {
  content: "Quote details";
  font-size: 1.05rem;
  font-weight: 800;
}
.quote-card > .quote-details[open] > summary { font-size: 0 !important; }
.quote-card > .quote-details[open] > summary::after {
  content: "Close" !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  color: var(--dash-accent, #3859e9) !important;
}
.quote-card > .quote-details[open] > .quote-details-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 22px 24px 40px !important;
  overflow: auto !important;
}
@media (max-width: 620px) {
  .quote-card > .quote-details[open] { width: 100vw !important; }
  .quote-card > .quote-details[open] > summary { padding: 16px 18px !important; }
  .quote-card > .quote-details[open] > .quote-details-body { padding: 18px 14px 34px !important; }
}

/* Quote details are a single-screen workspace on desktop, not another long page. */
@media (min-width: 901px) {
  .quote-card > .quote-details[open] {
    width: min(1040px, calc(100vw - 250px)) !important;
  }

  .quote-card > .quote-details[open] > .quote-details-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-auto-rows: min-content !important;
    align-content: start !important;
    gap: 10px 14px !important;
    padding: 14px 18px 16px !important;
    overflow: visible !important;
  }

  .quote-details-body > .detail-table {
    align-self: start !important;
    margin: 0 !important;
  }

  .quote-details-body > .detail-table th,
  .quote-details-body > .detail-table td {
    padding: 3px 6px !important;
    font-size: .72rem !important;
    line-height: 1.22 !important;
  }

  .quote-details-body > .detail-table th {
    width: 34% !important;
  }

  .quote-details-body > .quote-workflow,
  .quote-details-body > .quote-actions {
    grid-column: 1 / -1 !important;
  }

  .quote-details-body > .quote-workflow {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px 10px !important;
    margin: 0 !important;
    padding: 10px !important;
  }

  .quote-details-body > .quote-workflow .field,
  .quote-details-body > .quote-workflow .textarea {
    min-height: 32px !important;
    padding: 5px 8px !important;
    font-size: .72rem !important;
  }

  .quote-details-body > .quote-actions {
    gap: 6px !important;
    margin: 0 !important;
    padding: 8px 0 !important;
  }

  .quote-details-body > .quote-actions .btn {
    min-height: 30px !important;
    padding: 4px 9px !important;
  }

  .quote-details-body > .quote-activity-panel {
    min-width: 0 !important;
    max-height: 92px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    overflow: auto !important;
  }

  .quote-details-body > .quote-activity-panel .activity {
    margin: 0 !important;
    font-size: .7rem !important;
  }

  .quote-details-body > .quote-footer {
    align-self: stretch !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 10px !important;
  }
}

/* Dark theme overview copy needs a little more inset from the canvas edge. */
html.dark #dashboard-view #tab-home > .dashboard-overview-heading {
  padding: 0 28px !important;
  margin-top: 8px !important;
  margin-bottom: 12px !important;
}
@media (max-width: 900px) {
  html.dark #dashboard-view #tab-home > .dashboard-overview-heading {
    padding: 0 16px !important;
    margin-top: 6px !important;
  }
}

/* Card footer selects: keep always-visible controls compact */
.quote-card .quote-footer { margin-top: 8px !important; }
.quote-card .status-select,
.quote-card .quote-footer .field { min-height: 32px !important; font-size: .78rem !important; }
.quote-card .btn { min-height: 32px !important; padding: 4px 10px !important; font-size: .76rem !important; }

/* Summary strip: tighter, single-line-ish */
.quote-card .quote-summary { gap: 2px 10px !important; margin-top: 6px !important; font-size: .76rem !important; }

/* Detail tables inside cards: denser rows */
.quote-card .detail-table th,
.quote-card .detail-table td { padding: 3px 6px !important; }

/* Inline editing panels inside cards are tighter too */
.quote-card .panel,
.quote-card .panel .panel { padding: 10px 12px !important; }
.quote-card .section { margin-top: 8px !important; }
.quote-card .section.form-grid { gap: 6px 8px !important; }

/* Tables (orders/products/team/audit): tighter rows */
.ui-card { padding: 14px 16px !important; }
.ui-table-wrap table { font-size: .82rem !important; }
.ui-table-wrap th { padding: 8px 10px !important; font-size: .72rem !important; }
.ui-table-wrap td { padding: 7px 10px !important; }

/* ---------------------------------------------------------------------
   3) Two-column layout for card lists on wide screens
   --------------------------------------------------------------------- */
@media (min-width: 1280px) {
  #tab-crm .quote-list,
  :is(#tab-quotes, #tab-crm, #tab-orders) .quote-list,
  #tab-complaints .quote-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: start;
  }
  #tab-crm .quote-list .quote-card,
  :is(#tab-quotes, #tab-crm, #tab-orders) .quote-list .quote-card,
  #tab-complaints .quote-list .quote-card { margin: 0 !important; }
}

.quote-card > .message-details[open] > summary::before {
  content: "Message details";
}

/* ---------------------------------------------------------------------
   4) Team tab — admins & members visible immediately, no scroll
   --------------------------------------------------------------------- */

/* Card head slimmed; the add-member form moves BELOW the list (CSS order)
   and the whole card fits a laptop screen. */
#tab-users .ui-card {
  display: flex;
  flex-direction: column;
  max-height: none !important;
  min-height: 0 !important;
  padding: 18px 20px !important;
}
#tab-users .ui-card-head {
  padding: 0 0 8px !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 8px !important;
}
#tab-users .ui-card-head h3 { font-size: .92rem !important; margin: 0 !important; }
#tab-users .ui-card-head p { font-size: .72rem !important; margin: 1px 0 0 !important; }

/* Members table first and visible: fixed-height internal scroll */
#tab-users .ui-table-wrap {
  order: 1;
  flex: 0 0 auto;
  min-height: 300px !important;
  overflow: auto;
  max-height: 62vh !important;
  border: 1px solid var(--border);
  border-radius: 10px;
}
#tab-users .ui-table-wrap thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }

/* Add-member form after the list, collapsed behind a details toggle */
#tab-users .settings-subhead,
#tab-users #add-user-form {
  order: 2;
  flex: 0 0 auto;
}
#tab-users .settings-subhead {
  margin: 10px 0 6px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
#tab-users .settings-subhead strong { font-size: .84rem !important; }

/* Member permissions are visible immediately; Admin hides them because
   administrators always receive full access. */
#tab-users #add-user-form { margin-top: 0 !important; }
#tab-users #add-user-form .label .field { min-height: 38px !important; }
#tab-users #add-user-permissions:not(.hidden) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px 14px !important;
  align-content: start !important;
  max-height: none !important;
  overflow: visible !important;
}
#tab-users #add-user-permissions > p { grid-column: 1 / -1 !important; }
#tab-users #add-user-permissions label {
  min-width: 0 !important;
  padding: 7px 8px !important;
  border-radius: 8px !important;
}
#tab-users .settings-subhead { cursor: default; user-select: text; }
#tab-users .settings-subhead strong::after { content: none !important; }
@media (max-width: 900px) {
  #tab-users #add-user-permissions:not(.hidden) { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Team-specific compact table so names+roles read at a glance */
#tab-users .ui-table-wrap table { font-size: .84rem !important; }
#tab-users .ui-table-wrap td { padding: 6px 10px !important; }

/* ---------------------------------------------------------------------
   5) Audit / User activity / Monitor / Messages — same compact treatment
   --------------------------------------------------------------------- */
#tab-audit .toolbar-cluster .field,
#tab-user-activity .toolbar-cluster .field { min-height: 34px !important; font-size: .8rem !important; }
#tab-user-activity .ui-table-wrap { max-height: 52vh; overflow: auto; }
#tab-audit .ui-card { max-height: none !important; overflow: visible !important; }
#tab-audit .ui-table-wrap {
  min-height: 320px !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* ---------------------------------------------------------------------
   6) Nav bar — remove quick-action buttons (pure CSS, structure untouched)
   --------------------------------------------------------------------- */

/* The CRM toolbar's "Quick quotation" button is a toolbar action, not a nav
   element — keep it. Nothing in the sidebar/topbar is removed structurally;
   instead, any floating action cluster the runtime injects into the topbar
   is hidden. */
.topbar .quick-actions,
.topbar [data-quick-actions],
.topbar-actions .btn.btn-primary:not(.theme-topbar-switch) {
  display: none !important;
}

/* Topbar itself slimmer */
.topbar { min-height: 52px !important; }
.topbar-inner { min-height: 52px !important; padding-top: 6px !important; padding-bottom: 6px !important; }

/* ---------------------------------------------------------------------
   7) Settings tab — UNTOUCHED (explicit no-op guard)
   The settings nav/selections styles are intentionally not overridden;
   only inherited global density (panel padding) applies, which matches
   the owner's request to keep selections as they are.
   --------------------------------------------------------------------- */
.settings-nav,
.settings-nav-link,
.settings-content .settings-section-head,
.settings-subhead { /* intentionally left as-is */ }

/* Keep settings cards roomy (opt this tab OUT of the global shrink) */
#tab-settings .panel { padding: 18px 20px !important; }

/* ---------------------------------------------------------------------
   7b) Success = GREEN, error = red — toasts and saved chips
   appAlert now routes success-shaped messages to the success toast; here
   we make that toast unmistakably green (tinted surface + check glyph)
   and pin every "Saved" chip to green in light and dark themes.
   --------------------------------------------------------------------- */
.app-toast.app-toast-success {
  border-color: rgba(22, 163, 74, .35) !important;
  border-left: 4px solid #16a34a !important;
  background: #ecfdf5 !important;
  color: #065f46 !important;
}
.app-toast.app-toast-success::before {
  content: "\2713";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  vertical-align: -3px;
}
.app-toast.app-toast-error {
  border-left: 4px solid #dc2626 !important;
  background: #fef2f2 !important;
  color: #991b1b !important;
}
html.dark .app-toast.app-toast-success {
  background: rgba(22, 163, 74, .16) !important;
  color: #86efac !important;
  border-color: rgba(22, 163, 74, .4) !important;
}
html.dark .app-toast.app-toast-error {
  background: rgba(220, 38, 38, .14) !important;
  color: #fca5a5 !important;
}

/* Notification bell counter: unread alerts stay red (it's an alert badge,
   not a success indicator). Success-colored feedback lives in toasts and
   Saved chips, not here. */
.notification-count {
  background: #ef4444 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
html.dark .notification-count { border-color: #0f1d34 !important; }

/* ---------------------------------------------------------------------
   7c) Calendar — fit on screen without scrolling
   Cells shrink to fit a fixed viewport height; up to 2 events show per
   cell with a compact "+N" chip. Agenda pane scrolls internally.
   --------------------------------------------------------------------- */
#tab-calendar .calendar-main {
  display: flex;
  flex-direction: column;
}
#tab-calendar .calendar-grid {
  grid-auto-rows: 1fr;
  flex: 1 1 auto;
  min-height: 0;
}
/* Cap the whole month grid so all 6 rows stay within the viewport:
   total grid height (max 402px) + weekday strip + toolbar + legend
   fits ~640px of content — one screen on a laptop. */
#tab-calendar .calendar-grid {
  height: clamp(300px, calc(100vh - 360px), 420px);
  overflow: hidden;
}
#tab-calendar .calendar-day {
  min-height: 0 !important;
  height: 100%;
  padding: 4px 5px !important;
  overflow: hidden;
}
#tab-calendar .calendar-day-number {
  width: 20px !important;
  height: 20px !important;
  border-radius: 7px !important;
  font-size: .68rem !important;
  margin-bottom: 2px !important;
}
#tab-calendar .calendar-event {
  margin-top: 2px !important;
  padding: 1px 4px !important;
  font-size: .62rem !important;
  line-height: 1.25 !important;
}
/* Only the first 2 event chips fit a short cell; hide the 3rd+ and
   soften the "+N more" note. */
#tab-calendar .calendar-event:nth-of-type(n+3) { display: none; }
#tab-calendar .calendar-day > .muted { font-size: .6rem !important; }
#tab-calendar .calendar-weekdays { margin-top: 10px !important; }
#tab-calendar .calendar-weekdays span { padding-bottom: 6px !important; }
#tab-calendar .calendar-legend { margin-top: 8px !important; }
/* Agenda pane scrolls within the same height as the grid */
#tab-calendar .calendar-agenda-list {
  max-height: clamp(240px, calc(100vh - 430px), 360px) !important;
}

@media (max-width: 900px) {
  #tab-calendar .calendar-grid {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  #tab-calendar .calendar-day { min-height: 64px !important; }
}

/* "Saved" media chips + any generic success badge: green in every theme */
.media-file-status.is-saved {
  color: #047857 !important;
  border-color: #a7f3d0 !important;
  background: #ecfdf5 !important;
}
html.dark .media-file-status.is-saved {
  color: #86efac !important;
  border-color: rgba(22, 163, 74, .4) !important;
  background: rgba(22, 163, 74, .14) !important;
}

/* ---------------------------------------------------------------------
   8) Small screens — single column, no horizontal squeeze
   --------------------------------------------------------------------- */
@media (max-width: 1279px) {
  #tab-crm .quote-list,
  :is(#tab-quotes, #tab-crm, #tab-orders) .quote-list,
  #tab-complaints .quote-list { display: block !important; }
}
@media (max-width: 767px) {
  .panel { padding: 12px !important; }
  #tab-users .ui-table-wrap { min-height: 260px !important; max-height: 58vh !important; }
  #tab-users .ui-card { max-height: none; }
}

/* Homepage composition v6: use the full operations canvas. */
#dashboard-view .main-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
#dashboard-view #tab-home:not(.hidden) {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: start !important;
}
#dashboard-view #tab-home > .dashboard-overview-heading,
#dashboard-view #tab-home > .stats,
#dashboard-view #tab-home > .analytics-grid,
#dashboard-view #tab-home > .home-grid {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#dashboard-view #tab-home > .dashboard-overview-heading {
  margin: 0 0 4px !important;
  justify-content: space-between !important;
}
#dashboard-view #tab-home > .stats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
#dashboard-view #tab-home .stat,
#dashboard-view #tab-home .stat-total,
#dashboard-view #tab-hr .stat-total {
  grid-column: auto !important;
  min-height: 124px !important;
  padding: 20px 54px 18px 20px !important;
  border-radius: 16px !important;
}
#dashboard-view #tab-home .stat-value,
#dashboard-view #tab-hr .stat-value {
  margin-top: 14px !important;
  font-size: clamp(1.35rem, 2vw, 1.85rem) !important;
}
#dashboard-view #tab-home .stat-icon,
#dashboard-view #tab-hr .stat-icon {
  width: 32px !important;
  height: 32px !important;
  top: 16px !important;
  right: 15px !important;
}
#dashboard-view #tab-home > .attention-panel,
#dashboard-view #tab-home > .pending-transactions-panel {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 210px !important;
  margin: 0 !important;
}
#dashboard-view #tab-home > .analytics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#dashboard-view #tab-home > .home-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 1150px) {
  #dashboard-view #tab-home:not(.hidden) { grid-template-columns: minmax(0, 1fr) !important; }
  #dashboard-view #tab-home > .attention-panel,
  #dashboard-view #tab-home > .pending-transactions-panel { grid-column: 1 !important; }
  #dashboard-view #tab-home > .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  #dashboard-view #tab-home > .stats,
  #dashboard-view #tab-home > .analytics-grid,
  #dashboard-view #tab-home > .home-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* The sidebar and topbar already name the active workspace. */
#dashboard-view .tab-panel:not(#tab-home) > .section-heading {
  display: none !important;
}
#dashboard-view .tab-panel:not(#tab-home) {
  padding-top: 0 !important;
}

/* Subtle animated operations backdrop. */
#dashboard-view .main {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  background: var(--ref-page, var(--dash-page)) !important;
}
#dashboard-view .main::before {
  content: "";
  position: fixed;
  z-index: 0;
  top: 58px;
  right: 0;
  bottom: 0;
  left: 224px;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 18%, rgba(37, 99, 235, .105) 0, rgba(37, 99, 235, .035) 23%, transparent 48%),
    radial-gradient(circle at 86% 16%, rgba(22, 199, 217, .095) 0, rgba(22, 199, 217, .025) 20%, transparent 45%),
    radial-gradient(circle at 72% 82%, rgba(98, 88, 232, .075) 0, transparent 42%);
  background-size: 118% 118%, 122% 122%, 116% 116%;
  animation: adminAmbientDrift 22s ease-in-out infinite alternate;
  will-change: background-position;
}
#dashboard-view .main::after {
  content: "";
  position: fixed;
  z-index: 0;
  top: 68px;
  right: 0;
  bottom: 0;
  left: 224px;
  pointer-events: none;
  opacity: .23;
  background-image:
    linear-gradient(rgba(70, 101, 150, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 101, 150, .085) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.62), transparent 88%);
  animation: adminGridGlide 30s linear infinite;
}
#dashboard-view .main-inner,
#dashboard-view .topbar {
  position: relative;
  z-index: 1;
}
#dashboard-view .main-inner { background: transparent !important; }
#dashboard-view .topbar { z-index: 2; }
html.dark #dashboard-view .main::before {
  background:
    radial-gradient(circle at 16% 18%, rgba(75, 116, 255, .16) 0, rgba(37, 99, 235, .045) 24%, transparent 49%),
    radial-gradient(circle at 86% 16%, rgba(22, 199, 217, .12) 0, rgba(22, 199, 217, .025) 21%, transparent 46%),
    radial-gradient(circle at 72% 82%, rgba(125, 105, 255, .11) 0, transparent 43%);
}
html.dark #dashboard-view .main::after { opacity: .18; }
@keyframes adminAmbientDrift {
  0% { background-position: 0% 0%, 100% 2%, 70% 100%; transform: scale(1); }
  50% { background-position: 8% 6%, 92% 10%, 63% 92%; transform: scale(1.025); }
  100% { background-position: 3% 13%, 84% 4%, 76% 86%; transform: scale(1.045); }
}
@keyframes adminGridGlide {
  from { background-position: 0 0, 0 0; }
  to { background-position: 42px 42px, 42px 42px; }
}
@media (max-width: 900px) {
  #dashboard-view .main::before,
  #dashboard-view .main::after { left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #dashboard-view .main::before,
  #dashboard-view .main::after { animation: none !important; }
}

/* Balanced topbar: keep the title and search comfortably inside it. */
#dashboard-view .topbar {
  min-height: 76px !important;
  overflow: visible !important;
}
#dashboard-view .topbar-inner {
  width: 100% !important;
  min-height: 76px !important;
  padding: 11px 26px 10px !important;
  align-items: center !important;
  gap: 20px !important;
}
#dashboard-view .topbar-inner > div:first-child {
  flex: 0 1 auto !important;
  min-width: 190px !important;
  transform: translateY(3px);
}
#dashboard-view .topbar .eyebrow {
  margin: 0 !important;
  line-height: 1.25 !important;
}
#dashboard-view .topbar h1 {
  margin: 5px 0 0 !important;
  line-height: 1.25 !important;
}
#dashboard-view .topbar-actions {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 210px) !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
#dashboard-view .admin-search {
  flex: 0 1 340px !important;
  width: min(340px, 32vw) !important;
  min-width: 180px !important;
  max-width: 340px !important;
  height: 40px !important;
  margin: 0 !important;
  overflow: hidden !important;
}
#dashboard-view .admin-search input {
  min-width: 0 !important;
  width: 100% !important;
}
@media (max-width: 900px) {
  #dashboard-view .topbar-inner { padding: 10px 18px !important; }
  #dashboard-view .topbar-inner > div:first-child { min-width: 0 !important; }
  #dashboard-view .topbar-actions { max-width: none !important; }
}
@media (max-width: 620px) {
  #dashboard-view .topbar,
  #dashboard-view .topbar-inner { min-height: 70px !important; }
  #dashboard-view .topbar-inner > div:first-child { transform: translateY(2px); }
}

/* Messages: one full-width summary followed by two genuinely equal columns. */
@media (min-width: 850px) {
  #tab-complaints #complaint-list.quote-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: start !important;
  }

  #tab-complaints #complaint-list > .panel:first-child {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 0 4px !important;
  }

  #tab-complaints #complaint-list > .quote-card {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 849px) {
  #tab-complaints #complaint-list.quote-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* One-line operations navbar: title, search and account controls share a level. */
@media (min-width: 901px) {
  #dashboard-view .topbar,
  #dashboard-view .topbar-inner {
    min-height: 68px !important;
  }

  #dashboard-view .topbar-inner {
    flex-wrap: nowrap !important;
    padding: 10px 26px !important;
    gap: 18px !important;
  }

  #dashboard-view .topbar-inner > div:first-child {
    flex: 0 0 auto !important;
    min-width: 178px !important;
    transform: none !important;
    align-items: center !important;
  }

  #dashboard-view .topbar .eyebrow {
    font-size: .74rem !important;
    line-height: 40px !important;
    white-space: nowrap !important;
  }

  #dashboard-view .topbar h1,
  #dashboard-view .topbar-actions > #subtitle {
    display: none !important;
  }

  #dashboard-view .topbar-actions {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    max-width: none !important;
    min-width: 0 !important;
    gap: 9px !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  #dashboard-view .admin-search {
    flex: 1 1 340px !important;
    width: auto !important;
    max-width: 420px !important;
    min-width: 180px !important;
  }

  #dashboard-view .theme-topbar-switch,
  #dashboard-view .notification-wrap,
  #dashboard-view .profile-chip {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  #dashboard-view .topbar-inner { gap: 12px !important; }
  #dashboard-view .topbar-inner > div:first-child { min-width: 156px !important; }
  #dashboard-view .admin-search { min-width: 140px !important; }
  #dashboard-view .profile-chip { min-width: 126px !important; }
}

/* Quote drawer must live above the navigation and never be clipped by the
   animated dashboard canvas. Keep every lower action reachable. */
#dashboard-view .main {
  isolation: auto !important;
  overflow: visible !important;
}
#dashboard-view .main-inner { z-index: auto !important; }
body.quote-drawer-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
body.quote-drawer-open #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) {
  animation: none !important;
  transform: none !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders),
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) #quote-list,
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card {
  overflow: visible !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] {
  position: fixed !important;
  z-index: 10000 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  display: block !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  transform: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  -webkit-overflow-scrolling: touch;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > summary {
  position: sticky !important;
  grid-row: 1 !important;
  top: 0 !important;
  z-index: 3 !important;
}

/* Persistent quote action band: it sits in the drawer chrome, never inside
   the scrolling details body. */
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-actions {
  display: flex !important;
  grid-row: 2 !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 8px 34px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dash-border, #e5ebf3) !important;
  border-radius: 0 !important;
  background: var(--dash-surface, #fff) !important;
}
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-footer {
  display: flex !important;
  grid-row: 3 !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 7px 34px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dash-border, #e5ebf3) !important;
  border-radius: 0 !important;
  background: var(--dash-page, #f8fafc) !important;
}
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-actions .btn,
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-footer .btn,
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-footer .status-select {
  min-height: 32px !important;
  white-space: nowrap !important;
}
html.dark #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-actions,
html.dark #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-footer {
  background: #101b2d !important;
  border-bottom-color: var(--line, #24344a) !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-details-body {
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-actions,
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-footer,
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-details-body {
  min-width: 0 !important;
}

.quote-actions-permission-note {
  display: block !important;
  padding: 10px 12px !important;
  border: 1px solid var(--dash-border, #e5ebf3) !important;
  border-radius: 10px !important;
  background: var(--dash-page, #f8fafc) !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .quote-actions {
  padding: 10px !important;
  border: 1px solid var(--dash-border, #e5ebf3) !important;
  border-radius: 11px !important;
  background: var(--dash-surface, #fff) !important;
}

html.dark #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .quote-actions {
  background: var(--card, #101b2d) !important;
  border-color: var(--line, #24344a) !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-drawer-tabs {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 5px !important;
  margin-bottom: 2px !important;
  border: 1px solid var(--dash-border, #e5ebf3) !important;
  border-radius: 12px !important;
  background: var(--dash-page, #f5f7fb) !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-drawer-tabs button {
  position: relative !important;
  min-height: 40px !important;
  padding: 7px 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--dash-muted, #64748b) !important;
  font: inherit !important;
  font-size: .76rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-drawer-tabs button:hover {
  color: var(--dash-ink, #172033) !important;
  background: rgba(37, 99, 235, .06) !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-drawer-tabs button.active {
  background: var(--dash-surface, #fff) !important;
  color: var(--dash-accent, #2563eb) !important;
  box-shadow: 0 3px 12px rgba(15, 23, 42, .08) !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-drawer-tabs button.active::after {
  content: "" !important;
  position: absolute !important;
  right: 14px !important;
  bottom: 5px !important;
  left: 14px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: var(--dash-accent, #2563eb) !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-drawer-tabs button:focus-visible {
  outline: 2px solid var(--dash-accent, #2563eb) !important;
  outline-offset: 2px !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > [data-drawer-section][hidden] {
  display: none !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > [data-drawer-section] {
  visibility: visible !important;
  opacity: 1 !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > [data-drawer-section="workflow"],
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .quote-actions {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  border: 1px solid var(--dash-border, #e5ebf3) !important;
  border-radius: 12px !important;
  background: var(--dash-page, #f8fafc) !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .quote-footer {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  margin: 0 !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .quote-actions .btn,
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .quote-footer .btn,
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .quote-footer .status-select {
  min-height: 34px !important;
  white-space: nowrap !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body[data-drawer-view="workflow"] > .quote-workflow {
  width: 100% !important;
  max-width: 920px !important;
  margin: 4px auto 0 !important;
  padding: 16px !important;
  border: 1px solid var(--dash-border, #e5ebf3) !important;
  border-radius: 13px !important;
  background: var(--dash-page, #f8fafc) !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body[data-drawer-view="actions"] > .quote-actions {
  margin-top: 4px !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body[data-drawer-view="actions"] > .quote-activity-panel { grid-column: 1 !important; }
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body[data-drawer-view="actions"] > .quote-footer {
  grid-column: 2 !important;
  display: flex !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid var(--dash-border, #e5ebf3) !important;
  border-radius: 11px !important;
}

/* Keep both CRM entry points visible beside one another. */
#dashboard-view #tab-crm #quick-quotation-btn,
#dashboard-view #tab-crm #add-crm-customer-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

#dashboard-view #tab-crm .quotes-toolbar .toolbar-row:first-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 10px 14px !important;
}
#dashboard-view #tab-crm .quotes-toolbar .toolbar-row:first-child > .toolbar-group:nth-child(2) {
  display: block !important;
  min-width: max-content !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
}
#dashboard-view #tab-crm .quotes-toolbar .toolbar-row:first-child > .toolbar-group:nth-child(3) {
  grid-column: 1 / -1 !important;
  justify-self: end !important;
}
#dashboard-view #tab-crm .quotes-toolbar .toolbar-row:first-child > .toolbar-group:nth-child(2) .toolbar-cluster {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 7px !important;
}
@media (max-width: 760px) {
  #dashboard-view #tab-crm .quotes-toolbar .toolbar-row:first-child {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #dashboard-view #tab-crm .quotes-toolbar .toolbar-row:first-child > .toolbar-group:nth-child(2),
  #dashboard-view #tab-crm .quotes-toolbar .toolbar-row:first-child > .toolbar-group:nth-child(3) {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start !important;
  }
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .quote-activity-panel {
  max-height: 150px !important;
}

html.dark #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-drawer-tabs,
html.dark #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body[data-drawer-view="workflow"] > .quote-workflow {
  background: #0c1728 !important;
  border-color: var(--line, #24344a) !important;
}
html.dark #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-drawer-tabs button.active {
  background: #142136 !important;
  color: #93b4fb !important;
}

@media (max-width: 900px) {
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] {
    width: 100vw !important;
  }
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-details-body {
    overflow-y: visible !important;
  }
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-actions,
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-footer {
    flex-wrap: nowrap !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-actions > *,
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-footer > * {
    flex: 0 0 auto !important;
  }
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body[data-drawer-view="actions"] > .quote-activity-panel,
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body[data-drawer-view="actions"] > .quote-footer {
    grid-column: 1 / -1 !important;
  }
}

/* Final quote workspace: cover the dashboard chrome while a quote is open. */
@media (min-width: 901px) {
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] {
    right: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    border-left: 0 !important;
    box-shadow: none !important;
  }

  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > summary {
    padding-right: 34px !important;
    padding-left: 34px !important;
  }

  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-card > .quote-details[open] > .quote-details-body {
    width: min(1180px, calc(100vw - 68px)) !important;
    margin: 0 auto !important;
    padding: 16px 0 22px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
  }

  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body[data-drawer-view="customer"] > .detail-table {
    min-width: 0 !important;
  }
}

/* Workspace records (quotes, CRM messages/tickets) open as a covering screen
   in BOTH themes — identical layout, each theme keeps its own palette. The
   previous "expand in the normal document flow" block was removed: it forced
   inline expansion, which buried the action bar at the bottom of a long page.
   The covering layout comes from the drawer rules earlier in this file, and
   body.quote-drawer-open locks page scroll while a workspace is open. */

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .detail-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .detail-table th,
#dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) .quote-details-body > .detail-table td {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

@media (min-width: 1280px) {
  #dashboard-view :is(#tab-quotes, #tab-crm, #tab-orders) #quote-list > .quote-card.quote-card-expanded {
    grid-column: 1 / -1 !important;
  }
}


/* Quotation workspace: use the same right-side workspace pattern as Quote Details.
   It intentionally sits above the still-open parent Quote Details drawer. */
#modal-root:has(.quotation-workspace) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 14000 !important;
  pointer-events: none !important;
}
#modal-root:has(.quotation-workspace) > .modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  padding: 0 !important;
  background: rgba(2, 8, 23, .16) !important;
  pointer-events: auto !important;
}
#modal-root .quotation-workspace {
  position: absolute !important;
  z-index: 14001 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(1040px, calc(100vw - 250px)) !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-left: 1px solid var(--dash-border, #e5ebf3) !important;
  border-radius: 0 !important;
  background: var(--dash-surface, #fff) !important;
  box-shadow: -28px 0 80px rgba(2, 8, 23, .28) !important;
}
#modal-root .quotation-workspace-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 62px !important;
  padding: 14px 24px !important;
  border-bottom: 1px solid var(--dash-border, #e5ebf3) !important;
  background: var(--dash-surface, #fff) !important;
}
#modal-root .quotation-workspace-head h2 {
  margin: 0 !important;
  color: var(--dash-ink, #172033) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
}
#modal-root .quotation-workspace-body {
  height: calc(100dvh - 62px) !important;
  padding: 16px 24px 34px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}
html.dark #modal-root .quotation-workspace,
html.dark #modal-root .quotation-workspace-head {
  background: #101b2d !important;
  border-color: var(--line, #24344a) !important;
}
html.dark #modal-root .quotation-workspace-head h2 { color: #f8fafc !important; }
@media (max-width: 900px) {
  #modal-root .quotation-workspace {
    left: 0 !important;
    width: 100vw !important;
    border-left: 0 !important;
  }
  #modal-root .quotation-workspace-head { padding: 14px 18px !important; }
  #modal-root .quotation-workspace-body { padding: 14px 14px 30px !important; }
}


/* Compact admin confirmation / prompt dialogs.
   Destructive and input prompts should be focused cards, not oversized workspace modals. */
#modal-root:has(.app-dialog) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 16000 !important;
}
#modal-root:has(.app-dialog) > .modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
  background: rgba(2, 8, 23, .38) !important;
  backdrop-filter: blur(2px) !important;
}
#modal-root .app-dialog {
  width: min(400px, calc(100vw - 36px)) !important;
  min-width: 0 !important;
  max-width: 400px !important;
  max-height: min(72vh, 520px) !important;
  margin: 0 !important;
  padding: 18px !important;
  overflow: auto !important;
  border: 1px solid var(--dash-border, #e5ebf3) !important;
  border-radius: 14px !important;
  background: var(--dash-surface, #fff) !important;
  box-shadow: 0 18px 50px rgba(2, 8, 23, .24) !important;
}
#modal-root .app-dialog h2 {
  margin: 0 0 6px !important;
  color: var(--dash-ink, #172033) !important;
  font-size: .98rem !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}
#modal-root .app-dialog > p:not(.error) {
  margin: 0 !important;
  color: var(--dash-muted, #64748b) !important;
  font-size: .79rem !important;
  line-height: 1.45 !important;
}
#modal-root .app-dialog > .row {
  gap: 7px !important;
  margin-top: 14px !important;
}
#modal-root .app-dialog > .row .btn {
  min-height: 32px !important;
  padding: 5px 11px !important;
  font-size: .74rem !important;
}
#modal-root .app-dialog-prompt .field {
  min-height: 36px !important;
  margin-top: 11px !important;
  padding: 7px 9px !important;
  font-size: .78rem !important;
}
html.dark #modal-root .app-dialog {
  background: #101b2d !important;
  border-color: var(--line, #24344a) !important;
}
html.dark #modal-root .app-dialog h2 { color: #f8fafc !important; }
html.dark #modal-root .app-dialog > p:not(.error) { color: #9fb0c7 !important; }
@media (max-width: 520px) {
  #modal-root:has(.app-dialog) > .modal-backdrop {
    padding: 14px !important;
  }
  #modal-root .app-dialog {
    width: min(360px, calc(100vw - 28px)) !important;
    padding: 16px !important;
    border-radius: 13px !important;
  }
}