/**
 * White / super-light-blue shell.
 * Uses default light-theme dark custom icons (do not force light marks).
 */

/* Desktop shell: fixed full-height sidebar so it never ends halfway while scrolling. */
@media (min-width: 768px) {
  #app-shell {
    /* overflow-x:hidden breaks sticky; keep shell open and clip on html instead */
    overflow: visible;
  }

  html.fd-session,
  html.fd-session body {
    overflow-x: hidden;
  }

  .side-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    width: var(--fd-sidebar-w);
    min-width: var(--fd-sidebar-w);
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    background: var(--fd-nav-bg);
    border-right: 1px solid var(--fd-nav-border);
    box-shadow: none;
    padding: 0.75rem 0.5rem 0.5rem;
    /* visible so the notification popover can open into the main column;
       scrolling stays on .side-menu */
    overflow: visible;
  }

  .side-nav:has(.notification-center.is-open) {
    z-index: 70;
  }

  .side-menu {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
  }

  .side-footer {
    margin-top: auto;
    flex-shrink: 0;
    width: 100%;
    border-top: 1px solid var(--fd-nav-divider);
  }

  .tab-btn,
  .side-utility-btn,
  .side-sign-out {
    width: 100%;
    box-sizing: border-box;
  }

  /* Spacer so fixed sidebar still reserves horizontal space in the flex row */
  #app-shell::before {
    content: "";
    flex: 0 0 var(--fd-sidebar-w);
    width: var(--fd-sidebar-w);
    min-width: var(--fd-sidebar-w);
    max-width: var(--fd-sidebar-w);
  }

  .global-utility-bar {
    left: var(--fd-sidebar-w);
    height: var(--fd-header-h);
    background: #fff;
    /* Remove the stray top divider line under the utility bar */
    border-bottom: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Default pages: clear the fixed utility bar */
  .app-main {
    padding-top: var(--fd-header-h);
  }

  /*
   * Master-detail hubs (Jobs, Clients, Requests, Estimates, Invoices, Messages)
   * need a locked viewport shell. Do not leave overflow:visible here.
   */
  #app-shell:has(#tab-customers:not(.is-hidden)),
  #app-shell:has(#tab-jobs:not(.is-hidden)),
  #app-shell:has(#tab-requests:not(.is-hidden)),
  #app-shell:has(#tab-estimates:not(.is-hidden)),
  #app-shell:has(#tab-invoices:not(.is-hidden)),
  #app-shell:has(#tab-messages:not(.is-hidden)) {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  .app-main:has(#tab-customers:not(.is-hidden)),
  .app-main:has(#tab-jobs:not(.is-hidden)),
  .app-main:has(#tab-requests:not(.is-hidden)),
  .app-main:has(#tab-estimates:not(.is-hidden)),
  .app-main:has(#tab-invoices:not(.is-hidden)),
  .app-main:has(#tab-messages:not(.is-hidden)) {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    padding: 0;
    padding-top: var(--fd-header-h);
    box-sizing: border-box;
  }

  #tab-customers,
  #tab-jobs,
  #tab-requests,
  #tab-estimates,
  #tab-invoices,
  #tab-messages {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .jobs-hub,
  .customers-hub {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .side-nav,
  #app-shell::before {
    width: 3.75rem;
    min-width: 3.75rem;
    max-width: 3.75rem;
    flex-basis: 3.75rem;
  }

  .global-utility-bar {
    left: 3.75rem;
  }
}

.side-fielddocs-logo {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.25rem;
  border-radius: 0.625rem;
  box-shadow: none;
  background: #fff;
}

.side-brand-name {
  display: none;
}

.side-group {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fd-nav-group);
}

.tab-btn {
  min-height: 2.25rem;
  border-radius: var(--fd-radius, 8px);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fd-nav-text);
}

.tab-btn:hover {
  background: var(--fd-nav-hover);
  color: var(--fd-nav-text-active);
}

.tab-btn.active {
  background: var(--fd-nav-active);
  color: var(--fd-nav-text-active);
  font-weight: 600;
  box-shadow: none;
}

/*
 * Light sidebar: keep product default icon pairing for light theme.
 * (--light marks = icons for light backgrounds; --dark marks stay hidden)
 * Do not invert marks here or icons disappear on white/light-blue rails.
 */

.side-utility-btn,
.side-sign-out {
  border-radius: var(--fd-radius, 8px);
  color: var(--fd-nav-text);
  font-size: 0.8125rem;
}

.side-utility-btn:hover,
.side-sign-out:hover {
  background: var(--fd-nav-hover);
  color: var(--fd-nav-text-active);
}

.side-powered-text {
  color: var(--fd-muted-soft);
  font-size: 0.6875rem;
}

.global-account-avatar {
  background: #2468b4;
  color: #fff;
  font-weight: 600;
}

.btn-primary,
button.btn-primary,
.primary-btn {
  background: var(--fd-btn-bg);
  border: 1px solid var(--fd-btn-bg);
  color: #fff;
  border-radius: var(--fd-radius);
  font-weight: 600;
  box-shadow: none;
}

.btn-primary:hover,
button.btn-primary:hover,
.primary-btn:hover {
  background: var(--fd-btn-bg-hover);
  border-color: var(--fd-btn-bg-hover);
  color: #fff;
  box-shadow: none;
}

.page-title,
.hub-title,
.docs-hub-title,
.settings-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0;
}

.data-table th,
.table th,
.docs-table th {
  background: var(--fd-bg-subtle, #f3f3f3);
  color: var(--fd-ink-soft, #555);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.fc .fc-button-primary {
  background: var(--fd-btn-bg) !important;
  border-color: var(--fd-btn-bg) !important;
  color: #fff !important;
}

.fc .fc-button-primary:not(:disabled):hover {
  background: var(--fd-btn-bg-hover) !important;
  border-color: var(--fd-btn-bg-hover) !important;
  color: #fff !important;
}

/* ── Timesheet: keep size/layout stable when the window is narrowed or short ── */
#tab-timesheet {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

#tab-timesheet .portal-page,
#tab-timesheet .portal-content,
#tab-timesheet .ts-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#tab-timesheet .portal-header {
  /* Negative full-bleed margins overflow when shell padding changes on resize */
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
}

#tab-timesheet .ts-page {
  max-width: 72rem;
}

#tab-timesheet .ts-toolbar,
#tab-timesheet .ts-summary,
#tab-timesheet .ts-day,
#tab-timesheet .ts-clock-card,
#tab-timesheet .ts-crew-row {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#tab-timesheet .ts-summary {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

#tab-timesheet .ts-week-label strong {
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  #tab-timesheet .ts-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #tab-timesheet .ts-toolbar-actions {
    width: 100%;
  }

  #tab-timesheet .ts-filter-wrap,
  #tab-timesheet .ts-filter,
  #tab-timesheet .ts-add-btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  #tab-timesheet .ts-week-strip {
    display: flex;
    overflow-x: auto;
    gap: 0.4rem;
    padding-bottom: 0.2rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  #tab-timesheet .ts-strip-day {
    min-width: 4.5rem;
    flex: 0 0 auto;
  }

  #tab-timesheet .ts-entry-row {
    grid-template-columns: 3.75rem minmax(0, 1fr);
  }

  #tab-timesheet .ts-entry-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  #tab-timesheet .ts-panes {
    display: flex;
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
  }

  #tab-timesheet .ts-pane-btn {
    flex: 1 1 0;
    text-align: center;
    min-width: 0;
  }
}

@media (max-width: 700px) {
  #tab-timesheet .ts-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #tab-timesheet .ts-crew-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  #tab-timesheet .ts-crew-meta {
    grid-column: 2;
    align-items: flex-start;
  }
}

@media (max-height: 720px) and (min-width: 768px) {
  #tab-timesheet .portal-header {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  #tab-timesheet .ts-page {
    gap: 0.75rem;
  }

  #tab-timesheet .ts-clock-timer {
    font-size: 2rem;
  }
}