/* Visual audit fixes: keep late-loaded modules within the portal canvas and
   preserve readable surfaces in both themes. */
.view {
  padding-bottom: 128px;
}

.v1-stage-tabs {
  flex-wrap: wrap;
  overflow: visible;
}

#staff-invite-form.settings-list label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  align-items: start;
}

#staff-invite-form.settings-list input,
#staff-invite-form.settings-list select,
#staff-invite-form.settings-list textarea {
  width: 100%;
}

#staff-invite-form .gc-welcome-grid {
  min-width: 0;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

#staff-invite-form .gc-welcome-grid label {
  min-width: 0;
  padding: 0;
  border: 0;
}

#gc-bookkeeper-report.gc-books {
  grid-template-columns: minmax(0, 1fr) !important;
  min-width: 0;
  max-width: 100%;
}

#gc-bookkeeper-report > *,
#gc-bookkeeper-report .gc-books-grid,
#gc-bookkeeper-report .gc-books-card,
#gc-bookkeeper-report .gc-books-kpis,
#gc-bookkeeper-report .gc-books-kpi {
  min-width: 0;
  max-width: 100%;
}

#gc-bookkeeper-report .gc-books-card,
#gc-bookkeeper-report .gc-books-kpi,
#gc-bookkeeper-report .gc-recognition-card {
  overflow: hidden;
}

#support-tickets a,
#support-tickets code,
#support-tickets pre {
  overflow-wrap: anywhere;
  word-break: break-word;
}

html[data-theme="dark"] #gc-bookkeeper-report .gc-books-card,
html[data-theme="dark"] #gc-bookkeeper-report .gc-books-kpi,
html[data-theme="dark"] #gc-bookkeeper-report .gc-recognition-card {
  color: #edf4fb !important;
  background: #111d2a !important;
  border-color: #2b3c4f !important;
}

html[data-theme="dark"] #gc-bookkeeper-report .gc-recognition-metrics div,
html[data-theme="dark"] #gc-bookkeeper-report .gc-books-note,
html[data-theme="dark"] #gc-bookkeeper-report .gc-audit-item {
  color: #dce8f3;
  background: rgba(119, 151, 181, .09);
  border-color: #2b3c4f;
}

html[data-theme="dark"] #gc-bookkeeper-report .gc-books-table th,
html[data-theme="dark"] #gc-bookkeeper-report .gc-books-table td {
  color: inherit;
  border-color: #2b3c4f;
}

@media (max-width: 1050px) {
  #gc-bookkeeper-report .gc-books-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .view {
    padding-bottom: 112px;
  }

  #gc-bookkeeper-report .gc-books-kpis {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The authentication shell is injected with workstation controls after first
   paint. Pin the complete card to the viewport on phones so legacy/component
   sizing cannot restore the 460px desktop width and clip the right edge. */
@media (max-width: 540px) {
  #login-screen.login-screen {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #login-screen .login-panel {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #login-screen .login-panel > *,
  #login-screen .gc-workstation-enroll-login,
  #login-screen .discord-button,
  #login-screen .secondary-button {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #login-screen .discord-button,
  #login-screen .gc-workstation-enroll-login,
  #login-screen .gc-workstation-enroll-login .secondary-button {
    box-sizing: border-box;
    width: 100% !important;
  }

  #login-screen .gc-workstation-enroll-login small,
  #login-screen .access-note {
    overflow-wrap: anywhere;
  }
}

/* Keep the hamburger exclusive to the phone navigation breakpoint. The
   generic icon-button touch-target rule otherwise makes it visible on desktop. */
.mobile-menu {
  display: none !important;
}

@media (max-width: 750px) {
  .mobile-menu {
    display: inline-grid !important;
  }
}

/* Tablet portrait keeps the desktop sidebar, so the repair search/filter row
   needs to stack before the phone breakpoint to stay inside the work canvas. */
@media (min-width: 751px) and (max-width: 900px) {
  #repairs .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #repairs .toolbar .search,
  #repairs #status-filter {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* KPI metadata was too faint against the light metric cards. Keep secondary
   copy quiet, but readable enough to scan without squinting. */
html[data-theme="light"] #dashboard .metrics small {
  color: #64748b;
}
/* Authenticated reporting tables must shrink with their cards rather than
   preserving intrinsic text widths and being clipped by the report surface. */
#gc-bookkeeper-report .gc-books-table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed;
}

#gc-bookkeeper-report .gc-books-table th,
#gc-bookkeeper-report .gc-books-table td {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

