/* LSS Accounts house style on top of Tabler 1.4 (MIT). Shared by every page; the
   company accent colour is injected inline by base.html. Rules: left-aligned
   headers and actions, compact rows, tabular numbers right-aligned. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/inter/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/inter/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/inter/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("vendor/inter/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  --lss-bg: #f4f6fa; --lss-surface: #ffffff; --lss-border: #e5e9f0; --lss-text: #1b2130; --lss-muted: #6b7280;
  --lss-navy: #1b2130; --lss-navy-2: #262e3f; --lss-accent: #4f8cff; --lss-accent-dark: #2f6fe6;
  --lss-radius: 12px; --lss-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.05);
  --tblr-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tblr-primary: #4f8cff; --tblr-primary-rgb: 79,140,255; --tblr-body-bg: #f4f6fa; --tblr-body-color: #1b2130;
  --tblr-border-color: #e5e9f0; --tblr-border-radius: 10px;
}
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--lss-bg); color: var(--lss-text); -webkit-font-smoothing: antialiased; }

/* Sidebar */
.navbar.navbar-vertical { background: var(--lss-navy) !important; border-right: 0 !important; overflow-y: auto !important; }
.navbar-vertical .nav-link { border-radius: 10px; margin: 2px .6rem; padding: .5rem .8rem; color: rgba(255,255,255,.68); font-weight: 500; }
.navbar-vertical .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.navbar-vertical .nav-item.active .nav-link { background: var(--lss-accent); color: #fff; }
.navbar-vertical .nav-item.active .nav-link .nav-link-icon { color: #fff; }
.nav-section { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); padding: .9rem 1.4rem .3rem; list-style: none; }
.sidebar-company { display: flex; align-items: center; gap: .7rem; margin: 1rem .9rem .4rem; padding: .6rem .8rem; background: rgba(255,255,255,.06); border-radius: 10px; }
.sidebar-logo { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: rgba(255,255,255,.08); flex: 0 0 40px; }
.sidebar-company-name { color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.2; }
.sidebar-footer { margin: 0 .75rem; border-top: 1px solid rgba(255,255,255,.08); padding: .85rem 0 1.25rem; }
.sidebar-user { font-size: .8rem; color: rgba(255,255,255,.55); padding: 0 .15rem .6rem; }
.sidebar-user strong { color: #fff; font-weight: 600; }
.sidebar-user a { color: rgba(255,255,255,.7); }
.sidebar-footer .btn-outline-danger { border-color: rgba(255,90,95,.5); color: #ff8a8e; border-radius: 10px; }
.sidebar-footer .btn-outline-danger:hover { background: #ff5a5f; border-color: #ff5a5f; color: #fff; }

/* Page chrome: full width everywhere (an accounts screen is lists and forms; nothing is gained by a centred column) */
.page-body { margin-top: 1rem; }
.page-wrapper .container-fluid, .footer .container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }
.page-header { margin: 0 0 1.25rem 0 !important; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: .75rem; text-align: left; }
.page-header .page-title { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.page-subtitle { color: var(--lss-muted); font-size: .85rem; margin-top: .15rem; }
.page-header .page-actions { display: flex; gap: .5rem; align-items: center; margin-left: auto; }
.footer { border-top: 0; font-size: .8rem; }

/* Cards, stats */
.card { border: 1px solid var(--lss-border); border-radius: var(--lss-radius); box-shadow: var(--lss-shadow); margin-bottom: 1rem; }
.card-header { background: transparent; border-bottom: 1px solid var(--lss-border); padding: .7rem 1rem; }
.card-title { font-weight: 600; font-size: .95rem; }
.card-body { padding: 1rem; }
.stat { font-size: 1.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--lss-muted); margin-bottom: .2rem; }

/* Tables */
.table thead th { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lss-muted); background: #f8fafc; border-bottom: 1px solid var(--lss-border); padding: .5rem .75rem; }
.table td { padding: .45rem .75rem; vertical-align: middle; border-color: var(--lss-border); }
.table tbody tr:hover td { background: #f8fafc; }
.table a { color: var(--lss-text); font-weight: 500; text-decoration: none; }
.table a:hover { color: var(--lss-accent); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.num { text-align: right; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82em; color: #374151; }
.card > .table { margin-bottom: 0; }
.card > .dt-container .table { margin-bottom: 0; }
div.dt-container .dt-search input { border-radius: 10px; border-color: var(--lss-border); }
div.dt-container .dt-layout-row { padding: .5rem 1rem 0; }
table.dataTable thead th.dt-orderable-asc:hover, table.dataTable thead th.dt-orderable-desc:hover { color: var(--lss-accent); }

/* Badges */
.badge { border-radius: 999px; font-size: .68rem; font-weight: 600; letter-spacing: .04em; padding: .3em .65em; text-transform: uppercase; }
.badge-ok { background: #e3f7ec; color: #12703b; } .badge-warn { background: #fff1d6; color: #8a5300; } .badge-err { background: #ffe4e5; color: #a3262b; }
.badge-info { background: #e8f0ff; color: #1d4ed8; } .badge-muted { background: #eef1f5; color: #4b5563; }

/* Buttons, forms */
.btn { border-radius: 10px; font-weight: 500; padding: .5rem .9rem; line-height: 1.25; }
.btn-sm { border-radius: 8px; padding: .35rem .7rem; font-size: .8rem; }
.btn-primary { background: var(--lss-accent); border-color: var(--lss-accent); color: #fff; }
.btn-primary:hover { background: var(--lss-accent-dark); border-color: var(--lss-accent-dark); color: #fff; }
.btn-outline-secondary { border-color: var(--lss-border); color: #374151; background: #fff; }
.btn-outline-secondary:hover { background: #f3f4f6; color: var(--lss-text); border-color: #d1d5db; }
.btn-outline-danger { border-color: #ffc9cc; color: #b42328; background: #fff; }
.btn-outline-danger:hover { background: #ff5a5f; border-color: #ff5a5f; color: #fff; }
.form-control, .form-select { border-radius: 10px; border-color: var(--lss-border); padding: .45rem .7rem; }
.form-control:focus, .form-select:focus { border-color: var(--lss-accent); box-shadow: 0 0 0 3px rgba(79,140,255,.18); }
.form-label { font-weight: 600; font-size: .82rem; color: #374151; margin-bottom: .25rem; }
.form-hint { color: var(--lss-muted); margin-top: .3rem; line-height: 1.45; }
.alert { border-radius: var(--lss-radius); border: 0; }
.alert-info { background: #e8f0ff; color: #1e3a8a; } .alert-danger { background: #ffe9ea; color: #991b1b; } .alert-warning { background: #fff3d6; color: #7a4a00; }
.form-section { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #4b5563; margin: 1.5rem 0 .75rem; padding-top: 1rem; border-top: 1px solid var(--lss-border); }
.form-section:first-child { margin-top: .25rem; padding-top: 0; border-top: 0; }
input.money { text-align: right; font-variant-numeric: tabular-nums; }
.ts-wrapper.form-select, .ts-wrapper.form-control { padding: 0; }
.ts-wrapper .ts-control { border-radius: 10px; border-color: var(--lss-border); padding: .45rem .7rem; min-height: 2.4rem; }
.ts-wrapper.form-select-sm .ts-control { padding: .25rem .5rem; min-height: 2rem; font-size: .875rem; }
.ts-wrapper.focus .ts-control { border-color: var(--lss-accent); box-shadow: 0 0 0 3px rgba(79,140,255,.18); }
.ts-dropdown { border-radius: 10px; border: 1px solid var(--lss-border); background: #fff; color: var(--lss-text); z-index: 1060; box-shadow: 0 8px 24px rgba(16,24,40,.14); margin-top: 4px; }
.ts-dropdown .option { padding: .4rem .7rem; }
.ts-dropdown .option.active { background: var(--lss-accent); color: #fff; }
.ts-dropdown .option[data-value=""] { display: none; }
.ts-wrapper.single .ts-control { background: #fff; }
.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input { cursor: pointer; }
.ts-control input::placeholder { color: var(--lss-muted); }
.litepicker { font-family: inherit; }

/* Detail lists, danger zones, alert bars */
dl.kv { display: grid; grid-template-columns: 11rem 1fr; gap: 0; margin: 0; }
dl.kv dt, dl.kv dd { padding: .4rem 0; margin: 0; border-bottom: 1px solid var(--lss-border); }
dl.kv dt { color: var(--lss-muted); font-weight: 500; font-size: .85rem; } dl.kv dd { font-size: .9rem; }
.card.danger { border-color: #ffd5d7; } .card.danger .card-title { color: #a3262b; }
.disaster { background: #b91c1c; color: #fff; padding: .7rem 1rem; font-weight: 600; display: flex; gap: .75rem; align-items: center; }
.disaster a { color: #fff; text-decoration: underline; }
.amber { background: #f59e0b; color: #1b2130; padding: .6rem 1rem; font-weight: 600; }
.amber a { color: #1b2130; }

/* Auth and wizard pages */
.page-center .container-tight { max-width: 26rem; }
.page-center.wizard .container-tight { max-width: none; width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; }
/* Tabler's .page-center centres vertically; a wizard page taller than the window would
   have its top clipped with nothing to scroll to. Wizard pages align to the top instead. */
.page-center.wizard { align-items: flex-start; justify-content: flex-start; min-height: 100vh; }
.page-center.wizard .container-tight { margin-top: 1.5rem; margin-bottom: 2rem; }
.page-center.wizard .card { margin-bottom: 1rem; }
.wizard-steps { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.wizard-steps span { font-size: .72rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; background: #eef0f3; color: var(--lss-muted); }
.wizard-steps span.done { background: #e1f5ea; color: #1d6f42; } .wizard-steps span.now { background: var(--lss-accent); color: #fff; }
.wizard-guide { background: #f6f7f9; border-radius: .5rem; padding: 1rem 1.25rem; font-size: .9rem; }
.wizard-guide pre { background: #fff; border: 1px solid var(--lss-border); border-radius: .4rem; padding: .6rem .8rem; font-size: .8rem; white-space: pre-wrap; }

/* Settings hub cards */
.sh-group { margin-bottom: 1.25rem; } .sh-group h3 { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; margin: 0 0 .5rem; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .75rem; }
.sh-card { position: relative; display: flex; gap: .75rem; padding: .85rem .95rem; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; color: inherit; text-decoration: none; }
.sh-card:hover { border-color: var(--lss-accent); box-shadow: 0 2px 10px rgba(27,33,48,.06); color: inherit; }
.sh-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px; background: #f1f5f9; display: inline-flex; align-items: center; justify-content: center; color: var(--lss-accent); }
.sh-ico .ti { font-size: 1.2rem; } .sh-t { font-weight: 600; font-size: .95rem; } .sh-d { font-size: .8rem; color: #6b7280; margin-top: .15rem; }
.sh-state { position: absolute; top: .8rem; right: .9rem; }

@media (max-width: 991.98px) {
  .page-header { flex-wrap: wrap; row-gap: .5rem; } .page-header .page-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .table-responsive { border: 0; } dl.kv { grid-template-columns: 1fr; } dl.kv dt { border-bottom: 0; padding-bottom: 0; }
  .navbar-vertical .navbar-collapse { max-height: 85vh; overflow-y: auto; }
  .stat { font-size: 1.4rem; }
}