/* MSAPR Scoping application styles — follows Intricate Solutions CSS conventions.
   Sidebar/header/breadcrumb scaffolding mirrors IFS_Scoping's static/css/ifs_scoping.css
   (shared layout pattern across these Flask apps) -- this file previously only had a
   width-override left over from an incomplete copy, missing the component's actual
   background/flex/nav-item/header/breadcrumb styles entirely (new-style.css does not
   define them for this markup), which is why the UI rendered unstyled. */

/* ── 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 wins regardless of source
   order. #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-footer {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: var(--size-4) 0;
}

/* #mainWrapper itself gets NO margin-left: css/new-style.css already has
   `.content.sidebar-collapsed { margin-left: 5.66rem }` / `.sidebar-expanded
   { margin-left: 27rem }` (matching values, no specificity conflict here --
   unlike #sidebar above, there's no competing rule for this class), and
   #mainContent already carries those classes. Adding a second margin-left
   on the wrapper stacked on top of it, doubling the offset. */

/* ── 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 -- tracks the sidebar width so its text doesn't collide with
   the sidebar when expanded. */
#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.
   Needs its own horizontal padding: new-style.css's .content rule has none
   at all, which otherwise left every page's heading/body text flush against
   the sidebar edge with zero breathing room. */
.content {
  padding: var(--size-7);
  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;
}

/* ── Stat cards (dashboard/inventory summary tiles) ──────────────────────── */
.stat-card-row {
  display: flex;
  gap: var(--size-6, 1rem);
  flex-wrap: wrap;
  margin-bottom: var(--size-7, 1.5rem);
}
.stat-card {
  background: #fff;
  border: 1px solid var(--accent-faded);
  border-radius: 0.4rem;
  padding: var(--size-6, 1rem);
  flex: 1;
  min-width: 9rem;
}
.stat-card .stat-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--primary);
}
.stat-card .stat-label {
  color: var(--accent);
  font-size: 0.85rem;
  text-transform: uppercase;
}

/* ── Data table ───────────────────────────────────────────────────────────
   new-style.css's default table has near-zero cell padding, unreadable once
   a table holds more than a couple of narrow columns. */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th, .data-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--accent-faded);
  font-size: 0.9rem;
}
.data-table th {
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--accent);
  background: #f8f8f8;
}
.data-table tbody tr:hover {
  background: #f8fbfc;
}

