/* =========================================================================
   FIRMEZA "LEDGER" COMPONENTS
   Loads after custom.css and tokens.css. Restyles the Bootstrap classes the
   templates already use, and adds the new building blocks:
   .fz-pill, .fz-skel, .fz-toast, .fz-dialog, .fz-kpi, .fz-empty, .fz-mono.
   ========================================================================= */

/* ---------- Base ------------------------------------------------------- */
body {
    font-family: var(--font) !important;
    color: var(--ink);
    background: var(--ground);
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}
.fz-mono, code.fz-mono { font-family: var(--mono) !important; font-weight: 500; font-size: 12px; }
.fz-num, .table td, .table th { font-variant-numeric: tabular-nums; }

h1, .h1 { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.015em; }
h2, .h2 { font-size: 18px; line-height: 26px; font-weight: 700; }
h3, .h3, h4, .h4 { font-size: 16px; font-weight: 700; }

/* One focus ring on every control (handoff: accessibility) */
:focus-visible { outline: none; }
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.form-control:focus,
.form-select:focus { border-color: var(--navy-800); }

/* ---------- Buttons: 40 / 32 / 48, 6px radius -------------------------- */
.btn {
    --bs-btn-border-radius: var(--radius-sm);
    min-height: var(--control-h);
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.btn-sm { min-height: var(--control-h-sm); padding: 0 12px; font-size: 13px; --bs-btn-border-radius: var(--radius-sm); }
.btn-lg { min-height: var(--control-h-phone); padding: 0 20px; font-size: 15px; }
.btn-icon { width: var(--control-h); min-height: var(--control-h); padding: 0; }
.btn-icon.btn-sm { width: var(--control-h-sm); min-height: var(--control-h-sm); }

.btn-primary,
.btn-grd-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--navy-800);
    --bs-btn-border-color: var(--navy-800);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--navy-700);
    --bs-btn-hover-border-color: var(--navy-700);
    --bs-btn-active-bg: var(--navy-900);
    --bs-btn-active-border-color: var(--navy-900);
    --bs-btn-disabled-bg: var(--navy-800);
    --bs-btn-disabled-border-color: var(--navy-800);
    background: var(--navy-800) !important;
    border: 1px solid var(--navy-800) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.btn-primary:hover, .btn-grd-primary:hover { background: var(--navy-700) !important; border-color: var(--navy-700) !important; }

/* Secondary = white with a strong border */
.btn-default,
.btn-light,
.btn-outline-secondary,
.btn-outline-primary {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--header-row);
    --bs-btn-hover-border-color: var(--line-strong);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: var(--neutral-bg);
    --bs-btn-active-border-color: var(--line-strong);
    background: #fff;
    border: 1px solid var(--line-strong);
    color: var(--ink);
}
.btn-default:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover { background: var(--header-row); color: var(--ink); }

