/* Atelier global theme. Lifted from workspace_v1.html so every
   authenticated page picks up the same palette, typography, navbar
   re-skin, and footer treatment. Loaded after style.css in base.html
   so it wins the cascade against Bootstrap defaults without leaning
   on !important everywhere.

   What's intentionally NOT here:
   - The .atelier / .at-* selectors specific to the workspace contents
     list (those stay inline in workspace_v1.html)
   - The workspace's `display: none` on the global footer (workspace
     folds the credit into its own pager; every other page keeps
     the standalone footer)
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Inter+Tight:wght@400;500;600;700&display=swap');

:root {
  --paper:    #f1e9da;
  --paper-2:  #ece2cf;
  --paper-3:  #e3d6bb;
  --ink:      #1a1612;
  --ink-2:    #3d342a;
  --muted:    #7a6c5a;
  --rule:     #c9bba1;
  --rule-2:   #d8cdb8;
  --accent:   #c0392b;
  --accent-2: #a32d22;
  --accent-soft: rgba(192, 57, 43, 0.16);
}

/* ----------- body / html flex chain ----------- */
html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
}
body > nav.navbar { flex: 0 0 auto; }
/* main grows to fill remaining space between navbar and footer; allow
   internal vertical scroll because long detail pages (long forms,
   estimate tabs) do exceed viewport. Keep `display: block` here so
   Bootstrap container-fluid + container layouts work normally on
   detail pages — workspace overrides with `display: flex` because
   its .atelier child needs to flex-grow to fill. */
body > main, body > .sr-layout, .sr-layout > .sr-main {
  flex: 1 1 auto; min-height: 0;
  overflow-x: hidden; overflow-y: auto;
  padding: 0;
  background: var(--paper);
}
body > footer.footer { flex: 0 0 auto; }

/* No sidebar — navigation is workspace-centric. Each detail page is
   a focused single-entity view; users return to /workspace to switch.
   _sidenav.html is still included by base.html but hidden everywhere. */
.sr-layout > .sr-sidenav,
.sr-layout > .sr-resize-handle,
.sr-layout > .sr-sidenav-backdrop { display: none !important; }
.sr-layout > .sr-main { width: 100% !important; }

/* No raw Bootstrap-white panels inside main. List pages, takeoff
   chat, materials/labor/proposals tabs etc. all sit on parchment. */
main .container, main .container-fluid,
main .container-md, main .container-lg, main .container-xl,
main .container-sm,
main .row > .col, main .row > [class*="col-"] { background: transparent !important; }
main, main > div, main > section, main > article { background-color: var(--paper); }
.bg-white { background-color: var(--paper) !important; }
.bg-body, .bg-body-tertiary, .bg-body-secondary { background-color: var(--paper) !important; }
.bg-light { background-color: var(--paper-2) !important; }
/* tables explicitly */
.table { background-color: transparent !important; }
.table > :not(caption) > * > * { background-color: transparent !important; }

/* Filter strips on list pages (service_requests.html, projects.html,
   contacts.html) — kill the tile look and let them sit on parchment. */
.filter-bar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0.5rem 0 1rem !important;
}
/* Cards wrapping list tables should drop their visible boundary too —
   the underlying table is enough structure. */
main .card { box-shadow: none !important; }

/* ----------- navbar override ----------- */
body > nav.navbar, .navbar.bg-primary, nav.bg-primary {
  background: var(--ink) !important;
  border-bottom: 1px solid var(--accent);
  font-family: 'Fraunces', serif;
}
body > nav .navbar-brand { color: var(--paper) !important; font-weight: 500; letter-spacing: 0.02em; }
body > nav .navbar-brand i { color: var(--accent); }
body > nav .nav-link { color: var(--rule-2) !important; font-style: italic; }
body > nav .nav-link:hover { color: var(--paper) !important; }
body > nav .dropdown-menu {
  background: var(--paper); border: 1px solid var(--ink); border-radius: 0;
  font-family: 'Inter Tight', sans-serif;
}
body > nav .dropdown-item { color: var(--ink); }
body > nav .dropdown-item:hover { background: var(--paper-2); color: var(--accent); }
body > nav .dropdown-divider { border-color: var(--rule); }

/* ----------- global footer (NOT hidden — workspace overrides) ----------- */
body > footer.footer {
  background: var(--paper-2) !important;
  color: var(--ink-2) !important;
  border-top: 1px solid var(--rule);
  font-family: 'Fraunces', serif; font-style: italic;
  padding: 0.5rem 1.5rem !important;
}
body > footer.footer .text-muted,
body > footer.footer a { color: var(--ink-2) !important; }
body > footer.footer a:hover { color: var(--accent) !important; }

