/*
 *= require base/reset
 *= require base/variables
 *= require base/typography
 *= require layout/sidebar
 *= require layout/portal_layout
 *= require components/cards
 *= require components/forms
 *= require components/buttons
 *= require components/tables
 *= require components/kpi
 *= require components/badges
*/

/* NOTE: the design-system sheets are NO LONGER pulled in here with @import — Propshaft served those
   paths un-fingerprinted and every one 404'd, so none of them ever loaded. They are now linked as
   individual fingerprinted files in app/views/layouts/application.html.erb (which is what actually
   makes them load). This file keeps only its own DIRECT rules below, and is linked LAST so they win. */


/* Global */

body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,
  "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  background:var(--bg);
  overflow-x:hidden;
}


/* ===============================
   Portal Layout
================================ */

.portal-layout{
  display:block;
}

/* Main content */

.portal-main{
  margin-left:250px;
  min-height:100vh;

  padding:30px 40px;
  box-sizing:border-box;
  transition:margin-left 0.28s ease;
}

.portal-layout.sidebar-collapsed .portal-main{
  margin-left:64px;
}


/* ===============================
   Auth Pages (login)
================================ */

.auth-container{
  max-width:420px;
  margin:100px auto;
  padding:30px;
}


/* ===============================
   Flash Messages
================================ */

.flash-message {
  position: fixed;
  top: 20px;
  right: 20px;

  min-width: 320px;
  max-width: 420px;

  padding: 14px 16px;

  border-radius: 10px;

  font-weight: 500;

  box-shadow: 0 10px 25px rgba(0,0,0,0.15);

  z-index: 9999;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.flash-message.notice {
  background: var(--info-light);
  color: var(--info);
}

.flash-message.alert {
  background: var(--danger-light);
  color: var(--danger);
}

.flash-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: inherit;
}


/* ===============================
   Tables
================================ */

.data-table.highlight{
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}

.data-table thead{
  background:var(--bg);
}

.data-table th{
  padding:14px;
  font-size:13px;
  text-transform:uppercase;
  color:var(--text-muted);
}

.data-table td{
  padding:14px;
}

.esg-card{
  border:1px solid var(--border);
  transition:all .2s ease;
}

.error-text{
  margin-top:6px;
  font-size:13px;
  color:var(--danger);
}

.esg-card.has-error{
  border:2px solid var(--danger) !important;
  background:var(--danger-light);
}


/* ===============================
   Page Header
================================ */

.page-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:24px;
  flex-wrap:wrap;
  gap:12px;
}

.page-header-left h1,
.page-header-left h2{
  margin:0;
  font-size:26px;
  font-weight:700;
  color:var(--text);
}

.page-header-left .page-subtitle{
  margin-top:6px;
  font-size:14px;
  color:var(--text-muted);
}

.page-header-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}


/* ===============================
   Inline-style Utilities
================================ */

.text-primary{ color:var(--primary); }

a.btn-link-primary{
  background:var(--primary-gradient);
  color:white;
  padding:9px 16px;
  border-radius:8px;
  text-decoration:none;
  font-size:13px;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:opacity .2s, box-shadow .2s;
}

a.btn-link-primary:hover{
  opacity:.9;
  box-shadow:0 4px 12px rgba(15,118,110,.30);
  color:white;
}

a.btn-link-secondary{
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  padding:8px 14px;
  border-radius:8px;
  text-decoration:none;
  font-size:13px;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:background .2s, border-color .2s;
}

a.btn-link-secondary:hover{
  background:var(--bg);
  border-color:var(--border-strong);
  color:var(--text);
}

/* =====================================================================
   PORTAL LAYOUT SAFETY NET  (added 20260719_1315)
   WHY THIS IS HERE AND NOT IN base/glass.css:
   Propshaft serves this bundle with RAW `@import "base/glass.css"` paths;
   the browser requests /assets/base/glass.css (un-fingerprinted) and gets a
   404, so glass.css — and every @import'd component sheet — never loads.
   The design-system classes (.zt-page-head, .zt-head-actions, filter rows)
   were therefore ABSENT in the browser, leaving these headers with no flex
   layout at all — which is the "search box overlaps the title" and the
   "month / year / Apply glued into a vertical stack" the user reported.
   These are DIRECT rules (not @import), so they are actually delivered.
   ===================================================================== */

