/* ============================================================
   NT Rent — components.css
   Korteles, lenteles, modalai, toast, badge, skeleton ir kt.
   ============================================================ */

/* ============================================================
   Korteles (Cards)
   ============================================================ */
.card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-white);
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.card-body { padding: 1.25rem; }
.card-footer {
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

/* KPI kortelė (dashboard) */
.kpi-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    display: flex;
    align-items: stretch;
    gap: 1rem;
    min-height: 90px;
}

.kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    align-self: center;
}
.kpi-icon.blue    { background: #dceee0; color: var(--color-primary); }
.kpi-icon.green   { background: #dcfce7; color: var(--color-success); }
.kpi-icon.orange  { background: #ffedd5; color: #ea580c; }
.kpi-icon.red     { background: #fee2e2; color: var(--color-danger); }
.kpi-icon.purple  { background: #f3e8ff; color: #9333ea; }

.kpi-body { display: flex; flex-direction: column; flex: 1; align-items: center; }
.kpi-label { font-size: .8125rem; color: var(--color-muted); margin-bottom: 0; }
.kpi-value { font-size: 1.625rem; font-weight: 700; line-height: 1.1; flex: 1; display: flex; align-items: center; }
.kpi-value-sep { font-size: 1rem; font-weight: 400; color: var(--color-muted); margin: 0 .25rem; }

a.kpi-card-link {
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, border-color .15s, transform .1s;
    cursor: pointer;
}
a.kpi-card-link:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(90,122,58,.15);
    transform: translateY(-1px);
    text-decoration: none;
    color: inherit;
}

/* ============================================================
   Lenteles (Tables)
   ============================================================ */
.table-wrapper {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    gap: 1rem;
    flex-wrap: wrap;
}

.table-title { font-size: 1rem; font-weight: 600; margin: 0; }

.table-responsive { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
    max-width: 100%;
}

table th {
    text-align: left;
    padding: .3rem .6rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--color-muted);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    background: var(--color-bg);
}

table td {
    padding: .2rem .6rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    font-size: .75rem;
    line-height: 1.3;
}

/* Veiksmų stulpelis — mygtukai visada vienoje eilutėje */
table td.td-actions {
    white-space: nowrap;
    width: 1%;
}

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

/* Klientu gridas: DESKTOP'e (>=901px) per ilgi laukai nukertami su "..." (pilna
   reiksme per title/ALT teksta), kiekvienam stulpeliui savas max-width. Mobiliame
   (<=900px) sio apribojimo NEDEDAME - ten DataTables Responsive plėtinys pats
   paslepia stulpelius uz "+" ikonos ir issikleidzia per issklaidoma eilute
   (jau naudojama kituose gridose - žr. dt-style skill, app.js accordion logika),
   o ne table-layout:fixed, kuris trukdytu Responsive plotio skaiciavimams. */
@media (min-width: 901px) {
    .dt-table-clients td:nth-child(1), .dt-table-clients th:nth-child(1) { max-width: 260px; }
    .dt-table-clients td:nth-child(2), .dt-table-clients th:nth-child(2) { max-width: 110px; }
    .dt-table-clients td:nth-child(3), .dt-table-clients th:nth-child(3) { max-width: 110px; }
    .dt-table-clients td:nth-child(4), .dt-table-clients th:nth-child(4) { max-width: 200px; }
    .dt-table-clients td:nth-child(5), .dt-table-clients th:nth-child(5) { max-width: 120px; }
    .dt-table-clients td:not(.td-actions):not(.dtr-control),
    .dt-table-clients th:not(.td-actions) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

table tbody tr.row-inactive td { color: var(--color-muted); }
table tbody tr:hover td { background: #f8fafc; }

/* DataTables override */
table.dataTable thead th { border-bottom: 1px solid var(--color-border) !important; }
table.dataTable.no-footer { border-bottom: none !important; }
.dataTables_wrapper { padding: 0 !important; width: 100% !important; overflow: hidden !important; }
/* DataTables Responsive child row — custom expand icon */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
    position: relative !important;
    padding-left: 1.25rem !important;
    cursor: pointer;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    position: absolute !important;
    top: 50% !important;
    left: 2px !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    margin-top: 0 !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    content: '\f105' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-size: .75rem !important;
    line-height: 1 !important;
    color: var(--color-primary) !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before {
    content: '\f107' !important;
    transform: translateY(-50%) !important;
}
/* Lentelių mygtukai — tik ikonėlė, baltas fonas */
table td .btn {
    font-size: 0 !important;
    padding: .2rem .35rem !important;
    min-width: 1.65rem !important;
    height: 1.65rem !important;
    background: #fff !important;
    border-color: var(--color-border) !important;
    color: var(--color-muted) !important;
}
table td .btn [class*="fa-"] { font-size: .75rem !important; }
table td .btn:hover { background: var(--color-bg) !important; }
table td .btn.btn-primary { color: var(--color-primary) !important; border-color: var(--color-primary) !important; }
table td .btn.btn-primary:hover { background: #f0f7eb !important; }
table td .btn.btn-danger  { color: #dc2626 !important; border-color: #fca5a5 !important; }
table td .btn.btn-danger:hover  { background: #fee2e2 !important; }
table td .btn.btn-success { color: #16a34a !important; border-color: #86efac !important; }
table td .btn.btn-success:hover { background: #dcfce7 !important; }
table td .btn.btn-info    { color: #2563eb !important; border-color: #93c5fd !important; }
table td .btn.btn-info:hover    { background: #eff6ff !important; }
table td .btn.btn-navy    { color: #1e3a8a !important; border-color: #1e3a8a !important; }
table td .btn.btn-navy:hover    { background: #e0e7ff !important; }
table td .btn.btn-warning { color: #d97706 !important; border-color: #fcd34d !important; }
table td .btn.btn-warning:hover { background: #fef3c7 !important; }
table td .btn:disabled,
table td .btn[disabled] { color: var(--color-border) !important; border-color: var(--color-border) !important; background: #fff !important; cursor: not-allowed !important; opacity: 1 !important; }
table td .btn:disabled:hover,
table td .btn[disabled]:hover { background: #fff !important; }
/* Responsive child row details */
tr.child td.child { background: var(--color-bg) !important; }
tr.child ul.dtr-details { width: 100%; }
tr.child ul.dtr-details li { border-bottom: 1px solid var(--color-border); padding: .375rem 0; font-size: .875rem; }
/* DataTables viršus: tik paieška */
.dt-top { padding: .4rem .6rem; display: flex; justify-content: space-between; align-items: center; }
.dataTables_filter { padding: 0; }
.dataTables_filter label { display: flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: .75rem; color: var(--color-muted); margin: 0; }
.dataTables_filter input { border: 1.5px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; padding: .2rem .5rem !important; font-size: .75rem !important; width: 160px; min-width: 80px; flex-shrink: 1; }
.dt-top { max-width: 100%; box-sizing: border-box; }

/* DataTables apačia: length + info kairiau, pagination dešiniau, viena eilutė */
.dt-bottom { display: flex; align-items: center; justify-content: space-between; padding: .35rem 1rem; gap: 1rem; flex-wrap: nowrap; }
.dt-bottom-left { display: flex; align-items: center; gap: .75rem; line-height: 1; }
.dataTables_length { padding: 0 !important; float: none !important; display: flex; align-items: center; }
.dataTables_length label { display: flex; align-items: center; gap: .3rem; font-size: .75rem !important; color: var(--color-muted); margin: 0; line-height: 1; }
.dataTables_length select { border: 1.5px solid var(--color-border) !important; border-radius: var(--radius-sm) !important; padding: .15rem .3rem !important; font-size: .75rem !important; height: 1.5rem; vertical-align: middle; }
.dataTables_info { padding: 0 !important; float: none !important; font-size: .75rem !important; color: var(--color-muted); white-space: nowrap; display: flex; align-items: center; line-height: 1; }
.dataTables_paginate { padding: 0 !important; float: none !important; font-size: .75rem; color: var(--color-muted); white-space: nowrap; display: flex; align-items: center; }
.dataTables_paginate .paginate_button { border-radius: var(--radius-sm) !important; padding: .2rem .5rem !important; font-size: .75rem !important; }
.dataTables_paginate .paginate_button.current { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important; }

/* ============================================================
   Badge / Chip
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: .1rem .45rem;
    border-radius: 20px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.badge-success { background: #dcfce7; color: #166534; }
.badge-danger  { background: #fee2e2; color: #991b1b; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-info    { background: #e0f2fe; color: #0c4a6e; }
.badge-muted   { background: #f1f5f9; color: var(--color-muted); }
.badge-primary { background: #dceee0; color: #2d5a1b; }
.badge-role    { background: #f1f5f9; color: var(--color-muted); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; }

/* Statusų spalvos pagal reikšmę */
.status-ACTIVE,   .status-PAID,         .status-APPROVED { background: #dcfce7; color: #166534; }
.status-PENDING,  .status-DRAFT                          { background: #fef3c7; color: #92400e; }
.status-BLOCKED,  .status-CANCELLED,    .status-REJECTED { background: #fee2e2; color: #991b1b; }
.status-ISSUED,   .status-PARTIALLY_PAID                 { background: #dceee0; color: #2d5a1b; }
.status-OVERDUE,  .status-TERMINATED                     { background: #ffedd5; color: #9a3412; }

/* ============================================================
   Info grid (peržiūros modalas)
   ============================================================ */
.info-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1.25rem;
    font-size: .875rem;
}
.info-grid dt {
    color: var(--color-muted);
    font-weight: 500;
    white-space: nowrap;
}
.info-grid dd { margin: 0; color: var(--color-text); }

/* Peržiūros mygtukas — tik desktop */
.btn-preview { display: none !important; }
@media (min-width: 768px) {
    .btn-preview { display: inline-flex !important; }
}

/* ============================================================
   Formos (papildomi komponentai)
   ============================================================ */
.form-section {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}

.form-section-title {
    font-size: .9375rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

.form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.form-control[readonly] { background: var(--color-bg); color: var(--color-muted); }

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    padding-right: 2.25rem;
}

/* Input grupe (su ikona) */
.input-group { position: relative; }
.input-group .form-control { padding-left: 2.5rem; }
.input-group-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    font-size: .875rem;
    pointer-events: none;
}

/* ============================================================
   Modalas
   ============================================================ */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1000;
    backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
}
.modal-backdrop.open { display: flex; }

.modal {
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    width: 100%;
    /* min() vietoj media-query slenkscio — modalas NIEKADA nevirsija 95% lango
       plocio, nepriklausomai nuo konkretaus narsykles lango dydzio. */
    max-width: min(540px, 95vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalIn .2s ease;
}

.modal-lg { max-width: min(800px, 95vw); }
.modal-sm { max-width: min(380px, 95vw); }

@keyframes modalIn {
    from { opacity: 0; transform: translateY(-20px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.modal-title { font-size: 1.0625rem; font-weight: 600; margin: 0; }

.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 1.125rem;
    padding: .25rem;
    border-radius: 4px;
    display: flex;
    transition: background .12s, color .12s;
}
.modal-close:hover { background: var(--color-bg); color: var(--color-text); }

.modal-body { padding: 1.25rem; overflow-y: auto; flex: 1; }
.modal-footer {
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    flex-shrink: 0;
}

/* ============================================================
   Toast notifikacijos
   ============================================================ */
.toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    max-width: 40vw;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    border-radius: var(--radius);
    background: var(--color-white);
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    border-left: 4px solid transparent;
    animation: toastIn .25s ease;
    font-size: .9375rem;
    width: max-content;
    max-width: 100%;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: none; }
}

.toast-success { border-color: var(--color-success); }
.toast-danger  { border-color: var(--color-danger); background: #fee2e2; }
.toast-warning { border-color: var(--color-warning); }
.toast-info    { border-color: var(--color-info);    }

.toast-msg { flex: 1; line-height: 1.4; overflow-wrap: break-word; word-break: break-word; }

.toast-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 1rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

/* ============================================================
   Puslapio sekciju gridas
   ============================================================ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* Pagrindinis turinys + šoninis skydelis (pvz. 1fr + 300px) */
.layout-main-aside { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; align-items: start; }

@media (max-width: 900px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .layout-main-aside { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   Puslapio virsus (page header)
   ============================================================ */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header-title { margin: 0; font-size: 1.375rem; font-weight: 700; }
.page-header-subtitle { margin: .25rem 0 0; color: var(--color-muted); font-size: .9375rem; }
.page-header-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-left: auto; }

/* ============================================================
   Empty state
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--color-muted);
}
.empty-state-icon { font-size: 2.5rem; margin-bottom: .75rem; color: var(--color-border); }
.empty-state p    { font-size: .9375rem; margin-bottom: 1rem; }

/* ============================================================
   Skeleton loader
   ============================================================ */
.skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: var(--radius-sm);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ============================================================
   Confirm delete chip
   ============================================================ */
.btn-delete-confirm {
    position: relative;
}

/* ============================================================
   Responsive — tablet / large mobile (≤768px)
   ============================================================ */
@media (max-width: 768px) {
    /*
     * Catch-all: collapse every inline grid-template-columns to a single column.
     * !important is required here because inline styles always win unless
     * overridden with !important from a stylesheet.
     * Exemption: repeat(auto-fill/auto-fit, ...) grids are already adaptive,
     * but collapsing them to 1fr on a phone screen is acceptable too.
     */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Tables: allow horizontal scroll on mobile so DataTables doesn't clip */
    .table-responsive { overflow-x: auto !important; }

    /* Page-level content padding */
    .app-content { padding: 1.25rem .875rem; }

    /* Detail-list (dl) definitions: stack label+value vertically */
    dl[style*="grid-template-columns"] dt,
    dl[style*="grid-template-columns"] dd { margin: 0; }

    /* Filter card-body rows: add gap between stacked inputs */
    .card-body[style*="grid"] > *,
    .card-body[style*="grid"] > div { margin-bottom: .5rem; }
    .card-body[style*="grid"] > *:last-child { margin-bottom: 0; }

    /* Buttons that were side-by-side in grid now need full width in form grids */
    .card-body[style*="grid"] .btn[type="submit"],
    .card-body[style*="grid"] button[type="submit"] { width: 100%; }

    /* Action buttons in page-header should wrap but not stretch */
    .page-header-actions { flex-wrap: wrap; }

    /* Dashboard / show-page sidebar: make the right column full-width */
    /* (covered by the [style*] rule above, but also target .grid-2 overrides) */
    .form-section { padding: 1rem; }

    /* Modal — guarantee it doesn't overflow horizontally */
    .modal { max-width: 95vw !important; margin: .75rem !important; }

    /* DataTables search mobile */
    .dataTables_filter { padding: 0; }
    .dataTables_filter input { width: 120px; min-width: 60px; }

}

@media (max-width: 900px) {
    /* DataTables bottom bar mobile: slėpti "Rodyti X", info + puslapiavimas centruoti */
    .dt-bottom { flex-direction: column; align-items: center; gap: .5rem; }
    .dt-bottom-left { justify-content: center; }
    .dataTables_length { display: none !important; }
    .dataTables_paginate { justify-content: center; }
}

/* ============================================================
   Responsive — modals, tables, cards
   ============================================================ */
@media (max-width: 600px) {
    /* Modalas — pilnas plotis mažame ekrane */
    .modal {
        max-width: 95vw;
        margin: 1rem;
        max-height: 95vh;
    }
    .modal-body { padding: 1rem; }
    .modal-header,
    .modal-footer { padding: .75rem 1rem; }
}

/* ============================================================
   Dashboard Wizard
   ============================================================ */
.dashboard-wizard {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.wizard-label {
    padding: .625rem 1.25rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-muted);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}
.wizard-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .75rem;
    padding: 1.25rem 1rem;
    text-decoration: none;
    color: inherit;
    background: var(--color-white);
    border-right: 1px solid var(--color-border);
    transition: background .15s;
}
.wizard-step:last-child { border-right: none; }
.wizard-step:hover { background: var(--color-bg); text-decoration: none; }
.wizard-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.wizard-step-body { display: flex; flex-direction: column; gap: .35rem; }
.wizard-step-q {
    font-size: .875rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.3;
}
.wizard-step-cta {
    font-size: .8125rem;
    color: var(--color-primary);
    font-weight: 500;
}
.wizard-step:hover .wizard-step-cta { text-decoration: underline; }

@media (max-width: 900px) {
    .wizard-steps { grid-template-columns: 1fr 1fr; }
    .wizard-step { border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
    .wizard-step:nth-child(2n) { border-right: none; }

    /* Lentelės — mažesnės padding'ai */
    table th { padding: .5rem .6rem; font-size: .75rem; }
    table td { padding: .6rem .6rem; font-size: .875rem; }

    /* Card */
    .card-body   { padding: 1rem; }
    .card-header { padding: .75rem 1rem; }
    .card-footer { padding: .625rem 1rem; }

    /* KPI gridas — 2 kolonos */
    .grid-4.kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

    /* Mygtukai mažesni */
    .page-header-title { font-size: 1.125rem; }

    /* Toast — pilnas plotis (mobile view netaikomas 40vw apribojimas) */
    .toast-container { left: 1rem; right: 1rem; max-width: none; top: 1rem; align-items: stretch; }
    .toast { width: auto; }

    /* app-content tighter padding */
    .app-content { padding: 1rem .75rem; }

    /* Filter form inside card — stack select + button vertically */
    .card-body > form,
    form.card,
    form > .card-body { /* already covered by grid override */ }

    /* Prevent wide DL grids from overflowing (auto 1fr → full width) */
    dl[style*="grid-template-columns"] {
        display: block;
    }
    dl[style*="grid-template-columns"] dt {
        font-weight: 600;
        color: var(--color-muted);
        font-size: .8125rem;
        margin-top: .625rem;
    }
    dl[style*="grid-template-columns"] dd {
        margin: .125rem 0 0 0;
    }

    /* Inline action buttons in table rows: shrink */
    .btn-sm { padding: .25rem .45rem; font-size: .8rem; }
}

@media (max-width: 400px) {
    .page-header-actions { width: 100%; }
    .page-header-actions .btn { flex: 1; justify-content: center; }
}

/* ============================================================
   Tabs
   ============================================================ */
.tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1.5rem;
    gap: 0;
}

.tab {
    padding: .65rem 1.25rem;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--color-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .15s, border-color .15s;
}
@media (max-width: 480px) {
    .tab { padding: .5rem .6rem; font-size: .8125rem; }
}
.tab:hover  { color: var(--color-text); text-decoration: none; }
.tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }