/* ============================================================
   Profilin Kassa — "Ledger & Seal"
   A finance app built around one real idea: every record here
   passes through a literal approval — so status reads as a
   stamped seal, not a generic pill. Cool paper, deep ledger ink,
   a brass seal accent, and a display serif reserved for money.
   ============================================================ */

:root {
  /* -- Palette (named, deliberate) -- */
  --ink:        #122019;   /* deep pine ink — text, sidebar, headers */
  --ink-soft:   #4B5C53;   /* secondary text */
  --paper:      #F1F4EF;   /* cool sage paper — page background */
  --paper-card: #FFFFFF;
  --brand:      #1F6B4F;   /* ledger emerald — primary, earnings */
  --brand-dark: #154C38;
  --seal:       #9C6B2E;   /* brass seal — accent, warnings, stamps */
  --seal-dark:  #7A5323;
  --rust:       #8C3B2E;   /* brick — rejected, expenses */
  --rust-dark:  #6E2E23;
  --gold:       #C9A227;   /* hairline ribbon accent */
  --info-ink:   #2B5C73;   /* muted teal-ink — submitted / info */

  --sidebar-w: 248px;
  --bottomnav-h: 62px;
  --radius: .85rem;
}

/* -- Type: display serif for money, grotesk for UI, mono for figures.
      Segoe UI / Arial fallback covers Azerbaijani ə ğ ı ş ü ç per-glyph
      if the webfont is ever missing a character. -- */
:root {
  --font-display: 'Fraunces', 'Segoe UI', Georgia, serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Segoe UI', ui-monospace, Consolas, monospace;
}

* { -webkit-tap-highlight-color: transparent; }

/* Hard safety net: nothing on this page should be able to force horizontal
   scroll. Without this, a single too-wide row can make position:fixed bars
   (bottom nav, topbar) size themselves against the scrollable width instead
   of the visual viewport, which is what was breaking the mobile layout. */
html, body { max-width: 100%; overflow-x: hidden; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
}
@media (min-width: 992px) { body { padding-bottom: 0; } }

h1, h2, h3, .h1, .h2, .h3, .page-title { font-family: var(--font-body); font-weight: 700; letter-spacing: -.01em; }

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2.5px solid var(--seal);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ---------------- Bootstrap re-skin (component-token overrides) ---------------- */
:root {
  --bs-body-font-family: var(--font-body);
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-border-radius: .6rem;
  --bs-border-radius-sm: .45rem;
  --bs-border-radius-lg: .9rem;
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--brand-dark);
}

.btn { min-height: 40px; font-weight: 600; letter-spacing: .01em; }
.btn-sm { min-height: 32px; }

