html {
  font-size: 14px;
}

:root {
  --snowman-blue: #165293;
  --snowman-dark-blue: #0b315d;
  --snowman-light-blue: #eaf4fb;
  --snowman-pale-blue: #f5fafe;
  --snowman-border: #dce6ee;
  --snowman-text: #253746;
}

body {
  color: var(--snowman-text);
  background: var(--snowman-pale-blue);
}

.app-container {
  max-width: 1600px;
  margin-inline: auto;
}

.snowman-navbar {
  background: var(--snowman-blue);
  box-shadow: 0 4px 16px rgba(11, 49, 93, 0.18);
}

.snowman-navbar .navbar-brand,
.snowman-navbar .nav-link {
  color: #fff;
}

.snowman-navbar .nav-link:hover,
.snowman-navbar .nav-link:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 0.4rem;
}

.snowman-navbar .navbar-toggler {
  background: #fff;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-logo {
  width: 120px;
  height: 42px;
  padding: 0.2rem 0.45rem;
  object-fit: contain;
  background: #fff;
  border-radius: 0.35rem;
}

.nav-brand-fallback {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.nav-product-name {
  padding-left: 0.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 0.95rem;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #fff;
}

.user-identity {
  display: flex;
  flex-direction: column;
  text-align: right;
  line-height: 1.2;
}

.user-identity small {
  color: rgba(255, 255, 255, 0.75);
}

.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 1.5rem;
}

.page-heading h1 {
  margin: 0.15rem 0;
  color: var(--snowman-dark-blue);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
}

.page-heading p {
  margin: 0;
  color: #6c7a86;
}