.btn-danger {
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: #912018;
    --bs-btn-hover-border-color: #912018;
    --bs-btn-active-bg: #912018;
    --bs-btn-active-border-color: #912018;
    --bs-btn-disabled-bg: #FDA29B;
    --bs-btn-disabled-border-color: #FDA29B;
    color: #fff;
}
.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--danger-bg);
    --bs-btn-hover-color: var(--danger);
    --bs-btn-hover-border-color: #FDA29B;
    background: #fff;
}
.btn-link { color: var(--navy-800); font-weight: 600; text-decoration: none; }
.btn-gold { --bs-btn-bg: var(--amber-500); --bs-btn-border-color: var(--amber-500); --bs-btn-color: var(--navy-900); --bs-btn-hover-bg: #D8912A; --bs-btn-hover-color: var(--navy-900); color: var(--navy-900); }
.btn:disabled, .btn.disabled { opacity: 1; }
.btn-primary:disabled, .btn-primary.disabled { background: #98A2B3 !important; border-color: #98A2B3 !important; }

/* Row-action buttons inside tables stay quiet */
.card .table td .btn.btn-outline-primary { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.card .table td .btn.btn-outline-primary:hover { background: var(--header-row); color: var(--ink); }
.card .table td .btn.btn-outline-danger { background: transparent; border-color: var(--line-strong); color: var(--danger); }
.card .table td .btn.btn-outline-danger:hover { background: var(--danger-bg); color: var(--danger); }

/* ---------- Inputs: 40px, label above, helper below, error glow ------- */
.form-label, .col-form-label { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.form-control,
.form-select {
    min-height: var(--control-h);
    padding: 0 12px;
    font-size: 14px;
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background-color: #fff;
}
textarea.form-control { padding: 10px 12px; min-height: 84px; }
.form-select { padding-right: 36px; }
.form-control-sm, .form-select-sm { min-height: var(--control-h-sm); font-size: 13px; }
.form-control::placeholder { color: var(--fz-ink-subtle); }
.form-text, .form-hint { font-size: 12px; color: var(--muted); }
.input-group-text { background: var(--header-row); border-color: var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); }
.form-check-input:checked { background-color: var(--navy-800); border-color: var(--navy-800); }

.form-control.is-invalid, .form-select.is-invalid,
.was-validated .form-control:invalid, .was-validated .form-select:invalid,
.has-error .form-control {
    border-color: var(--danger);
    box-shadow: var(--focus-ring-danger);
    background-image: none;
}
.invalid-feedback, .help-block.text-danger, span.text-danger.error, label.error {
    font-size: 12px; font-weight: 500; color: var(--danger);
}

/* ---------- Cards: 12px, 1px border, no shadow ------------------------ */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: none;
}
.card .card-header { border-bottom: 1px solid var(--line); padding: 16px 20px; }
.card .card-title, .card .card-header h5, .card .card-header h6 { font-size: 16px; font-weight: 700; color: var(--ink); }
.card > .card-body { padding: 20px; }
.card .card-footer { border-top: 1px solid var(--line); }

/* KPI tile: label, big number, context. No icon tile. */
.fz-kpi { border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.fz-kpi__label { font-size: 13px; font-weight: 600; color: var(--slate); }
.fz-kpi__value { display: flex; align-items: baseline; gap: 8px; font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.fz-kpi__context { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.fz-kpi__bar { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.fz-kpi__bar > span { display: block; height: 100%; background: var(--navy-800); }

/* ---------- Tables: header 44px, rows 56px ---------------------------- */
.table { --bs-table-bg: transparent; color: var(--ink); margin-bottom: 0; }
.table > thead > tr > th,
.card .table > thead > tr > th {
    height: 44px;
    padding: 0 20px;
    background: var(--header-row);
    color: var(--slate);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    vertical-align: middle;
}
.table > tbody > tr > td,
.card .table > tbody > tr > td {
    height: 56px;
    padding: 8px 20px;
    font-size: 14px;
    color: var(--ink);
    vertical-align: middle;
    border-bottom: 1px solid var(--line-soft);
}
.table > tbody > tr:last-child > td,
.card .table > tbody > tr:last-child > td { border-bottom: 0; }
.card .table > tbody > tr:hover > *,
.table-hover > tbody > tr:hover > * { background-color: var(--header-row) !important; }
.card .table.table-striped { --bs-table-striped-bg: transparent; }
.table-responsive { border-radius: var(--radius-md); }
.table .text-end, .table td.num, .table th.num { text-align: right; }

/* DataTables chrome */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); min-height: var(--control-h-sm); font-size: 13px; }
.dataTables_wrapper .dataTables_info { font-size: 13px; color: var(--muted); }
.dataTables_wrapper .dataTables_processing { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); color: var(--slate); font-size: 13px; }

/* ---------- Status pills: 24px, dot + word ---------------------------- */
.fz-pill,
.fz-status {
    --pill-bg: var(--neutral-bg); --pill-fg: var(--neutral); --pill-dot: var(--neutral-dot);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    background: var(--pill-bg);
    color: var(--pill-fg);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.fz-pill::before,
.fz-status::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 999px;
    background: var(--pill-dot);
    flex: none;
}
.fz-pill--ok,   .fz-status--success { --pill-bg: var(--success-bg); --pill-fg: var(--success); --pill-dot: var(--success-dot); }
.fz-pill--warn, .fz-status--warning { --pill-bg: var(--warning-bg); --pill-fg: var(--warning); --pill-dot: var(--warning-dot); }
.fz-pill--bad,  .fz-status--danger  { --pill-bg: var(--danger-bg);  --pill-fg: var(--danger);  --pill-dot: var(--danger-dot); }
.fz-pill--info, .fz-status--info    { --pill-bg: var(--info-bg);    --pill-fg: var(--info);    --pill-dot: var(--info-dot); }
.fz-pill--off,  .fz-status--neutral { --pill-bg: var(--neutral-bg); --pill-fg: var(--neutral); --pill-dot: var(--neutral-dot); }

/* Legacy Bootstrap badges follow the same tones (no dot, so count badges stay plain) */
.badge { border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; padding: .4em .75em; }

/* ---------- Tabs ------------------------------------------------------ */
.nav-tabs { border-bottom: 1px solid var(--line); gap: 4px; }
.nav-tabs .nav-link { height: 40px; padding: 0 12px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; color: var(--slate); border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; }
.nav-tabs .nav-link:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.nav-tabs .nav-link.active { color: var(--navy-800); font-weight: 600; border-bottom-color: var(--navy-800); background: transparent; }
.nav-pills .nav-link.active { background: var(--navy-100); color: var(--navy-800); }

/* ---------- Overlays: dropdowns ------------------------------------- */
.dropdown-menu { border: 1px solid var(--line) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-overlay) !important; padding: 6px; }
.dropdown-item { border-radius: var(--radius-sm); padding: 8px 10px; font-size: 14px; color: var(--ink); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--header-row); color: var(--ink); }
.dropdown-item.text-danger, .dropdown-item.fz-danger { color: var(--danger) !important; }

/* ---------- Dialogs: 440px, 12px, overlay shadow ---------------------- */
.modal-content { border: 0 !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-overlay) !important; }
.modal-header { border-bottom: 0; padding: 20px 22px 0; }
.modal-title { font-size: 18px; font-weight: 700; color: var(--ink); }
.modal-body { padding: 16px 22px; font-size: 14px; color: var(--slate); }
.modal-footer { border-top: 1px solid var(--line-soft); padding: 14px 22px; gap: 8px; justify-content: flex-end; }
.modal-footer > * { margin: 0; }
.modal-backdrop.show { opacity: .4; background: var(--navy-900); }
.modal-sm { --bs-modal-width: 400px; }
.bootbox .modal-dialog { max-width: 440px; }
.bootbox .modal-body { padding-top: 20px; }
.bootbox .bootbox-close-button { display: none; }

