/* =============================================================================
   TaxiFacil — Design System
   =============================================================================
   Loaded BEFORE public/css/app.css (see resources/views/layouts/partials/styles.blade.php).

   This file owns cross-page primitives: tokens, resets, layout helpers,
   reusable components (buttons, forms, panels, alerts, badges, tables,
   filter bars, loading/skeleton states) and generic utilities.

   public/css/app.css keeps everything page- or feature-specific (daily
   settlements, reports/charts, calculator, useful guide, workspace
   management, reminders, landing/pricing, admin-only layout tweaks, etc).

   Token naming: the original `--accent` / `--border` / `--ink` / `--muted` /
   `--surface` / ... variables are the single source of truth and MUST keep
   their names, because public/css/admin.css re-declares those exact names
   to re-skin the admin area (indigo palette instead of the default gold/
   green one). The `--color-*` / `--space-*` / etc. tokens below are semantic
   aliases that resolve through those variables, so an admin.css override
   automatically flows through to every semantic token too.
   ========================================================================= */

/* -----------------------------------------------------------------------
   1. Design tokens
   ----------------------------------------------------------------------- */
:root {
    /* Brand (source of truth — re-skinned by public/css/admin.css) */
    --accent:        #f4c542;
    --accent-border: #d9a912;
    --accent-ink:    #2a2110;
    --accent-ring:   rgba(244, 197, 66, 0.25);

    /* Surfaces (source of truth) */
    --bg:           #f5f7f3;
    --surface:      #ffffff;
    --surface-soft: #eef3ee;
    --input-bg:     #fbfcfb;

    /* Strokes & type (source of truth) */
    --border:   #dbe2dc;
    --ink:      #18221d;
    --muted:    #68756d;

    /* Semantic base colors (source of truth) */
    --danger:   #b42318;
    --positive: #08734f;

    /* --- Semantic aliases (safe to use in new code; re-skin automatically) --- */
    --color-brand:        var(--accent);
    --color-brand-border: var(--accent-border);
    --color-brand-ink:    var(--accent-ink);
    --color-focus-ring:   var(--accent-ring);

    --color-bg:             var(--bg);
    --color-surface:        var(--surface);
    --color-surface-subtle: var(--surface-soft);
    --color-surface-input:  var(--input-bg);

    --color-text:       var(--ink);
    --color-text-muted: var(--muted);
    --color-border:     var(--border);

    /* Status pairs (bg + text), matched to the pairing already used most
       widely across the app for each state — see .alert / .status below. */
    --color-success:      var(--positive);
    --color-success-bg:   #dff4e7;
    --color-success-text: #07583d;

    --color-warning-bg:     #fff1bd;
    --color-warning-text:   #795300;
    --color-warning-border: #ead78b;

    --color-danger:      var(--danger);
    --color-danger-bg:   #ffe4df;
    --color-danger-text: #8f1d13;

    --color-info-bg:   #e8edf8;
    --color-info-text: #304d85;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 18px;
    --space-6: 20px;
    --space-7: 24px;
    --space-8: 32px;

    /* Typography scale */
    --font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-md:   16px;
    --text-lg:   18px;
    --text-xl:   22px;
    --text-2xl:  28px;
    --text-3xl:  32px;

    --font-weight-regular:  400;
    --font-weight-medium:   600;
    --font-weight-semibold: 700;
    --font-weight-bold:     800;
    --font-weight-black:    900;

    /* Control heights */
    --control-height-sm: 34px;
    --control-height-md: 40px;

    /* Border-radius scale */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:  14px;
    --radius-full: 999px;

    /* Shadow scale */
    --shadow-sm: 0 1px 2px rgba(24, 34, 29, 0.05);
    --shadow-md: 0 8px 18px rgba(24, 34, 29, 0.18);
    --shadow-lg: 0 18px 45px rgba(24, 34, 29, 0.2);

    /* Z-index layers */
    --z-base:          1;
    --z-raised:         9;
    --z-sticky:        10;
    --z-dropdown:      20;
    --z-tooltip:       30;
    --z-tooltip-arrow: 31;
    --z-overlay:    10000;

    /* Motion durations */
    --duration-fast:    140ms;
    --duration-base:    180ms;
    --duration-slow:    200ms;
    --duration-spin:    700ms;
    --duration-shimmer: 1.4s;
}

