/* ==========================================================================
   Modelo Totvs MultiEmpresa — Design System: "The Trusted Ledger"
   Reusable JLV baseline. See DESIGN.md (root) for the normative spec.

   This file does two jobs:
   1. Declares the --ledger-* token layer (the source of truth).
   2. Remaps Bootstrap 5.3's own CSS variables to those tokens, so every
      utility class (btn-primary, bg-primary-subtle, text-primary, the
      semantic badges...) recolors across the whole template — current and
      future cloned views — without editing each file.
   To re-skin a cloned system, change the tokens in :root. Nothing else.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Action color — Ledger Blue. The one saturated color, for actions only. */
    --ledger-primary: #3457d5;
    --ledger-primary-rgb: 52, 87, 213;
    --ledger-primary-hover: #2843b0;
    --ledger-primary-active: #1e3490;
    --ledger-primary-subtle: #eaeefc;          /* wash background        */
    --ledger-primary-border-subtle: #cdd7f7;   /* wash hairline          */
    --ledger-primary-emphasis: #1e3490;        /* text on wash           */

    /* Structural chrome — deep slate. Frames the work, never shouts. */
    --ledger-slate-900: #1b1f24;   /* active nav, deepest chrome */
    --ledger-slate-800: #212529;   /* sidebar / login header      */
    --ledger-slate-700: #2c3034;   /* sidebar hover, controls     */
    --ledger-on-slate: #e9ecef;        /* text on chrome          */
    --ledger-on-slate-muted: #aeb6bf;  /* inactive text on chrome */

    /* Work surface — light, faintly cool. Never warm. */
    --ledger-canvas: #f6f7f9;      /* content background  */
    --ledger-surface: #ffffff;     /* cards, navbar, modal */
    --ledger-ink: #16191d;         /* headings, high-emphasis values */
    --ledger-body: #3d434d;        /* default body / table text      */
    --ledger-muted: #667085;       /* secondary labels, timestamps   */
    --ledger-border: #e3e6ea;      /* hairline dividers, strokes     */
    --ledger-border-strong: #c4cad2;

    /* Semantic */
    --ledger-success: #1f9d57;
    --ledger-success-rgb: 31, 157, 87;
    --ledger-success-subtle: #e7f4ec;
    --ledger-success-emphasis: #157243;
    --ledger-warning: #b7791f;
    --ledger-warning-rgb: 183, 121, 31;
    --ledger-warning-subtle: #f7efe0;
    --ledger-warning-emphasis: #7d5413;
    --ledger-danger: #d23c4a;
    --ledger-danger-rgb: 210, 60, 74;
    --ledger-danger-hover: #b22f3c;
    --ledger-danger-active: #90212f;
    --ledger-danger-subtle: #fae8ea;
    --ledger-danger-emphasis: #90212f;

    /* Radii */
    --ledger-radius-sm: 6px;   /* buttons, inputs */
    --ledger-radius-md: 8px;   /* cards           */
    --ledger-radius-lg: 12px;  /* modals, login   */

    /* Elevation — flat at rest; depth on state only */
    --ledger-shadow-raised: 0 1px 2px rgba(22, 25, 29, 0.06), 0 2px 8px rgba(22, 25, 29, 0.06);
    --ledger-shadow-overlay: 0 8px 28px rgba(22, 25, 29, 0.16);

    /* Motion */
    --ledger-ease: cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
    --ledger-fast: 150ms;
    --ledger-base: 250ms;

    /* Structure */
    --sidebar-width: 15rem; /* 250px */
}