.fz-dialog__icon { width: 40px; height: 40px; flex: none; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--danger-bg); color: var(--danger); }
.fz-dialog__head { display: flex; gap: 14px; padding: 20px 22px 0; }
.fz-dialog__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.fz-dialog__desc { margin: 6px 0 0; font-size: 14px; color: var(--slate); }
.fz-dialog .modal-body { padding-top: 14px; }
.fz-dialog .modal-footer { border-top: 0; padding-top: 6px; }

/* ---------- Toasts: bottom-right, 5s ---------------------------------- */
.fz-toasts { position: fixed; right: 24px; bottom: 24px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.fz-toast { pointer-events: auto; width: 380px; max-width: calc(100vw - 32px); min-height: 48px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 10px; background: var(--ink); color: #fff; box-shadow: var(--shadow-overlay); font-size: 14px; animation: fz-toast-in .18s ease-out both; }
.fz-toast__dot { width: 8px; height: 8px; border-radius: 999px; background: #47CD89; flex: none; }
.fz-toast__msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fz-toast__action { height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: #F4C77E; font: 700 13px var(--font); }
.fz-toast__action:hover { background: rgba(255, 255, 255, .1); }
.fz-toast__close { width: 32px; height: 32px; border: 0; border-radius: var(--radius-sm); background: transparent; color: #98A2B3; display: inline-flex; align-items: center; justify-content: center; }
.fz-toast__close:hover { color: #fff; }
.fz-toast--error { background: #fff; color: var(--ink); border: 1px solid #FDA29B; }
.fz-toast--error .fz-toast__dot { background: var(--danger-dot); }
.fz-toast--error .fz-toast__action { color: var(--danger); }
.fz-toast--error .fz-toast__action:hover { background: var(--danger-bg); }
.fz-toast--error .fz-toast__close { color: var(--muted); }
.fz-toast--info .fz-toast__dot { background: var(--info-dot); }
.fz-toast.is-leaving { animation: fz-toast-out .16s ease-in both; }
@keyframes fz-toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes fz-toast-out { to { opacity: 0; transform: translateY(8px); } }
@media (max-width: 767.98px) {
    .fz-toasts { left: 16px; right: 16px; bottom: 84px; align-items: stretch; }
    .fz-toast { width: auto; max-width: none; }
}

/* ---------- Empty state & skeleton ------------------------------------ */
.fz-empty, .empty-state { border: 1px dashed var(--line-strong); border-radius: var(--radius-md); padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--muted); }
.fz-empty__title, .empty-state .empty-state-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.fz-empty__text, .empty-state .empty-state-text { font-size: 13px; color: var(--muted); margin: 0; }
.empty-state .empty-state-icon { color: var(--muted); }

.fz-skel { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, #EEF0F3 0%, #F6F7F9 50%, #EEF0F3 100%); background-size: 200% 100%; animation: fz-shimmer 1.4s ease-in-out infinite; }
.fz-skel--title { height: 24px; width: 220px; }
.fz-skel--block { height: 96px; border-radius: var(--radius-md); }
.fz-skel--row { height: 56px; border-radius: 0; }
.fz-skel-stack { display: flex; flex-direction: column; gap: 10px; }
@keyframes fz-shimmer { to { background-position: -200% 0; } }

/* Page-level skeleton: fills the content area only. Sidebar and top bar stay. */
.fz-skel-page { position: fixed; z-index: 1030; top: var(--fz-topbar-h, 64px); left: var(--fz-sidebar-w, 248px); right: 0; bottom: 0; background: var(--ground); padding: 32px; overflow: hidden; transition: opacity .2s ease, visibility .2s ease; }
.fz-skel-page.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.fz-skel-page__inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.fz-skel-page__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fz-skel-page__card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
body.toggled .fz-skel-page { left: var(--fz-sidebar-w-mini, 68px); }
@media (max-width: 1023.98px) { .fz-skel-page { left: 0; padding: 16px; } .fz-skel-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
    .fz-skel, .fz-toast { animation: none !important; }
    .fz-skel-page { transition: none; }
}

/* ---------- Phone: 48px buttons, 44px targets ------------------------- */
@media (max-width: 767.98px) {
    .btn { min-height: 44px; }
    .btn-lg, .btn.fz-btn-phone { min-height: var(--control-h-phone); }
    .form-control, .form-select { min-height: 44px; font-size: 16px; }
    .btn-icon { width: 44px; min-height: 44px; }
}