/* -----------------------------------------------------------------------
   2. Base element styles
   ----------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: var(--text-base);
    line-height: 1.5;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* -----------------------------------------------------------------------
   3. Layout primitives
   ----------------------------------------------------------------------- */
.page-heading,
.panel-heading,
.actions,
.form-actions,
.table-actions,
.filter-bar {
    align-items: center;
    display: flex;
    gap: var(--space-3);
}

.page-heading {
    justify-content: space-between;
    margin-bottom: 22px;
}

.page-heading h1 {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-black);
    line-height: 1.05;
    margin: 0;
}

.eyebrow {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    margin: 0 0 4px;
    text-transform: uppercase;
}

.actions,
.form-actions,
.table-actions {
    flex-wrap: wrap;
}

.form-actions {
    border-top: 1px solid var(--color-border);
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: var(--space-5);
}

/* -----------------------------------------------------------------------
   4. Reusable components
   ----------------------------------------------------------------------- */

/* --- Buttons ---------------------------------------------------------- */
.button,
button.button {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    cursor: pointer;
    display: inline-flex;
    font-weight: var(--font-weight-bold);
    min-height: 38px;
    padding: 8px 13px;
    text-decoration: none;
}

.button.primary {
    background: var(--color-brand);
    border-color: var(--color-brand-border);
    color: var(--color-brand-ink);
}

.button.danger {
    color: var(--color-danger);
}

.button.print {
    background: var(--color-info-bg);
    border-color: var(--color-info-text);
    color: var(--color-info-text);
}

.button:hover {
    filter: brightness(0.98);
}

.button:focus-visible,
button.button:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.button:disabled,
button.button:disabled {
    cursor: not-allowed;
    opacity: 0.56;
}

.button:disabled:hover,
button.button:disabled:hover {
    filter: none;
}

.button.disabled {
    cursor: not-allowed;
    opacity: 0.56;
    position: relative;
}

.button.disabled:hover {
    filter: none;
}

.button.disabled::after {
    background: var(--color-text);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    color: var(--color-surface);
    content: attr(data-tooltip);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    left: 50%;
    line-height: 1.3;
    max-width: 220px;
    opacity: 0;
    padding: 8px 10px;
    pointer-events: none;
    position: absolute;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    visibility: hidden;
    white-space: normal;
    z-index: var(--z-tooltip);
}

.button.disabled:hover::after,
.button.disabled:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

/* --- Form controls ------------------------------------------------------ */
label,
.field-label {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
}

.required-marker {
    color: var(--color-danger);
}

.field {
    display: grid;
    gap: 7px;
}

.field.full {
    grid-column: 1 / -1;
}

.field-help {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.4;
}

.checkbox-field {
    align-items: center;
    color: var(--color-text-muted);
    display: flex;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    gap: 9px;
}

.checkbox-field input {
    min-height: auto;
    width: auto;
}

input,
select,
textarea {
    background: var(--color-surface-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    min-height: var(--control-height-md);
    padding: 9px 11px;
    width: 100%;
}

textarea {
    min-height: 112px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-brand-border);
    outline: 3px solid var(--color-focus-ring);
}

/* Validation state — additive; no page currently renders these classes,
   introduced so new/migrated forms have a consistent invalid affordance
   without touching existing untouched forms. */
.field.has-error label,
.field.has-error .field-label {
    color: var(--color-danger-text);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
    border-color: var(--color-danger);
}

.field.has-error input:focus,
.field.has-error select:focus,
.field.has-error textarea:focus {
    border-color: var(--color-danger);
    outline-color: rgba(180, 35, 24, 0.25);
}

.field-error {
    color: var(--color-danger-text);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
}

/* --- Panels / cards ------------------------------------------------------ */
.metric,
.panel,
.form-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.panel {
    margin-top: var(--space-5);
    overflow: hidden;
}

.panel-heading {
    border-bottom: 1px solid var(--color-border);
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
}

.panel-heading h2 {
    font-size: var(--text-lg);
    margin: 0;
}

.panel-heading a {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
}

/* --- Alerts ---------------------------------------------------------- */
.alert {
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
    padding: 13px 15px;
}

.alert ul {
    font-weight: var(--font-weight-medium);
    margin: var(--space-2) 0 0 20px;
    padding: 0;
}