/* ── Badges (engine status / era / applicability) ────────────────────────── */
.badge-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-pill.badge-active { background: #e6f4ea; color: #1e7e34; }
.badge-pill.badge-low-use { background: #fff3cd; color: #856404; }
.badge-pill.badge-out-of-service, .badge-pill.badge-deactivated { background: #eee; color: #666; }
.badge-pill.badge-departed { background: #f8d7da; color: #a71d2a; }
.badge-pill.badge-not-subject { background: #eef; color: #445; }

/* ── Applicability / regulatory callout ──────────────────────────────────── */
.callout-box {
  background: var(--primary-faded);
  border: 1px solid var(--accent-faded);
  border-radius: 0.4rem;
  padding: var(--size-6);
  font-size: 0.9rem;
  color: var(--dark);
}

/* ── Filter bar (pills + column filters + group-by) ──────────────────────── */
.filter-bar {
  background: #fafafa;
  border: 1px solid var(--accent-faded);
  border-radius: 0.4rem;
  padding: var(--size-5) var(--size-6);
  margin-bottom: var(--size-6);
}
.filter-row {
  display: flex;
  align-items: center;
  gap: var(--size-6);
  flex-wrap: wrap;
  margin-bottom: var(--size-4);
}
.filter-row:last-child { margin-bottom: 0; }
.pill-group {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.pill-group-label {
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--accent);
  text-transform: uppercase;
  margin-right: 0.2rem;
}
.filter-pill {
  background: #fff;
  border: 1px solid var(--accent-faded);
  border-radius: 1rem;
  padding: 0.2rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--dark);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.filter-pill:hover { border-color: var(--primary); }
.filter-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.filter-pill .pill-count { opacity: 0.7; font-size: 0.75rem; }

/* Column filter row -- text inputs for identifiers, multi-select for enums */
tr.filter-row-header th { padding: 0.3rem 0.4rem; background: #fff; }
.col-filter-text {
  width: 100%;
  font-size: 0.8rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--accent-faded);
  border-radius: 0.25rem;
}
/* Excel-style column filter: a small button that opens a floating
   typeahead + checkbox popover, instead of a native <select multiple> --
   the same interaction pattern as Excel/Sheets column filters. */
.col-filter-btn {
  width: 100%;
  font-size: 0.75rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--accent-faded);
  border-radius: 0.25rem;
  background: #fff;
  color: var(--dark);
  cursor: pointer;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.3rem;
}
.col-filter-btn:hover { border-color: var(--primary); }
.col-filter-btn.active { background: var(--primary-faded); border-color: var(--primary); color: var(--primary-darker); font-weight: 600; }
.col-filter-btn i { font-size: 0.7rem; color: var(--accent); }

.col-filter-popover {
  position: absolute;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--accent-faded);
  border-radius: 0.4rem;
  box-shadow: var(--shadow);
  width: 16rem;
  max-height: 22rem;
  display: flex;
  flex-direction: column;
}
.col-filter-popover-search {
  padding: var(--size-4);
  border-bottom: 1px solid var(--accent-faded);
}
.col-filter-popover-search input {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--accent-faded);
  border-radius: 0.25rem;
  box-sizing: border-box;
}
.col-filter-popover-actions {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem var(--size-4);
  font-size: 0.75rem;
  border-bottom: 1px solid var(--accent-faded);
}
.col-filter-popover-actions a { color: var(--primary); cursor: pointer; }
.col-filter-popover-list {
  overflow-y: auto;
  flex: 1;
  padding: var(--size-3) 0;
}
.col-filter-popover-list label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem var(--size-4);
  font-size: 0.82rem;
  font-weight: normal;
  cursor: pointer;
}
.col-filter-popover-list label:hover { background: var(--primary-faded); }
.col-filter-popover-list .filter-value-count { color: var(--accent); font-size: 0.75rem; margin-left:auto; }
.col-filter-popover-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: var(--size-4);
  border-top: 1px solid var(--accent-faded);
}

th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--primary); }
th.sortable i { font-size: 0.7rem; margin-left: 0.2rem; }

/* ── Bulk action bar + inline panels ─────────────────────────────────────── */
.bulk-action-bar {
  display: flex;
  align-items: center;
  gap: var(--size-5);
  background: var(--primary-faded);
  border: 1px solid var(--primary);
  border-radius: 0.4rem;
  padding: var(--size-5) var(--size-6);
  margin-bottom: var(--size-4);
  flex-wrap: wrap;
}
.bulk-panel {
  display: flex;
  align-items: center;
  gap: var(--size-5);
  background: #fff;
  border: 1px solid var(--accent-faded);
  border-radius: 0.4rem;
  padding: var(--size-5) var(--size-6);
  margin-bottom: var(--size-6);
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.bulk-panel .text-input { margin: 0; padding: 0.3rem 0.5rem; }
.bulk-panel label { font-weight: bold; font-size: 0.85rem; }

/* ── CSV import dropzone ──────────────────────────────────────────────────── */
.csv-dropzone {
  border: 2px dashed var(--accent-faded);
  border-radius: 0.4rem;
  padding: 2.5rem;
  text-align: center;
  color: var(--accent);
  background: #fafcfd;
  cursor: pointer;
}
.csv-dropzone.dragover {
  border-color: var(--primary);
  background: #f0f6f8;
}
.import-preview-table {
  max-height: 24rem;
  overflow-y: auto;
}
.import-row-new { background: #f0faf2; }
.import-row-updated { background: #fffbea; }
.import-row-error { background: #fdecea; color: #a71d2a; }