/* --------------------------------------------------------------------------
   2. Bootstrap variable remap (recolors utility classes everywhere)
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    --bs-primary: var(--ledger-primary);
    --bs-primary-rgb: var(--ledger-primary-rgb);
    --bs-primary-text-emphasis: var(--ledger-primary-emphasis);
    --bs-primary-bg-subtle: var(--ledger-primary-subtle);
    --bs-primary-border-subtle: var(--ledger-primary-border-subtle);

    --bs-success: var(--ledger-success);
    --bs-success-rgb: var(--ledger-success-rgb);
    --bs-success-text-emphasis: var(--ledger-success-emphasis);
    --bs-success-bg-subtle: var(--ledger-success-subtle);

    --bs-warning: var(--ledger-warning);
    --bs-warning-rgb: var(--ledger-warning-rgb);
    --bs-warning-text-emphasis: var(--ledger-warning-emphasis);
    --bs-warning-bg-subtle: var(--ledger-warning-subtle);

    --bs-danger: var(--ledger-danger);
    --bs-danger-rgb: var(--ledger-danger-rgb);
    --bs-danger-text-emphasis: var(--ledger-danger-emphasis);
    --bs-danger-bg-subtle: var(--ledger-danger-subtle);

    --bs-body-bg: var(--ledger-canvas);
    --bs-body-color: var(--ledger-body);
    --bs-body-color-rgb: 61, 67, 77;
    --bs-emphasis-color: var(--ledger-ink);
    --bs-heading-color: var(--ledger-ink);
    --bs-secondary-color: var(--ledger-muted);
    --bs-tertiary-color: var(--ledger-muted);
    --bs-border-color: var(--ledger-border);

    --bs-link-color: var(--ledger-primary);
    --bs-link-color-rgb: var(--ledger-primary-rgb);
    --bs-link-hover-color: var(--ledger-primary-hover);
    --bs-link-hover-color-rgb: 40, 67, 176;

    --bs-focus-ring-color: rgba(var(--ledger-primary-rgb), 0.25);

    --bs-border-radius: var(--ledger-radius-md);
    --bs-border-radius-sm: var(--ledger-radius-sm);
    --bs-border-radius-lg: var(--ledger-radius-lg);

    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
body {
    font-family: var(--bs-font-sans-serif);
    background-color: var(--ledger-canvas);
    color: var(--ledger-body);
    overflow-x: hidden;
    margin-bottom: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ledger-ink);
    letter-spacing: -0.01em;
}

/* Tabular figures for any aligned numbers (counts, dates, IDs, money). */
table,
.text-data,
.tnum {
    font-feature-settings: 'tnum' 1;
    font-variant-numeric: tabular-nums;
}

/* The One Action Color: links carry intent, not decoration. */
a {
    text-underline-offset: 0.15em;
}

/* --------------------------------------------------------------------------
   4. Focus — visible ring on every interactive element (WCAG AA)
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: none;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
a:focus-visible,
.list-group-item-action:focus-visible,
.btn-close:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ledger-primary-subtle), 0 0 0 1px var(--ledger-primary);
    border-radius: var(--ledger-radius-sm);
}

/* --------------------------------------------------------------------------
   5. Buttons (Bootstrap bakes literal hex into these — override explicitly)
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--ledger-radius-sm);
    transition: background-color var(--ledger-fast) var(--ledger-ease),
                border-color var(--ledger-fast) var(--ledger-ease),
                color var(--ledger-fast) var(--ledger-ease),
                box-shadow var(--ledger-fast) var(--ledger-ease);
}

.btn-primary {
    --bs-btn-bg: var(--ledger-primary);
    --bs-btn-border-color: var(--ledger-primary);
    --bs-btn-hover-bg: var(--ledger-primary-hover);
    --bs-btn-hover-border-color: var(--ledger-primary-hover);
    --bs-btn-active-bg: var(--ledger-primary-active);
    --bs-btn-active-border-color: var(--ledger-primary-active);
    --bs-btn-disabled-bg: var(--ledger-primary);
    --bs-btn-disabled-border-color: var(--ledger-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--ledger-primary);
    --bs-btn-border-color: var(--ledger-border-strong);
    --bs-btn-hover-bg: var(--ledger-primary);
    --bs-btn-hover-border-color: var(--ledger-primary);
    --bs-btn-active-bg: var(--ledger-primary-active);
    --bs-btn-active-border-color: var(--ledger-primary-active);
}

.btn-danger {
    --bs-btn-bg: var(--ledger-danger);
    --bs-btn-border-color: var(--ledger-danger);
    --bs-btn-hover-bg: var(--ledger-danger-hover);
    --bs-btn-hover-border-color: var(--ledger-danger-hover);
    --bs-btn-active-bg: var(--ledger-danger-active);
    --bs-btn-active-border-color: var(--ledger-danger-active);
}

.btn-outline-danger {
    --bs-btn-color: var(--ledger-danger-emphasis);
    --bs-btn-border-color: var(--ledger-border-strong);
    --bs-btn-hover-bg: var(--ledger-danger);
    --bs-btn-hover-border-color: var(--ledger-danger);
    --bs-btn-active-bg: var(--ledger-danger-active);
    --bs-btn-active-border-color: var(--ledger-danger-active);
}

/* The default non-primary action: a quiet outlined neutral. */
.btn-outline-secondary {
    --bs-btn-color: var(--ledger-body);
    --bs-btn-border-color: var(--ledger-border-strong);
    --bs-btn-hover-color: var(--ledger-ink);
    --bs-btn-hover-bg: var(--ledger-canvas);
    --bs-btn-hover-border-color: var(--ledger-border-strong);
    --bs-btn-active-color: var(--ledger-ink);
    --bs-btn-active-bg: var(--ledger-canvas);
    --bs-btn-active-border-color: var(--ledger-border-strong);
}