.alert.success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.alert.error {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.alert.warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.alert.info {
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

/* --- Badges / pills / status ------------------------------------------ */
.status,
.pill {
    align-items: center;
    border-radius: var(--radius-full);
    display: inline-flex;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    min-height: 26px;
    padding: 4px 9px;
    white-space: nowrap;
}

.status {
    background: #edf1ed;
    color: var(--color-text);
}

.status-active,
.status-income,
.status-paid {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.status-maintenance {
    background: #fff2bf;
    color: #6d4b00;
}

.status-pending {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.status-unpaid {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.status-inactive,
.status-expense {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.pill {
    background: var(--color-surface-subtle);
    color: var(--color-text);
}

.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* --- Tables ------------------------------------------------------------ */
.table-wrap {
    overflow-x: auto;
}

table {
    border-collapse: collapse;
    min-width: 760px;
    width: 100%;
}

th,
td {
    border-bottom: 1px solid var(--color-border);
    padding: 13px var(--space-5);
    text-align: left;
    vertical-align: middle;
}

th {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
}

tbody tr:last-child td {
    border-bottom: 0;
}

.empty {
    color: var(--color-text-muted);
    padding: var(--space-7) var(--space-5);
    text-align: center;
}

/* --- Filter bar ---------------------------------------------------------- */
.filter-bar {
    align-items: flex-end;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    column-gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    row-gap: var(--space-3);
}

.filter-bar > :is(.field, select, input) {
    flex: 1 1 180px;
    max-width: 240px;
    min-width: 160px;
}

.filter-bar > .button {
    flex: 0 0 auto;
    justify-content: center;
    min-width: 92px;
}

.filter-bar > .month-filter {
    flex-basis: 300px;
    max-width: 340px;
}

/* --- Loading / skeleton states ------------------------------------------ */
.ui-blocker {
    align-items: center;
    background: rgba(24, 34, 29, 0.38);
    backdrop-filter: blur(2px);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: var(--space-7);
    position: fixed;
    z-index: var(--z-overlay);
}

.ui-blocker[hidden] {
    display: none;
}

.ui-blocker-skeleton-mode {
    background: rgba(245, 247, 243, 0.92);
}

.ui-blocker-skeleton-mode .ui-blocker-card {
    display: none;
}

.ui-blocker-card {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    font-weight: var(--font-weight-bold);
    gap: var(--space-3);
    min-width: 150px;
    padding: 16px 20px;
    position: relative;
    z-index: 2;
}

.ui-blocker-spinner {
    animation: ui-blocker-spin var(--duration-spin) linear infinite;
    border: 3px solid var(--color-border);
    border-radius: 50%;
    border-top-color: var(--color-brand-border);
    display: inline-block;
    flex: 0 0 auto;
    height: 24px;
    width: 24px;
}

body.ui-blocked {
    cursor: wait;
    overflow: hidden;
}

.ui-blocker-skeleton {
    display: none;
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1180px);
    inset: 0;
    justify-content: center;
    overflow: hidden;
    padding: var(--space-7);
    pointer-events: none;
    position: absolute;
}

.ui-blocker-skeleton-mode .ui-blocker-skeleton {
    display: grid;
}

.ui-blocker-app-layout .ui-blocker-skeleton {
    grid-template-columns: 230px minmax(0, 1fr);
    justify-content: stretch;
    padding: var(--space-4);
}

.ui-blocker-skeleton-sidebar,
.ui-blocker-skeleton-topbar,
.ui-blocker-skeleton-filters,
.ui-blocker-skeleton-panel {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.ui-blocker-skeleton-sidebar {
    display: none;
    flex-direction: column;
    gap: var(--space-5);
    padding: 22px var(--space-4);
}

.ui-blocker-app-layout .ui-blocker-skeleton-sidebar {
    display: flex;
}

.ui-blocker-skeleton-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.ui-blocker-skeleton-topbar {
    align-items: center;
    display: flex;
    flex: 0 0 64px;
    justify-content: space-between;
    padding: 14px var(--space-4);
}

.ui-blocker-skeleton-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(4px, 2vw, 24px);
}

.ui-skeleton-block {
    animation: ui-blocker-shimmer var(--duration-shimmer) ease-in-out infinite;
    background: linear-gradient(90deg, #e5ebe5 25%, #f4f7f4 45%, #e5ebe5 65%);
    background-size: 240% 100%;
    border-radius: var(--radius-md);
    display: block;
    height: 16px;
}

.ui-skeleton-brand {
    height: 32px;
    margin-bottom: var(--space-5);
    width: 72%;
}

.ui-skeleton-nav-wide {
    width: 88%;
}

.ui-skeleton-nav-medium {
    width: 72%;
}

.ui-skeleton-nav-short {
    width: 58%;
}

.ui-skeleton-topbar-menu {
    height: 30px;
    width: 30px;
}

.ui-skeleton-avatar {
    border-radius: 50%;
    height: 36px;
    width: 36px;
}

.ui-skeleton-title {
    height: 30px;
    width: min(280px, 62%);
}

.ui-skeleton-subtitle {
    margin-bottom: var(--space-2);
    width: min(440px, 78%);
}

.ui-blocker-skeleton-filters {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: var(--space-4);
}

.ui-blocker-skeleton-filters .ui-skeleton-block {
    height: 54px;
}

[data-ui-skeleton-context="dashboard"] .ui-blocker-skeleton-filters .ui-skeleton-block:nth-child(6) {
    display: none;
}

[data-ui-skeleton-context="report"] .ui-blocker-skeleton-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-blocker-skeleton-metrics {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--space-2);
}

.ui-blocker-skeleton-metrics .ui-skeleton-block {
    height: 104px;
}

[data-ui-skeleton-context="financial-entries"] .ui-blocker-skeleton-metrics {
    display: none;
}

[data-ui-skeleton-context="report"] .ui-blocker-skeleton-metrics .ui-skeleton-block:nth-child(3) {
    display: none;
}

.ui-blocker-skeleton-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-top: 4px;
    padding: var(--space-7);
}

.ui-skeleton-panel-title {
    height: 22px;
    width: 42%;
}

.ui-blocker-skeleton-table {
    display: grid;
    gap: var(--space-5) var(--space-7);
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ui-blocker-skeleton-panel-secondary .ui-blocker-skeleton-table {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ui-blocker-skeleton-table .ui-skeleton-block:nth-child(3n) {
    width: 72%;
}

.ui-blocker-skeleton-table .ui-skeleton-block:nth-child(4n) {
    width: 86%;
}

.ui-blocker-skeleton-chart {
    display: none;
    height: min(38vh, 360px);
    width: 100%;
}

[data-ui-skeleton-context="financial-entries"] .ui-blocker-skeleton-panel-secondary,
[data-ui-skeleton-context="financial-entries"] .ui-skeleton-panel-title,
[data-ui-skeleton-context="report"] .ui-blocker-skeleton-panel-secondary,
[data-ui-skeleton-context="report"] .ui-blocker-skeleton-table {
    display: none;
}

[data-ui-skeleton-context="report"] .ui-blocker-skeleton-chart {
    display: block;
}

@keyframes ui-blocker-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ui-blocker-shimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}

/* -----------------------------------------------------------------------
   5. Utility classes
   ----------------------------------------------------------------------- */
.sr-only {
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.subtext,
.muted {
    color: var(--color-text-muted);
}

.subtext {
    display: block;
    font-size: var(--text-sm);
}

.positive {
    color: var(--color-success);
    font-weight: var(--font-weight-bold);
}

.negative {
    color: var(--color-danger);
    font-weight: var(--font-weight-bold);
}

/* -----------------------------------------------------------------------
   6. Responsive rules
   ----------------------------------------------------------------------- */
/* Single breakpoint used across the app; kept in sync with app.css. */

/* app.css continues to own the @media (max-width: 860px) overrides for
   selectors it defines — it loads after this file, so its rules still win
   at equal specificity. The rules below only cover behavior owned by this
   file's own components (buttons, actions rows) and do not repeat
   anything app.css already overrides. */

@media (max-width: 860px) {
    /* Bigger tap targets for every button on touch screens. */
    .button,
    button.button {
        min-height: 44px;
    }

    /* Action rows (page-header CTAs, form footers, table row actions)
       become full-width stacked buttons instead of cramped inline rows. */
    .actions,
    .form-actions,
    .table-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .actions .button,
    .form-actions .button,
    .table-actions .button,
    .table-actions form {
        width: 100%;
    }

    .actions .button,
    .form-actions .button,
    .table-actions .button {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-blocker-spinner {
        animation: none;
        border-right-color: var(--color-brand-border);
    }

    .ui-skeleton-block {
        animation: none;
        background: #e5ebe5;
    }
}