.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--brand);
}
.btn-danger, .btn-outline-danger {
  --bs-btn-bg: var(--rust); --bs-btn-border-color: var(--rust); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--rust-dark); --bs-btn-hover-border-color: var(--rust-dark); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--rust-dark); --bs-btn-active-border-color: var(--rust-dark); --bs-btn-active-color: #fff;
}
.btn-outline-danger { --bs-btn-bg: transparent; --bs-btn-color: var(--rust); }
.btn-warning, .btn-outline-warning {
  --bs-btn-bg: var(--seal); --bs-btn-border-color: var(--seal); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--seal-dark); --bs-btn-hover-border-color: var(--seal-dark); --bs-btn-hover-color: #fff;
}
.btn-outline-warning { --bs-btn-bg: transparent; --bs-btn-color: var(--seal); --bs-btn-active-color: #fff; }
.btn-outline-dark { --bs-btn-color: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); }
.btn-outline-secondary { --bs-btn-color: var(--ink-soft); --bs-btn-border-color: #C7D0C8; --bs-btn-hover-bg: var(--ink-soft); --bs-btn-hover-border-color: var(--ink-soft); }

.text-success { color: var(--brand) !important; }
.text-danger  { color: var(--rust) !important; }
.text-primary { color: var(--brand) !important; }
.text-warning { color: var(--seal) !important; }
.text-info    { color: var(--info-ink) !important; }

.text-bg-success { background: var(--brand) !important; color: #fff !important; }
.text-bg-danger  { background: var(--rust) !important; color: #fff !important; }
.text-bg-primary { background: var(--brand) !important; color: #fff !important; }
.text-bg-warning { background: var(--seal) !important; color: #fff !important; }
.text-bg-info    { background: var(--info-ink) !important; color: #fff !important; }
.text-bg-secondary { background: #E3E8E1 !important; color: var(--ink-soft) !important; }
.text-bg-dark    { background: var(--ink) !important; color: #fff !important; }
.text-bg-light   { background: #EDF1EA !important; color: var(--ink-soft) !important; border-color: #DCE3D9 !important; }

.form-control, .form-select {
  min-height: 44px;
  border-color: #D5DDD2;
  background: #FCFDFB;
}
.form-control-sm, .form-select-sm { min-height: 34px; }
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(31, 107, 79, .15);
}
.form-label { font-weight: 600; font-size: .85rem; color: var(--ink-soft); }

.progress { background: #E3E8E1; }
.dropdown-menu { border-color: #E3E8E1; box-shadow: 0 6px 24px rgba(18,32,25,.12); }

/* ---------------- Top bar ---------------- */
.topbar {
  background: var(--ink);
  box-shadow: 0 2px 10px rgba(18,32,25,.25);
  min-height: 56px;
  border-bottom: 2px solid var(--gold);
}
.navbar-brand { font-family: var(--font-body); letter-spacing: -.01em; }
.notif-badge { font-size: .6rem; background: var(--seal) !important; }

/* ---------------- Layout ---------------- */
.app-wrap { display: flex; min-height: calc(100vh - 56px); }
.main-content { flex: 1; padding: 1rem; min-width: 0; }
@media (min-width: 992px) { .main-content { padding: 1.75rem 2.25rem; } }

/* ---------------- Sidebar: ledger tab with a bookmark ribbon ---------------- */
@media (min-width: 992px) {
  /* Bootstrap sets background-color:transparent !important on .offcanvas-lg
     at this breakpoint (that's how it collapses from modal panel to static
     sidebar) — match its specificity + !important to win instead of losing
     the ink fill silently. */
  .offcanvas-lg.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--ink) !important;
    min-height: calc(100vh - 56px);
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
  }
}
/* Base fill for every state (mobile drawer open/closed, mid-transition).
   The markup's real class is .offcanvas-lg, not .offcanvas — a selector
   mismatch here previously left mobile with Bootstrap's pale default
   offcanvas background under near-white sidebar-link text. */
.sidebar { background: var(--ink); }
.offcanvas-header.d-lg-none { color: #fff; }
.offcanvas-header .offcanvas-title { color: #fff; }
.offcanvas-header .btn-close { filter: invert(1); }

.sidebar-body { padding: 1rem .65rem; }
.sidebar-link {
  display: flex; align-items: center; gap: .75rem;
  color: #B9C6BC; padding: .65rem .85rem; border-radius: .5rem;
  font-weight: 500; margin-bottom: 2px; min-height: 44px;
  border-left: 3px solid transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.sidebar-link i { font-size: 1.15rem; width: 22px; text-align: center; }
.sidebar-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-link.active {
  background: rgba(201,162,39,.12);
  color: #fff;
  border-left-color: var(--gold);
}

/* ---------------- Mobile bottom nav ---------------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
  width: 100%; max-width: 100vw;
  display: flex; background: var(--paper-card);
  border-top: 1px solid #E3E8E1;
  box-shadow: 0 -2px 14px rgba(18,32,25,.08);
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: #8B978C; text-decoration: none; font-size: .68rem; min-height: 44px;
}
.bottom-nav a i { font-size: 1.3rem; }
.bottom-nav a.active { color: var(--brand); font-weight: 600; }
.bottom-nav-dot {
  position: absolute; top: 8px; right: 50%; margin-right: -14px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--rust);
}

/* ---------------- Cards ---------------- */
.card {
  border: 1px solid #E7ECE4;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(18,32,25,.05);
}
.card-header {
  background: var(--paper-card);
  border-bottom: 1px solid #EEF2EC;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  font-weight: 700;
  color: var(--ink);
}

.stat-card {
  border: 1px solid #E7ECE4;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(18,32,25,.05);
  transition: transform .12s ease, box-shadow .12s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(18,32,25,.09); }
.stat-card .stat-icon {
  width: 46px; height: 46px; border-radius: .7rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.stat-value {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 1.55rem; font-weight: 600; line-height: 1.15;
}
.stat-label { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; }

/* ---------------- Tables -> mobile cards ---------------- */
.table-responsive-cards table { margin-bottom: 0; }
.table thead th {
  font-family: var(--font-mono);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); font-weight: 600;
  border-bottom: 2px solid var(--ink) !important;
}
.table td, .table th { vertical-align: middle; }
.table > :not(caption) > * > * { background: transparent; }
.table-hover > tbody > tr:hover > * { background: rgba(31,107,79,.05); }

[data-href] { cursor: pointer; }

/* monetary figures get tabular mono alignment wherever fmt_money renders in a table cell */
.table td.text-end, td.td-amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

@media (max-width: 767.98px) {
  .table-responsive-cards thead { display: none; }
  .table-responsive-cards tbody tr {
    display: block; background: var(--paper-card); border: 1px solid #E7ECE4; border-radius: .75rem;
    box-shadow: 0 1px 3px rgba(18,32,25,.05); margin-bottom: .75rem; padding: .5rem .85rem;
  }
  .table-responsive-cards tbody td {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    border: 0; padding: .4rem 0; font-size: .9rem;
  }
  .table-responsive-cards tbody td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-weight: 600; color: var(--ink-soft); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  }
  .table-responsive-cards tbody td.td-actions::before { content: ''; }
  .table-responsive-cards tbody td.td-actions { justify-content: flex-end; }
}

/* ---------------- List rows (recent transactions / approvals / notifications) ----------------
   Pattern: <div class="d-flex ... "><div class="min-w-0">description</div>
   <div class="text-end flex-shrink-0">amount + stamp</div></div>. The right
   column's content (amount line + a status stamp) is what actually decides
   its width, so cap it and force the left column to truly give way instead
   of both sides claiming their natural width and quietly overflowing. */
.list-group-item .min-w-0 {
  flex: 1 1 0%;
  overflow: hidden;
}
.list-group-item .text-end.flex-shrink-0 {
  max-width: 42%;
}

/* ---------------- Signature element: seal-stamp status badges ----------------
   Every record in this app moves through a real approval stamp, so status
   reads as one: a rotated ink-ring mark rather than a flat pill. */
.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .3rem .7rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: normal;   /* wrap rather than force a parent to overflow — status
                             labels are localized and vary a lot in length */
  text-align: center;
  max-width: 100%;
  position: relative;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.stamp::after {
  content: '';
  position: absolute; inset: -3px;
  border: 1px solid currentColor;
  border-radius: inherit;
  opacity: .3;
}
.stamp-draft                 { color: var(--ink-soft); }
.stamp-submitted              { color: var(--info-ink); transform: rotate(-2deg); }
.stamp-approved               { color: var(--brand); transform: rotate(-2deg); }
.stamp-rejected                { color: var(--rust); transform: rotate(2deg); }
.stamp-correction_requested   { color: var(--seal); transform: rotate(-1deg); }
.stamp-reversed                { color: var(--ink); }
.stamp-active                  { color: var(--brand); }
.stamp-on_hold                 { color: var(--seal); transform: rotate(-1deg); }
.stamp-completed               { color: var(--info-ink); }
.stamp-archived                 { color: var(--ink-soft); }

/* Admin-only task pipeline stamps (prefixed stamp-task-* so they never collide
   with the finance-workflow / project-status stamps above). */
.stamp-task-pending       { color: var(--ink-soft); }
.stamp-task-assigned      { color: var(--info-ink); transform: rotate(-2deg); }
.stamp-task-in_progress   { color: var(--brand); transform: rotate(-1deg); }
.stamp-task-under_review  { color: var(--seal); transform: rotate(-2deg); }
.stamp-task-delayed       { color: var(--rust); transform: rotate(2deg); }
.stamp-task-completed     { color: var(--brand); }
.stamp-task-cancelled     { color: var(--ink); }

/* Task priority: a small colored dot + label, distinct from the seal-stamp
   motif (priority is a plain attribute, not a workflow state). */
.task-priority { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; }
.task-priority::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.task-priority-low { color: var(--ink-soft); }
.task-priority-medium { color: var(--seal); }
.task-priority-high { color: var(--rust); }

/* ---------------- Touch targets & sticky actions ---------------- */
.sticky-actions {
  position: sticky; bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 8px);
  background: var(--paper-card); border-radius: .75rem; padding: .75rem;
  box-shadow: 0 -2px 14px rgba(18,32,25,.12); z-index: 10;
  border: 1px solid #E7ECE4;
}
@media (min-width: 992px) { .sticky-actions { position: static; box-shadow: none; padding: 0; border: 0; } }

/* ---------------- Empty state ---------------- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); }
.empty-state i { font-size: 3rem; opacity: .3; color: var(--seal); }

/* ---------------- Charts ---------------- */
.chart-box { position: relative; height: 300px; }
@media (max-width: 575.98px) { .chart-box { height: 240px; } }

/* ---------------- Filter bar ---------------- */
.filter-bar {
  background: var(--paper-card);
  border: 1px solid #E7ECE4;
  border-radius: var(--radius);
  padding: .85rem;
  box-shadow: 0 1px 3px rgba(18,32,25,.05);
}

/* ---------------- Login ---------------- */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 15% 15%, rgba(201,162,39,.14), transparent 45%),
    linear-gradient(160deg, var(--ink) 0%, #1B3226 55%, var(--brand-dark) 100%);
  padding: 1rem;
}
.login-card { width: 100%; max-width: 420px; border-radius: 1.1rem; border: 0; }
.login-card h1 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; font-size: 1.6rem; color: var(--ink); }

.login-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  color: var(--seal); font-size: 1.9rem;
  border: 2px solid var(--seal);
  position: relative;
}
.login-seal::before {
  content: ''; position: absolute; inset: -6px;
  border: 1px solid var(--seal); border-radius: 50%; opacity: .4;
}

/* ---------------- Loading state ---------------- */
.btn .spinner-border { display: none; }
.btn.loading .spinner-border { display: inline-block; }
.btn.loading .btn-text { opacity: .6; }

@media print {
  .topbar, .sidebar, .bottom-nav, .filter-bar, .btn, .pagination, .sticky-actions { display: none !important; }
  .main-content { padding: 0; }
  body { background: #fff; padding-bottom: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}