/* IFS Scoping application styles — follows Intricate Solutions CSS conventions.
   Sidebar/header/dashboard-card scaffolding mirrors Scoping-FEMP's
   static/css/scoping.css (shared layout pattern across these Flask apps),
   generalized here since none of it is domain-specific. */

/* ── Sidebar ──────────────────────────────────────────────────────────────
   css/new-style.css already defines an OLDER, unrelated `.sidebar-new`
   component of its own (jstree-based, toggled via an `.expanded` class we
   never add) -- its `.sidebar-new:not(.expanded) { width: 5.66rem; }` rule
   has higher specificity (two class-equivalents) than a plain `.sidebar-new
   { width: 27rem; }` override, so it silently won regardless of source
   order or our own `.collapsed` state, permanently forcing the narrow
   width while our (unrelated) `.collapsed`-gated label-hiding rule stayed
   correct -- net result: a always-narrow sidebar with visible, wrapped/
   clipped labels. #sidebar (an ID, specificity 1,0,0) unconditionally
   outranks any combination of classes, so anchoring the sizing rules to it
   is immune to whatever the shared base CSS does with the same class name. */
#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 27rem;
  background: var(--primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 10;
  transition: width 0.3s ease;
  overflow: hidden;
}
#sidebar.collapsed {
  width: 5.66rem;
}
#sidebar.collapsed .sidebar-label,
#sidebar.collapsed .sidebar-section-label {
  display: none;
}
.sidebar-nav-item { white-space: nowrap; }
.sidebar-toggle-row {
  display: flex;
  align-items: center;
  height: 4.5rem;
  padding: 0 var(--size-5);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.sidebar-toggle-btn {
  color: #fff;
  font-size: 1.5rem;
}
.sidebar-toggle-btn:hover { color: #FFDB9F; }
.sidebar-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
}
.sidebar-nav-item a,
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem var(--size-6);
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.sidebar-nav-item a:hover,
.sidebar-nav-item:hover {
  background: rgba(255,255,255,0.12);
  color: #FFDB9F;
}
.sidebar-nav-item.active a,
.sidebar-nav-item.active {
  border-left-color: #FFDB9F;
  background: rgba(255,255,255,0.15);
  color: #FFDB9F;
}
.sidebar-nav-item i { font-size: 1.1rem; min-width: 1.2rem; text-align: center; }
.sidebar-section-label {
  padding: 0.75rem var(--size-6) 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.5);
}
.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: var(--size-4) 0;
}

/* Wrapper shifts with the sidebar -- ID-anchored for the same reason as
   #sidebar above. #mainContent is nested INSIDE #mainWrapper (see
   base.html), so it inherits this shift already; giving it its own
   margin-left too stacked a second sidebar-width of blank space next to
   the sidebar (caught while fixing the identical bug copied into
   MSAPR_Scoping's static/css/msapr_scoping.css). */
#mainWrapper.sidebar-collapsed { margin-left: 5.66rem; transition: margin-left 0.3s; }
#mainWrapper.sidebar-expanded  { margin-left: 27rem;   transition: margin-left 0.3s; }

