/*
 * POMEROY CORE — Shared Theme
 * pomeroy-theme.css
 *
 * Single source of truth for all design tokens, base styles,
 * and shared component classes across all 78 modules.
 *
 * USAGE:
 *   <link rel="stylesheet" href="/pomeroy-theme.css">
 *   Remove the inline <style> block from each module and replace
 *   with module-specific overrides only.
 *
 * BRAND OVERRIDE:
 *   The brand-settings.js IIFE still runs per-module and calls
 *   root.style.setProperty() to override --font-* and colour vars
 *   at runtime. This file provides the defaults; brand overrides win.
 *
 * FONT LOADING:
 *   Google Fonts is imported here. Modules should remove their
 *   individual <link> to fonts.googleapis.com.
 */

/* ── GOOGLE FONTS ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {

  /* Core palette */
  --black:        #181818;
  --white:        #FFFFFF;
  --gold:         #9D8450;
  --gold-light:   #C7B48E;
  --gold-pale:    #F5F0E8;
  --offwhite:     #E2E0DD;
  --concrete:     #C5C4BF;

  /* Semantic colours */
  --red:          #C0392B;
  --red-pale:     #FDECEA;
  --amber:        #B7770D;
  --amber-pale:   #FEF6E4;
  --green:        #2D7A4F;
  --green-pale:   #EAF5EE;
  --blue:         #2C5F8A;
  --blue-pale:    #EBF2FA;
  --orange:       #E67E22;
  --orange-pale:  #FEF3E2;
  --purple:       #6B2FA0;
  --purple-pale:  #F0E8FA;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-main:    'DM Sans', -apple-system, sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* KPI strip defaults (overridden per-module if needed) */
  --kpi1-bg:      #181818;
  --kpi1-label:   #888888;
  --kpi1-value:   #FFFFFF;
  --kpi2-bg:      #E2E0DD;
  --kpi2-label:   #888888;
  --kpi2-value:   #181818;

  /* Structural */
  --header-h:     52px;
  --identity-top: 52px;

  /* Text utility scale */
  --text-muted:   #888;
  --text-label:   #666;
  --text-faint:   #999;
}

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

/* ── BASE ───────────────────────────────────────────────────── */
body {
  font-family: var(--font-main);
  background:  var(--offwhite);
  color:       var(--black);
  font-size:   13px;
  line-height: 1.5;
  min-height:  100vh;
}

/* ── HEADER ─────────────────────────────────────────────────── */
/* Locked standard format — Apr 2026 */
.app-header {
  background:  var(--black);
  height:      var(--header-h);
  display:     flex;
  align-items: center;
  padding:     0 24px;
  position:    sticky;
  top:         0;
  z-index:     200;
  overflow:    visible;   /* required for brandSpan overflow */
}

/* Brand logo span — absolutely positioned, spans header + identity bar */
#brandSpan {
  display:         none;  /* shown by JS once image loads */
  position:        absolute;
  left:            0;
  top:             0;
  z-index:         202;
  background:      var(--black);
  padding:         0 20px;
  align-items:     center;
  justify-content: center;
  border-right:    1px solid #2a2a2a;
}
#brandSpanImg {
  object-fit: contain;
  max-width:  180px;
}

/* Dashboard link + avatar */
.header-nav {
  margin-left: auto;
  display:     flex;
  align-items: center;
  gap:         12px;
}
.header-nav a {
  color:           #888;
  font-size:       12px;
  font-weight:     500;
  text-decoration: none;
  padding:         5px 11px;
  border-radius:   4px;
  transition:      all .15s;
  white-space:     nowrap;
}
.header-nav a:hover { color: var(--white); background: #2a2a2a; }

.header-avatar {
  width:           30px;
  height:          30px;
  background:      var(--gold);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--white);
  font-size:       11px;
  font-weight:     600;
  cursor:          pointer;
  flex-shrink:     0;
}

/* ── IDENTITY BAR ────────────────────────────────────────────── */
.identity-bar {
  background:  var(--black);
  padding:     16px 24px;
  display:     flex;
  align-items: center;
  gap:         20px;
  position:    sticky;
  top:         var(--identity-top);
  z-index:     199;
  overflow:    visible;
}

.identity-context {
  font-family:    var(--font-mono);
  font-size:      19px;
  font-weight:    700;
  color:          var(--white);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom:  4px;
  opacity:        .7;
}

