/* ============================================================
   riga-contratto.css
   Theme tokens + component styles for _RigaContratto.cshtml
   Apply a theme by setting data-theme on <body> or any wrapper.
   Default (no attribute) = light.
   ============================================================ */

/* ── Light ─────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
    --rv-bg:            #ffffff;
    --rv-surface:       #f8f7f6;
    --rv-border:        #e2e0d8;
    --rv-border-h:      #c8c5bc;
    --rv-text:          #1a1917;
    --rv-muted:         #888780;
    --rv-hint:          #b4b2a9;
    --rv-input-bg:      #ffffff;
    --rv-input-border:  #e2e0d8;
    --rv-input-focus:   #888780;
    --rv-tbl-head:      #f4f3f0;
    --rv-empty-border:  #d3d1c7;
    --rv-btn-hover:     #f1efe8;
    --rv-btn-text:      #5f5e5a;
    --rv-badge-bg:      #f1efe8;
    --rv-badge-text:    #5f5e5a;
    --rv-badge-border:  #d3d1c7;
    --rv-badge-on-bg:   #e1f5ee;
    --rv-badge-on-text: #085041;
    --rv-badge-on-bdr:  #5dcaa5;
    --rv-primary:       #185fa5;
    --rv-primary-hover: #e6f1fb;
    --rv-danger-hover:  #fcebeb;
    --rv-danger-text:   #e24b4a;
    --rv-chk-accent:    #1d9e75;
}

/* ── Pastel ─────────────────────────────────────────────────── */
[data-theme="pastel"] {
    --rv-bg:            #fdf8f3;
    --rv-surface:       #faf3ec;
    --rv-border:        #e8d8c8;
    --rv-border-h:      #c8aa90;
    --rv-text:          #4a3728;
    --rv-muted:         #9a7a66;
    --rv-hint:          #c4a890;
    --rv-input-bg:      #fdf8f3;
    --rv-input-border:  #e8d8c8;
    --rv-input-focus:   #9a7a66;
    --rv-tbl-head:      #f5ede4;
    --rv-empty-border:  #dcc4b0;
    --rv-btn-hover:     #f5ede4;
    --rv-btn-text:      #7a5a48;
    --rv-badge-bg:      #f5ede4;
    --rv-badge-text:    #7a5a48;
    --rv-badge-border:  #dcc4b0;
    --rv-badge-on-bg:   #e8f5ee;
    --rv-badge-on-text: #2d6a4a;
    --rv-badge-on-bdr:  #8dcaaa;
    --rv-primary:       #7a5a48;
    --rv-primary-hover: #f5ede4;
    --rv-danger-hover:  #fdf0ee;
    --rv-danger-text:   #c05040;
    --rv-chk-accent:    #6aaa88;
}

/* ── Dark ───────────────────────────────────────────────────── */
[data-theme="dark"] {
    --rv-bg:            #1e1c1a;
    --rv-surface:       #2a2826;
    --rv-border:        #3a3835;
    --rv-border-h:      #5a5855;
    --rv-text:          #f0ede8;
    --rv-muted:         #888780;
    --rv-hint:          #5f5e5a;
    --rv-input-bg:      #1e1c1a;
    --rv-input-border:  #3a3835;
    --rv-input-focus:   #888780;
    --rv-tbl-head:      #242220;
    --rv-empty-border:  #3a3835;
    --rv-btn-hover:     #2a2826;
    --rv-btn-text:      #a0a09a;
    --rv-badge-bg:      #2a2826;
    --rv-badge-text:    #888780;
    --rv-badge-border:  #3a3835;
    --rv-badge-on-bg:   #0d3024;
    --rv-badge-on-text: #5dcaa5;
    --rv-badge-on-bdr:  #0f6e56;
    --rv-primary:       #85b7eb;
    --rv-primary-hover: #0c2a42;
    --rv-danger-hover:  #3a1a1a;
    --rv-danger-text:   #f09595;
    --rv-chk-accent:    #5dcaa5;
}

/* ============================================================
   Component styles — all use var(--rv-*) tokens
   ============================================================ */

.rv-card {
    border: .5px solid var(--rv-border);
    border-radius: 12px;
    margin-bottom: .75rem;
    overflow: hidden;
    background: var(--rv-bg);
    transition: border-color .15s;
}
.rv-card:hover { border-color: var(--rv-border-h); }

/* header button */
.rv-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: .9rem 1.1rem;
    cursor: pointer;
    user-select: none;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}

/* vehicle icon */
.rv-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vi { width: 28px; height: 28px; }