/* ----------- Bootstrap primary-color re-skin ----------- */
.btn-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent-2) !important;
  color: var(--paper) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--accent-2) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}
.btn-outline-primary {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background-color: var(--accent) !important;
  color: var(--paper) !important;
}
.text-primary { color: var(--accent) !important; }
.bg-primary { background-color: var(--ink) !important; }
.border-primary { border-color: var(--accent) !important; }
.link-primary, a.text-primary { color: var(--accent) !important; }
.link-primary:hover, a.text-primary:hover { color: var(--accent-2) !important; }

/* secondary buttons — use ink */
.btn-secondary {
  background-color: var(--ink-2) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}
.btn-secondary:hover { background-color: var(--ink) !important; color: var(--paper) !important; }

/* btn-light (used in modal cancels) — parchment fill */
.btn-light {
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  color: var(--ink) !important;
}
.btn-light:hover { background: var(--paper-3) !important; }

/* ----------- nav tabs (used on detail pages) ----------- */
.nav-tabs { border-bottom: 1px solid var(--rule); }
.nav-tabs .nav-link {
  color: var(--muted);
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  margin-bottom: -1px;
  padding: 0.55rem 0.95rem;
  background: transparent !important;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.95rem;
}
.nav-tabs .nav-link:hover { color: var(--ink); }
.nav-tabs .nav-link.active {
  color: var(--ink) !important;
  border-bottom-color: var(--accent) !important;
  font-weight: 500;
}

/* nav-pills (used in settings, sometimes) */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: var(--ink) !important;
  color: var(--paper) !important;
}

/* ----------- form controls ----------- */
.form-control, .form-select {
  background-color: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  color: var(--ink) !important;
  border-radius: 0 !important;
  font-family: 'Inter Tight', sans-serif;
}
.form-control:focus, .form-select:focus {
  background-color: #fff !important;
  border-color: var(--ink) !important;
  box-shadow: 0 0 0 2px var(--accent-soft) !important;
  color: var(--ink) !important;
}
.form-control::placeholder { color: var(--muted); font-style: italic; }
.form-label {
  color: var(--ink-2); font-weight: 500;
  font-family: 'Inter Tight', sans-serif;
}
.form-check-input:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* input-group additions */
.input-group-text {
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  color: var(--ink-2) !important;
  border-radius: 0 !important;
}

/* ----------- cards ----------- */
.card {
  background-color: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.card-header {
  background-color: var(--paper-3) !important;
  border-bottom: 1px solid var(--rule) !important;
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--ink);
  border-radius: 0 !important;
}
.card-footer {
  background-color: var(--paper-3) !important;
  border-top: 1px solid var(--rule) !important;
  border-radius: 0 !important;
}

/* ----------- tables ----------- */
.table {
  color: var(--ink);
  border-color: var(--rule-2);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--paper-2);
  --bs-table-hover-bg: var(--paper-3);
}
.table thead th {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: var(--ink-2);
  border-bottom: 1px solid var(--ink) !important;
  background: transparent;
}
.table tbody tr { border-bottom: 1px solid var(--rule-2); }
.table tbody td {
  border: 0;
  padding: 0.6rem 0.75rem;
}
.table-bordered, .table-bordered td, .table-bordered th {
  border-color: var(--rule-2) !important;
}

/* ----------- headings inside main ----------- */
main h1, main h2, main h3, main h4, main h5, main h6 {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 60;
  color: var(--ink);
  letter-spacing: -0.005em;
}
main h1 { font-variation-settings: "opsz" 144; font-weight: 400; letter-spacing: -0.02em; }
main h2 { font-weight: 500; }
main h3 { font-weight: 500; }

/* ----------- alerts ----------- */
.alert {
  border-radius: 0 !important;
  border: 1px solid var(--rule) !important;
  font-family: 'Inter Tight', sans-serif;
}
.alert-primary { background: var(--paper-2) !important; border-color: var(--accent) !important; color: var(--accent-2) !important; }
.alert-info    { background: #e8f0f4 !important; border-color: #b8d0db !important; color: #1f4554 !important; }
.alert-success { background: #e8efe2 !important; border-color: #b6c9a3 !important; color: #3a5424 !important; }
.alert-warning { background: #f5ecd0 !important; border-color: #d9c084 !important; color: #6e5217 !important; }
.alert-danger  { background: #f5dbd6 !important; border-color: var(--accent) !important; color: var(--accent-2) !important; }

/* ----------- badges ----------- */
.badge {
  border-radius: 999px !important;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 3px 10px;
}
.badge.bg-primary   { background: var(--accent) !important; color: var(--paper) !important; }
.badge.bg-secondary { background: var(--ink-2) !important; color: var(--paper) !important; }
.badge.bg-success   { background: #4f7233 !important; color: var(--paper) !important; }
.badge.bg-info      { background: #2d6b87 !important; color: var(--paper) !important; }
.badge.bg-warning   { background: #b08418 !important; color: var(--paper) !important; }
.badge.bg-danger    { background: var(--accent) !important; color: var(--paper) !important; }
.badge.bg-light     { background: var(--paper-2) !important; color: var(--ink) !important; border: 1px solid var(--rule); }
.badge.bg-dark      { background: var(--ink) !important; color: var(--paper) !important; }

/* Per-org workflow status colors (rendered as <span class="badge"
   style="background: #3B82F6"> etc) are clamped to the Atelier
   palette so they stop screaming Bootstrap-blue on parchment.
   The inline `background` color is overridden; the status name is
   what carries the meaning, not the color. */
.badge[style*="background"] {
  background: var(--paper-3) !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--rule) !important;
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: lowercase !important;
  letter-spacing: 0.02em !important;
}

/* ----------- modals ----------- */
.modal-content {
  background: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
}
.modal-header {
  background: var(--paper-3) !important;
  border-bottom: 1px solid var(--ink) !important;
  font-family: 'Fraunces', serif;
}
.modal-title { color: var(--ink); font-weight: 500; }
.modal-footer { background: var(--paper-2) !important; border-top: 1px solid var(--rule) !important; }

/* ----------- list-group ----------- */
.list-group { border-radius: 0; }
.list-group-item {
  background: var(--paper) !important;
  border-color: var(--rule-2) !important;
  color: var(--ink);
}
.list-group-item:hover { background: var(--paper-2) !important; }
.list-group-item.active {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}

/* ----------- pagination ----------- */
.pagination .page-link {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
}
.pagination .page-item.active .page-link {
  background: var(--accent);
  border-color: var(--accent-2);
  color: var(--paper);
}

/* ----------- breadcrumb (used by _breadcrumb.html) ----------- */
.breadcrumb { font-family: 'Fraunces', serif; font-style: italic; color: var(--muted); }
.breadcrumb-item a { color: var(--ink-2); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--accent); }
.breadcrumb-item.active { color: var(--ink); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--rule); }

/* ----------- text utility tweaks ----------- */
.text-muted { color: var(--muted) !important; }
.text-secondary { color: var(--ink-2) !important; }

/* hr */
hr { border-color: var(--rule); opacity: 1; }

/* spinner color in loaders */
.spinner-border, .spinner-grow { color: var(--accent); }

/* ----------- side nav (_sidenav.html) ----------- */
.sr-sidenav { background: var(--paper-2) !important; border-right: 1px solid var(--rule) !important; }
.sr-nav-header { color: var(--ink-2) !important; font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; }
.sr-nav-add { color: var(--ink-2) !important; }
.sr-nav-add:hover { color: var(--accent) !important; }
.sr-nav-filter { color: var(--ink-2) !important; }
.sr-nav-filter:hover, .sr-nav-filter.active { color: var(--accent) !important; }
.sr-nav-row { color: var(--ink) !important; }
.sr-nav-row:hover { background: var(--paper-3) !important; color: var(--ink) !important; }
.sr-nav-row.active {
  background: var(--paper-3) !important;
  color: var(--accent) !important;
  border-left: 3px solid var(--accent) !important;
  font-weight: 500;
}
.sr-nav-chevron { color: var(--muted) !important; }
.sr-nav-chevron.expanded { color: var(--ink) !important; }
.sr-nav-badge { color: var(--muted) !important; }
.sr-nav-status { font-family: 'Fraunces', serif !important; font-style: italic; font-weight: 400 !important; text-transform: lowercase !important; letter-spacing: 0 !important; padding: 1px 6px !important; background: var(--paper) !important; }
.sr-nav-status.draft, .sr-nav-status.pending     { background: var(--paper) !important; color: var(--muted) !important; }
.sr-nav-status.processing, .sr-nav-status.sent   { background: var(--paper) !important; color: var(--ink-2) !important; }
.sr-nav-status.done, .sr-nav-status.approved,
.sr-nav-status.active, .sr-nav-status.awarded    { background: var(--paper) !important; color: #4f7233 !important; }
.sr-nav-status.failed, .sr-nav-status.rejected   { background: var(--paper) !important; color: var(--accent) !important; }
.sr-nav-filter-dropdown { background: var(--paper) !important; border-color: var(--rule) !important; color: var(--ink) !important; }
.sr-nav-filter-row:hover { background: var(--paper-2) !important; }
.sr-resize-handle:hover, .sr-resize-handle.dragging { background: var(--rule) !important; }

/* the workspace section toggle button (sr-nav-section-toggle from _sidenav.html) */
.sr-nav-section-toggle { color: var(--ink-2) !important; font-family: 'Fraunces', serif; font-style: italic; }
.sr-nav-section-toggle:hover { color: var(--accent) !important; }
.sr-nav-section-chevron { color: var(--muted) !important; }

/* ============================================================
   Inventory additions — data grids and the flow map.
   Kept at the end so a re-copy of the shared theme from a sibling
   app can simply replace everything above this marker.
   ============================================================ */

/* ---------- Data grid ---------- */
/* Scrolls on both axes. --grid-head-h is the height of the label row; the
   filter row sticks directly beneath it, so the two must agree. */
.grid-wrap {
  --grid-head-h: 33px;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  background: #fff;
  overflow: auto;
  max-height: calc(100vh - 300px);
  min-height: 160px;
}
table.grid { margin-bottom: 0; border-collapse: separate; border-spacing: 0; }

/* Sticky header. Applied to the cells rather than <thead>, which Safari and
   older Chrome ignore.
   
   The !important on every background below is NOT cargo cult. The shared
   theme sets `.table > :not(caption) > * > * { background-color: transparent
   !important }` so ordinary tables sit on the parchment — correct for them,
   fatal here: a sticky cell MUST be opaque or the rows scroll straight
   through it. Scoped to `table.grid`, so every other table in the estate
   keeps the transparent treatment. */
table.grid thead tr.grid-head th {
  position: sticky; top: 0; z-index: 3;
  height: var(--grid-head-h);
  background-color: var(--paper-2) !important;
  box-shadow: inset 0 -1px 0 var(--rule);
  font-family: var(--font-display, inherit);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); white-space: nowrap; padding: .5rem .6rem;
}
/* The filter row sits under the labels and stays put — losing the filters on
   scroll is what makes most long grids useless. */
table.grid thead tr.grid-filters th {
  position: sticky; top: var(--grid-head-h); z-index: 3;
  background-color: var(--paper-2) !important;
  box-shadow: inset 0 -2px 0 var(--rule);
  padding: 0 .4rem .45rem;
}
table.grid thead tr.grid-filters .form-control,
table.grid thead tr.grid-filters .form-select {
  font-size: .78rem; padding: .18rem .4rem; background: #fff;
}

/* First column sticks sideways so a row keeps its identity when scrolled
   right. Needs an opaque background or the cells beneath show through. */
table.grid tbody td:first-child,
table.grid thead th:first-child {
  position: sticky; left: 0; z-index: 2;
  background-color: #fff !important;
  box-shadow: inset -1px 0 0 var(--rule-2);
}
table.grid thead th:first-child { background-color: var(--paper-2) !important; z-index: 4; }

table.grid tbody td {
  background-color: #fff !important;
  padding: .45rem .6rem; font-size: .86rem;
  border-bottom: 1px solid var(--rule-2);
}
table.grid tbody tr.grid-row-link { cursor: pointer; }
table.grid tbody tr.grid-row-link:hover td { background-color: var(--paper-2) !important; }
/* The sticky cell needs the hover colour too, or it stays white as the rest
   of the row highlights around it. */
table.grid tbody tr.grid-row-link:hover td:first-child { background-color: var(--paper-2) !important; }
table.grid tbody tr.grid-row-link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.grid-num { font-variant-numeric: tabular-nums; }
.grid-muted { color: var(--muted); }
/* Quantities that have gone negative are a signal, not an error — surface
   them without shouting. */
.grid-negative { color: var(--accent); font-weight: 600; }
.grid-below-min { color: #b7791f; font-weight: 600; }

@media (max-width: 768px) {
  /* More of a phone screen is the grid, since there is less around it. */
  .grid-wrap { max-height: calc(100vh - 220px); }
}

/* Sortable column headings. The idle icon stays faint so the active column
   is obvious at a glance, but every sortable heading still advertises that
   it can be clicked. */
a.grid-sort { color: inherit; text-decoration: none; white-space: nowrap; }
a.grid-sort:hover { color: var(--accent); }
a.grid-sort.is-active { color: var(--ink); font-weight: 700; }
.grid-sort-idle { opacity: .25; }
a.grid-sort:hover .grid-sort-idle { opacity: .6; }