/* static/css/styles.css  (FULL FILE — paste/replace) */

/* =========================
   Theme tokens (Light/Dark)
   ========================= */

:root{
  --kf-bg: #f5f7fa;
  --kf-surface-1: #ffffff;
  --kf-surface-2: #fbfbfc;
  --kf-border: #dee2e6;

  --kf-text: #111827;
  --kf-muted: #6c757d;

  --kf-nav-bg: #1f3e5a;
  --kf-nav-link: #ffffff;
  --kf-nav-link-hover: #d1e3ff;

  --kf-sidebar-bg: #f8f9fa;
  --kf-sidebar-link: #333333;
  --kf-sidebar-link-hover: #1f3e5a;

  --kf-card-shadow: 0 1px 0 rgba(0,0,0,.02);
}

/* Dark mode palette */
html[data-bs-theme="dark"]{
  --kf-bg: #0b1220;        /* deep slate */
  --kf-surface-1: #0f172a; /* card */
  --kf-surface-2: #111c33; /* slightly raised */
  --kf-border: #233043;

  --kf-text: #e5e7eb;
  --kf-muted: rgba(229,231,235,.72);

  --kf-nav-bg: #0b1220;
  --kf-nav-link: #e5e7eb;
  --kf-nav-link-hover: #ffffff;

  --kf-sidebar-bg: #0b1220;
  --kf-sidebar-link: #cbd5e1;
  --kf-sidebar-link-hover: #ffffff;

  --kf-card-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* =========================
   App base
   ========================= */

body {
  background-color: var(--kf-bg);
  color: var(--kf-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

footer.kf-footer {
  background-color: var(--kf-surface-1);
}

/* =========================
   Navbar
   ========================= */

.kf-navbar {
  background-color: var(--kf-nav-bg) !important;
}

.kf-navbar .navbar-brand {
  font-weight: 600;
}

.kf-navbar .nav-link {
  color: var(--kf-nav-link) !important;
}

.kf-navbar .nav-link:hover,
.kf-navbar .nav-link:focus {
  color: var(--kf-nav-link-hover) !important;
}

/* =========================
   Sidebar
   ========================= */

.sidebar,
.kf-sidebar {
  background-color: var(--kf-sidebar-bg);
  border-right: 1px solid var(--kf-border);
  min-height: 100vh;
}

.sidebar .nav-link,
.kf-sidebar .nav-link {
  color: var(--kf-sidebar-link);
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus,
.kf-sidebar .nav-link:hover,
.kf-sidebar .nav-link:focus {
  color: var(--kf-sidebar-link-hover);
}

/* Make accordion match theme */
.kf-sidebar .accordion{
  --bs-accordion-bg: var(--kf-sidebar-bg);
  --bs-accordion-border-color: var(--kf-border);
  --bs-accordion-btn-bg: var(--kf-sidebar-bg);
  --bs-accordion-btn-color: var(--kf-text);
  --bs-accordion-active-bg: var(--kf-surface-2);
  --bs-accordion-active-color: var(--kf-text);
}

.kf-sidebar .accordion-button:focus{
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}

/* =========================
   Formset + misc
   ========================= */

input[name$='-DELETE'] { display: none; }

.qty-input { max-width: 6rem; }

/* =========================
   Shared “card” system (fixes your rq-card/po-card staying white)
   ========================= */

.kf-card,
.rcv-card,
.rq-card,
.po-card {
  border: 1px solid var(--kf-border);
  border-radius: .75rem;
  background: var(--kf-surface-1);
  box-shadow: var(--kf-card-shadow);
}

/* Force dark mode override even if some templates define .rq-card{background:#fff} later */
html[data-bs-theme="dark"] .kf-card,
html[data-bs-theme="dark"] .rcv-card,
html[data-bs-theme="dark"] .rq-card,
html[data-bs-theme="dark"] .po-card {
  background: var(--kf-surface-1) !important;
  border-color: var(--kf-border) !important;
}

.kf-card-header,
.rcv-card-header,
.rq-card-header,
.po-card-header {
  border-bottom: 1px solid var(--kf-border);
  background: transparent;
}

/* helpers */
.kf-help,
.rcv-help,
.rq-help,
.po-help {
  font-size: .875rem;
  color: var(--kf-muted);
}

.kf-table td, .kf-table th,
.rcv-table td, .rcv-table th,
.rq-table td, .rq-table th,
.po-table td, .po-table th {
  vertical-align: middle;
}

/* pills / monos */
.rcv-pill, .rq-pill, .po-pill { border-radius: 999px; }
.rcv-mono, .kc-mono, .po-mono { font-variant-numeric: tabular-nums; }

/* Search input patterns (rq/po/rcv) */
.rcv-search, .rq-search, .po-search { position: relative; }
.rcv-search .form-control, .rq-search .form-control, .po-search .form-control { padding-left: 2.25rem; }
.rcv-search .rcv-search-icon,
.rq-search .rq-search-icon,
.po-search .po-search-icon {
  position: absolute; left: .75rem; top: 50%;
  transform: translateY(-50%);
  color: var(--kf-muted);
  pointer-events: none;
}

/* =========================
   Tables (make them readable in dark mode)
   ========================= */

html[data-bs-theme="dark"] .table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--kf-text);
  --bs-table-border-color: var(--kf-border);
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-bg: rgba(255,255,255,.05);
}

html[data-bs-theme="dark"] .table thead th{
  color: var(--kf-text);
}

/* =========================
   Select2 (dark mode polish)
   ========================= */

html[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple{
  background-color: var(--kf-surface-2) !important;
  border-color: var(--kf-border) !important;
  color: var(--kf-text) !important;
}

html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered{
  color: var(--kf-text) !important;
}

html[data-bs-theme="dark"] .select2-dropdown{
  background-color: var(--kf-surface-1) !important;
  border-color: var(--kf-border) !important;
}

html[data-bs-theme="dark"] .select2-results__option{
  color: var(--kf-text) !important;
}

html[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
  background-color: rgba(255,255,255,.06) !important;
  color: var(--kf-text) !important;
}

/* =========================
   Legacy timeline (keep)
   ========================= */

.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #0d6efd;
}
.timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.timeline-dot {
  position: absolute;
  left: 0.55rem;
  top: 0.4rem;
  width: 0.75rem;
  height: 0.75rem;
  background-color: #0d6efd;
  border-radius: 50%;
}
.timeline-content { margin-left: 2rem; }

/* =========================
   Audit dropdown (details/summary) + PO timeline (shared)
   ========================= */

details.kf-details > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.kf-details > summary::-webkit-details-marker { display: none; }

.kf-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--kf-border);
  background: var(--kf-surface-1);
  font-size: .8rem;
  line-height: 1;
  transition: transform .15s ease;
}
details[open] .kf-chevron { transform: rotate(180deg); }