/* info block */
.rv-info  { flex: 1; min-width: 0; }
.rv-name  { font-size: 14px; font-weight: 500; color: var(--rv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-sub   { font-size: 12px; color: var(--rv-muted); margin-top: 2px; }

/* badge + chevron */
.rv-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.rv-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    background: var(--rv-badge-bg);
    color: var(--rv-badge-text);
    border: .5px solid var(--rv-badge-border);
    transition: background .2s, color .2s, border-color .2s;
}
.rv-badge--on {
    background: var(--rv-badge-on-bg);
    color: var(--rv-badge-on-text);
    border-color: var(--rv-badge-on-bdr);
}

.rv-chev {
    width: 16px;
    height: 16px;
    color: var(--rv-muted);
    transition: transform .2s;
    flex-shrink: 0;
}
.rv-card.is-open .rv-chev { transform: rotate(180deg); }

/* collapsible body */
.rv-body {
    padding: 0 1.1rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .2s;
}
.rv-card.is-open .rv-body {
    max-height: 1200px;
    padding: .25rem 1.1rem 1.25rem;
}

/* note field */
.rv-note label { font-size: 12px; color: var(--rv-muted); display: block; margin-bottom: 4px; }
.rv-note input {
    width: 100%;
    font-size: 13px;
    padding: 6px 10px;
    border: .5px solid var(--rv-input-border);
    border-radius: 8px;
    background: var(--rv-input-bg);
    color: var(--rv-text);
    outline: none;
    margin-bottom: .9rem;
}
.rv-note input:focus { border-color: var(--rv-input-focus); }

/* empty state */
.rv-empty {
    text-align: center;
    padding: 1.2rem;
    color: var(--rv-muted);
    font-size: 13px;
    border: .5px dashed var(--rv-empty-border);
    border-radius: 8px;
    margin-bottom: .75rem;
}

/* table */
.rv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: .75rem;
    table-layout: fixed;
}
.rv-table th {
    font-size: 11px;
    font-weight: 500;
    color: var(--rv-muted);
    padding: 5px 7px;
    text-align: left;
    border-bottom: .5px solid var(--rv-border);
    background: var(--rv-tbl-head);
    white-space: nowrap;
}
.rv-table td {
    padding: 4px 6px;
    border-bottom: .5px solid var(--rv-border);
    vertical-align: middle;
    color: var(--rv-text);
}
.rv-table tbody tr:hover td { background: var(--rv-surface); }

.rv-table input[type="text"],
.rv-table input[type="number"],
.rv-table input[type="time"] {
    width: 100%;
    font-size: 12px;
    padding: 3px 5px;
    border: .5px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--rv-text);
}
.rv-table input:focus {
    border-color: var(--rv-input-focus);
    background: var(--rv-input-bg);
    outline: none;
}

.rv-chk { width: 15px; height: 15px; cursor: pointer; accent-color: var(--rv-chk-accent); }

/* column widths */
.col-n    { width: 28px; color: var(--rv-hint); font-size: 11px; text-align: center; }
.col-val  { width: 80px; }
.col-chk  { width: 52px; text-align: center; }
.col-time { width: 80px; }
.col-act  { width: 28px; text-align: center; }

/* action row */
.rv-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: .25rem; }

.rv-btn {
    font-size: 12px;
    font-weight: 500;
    padding: 6px 14px;
    border: .5px solid var(--rv-border-h);
    border-radius: 8px;
    background: transparent;
    color: var(--rv-btn-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    transition: background .1s, color .1s;
}
.rv-btn:hover { background: var(--rv-btn-hover); color: var(--rv-text); }

.rv-btn--primary { border-color: var(--rv-primary); color: var(--rv-primary); }
.rv-btn--primary:hover { background: var(--rv-primary-hover); }

.rv-btn-del {
    background: none;
    border: none;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: var(--rv-hint);
    line-height: 1;
}
.rv-btn-del:hover { color: var(--rv-danger-text); background: var(--rv-danger-hover); }

/* ── Theme switcher bar ─────────────────────────────────────── */
.rv-theme-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1.25rem;
}
.rv-theme-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rv-muted);
}
.rv-theme-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: .5px solid var(--rv-border);
    border-radius: 20px;
    background: transparent;
    color: var(--rv-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.rv-theme-btn:hover  { background: var(--rv-btn-hover); border-color: var(--rv-border-h); color: var(--rv-text); }
.rv-theme-btn.active { background: var(--rv-surface);   border-color: var(--rv-border-h); color: var(--rv-text); }

.rv-theme-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: .5px solid var(--rv-border-h);
}