#support-tickets strong {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (min-width: 751px) and (max-width: 900px) {
  /* Master Directory: use its compact record-card layout before the desktop
     sidebar leaves too little room for the six-column directory table. */
  .gc-dir-search-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .gc-dir-search-row > select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .gc-dir-columns {
    display: none;
  }

  .gc-dir-list {
    padding: 0 12px 12px;
  }

  .gc-dir-row {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 12px;
    margin: 0 0 9px;
    padding: 13px;
    border: 1px solid var(--line, #e1eaf1) !important;
    border-radius: 12px;
  }
  .gc-dir-record {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    gap: 7px;
  }

  .gc-dir-customer {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .gc-dir-device {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .gc-dir-row > span:nth-child(4) {
    grid-column: 1;
    grid-row: 4;
  }

  .gc-dir-time {
    grid-column: 2;
    grid-row: 4;
    text-align: right;
  }

  .gc-dir-time small,
  .gc-dir-arrow {
    display: none !important;
  }

  /* Settings: activate component-compact layouts based on the usable canvas,
     not only the full browser viewport. */
  #settings .gc-pay-settings-row,
  #settings .gc-pay-settings-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #settings .gc-online-architecture,
  #settings .gc-online-architecture-head,
  #settings .gc-online-statuses,
  #settings .gc-online-contract,
  #settings .gc-pay-settings-row,
  #settings .gc-pay-settings-grid,
  #settings .gc-pay-toggle {
    min-width: 0;
    max-width: 100%;
  }

  #settings .gc-online-architecture-head {
    display: grid;
  }

  #settings .gc-pay-settings-row select,
  #settings .gc-pay-settings-row input,
  #settings .gc-pay-settings-grid select,
  #settings .gc-pay-settings-grid input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #settings .gc-hours-grid,
  #settings .gc-hours-row {
    min-width: 0;
    max-width: 100%;
  }

  #settings .gc-hours-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #settings .gc-hours-day {
    grid-column: 1;
  }

  #settings .gc-hours-open {
    grid-column: 2;
    justify-self: end;
  }

  #settings .gc-hours-row label,
  #settings .gc-hours-row input[type="time"] {
    min-width: 0;
    max-width: 100%;
  }

  /* Schedule intelligence reads better as two compact columns on tablet than
     as a seven-column strip clipped by the sidebar. */
  #schedule .gc-schedule-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #schedule .gc-schedule-day-intel,
  #schedule .gc-schedule-day-intel > * {
    min-width: 0;
    max-width: 100%;
  }

  #schedule .gc-schedule-day-intel header {
    flex-wrap: wrap;
  }

  /* Repair Reference has a search control with a 320px minimum beside mode
     tabs. Stack those controls while the desktop sidebar is still present. */
  #repair-reference .gc-kb-shell,
  #repair-reference .gc-kb-hero,
  #repair-reference .gc-kb-search-panel,
  #repair-reference .gc-kb-library,
  #repair-reference .gc-kb-results,
  #repair-reference .gc-kb-guide {
    min-width: 0;
    max-width: 100%;
  }

  #repair-reference .gc-kb-search-panel {
    flex-direction: column;
    align-items: stretch;
  }

  #repair-reference .gc-kb-search {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #repair-reference .gc-kb-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #repair-reference .gc-kb-section-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

/* Reports still contain a few legacy 720px tables. Keep those inside one
   deliberate table scroller instead of allowing the card itself to widen. */
#reports .table-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

#reports .card {
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 751px) and (max-width: 900px) {
  /* The shipping settings form inherits a generic two-column form layout whose
     220px controls exceed the post-sidebar tablet canvas. */
  #shipping-settings-form .form-grid {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    max-width: 100%;
  }

  #shipping-settings-form .form-grid > label,
  #shipping-settings-form .form-grid > label.full,
  #shipping-settings-form .form-grid input,
  #shipping-settings-form .form-grid select,
  #shipping-settings-form .form-grid textarea {
    grid-column: auto;
    min-width: 0;
    max-width: 100%;
  }

  #shipping-settings-form .form-grid input,
  #shipping-settings-form .form-grid select,
  #shipping-settings-form .form-grid textarea {
    width: 100%;
  }

  #shipping-settings-form .switch-row {
    min-width: 0;
    max-width: 100%;
    gap: 12px;
  }
}

@media (min-width: 751px) and (max-width: 900px) {
  #settings .gc-pay-settings-row > label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    align-items: start !important;
  }

  #settings .gc-pay-settings-row > label > select,
  #settings .gc-pay-settings-row > label > input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #settings .gc-pay-settings-row > label > small {
    min-width: 0;
    max-width: 100%;
    line-height: 1.4;
  }
}

/* Knowledge Base loads after the shell and reintroduces a visible sidebar
   scrollbar. Keep the nav scrollable while restoring the clean rail. */