/* --------------------------------------------------------------------------
   6. Form controls
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
    border-color: var(--ledger-border);
    color: var(--ledger-ink);
    transition: border-color var(--ledger-fast) var(--ledger-ease),
                box-shadow var(--ledger-fast) var(--ledger-ease);
}

.form-control::placeholder {
    color: var(--ledger-muted);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ledger-primary);
    box-shadow: 0 0 0 3px var(--ledger-primary-subtle);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--ledger-canvas);
    color: var(--ledger-muted);
}

.input-group-text {
    background-color: var(--ledger-surface);
    border-color: var(--ledger-border);
    color: var(--ledger-muted);
}

.form-check-input {
    border-color: var(--ledger-border-strong);
}

.form-check-input:checked {
    background-color: var(--ledger-primary);
    border-color: var(--ledger-primary);
}

.form-check-input:focus {
    border-color: var(--ledger-primary);
    box-shadow: 0 0 0 3px var(--ledger-primary-subtle);
}

.form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ledger-body);
    margin-bottom: 0.375rem;
}

/* --------------------------------------------------------------------------
   7. Cards & surfaces — flat at rest, raised on hover
   -------------------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--ledger-border);
    --bs-card-border-radius: var(--ledger-radius-md);
    --bs-card-bg: var(--ledger-surface);
    border: 1px solid var(--ledger-border);
    border-radius: var(--ledger-radius-md);
    box-shadow: none;
    transition: box-shadow var(--ledger-fast) var(--ledger-ease);
}

/* Interactive cards lift on hover; static informational ones stay flat. */
a.card:hover,
.card.is-interactive:hover {
    box-shadow: var(--ledger-shadow-raised);
}

.card-header,
.card-footer {
    background-color: var(--ledger-surface);
    border-color: var(--ledger-border);
}

/* The shadow-sm utility shouldn't sit at rest — neutralize to a hairline. */
.shadow-sm {
    box-shadow: none !important;
    border: 1px solid var(--ledger-border);
}

/* --------------------------------------------------------------------------
   8. Tables
   -------------------------------------------------------------------------- */
.table {
    --bs-table-border-color: var(--ledger-border);
    --bs-table-color: var(--ledger-body);
    color: var(--ledger-body);
    margin-bottom: 0;
}

.table > thead.table-light th,
.table .table-light {
    --bs-table-bg: var(--ledger-canvas);
    color: var(--ledger-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-bottom-color: var(--ledger-border);
}

.table-hover > tbody > tr {
    transition: background-color var(--ledger-fast) var(--ledger-ease);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--ledger-canvas);
}

/* --------------------------------------------------------------------------
   9. Badges — wash + emphasis text + same-hue hairline (DESIGN.md vocabulary)
   -------------------------------------------------------------------------- */
.badge {
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   10. Modals — overlay elevation, hairline structure
   -------------------------------------------------------------------------- */
.modal-content {
    border: 1px solid var(--ledger-border);
    border-radius: var(--ledger-radius-lg);
    box-shadow: var(--ledger-shadow-overlay);
}

.modal-header,
.modal-footer {
    border-color: var(--ledger-border);
}

.modal-title {
    color: var(--ledger-ink);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   11. Layout & Sidebar
   -------------------------------------------------------------------------- */
#wrapper {
    overflow-x: hidden;
    min-height: 100vh;
}

#sidebar-wrapper {
    min-height: 100vh;
    margin-left: calc(-1 * var(--sidebar-width));
    width: var(--sidebar-width);
    background-color: var(--ledger-slate-800);
    transition: margin var(--ledger-base) var(--ledger-ease);
    position: fixed;
    z-index: 1030;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

#sidebar-wrapper .list-group {
    width: var(--sidebar-width);
}