.identity-title {
  font-family:    var(--font-display);
  font-size:      32px;
  font-weight:    600;
  color:          var(--gold);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height:    1.1;
}

.identity-actions {
  margin-left: auto;
  display:     flex;
  gap:         8px;
  align-items: center;
  flex-shrink: 0;
}

/* ── IDENTITY GAP ────────────────────────────────────────────── */
/* 12px offwhite gap between identity bar and content */
.identity-gap {
  height:     12px;
  background: var(--offwhite);
}

/* ── KPI STRIP ───────────────────────────────────────────────── */
.kpi-strip {
  display:    flex;
  background: var(--kpi1-bg);
}

.kpi-cell {
  flex:         1;
  padding:      14px 20px;
  border-right: 1px solid #2a2a2a;
}
.kpi-cell:last-child { border-right: none; }

.kpi-label {
  font-size:      10px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--kpi1-label);
  margin-bottom:  6px;
}

.kpi-value {
  font-family: var(--font-display);
  font-size:   26px;
  font-weight: 500;
  color:       var(--kpi1-value);
  line-height: 1.1;
}

.kpi-sub {
  font-family: var(--font-mono);
  font-size:   11px;
  color:       rgba(255,255,255,.4);
  margin-top:  4px;
}

/* ── WARNING STRIP ───────────────────────────────────────────── */
.warning-strip {
  background:   var(--amber-pale);
  border-bottom: 1px solid rgba(183,119,13,.2);
  padding:      8px 24px;
  font-size:    12px;
  color:        var(--amber);
  display:      flex;
  align-items:  center;
  gap:          8px;
}

/* ── PAGE BODY ───────────────────────────────────────────────── */
.page-body {
  max-width: 1200px;
  margin:    0 auto;
  padding:   24px 24px 80px;
}

/* ── PANEL ───────────────────────────────────────────────────── */
.panel {
  background:    var(--white);
  border:        1px solid var(--concrete);
  border-radius: 4px;
  overflow:      hidden;
  margin-bottom: 16px;
}

.panel-header {
  padding:         10px 16px;
  background:      var(--black);
  border-bottom:   1px solid #2a2a2a;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.panel-title {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          var(--white);
}

.panel-body { padding: 16px; }

/* ── SECTION (card style) ────────────────────────────────────── */
.section {
  background:    var(--white);
  border:        1px solid var(--offwhite);
  border-radius: 6px;
  overflow:      hidden;
  margin-bottom: 16px;
  box-shadow:    0 1px 4px rgba(0,0,0,.04);
}

.section-head {
  background:  var(--black);
  padding:     10px 16px;
  display:     flex;
  align-items: center;
  gap:         12px;
}

.section-title {
  color:          var(--gold);
  font-weight:    500;
  font-size:      12px;
  letter-spacing: .04em;
  font-family:    var(--font-mono);
  flex:           1;
}