.sidebar,
.sidebar nav {
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

.sidebar::-webkit-scrollbar,
.sidebar nav::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Keep Marlon's closed-state launcher minimal. Activity remains visible when
   there is something actionable, but an idle/checking pill should not compete
   with the primary Need Help? button. */
.gc-marlon-activity:not([data-state]),
.gc-marlon-activity[data-state="idle"] {
  display: none !important;
}

/* Intermediate desktop widths still carry the full sidebar (and, above 1180,
   the dashboard utility rail). Use the Directory's compact record cards until
   there is enough true content width for its full multi-column table. */
@media (min-width: 901px) and (max-width: 1200px) {
  .gc-dir-search-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .gc-dir-search-row > select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .gc-dir-columns {
    display: none;
  }

  .gc-dir-list {
    padding: 0 12px 12px;
  }

  .gc-dir-row {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 12px;
    margin: 0 0 9px;
    padding: 13px;
    border: 1px solid var(--line, #e1eaf1) !important;
    border-radius: 12px;
  }

  .gc-dir-record {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    gap: 7px;
  }

  .gc-dir-customer {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .gc-dir-device {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .gc-dir-row > span:nth-child(4) {
    grid-column: 1;
    grid-row: 4;
  }

  .gc-dir-time {
    grid-column: 2;
    grid-row: 4;
    text-align: right;
  }

  .gc-dir-time small,
  .gc-dir-assigned,
  .gc-dir-arrow {
    display: none !important;
  }
}

/* Customer rows have a 901–1050px gap between their desktop and component-
   compact layouts. Drop the least important activity column in that band. */
@media (min-width: 901px) and (max-width: 1050px) {
  #customers .gc-customer-row {
    grid-template-columns: 1.2fr .9fr .55fr .65fr !important;
    min-width: 0;
    max-width: 100%;
  }

  #customers .gc-customer-row > *:nth-child(5) {
    display: none !important;
  }
}

/* Business-hours rows and the two-column timesheet employee grid both need
   one extra compact band while the full desktop sidebar remains visible. */
@media (min-width: 901px) and (max-width: 960px) {
  #settings .gc-hours-grid,
  #settings .gc-hours-row {
    min-width: 0;
    max-width: 100%;
  }

  #settings .gc-hours-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  #settings .gc-hours-day {
    grid-column: 1;
  }

  #settings .gc-hours-open {
    grid-column: 2;
    justify-self: end;
  }

  #settings .gc-hours-row label,
  #settings .gc-hours-row input[type="time"] {
    min-width: 0;
    max-width: 100%;
  }

  #timesheets .gc-ts-employee-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #timesheets .gc-ts-employee-card,
  #timesheets .gc-ts-employee-card > * {
    min-width: 0;
  }
}

/* Seven 128px schedule intelligence cards cannot coexist with the desktop
   sidebar around 1180–1200px. Keep the four-column desktop-compact layout a
   little longer, then return to seven columns once 1280px has real room. */
@media (min-width: 1101px) and (max-width: 1240px) {
  #schedule .gc-schedule-days {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #schedule .gc-schedule-day-intel,
  #schedule .gc-schedule-day-intel > * {
    min-width: 0;
    max-width: 100%;
  }

  #schedule .gc-schedule-day-intel header {
    flex-wrap: wrap;
  }
}

/* Payment Settings also needs its compact component layout at intermediate
   desktop widths because the persistent sidebar reduces the usable canvas. */
@media (min-width: 901px) and (max-width: 1100px) {
  #settings .gc-pay-settings-row,
  #settings .gc-pay-settings-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #settings .gc-online-architecture,
  #settings .gc-online-architecture-head,
  #settings .gc-online-statuses,
  #settings .gc-online-contract,
  #settings .gc-pay-settings-row,
  #settings .gc-pay-settings-grid,
  #settings .gc-pay-toggle {
    min-width: 0;
    max-width: 100%;
  }

  #settings .gc-online-architecture-head {
    display: grid;
  }

  #settings .gc-pay-settings-row select,
  #settings .gc-pay-settings-row input,
  #settings .gc-pay-settings-grid select,
  #settings .gc-pay-settings-grid input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* Payment field labels should read vertically inside each responsive column;
   generic Settings label styles otherwise compress help text beside controls. */
#settings .gc-pay-settings-row > label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 7px !important;
}

#settings .gc-pay-settings-row > label > small {
  min-width: 0;
  max-width: 100%;
}

/* Repair-time learning is injected after the Reports shell. Its tables inherit
   the portal's desktop table minimums, so constrain the component itself and
   collapse to one column while the sidebar leaves a narrow reporting canvas. */
#reports .gc-repair-learning {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  min-width: 0;
  max-width: 100%;
}

#reports .gc-repair-learning > div {
  min-width: 0;
  max-width: 100%;
}

#reports .gc-repair-learning table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed;
}

#reports .gc-repair-learning th,
#reports .gc-repair-learning td {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 1050px) {
  #reports .gc-repair-learning {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}