/* ── Header overrides ─────────────────────────────────────────────────── */
#topHeader {
  background: #878a91;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
  padding: 0 var(--size-6);
  position: fixed;
  top: 0;
  z-index: 9;
  width: 100%;
  box-sizing: border-box;
}
#topHeader.sidebar-collapsed { padding-left: calc(5.66rem + var(--size-6)); transition: padding-left 0.3s; }
#topHeader.sidebar-expanded  { padding-left: calc(27rem + var(--size-6)); transition: padding-left 0.3s; }
.new-logo { height: 2.5rem; }
#new-toprightnav { display: flex; align-items: center; gap: var(--size-5); }
.header-user-name { color: #fff; font-size: 0.9rem; }
.header-dialog-button { border:none; background:none; font-size:2rem; color:#EFEFEF; transition:color 0.3s; cursor:pointer; }
.header-dialog-button:hover { color:#fff; }
.header-icon-background { opacity: 0; color: #ACAEB3; transition: opacity 0.3s; }
.header-dialog-button:hover .header-icon-background { opacity: 1; }
.header-icon { color: #EFEFEF; }

/* Breadcrumb -- padding-left used to be a flat 5.66rem regardless of sidebar
   state (never actually visible as a bug while the sidebar was stuck narrow
   by the specificity issue above; now that the sidebar genuinely expands to
   27rem, the breadcrumb needs to track it or its text collides with the
   sidebar). */
#headerBreadcrumb {
  background: #eee;
  font-style: italic;
  font-size: 1rem;
  color: #7F7F7F;
  height: 2.8rem;
  border-bottom: 0.075rem solid #ccc;
  display: flex;
  align-items: center;
  position: fixed;
  top: 4.5rem;
  left: 0;
  right: 0;
  z-index: 8;
  box-sizing: border-box;
}
#headerBreadcrumb.sidebar-collapsed { padding-left: 5.66rem; transition: padding-left 0.3s; }
#headerBreadcrumb.sidebar-expanded  { padding-left: 27rem;   transition: padding-left 0.3s; }
#headerBreadcrumb a { color: var(--primary); }

/* Content area — wrapper's margin-top already clears header + breadcrumb */
.content {
  padding-top: var(--size-6);
  min-height: calc(100vh - 7.3rem);
  /* new-style.css's own .content rule sets text-align: center, which
     otherwise inherits straight through into every page's body copy. */
  text-align: left;
}

/* ── Plain data tables (Sites / Site Types / Task Standards) -- these are
   short, non-interactive listings, so they use their own clean padding
   rather than the shared tablesorter component's, which assumes rows are
   decorated by the tablesorter JS plugin and looks cramped without it. ─── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
  padding: 0.65rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--accent-faded);
}
.data-table th {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: bold;
  border-bottom: 2px solid var(--accent-faded);
}
.data-table tbody tr:hover { background: var(--primary-faded); }

.inline-add-form {
  display: flex;
  gap: var(--size-6);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: var(--size-6);
  padding-top: var(--size-6);
  border-top: 1px solid var(--accent-faded);
}

/* ── Service-line tabs (site take-off form) -- plain <a>/<button>-style tabs
   in the spirit of css/new-tabs.css's .horizontal-tab-button, sized for a
   compact row rather than that component's fixed-width card. ──────────── */
.field-tabs {
  display: flex;
  gap: var(--size-2);
  border-bottom: var(--size-1) solid var(--accent-faded);
  margin-bottom: var(--size-7);
  flex-wrap: wrap;
}
.field-tab {
  display: inline-block;
  padding: var(--size-5) var(--size-6);
  background: #ddd;
  color: var(--dark);
  border: none;
  font-weight: bold;
  font-size: 0.85rem;
  border-radius: var(--size-4) var(--size-4) 0 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.field-tab:hover { background: #eee; }
.field-tab.active {
  background: #fff;
  color: var(--primary);
  border-bottom: var(--size-2) solid var(--secondary);
}
.field-tab-panel { display: none; }
.field-tab-panel.active { display: block; }
.field-tab-empty {
  border: var(--size-1) dashed var(--accent-faded);
  border-radius: var(--size-6);
  padding: var(--size-7);
  text-align: center;
  color: var(--accent);
  background: var(--primary-faded);
}

/* ── Site take-off form -- all fields visible together (grouped visually
   by service line for readability, no tabs -- a single physical site's
   counts are entered as one complete picture, not split by section). ──── */
.site-count-groups {
  display: flex;
  flex-direction: column;
  gap: var(--size-7);
}
.site-count-group-label {
  text-transform: uppercase;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: var(--size-4);
  padding-bottom: var(--size-3);
  border-bottom: 1px solid var(--accent-faded);
}

/* Alert overlays */
.alert-overlay {
  position: fixed;
  bottom: var(--size-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: var(--size-5) var(--size-7);
  border-radius: 0.4rem;
  box-shadow: var(--shadow);
  background: #eee;
  max-width: 36rem;
  width: 90%;
}
.alert-overlay.error { background: #fee; color: #f44; }
.alert-overlay.warning { background: #878a91; color: #fff400; }
.alert-overlay-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.error_message   { color:#f00; background:#fee; border:1px solid #fcc; }
.success_message { color:#0a0; background:#efe; border:1px solid #cfc; }
.notice_message  { color:#333; background:#eef; border:1px solid #ccf; }

/* ── Stat cards ───────────────────────────────────────────────────────── */
.stat-card-row {
  display: flex;
  gap: var(--size-8);
  flex-wrap: wrap;
  margin-bottom: var(--size-8);
}
.stat-card {
  padding: var(--size-6);
  background: var(--primary-faded);
  border-radius: 0.3rem;
  min-width: 12rem;
}
.stat-card-value { font-size: 1.8rem; font-weight: bold; color: var(--primary); }
.stat-card-label { color: var(--accent); text-transform: uppercase; font-size: 0.85rem; }

/* ── Grouped field panels (site take-off form) ───────────────────────── */
.assumptions-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--size-6);
  margin-bottom: var(--size-7);
}
.assumptions-group h4 {
  text-transform: uppercase;
  color: var(--accent);
  font-size: 0.9rem;
  margin-top: 0;
  margin-bottom: var(--size-5);
}
.assumptions-group-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-5); }
.assumptions-group-fields label {
  font-weight: bold;
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
}
@media only screen and (max-width: 850px) {
  .assumptions-group-fields { grid-template-columns: 1fr; }
}

.override-badge { color: var(--secondary); font-size: 0.8rem; font-weight: bold; }

/* ── Collapsible section headers (css/new-style.css's .collapsible, wired
   up with a click handler in ifs_scoping.js) ────────────────────────────── */
.collapsible-header { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.collapsible div.collapsible-header span.collapsible-controls i { color: var(--secondary); transition: transform 0.2s; }
.collapsible.collapsed div.collapsible-header span.collapsible-controls i { transform: scale(0.7, 0.7) rotate(-90deg); }

/* ── Property dashboard (card grid) ──────────────────────────────────── */
.dashboard-toolbar {
  display: flex;
  gap: var(--size-6);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--size-6);
}
.dashboard-toolbar .text-input-container { margin: 0; min-width: 14rem; flex: 1; }

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--size-7);
}
.scenario-card {
  background: #fff;
  border-radius: 0.6rem;
  box-shadow: var(--shadow);
  padding: var(--size-6);
  display: flex;
  flex-direction: column;
  gap: var(--size-5);
}
.scenario-card-header { display: flex; gap: var(--size-5); align-items: flex-start; }
.avatar-badge {
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 1.1rem;
}
.avatar-badge-0 { background: var(--primary); }
.avatar-badge-1 { background: var(--secondary); }
.avatar-badge-2 { background: var(--primary-darker); }
.avatar-badge-3 { background: #6b4fa0; }
.avatar-badge-4 { background: #3b7dd8; }
.scenario-card-title { font-weight: bold; font-size: 1.1rem; color: var(--dark); }
.scenario-card-company { color: var(--primary); font-size: 0.9rem; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 1rem;
  padding: 0.15rem 0.7rem;
}
.status-badge.available { background: #efe; color: #0a0; }
.status-badge.checked-out { background: var(--primary-faded); color: var(--secondary); }
.status-badge.archived { background: var(--accent-faded); color: var(--accent); }

.scenario-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--size-4);
  font-size: 0.8rem;
  color: var(--accent);
}
.scenario-card-meta strong { color: var(--dark); display: block; font-size: 0.75rem; text-transform: uppercase; }

.scenario-card-actions { display: flex; gap: var(--size-4); flex-wrap: wrap; margin-top: auto; }

/* ── Property detail header ──────────────────────────────────────────── */
.scenario-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--size-7);
  flex-wrap: wrap;
  gap: var(--size-5);
}