#page-content-wrapper {
    width: 100%;
    margin-left: 0;
    transition: margin var(--ledger-base) var(--ledger-ease);
    min-height: 100vh;
    padding-left: 0;
    background-color: var(--ledger-canvas);
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
}

@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0;
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
        margin-left: var(--sidebar-width);
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: calc(-1 * var(--sidebar-width));
    }

    #wrapper.toggled #page-content-wrapper {
        margin-left: 0;
    }
}

/* Brand header */
#sidebar-wrapper .sidebar-heading {
    padding: 1.25rem 1.25rem 1rem;
    color: var(--ledger-on-slate);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background-color: var(--ledger-slate-800);
}

.sidebar-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ledger-radius-sm);
    background-color: var(--ledger-primary);
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
}

.sidebar-brand-name {
    color: var(--ledger-on-slate);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.sidebar-brand-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ledger-on-slate-muted);
    background-color: var(--ledger-slate-700);
    border-radius: var(--ledger-radius-sm);
    padding: 0.15rem 0.5rem;
}

/* Nav items — inset active marker, NOT a card side-stripe */
.list-group-item-dark {
    position: relative;
    background-color: var(--ledger-slate-800);
    color: var(--ledger-on-slate-muted);
    border: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background-color var(--ledger-fast) var(--ledger-ease),
                color var(--ledger-fast) var(--ledger-ease);
}

.list-group-item-dark:hover {
    background-color: var(--ledger-slate-700);
    color: var(--ledger-on-slate);
}

.list-group-item-dark.active {
    background-color: var(--ledger-slate-900);
    color: #fff;
    border-color: transparent;
}

/* The inset marker: a 3px bar hugging the rail's left edge. */
.list-group-item-dark.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1.375rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: var(--ledger-primary);
}

.list-group-item-dark:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--ledger-primary);
}

/* Utilities */
.w-20 {
    width: 20px;
    text-align: center;
}

/* Company selector inside the chrome */
.sidebar-empresa {
    background-color: var(--ledger-slate-800);
}

.sidebar-empresa-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ledger-on-slate-muted);
}

.sidebar-empresa-select {
    background-color: var(--ledger-slate-700);
    color: var(--ledger-on-slate);
    border-color: rgba(255, 255, 255, 0.1);
    font-size: 0.8125rem;
}

.sidebar-empresa-select:focus {
    background-color: var(--ledger-slate-700);
    color: #fff;
    border-color: var(--ledger-primary);
    box-shadow: 0 0 0 3px rgba(var(--ledger-primary-rgb), 0.35);
}

.sidebar-empresa-select option {
    background-color: var(--ledger-slate-700);
    color: var(--ledger-on-slate);
}

/* Logout */
.sidebar-logout {
    color: var(--ledger-on-slate-muted);
}

.sidebar-logout:hover {
    color: #fff !important;
    background-color: var(--ledger-danger) !important;
}

/* --------------------------------------------------------------------------
   12. Top navbar
   -------------------------------------------------------------------------- */
.app-navbar {
    background-color: var(--ledger-surface);
    border-bottom: 1px solid var(--ledger-border);
}

.app-navbar .navbar-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ledger-ink);
    letter-spacing: -0.01em;
    margin: 0;
}

.app-navbar .navbar-user {
    color: var(--ledger-muted);
    font-size: 0.875rem;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   13. Login
   -------------------------------------------------------------------------- */
.login-body {
    background-color: var(--ledger-canvas);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.login-card {
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--ledger-border);
    border-radius: var(--ledger-radius-lg);
    box-shadow: var(--ledger-shadow-overlay);
    overflow: hidden;
    background-color: var(--ledger-surface);
}

.login-header {
    background-color: var(--ledger-slate-800);
    color: #fff;
    padding: 1.75rem 1.5rem 1.5rem;
    text-align: center;
}

.login-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--ledger-radius-md);
    background-color: var(--ledger-primary);
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 0.875rem;
}

.login-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    letter-spacing: -0.01em;
}

.login-sub {
    font-size: 0.8125rem;
    color: var(--ledger-on-slate-muted);
    margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   14. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}