.section-body { padding: 16px 18px; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  border:          none;
  border-radius:   4px;
  padding:         7px 14px;
  font-size:       12px;
  font-weight:     500;
  cursor:          pointer;
  font-family:     var(--font-main);
  transition:      all .15s;
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  white-space:     nowrap;
  text-decoration: none;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-gold    { background: var(--gold);  color: var(--white); }
.btn-gold:hover:not(:disabled) { background: var(--gold-light); }

.btn-black   { background: var(--black); color: var(--white); }
.btn-black:hover:not(:disabled) { background: #2a2a2a; }

.btn-white   { background: var(--white); color: var(--black); border: 1px solid var(--concrete); }
.btn-white:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }

.btn-ghost   { background: transparent; color: var(--white); border: 1px solid #555; }
.btn-ghost:hover:not(:disabled) { border-color: var(--gold-light); }

.btn-red     { background: var(--red);   color: var(--white); }
.btn-red:hover:not(:disabled) { background: #a0302a; }

.btn-green   { background: var(--green); color: var(--white); }
.btn-green:hover:not(:disabled) { background: #246040; }

.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn-lg { padding: 10px 20px; font-size: 13px; }

/* ── FORM ELEMENTS ───────────────────────────────────────────── */
.form-label {
  display:        block;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color:          var(--black);
  margin-bottom:  5px;
}

.form-input,
.form-select {
  width:         100%;
  padding:       8px 10px;
  border:        1px solid var(--concrete);
  border-radius: 4px;
  font-family:   var(--font-main);
  font-size:     13px;
  color:         var(--black);
  background:    var(--white);
  transition:    border-color .13s;
  appearance:    none;
}
.form-input:focus,
.form-select:focus {
  outline:        2px solid var(--gold);
  outline-offset: -2px;
}
.form-input::placeholder { color: var(--concrete); }

.form-row {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   14px;
  margin-bottom:         14px;
}

.form-field { display: flex; flex-direction: column; }

.form-hint {
  font-size:   11px;
  color:       var(--text-muted);
  margin-top:  4px;
  line-height: 1.4;
}

/* ── TOGGLE ──────────────────────────────────────────────────── */
.toggle-wrap {
  width:         40px;
  height:        22px;
  background:    var(--concrete);
  border-radius: 11px;
  cursor:        pointer;
  position:      relative;
  transition:    background .2s;
  flex-shrink:   0;
}
.toggle-wrap.on { background: var(--gold); }

.toggle {
  position:       absolute;
  top:            3px;
  left:           3px;
  width:          16px;
  height:         16px;
  background:     var(--white);
  border-radius:  50%;
  transition:     left .2s;
  box-shadow:     0 1px 3px rgba(0,0,0,.2);
}
.toggle-wrap.on .toggle { left: 21px; }

/* ── MODAL ───────────────────────────────────────────────────── */
.modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.45);
  z-index:         400;
  display:         none;
  align-items:     center;
  justify-content: center;
  padding:         24px;
}
.modal-overlay.open { display: flex; }

.modal-box {
  background:    var(--white);
  border-radius: 6px;
  padding:       28px;
  width:         420px;
  max-width:     100%;
  box-shadow:    0 8px 32px rgba(0,0,0,.18);
  max-height:    90vh;
  overflow-y:    auto;
}

.modal-title {
  font-family:   var(--font-display);
  font-size:     20px;
  font-weight:   500;
  color:         var(--black);
  margin-bottom: 16px;
  letter-spacing: .02em;
}

.modal-footer {
  display:         flex;
  justify-content: flex-end;
  gap:             8px;
  margin-top:      20px;
  padding-top:     16px;
  border-top:      1px solid var(--offwhite);
}

/* ── TOAST ───────────────────────────────────────────────────── */
.toast {
  position:        fixed;
  bottom:          24px;
  right:           24px;
  padding:         10px 16px;
  border-radius:   6px;
  font-size:       12px;
  font-weight:     500;
  z-index:         500;
  display:         flex;
  align-items:     center;
  gap:             8px;
  opacity:         0;
  transform:       translateY(8px);
  transition:      all .2s;
  pointer-events:  none;
  max-width:       360px;
}
.toast.show   { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toast-green  { background: var(--green);  color: var(--white); }
.toast-red    { background: var(--red);    color: var(--white); }
.toast-amber  { background: var(--amber);  color: var(--white); }
.toast-blue   { background: var(--blue);   color: var(--white); }

/* ── BADGES / STATUS PILLS ───────────────────────────────────── */
.badge {
  display:      inline-flex;
  align-items:  center;
  padding:      2px 8px;
  border-radius: 10px;
  font-size:    10px;
  font-weight:  600;
  letter-spacing: .04em;
  white-space:  nowrap;
}

/* Generic semantic colours */
.badge-green  { background: var(--green-pale);  color: var(--green); }
.badge-amber  { background: var(--amber-pale);  color: var(--amber); }
.badge-red    { background: var(--red-pale);    color: var(--red); }
.badge-blue   { background: var(--blue-pale);   color: var(--blue); }
.badge-gold   { background: var(--gold-pale);   color: var(--gold); }
.badge-grey   { background: var(--offwhite);    color: #777; }

/* Common status names */
.status-active     { background: var(--green-pale);  color: var(--green); }
.status-complete   { background: var(--offwhite);     color: #777; }
.status-hold       { background: var(--amber-pale);   color: var(--amber); }
.status-cancelled  { background: var(--red-pale);     color: var(--red); }
.status-pending    { background: var(--amber-pale);   color: var(--amber); }
.status-approved   { background: var(--green-pale);   color: var(--green); }
.status-rejected   { background: var(--red-pale);     color: var(--red); }
.status-draft      { background: var(--blue-pale);    color: var(--blue); }
.status-issued     { background: var(--gold-pale);    color: var(--gold); }
.status-paid       { background: var(--green-pale);   color: var(--green); }

/* ── TABLES ──────────────────────────────────────────────────── */
.data-table {
  width:           100%;
  border-collapse: collapse;
  background:      var(--white);
  font-size:       12px;
}

.data-table th {
  background:     var(--black);
  color:          var(--white);
  font-size:      10px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding:        9px 12px;
  text-align:     left;
  white-space:    nowrap;
  border-right:   1px solid #2a2a2a;
}
.data-table th:last-child { border-right: none; }
.data-table th.num { text-align: right; }

.data-table td {
  padding:       8px 12px;
  border-bottom: 1px solid var(--offwhite);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--gold-pale); }
.data-table td.num { text-align: right; font-family: var(--font-mono); }

.table-wrap { overflow-x: auto; }

/* ── SEARCH / FILTER BAR ─────────────────────────────────────── */
.toolbar {
  background:    var(--white);
  border-bottom: 1px solid var(--offwhite);
  padding:       10px 24px;
  display:       flex;
  align-items:   center;
  gap:           10px;
  flex-wrap:     wrap;
}

.search-wrap {
  position:  relative;
  flex:      1;
  min-width: 180px;
  max-width: 320px;
}
.search-wrap input {
  width:         100%;
  padding:       7px 10px 7px 30px;
  border:        1px solid var(--concrete);
  border-radius: 4px;
  font-family:   var(--font-main);
  font-size:     12px;
  background:    var(--offwhite);
}
.search-wrap input:focus {
  outline:        2px solid var(--gold);
  outline-offset: -2px;
  background:     var(--white);
}
.search-icon {
  position:         absolute;
  left:             9px;
  top:              50%;
  transform:        translateY(-50%);
  color:            var(--concrete);
  font-size:        13px;
  pointer-events:   none;
}

.filter-chip {
  font-size:     11px;
  font-weight:   500;
  padding:       5px 12px;
  border:        1px solid var(--concrete);
  border-radius: 12px;
  background:    var(--white);
  color:         #777;
  cursor:        pointer;
  transition:    all .13s;
  white-space:   nowrap;
}
.filter-chip:hover  { border-color: var(--gold); color: var(--black); }
.filter-chip.active { background: var(--black); border-color: var(--black); color: var(--gold); }

/* ── QUILL PCG NOTE ──────────────────────────────────────────── */
/* Standard PCG/Quill note panel used across project modules */
.pcg-note-panel {
  background:    var(--white);
  border:        1px solid var(--offwhite);
  border-radius: 4px;
  overflow:      hidden;
  margin-top:    16px;
}

.pcg-note-label {
  background:     var(--black);
  padding:        8px 14px;
  font-size:      10px;
  font-weight:    600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--gold-light);
}

.pcg-note-body .ql-container { font-family: var(--font-main); font-size: 13px; }
.pcg-note-body .ql-editor    { min-height: 80px; padding: 12px 14px; }

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state {
  text-align:  center;
  padding:     48px 24px;
  color:       var(--concrete);
}
.empty-state-icon  { font-size: 32px; margin-bottom: 12px; }
.empty-state-title { font-size: 14px; font-weight: 500; color: #888; margin-bottom: 6px; }
.empty-state-desc  { font-size: 12px; color: var(--concrete); }

/* ── LOADING SKELETON ────────────────────────────────────────── */
.skeleton {
  background:            linear-gradient(90deg, var(--offwhite) 25%, #d8d6d2 50%, var(--offwhite) 75%);
  background-size:       200% 100%;
  animation:             skeleton-shimmer 1.4s infinite;
  border-radius:         3px;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── DIVIDER ─────────────────────────────────────────────────── */
.divider {
  border:        none;
  border-top:    1px solid var(--offwhite);
  margin:        16px 0;
}

/* ── PRINT ───────────────────────────────────────────────────── */
@media print {
  .app-header,
  .identity-bar,
  .identity-gap,
  .toolbar,
  .btn,
  .modal-overlay,
  .toast { display: none !important; }

  body { background: white; font-size: 11pt; }
  .page-body { padding: 0; max-width: none; }
}

/* ── ACCESSIBILITY ───────────────────────────────────────────── */
:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    transition-duration:  0.01ms !important;
  }
}