:root {
    --bg: #f4f6f8;
    --card-bg: #ffffff;
    --border: #dde3ea;
    --text: #1f2933;
    --muted: #64748b;
    --primary: #1b5e3c;
    --primary-dark: #12432a;
    --primary-contrast: #ffffff;
    --danger: #b3261e;
    --danger-bg: #fdecea;
    --success-bg: #eaf6ee;
    --success-text: #1b5e3c;
    --info-bg: #eaf1fb;
    --info-text: #1c4b8c;
    --radius: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
    background: var(--primary);
    color: var(--primary-contrast);
}
.topbar-inner {
    max-width: 1900px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 56px;
}
.brand { color: #fff; font-weight: 700; font-size: 18px; }
.brand span { font-weight: 400; opacity: .85; }
.topnav { display: flex; gap: 18px; flex: 1; flex-wrap: wrap; }
.topnav a { color: rgba(255,255,255,.9); font-size: 14px; }
.topnav a:hover { color: #fff; text-decoration: underline; }
.topbar-user { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.topbar-user small { opacity: .75; }

.page {
    max-width: 1900px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

h1 { font-size: 22px; margin: 0 0 18px; }
h2 { font-size: 18px; margin: 24px 0 12px; }

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
}

.flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; }
.flash-success { background: var(--success-bg); color: var(--success-text); }
.flash-error { background: var(--danger-bg); color: var(--danger); }
.flash-info { background: var(--info-bg); color: var(--info-text); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td {
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
tbody tr:hover { background: #fafbfc; }
.table-wrap { overflow-x: auto; }

/* Dense data tables (car list): headers are long Lithuanian phrases that,
   left nowrap, force each column far wider than the data actually
   occupies. Letting header text wrap onto two lines (while data cells
   stay nowrap, since the data itself is short) reclaims most of that
   width without losing any information. */
table.table-dense { font-size: 13px; }
table.table-dense th, table.table-dense td { padding: 7px 8px; }
table.table-dense th {
    white-space: normal;
    line-height: 1.25;
    vertical-align: bottom;
}
table.table-dense td { white-space: nowrap; }
/* The sticky actions cell is also a flex container (.actions); without this
   it wraps its 3 buttons into a narrow stacked column instead of staying
   on one line, which paradoxically makes the whole table narrower but the
   actions column absurdly tall. Keep it to a single row. */
table.table-dense td.actions { flex-wrap: nowrap; gap: 4px; }

td.copyable { cursor: copy; }
td.copyable:hover { background: #eef6f1; }
td.copyable.copied { background: #cdeedb; }

/* Keep the row action buttons (Peržiūrėti/Redaguoti/Ištrinti) reachable
   without scrolling a wide table sideways — pin that column to the right
   edge of the scroll area instead. */
th.actions-col, td.actions {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--card-bg);
    box-shadow: 6px 0 6px -6px rgba(0, 0, 0, 0.25);
}
tbody tr:hover td.actions { background: #fafbfc; }

.btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
}
.btn:hover { background: #f0f2f5; text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-danger { color: var(--danger); border-color: #f0c9c6; }
.btn-danger:hover { background: var(--danger-bg); }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-xs { padding: 2px 6px; font-size: 11px; }

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

form .field { margin-bottom: 14px; }
form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--muted); }
form input[type=text], form input[type=date], form input[type=password], form input[type=number],
form select, form textarea, form input[type=file] {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--text);
}
form textarea { min-height: 90px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 20px; }
.hint { color: var(--muted); font-size: 12px; margin-top: 4px; }

.login-wrap {
    max-width: 380px;
    margin: 80px auto;
}
.login-wrap h1 { text-align: center; }

.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #1f2933;
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
    z-index: 100;
}
.toast.show { opacity: 1; transform: translateY(0); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.badge-admin { background: #fde7c7; color: #7a4d00; }
.badge-user { background: #e2e8f0; color: var(--muted); }

.diff-line { font-size: 20px; font-family: "SF Mono", Consolas, monospace; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; cursor: copy; background: #fff; }
.diff-line:hover { background: #eef6f1; }
.diff-line .pct { color: var(--primary); font-weight: 600; }

.filters { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: end; }
.filters .field { margin-bottom: 0; min-width: 180px; }

.empty-state { color: var(--muted); padding: 30px; text-align: center; }

.pill { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--info-bg); color: var(--info-text); }

/* Papers-done status toggle (cars list + car view). A plain button styled
   as a small pill so it reads as a status badge, but stays clickable to
   flip the state. */
.status-toggle {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--muted);
    white-space: nowrap;
}
.status-toggle:hover { background: #f0f2f5; }
.status-toggle.is-done {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-text);
}
.status-toggle.is-done:hover { background: #d9f2e3; }

/* Rows whose papers are already sutvarkyti sink to the bottom of the list
   (see cars/list.php ORDER BY) and are visually muted so open items stand
   out at a glance. */
tr.row-done { opacity: .55; }
tr.row-done:hover { opacity: .9; }

/* Mini calendar date picker: a plain text input (always dd.mm.yyyy, immune to the
   visitor's browser/OS locale - unlike native <input type=date>) plus a small button
   that opens a click-to-pick calendar dropdown. See matkavahvistus/create.php. */
.datepick { display: flex; align-items: center; gap: 6px; }
.datepick input { flex: 1; min-width: 0; }
.datepick-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--muted);
}
.datepick-btn:hover { background: var(--bg); }
.mini-cal-popup {
    display: none;
    position: absolute;
    z-index: 1000;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: 10px;
    width: 240px;
    font-size: 13px;
}
.mini-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 600; }
.mini-cal-head button { border: none; background: none; cursor: pointer; font-size: 15px; color: var(--primary); padding: 2px 8px; }
.mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.mini-cal-dow { color: var(--muted); font-size: 11px; padding: 4px 0; }
.mini-cal-day { border: none; background: none; cursor: pointer; padding: 6px 0; border-radius: 6px; font-size: 13px; color: var(--text); }
.mini-cal-day:hover { background: var(--bg); }
.mini-cal-day.today { font-weight: 700; color: var(--primary); }
.mini-cal-day.sel { background: var(--primary); color: #fff; }