.eyebrow {
  color: var(--snowman-blue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.placeholder-panel {
  padding: 2rem;
  border: 1px solid var(--snowman-border);
  border-radius: 0.85rem;
  background: #fff;
  box-shadow: 0 8px 24px rgba(11, 49, 93, 0.06);
}

.placeholder-panel h2 {
  color: var(--snowman-dark-blue);
  font-size: 1.2rem;
}

.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.kpi-card { min-height: 132px; padding: 1.1rem; border: 1px solid var(--snowman-border); border-top: 3px solid var(--snowman-blue); border-radius: 0.75rem; background: #fff; box-shadow: 0 6px 20px rgba(11, 49, 93, 0.05); }
.kpi-card span, .kpi-card small { display: block; color: #6c7a86; }
.kpi-card strong { display: block; margin: 0.4rem 0 0.15rem; color: var(--snowman-dark-blue); font-size: 1.8rem; }
.kpi-card.kpi-amber { border-top-color: #d89000; }
.kpi-card.kpi-green { border-top-color: #198754; }
.kpi-card.kpi-red { border-top-color: #dc3545; }
.central-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-card .kpi-money { font-size: 1.25rem; }
.bar-chart, .status-chart { display: grid; gap: 0.7rem; }
.bar-group { display: grid; grid-template-columns: 55px 1fr; gap: 0.25rem 0.7rem; align-items: center; }
.bar-group > span { grid-row: span 2; color: #6c7a86; font-size: 0.78rem; }
.bar-track { height: 0.55rem; overflow: hidden; border-radius: 999px; background: #edf2f7; }
.bar-track i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--snowman-blue); }
.bar-track .bar-ap { background: #d89000; }
.bar-track .bar-ar { background: #1687b8; }
.chart-legend { display: flex; justify-content: end; gap: 1rem; margin-top: 0.8rem; color: #6c7a86; font-size: 0.8rem; }
.chart-legend i { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.25rem; border-radius: 2px; }
.legend-ap { background: #d89000; }.legend-ar { background: #1687b8; }
.status-chart > div { display: grid; grid-template-columns: 110px 1fr 45px; align-items: center; gap: 0.7rem; }
.status-chart strong { text-align: right; }
.ageing-list { display: grid; gap: 0.55rem; }
.ageing-list > div { display: grid; grid-template-columns: 1fr 55px minmax(120px, auto); gap: 0.75rem; padding: 0.6rem; border-bottom: 1px solid var(--snowman-border); }
.ageing-list strong, .ageing-list b { text-align: right; }
.due-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.due-grid > div { display: grid; gap: 0.25rem; padding: 1rem; border-radius: 0.65rem; color: #166534; background: #f0fdf4; }
.due-grid strong { font-size: 1.7rem; }
.due-grid .due-overdue { color: #991b1b; background: #fff1f2; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dashboard-filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 0.85rem; }
.dashboard-filter label { display: block; margin-bottom: 0.3rem; color: #536575; font-size: 0.78rem; font-weight: 700; }
.dashboard-filter .filter-actions { margin: 0; }
.india-map { position: relative; width: min(100%, 560px); aspect-ratio: 5 / 5.6; margin: 0 auto; background: radial-gradient(circle, #f8fcff 0, #eef7fc 70%); border: 1px solid var(--snowman-border); border-radius: 1rem; }
.india-map-shape { position: absolute; inset: 3%; width: 94%; height: 94%; filter: drop-shadow(0 5px 8px rgba(6, 59, 104, 0.12)); }
.india-map-shape path { fill: #dceef8; stroke: #8ab7d4; stroke-width: 1; }
.map-marker { position: absolute; z-index: 2; width: 13px; height: 13px; padding: 0; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; background: var(--snowman-blue); box-shadow: 0 0 0 2px rgba(7, 90, 156, 0.3); }
.map-marker:focus { z-index: 5; outline: 3px solid rgba(7, 90, 156, 0.35); outline-offset: 3px; }
.marker-north { background: #075a9c; }.marker-south { background: #16845b; }.marker-east { background: #d89000; }.marker-west { background: #7a4fb3; }
.map-popup { position: absolute; z-index: 10; left: 16px; top: -12px; display: none; width: 220px; padding: 0.7rem; color: var(--snowman-text); text-align: left; border: 1px solid var(--snowman-border); border-radius: 0.55rem; background: #fff; box-shadow: 0 10px 28px rgba(11, 49, 93, 0.2); }
.map-marker:hover .map-popup, .map-marker:focus .map-popup { display: grid; gap: 0.15rem; }
.map-popup strong, .map-popup small { display: block; }.map-popup small { margin-bottom: 0.3rem; color: var(--snowman-muted); }.map-popup span { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.76rem; }
.map-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 0.75rem; font-size: 0.8rem; }.map-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 0.25rem; border-radius: 50%; }
.warehouse-pending-chart { display: grid; gap: 0.55rem; }.warehouse-pending-chart > div { display: grid; grid-template-columns: 70px 1fr 35px; align-items: center; gap: 0.6rem; }.warehouse-pending-chart strong { text-align: right; }.stacked-track { display: flex; height: 0.65rem; overflow: hidden; border-radius: 99px; background: #edf2f6; }.stacked-track i { display: block; height: 100%; }.stacked-track .bar-ap { background: var(--snowman-blue); }.stacked-track .bar-ar { background: #16845b; }
.forecast-notice { margin-bottom: 1rem; padding: 0.75rem 0.9rem; color: #536575; border-left: 4px solid var(--snowman-blue); background: var(--snowman-pale-blue); font-size: 0.85rem; }
.cash-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }.cash-summary-grid > div { display: grid; gap: 0.2rem; padding: 0.8rem; border: 1px solid var(--snowman-border); border-radius: 0.65rem; }.cash-summary-grid span { color: var(--snowman-muted); font-size: 0.76rem; text-transform: uppercase; }.cash-summary-grid a { font-size: 0.78rem; }.cash-positive { color: #166534 !important; }.cash-negative { color: #991b1b !important; }.cash-held { color: #8a5a00 !important; }.cash-flow-table tfoot { border-top: 2px solid var(--snowman-dark-blue); }
.dashboard-panel { min-width: 0; padding: 1.25rem; border: 1px solid var(--snowman-border); border-radius: 0.8rem; background: #fff; box-shadow: 0 6px 20px rgba(11, 49, 93, 0.05); }
.dashboard-panel-wide { grid-column: 1 / -1; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.panel-heading h2 { margin: 0; color: var(--snowman-dark-blue); font-size: 1.05rem; }
.status-badge, .type-badge { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.type-ap { color: #854d0e; background: #fef3c7; }
.type-ar { color: #075985; background: #e0f2fe; }
.status-draft { color: #475569; background: #e2e8f0; }
.status-submitted, .status-underreview { color: #075985; background: #e0f2fe; }
.status-onhold { color: #854d0e; background: #fef3c7; }
.status-rejected { color: #991b1b; background: #fee2e2; }
.status-approved, .status-readyforexport { color: #166534; background: #dcfce7; }
.overdue-summary { display: grid; gap: 0.25rem; padding: 1rem; border-radius: 0.65rem; color: #991b1b; background: #fff1f2; }
.overdue-summary strong { font-size: 2rem; }
.overdue-summary b { margin-top: 0.5rem; }
.panel-note, .empty-state { margin: 1rem 0 0; color: #6c7a86; }
.compact-list { display: grid; gap: 0.55rem; }
.compact-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem; border: 1px solid var(--snowman-border); border-radius: 0.5rem; color: inherit; text-decoration: none; }
.compact-list small { display: block; color: #6c7a86; }
.insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.insight-card { padding: 1rem; border: 1px solid var(--snowman-border); border-left: 3px solid var(--snowman-blue); border-radius: 0.55rem; color: inherit; text-decoration: none; background: var(--snowman-pale-blue); }
.insight-card span, .insight-card small { display: block; color: var(--snowman-blue); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.insight-card strong { display: block; margin-top: 0.3rem; }
.insight-card p { margin: 0.35rem 0; color: #6c7a86; font-size: 0.875rem; }

.filter-panel { padding: 1rem; border: 1px solid var(--snowman-border); border-radius: 0.75rem; background: #fff; }
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem; }
.filter-grid label { margin-bottom: 0.3rem; color: #536575; font-size: 0.78rem; font-weight: 700; }
.filter-search { grid-column: span 2; }
.filter-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
.invoice-table thead th { color: #536575; background: var(--snowman-light-blue); font-size: 0.78rem; text-transform: uppercase; white-space: nowrap; }
.pagination-shell { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; color: #6c7a86; }

.invoice-detail-header { display: flex; align-items: start; justify-content: space-between; gap: 2rem; margin-bottom: 1.25rem; }
.detail-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; }
.detail-title-row h1 { margin: 0; color: var(--snowman-dark-blue); font-size: clamp(1.55rem, 3vw, 2.2rem); }
.invoice-detail-header p { margin: 0.4rem 0 0; color: #6c7a86; }
.detail-total { min-width: 220px; padding: 1rem; border-radius: 0.75rem; text-align: right; color: #fff; background: var(--snowman-dark-blue); }
.detail-total span, .detail-total small { display: block; }
.detail-total strong { display: block; margin: 0.2rem 0; font-size: 1.5rem; }
.detail-total small { color: #ffd6d6; font-weight: 700; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.detail-wide { grid-column: 1 / -1; }
.detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1.25rem; margin: 0; }
.detail-list div { padding-bottom: 0.55rem; border-bottom: 1px solid var(--snowman-border); }
.detail-list dt { color: #6c7a86; font-size: 0.75rem; text-transform: uppercase; }
.detail-list dd { margin: 0.2rem 0 0; font-weight: 600; }
.narration { margin-top: 1rem; }
.narration p { margin: 0.25rem 0 0; color: #536575; }
.tax-summary { width: min(100%, 430px); margin: 1rem 0 0 auto; }
.tax-summary div { display: flex; justify-content: space-between; padding: 0.3rem 0; }
.tax-summary .tax-total { margin-top: 0.35rem; padding-top: 0.65rem; border-top: 2px solid var(--snowman-dark-blue); color: var(--snowman-dark-blue); font-size: 1.05rem; }
.insight-detail { padding: 0.8rem; border-left: 3px solid var(--snowman-blue); background: var(--snowman-pale-blue); }
.insight-detail span { color: var(--snowman-blue); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.insight-detail strong { display: block; margin-top: 0.2rem; }
.insight-detail p { margin: 0.25rem 0 0; color: #6c7a86; }
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; top: 0.4rem; bottom: 0.4rem; left: 0.35rem; width: 2px; background: var(--snowman-border); }
.timeline li { position: relative; display: flex; gap: 1rem; padding: 0 0 1rem; }
.timeline-dot { z-index: 1; width: 0.8rem; height: 0.8rem; margin-top: 0.25rem; border: 2px solid #fff; border-radius: 50%; background: var(--snowman-blue); box-shadow: 0 0 0 2px var(--snowman-blue); }
.timeline p { margin: 0.1rem 0 0; color: #6c7a86; font-size: 0.82rem; }
.timeline blockquote { margin: 0.35rem 0 0; padding: 0.45rem 0.7rem; border-left: 3px solid #d89000; background: #fffbeb; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.client-total { width: min(100%, 360px); margin-left: auto; padding: 0.8rem; text-align: right; background: var(--snowman-light-blue); border-radius: 0.6rem; }
.client-total span, .client-total small { display: block; color: #6c7a86; }
.client-total strong { display: block; color: var(--snowman-dark-blue); font-size: 1.25rem; }
.form-submit-bar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1rem; padding: 0.8rem; border: 1px solid var(--snowman-border); border-radius: 0.65rem; background: rgba(255, 255, 255, 0.96); box-shadow: 0 -5px 20px rgba(11, 49, 93, 0.08); }
.attachment-upload { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
.attachment-upload small { grid-column: 1 / -1; color: #6c7a86; }
.workflow-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.workflow-actions form { margin: 0; }
.workflow-comment-action { display: flex; min-width: min(100%, 430px); gap: 0.5rem; }
.workflow-comment-action .form-control { min-width: 180px; }
.batch-check-column { width: 42px; text-align: center; }
.batch-action-bar { position: sticky; z-index: 20; bottom: 0.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; padding: 0.85rem 1rem; border: 1px solid var(--snowman-border); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.97); box-shadow: 0 8px 25px rgba(11, 49, 93, 0.15); }
.batch-action-bar strong { color: var(--snowman-dark-blue); }
.batch-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.admin-search { display: flex; align-items: end; gap: 0.75rem; }.admin-search > div:first-child { flex: 1; }.admin-search label { margin-bottom: 0.3rem; color: var(--snowman-muted); font-size: 0.78rem; font-weight: 700; }.admin-search .filter-actions { margin: 0; }
.admin-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; padding: 1rem; border: 1px solid var(--snowman-border); border-radius: 0.7rem; }.admin-option-grid legend { float: none; width: auto; margin: 0; padding: 0 0.35rem; color: var(--snowman-dark-blue); font-size: 1rem; font-weight: 700; }.admin-option-grid > p { grid-column: 1 / -1; margin: 0; color: var(--snowman-muted); font-size: 0.82rem; }.option-check { display: flex; align-items: start; gap: 0.5rem; padding: 0.55rem; border-radius: 0.45rem; background: var(--snowman-pale-blue); }.option-check input { flex: 0 0 auto; }

.app-footer {
  padding: 1rem 0;
  border-top: 1px solid var(--snowman-border);
  color: #6c7a86;
  background: #fff;
  font-size: 0.8rem;
}

.app-footer small {
  display: block;
  margin-top: 0.25rem;
}

.btn-primary {
  --bs-btn-bg: var(--snowman-blue);
  --bs-btn-border-color: var(--snowman-blue);
  --bs-btn-hover-bg: var(--snowman-dark-blue);
  --bs-btn-hover-border-color: var(--snowman-dark-blue);
}

.login-shell {
  min-height: calc(100vh - 150px);
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.login-card {
  width: min(100%, 520px);
  padding: 2rem;
  border: 1px solid var(--snowman-border);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 16px 40px rgba(11, 49, 93, 0.1);
}

.login-card h1 {
  color: var(--snowman-dark-blue);
  font-size: 1.65rem;
}

.login-logo {
  max-width: 220px;
  max-height: 90px;
  object-fit: contain;
}

.login-brand-text {
  color: var(--snowman-blue);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.demo-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #6c7a86;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.demo-divider::before,
.demo-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--snowman-border);
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

@media (max-width: 991.98px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-grid { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .central-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-filter, .cash-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-menu {
    justify-content: space-between;
    padding: 0.75rem 0;
  }

  .user-identity {
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .kpi-grid, .dashboard-grid { grid-template-columns: 1fr; }
  .page-heading { align-items: start; flex-direction: column; gap: 1rem; }
  .filter-grid { grid-template-columns: 1fr; }
  .filter-search { grid-column: auto; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-wide { grid-column: auto; }
  .invoice-detail-header { flex-direction: column; }
  .detail-total { width: 100%; text-align: left; }
  .detail-list { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .dashboard-filter, .cash-summary-grid { grid-template-columns: 1fr; }
  .admin-option-grid { grid-template-columns: 1fr; }
  .workflow-actions, .workflow-comment-action { align-items: stretch; flex-direction: column; width: 100%; }
  .batch-action-bar { align-items: stretch; flex-direction: column; }
  .batch-buttons { flex-direction: column; }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}