/* ==========================================================================
   Náutica Theme — Bootstrap 5.3 CSS Variable Remap
   ==========================================================================
   Single shared stylesheet for the entire application.
   Loaded AFTER Bootstrap so it overrides CSS variables.
   Light mode only — no dark mode variant.
   ========================================================================== */

/* --- Color Palette (CSS Variables) --- */
:root {
    /* Primary (teal marino) */
    --bs-primary: #0c7d8c;
    --bs-primary-rgb: 12, 125, 140;
    --bs-primary-hover: #0a6673;

    /* Deep (azul profundidad) - structural band color */
    --bs-deep: #0b3d52;
    --bs-deep-rgb: 11, 61, 82;

    /* Accent (coral) - spotlight exactly ONE thing per screen */
    --bs-accent: #ff7a45;
    --bs-accent-rgb: 255, 122, 69;

    /* Background & Surface */
    --bs-body-bg: #eef5f7;
    --bs-body-bg-rgb: 238, 245, 247;
    --bs-surface: #ffffff;
    --bs-surface-rgb: 255, 255, 255;

    /* Text */
    --bs-body-color: #123540;
    --bs-body-color-rgb: 18, 53, 64;
    --bs-muted: #5c7883;
    --bs-muted-rgb: 92, 120, 131;

    /* Borders */
    --bs-border-color: #d3e2e6;
    --bs-border-color-rgb: 211, 226, 230;

    /* State Colors (UX-DR5 contract - binding, not decoration) */
    /* success = paid / in-force */
    --bs-success: #146b4a;
    --bs-success-rgb: 20, 107, 74;
    --bs-success-bg: #d7f0e5;
    --bs-success-bg-rgb: 215, 240, 229;

    /* warning = pending / expiring */
    --bs-warning: #d98218;
    --bs-warning-rgb: 217, 130, 24;
    --bs-warning-bg: #fdf1de;
    --bs-warning-bg-rgb: 253, 241, 222;
    /* Note: warning TEXT uses #8a5410 for contrast (UX-DR6) */
    --bs-warning-text: #8a5410;
    --bs-warning-text-rgb: 138, 84, 16;

    /* danger = expired / cancelled */
    --bs-danger: #b02a2a;
    --bs-danger-rgb: 176, 42, 42;
    --bs-danger-bg: #fbe3e3;
    --bs-danger-bg-rgb: 251, 227, 227;

    /* Focus ring uses primary */
    --bs-focus-ring-color: rgba(12, 125, 140, 0.25);

    /* Link color */
    --bs-link-color: #0c7d8c;
    --bs-link-hover-color: #0a6673;

    /* Radii */
    --bs-border-radius-sm: 0.375rem;    /* 6px - inputs, badge host chips */
    --bs-border-radius: 0.625rem;       /* 10px - buttons, cards, alerts (md) */
    --bs-border-radius-lg: 0.75rem;     /* 12px - modals, empty-state card (lg) */
    --bs-border-radius-pill: 9999px;    /* pills/status badges (full) */
}

/* --- Typography --- */
/* System font stack (Bootstrap native) - UX-DR2 */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 0.9375rem; /* 15px */
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--bs-body-color);
}

/* Label typography: 11px/700/uppercase/letter-spacing */
label,
.form-label,
.col-form-label,
.table thead th,
.badge-label {
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-muted);
}

/* Tabular numerals for money/quantity columns - UX-DR3 */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* --- Page Header Band (deep #0b3d52) --- */
.bg-deep {
    background-color: var(--bs-deep) !important;
}

/* --- Navigation --- */
.nav-primary .nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    border-radius: var(--bs-border-radius-sm);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-primary .nav-link:hover,
.nav-primary .nav-link:focus {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-primary .nav-link.active {
    color: #ffffff;
    background-color: var(--bs-primary);
}

/* --- Buttons --- */
.btn {
    border-radius: var(--bs-border-radius);
    font-weight: 500;
}

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

/* --- Cards --- */
.card {
    border-radius: var(--bs-border-radius);
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-surface);
    box-shadow: none; /* UX-DR7: hierarchy from deep band + borders, not stacked shadows */
}

.card-header {
    background-color: var(--bs-surface);
    border-bottom: 1px solid var(--bs-border-color);
}

/* --- Tables --- */
/* Deep table header - UX-DR9 */
.table thead th {
    background-color: var(--bs-deep);
    color: #ffffff;
    border-color: var(--bs-deep);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.6875rem; /* 11px */
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(0, 0, 0, 0.02);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(0, 0, 0, 0.04);
}

/* Cancelled ledger entries - muted + strikethrough */
.table .cancelled-entry {
    color: var(--bs-muted);
    text-decoration: line-through;
}

/* --- Form Controls --- */
.form-control,
.form-select {
    border-radius: var(--bs-border-radius-sm);
    border-color: var(--bs-border-color);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

/* --- Badges --- */
/* Status badges - pill shaped, one badge = one meaning (UX-DR5, DR11) */
.badge {
    border-radius: var(--bs-border-radius-pill);
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.375em 0.75em;
}

/* badge-paid = success */
.badge-paid {
    background-color: var(--bs-success-bg);
    color: var(--bs-success);
}

/* badge-pending = warning (uses warning-text for contrast floor ≥ 4.5:1) */
.badge-pending {
    background-color: var(--bs-warning-bg);
    color: var(--bs-warning-text);
}

/* badge-expired = danger */
.badge-expired {
    background-color: var(--bs-danger-bg);
    color: var(--bs-danger);
}

/* --- Empty State Card (Guided) - UX-DR15 --- */
.empty-state-card {
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-surface);
    padding: 3rem 2rem;
    text-align: center;
}

.empty-state-card .empty-state-icon {
    font-size: 3rem;
    color: var(--bs-muted);
    margin-bottom: 1rem;
}

.empty-state-card .empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 0.5rem;
}

.empty-state-card .empty-state-text {
    color: var(--bs-muted);
    margin-bottom: 1.5rem;
}

.empty-state-card .empty-state-action {
    /* Primary action button - always present per UX-DR15 */
}

/* --- Dropdowns --- */
.dropdown-menu {
    border-radius: var(--bs-border-radius);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Shadow only for transient layers */
}

.dropdown-item {
    border-radius: var(--bs-border-radius-sm);
}

/* --- Modals --- */
.modal-content {
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Shadow for transient layer */
}

/* --- Alerts --- */
.alert {
    border-radius: var(--bs-border-radius);
    border: none;
}

/* --- Focus Visible --- */
:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* --- Utility Classes --- */
.text-deep { color: var(--bs-deep) !important; }
.bg-deep { background-color: var(--bs-deep) !important; }
.text-accent { color: var(--bs-accent) !important; }
.bg-accent { background-color: var(--bs-accent) !important; }

/* --- Print Styles --- */
@media print {
    .no-print { display: none !important; }
}