/* Atelier global theme — v2 UI.
   Adapted from servicerequest-webapp/app/static/css/atelier.css so the
   two apps share one visual language: parchment surfaces, ink text,
   vermillion accent, Fraunces display + Inter Tight body, zero radius.
   Loaded before pm.css (PM-specific layout layer) in v2/base.html.

   Differences from the SR copy:
   - no .sr-* side-nav rules (v2 has no side nav)
   - body does not lock overflow (v2 pages scroll the document) */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Inter+Tight:ital,wght@0,400..700;1,400..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);
  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Inter Tight', system-ui, -apple-system, sans-serif;
  --bs-border-radius: 0;
}

html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
}
body > main { flex: 1 1 auto; background: var(--paper); }
body > footer.footer { flex: 0 0 auto; }

/* No raw Bootstrap-white panels — everything sits on parchment. */
.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; }
.table { background-color: transparent !important; }
.table > :not(caption) > * > * { background-color: transparent !important; }

/* ----------- top navbar ----------- */
body > nav.navbar {
  background: var(--ink) !important;
  border-bottom: 2px solid var(--accent);
  font-family: var(--serif);
  padding-top: 0.45rem; padding-bottom: 0.45rem;
}
body > nav .navbar-brand {
  color: var(--paper) !important;
  font-weight: 500; letter-spacing: 0.04em;
}
body > nav .navbar-brand i { color: var(--accent); }
body > nav .nav-link {
  color: var(--rule-2) !important;
  font-style: italic;
  font-size: 0.98rem;
  padding-left: 0.85rem; padding-right: 0.85rem;
}
body > nav .nav-link:hover { color: var(--paper) !important; }
body > nav .nav-link.active {
  color: var(--paper) !important;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
body > nav .dropdown-menu {
  background: var(--paper); border: 1px solid var(--ink); border-radius: 0;
  font-family: var(--sans); font-style: normal;
}
body > nav .dropdown-item { color: var(--ink); }
body > nav .dropdown-item:hover { background: var(--paper-2); color: var(--accent); }
body > nav .dropdown-item.active { background: var(--paper-3); color: var(--ink); }
body > nav .dropdown-divider { border-color: var(--rule); }
body > nav .navbar-toggler { border-color: var(--ink-2); }
body > nav .navbar-toggler:focus { box-shadow: 0 0 0 2px var(--accent-soft); }

/* ----------- footer ----------- */
body > footer.footer {
  background: var(--paper-2) !important;
  color: var(--ink-2) !important;
  border-top: 1px solid var(--rule);
  font-family: var(--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; }

/* ----------- buttons ----------- */
.btn { border-radius: 0 !important; font-family: var(--sans); }
.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;
}
.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-outline-secondary {
  border-color: var(--ink-2) !important;
  color: var(--ink-2) !important;
  background: transparent !important;
}
.btn-outline-secondary:hover {
  background: var(--ink-2) !important;
  color: var(--paper) !important;
}
.btn-light {
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  color: var(--ink) !important;
}
.btn-light:hover { background: var(--paper-3) !important; }
.btn-danger {
  background: var(--accent) !important;
  border-color: var(--accent-2) !important;
  color: var(--paper) !important;
}
.btn-danger:hover { background: var(--accent-2) !important; }
.btn-outline-danger { border-color: var(--accent) !important; color: var(--accent) !important; }
.btn-outline-danger:hover { background: var(--accent) !important; color: var(--paper) !important; }
.btn-success { background: #4f7233 !important; border-color: #3a5424 !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; }
a { color: var(--accent-2); }
a:hover { color: var(--accent); }

/* ----------- nav tabs (contextual tabs 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: var(--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 .nav-link { border-radius: 0 !important; }
.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: var(--sans);
}
.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: var(--sans); font-size: 0.85rem; }
.form-text { color: var(--muted); }
.form-check-input { border-radius: 0 !important; border-color: var(--rule); }
.form-check-input:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.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: var(--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);
  --bs-table-color: var(--ink);
  --bs-table-striped-color: var(--ink);
  --bs-table-hover-color: var(--ink);
}
.table thead th {
  font-family: var(--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 ----------- */
main h1, main h2, main h3, main h4, main h5, main h6 {
  font-family: var(--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: var(--sans);
}
.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: var(--sans);
  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; }

/* ----------- 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: var(--serif);
}
.modal-title { color: var(--ink); font-weight: 500; }
.modal-footer { background: var(--paper-2) !important; border-top: 1px solid var(--rule) !important; }

/* ----------- toasts ----------- */
.toast {
  background: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
}
.toast-header {
  background: var(--paper-3) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  font-family: var(--serif);
}

/* ----------- 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);
  border-radius: 0 !important;
}
.pagination .page-item.active .page-link {
  background: var(--accent);
  border-color: var(--accent-2);
  color: var(--paper);
}

/* ----------- breadcrumb ----------- */
.breadcrumb { font-family: var(--serif); font-style: italic; color: var(--muted); margin-bottom: 0.35rem; }
.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); }

/* ----------- misc ----------- */
.text-muted { color: var(--muted) !important; }
.text-secondary { color: var(--ink-2) !important; }
hr { border-color: var(--rule); opacity: 1; }
.spinner-border, .spinner-grow { color: var(--accent); }
.dropdown-menu { border-radius: 0 !important; }
.btn-close:focus { box-shadow: 0 0 0 2px var(--accent-soft); }