.po-timeline-card {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--kf-border);
  border-radius: .5rem;
  background-color: var(--kf-surface-1);
}

.po-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding-left: 1.5rem;
}

.po-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: rgba(148,163,184,.35);
}

.po-timeline-item { position: relative; margin-bottom: 10px; }

.po-timeline-dot {
  position: absolute;
  left: -1px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #0d6efd;
}

.po-timeline-body {
  padding: .35rem .5rem;
  border-radius: .25rem;
  background-color: var(--kf-surface-2);
  font-size: .875rem;
}

.po-timeline-body:hover { background-color: rgba(148,163,184,.12); }

.po-timeline-meta {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--kf-muted);
  margin-bottom: .15rem;
}

.po-badge {
  display: inline-block;
  padding: .1rem .4rem;
  border-radius: .5rem;
  font-size: .7rem;
  color: #fff;
}
.po-badge-requisition { background-color: #0d6efd; }
.po-badge-po          { background-color: #198754; }
.po-badge-payment     { background-color: #0dcaf0; color: #000; }
.po-badge-issuance    { background-color: #ffc107; color: #000; }
.po-badge-other       { background-color: #6c757d; }

/* Notes widget styling (optional) */
.kf-notes {
  border-radius: .75rem;
  border: 1px solid var(--kf-border);
  background: var(--kf-surface-2);
  padding: .75rem .9rem;
  box-shadow: var(--kf-card-shadow);
  width: 100%;
  color: var(--kf-text);
}
.kf-notes:focus {
  background: var(--kf-surface-1);
  border-color: rgba(13,110,253,.35);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.10);
  outline: none;
}



.kf-navbar .navbar-nav .nav-link{
  position: relative;
  border-radius: 999px;
  padding: .35rem .75rem;
  margin-right: .25rem;
  transition: background-color .15s ease, color .15s ease, transform .05s ease;
}

/* hover/focus */
.kf-navbar .navbar-nav .nav-link:hover,
.kf-navbar .navbar-nav .nav-link:focus{
  background-color: rgba(255,255,255,.10);
  text-decoration: none;
}

.kf-navbar .navbar-nav .nav-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
}

/* active (Bootstrap adds .active) */
.kf-navbar .navbar-nav .nav-link.active{
  background-color: rgba(255,255,255,.18);
  color: var(--kf-nav-link) !important;
  font-weight: 600;
}

/* subtle "press" feedback */
.kf-navbar .navbar-nav .nav-link:active{
  transform: translateY(1px);
}

/* dark theme tuning (slightly softer pill bg) */
html[data-bs-theme="dark"] .kf-navbar .navbar-nav .nav-link:hover,
html[data-bs-theme="dark"] .kf-navbar .navbar-nav .nav-link:focus{
  background-color: rgba(255,255,255,.08);
}

html[data-bs-theme="dark"] .kf-navbar .navbar-nav .nav-link.active{
  background-color: rgba(255,255,255,.12);
}


html[data-bs-theme="dark"] .po-timeline-card {
  background-color: var(--kf-surface-1) !important;
  border-color: var(--kf-border) !important;
}

html[data-bs-theme="dark"] .po-timeline-body {
  background-color: var(--kf-surface-2) !important;
  color: var(--kf-text) !important;
}

html[data-bs-theme="dark"] .po-timeline::before {
  background-color: rgba(148,163,184,.35) !important;
}

html[data-bs-theme="dark"] .po-timeline-meta {
  color: var(--kf-muted) !important;
}

html[data-bs-theme="dark"] .kf-chevron {
  background: var(--kf-surface-1) !important;
  border-color: var(--kf-border) !important;
  color: var(--kf-text) !important;
}

/* If any templates force grey text via Bootstrap utility classes */
html[data-bs-theme="dark"] .text-muted {
  color: var(--kf-muted) !important;
}

/* If any templates force white surfaces with Bootstrap helpers */
html[data-bs-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .bg-light {
  background-color: var(--kf-surface-1) !important;
}
/* Mobile global overrides */
@media (max-width: 767.98px) {
  /* reduce horizontal padding so pages fit */
  .container-fluid { padding-left: .5rem; padding-right: .5rem; }

  /* hide long welcome text */
  .kf-navbar .navbar-text { display: none; }

  /* make buttons easier on mobile */
  .btn { padding-top: .5rem; padding-bottom: .5rem; }

  /* slightly smaller tables + prevent layout blowups */
  table.table { font-size: 0.9rem; }
  th, td { white-space: nowrap; } /* enables horizontal scroll instead of wrapping into 6 lines */

  /* keep your card layouts from feeling cramped */
  .po-card, .card { border-radius: .75rem; }
}

/* smoother horizontal scrolling on iOS */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* offcanvas width tweak (optional) */
.offcanvas { width: 86vw; max-width: 360px; }
/* =========================
   Auth pages (login/reset)
   ========================= */

.kf-auth-wrap { max-width: 420px; margin: 0 auto; }

.kf-auth-card {
  border: 1px solid var(--kf-border);
  border-radius: 1rem;
  background: var(--kf-surface-1);
  box-shadow: var(--kf-card-shadow);
}

.kf-auth-title { font-size: 1.25rem; margin: 0 0 .25rem; }
.kf-auth-subtitle { color: var(--kf-muted); margin: 0 0 1.25rem; }

/* Style default Django form output (form.as_p) */
.kf-auth-card form p { margin-bottom: 1rem; }
.kf-auth-card form p label { display: block; font-weight: 600; margin-bottom: .35rem; }

.kf-auth-card form p input,
.kf-auth-card form p select,
.kf-auth-card form p textarea {
  display: block;
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--kf-border);
  border-radius: .5rem;
  background: var(--kf-surface-1);
  color: var(--kf-text);
  outline: none;
}

.kf-auth-card form p input:focus,
.kf-auth-card form p select:focus,
.kf-auth-card form p textarea:focus {
  border-color: rgba(13,110,253,.45);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.12);
}

/* Django errors */
.kf-auth-card .errorlist { list-style: none; padding-left: 0; margin: .35rem 0 0; }
.kf-auth-card .errorlist li { color: #dc3545; font-size: .875rem; }

/* Django helptext */
.kf-auth-card .helptext { display: block; margin-top: .35rem; font-size: .875rem; color: var(--kf-muted); }

/* Auth form polish (template uses .kf-auth-form) */
.kf-auth-form p { margin-bottom: 1rem; }
.kf-auth-form label { display:block; font-weight:600; margin-bottom:.35rem; }

.kf-auth-form input,
.kf-auth-form select,
.kf-auth-form textarea {
  display:block;
  width:100%;
  padding:.65rem .85rem;
  border:1px solid var(--kf-border);
  border-radius: 1rem;                 /* rounded inputs */
  background: var(--kf-surface-1);
  color: var(--kf-text);
}

.kf-auth-form input:focus,
.kf-auth-form select:focus,
.kf-auth-form textarea:focus {
  outline:none;
  border-color: rgba(13,110,253,.45);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.12);
}

.kf-auth-form .errorlist { list-style:none; padding-left:0; margin:.35rem 0 0; }
.kf-auth-form .errorlist li { color:#dc3545; font-size:.875rem; }