/* Page header. GRID, not flex: two columns [title | actions] that CANNOT overlap no matter how wide a
   child gets — grid tracks never paint over one another, which flex + a runaway child did not guarantee.
   `minmax(0,1fr)` lets the title column shrink (its content won't force overflow); `auto` sizes the
   action cluster to its (now capped) content. */
.zt-page-head{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:16px; margin-bottom:22px;
}
.zt-page-head > :first-child{ min-width:0; } /* allow the title cell to shrink instead of overflow */
.zt-page-head h1{ font-size:24px; font-weight:800; color:var(--text); margin:0; letter-spacing:-0.01em; }
.zt-page-head .sub,
.zt-page-head .page-subtitle{ font-size:13.5px; color:var(--text-muted,var(--text-subtle)); margin-top:5px; max-width:720px; }

/* Action cluster: definite widths so no control can balloon and shove the row onto the title. */
.zt-head-actions{
  display:flex; align-items:center; gap:10px;
  flex:0 0 auto; flex-wrap:nowrap; justify-content:flex-end;
}
.zt-head-actions > *{ flex:0 0 auto; margin:0; }
.zt-head-actions .input-field,
.zt-head-actions input[type="text"]{ width:220px !important; min-width:0; box-sizing:border-box; }
.zt-head-actions select{ width:180px !important; min-width:0; box-sizing:border-box; }

/* THE ACTUAL BALLOON FIX: shared/_zt_select progressively enhances every portal <select> into a
   `<div class="zt-cs">` wrapper that is `width:100%` and hides the native <select> (1px). The caps
   above target the hidden native element, so the VISIBLE dropdown filled the whole row and blew the
   header apart. Cap the WRAPPER in the header and in filter rows. */
.zt-head-actions .zt-cs{ width:180px !important; flex:0 0 auto; }
.esg-period-panel .zt-cs,
.imp-filter-panel .zt-cs,
.filter-row .zt-cs,
.filter-panel .zt-cs{ width:150px !important; flex:0 0 auto; }
/* A unit dropdown sharing a flex row with a number input (e.g. the segmentation "Annual Revenue"
   amount + unit): cap the wrapper so it can't balloon and squeeze the amount field to a sliver. */
.input-group .zt-cs{ width:130px !important; flex:0 0 130px; }
.input-group .input-field,
.input-group input[type="number"],
.input-group input[type="text"]{ flex:1 1 auto; min-width:0; }

/* Uniform control look (forms.css is one of the sheets that 404s, so define it here too). */
.zt-head-actions .input-field,
.zt-head-actions input[type="text"],
.zt-head-actions select,
.esg-select,.imp-select,.filter-select,.zt-filter-select,.zt-select{
  padding:9px 12px; border:1px solid var(--border-strong,#334155); border-radius:8px;
  font-size:13px; font-family:inherit; color:var(--text); background:var(--card);
}

/* Filter row (Reporting Period: Month  Year  [Apply]) — a single horizontal row, never a glued stack.
   The stacking came from the inner <form> being a wrapping flex item whose intrinsic width collapsed
   to one control; nowrap + a real flex basis keeps the controls in a row. */
.esg-period-panel{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.esg-period-panel form{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; flex:1 1 auto; min-width:0; }
.esg-select,.imp-select,.filter-select,.zt-filter-select{ width:150px !important; min-width:0; }
.esg-apply-btn,.filter-apply-btn{ flex:0 0 auto; white-space:nowrap; }

/* Narrow screens: stack the header into one column and let the cluster wrap under the title. */
@media (max-width:760px){
  .zt-page-head{ grid-template-columns:1fr; }
  .zt-head-actions{ flex-wrap:wrap; justify-content:flex-start; width:100%; }
  .zt-head-actions .input-field,
  .zt-head-actions input[type="text"]{ width:100% !important; }
  .zt-head-actions .zt-cs{ width:100% !important; }
  .esg-period-panel form{ flex-wrap:wrap; }
}