:root {

    --bg: #f1f5f9;

    --panel: #ffffff;

    --panel-dark: #0f172a;

    --text: #0f172a;

    --muted: #64748b;

    --line: #e2e8f0;

    --primary: #dc2626;

    --primary-dark: #991b1b;

    --accent: #0f172a;

    --warning: #f59e0b;

    --danger: #dc2626;

    --success: #16a34a;

    --shadow: 0 24px 70px rgba(15, 23, 42, .12);

    --radius: 24px;

}



*,

*::before,

*::after {

    box-sizing: border-box;

}



html,

body {

    margin: 0;

    min-height: 100%;

}



body {

    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    background:

        radial-gradient(circle at top left, rgba(220, 38, 38, .13), transparent 34rem),

        radial-gradient(circle at top right, rgba(15, 23, 42, .14), transparent 36rem),

        var(--bg);

    color: var(--text);

}



a {

    color: inherit;

    text-decoration: none;

}



button,

input {

    font: inherit;

}



code {

    padding: 2px 6px;

    border-radius: 8px;

    background: #f1f5f9;

    color: #1d4ed8;

}



.topbar {

    position: sticky;

    top: 0;

    z-index: 20;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    padding: 16px 28px;

    background: rgba(255, 255, 255, .88);

    border-bottom: 1px solid rgba(226, 232, 240, .9);

    backdrop-filter: blur(18px);

}



.brand-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

}



.brand-mark {

    display: grid;

    place-items: center;

    width: 46px;

    height: 46px;

    border-radius: 16px;

    color: #fff;

    background: linear-gradient(135deg, var(--primary), var(--primary-dark));

    font-weight: 950;

    box-shadow: 0 14px 30px rgba(220, 38, 38, .28);

}



.brand-link strong {

    display: block;

    font-size: 18px;

    line-height: 1.1;

}



.brand-link small {

    display: block;

    color: var(--muted);

    font-size: 12px;

    margin-top: 2px;

}



.topbar__context {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

    flex-wrap: wrap;

}



.context-pill {

    display: flex;

    flex-direction: column;

    gap: 2px;

    min-width: 130px;

    padding: 9px 12px;

    border-radius: 16px;

    background: #f8fafc;

    border: 1px solid var(--line);

}



.context-pill--warning {

    background: #fffbeb;

    border-color: #fde68a;

}



.context-label {

    color: var(--muted);

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .08em;

}



.context-pill strong {

    font-size: 13px;

}



.logout-form {

    margin: 0;

}



.app-main {

    width: min(1480px, calc(100% - 40px));

    margin: 0 auto;

    padding: 34px 0 60px;

}



.hero {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 360px;

    gap: 22px;

    align-items: stretch;

    margin-bottom: 24px;

}



.hero > div:first-child,

.hero__status {

    border-radius: 32px;

    background:

        linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(30, 41, 59, .96)),

        #0f172a;

    color: #fff;

    box-shadow: var(--shadow);

    border: 1px solid rgba(148, 163, 184, .22);

}



.hero > div:first-child {

    padding: 38px;

    overflow: hidden;

    position: relative;

}



.hero > div:first-child::after {

    content: "";

    position: absolute;

    right: -110px;

    top: -140px;

    width: 330px;

    height: 330px;

    border-radius: 999px;

    background: rgba(220, 38, 38, .32);

    filter: blur(4px);

}



.hero__badge {

    display: inline-flex;

    align-items: center;

    padding: 8px 13px;

    border-radius: 999px;

    background: rgba(220, 38, 38, .18);

    color: #fecaca;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: .1em;

    text-transform: uppercase;

}



.hero h1 {

    position: relative;

    z-index: 1;

    margin: 18px 0 12px;

    font-size: clamp(34px, 4vw, 58px);

    line-height: 1;

    letter-spacing: -.045em;

}



.hero p {

    position: relative;

    z-index: 1;

    max-width: 820px;

    margin: 0;

    color: #cbd5e1;

    font-size: 18px;

    line-height: 1.65;

}



.hero__status {

    padding: 24px;

    display: grid;

    gap: 12px;

}



.hero__status div {

    padding: 16px;

    border-radius: 20px;

    background: rgba(255, 255, 255, .07);

    border: 1px solid rgba(255, 255, 255, .1);

}



.hero__status span {

    display: block;

    margin-bottom: 5px;

    color: #94a3b8;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: .08em;

    text-transform: uppercase;

}



.hero__status strong {

    font-size: 18px;

}



.hero--compact {

    grid-template-columns: 1fr;

}



.section-head {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 18px;

    margin: 32px 0 18px;

}



.section-head h2 {

    margin: 0 0 6px;

    font-size: 30px;

    letter-spacing: -.03em;

}



.section-head p {

    margin: 0;

    color: var(--muted);

}



.cards-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

}



.module-card {

    min-height: 235px;

    display: flex;

    flex-direction: column;

    padding: 22px;

    border-radius: 26px;

    background: rgba(255, 255, 255, .92);

    border: 1px solid rgba(226, 232, 240, .95);

    box-shadow: 0 14px 45px rgba(15, 23, 42, .08);

    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;

}



.module-card:hover {

    transform: translateY(-4px);

    border-color: rgba(220, 38, 38, .35);

    box-shadow: 0 24px 70px rgba(15, 23, 42, .14);

}



.module-card--disabled {

    cursor: default;

}



.module-card__top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 20px;

}



.module-card__icon {

    display: grid;

    place-items: center;

    width: 54px;

    height: 54px;

    border-radius: 19px;

    background: #f1f5f9;

    font-size: 25px;

}



.module-card__status {

    display: inline-flex;

    padding: 6px 10px;

    border-radius: 999px;

    background: #fee2e2;

    color: #991b1b;

    font-size: 12px;

    font-weight: 900;

}



.module-card h3 {

    margin: 0 0 10px;

    font-size: 22px;

    letter-spacing: -.025em;

}



.module-card p {

    margin: 0;

    color: var(--muted);

    line-height: 1.55;

}



.module-card__footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-top: auto;

    padding-top: 20px;

    color: var(--muted);

    font-size: 13px;

    font-weight: 800;

}



.module-card__footer strong {

    color: var(--primary);

    font-size: 22px;

}



.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    padding: 10px 16px;

    border: 0;

    border-radius: 14px;

    font-weight: 900;

    cursor: pointer;

}



.btn--primary {

    color: #fff;

    background: linear-gradient(135deg, var(--primary), var(--primary-dark));

    box-shadow: 0 16px 34px rgba(220, 38, 38, .22);

}



.btn--secondary {

    color: var(--text);

    background: #fff;

    border: 1px solid var(--line);

}



.btn--ghost {

    color: var(--text);

    background: transparent;

    border: 1px solid var(--line);

}



.btn--full {

    width: 100%;

}



.alert,

.message {

    padding: 14px 16px;

    border-radius: 18px;

    margin-bottom: 16px;

    font-weight: 750;

}



.alert--warning {

    color: #92400e;

    background: #fffbeb;

    border: 1px solid #fde68a;

}



.alert--danger {

    color: #991b1b;

    background: #fef2f2;

    border: 1px solid #fecaca;

}



.empty-state {

    padding: 34px;

    border-radius: 26px;

    background: #fff;

    border: 1px solid var(--line);

    text-align: center;

}



.empty-state h3 {

    margin: 0 0 8px;

    font-size: 26px;

}



.empty-state p {

    margin: 0;

    color: var(--muted);

}



.login-body {

    background:

        radial-gradient(circle at 12% 12%, rgba(220, 38, 38, .28), transparent 32rem),

        radial-gradient(circle at 88% 10%, rgba(59, 130, 246, .18), transparent 32rem),

        #020617;

    color: #fff;

}



.login-main {

    min-height: 100vh;

    display: grid;

    place-items: center;

    padding: 28px;

}



.login-shell {

    width: min(1080px, 100%);

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 18px;

}



.login-panel {

    padding: 34px;

    border-radius: 30px;

    background: rgba(255, 255, 255, .96);

    color: var(--text);

    box-shadow: 0 32px 100px rgba(0, 0, 0, .35);

}



.login-panel--intro {

    display: flex;

    flex-direction: column;

    justify-content: center;

    background:

        linear-gradient(135deg, rgba(15, 23, 42, .94), rgba(30, 41, 59, .94)),

        #0f172a;

    color: #fff;

    border: 1px solid rgba(148, 163, 184, .25);

}



.login-badge {

    width: fit-content;

    padding: 8px 13px;

    border-radius: 999px;

    background: rgba(220, 38, 38, .18);

    color: #fecaca;

    font-size: 12px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .1em;

}



.login-panel h1 {

    margin: 18px 0 12px;

    font-size: clamp(34px, 5vw, 58px);

    line-height: 1;

    letter-spacing: -.05em;

}



.login-panel h2 {

    margin: 0 0 8px;

    font-size: 30px;

}



.login-panel p {

    margin: 0;

    color: #cbd5e1;

    font-size: 17px;

    line-height: 1.6;

}



.login-panel:not(.login-panel--intro) p {

    color: var(--muted);

}



.login-points {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin-top: 30px;

}



.login-points div {

    padding: 16px;

    border-radius: 18px;

    background: rgba(255, 255, 255, .07);

    border: 1px solid rgba(255, 255, 255, .1);

}



.login-points strong,

.login-points span {

    display: block;

}



.login-points span {

    margin-top: 4px;

    color: #cbd5e1;

    font-size: 13px;

}



.form {

    display: grid;

    gap: 10px;

    margin-top: 22px;

}



.form label {

    font-weight: 900;

    font-size: 13px;

}



.form input {

    width: 100%;

    min-height: 48px;

    border-radius: 14px;

    border: 1px solid var(--line);

    padding: 10px 13px;

    outline: none;

}



.form input:focus {

    border-color: rgba(220, 38, 38, .55);

    box-shadow: 0 0 0 4px rgba(220, 38, 38, .12);

}



.info-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

}



.info-card {

    padding: 24px;

    border-radius: 26px;

    background: #fff;

    border: 1px solid var(--line);

    box-shadow: 0 14px 45px rgba(15, 23, 42, .08);

}



.info-card h2 {

    margin: 0 0 18px;

}



.info-card dl {

    margin: 0;

    display: grid;

    gap: 12px;

}



.info-card dt {

    color: var(--muted);

    font-size: 12px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .08em;

}



.info-card dd {

    margin: -8px 0 0;

    font-weight: 800;

}



.page-actions {

    margin-top: 22px;

}



@media (max-width: 1100px) {

    .hero,

    .login-shell,

    .info-grid {

        grid-template-columns: 1fr;

    }



    .cards-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .topbar {

        align-items: flex-start;

        flex-direction: column;

    }



    .topbar__context {

        justify-content: flex-start;

    }

}



@media (max-width: 720px) {

    .app-main {

        width: min(100% - 24px, 1480px);

        padding-top: 20px;

    }



    .topbar {

        padding: 14px;

    }



    .context-pill {

        min-width: calc(50% - 6px);

        flex: 1;

    }



    .cards-grid {

        grid-template-columns: 1fr;

    }



    .section-head {

        align-items: flex-start;

        flex-direction: column;

    }



    .hero > div:first-child,

    .hero__status,

    .login-panel {

        border-radius: 24px;

        padding: 24px;

    }



    .login-main {

        padding: 14px;

    }



    .login-points {

        grid-template-columns: 1fr;

    }

}




/* =========================================================

   VEHICLES

   ========================================================= */



.vehicle-stats {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin: 0 0 26px;

}



.vehicle-stat {

    padding: 20px;

    border-radius: 24px;

    background: #fff;

    border: 1px solid var(--line);

    box-shadow: 0 14px 45px rgba(15, 23, 42, .08);

}



.vehicle-stat span {

    display: block;

    color: var(--muted);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: .08em;

    text-transform: uppercase;

}



.vehicle-stat strong {

    display: block;

    margin-top: 6px;

    font-size: 34px;

    line-height: 1;

}



.vehicle-stat--ok strong {

    color: var(--success);

}



.vehicle-stat--warning strong {

    color: var(--warning);

}



.vehicle-stat--danger strong {

    color: var(--danger);

}



.vehicles-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

}



.vehicle-card {

    display: flex;

    flex-direction: column;

    min-height: 300px;

    padding: 24px;

    border-radius: 28px;

    background: rgba(255, 255, 255, .94);

    border: 1px solid rgba(226, 232, 240, .95);

    box-shadow: 0 16px 52px rgba(15, 23, 42, .09);

    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;

}



.vehicle-card:hover {

    transform: translateY(-4px);

    border-color: rgba(220, 38, 38, .35);

    box-shadow: 0 26px 76px rgba(15, 23, 42, .15);

}



.vehicle-card__top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 22px;

}



.vehicle-type {

    display: inline-flex;

    padding: 7px 11px;

    border-radius: 999px;

    background: #f1f5f9;

    color: #475569;

    font-size: 12px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .08em;

}



.vehicle-card h3 {

    margin: 12px 0 0;

    font-size: 30px;

    letter-spacing: -.035em;

}



.vehicle-status {

    display: inline-flex;

    white-space: nowrap;

    padding: 7px 11px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 900;

}



.vehicle-status--active {

    color: #166534;

    background: #dcfce7;

}



.vehicle-status--service {

    color: #92400e;

    background: #fef3c7;

}



.vehicle-status--out_of_service {

    color: #991b1b;

    background: #fee2e2;

}



.vehicle-status--reserve {

    color: #1d4ed8;

    background: #dbeafe;

}



.vehicle-status--archived {

    color: #475569;

    background: #f1f5f9;

}



.vehicle-meta {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 18px;

}



.vehicle-meta div,

.vehicle-deadlines .deadline {

    padding: 13px;

    border-radius: 18px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

}



.vehicle-meta span,

.deadline span {

    display: block;

    margin-bottom: 4px;

    color: var(--muted);

    font-size: 11px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .08em;

}



.vehicle-meta strong,

.deadline strong {

    display: block;

    font-size: 15px;

}



.vehicle-deadlines {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-top: auto;

}



.deadline--ok {

    background: #f0fdf4 !important;

    border-color: #bbf7d0 !important;

}



.deadline--ok strong {

    color: #166534;

}



.deadline--warning {

    background: #fffbeb !important;

    border-color: #fde68a !important;

}



.deadline--warning strong {

    color: #92400e;

}



.deadline--expired {

    background: #fef2f2 !important;

    border-color: #fecaca !important;

}



.deadline--expired strong {

    color: #991b1b;

}



.deadline--missing {

    background: #f8fafc !important;

    border-color: #e2e8f0 !important;

}



.deadline--missing strong {

    color: #475569;

}



.vehicle-detail-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

}



.vehicle-note {

    margin-top: 18px;

}



.vehicle-note p {

    margin: 0;

    color: var(--muted);

    line-height: 1.7;

}



@media (max-width: 1100px) {

    .vehicle-stats,

    .vehicles-grid,

    .vehicle-detail-grid {

        grid-template-columns: 1fr;

    }



    .vehicle-meta {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (max-width: 640px) {

    .vehicle-card__top {

        flex-direction: column;

    }



    .vehicle-meta,

    .vehicle-deadlines {

        grid-template-columns: 1fr;

    }

}




/* =========================================================

   TRIPS

   ========================================================= */



.trip-stats {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin: 0 0 26px;

}



.trip-stat {

    padding: 20px;

    border-radius: 24px;

    background: #fff;

    border: 1px solid var(--line);

    box-shadow: 0 14px 45px rgba(15, 23, 42, .08);

}



.trip-stat span {

    display: block;

    color: var(--muted);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: .08em;

    text-transform: uppercase;

}



.trip-stat strong {

    display: block;

    margin-top: 6px;

    font-size: 34px;

    line-height: 1;

}



.trip-stat--open strong {

    color: #2563eb;

}



.trip-stat--warning strong {

    color: var(--warning);

}



.trip-stat--ok strong {

    color: var(--success);

}



.section-actions {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}



.filter-bar {

    display: flex;

    align-items: flex-end;

    gap: 10px;

    flex-wrap: wrap;

    margin: 0 0 18px;

    padding: 16px;

    border-radius: 22px;

    background: #fff;

    border: 1px solid var(--line);

    box-shadow: 0 14px 45px rgba(15, 23, 42, .06);

}



.filter-bar label {

    font-size: 13px;

    font-weight: 900;

    color: var(--muted);

    text-transform: uppercase;

    letter-spacing: .08em;

}



.filter-bar select {

    min-height: 42px;

    min-width: 220px;

    border: 1px solid var(--line);

    border-radius: 14px;

    padding: 8px 12px;

    background: #fff;

    font-weight: 800;

}



.trips-table-wrap {

    overflow: auto;

    border-radius: 26px;

    background: #fff;

    border: 1px solid var(--line);

    box-shadow: 0 16px 52px rgba(15, 23, 42, .09);

}



.trips-table {

    width: 100%;

    min-width: 1050px;

    border-collapse: collapse;

}



.trips-table th,

.trips-table td {

    padding: 16px;

    text-align: left;

    border-bottom: 1px solid #e2e8f0;

    vertical-align: middle;

}



.trips-table th {

    color: #64748b;

    font-size: 12px;

    font-weight: 950;

    text-transform: uppercase;

    letter-spacing: .08em;

    background: #f8fafc;

}



.trips-table tr:last-child td {

    border-bottom: 0;

}



.trips-table td strong,

.trips-table td span {

    display: block;

}



.trips-table td strong {

    color: #0f172a;

    font-size: 14px;

}



.trips-table td span {

    margin-top: 3px;

    color: #64748b;

    font-size: 13px;

}



.table-action {

    text-align: right !important;

}



.trip-state {

    display: inline-flex !important;

    width: fit-content;

    padding: 7px 11px;

    border-radius: 999px;

    font-size: 12px !important;

    font-weight: 900;

    margin: 0 !important;

}



.trip-state--draft {

    color: #475569 !important;

    background: #f1f5f9;

}



.trip-state--pending_approval {

    color: #92400e !important;

    background: #fef3c7;

}



.trip-state--open {

    color: #1d4ed8 !important;

    background: #dbeafe;

}



.trip-state--closed {

    color: #0f766e !important;

    background: #ccfbf1;

}



.trip-state--approved {

    color: #166534 !important;

    background: #dcfce7;

}



.trip-state--cancelled {

    color: #991b1b !important;

    background: #fee2e2;

}



.trip-detail-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

}



.trip-notes-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

    margin-top: 18px;

}



.trip-notes-grid p {

    margin: 0;

    color: var(--muted);

    line-height: 1.7;

}



.pagination {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 22px;

}



.pagination span {

    color: var(--muted);

    font-weight: 800;

}



@media (max-width: 1100px) {

    .trip-stats,

    .trip-detail-grid,

    .trip-notes-grid {

        grid-template-columns: 1fr;

    }

}




/* =========================================================

   APP FORMS

   ========================================================= */



.app-form {

    display: grid;

    gap: 18px;

}



.app-form--narrow {

    max-width: 760px;

}



.form-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

}



.form-card {

    padding: 24px;

    border-radius: 26px;

    background: #fff;

    border: 1px solid var(--line);

    box-shadow: 0 14px 45px rgba(15, 23, 42, .08);

}



.form-card--wide {

    grid-column: 1 / -1;

}



.form-card h3 {

    margin: 0 0 18px;

    font-size: 22px;

    letter-spacing: -.025em;

}



.field {

    display: grid;

    gap: 7px;

    margin-bottom: 15px;

}



.field:last-child {

    margin-bottom: 0;

}



.field label {

    color: #334155;

    font-size: 13px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .06em;

}



.field input,

.field select,

.field textarea {

    width: 100%;

    min-height: 46px;

    padding: 10px 13px;

    border: 1px solid var(--line);

    border-radius: 15px;

    background: #fff;

    color: var(--text);

    outline: none;

}



.field textarea {

    resize: vertical;

    line-height: 1.5;

}



.field input:focus,

.field select:focus,

.field textarea:focus {

    border-color: rgba(220, 38, 38, .55);

    box-shadow: 0 0 0 4px rgba(220, 38, 38, .11);

}



.field .errorlist {

    margin: 0;

    padding: 0;

    list-style: none;

    color: #991b1b;

    font-size: 13px;

    font-weight: 800;

}



.form-actions {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    align-items: center;

}



.inline-form {

    margin: 0;

}



.table-actions {

    display: flex;

    justify-content: flex-end;

    gap: 8px;

    flex-wrap: wrap;

}



@media (max-width: 900px) {

    .form-grid {

        grid-template-columns: 1fr;

    }

}




.trip-state--done {

    color: #475569 !important;

    background: #f1f5f9;

}



.trip-stat--danger strong {

    color: var(--danger);

}




/* =========================================================

   TRAINING

   ========================================================= */



.training-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

}



.training-card {

    min-height: 245px;

    display: flex;

    flex-direction: column;

    padding: 22px;

    border-radius: 26px;

    background: rgba(255, 255, 255, .94);

    border: 1px solid rgba(226, 232, 240, .95);

    box-shadow: 0 14px 45px rgba(15, 23, 42, .08);

    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;

}



.training-card:hover {

    transform: translateY(-4px);

    border-color: rgba(220, 38, 38, .35);

    box-shadow: 0 24px 70px rgba(15, 23, 42, .14);

}



.training-card__top,

.training-card__footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}



.training-code,

.training-year,

.training-card__footer strong {

    display: inline-flex;

    padding: 7px 11px;

    border-radius: 999px;

    background: #f1f5f9;

    color: #475569;

    font-size: 12px;

    font-weight: 900;

}



.training-year,

.training-card__footer strong {

    color: #991b1b;

    background: #fee2e2;

}



.training-card h3 {

    margin: 18px 0 10px;

    font-size: 22px;

    letter-spacing: -.025em;

}



.training-card p {

    margin: 0;

    color: var(--muted);

    line-height: 1.55;

}



.training-card__footer {

    margin-top: auto;

    padding-top: 18px;

    color: var(--muted);

    font-size: 13px;

    font-weight: 800;

}



.field--checkbox label {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--text);

    text-transform: none;

    letter-spacing: 0;

}



.field--checkbox input {

    width: auto;

    min-height: auto;

}



.checkbox-list ul {

    display: grid;

    gap: 8px;

    margin: 0;

    padding: 0;

    list-style: none;

}



.checkbox-list li label {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 12px;

    border-radius: 14px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    color: var(--text);

    font-weight: 800;

    text-transform: none;

    letter-spacing: 0;

}



.checkbox-list input {

    width: auto;

    min-height: auto;

}



.trip-state--planned {

    color: #1d4ed8 !important;

    background: #dbeafe;

}



.trip-state--present,

.trip-state--passed {

    color: #166534 !important;

    background: #dcfce7;

}



.trip-state--absent,

.trip-state--failed {

    color: #991b1b !important;

    background: #fee2e2;

}



.trip-state--excused {

    color: #92400e !important;

    background: #fef3c7;

}



@media (max-width: 1100px) {

    .training-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (max-width: 720px) {

    .training-grid {

        grid-template-columns: 1fr;

    }

}




/* =========================================================

   NFC

   ========================================================= */



.trip-state--ok {

    color: #166534 !important;

    background: #dcfce7;

}



.trip-state--unknown_uid,

.trip-state--nfc_disabled,

.trip-state--no_user {

    color: #92400e !important;

    background: #fef3c7;

}



.trip-state--disabled_card,

.trip-state--inactive_member,

.trip-state--org_inactive,

.trip-state--error {

    color: #991b1b !important;

    background: #fee2e2;

}




/* =========================================================

   PRINTING

   ========================================================= */



.trip-state--pending {

    color: #1d4ed8 !important;

    background: #dbeafe;

}



.trip-state--sent {

    color: #166534 !important;

    background: #dcfce7;

}



.trip-state--failed {

    color: #991b1b !important;

    background: #fee2e2;

}



.trip-state--cancelled {

    color: #475569 !important;

    background: #f1f5f9;

}




/* =========================================================

   STS

   ========================================================= */



.trip-state--sts-result-ok,

.trip-state--sts-state-resolved,

.trip-state--sts-severity-low {

    color: #166534 !important;

    background: #dcfce7;

}



.trip-state--sts-result-minor_issues,

.trip-state--sts-severity-medium {

    color: #92400e !important;

    background: #fef3c7;

}



.trip-state--sts-result-defect_found,

.trip-state--sts-severity-high,

.trip-state--sts-state-open {

    color: #991b1b !important;

    background: #fee2e2;

}



.trip-state--sts-result-out_of_service,

.trip-state--sts-severity-critical {

    color: #7f1d1d !important;

    background: #fecaca;

}



.trip-state--sts-state-in_progress {

    color: #1d4ed8 !important;

    background: #dbeafe;

}



.trip-state--sts-state-cancelled {

    color: #475569 !important;

    background: #f1f5f9;

}




/* =========================================================

   CHS

   ========================================================= */



.trip-state--chs-equipment-in_service,

.trip-state--chs-result-ok,

.trip-state--chs-state-resolved,

.trip-state--chs-severity-low {

    color: #166534 !important;

    background: #dcfce7;

}



.trip-state--chs-equipment-limited,

.trip-state--chs-result-warning,

.trip-state--chs-severity-medium {

    color: #92400e !important;

    background: #fef3c7;

}



.trip-state--chs-equipment-out_of_service,

.trip-state--chs-result-defect,

.trip-state--chs-severity-high,

.trip-state--chs-state-open {

    color: #991b1b !important;

    background: #fee2e2;

}



.trip-state--chs-result-out_of_service,

.trip-state--chs-severity-critical {

    color: #7f1d1d !important;

    background: #fecaca;

}



.trip-state--chs-equipment-service,

.trip-state--chs-state-in_progress {

    color: #1d4ed8 !important;

    background: #dbeafe;

}



.trip-state--chs-equipment-retired,

.trip-state--chs-state-cancelled {

    color: #475569 !important;

    background: #f1f5f9;

}




/* =========================================================

   TES

   ========================================================= */



.trip-state--tes-equipment-in_service,

.trip-state--tes-result-ok,

.trip-state--tes-state-resolved,

.trip-state--tes-severity-low {

    color: #166534 !important;

    background: #dcfce7;

}



.trip-state--tes-equipment-limited,

.trip-state--tes-result-warning,

.trip-state--tes-severity-medium {

    color: #92400e !important;

    background: #fef3c7;

}



.trip-state--tes-equipment-out_of_service,

.trip-state--tes-result-defect,

.trip-state--tes-severity-high,

.trip-state--tes-state-open {

    color: #991b1b !important;

    background: #fee2e2;

}



.trip-state--tes-result-out_of_service,

.trip-state--tes-severity-critical {

    color: #7f1d1d !important;

    background: #fecaca;

}



.trip-state--tes-equipment-service,

.trip-state--tes-state-in_progress {

    color: #1d4ed8 !important;

    background: #dbeafe;

}



.trip-state--tes-equipment-retired,

.trip-state--tes-state-cancelled {

    color: #475569 !important;

    background: #f1f5f9;

}




/* =========================================================

   GLOBAL TOP NAVIGATION

   ========================================================= */



.app-topbar {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:

        linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(30, 41, 59, .94)),

        #0f172a;

    border-bottom: 1px solid rgba(148, 163, 184, .22);

    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);

    backdrop-filter: blur(18px);

}



.app-topbar__inner {

    width: min(1540px, calc(100% - 28px));

    min-height: 76px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    gap: 18px;

}



.app-brand {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #ffffff;

    text-decoration: none;

    flex: 0 0 auto;

}



.app-brand__mark {

    width: 44px;

    height: 44px;

    border-radius: 16px;

    display: grid;

    place-items: center;

    font-size: 22px;

    font-weight: 950;

    color: #ffffff;

    background: linear-gradient(135deg, #dc2626, #991b1b);

    box-shadow: 0 14px 30px rgba(220, 38, 38, .32);

}



.app-brand__text {

    display: grid;

    gap: 2px;

    line-height: 1.1;

}



.app-brand__text strong {

    font-size: 17px;

    font-weight: 900;

    letter-spacing: -.02em;

}



.app-brand__text small {

    max-width: 210px;

    color: #cbd5e1;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.app-nav {

    flex: 1 1 auto;

    display: flex;

    align-items: center;

    gap: 6px;

    overflow-x: auto;

    scrollbar-width: none;

    padding: 8px 0;

}



.app-nav::-webkit-scrollbar {

    display: none;

}



.app-nav__link {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height: 40px;

    padding: 9px 11px;

    border-radius: 14px;

    color: #dbeafe;

    text-decoration: none;

    font-size: 13px;

    font-weight: 850;

    white-space: nowrap;

    border: 1px solid transparent;

    transition:

        transform .18s ease,

        background .18s ease,

        border-color .18s ease,

        color .18s ease;

}



.app-nav__link:hover {

    transform: translateY(-1px);

    color: #ffffff;

    background: rgba(255, 255, 255, .09);

    border-color: rgba(255, 255, 255, .12);

}



.app-nav__link.is-active {

    color: #ffffff;

    background: rgba(220, 38, 38, .95);

    border-color: rgba(248, 113, 113, .5);

    box-shadow: 0 12px 24px rgba(220, 38, 38, .24);

}



.app-nav__icon {

    font-size: 15px;

    line-height: 1;

}



.app-user {

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    gap: 10px;

}



.app-user__name {

    display: grid;

    gap: 2px;

    text-align: right;

    color: #ffffff;

    line-height: 1.1;

}



.app-user__name strong {

    max-width: 180px;

    font-size: 13px;

    font-weight: 900;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.app-user__name small {

    max-width: 180px;

    color: #cbd5e1;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.app-logout {

    min-height: 38px;

    border: 1px solid rgba(255, 255, 255, .16);

    border-radius: 13px;

    padding: 8px 12px;

    color: #ffffff;

    background: rgba(255, 255, 255, .08);

    font-weight: 850;

    cursor: pointer;

    transition:

        transform .18s ease,

        background .18s ease,

        border-color .18s ease;

}



.app-logout:hover {

    transform: translateY(-1px);

    background: rgba(255, 255, 255, .14);

    border-color: rgba(255, 255, 255, .24);

}



.app-nav-toggle {

    display: none;

    width: 44px;

    height: 44px;

    margin-left: auto;

    border: 1px solid rgba(255, 255, 255, .16);

    border-radius: 15px;

    background: rgba(255, 255, 255, .08);

    cursor: pointer;

    place-items: center;

    gap: 4px;

    padding: 10px;

}



.app-nav-toggle span {

    display: block;

    width: 20px;

    height: 2px;

    border-radius: 99px;

    background: #ffffff;

}



.app-mobile-panel,

.app-mobile-backdrop {

    display: none;

}



@media (max-width: 1180px) {

    .app-topbar__inner {

        min-height: 68px;

    }



    .app-nav {

        display: none;

    }



    .app-nav-toggle {

        display: grid;

    }



    .app-user {

        display: none;

    }



    .app-mobile-backdrop {

        position: fixed;

        inset: 0;

        z-index: 1090;

        display: block;

        opacity: 0;

        pointer-events: none;

        background: rgba(15, 23, 42, .62);

        backdrop-filter: blur(6px);

        transition: opacity .18s ease;

    }



    .app-mobile-backdrop.is-visible {

        opacity: 1;

        pointer-events: auto;

    }



    .app-mobile-panel {

        position: fixed;

        top: 0;

        right: 0;

        z-index: 1100;

        display: flex;

        flex-direction: column;

        width: min(390px, 92vw);

        height: 100vh;

        padding: 18px;

        background: #ffffff;

        box-shadow: -20px 0 50px rgba(15, 23, 42, .24);

        transform: translateX(105%);

        transition: transform .22s ease;

    }



    .app-mobile-panel.is-open {

        transform: translateX(0);

    }



    .app-mobile-panel__head {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 12px;

        padding-bottom: 14px;

        margin-bottom: 14px;

        border-bottom: 1px solid #e2e8f0;

    }



    .app-mobile-panel__head strong {

        color: #0f172a;

        font-size: 22px;

        font-weight: 950;

    }



    .app-mobile-panel__close {

        width: 42px;

        height: 42px;

        border: 0;

        border-radius: 14px;

        background: #f1f5f9;

        color: #0f172a;

        font-size: 30px;

        line-height: 1;

        cursor: pointer;

    }



    .app-mobile-nav {

        display: grid;

        gap: 8px;

        overflow-y: auto;

        padding-right: 4px;

    }



    .app-mobile-nav__link {

        display: flex;

        align-items: center;

        gap: 12px;

        min-height: 54px;

        padding: 12px 14px;

        border-radius: 18px;

        color: #0f172a;

        background: #f8fafc;

        border: 1px solid #e2e8f0;

        text-decoration: none;

    }



    .app-mobile-nav__link span {

        width: 30px;

        font-size: 20px;

        text-align: center;

    }



    .app-mobile-nav__link strong {

        font-size: 15px;

        font-weight: 900;

    }



    .app-mobile-nav__link.is-active {

        color: #ffffff;

        background: linear-gradient(135deg, #dc2626, #991b1b);

        border-color: #ef4444;

        box-shadow: 0 16px 30px rgba(220, 38, 38, .24);

    }



    body.nav-open {

        overflow: hidden;

    }

}



@media (max-width: 640px) {

    .app-topbar__inner {

        width: min(100% - 20px, 1540px);

        min-height: 64px;

    }



    .app-brand__mark {

        width: 40px;

        height: 40px;

        border-radius: 14px;

    }



    .app-brand__text strong {

        font-size: 15px;

    }



    .app-brand__text small {

        max-width: 180px;

    }

}




/* =========================================================

   UNIFIED FORMS

   ========================================================= */



.app-form {

    width: 100%;

    margin: 0 auto;

}



.app-form--narrow {

    max-width: 920px;

}



.form-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;

    align-items: start;

}



.form-card {

    position: relative;

    min-width: 0;

    padding: 24px;

    border-radius: 28px;

    background:

        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .96));

    border: 1px solid rgba(226, 232, 240, .95);

    box-shadow:

        0 20px 45px rgba(15, 23, 42, .08),

        inset 0 1px 0 rgba(255, 255, 255, .9);

}



.form-card::before {

    content: "";

    position: absolute;

    inset: 0 0 auto 0;

    height: 4px;

    border-radius: 28px 28px 0 0;

    background: linear-gradient(90deg, #dc2626, #f97316, #facc15);

    opacity: .92;

}



.form-card--wide {

    grid-column: 1 / -1;

}



.form-card h3 {

    margin: 0 0 18px;

    color: #0f172a;

    font-size: 21px;

    line-height: 1.15;

    font-weight: 950;

    letter-spacing: -.03em;

}



.field {

    display: grid;

    gap: 8px;

    margin: 0 0 16px;

}



.field:last-child {

    margin-bottom: 0;

}



.field label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #334155;

    font-size: 13px;

    line-height: 1.25;

    font-weight: 900;

}



.field input:not([type="checkbox"]):not([type="radio"]),

.field select,

.field textarea,

.app-form input:not([type="checkbox"]):not([type="radio"]),

.app-form select,

.app-form textarea,

.filter-bar input:not([type="checkbox"]):not([type="radio"]),

.filter-bar select {

    width: 100%;

    min-height: 48px;

    padding: 12px 14px;

    border-radius: 16px;

    color: #0f172a;

    background: #ffffff;

    border: 1px solid #cbd5e1;

    outline: none;

    font: inherit;

    font-size: 15px;

    font-weight: 700;

    box-shadow: 0 1px 0 rgba(15, 23, 42, .02);

    transition:

        border-color .16s ease,

        box-shadow .16s ease,

        background .16s ease,

        transform .16s ease;

}



.field textarea,

.app-form textarea {

    min-height: 118px;

    resize: vertical;

    line-height: 1.55;

}



.field select,

.app-form select,

.filter-bar select {

    cursor: pointer;

    appearance: none;

    background-image:

        linear-gradient(45deg, transparent 50%, #64748b 50%),

        linear-gradient(135deg, #64748b 50%, transparent 50%),

        linear-gradient(to right, transparent, transparent);

    background-position:

        calc(100% - 21px) 21px,

        calc(100% - 15px) 21px,

        calc(100% - 42px) 0;

    background-size:

        6px 6px,

        6px 6px,

        1px 100%;

    background-repeat: no-repeat;

    padding-right: 44px;

}



.field input:not([type="checkbox"]):not([type="radio"]):hover,

.field select:hover,

.field textarea:hover,

.app-form input:not([type="checkbox"]):not([type="radio"]):hover,

.app-form select:hover,

.app-form textarea:hover,

.filter-bar input:not([type="checkbox"]):not([type="radio"]):hover,

.filter-bar select:hover {

    border-color: #94a3b8;

    background: #ffffff;

}



.field input:not([type="checkbox"]):not([type="radio"]):focus,

.field select:focus,

.field textarea:focus,

.app-form input:not([type="checkbox"]):not([type="radio"]):focus,

.app-form select:focus,

.app-form textarea:focus,

.filter-bar input:not([type="checkbox"]):not([type="radio"]):focus,

.filter-bar select:focus {

    border-color: #dc2626;

    box-shadow:

        0 0 0 4px rgba(220, 38, 38, .13),

        0 10px 24px rgba(15, 23, 42, .08);

    transform: translateY(-1px);

}



.field input[readonly],

.field textarea[readonly],

.app-form input[readonly],

.app-form textarea[readonly] {

    color: #64748b;

    background: #f8fafc;

}



.field input:disabled,

.field select:disabled,

.field textarea:disabled,

.app-form input:disabled,

.app-form select:disabled,

.app-form textarea:disabled {

    cursor: not-allowed;

    color: #94a3b8;

    background: #f1f5f9;

    border-color: #e2e8f0;

}



.field--checkbox {

    margin-bottom: 12px;

}



.field--checkbox label {

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 48px;

    padding: 12px 14px;

    border-radius: 16px;

    color: #0f172a;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    cursor: pointer;

    transition:

        background .16s ease,

        border-color .16s ease,

        box-shadow .16s ease,

        transform .16s ease;

}



.field--checkbox label:hover {

    background: #ffffff;

    border-color: #cbd5e1;

    transform: translateY(-1px);

    box-shadow: 0 10px 22px rgba(15, 23, 42, .06);

}



.field--checkbox input[type="checkbox"],

.app-form input[type="checkbox"] {

    width: 20px;

    height: 20px;

    flex: 0 0 auto;

    accent-color: #dc2626;

    cursor: pointer;

}



.field--checkbox:has(input[type="checkbox"]:checked) label {

    color: #7f1d1d;

    background: #fef2f2;

    border-color: #fecaca;

}



.helptext,

.field .helptext {

    display: block;

    margin-top: 2px;

    color: #64748b;

    font-size: 12px;

    line-height: 1.45;

    font-weight: 700;

}



.errorlist {

    list-style: none;

    margin: 2px 0 0;

    padding: 0;

    display: grid;

    gap: 6px;

}



.errorlist li {

    padding: 9px 11px;

    border-radius: 13px;

    color: #991b1b;

    background: #fee2e2;

    border: 1px solid #fecaca;

    font-size: 13px;

    line-height: 1.35;

    font-weight: 850;

}



.field:has(.errorlist) input:not([type="checkbox"]):not([type="radio"]),

.field:has(.errorlist) select,

.field:has(.errorlist) textarea {

    border-color: #ef4444;

    background: #fff7f7;

    box-shadow: 0 0 0 4px rgba(239, 68, 68, .10);

}



.form-actions {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 24px;

    padding: 18px;

    border-radius: 24px;

    background: rgba(248, 250, 252, .84);

    border: 1px solid #e2e8f0;

}



.app-form.is-submitting .form-actions {

    opacity: .78;

    pointer-events: none;

}



.app-form.is-submitting .btn--primary::after {

    content: "";

    width: 14px;

    height: 14px;

    margin-left: 8px;

    border-radius: 999px;

    border: 2px solid rgba(255, 255, 255, .55);

    border-top-color: #ffffff;

    display: inline-block;

    vertical-align: -2px;

    animation: formSpin .7s linear infinite;

}



@keyframes formSpin {

    to {

        transform: rotate(360deg);

    }

}



.filter-bar {

    display: flex;

    align-items: end;

    flex-wrap: wrap;

    gap: 12px;

    margin: 0 0 22px;

    padding: 16px;

    border-radius: 24px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    box-shadow: 0 16px 32px rgba(15, 23, 42, .06);

}



.filter-bar label {

    color: #334155;

    font-size: 13px;

    font-weight: 900;

}



.filter-bar select,

.filter-bar input {

    min-width: 210px;

}



.form-card .field:last-child textarea {

    margin-bottom: 0;

}



.form-section-note {

    margin: -8px 0 16px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.5;

    font-weight: 700;

}



.form-muted-box {

    padding: 14px 16px;

    border-radius: 18px;

    color: #475569;

    background: #f8fafc;

    border: 1px dashed #cbd5e1;

    font-size: 14px;

    line-height: 1.5;

    font-weight: 700;

}



@media (max-width: 980px) {

    .form-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }



    .form-card,

    .form-actions,

    .filter-bar {

        border-radius: 22px;

    }



    .form-card {

        padding: 20px;

    }



    .filter-bar {

        align-items: stretch;

    }



    .filter-bar label,

    .filter-bar select,

    .filter-bar input,

    .filter-bar .btn {

        width: 100%;

        min-width: 0;

    }

}



@media (max-width: 640px) {

    .form-card {

        padding: 18px;

        border-radius: 20px;

    }



    .form-card h3 {

        font-size: 19px;

    }



    .field input:not([type="checkbox"]):not([type="radio"]),

    .field select,

    .field textarea,

    .app-form input:not([type="checkbox"]):not([type="radio"]),

    .app-form select,

    .app-form textarea {

        min-height: 46px;

        border-radius: 14px;

        font-size: 14px;

    }



    .form-actions {

        padding: 14px;

        border-radius: 20px;

    }



    .form-actions .btn {

        width: 100%;

        justify-content: center;

    }

}




/* =========================================================

   UNIFIED TABLES / LISTS

   ========================================================= */



.trips-table-wrap {

    position: relative;

    width: 100%;

    margin: 0 0 28px;

    overflow: hidden;

    border-radius: 28px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    box-shadow:

        0 20px 48px rgba(15, 23, 42, .08),

        inset 0 1px 0 rgba(255, 255, 255, .9);

}



.trips-table-wrap::before {

    content: "";

    display: block;

    height: 4px;

    background: linear-gradient(90deg, #dc2626, #f97316, #facc15);

}



.trips-table {

    width: 100%;

    border-collapse: separate;

    border-spacing: 0;

    color: #0f172a;

    font-size: 14px;

}



.trips-table thead {

    position: sticky;

    top: 76px;

    z-index: 10;

}



.trips-table th {

    padding: 15px 18px;

    color: #475569;

    background:

        linear-gradient(180deg, rgba(248, 250, 252, .98), rgba(241, 245, 249, .98));

    border-bottom: 1px solid #e2e8f0;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 950;

    text-align: left;

    text-transform: uppercase;

    letter-spacing: .06em;

    white-space: nowrap;

}



.trips-table th:first-child {

    padding-left: 22px;

}



.trips-table th:last-child {

    padding-right: 22px;

}



.trips-table td {

    padding: 16px 18px;

    vertical-align: middle;

    border-bottom: 1px solid #eef2f7;

    background: #ffffff;

    transition:

        background .16s ease,

        box-shadow .16s ease,

        transform .16s ease;

}



.trips-table tr:last-child td {

    border-bottom: 0;

}



.trips-table tbody tr:hover td {

    background: #fff7f7;

}



.trips-table td:first-child {

    padding-left: 22px;

}



.trips-table td:last-child {

    padding-right: 22px;

}



.trips-table td strong {

    display: block;

    color: #0f172a;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 950;

}



.trips-table td span {

    display: block;

    margin-top: 4px;

    color: #64748b;

    font-size: 12px;

    line-height: 1.3;

    font-weight: 750;

}



.trips-table a {

    color: inherit;

}



.table-action {

    width: 1%;

    white-space: nowrap;

    text-align: right;

}



.table-action .btn {

    min-height: 38px;

    padding: 8px 12px;

    border-radius: 13px;

    font-size: 13px;

}



.trip-state {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    gap: 6px;

    min-height: 30px;

    width: fit-content;

    max-width: 100%;

    margin: 0 !important;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 12px !important;

    line-height: 1.15 !important;

    font-weight: 950 !important;

    white-space: nowrap;

    border: 1px solid rgba(15, 23, 42, .04);

}



.trip-state::before {

    content: "";

    width: 7px;

    height: 7px;

    flex: 0 0 auto;

    border-radius: 99px;

    background: currentColor;

    opacity: .76;

}



.empty-state {

    position: relative;

    margin: 0 0 28px;

    padding: 34px;

    border-radius: 28px;

    background:

        radial-gradient(circle at top left, rgba(220, 38, 38, .08), transparent 34%),

        linear-gradient(180deg, #ffffff, #f8fafc);

    border: 1px solid #e2e8f0;

    box-shadow: 0 20px 45px rgba(15, 23, 42, .07);

}



.empty-state::before {

    content: "!";

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    margin-bottom: 14px;

    border-radius: 16px;

    color: #991b1b;

    background: #fee2e2;

    font-size: 22px;

    font-weight: 950;

}



.empty-state h3 {

    margin: 0 0 8px;

    color: #0f172a;

    font-size: 24px;

    line-height: 1.15;

    font-weight: 950;

    letter-spacing: -.03em;

}



.empty-state p {

    max-width: 680px;

    margin: 0;

    color: #64748b;

    font-size: 15px;

    line-height: 1.55;

    font-weight: 700;

}



.info-card {

    overflow: hidden;

}



.info-card dl {

    display: grid;

    grid-template-columns: minmax(140px, .42fr) 1fr;

    gap: 0;

    margin: 0;

    border-radius: 18px;

    overflow: hidden;

    border: 1px solid #e2e8f0;

}



.info-card dt,

.info-card dd {

    margin: 0;

    padding: 12px 14px;

    border-bottom: 1px solid #e2e8f0;

}



.info-card dt:nth-last-child(2),

.info-card dd:last-child {

    border-bottom: 0;

}



.info-card dt {

    color: #475569;

    background: #f8fafc;

    font-size: 12px;

    line-height: 1.35;

    font-weight: 950;

    text-transform: uppercase;

    letter-spacing: .045em;

}



.info-card dd {

    color: #0f172a;

    background: #ffffff;

    font-size: 14px;

    line-height: 1.45;

    font-weight: 800;

}



.info-card dd a {

    color: #b91c1c;

    font-weight: 950;

    text-decoration: none;

}



.info-card dd a:hover {

    text-decoration: underline;

}



.trips-table-wrap[data-table-enhanced="true"] .trips-table tr {

    scroll-margin-top: 96px;

}



.table-scroll-hint {

    display: none;

    margin: -10px 0 14px;

    color: #64748b;

    font-size: 12px;

    line-height: 1.35;

    font-weight: 800;

}



@media (max-width: 980px) {

    .table-scroll-hint {

        display: block;

    }



    .trips-table-wrap {

        overflow-x: auto;

        border-radius: 24px;

        -webkit-overflow-scrolling: touch;

    }



    .trips-table {

        min-width: 820px;

    }



    .trips-table th,

    .trips-table td {

        padding: 13px 14px;

    }



    .trips-table th:first-child,

    .trips-table td:first-child {

        padding-left: 16px;

    }



    .trips-table th:last-child,

    .trips-table td:last-child {

        padding-right: 16px;

    }

}



@media (max-width: 720px) {

    .trips-table-wrap {

        overflow: visible;

        background: transparent;

        border: 0;

        box-shadow: none;

        border-radius: 0;

    }



    .trips-table-wrap::before {

        display: none;

    }



    .trips-table {

        min-width: 0;

        display: block;

    }



    .trips-table thead {

        display: none;

    }



    .trips-table tbody {

        display: grid;

        gap: 14px;

    }



    .trips-table tr {

        display: grid;

        gap: 0;

        border-radius: 24px;

        overflow: hidden;

        background: #ffffff;

        border: 1px solid #e2e8f0;

        box-shadow: 0 16px 34px rgba(15, 23, 42, .08);

    }



    .trips-table tr:hover td {

        background: #ffffff;

    }



    .trips-table td {

        position: relative;

        display: grid;

        grid-template-columns: 118px 1fr;

        gap: 12px;

        align-items: start;

        min-height: 52px;

        padding: 13px 16px !important;

        border-bottom: 1px solid #eef2f7;

        background: #ffffff;

        text-align: left;

        white-space: normal;

    }



    .trips-table td::before {

        content: attr(data-label);

        color: #64748b;

        font-size: 11px;

        line-height: 1.35;

        font-weight: 950;

        text-transform: uppercase;

        letter-spacing: .045em;

    }



    .trips-table td strong,

    .trips-table td span,

    .trips-table td .trip-state,

    .trips-table td .btn {

        grid-column: 2;

    }



    .trips-table td strong {

        font-size: 14px;

    }



    .trips-table td span {

        font-size: 12px;

    }



    .trips-table td:last-child {

        border-bottom: 0;

    }



    .table-action {

        width: auto;

        text-align: left;

        background: #f8fafc !important;

    }



    .table-action .btn {

        width: 100%;

        justify-content: center;

    }



    .empty-state {

        padding: 26px;

        border-radius: 24px;

    }



    .empty-state h3 {

        font-size: 21px;

    }



    .info-card dl {

        grid-template-columns: 1fr;

    }



    .info-card dt {

        border-bottom: 0;

        padding-bottom: 4px;

    }



    .info-card dd {

        padding-top: 4px;

    }



    .info-card dt:nth-last-child(2) {

        border-bottom: 0;

    }



    .info-card dd:not(:last-child) {

        border-bottom: 1px solid #e2e8f0;

    }

}




/* =========================================================

   UNIFIED DETAIL PAGES

   ========================================================= */



.hero--compact {

    position: relative;

    overflow: hidden;

    min-height: 0;

    margin-bottom: 26px;

    padding: 34px;

    border-radius: 32px;

    background:

        radial-gradient(circle at 18% 20%, rgba(248, 113, 113, .24), transparent 34%),

        radial-gradient(circle at 92% 18%, rgba(251, 191, 36, .16), transparent 30%),

        linear-gradient(135deg, #0f172a, #1e293b);

    border: 1px solid rgba(148, 163, 184, .22);

    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);

}



.hero--compact::after {

    content: "";

    position: absolute;

    right: -80px;

    bottom: -100px;

    width: 260px;

    height: 260px;

    border-radius: 999px;

    background: rgba(220, 38, 38, .18);

    filter: blur(4px);

}



.hero--compact > * {

    position: relative;

    z-index: 1;

}



.hero--compact .hero__badge {

    display: inline-flex;

    align-items: center;

    width: fit-content;

    min-height: 32px;

    margin-bottom: 12px;

    padding: 7px 12px;

    border-radius: 999px;

    color: #ffffff;

    background: rgba(220, 38, 38, .92);

    border: 1px solid rgba(248, 113, 113, .45);

    font-size: 12px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: .035em;

    text-transform: uppercase;

    box-shadow: 0 12px 26px rgba(220, 38, 38, .24);

}



.hero--compact h1 {

    max-width: 980px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(30px, 4vw, 48px);

    line-height: 1.02;

    font-weight: 950;

    letter-spacing: -.055em;

}



.hero--compact p {

    max-width: 860px;

    margin: 12px 0 0;

    color: #cbd5e1;

    font-size: 16px;

    line-height: 1.55;

    font-weight: 700;

}



.section-head {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 18px;

    margin: 0 0 18px;

}



.section-head h2 {

    margin: 0;

    color: #0f172a;

    font-size: clamp(24px, 3vw, 34px);

    line-height: 1.08;

    font-weight: 950;

    letter-spacing: -.045em;

}



.section-head p {

    margin: 7px 0 0;

    color: #64748b;

    font-size: 15px;

    line-height: 1.5;

    font-weight: 700;

}



.section-actions {

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 10px;

}



.trip-detail-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;

    align-items: start;

    margin-bottom: 24px;

}



.trip-notes-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;

    align-items: start;

    margin-bottom: 24px;

}



.info-card {

    position: relative;

    min-width: 0;

    padding: 24px;

    border-radius: 28px;

    background:

        linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(248, 250, 252, .97));

    border: 1px solid #e2e8f0;

    box-shadow:

        0 20px 45px rgba(15, 23, 42, .075),

        inset 0 1px 0 rgba(255, 255, 255, .95);

}



.info-card::before {

    content: "";

    position: absolute;

    inset: 0 0 auto 0;

    height: 4px;

    border-radius: 28px 28px 0 0;

    background: linear-gradient(90deg, #dc2626, #f97316, #facc15);

    opacity: .9;

}



.info-card h2 {

    margin: 0 0 18px;

    color: #0f172a;

    font-size: 22px;

    line-height: 1.12;

    font-weight: 950;

    letter-spacing: -.035em;

}



.info-card h3 {

    margin: 0 0 14px;

    color: #0f172a;

    font-size: 18px;

    line-height: 1.18;

    font-weight: 950;

    letter-spacing: -.025em;

}



.info-card p {

    margin: 0;

    color: #334155;

    font-size: 15px;

    line-height: 1.65;

    font-weight: 700;

}



.info-card p + p {

    margin-top: 10px;

}



.info-card.vehicle-note,

.vehicle-note {

    margin-bottom: 24px;

}



.info-card dl {

    display: grid;

    grid-template-columns: minmax(150px, .42fr) minmax(0, 1fr);

    gap: 0;

    margin: 0;

    border-radius: 20px;

    overflow: hidden;

    border: 1px solid #e2e8f0;

    background: #ffffff;

}



.info-card dt,

.info-card dd {

    margin: 0;

    min-width: 0;

    padding: 13px 15px;

    border-bottom: 1px solid #e2e8f0;

}



.info-card dt:nth-last-child(2),

.info-card dd:last-child {

    border-bottom: 0;

}



.info-card dt {

    color: #475569;

    background:

        linear-gradient(180deg, #f8fafc, #f1f5f9);

    font-size: 12px;

    line-height: 1.35;

    font-weight: 950;

    text-transform: uppercase;

    letter-spacing: .05em;

}



.info-card dd {

    color: #0f172a;

    background: #ffffff;

    font-size: 14px;

    line-height: 1.48;

    font-weight: 800;

    overflow-wrap: anywhere;

}



.info-card dd a {

    color: #b91c1c;

    font-weight: 950;

    text-decoration: none;

    border-bottom: 1px solid rgba(185, 28, 28, .22);

}



.info-card dd a:hover {

    color: #7f1d1d;

    border-bottom-color: rgba(127, 29, 29, .5);

}



.info-card .trip-state {

    margin-top: 0 !important;

}



.detail-meta-list {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin: 14px 0 0;

}



.detail-meta-pill {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height: 30px;

    padding: 6px 10px;

    border-radius: 999px;

    color: #334155;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    font-size: 12px;

    line-height: 1.15;

    font-weight: 850;

}



.detail-actions-card {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin: 0 0 24px;

    padding: 16px;

    border-radius: 24px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    box-shadow: 0 16px 34px rgba(15, 23, 42, .06);

}



.detail-actions-card .section-actions {

    margin-left: auto;

}



.detail-timeline {

    position: relative;

    display: grid;

    gap: 12px;

}



.detail-timeline__item {

    position: relative;

    padding: 14px 16px 14px 44px;

    border-radius: 18px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

}



.detail-timeline__item::before {

    content: "";

    position: absolute;

    left: 17px;

    top: 19px;

    width: 10px;

    height: 10px;

    border-radius: 99px;

    background: #dc2626;

    box-shadow: 0 0 0 5px rgba(220, 38, 38, .12);

}



.detail-timeline__item strong {

    display: block;

    color: #0f172a;

    font-size: 14px;

    line-height: 1.35;

    font-weight: 950;

}



.detail-timeline__item span {

    display: block;

    margin-top: 4px;

    color: #64748b;

    font-size: 12px;

    line-height: 1.35;

    font-weight: 750;

}



@media (max-width: 980px) {

    .hero--compact {

        padding: 28px;

        border-radius: 28px;

    }



    .section-head {

        align-items: stretch;

        flex-direction: column;

    }



    .section-actions {

        justify-content: flex-start;

    }



    .trip-detail-grid,

    .trip-notes-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }



    .info-card {

        padding: 20px;

        border-radius: 24px;

    }



    .info-card::before {

        border-radius: 24px 24px 0 0;

    }

}



@media (max-width: 640px) {

    .hero--compact {

        padding: 24px 20px;

        border-radius: 24px;

    }



    .hero--compact h1 {

        font-size: 30px;

    }



    .hero--compact p {

        font-size: 14px;

    }



    .section-actions .btn {

        width: 100%;

        justify-content: center;

    }



    .info-card {

        padding: 18px;

        border-radius: 22px;

    }



    .info-card h2 {

        font-size: 20px;

    }



    .info-card dl {

        grid-template-columns: 1fr;

        border-radius: 18px;

    }



    .info-card dt {

        padding-bottom: 5px;

        border-bottom: 0;

    }



    .info-card dd {

        padding-top: 4px;

    }



    .info-card dd:not(:last-child) {

        border-bottom: 1px solid #e2e8f0;

    }



    .info-card dt:nth-last-child(2) {

        border-bottom: 0;

    }



    .detail-actions-card {

        border-radius: 20px;

    }



    .detail-actions-card .btn {

        width: 100%;

        justify-content: center;

    }

}





/* =========================================================

   DETAIL JS ENHANCEMENTS

   ========================================================= */



.info-card dd.is-empty-value {

    color: #94a3b8;

    font-style: italic;

    font-weight: 750;

}



.section-head--many-actions {

    align-items: center;

}



.section-head--many-actions .section-actions {

    padding: 10px;

    border-radius: 20px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    box-shadow: 0 14px 28px rgba(15, 23, 42, .06);

}




/* =========================================================

   UNIFIED DETAIL PAGES

   ========================================================= */



.hero--compact {

    position: relative;

    overflow: hidden;

    min-height: 0;

    margin-bottom: 26px;

    padding: 34px;

    border-radius: 32px;

    background:

        radial-gradient(circle at 18% 20%, rgba(248, 113, 113, .24), transparent 34%),

        radial-gradient(circle at 92% 18%, rgba(251, 191, 36, .16), transparent 30%),

        linear-gradient(135deg, #0f172a, #1e293b);

    border: 1px solid rgba(148, 163, 184, .22);

    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);

}



.hero--compact::after {

    content: "";

    position: absolute;

    right: -80px;

    bottom: -100px;

    width: 260px;

    height: 260px;

    border-radius: 999px;

    background: rgba(220, 38, 38, .18);

    filter: blur(4px);

}



.hero--compact > * {

    position: relative;

    z-index: 1;

}



.hero--compact .hero__badge {

    display: inline-flex;

    align-items: center;

    width: fit-content;

    min-height: 32px;

    margin-bottom: 12px;

    padding: 7px 12px;

    border-radius: 999px;

    color: #ffffff;

    background: rgba(220, 38, 38, .92);

    border: 1px solid rgba(248, 113, 113, .45);

    font-size: 12px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: .035em;

    text-transform: uppercase;

    box-shadow: 0 12px 26px rgba(220, 38, 38, .24);

}



.hero--compact h1 {

    max-width: 980px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(30px, 4vw, 48px);

    line-height: 1.02;

    font-weight: 950;

    letter-spacing: -.055em;

}



.hero--compact p {

    max-width: 860px;

    margin: 12px 0 0;

    color: #cbd5e1;

    font-size: 16px;

    line-height: 1.55;

    font-weight: 700;

}



.section-head {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 18px;

    margin: 0 0 18px;

}



.section-head h2 {

    margin: 0;

    color: #0f172a;

    font-size: clamp(24px, 3vw, 34px);

    line-height: 1.08;

    font-weight: 950;

    letter-spacing: -.045em;

}



.section-head p {

    margin: 7px 0 0;

    color: #64748b;

    font-size: 15px;

    line-height: 1.5;

    font-weight: 700;

}



.section-actions {

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 10px;

}



.trip-detail-grid,

.trip-notes-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;

    align-items: start;

    margin-bottom: 24px;

}



.info-card {

    position: relative;

    min-width: 0;

    padding: 24px;

    border-radius: 28px;

    background:

        linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(248, 250, 252, .97));

    border: 1px solid #e2e8f0;

    box-shadow:

        0 20px 45px rgba(15, 23, 42, .075),

        inset 0 1px 0 rgba(255, 255, 255, .95);

}



.info-card::before {

    content: "";

    position: absolute;

    inset: 0 0 auto 0;

    height: 4px;

    border-radius: 28px 28px 0 0;

    background: linear-gradient(90deg, #dc2626, #f97316, #facc15);

    opacity: .9;

}



.info-card h2 {

    margin: 0 0 18px;

    color: #0f172a;

    font-size: 22px;

    line-height: 1.12;

    font-weight: 950;

    letter-spacing: -.035em;

}



.info-card h3 {

    margin: 0 0 14px;

    color: #0f172a;

    font-size: 18px;

    line-height: 1.18;

    font-weight: 950;

    letter-spacing: -.025em;

}



.info-card p {

    margin: 0;

    color: #334155;

    font-size: 15px;

    line-height: 1.65;

    font-weight: 700;

}



.info-card p + p {

    margin-top: 10px;

}



.info-card.vehicle-note,

.vehicle-note {

    margin-bottom: 24px;

}



.info-card dl {

    display: grid;

    grid-template-columns: minmax(150px, .42fr) minmax(0, 1fr);

    gap: 0;

    margin: 0;

    border-radius: 20px;

    overflow: hidden;

    border: 1px solid #e2e8f0;

    background: #ffffff;

}



.info-card dt,

.info-card dd {

    margin: 0;

    min-width: 0;

    padding: 13px 15px;

    border-bottom: 1px solid #e2e8f0;

}



.info-card dt:nth-last-child(2),

.info-card dd:last-child {

    border-bottom: 0;

}



.info-card dt {

    color: #475569;

    background:

        linear-gradient(180deg, #f8fafc, #f1f5f9);

    font-size: 12px;

    line-height: 1.35;

    font-weight: 950;

    text-transform: uppercase;

    letter-spacing: .05em;

}



.info-card dd {

    color: #0f172a;

    background: #ffffff;

    font-size: 14px;

    line-height: 1.48;

    font-weight: 800;

    overflow-wrap: anywhere;

}



.info-card dd a {

    color: #b91c1c;

    font-weight: 950;

    text-decoration: none;

    border-bottom: 1px solid rgba(185, 28, 28, .22);

}



.info-card dd a:hover {

    color: #7f1d1d;

    border-bottom-color: rgba(127, 29, 29, .5);

}



.info-card .trip-state {

    margin-top: 0 !important;

}



.detail-meta-list {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin: 14px 0 0;

}



.detail-meta-pill {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height: 30px;

    padding: 6px 10px;

    border-radius: 999px;

    color: #334155;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    font-size: 12px;

    line-height: 1.15;

    font-weight: 850;

}



.detail-actions-card {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin: 0 0 24px;

    padding: 16px;

    border-radius: 24px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    box-shadow: 0 16px 34px rgba(15, 23, 42, .06);

}



.detail-actions-card .section-actions {

    margin-left: auto;

}



@media (max-width: 980px) {

    .hero--compact {

        padding: 28px;

        border-radius: 28px;

    }



    .section-head {

        align-items: stretch;

        flex-direction: column;

    }



    .section-actions {

        justify-content: flex-start;

    }



    .trip-detail-grid,

    .trip-notes-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }



    .info-card {

        padding: 20px;

        border-radius: 24px;

    }



    .info-card::before {

        border-radius: 24px 24px 0 0;

    }

}



@media (max-width: 640px) {

    .hero--compact {

        padding: 24px 20px;

        border-radius: 24px;

    }



    .hero--compact h1 {

        font-size: 30px;

    }



    .hero--compact p {

        font-size: 14px;

    }



    .section-actions .btn {

        width: 100%;

        justify-content: center;

    }



    .info-card {

        padding: 18px;

        border-radius: 22px;

    }



    .info-card h2 {

        font-size: 20px;

    }



    .info-card dl {

        grid-template-columns: 1fr;

        border-radius: 18px;

    }



    .info-card dt {

        padding-bottom: 5px;

        border-bottom: 0;

    }



    .info-card dd {

        padding-top: 4px;

    }



    .info-card dd:not(:last-child) {

        border-bottom: 1px solid #e2e8f0;

    }



    .info-card dt:nth-last-child(2) {

        border-bottom: 0;

    }



    .detail-actions-card {

        border-radius: 20px;

    }



    .detail-actions-card .btn {

        width: 100%;

        justify-content: center;

    }

}





/* =========================================================

   DETAIL JS ENHANCEMENTS

   ========================================================= */



.info-card dd.is-empty-value {

    color: #94a3b8;

    font-style: italic;

    font-weight: 750;

}



.section-head--many-actions {

    align-items: center;

}



.section-head--many-actions .section-actions {

    padding: 10px;

    border-radius: 20px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    box-shadow: 0 14px 28px rgba(15, 23, 42, .06);

}




/* =========================================================

   CINEMATIC POLISH / NETFLIX-LIKE OVERRIDES

   ========================================================= */



:root {

    --ui-bg:

        radial-gradient(circle at 12% 10%, rgba(239, 68, 68, .14), transparent 26%),

        radial-gradient(circle at 88% 14%, rgba(245, 158, 11, .10), transparent 24%),

        radial-gradient(circle at 84% 82%, rgba(59, 130, 246, .08), transparent 22%),

        linear-gradient(180deg, #eef2f7 0%, #f7f9fc 100%);

    --ui-card-bg: rgba(255, 255, 255, .72);

    --ui-card-bg-strong: rgba(255, 255, 255, .84);

    --ui-border: rgba(148, 163, 184, .18);

    --ui-shadow: 0 24px 60px rgba(15, 23, 42, .10);

    --ui-shadow-soft: 0 16px 36px rgba(15, 23, 42, .08);

    --ui-glow-red: rgba(239, 68, 68, .18);

    --ui-glow-amber: rgba(245, 158, 11, .14);

    --ui-text: #0f172a;

    --ui-text-soft: #516279;

}



html,

body {

    background: var(--ui-bg);

}



body {

    color: var(--ui-text);

}



/* =========================================================

   SHELL / LAYOUT

   ========================================================= */



.app-shell {

    width: min(1600px, calc(100% - 28px));

    margin: 0 auto;

    padding: 18px 0 38px;

}



@media (max-width: 900px) {

    .app-shell {

        width: min(100% - 18px, 1600px);

        padding-top: 14px;

    }

}



/* =========================================================

   TOPBAR — SOFTER / MORE PREMIUM

   ========================================================= */



.app-topbar {

    background:

        radial-gradient(circle at 15% 0%, rgba(239, 68, 68, .16), transparent 24%),

        radial-gradient(circle at 85% 0%, rgba(245, 158, 11, .10), transparent 22%),

        linear-gradient(135deg, rgba(10, 18, 38, .97), rgba(17, 33, 64, .95));

    border-bottom: 1px solid rgba(148, 163, 184, .14);

    box-shadow:

        0 18px 40px rgba(15, 23, 42, .16),

        inset 0 -1px 0 rgba(255, 255, 255, .04);

    backdrop-filter: blur(20px);

}



.app-brand__mark {

    box-shadow:

        0 18px 34px rgba(220, 38, 38, .32),

        0 0 0 1px rgba(255, 255, 255, .10);

}



.app-nav__link {

    border-radius: 16px;

    transition:

        transform .18s ease,

        background .18s ease,

        border-color .18s ease,

        box-shadow .18s ease,

        color .18s ease;

}



.app-nav__link:hover {

    background: rgba(255, 255, 255, .10);

    border-color: rgba(255, 255, 255, .08);

    box-shadow: 0 10px 24px rgba(15, 23, 42, .14);

}



.app-nav__link.is-active {

    background:

        linear-gradient(135deg, rgba(239, 68, 68, .98), rgba(220, 38, 38, .96));

    box-shadow:

        0 14px 26px rgba(220, 38, 38, .24),

        0 0 0 1px rgba(255, 255, 255, .10) inset;

}



.app-logout {

    background: rgba(255, 255, 255, .08);

    backdrop-filter: blur(10px);

}



/* =========================================================

   HERO / HEADERS

   ========================================================= */



.hero,

.hero--compact {

    background:

        radial-gradient(circle at 12% 18%, rgba(239, 68, 68, .14), transparent 30%),

        radial-gradient(circle at 90% 20%, rgba(245, 158, 11, .10), transparent 24%),

        radial-gradient(circle at 88% 80%, rgba(239, 68, 68, .10), transparent 24%),

        linear-gradient(135deg, #08142d 0%, #14284d 100%);

    border: 1px solid rgba(148, 163, 184, .12);

    box-shadow:

        0 26px 60px rgba(15, 23, 42, .16),

        inset 0 1px 0 rgba(255, 255, 255, .05);

}



.hero::before,

.hero--compact::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(90deg, rgba(255,255,255,.02), transparent 20%, transparent 80%, rgba(255,255,255,.02));

    pointer-events: none;

}



.hero__badge {

    box-shadow: 0 14px 30px rgba(220, 38, 38, .24);

}



/* =========================================================

   CARDS / PANELS

   ========================================================= */



.info-card,

.form-card,

.trips-table-wrap,

.empty-state,

.detail-actions-card,

.filter-bar,

.dashboard-card,

.module-card,

.system-card,

.feature-card,

.stats-card,

.overview-card {

    background: var(--ui-card-bg) !important;

    backdrop-filter: blur(16px);

    border: 1px solid var(--ui-border) !important;

    box-shadow: var(--ui-shadow-soft) !important;

}



.info-card:hover,

.form-card:hover,

.dashboard-card:hover,

.module-card:hover,

.system-card:hover,

.feature-card:hover,

.stats-card:hover,

.overview-card:hover {

    box-shadow:

        0 22px 48px rgba(15, 23, 42, .12),

        0 0 0 1px rgba(255, 255, 255, .30) inset !important;

}



.info-card::before,

.form-card::before,

.trips-table-wrap::before,

.dashboard-card::before,

.module-card::before,

.system-card::before,

.feature-card::before,

.stats-card::before,

.overview-card::before {

    height: 3px;

    background:

        linear-gradient(90deg, rgba(239, 68, 68, .95), rgba(249, 115, 22, .82), rgba(245, 158, 11, .72));

}



/* =========================================================

   TABLES — FIX FIRST ROW / CLEANER LOOK

   ========================================================= */



/* Důležité: sticky head vypneme, protože schovává první řádek */

.trips-table thead {

    position: static !important;

    top: auto !important;

}



.trips-table-wrap {

    overflow: hidden;

    border-radius: 30px;

}



.trips-table {

    border-spacing: 0;

}



.trips-table th {

    background:

        linear-gradient(180deg, rgba(248, 250, 252, .94), rgba(241, 245, 249, .88));

    color: #40526c;

    border-bottom: 1px solid rgba(226, 232, 240, .92);

}



.trips-table td {

    background: transparent;

    border-bottom: 1px solid rgba(226, 232, 240, .68);

}



.trips-table tbody tr {

    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;

}



.trips-table tbody tr:nth-child(even) td {

    background: rgba(248, 250, 252, .45);

}



.trips-table tbody tr:hover td {

    background:

        linear-gradient(90deg, rgba(255, 245, 245, .94), rgba(255, 250, 240, .86));

}



.trips-table td strong {

    font-weight: 900;

}



.table-action .btn {

    background: rgba(255, 255, 255, .72);

    border: 1px solid rgba(203, 213, 225, .8);

    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);

}



.table-action .btn:hover {

    transform: translateY(-1px);

    box-shadow: 0 12px 24px rgba(15, 23, 42, .10);

}



/* =========================================================

   STATUS PILLS

   ========================================================= */



.trip-state,

.status-badge,

.badge-status {

    box-shadow:

        0 8px 18px rgba(15, 23, 42, .06),

        inset 0 1px 0 rgba(255, 255, 255, .35);

}



/* =========================================================

   DETAIL PAGES

   ========================================================= */



.section-head {

    margin-bottom: 20px;

}



.section-head .btn,

.detail-actions-card .btn {

    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);

}



/* =========================================================

   DASHBOARD / ROZCESTNÍK — KOMPAKTNĚJŠÍ

   ========================================================= */



.dashboard-grid,

.dashboard-cards,

.module-grid,

.modules-grid,

.system-grid,

.cards-grid,

.feature-grid {

    display: grid !important;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;

    gap: 16px !important;

    align-items: stretch !important;

}



.dashboard-card,

.module-card,

.system-card,

.feature-card,

.stats-card,

.overview-card {

    min-height: 170px !important;

    padding: 18px !important;

    border-radius: 24px !important;

    position: relative;

    overflow: hidden;

}



.dashboard-card::after,

.module-card::after,

.system-card::after,

.feature-card::after,

.stats-card::after,

.overview-card::after {

    content: "";

    position: absolute;

    inset: auto -20px -20px auto;

    width: 120px;

    height: 120px;

    border-radius: 999px;

    background: radial-gradient(circle, rgba(239, 68, 68, .18), transparent 68%);

    pointer-events: none;

}



.dashboard-card h2,

.dashboard-card h3,

.module-card h2,

.module-card h3,

.system-card h2,

.system-card h3,

.feature-card h2,

.feature-card h3,

.stats-card h2,

.stats-card h3,

.overview-card h2,

.overview-card h3 {

    margin-bottom: 8px !important;

    font-size: 24px !important;

    line-height: 1.05 !important;

}



.dashboard-card p,

.module-card p,

.system-card p,

.feature-card p,

.stats-card p,

.overview-card p {

    font-size: 14px !important;

    line-height: 1.5 !important;

    color: var(--ui-text-soft) !important;

}



.dashboard-card .btn,

.module-card .btn,

.system-card .btn,

.feature-card .btn,

.stats-card .btn,

.overview-card .btn {

    margin-top: 8px;

}



@media (min-width: 1200px) {

    .dashboard-grid,

    .dashboard-cards,

    .module-grid,

    .modules-grid,

    .system-grid,

    .cards-grid,

    .feature-grid {

        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    }



    .dashboard-card,

    .module-card,

    .system-card,

    .feature-card,

    .stats-card,

    .overview-card {

        min-height: 155px !important;

    }

}



/* =========================================================

   BUTTONS

   ========================================================= */



.btn,

button.btn {

    border-radius: 16px;

    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);

    transition:

        transform .18s ease,

        box-shadow .18s ease,

        background .18s ease,

        border-color .18s ease;

}



.btn:hover,

button.btn:hover {

    transform: translateY(-1px);

    box-shadow: 0 16px 30px rgba(15, 23, 42, .12);

}



.btn--primary {

    background:

        linear-gradient(135deg, #ef4444, #dc2626);

    border-color: rgba(239, 68, 68, .42);

}



.btn--secondary {

    background: rgba(255, 255, 255, .76);

    backdrop-filter: blur(10px);

}



/* =========================================================

   MOBILE

   ========================================================= */



@media (max-width: 720px) {

    .trips-table-wrap,

    .info-card,

    .form-card,

    .empty-state,

    .detail-actions-card {

        border-radius: 22px !important;

    }



    .dashboard-card,

    .module-card,

    .system-card,

    .feature-card,

    .stats-card,

    .overview-card {

        min-height: 145px !important;

        padding: 16px !important;

    }

}




/* =========================================================

   LIGHT REFINED UI OVERRIDES

   ========================================================= */



:root {

    --ui-page-bg:

        radial-gradient(circle at 12% 10%, rgba(239, 68, 68, .05), transparent 22%),

        radial-gradient(circle at 88% 16%, rgba(59, 130, 246, .04), transparent 20%),

        radial-gradient(circle at 82% 82%, rgba(34, 197, 94, .03), transparent 20%),

        linear-gradient(180deg, #f3f5f9 0%, #f7f9fc 100%);

    --ui-card: rgba(255, 255, 255, .86);

    --ui-card-strong: rgba(255, 255, 255, .94);

    --ui-border: rgba(203, 213, 225, .78);

    --ui-border-soft: rgba(203, 213, 225, .52);

    --ui-text: #0f172a;

    --ui-text-soft: #5b6b82;

    --ui-shadow: 0 12px 28px rgba(15, 23, 42, .06);

    --ui-shadow-soft: 0 8px 20px rgba(15, 23, 42, .045);

    --ui-red-soft: linear-gradient(180deg, rgba(254, 242, 242, .95), rgba(255, 255, 255, .96));

    --ui-green-soft: linear-gradient(180deg, rgba(240, 253, 244, .95), rgba(255, 255, 255, .96));

    --ui-blue-soft: linear-gradient(180deg, rgba(239, 246, 255, .95), rgba(255, 255, 255, .96));

    --ui-amber-soft: linear-gradient(180deg, rgba(255, 251, 235, .95), rgba(255, 255, 255, .96));

    --ui-violet-soft: linear-gradient(180deg, rgba(245, 243, 255, .95), rgba(255, 255, 255, .96));

    --ui-cyan-soft: linear-gradient(180deg, rgba(236, 254, 255, .95), rgba(255, 255, 255, .96));

}



html,

body {

    background: var(--ui-page-bg) !important;

    color: var(--ui-text);

}



/* =========================================================

   HEADER — MENŠÍ, ČISTŠÍ

   ========================================================= */



.app-topbar {

    background:

        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .94)) !important;

    border-bottom: 1px solid rgba(203, 213, 225, .65) !important;

    box-shadow: 0 6px 18px rgba(15, 23, 42, .05) !important;

    backdrop-filter: blur(16px);

}



.app-topbar__inner {

    width: min(1560px, calc(100% - 24px)) !important;

    min-height: 60px !important;

    gap: 12px !important;

}



.app-brand {

    gap: 10px !important;

}



.app-brand__mark {

    width: 40px !important;

    height: 40px !important;

    border-radius: 14px !important;

    font-size: 20px !important;

    box-shadow: 0 8px 18px rgba(220, 38, 38, .16) !important;

}



.app-brand__text strong {

    font-size: 14px !important;

    color: #0f172a !important;

    font-weight: 900 !important;

}



.app-brand__text small {

    font-size: 11px !important;

    color: #64748b !important;

}



.app-nav {

    gap: 4px !important;

    padding: 4px 0 !important;

}



.app-nav__link {

    min-height: 36px !important;

    padding: 7px 10px !important;

    border-radius: 13px !important;

    color: #1e293b !important;

    font-size: 12px !important;

    font-weight: 850 !important;

    border: 1px solid transparent !important;

    box-shadow: none !important;

}



.app-nav__link:hover {

    background: rgba(241, 245, 249, .95) !important;

    border-color: rgba(203, 213, 225, .65) !important;

    color: #0f172a !important;

    transform: translateY(-1px);

}



.app-nav__link.is-active {

    background:

        linear-gradient(180deg, rgba(239, 68, 68, .96), rgba(220, 38, 38, .96)) !important;

    border-color: rgba(239, 68, 68, .35) !important;

    color: #ffffff !important;

    box-shadow: 0 8px 16px rgba(239, 68, 68, .16) !important;

}



.app-user__name strong {

    font-size: 12px !important;

    color: #0f172a !important;

}



.app-user__name small {

    font-size: 10px !important;

    color: #64748b !important;

}



.app-logout {

    min-height: 34px !important;

    padding: 7px 11px !important;

    border-radius: 13px !important;

    color: #0f172a !important;

    background: rgba(255, 255, 255, .9) !important;

    border: 1px solid rgba(203, 213, 225, .8) !important;

    box-shadow: 0 6px 14px rgba(15, 23, 42, .04) !important;

}



.app-logout:hover {

    background: #ffffff !important;

}



/* =========================================================

   PAGE SHELL

   ========================================================= */



.app-shell {

    width: min(1600px, calc(100% - 24px)) !important;

    margin: 0 auto !important;

    padding: 16px 0 32px !important;

}



/* =========================================================

   HERO — SVĚTLÝ, JEMNÝ

   ========================================================= */



.hero,

.hero--compact {

    background:

        linear-gradient(180deg, rgba(255, 255, 255, .90), rgba(248, 250, 252, .94)) !important;

    border: 1px solid rgba(203, 213, 225, .72) !important;

    box-shadow: var(--ui-shadow) !important;

    border-radius: 28px !important;

    color: var(--ui-text) !important;

}



.hero::before,

.hero::after,

.hero--compact::before,

.hero--compact::after {

    display: none !important;

}



.hero h1,

.hero--compact h1 {

    color: #0f172a !important;

    font-size: clamp(28px, 4vw, 42px) !important;

    letter-spacing: -.04em !important;

}



.hero p,

.hero--compact p {

    color: #5b6b82 !important;

    font-size: 15px !important;

}



.hero__badge,

.hero--compact .hero__badge {

    background: rgba(239, 68, 68, .12) !important;

    color: #b91c1c !important;

    border: 1px solid rgba(239, 68, 68, .18) !important;

    box-shadow: none !important;

}



/* =========================================================

   KARTY / PANELY

   ========================================================= */



.info-card,

.form-card,

.trips-table-wrap,

.empty-state,

.detail-actions-card,

.filter-bar,

.dashboard-card,

.module-card,

.system-card,

.feature-card,

.stats-card,

.overview-card {

    background: var(--ui-card) !important;

    border: 1px solid var(--ui-border-soft) !important;

    box-shadow: var(--ui-shadow-soft) !important;

    backdrop-filter: blur(10px);

}



.info-card::before,

.form-card::before,

.trips-table-wrap::before,

.dashboard-card::before,

.module-card::before,

.system-card::before,

.feature-card::before,

.stats-card::before,

.overview-card::before {

    height: 2px !important;

    background:

        linear-gradient(90deg, rgba(239, 68, 68, .70), rgba(249, 115, 22, .40), rgba(250, 204, 21, .24)) !important;

}



/* =========================================================

   DASHBOARD / ROZCESTNÍK

   ========================================================= */



.dashboard-grid,

.dashboard-cards,

.module-grid,

.modules-grid,

.system-grid,

.cards-grid,

.feature-grid {

    display: grid !important;

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;

    gap: 16px !important;

    align-items: stretch !important;

}



.dashboard-card,

.module-card,

.system-card,

.feature-card,

.stats-card,

.overview-card {

    min-height: 138px !important;

    padding: 18px !important;

    border-radius: 22px !important;

    overflow: hidden !important;

    position: relative !important;

}



.dashboard-card::after,

.module-card::after,

.system-card::after,

.feature-card::after,

.stats-card::after,

.overview-card::after {

    content: "";

    position: absolute;

    right: -16px;

    bottom: -16px;

    width: 90px;

    height: 90px;

    border-radius: 999px;

    background: radial-gradient(circle, rgba(239, 68, 68, .08), transparent 72%);

    pointer-events: none;

}



.dashboard-card h2,

.dashboard-card h3,

.module-card h2,

.module-card h3,

.system-card h2,

.system-card h3,

.feature-card h2,

.feature-card h3,

.stats-card h2,

.stats-card h3,

.overview-card h2,

.overview-card h3 {

    margin: 0 0 8px !important;

    color: #0f172a !important;

    font-size: 19px !important;

    line-height: 1.15 !important;

    font-weight: 950 !important;

    letter-spacing: -.03em !important;

}



.dashboard-card p,

.module-card p,

.system-card p,

.feature-card p,

.stats-card p,

.overview-card p {

    margin: 0 !important;

    color: #5b6b82 !important;

    font-size: 14px !important;

    line-height: 1.5 !important;

    font-weight: 700 !important;

}



.dashboard-card:hover,

.module-card:hover,

.system-card:hover,

.feature-card:hover,

.stats-card:hover,

.overview-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 12px 26px rgba(15, 23, 42, .07) !important;

}



/* jemné barevné tóny dlaždic */

.dashboard-card:nth-child(6n+1),

.module-card:nth-child(6n+1),

.system-card:nth-child(6n+1),

.feature-card:nth-child(6n+1),

.stats-card:nth-child(6n+1),

.overview-card:nth-child(6n+1) {

    background: var(--ui-red-soft) !important;

}



.dashboard-card:nth-child(6n+2),

.module-card:nth-child(6n+2),

.system-card:nth-child(6n+2),

.feature-card:nth-child(6n+2),

.stats-card:nth-child(6n+2),

.overview-card:nth-child(6n+2) {

    background: var(--ui-green-soft) !important;

}



.dashboard-card:nth-child(6n+3),

.module-card:nth-child(6n+3),

.system-card:nth-child(6n+3),

.feature-card:nth-child(6n+3),

.stats-card:nth-child(6n+3),

.overview-card:nth-child(6n+3) {

    background: var(--ui-blue-soft) !important;

}



.dashboard-card:nth-child(6n+4),

.module-card:nth-child(6n+4),

.system-card:nth-child(6n+4),

.feature-card:nth-child(6n+4),

.stats-card:nth-child(6n+4),

.overview-card:nth-child(6n+4) {

    background: var(--ui-amber-soft) !important;

}



.dashboard-card:nth-child(6n+5),

.module-card:nth-child(6n+5),

.system-card:nth-child(6n+5),

.feature-card:nth-child(6n+5),

.stats-card:nth-child(6n+5),

.overview-card:nth-child(6n+5) {

    background: var(--ui-violet-soft) !important;

}



.dashboard-card:nth-child(6n),

.module-card:nth-child(6n),

.system-card:nth-child(6n),

.feature-card:nth-child(6n),

.stats-card:nth-child(6n),

.overview-card:nth-child(6n) {

    background: var(--ui-cyan-soft) !important;

}



/* =========================================================

   KARTY SLUŽEB

   ========================================================= */



.service-card,

.shift-card,

.duty-card,

.current-duty,

.next-duty,

.previous-duty {

    border-radius: 22px !important;

    box-shadow: var(--ui-shadow-soft) !important;

    border: 1px solid rgba(203, 213, 225, .55) !important;

}



.service-card--previous,

.previous-duty {

    background: var(--ui-card-strong) !important;

}



.service-card--current,

.current-duty {

    background: var(--ui-green-soft) !important;

}



.service-card--next,

.next-duty {

    background: var(--ui-blue-soft) !important;

}



/* =========================================================

   TABULKY

   ========================================================= */



.trips-table thead {

    position: static !important;

    top: auto !important;

}



.trips-table-wrap {

    border-radius: 24px !important;

    overflow: hidden !important;

}



.trips-table th {

    background: rgba(248, 250, 252, .86) !important;

    color: #475569 !important;

    border-bottom: 1px solid rgba(226, 232, 240, .94) !important;

}



.trips-table td {

    border-bottom: 1px solid rgba(226, 232, 240, .75) !important;

}



.trips-table tbody tr:nth-child(even) td {

    background: rgba(248, 250, 252, .34) !important;

}



.trips-table tbody tr:hover td {

    background: rgba(255, 255, 255, .92) !important;

}



/* =========================================================

   BUTTONS

   ========================================================= */



.btn,

button.btn {

    border-radius: 14px !important;

    box-shadow: 0 6px 14px rgba(15, 23, 42, .05) !important;

}



.btn--primary {

    background: linear-gradient(180deg, rgba(239, 68, 68, .96), rgba(220, 38, 38, .96)) !important;

    border-color: rgba(239, 68, 68, .28) !important;

}



.btn--secondary {

    background: rgba(255, 255, 255, .88) !important;

    border-color: rgba(203, 213, 225, .82) !important;

    color: #0f172a !important;

}



/* =========================================================

   MOBILE

   ========================================================= */



@media (min-width: 1200px) {

    .dashboard-grid,

    .dashboard-cards,

    .module-grid,

    .modules-grid,

    .system-grid,

    .cards-grid,

    .feature-grid {

        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    }

}



@media (max-width: 900px) {

    .app-topbar__inner {

        min-height: 56px !important;

    }



    .dashboard-card,

    .module-card,

    .system-card,

    .feature-card,

    .stats-card,

    .overview-card {

        min-height: 128px !important;

        padding: 16px !important;

    }

}



@media (max-width: 640px) {

    .app-shell {

        width: min(100% - 16px, 1600px) !important;

    }



    .hero,

    .hero--compact,

    .info-card,

    .form-card,

    .trips-table-wrap,

    .dashboard-card,

    .module-card,

    .system-card,

    .feature-card,

    .stats-card,

    .overview-card {

        border-radius: 20px !important;

    }

}




/* =========================================================

   CLEAN LIGHT DASHBOARD OVERRIDES

   ========================================================= */



/* ---------- základ ---------- */



html,

body {

    background:

        linear-gradient(180deg, #f3f6fb 0%, #f8fafd 100%) !important;

    color: #0f172a !important;

}



.app-shell {

    width: min(1600px, calc(100% - 22px)) !important;

    margin: 0 auto !important;

    padding: 14px 0 26px !important;

}



/* ---------- header pouze jeden řádek ---------- */



.app-topbar {

    background: rgba(255, 255, 255, .96) !important;

    border-bottom: 1px solid rgba(203, 213, 225, .75) !important;

    box-shadow: 0 4px 14px rgba(15, 23, 42, .05) !important;

    backdrop-filter: blur(12px);

}



.app-topbar__inner {

    width: min(1600px, calc(100% - 22px)) !important;

    min-height: 54px !important;

    gap: 10px !important;

    align-items: center !important;

}



.app-brand {

    gap: 10px !important;

}



.app-brand__mark {

    width: 40px !important;

    height: 40px !important;

    border-radius: 14px !important;

    font-size: 20px !important;

    box-shadow: 0 8px 18px rgba(220, 38, 38, .15) !important;

}



.app-brand__text {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    line-height: 1 !important;

}



.app-brand__text strong {

    font-size: 14px !important;

    font-weight: 900 !important;

    color: #0f172a !important;

    margin: 0 !important;

}



.app-brand__text small {

    display: none !important;

}



.app-nav {

    gap: 4px !important;

    padding: 0 !important;

}



.app-nav__link {

    min-height: 34px !important;

    padding: 6px 10px !important;

    border-radius: 13px !important;

    font-size: 12px !important;

    font-weight: 850 !important;

    color: #1e293b !important;

    border: 1px solid transparent !important;

    box-shadow: none !important;

}



.app-nav__link:hover {

    background: #f8fafc !important;

    border-color: rgba(203, 213, 225, .75) !important;

    color: #0f172a !important;

}



.app-nav__link.is-active {

    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;

    color: #ffffff !important;

    border-color: rgba(239, 68, 68, .28) !important;

    box-shadow: 0 8px 16px rgba(239, 68, 68, .14) !important;

}



.app-user {

    gap: 8px !important;

}



.app-user__name {

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

    line-height: 1 !important;

}



.app-user__name strong {

    font-size: 12px !important;

    color: #0f172a !important;

    font-weight: 900 !important;

}



.app-user__name small {

    display: none !important;

}



.app-logout {

    min-height: 34px !important;

    padding: 7px 12px !important;

    border-radius: 13px !important;

    color: #0f172a !important;

    background: #ffffff !important;

    border: 1px solid rgba(203, 213, 225, .85) !important;

    box-shadow: 0 6px 12px rgba(15, 23, 42, .04) !important;

}



/* ---------- pryč s tmavým dashboard hero ---------- */



.hero,

.hero--compact,

.dashboard-hero,

.dashboard-summary,

.dashboard-side,

.dashboard-sidebar {

    background:

        linear-gradient(180deg, rgba(233, 242, 255, .96) 0%, rgba(247, 251, 255, .97) 58%, rgba(255, 255, 255, .99) 100%) !important;

    border: 1px solid rgba(203, 213, 225, .78) !important;

    box-shadow: 0 10px 24px rgba(15, 23, 42, .05) !important;

    border-radius: 24px !important;

    color: #0f172a !important;

}



.hero::before,

.hero::after,

.hero--compact::before,

.hero--compact::after,

.dashboard-hero::before,

.dashboard-hero::after,

.dashboard-summary::before,

.dashboard-summary::after {

    display: none !important;

}



.hero h1,

.hero--compact h1,

.dashboard-hero h1,

.dashboard-summary h1 {

    color: #0f172a !important;

    font-size: clamp(26px, 3.2vw, 38px) !important;

    line-height: 1.05 !important;

    letter-spacing: -.035em !important;

}



.hero p,

.hero--compact p,

.dashboard-hero p,

.dashboard-summary p {

    color: #5b6b82 !important;

    font-size: 15px !important;

    line-height: 1.5 !important;

}



.hero__badge,

.hero--compact .hero__badge {

    background: rgba(239, 68, 68, .11) !important;

    color: #b91c1c !important;

    border: 1px solid rgba(239, 68, 68, .16) !important;

    box-shadow: none !important;

}



/* schovat druhé odhlášení v hero/header sekci */

.hero .app-logout,

.hero--compact .app-logout,

.hero a[href*="logout"],

.hero--compact a[href*="logout"],

.dashboard-hero a[href*="logout"],

.dashboard-summary a[href*="logout"] {

    display: none !important;

}



/* ---------- bílé / světlejší karty ---------- */



.info-card,

.form-card,

.trips-table-wrap,

.empty-state,

.detail-actions-card,

.filter-bar {

    background: rgba(255, 255, 255, .92) !important;

    border: 1px solid rgba(203, 213, 225, .72) !important;

    box-shadow: 0 8px 20px rgba(15, 23, 42, .045) !important;

}



/* ---------- dlaždice rozcestníku ---------- */



.dashboard-grid,

.dashboard-cards,

.module-grid,

.modules-grid,

.system-grid,

.cards-grid,

.feature-grid {

    display: grid !important;

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;

    gap: 16px !important;

    align-items: stretch !important;

}



.dashboard-card,

.module-card,

.system-card,

.feature-card,

.stats-card,

.overview-card {

    position: relative !important;

    overflow: hidden !important;

    min-height: 96px !important;

    padding: 16px 16px 14px !important;

    border-radius: 20px !important;

    background:

        linear-gradient(180deg, rgba(214, 228, 252, .98) 0%, rgba(237, 244, 255, .94) 38%, rgba(255, 255, 255, .99) 100%) !important;

    border: 1px solid rgba(191, 219, 254, .75) !important;

    box-shadow: 0 8px 18px rgba(15, 23, 42, .045) !important;

    transform: none !important;

}



.dashboard-card::before,

.module-card::before,

.system-card::before,

.feature-card::before,

.stats-card::before,

.overview-card::before {

    content: "" !important;

    position: absolute !important;

    inset: 0 0 auto 0 !important;

    height: 2px !important;

    background: linear-gradient(90deg, rgba(37, 99, 235, .72), rgba(96, 165, 250, .34)) !important;

}



.dashboard-card::after,

.module-card::after,

.system-card::after,

.feature-card::after,

.stats-card::after,

.overview-card::after {

    display: none !important;

}



.dashboard-card:hover,

.module-card:hover,

.system-card:hover,

.feature-card:hover,

.stats-card:hover,

.overview-card:hover {

    transform: translateY(-1px) !important;

    box-shadow: 0 12px 22px rgba(15, 23, 42, .055) !important;

}



.dashboard-card h2,

.dashboard-card h3,

.module-card h2,

.module-card h3,

.system-card h2,

.system-card h3,

.feature-card h2,

.feature-card h3,

.stats-card h2,

.stats-card h3,

.overview-card h2,

.overview-card h3 {

    margin: 0 0 7px !important;

    color: #0f172a !important;

    font-size: 18px !important;

    line-height: 1.14 !important;

    font-weight: 950 !important;

    letter-spacing: -.025em !important;

}



.dashboard-card p,

.module-card p,

.system-card p,

.feature-card p,

.stats-card p,

.overview-card p {

    margin: 0 !important;

    color: #5b6b82 !important;

    font-size: 13px !important;

    line-height: 1.45 !important;

    font-weight: 700 !important;

}



/* ---------- emoji glow ---------- */



.dashboard-card__icon,

.module-card__icon,

.system-card__icon,

.feature-card__icon,

.stats-card__icon,

.overview-card__icon {

    position: relative !important;

    width: 48px !important;

    height: 48px !important;

    display: grid !important;

    place-items: center !important;

    border-radius: 15px !important;

    background: rgba(255, 255, 255, .74) !important;

    border: 1px solid rgba(191, 219, 254, .52) !important;

    box-shadow:

        0 0 0 8px rgba(191, 219, 254, .12),

        0 0 22px rgba(147, 197, 253, .24),

        0 8px 18px rgba(15, 23, 42, .05) !important;

}



.dashboard-card__icon *,

.module-card__icon *,

.system-card__icon *,

.feature-card__icon *,

.stats-card__icon *,

.overview-card__icon * {

    font-size: 24px !important;

    filter: saturate(1.08);

}



/* fallback pro případy, kdy wrapper není pojmenovaný úplně stejně */

.dashboard-card .card-icon,

.module-card .card-icon,

.system-card .card-icon,

.feature-card .card-icon,

.stats-card .card-icon,

.overview-card .card-icon {

    width: 48px !important;

    height: 48px !important;

    display: grid !important;

    place-items: center !important;

    border-radius: 15px !important;

    background: rgba(255, 255, 255, .74) !important;

    border: 1px solid rgba(191, 219, 254, .52) !important;

    box-shadow:

        0 0 0 8px rgba(191, 219, 254, .12),

        0 0 22px rgba(147, 197, 253, .24),

        0 8px 18px rgba(15, 23, 42, .05) !important;

}



/* ---------- tabulky ---------- */



.trips-table thead {

    position: static !important;

    top: auto !important;

}



.trips-table-wrap {

    overflow: hidden !important;

    border-radius: 22px !important;

}



.trips-table th {

    background: rgba(248, 250, 252, .90) !important;

    color: #475569 !important;

    border-bottom: 1px solid rgba(226, 232, 240, .92) !important;

}



.trips-table tbody tr:nth-child(even) td {

    background: rgba(248, 250, 252, .36) !important;

}



.trips-table tbody tr:hover td {

    background: rgba(255, 255, 255, .94) !important;

}



/* ---------- responsive ---------- */



@media (min-width: 1200px) {

    .dashboard-grid,

    .dashboard-cards,

    .module-grid,

    .modules-grid,

    .system-grid,

    .cards-grid,

    .feature-grid {

        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    }

}



@media (max-width: 900px) {

    .app-topbar__inner {

        min-height: 50px !important;

    }



    .dashboard-card,

    .module-card,

    .system-card,

    .feature-card,

    .stats-card,

    .overview-card {

        min-height: 92px !important;

        padding: 14px !important;

    }

}



@media (max-width: 640px) {

    .app-shell {

        width: min(100% - 14px, 1600px) !important;

    }



    .hero,

    .hero--compact,

    .dashboard-card,

    .module-card,

    .system-card,

    .feature-card,

    .stats-card,

    .overview-card,

    .info-card,

    .trips-table-wrap {

        border-radius: 18px !important;

    }

}




/* =========================================================

   CLEAN DASHBOARD FINAL

   ========================================================= */



.clean-dashboard-head {

    margin: 0 0 18px;

    padding: 18px 4px 4px;

}



.clean-dashboard-head h1 {

    margin: 0;

    color: #0f172a;

    font-size: clamp(34px, 4vw, 54px);

    line-height: 1;

    font-weight: 950;

    letter-spacing: -.055em;

}



.clean-dashboard-head p {

    margin: 10px 0 0;

    color: #64748b;

    font-size: 15px;

    line-height: 1.45;

    font-weight: 700;

}



.clean-section-head {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 16px;

    margin: 0 0 16px;

}



.clean-section-head h2 {

    margin: 0;

    color: #0f172a;

    font-size: clamp(26px, 3vw, 40px);

    line-height: 1.05;

    font-weight: 950;

    letter-spacing: -.045em;

}



.clean-section-head p {

    margin: 6px 0 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.45;

    font-weight: 700;

}



.clean-module-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));

    gap: 15px;

    align-items: stretch;

}



.clean-module-card {

    position: relative;

    overflow: hidden;

    min-height: 118px;

    padding: 15px 16px 13px;

    border-radius: 20px;

    text-decoration: none;

    color: #0f172a;

    background:

        linear-gradient(180deg, rgba(214, 228, 252, .96) 0%, rgba(237, 244, 255, .94) 38%, rgba(255, 255, 255, .99) 100%);

    border: 1px solid rgba(191, 219, 254, .78);

    box-shadow: 0 8px 18px rgba(15, 23, 42, .045);

    transition:

        transform .16s ease,

        box-shadow .16s ease,

        border-color .16s ease;

}



.clean-module-card::before {

    content: "";

    position: absolute;

    inset: 0 0 auto 0;

    height: 2px;

    background: linear-gradient(90deg, rgba(37, 99, 235, .75), rgba(96, 165, 250, .35));

}



.clean-module-card:hover {

    transform: translateY(-2px);

    border-color: rgba(96, 165, 250, .72);

    box-shadow: 0 14px 26px rgba(15, 23, 42, .065);

}



.clean-module-card__top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 10px;

}



.clean-module-card__icon {

    width: 44px;

    height: 44px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    background: rgba(255, 255, 255, .82);

    border: 1px solid rgba(191, 219, 254, .62);

    box-shadow:

        0 0 0 8px rgba(191, 219, 254, .16),

        0 0 24px rgba(147, 197, 253, .30),

        0 8px 18px rgba(15, 23, 42, .05);

    font-size: 23px;

}



.clean-module-card__status {

    max-width: 142px;

    padding: 6px 10px;

    border-radius: 999px;

    color: #991b1b;

    background: rgba(254, 226, 226, .82);

    border: 1px solid rgba(252, 165, 165, .52);

    font-size: 11px;

    line-height: 1.1;

    font-weight: 950;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.clean-module-card h3 {

    margin: 0 0 6px;

    color: #0f172a;

    font-size: 19px;

    line-height: 1.12;

    font-weight: 950;

    letter-spacing: -.03em;

}



.clean-module-card p {

    margin: 0;

    color: #53657d;

    font-size: 13px;

    line-height: 1.42;

    font-weight: 750;

}



.clean-module-card__footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: 12px;

    color: #64748b;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 850;

}



.clean-module-card__footer strong {

    color: #dc2626;

    font-size: 18px;

    line-height: 1;

}



/* Dashboard nesmí používat starý tmavý hero/panely */

.clean-dashboard-head ~ .dashboard-hero,

.clean-dashboard-head ~ .dashboard-summary,

.clean-dashboard-head ~ .hero {

    display: none !important;

}



@media (min-width: 1300px) {

    .clean-module-grid {

        grid-template-columns: repeat(4, minmax(0, 1fr));

    }



    .clean-module-card {

        min-height: 112px;

    }

}



@media (max-width: 900px) {

    .clean-dashboard-head {

        padding-top: 12px;

    }



    .clean-module-grid {

        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    }



    .clean-module-card {

        min-height: 110px;

    }

}



@media (max-width: 640px) {

    .clean-module-grid {

        grid-template-columns: 1fr;

    }



    .clean-module-card {

        min-height: 104px;

        border-radius: 18px;

    }

}




/* =========================================================

   DASHBOARD COMPACT TUNING

   ========================================================= */



.clean-dashboard-head--compact {

    margin: 0 0 14px !important;

    padding: 10px 2px 2px !important;

}



.clean-dashboard-head--compact h1 {

    margin: 0 !important;

    font-size: clamp(34px, 4vw, 52px) !important;

    line-height: 0.98 !important;

    letter-spacing: -.055em !important;

}



.clean-dashboard-head--compact p {

    margin: 10px 0 0 !important;

    max-width: none !important;

    color: #64748b !important;

    font-size: 14px !important;

    line-height: 1.45 !important;

    font-weight: 800 !important;

}



.clean-module-grid--compact {

    margin-top: 0 !important;

    gap: 14px !important;

    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;

}



.clean-module-card--compact {

    min-height: 104px !important;

    padding: 14px 15px 12px !important;

    border-radius: 18px !important;

}



.clean-module-card--compact .clean-module-card__top {

    margin-bottom: 8px !important;

}



.clean-module-card--compact .clean-module-card__icon {

    width: 42px !important;

    height: 42px !important;

    border-radius: 14px !important;

    font-size: 22px !important;

}



.clean-module-card--compact .clean-module-card__status {

    padding: 5px 9px !important;

    font-size: 10px !important;

}



.clean-module-card--compact h3 {

    margin: 0 0 5px !important;

    font-size: 17px !important;

    line-height: 1.1 !important;

}



.clean-module-card--compact p {

    font-size: 12px !important;

    line-height: 1.4 !important;

}



.clean-module-card--compact .clean-module-card__footer {

    margin-top: 10px !important;

    font-size: 11px !important;

}



.clean-empty-state {

    min-height: 150px !important;

    padding: 26px !important;

}



.clean-empty-state h3 {

    margin-bottom: 8px !important;

}



@media (min-width: 1300px) {

    .clean-module-grid--compact {

        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    }



    .clean-module-card--compact {

        min-height: 100px !important;

    }

}



@media (max-width: 900px) {

    .clean-dashboard-head--compact {

        margin-bottom: 12px !important;

        padding-top: 6px !important;

    }



    .clean-module-card--compact {

        min-height: 98px !important;

    }

}




/* =========================================================

   DASHBOARD TIGHT CARDS / NO PERMISSION TEXT

   ========================================================= */



.clean-module-grid--tight {

    gap: 12px !important;

    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;

}



.clean-module-card--tight {

    min-height: 92px !important;

    padding: 12px 14px 11px !important;

    border-radius: 17px !important;

}



.clean-module-card--tight .clean-module-card__top {

    margin-bottom: 7px !important;

}



.clean-module-card--tight .clean-module-card__icon {

    width: 38px !important;

    height: 38px !important;

    border-radius: 13px !important;

    font-size: 20px !important;

    box-shadow:

        0 0 0 7px rgba(191, 219, 254, .13),

        0 0 20px rgba(147, 197, 253, .28),

        0 7px 14px rgba(15, 23, 42, .045) !important;

}



.clean-module-card__status {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-height: 25px !important;

    max-width: 110px !important;

    padding: 5px 9px !important;

    border-radius: 999px !important;

    color: #1d4ed8 !important;

    background: rgba(219, 234, 254, .88) !important;

    border: 1px solid rgba(147, 197, 253, .62) !important;

    box-shadow: none !important;

    font-size: 10px !important;

    line-height: 1 !important;

    font-weight: 950 !important;

    text-transform: uppercase !important;

    letter-spacing: .035em !important;

}



.clean-module-card--tight h3 {

    margin: 0 0 4px !important;

    font-size: 16px !important;

    line-height: 1.08 !important;

}



.clean-module-card--tight p {

    max-width: calc(100% - 22px);

    font-size: 12px !important;

    line-height: 1.34 !important;

    font-weight: 720 !important;

}



.clean-module-card__footer {

    display: none !important;

}



.clean-module-card__arrow {

    position: absolute;

    right: 14px;

    bottom: 10px;

    color: #dc2626;

    font-size: 18px;

    line-height: 1;

    font-weight: 950;

    opacity: .85;

    transition:

        transform .16s ease,

        opacity .16s ease;

}



.clean-module-card--tight:hover .clean-module-card__arrow {

    transform: translateX(2px);

    opacity: 1;

}



@media (min-width: 1300px) {

    .clean-module-grid--tight {

        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    }



    .clean-module-card--tight {

        min-height: 88px !important;

    }

}



@media (min-width: 1600px) {

    .clean-module-grid--tight {

        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    }

}



@media (max-width: 900px) {

    .clean-module-grid--tight {

        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;

    }



    .clean-module-card--tight {

        min-height: 88px !important;

    }

}



@media (max-width: 640px) {

    .clean-module-grid--tight {

        grid-template-columns: 1fr !important;

    }



    .clean-module-card--tight {

        min-height: 84px !important;

    }

}




/* =========================================================

   DASHBOARD TILE 3D INTERACTION

   ========================================================= */



.clean-module-card {

    transform-style: preserve-3d;

    will-change: transform, box-shadow;

    transition:

        transform .18s ease,

        box-shadow .18s ease,

        border-color .18s ease,

        background .18s ease;

}



.clean-module-card:hover {

    transform: translateY(-5px) scale(1.012) !important;

    box-shadow:

        0 18px 34px rgba(15, 23, 42, .12),

        0 10px 20px rgba(37, 99, 235, .08),

        inset 0 1px 0 rgba(255, 255, 255, .75) !important;

    border-color: rgba(96, 165, 250, .85) !important;

}



.clean-module-card:active,

.clean-module-card.is-pressed {

    transform: translateY(2px) scale(.992) !important;

    box-shadow:

        0 4px 10px rgba(15, 23, 42, .08),

        inset 0 3px 8px rgba(15, 23, 42, .10) !important;

    border-color: rgba(96, 165, 250, .55) !important;

}



.clean-module-card__icon {

    transition:

        transform .18s ease,

        box-shadow .18s ease,

        filter .18s ease;

}



.clean-module-card:hover .clean-module-card__icon {

    transform: translateY(-2px) scale(1.04);

    box-shadow:

        0 0 0 8px rgba(191, 219, 254, .18),

        0 0 30px rgba(147, 197, 253, .42),

        0 12px 22px rgba(15, 23, 42, .08) !important;

    filter: saturate(1.12);

}



.clean-module-card:active .clean-module-card__icon,

.clean-module-card.is-pressed .clean-module-card__icon {

    transform: translateY(1px) scale(.97);

    box-shadow:

        0 0 0 5px rgba(191, 219, 254, .10),

        0 0 14px rgba(147, 197, 253, .20),

        inset 0 2px 5px rgba(15, 23, 42, .08) !important;

}



.clean-module-card__arrow {

    transition:

        transform .18s ease,

        opacity .18s ease;

}



.clean-module-card:hover .clean-module-card__arrow {

    transform: translateX(3px);

    opacity: 1;

}



.clean-module-card:active .clean-module-card__arrow,

.clean-module-card.is-pressed .clean-module-card__arrow {

    transform: translateX(0);

    opacity: .55;

}



/* jemné světlo po najetí */

.clean-module-card::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:

        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .55), transparent 26%),

        linear-gradient(135deg, rgba(255, 255, 255, .18), transparent 45%);

    opacity: 0;

    pointer-events: none;

    transition: opacity .18s ease;

}



.clean-module-card:hover::after {

    opacity: 1;

}



.clean-module-card:active::after,

.clean-module-card.is-pressed::after {

    opacity: .35;

}



@media (prefers-reduced-motion: reduce) {

    .clean-module-card,

    .clean-module-card__icon,

    .clean-module-card__arrow {

        transition: none !important;

    }



    .clean-module-card:hover,

    .clean-module-card:active,

    .clean-module-card.is-pressed {

        transform: none !important;

    }

}




/* =========================================================

   GLOBAL REMOVE DARK PAGE HEADERS

   ========================================================= */



/*

   Všechny modulové hlavičky sjednotíme se stylem rozcestníku:

   - bez tmavého hero boxu

   - bez velké karty

   - čistý nadpis + popis

*/



.hero,

.hero--compact,

.page-hero,

.module-hero,

.dashboard-hero,

.dashboard-summary {

    display: block !important;

    min-height: 0 !important;

    margin: 0 0 20px !important;

    padding: 12px 2px 4px !important;

    border: 0 !important;

    border-radius: 0 !important;

    color: #0f172a !important;

    background: transparent !important;

    box-shadow: none !important;

    overflow: visible !important;

}



.hero::before,

.hero::after,

.hero--compact::before,

.hero--compact::after,

.page-hero::before,

.page-hero::after,

.module-hero::before,

.module-hero::after,

.dashboard-hero::before,

.dashboard-hero::after,

.dashboard-summary::before,

.dashboard-summary::after {

    display: none !important;

    content: none !important;

}



.hero > *,

.hero--compact > *,

.page-hero > *,

.module-hero > *,

.dashboard-hero > *,

.dashboard-summary > * {

    position: static !important;

    z-index: auto !important;

}



.hero .hero__badge,

.hero--compact .hero__badge,

.page-hero .hero__badge,

.module-hero .hero__badge,

.dashboard-hero .hero__badge,

.dashboard-summary .hero__badge {

    display: none !important;

}



.hero h1,

.hero--compact h1,

.page-hero h1,

.module-hero h1,

.dashboard-hero h1,

.dashboard-summary h1 {

    margin: 0 !important;

    max-width: none !important;

    color: #0f172a !important;

    font-size: clamp(34px, 4vw, 54px) !important;

    line-height: .98 !important;

    font-weight: 950 !important;

    letter-spacing: -.055em !important;

    text-shadow: none !important;

}



.hero p,

.hero--compact p,

.page-hero p,

.module-hero p,

.dashboard-hero p,

.dashboard-summary p {

    margin: 10px 0 0 !important;

    max-width: none !important;

    color: #64748b !important;

    font-size: 14px !important;

    line-height: 1.45 !important;

    font-weight: 800 !important;

    text-shadow: none !important;

}



/* Zmenšení mezery mezi hlavičkou a sekcí pod ní */

.hero + .section-head,

.hero--compact + .section-head,

.page-hero + .section-head,

.module-hero + .section-head {

    margin-top: 6px !important;

}



/* Pokud šablona obsahuje tlačítka vedle hlavičky, necháme je čistě zarovnaná */

.section-head {

    margin-top: 0 !important;

}



/* U detailů a seznamů nechceme nad obsahem velkou mezeru */

.trip-detail-grid,

.trip-notes-grid,

.trips-table-wrap,

.form-grid,

.info-card {

    margin-top: 0 !important;

}



/* Mobil */

@media (max-width: 640px) {

    .hero,

    .hero--compact,

    .page-hero,

    .module-hero,

    .dashboard-hero,

    .dashboard-summary {

        margin-bottom: 16px !important;

        padding-top: 8px !important;

    }



    .hero h1,

    .hero--compact h1,

    .page-hero h1,

    .module-hero h1,

    .dashboard-hero h1,

    .dashboard-summary h1 {

        font-size: 34px !important;

    }



    .hero p,

    .hero--compact p,

    .page-hero p,

    .module-hero p,

    .dashboard-hero p,

    .dashboard-summary p {

        font-size: 13px !important;

    }

}




/* =========================================================

   CLEAN PAGE HEAD FINAL

   ========================================================= */



.clean-page-head {

    display: block;

    margin: 0 0 18px !important;

    padding: 10px 2px 2px !important;

    color: #0f172a !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

}



.clean-page-head h1 {

    margin: 0 !important;

    max-width: none !important;

    color: #0f172a !important;

    font-size: clamp(34px, 4vw, 52px) !important;

    line-height: .98 !important;

    font-weight: 950 !important;

    letter-spacing: -.055em !important;

}



.clean-page-head p {

    margin: 10px 0 0 !important;

    max-width: none !important;

    color: #64748b !important;

    font-size: 14px !important;

    line-height: 1.45 !important;

    font-weight: 800 !important;

}



/* kdyby někde starý hero zůstal, schováme tmavé pozadí tvrdě */

section.hero.hero--compact {

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    padding: 10px 2px 2px !important;

    margin: 0 0 18px !important;

    min-height: 0 !important;

    border-radius: 0 !important;

}



section.hero.hero--compact::before,

section.hero.hero--compact::after {

    display: none !important;

}



section.hero.hero--compact .hero__badge {

    display: none !important;

}



section.hero.hero--compact h1 {

    color: #0f172a !important;

    font-size: clamp(34px, 4vw, 52px) !important;

    line-height: .98 !important;

    font-weight: 950 !important;

    letter-spacing: -.055em !important;

}



section.hero.hero--compact p {

    color: #64748b !important;

    font-size: 14px !important;

    line-height: 1.45 !important;

    font-weight: 800 !important;

}



@media (max-width: 640px) {

    .clean-page-head,

    section.hero.hero--compact {

        margin-bottom: 14px !important;

        padding-top: 8px !important;

    }



    .clean-page-head h1,

    section.hero.hero--compact h1 {

        font-size: 34px !important;

    }



    .clean-page-head p,

    section.hero.hero--compact p {

        font-size: 13px !important;

    }

}




/* =========================================================

   LIGHT SPATIAL UI / GLOBAL PSEUDO-3D SYSTEM

   ========================================================= */



:root {

    --sp-bg:

        radial-gradient(circle at 12% 8%, rgba(96, 165, 250, .08), transparent 26%),

        radial-gradient(circle at 88% 14%, rgba(248, 113, 113, .055), transparent 24%),

        radial-gradient(circle at 80% 82%, rgba(34, 197, 94, .045), transparent 24%),

        linear-gradient(180deg, #f3f6fb 0%, #f8fafd 100%);



    --sp-card-top: rgba(221, 235, 255, .96);

    --sp-card-mid: rgba(239, 246, 255, .94);

    --sp-card-bottom: rgba(255, 255, 255, .98);



    --sp-surface: rgba(255, 255, 255, .88);

    --sp-surface-strong: rgba(255, 255, 255, .96);



    --sp-border: rgba(191, 219, 254, .78);

    --sp-border-neutral: rgba(203, 213, 225, .72);



    --sp-text: #0f172a;

    --sp-text-soft: #5b6b82;

    --sp-text-muted: #718096;



    --sp-blue: #2563eb;

    --sp-blue-soft: rgba(96, 165, 250, .18);

    --sp-red: #dc2626;

    --sp-red-soft: rgba(239, 68, 68, .14);



    --sp-shadow-low:

        0 5px 12px rgba(15, 23, 42, .045),

        0 1px 0 rgba(255, 255, 255, .75) inset;



    --sp-shadow-mid:

        0 12px 26px rgba(15, 23, 42, .075),

        0 1px 0 rgba(255, 255, 255, .82) inset;



    --sp-shadow-high:

        0 22px 42px rgba(15, 23, 42, .13),

        0 8px 18px rgba(37, 99, 235, .08),

        0 1px 0 rgba(255, 255, 255, .88) inset;



    --sp-press:

        0 3px 8px rgba(15, 23, 42, .08),

        inset 0 3px 8px rgba(15, 23, 42, .11);



    --sp-radius-xl: 22px;

    --sp-radius-lg: 18px;

    --sp-radius-md: 14px;



    --sp-transition:

        transform .18s ease,

        box-shadow .18s ease,

        border-color .18s ease,

        background .18s ease,

        filter .18s ease,

        opacity .18s ease;

}



/* ---------- stránka ---------- */



html,

body {

    background: var(--sp-bg) !important;

    color: var(--sp-text) !important;

}



body {

    min-height: 100vh;

}



/* jemný prostorový podklad */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:

        linear-gradient(115deg, rgba(255,255,255,.38), transparent 30%, rgba(255,255,255,.22) 65%, transparent),

        radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 18%), rgba(147, 197, 253, .16), transparent 34%);

    opacity: .85;

}



/* ---------- topbar ---------- */



.app-topbar {

    background:

        linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,252,.94)) !important;

    border-bottom: 1px solid rgba(203, 213, 225, .72) !important;

    box-shadow:

        0 6px 18px rgba(15, 23, 42, .055),

        0 1px 0 rgba(255,255,255,.95) inset !important;

    backdrop-filter: blur(14px);

}



.app-topbar__inner {

    min-height: 54px !important;

}



.app-brand__mark {

    background: linear-gradient(180deg, #ef4444, #dc2626) !important;

    box-shadow:

        0 10px 18px rgba(220, 38, 38, .17),

        0 1px 0 rgba(255,255,255,.32) inset !important;

    transition: var(--sp-transition);

}



.app-brand:hover .app-brand__mark {

    transform: translateY(-1px);

    box-shadow:

        0 14px 24px rgba(220, 38, 38, .22),

        0 1px 0 rgba(255,255,255,.42) inset !important;

}



.app-nav__link {

    transition: var(--sp-transition);

}



.app-nav__link:hover {

    transform: translateY(-1px);

    box-shadow: var(--sp-shadow-low) !important;

}



.app-nav__link.is-active {

    box-shadow:

        0 9px 18px rgba(220, 38, 38, .16),

        0 1px 0 rgba(255,255,255,.28) inset !important;

}



.app-nav__link:active {

    transform: translateY(1px) scale(.985);

    box-shadow: var(--sp-press) !important;

}



/* ---------- obecné 3D panely ---------- */



.info-card,

.form-card,

.trips-table-wrap,

.empty-state,

.detail-actions-card,

.filter-bar,

.clean-module-card,

.dashboard-card,

.module-card,

.system-card,

.feature-card,

.stats-card,

.overview-card {

    transform-style: preserve-3d;

    will-change: transform, box-shadow;

    border-color: var(--sp-border-neutral) !important;

    box-shadow: var(--sp-shadow-low) !important;

    transition: var(--sp-transition);

}



/* ---------- pseudo-3D vrstva pro běžné karty ---------- */



.info-card,

.form-card,

.trips-table-wrap,

.empty-state,

.detail-actions-card,

.filter-bar {

    background: var(--sp-surface) !important;

    backdrop-filter: blur(10px);

}



.info-card:hover,

.form-card:hover,

.detail-actions-card:hover,

.filter-bar:hover {

    transform: translateY(-2px);

    box-shadow: var(--sp-shadow-mid) !important;

}



/* horní světelná hrana */

.info-card::before,

.form-card::before,

.trips-table-wrap::before,

.clean-module-card::before {

    height: 2px !important;

    background:

        linear-gradient(90deg, rgba(37,99,235,.72), rgba(96,165,250,.34), rgba(255,255,255,.20)) !important;

}



/* ---------- rozcestník / dlaždice ---------- */



.clean-module-grid {

    perspective: 1200px;

}



.clean-module-card {

    min-height: 88px !important;

    padding: 12px 14px 11px !important;

    border-radius: 17px !important;

    background:

        linear-gradient(180deg, var(--sp-card-top) 0%, var(--sp-card-mid) 42%, var(--sp-card-bottom) 100%) !important;

    border: 1px solid var(--sp-border) !important;

    box-shadow: var(--sp-shadow-low) !important;

    isolation: isolate;

    cursor: pointer;

}



.clean-module-card::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    border-radius: inherit;

    background:

        radial-gradient(circle at var(--card-x, 18%) var(--card-y, 12%), rgba(255,255,255,.72), transparent 26%),

        linear-gradient(135deg, rgba(255,255,255,.28), transparent 46%);

    opacity: 0;

    pointer-events: none;

    transition: opacity .18s ease;

}



.clean-module-card > * {

    position: relative;

    z-index: 1;

}



.clean-module-card:hover,

.clean-module-card.is-tilting {

    transform:

        perspective(900px)

        rotateX(var(--tilt-x, 0deg))

        rotateY(var(--tilt-y, 0deg))

        translateY(-5px)

        scale(1.012) !important;

    border-color: rgba(96, 165, 250, .9) !important;

    box-shadow: var(--sp-shadow-high) !important;

}



.clean-module-card:hover::after,

.clean-module-card.is-tilting::after {

    opacity: 1;

}



.clean-module-card:active,

.clean-module-card.is-pressed {

    transform:

        perspective(900px)

        rotateX(0deg)

        rotateY(0deg)

        translateY(2px)

        scale(.992) !important;

    box-shadow: var(--sp-press) !important;

    border-color: rgba(96, 165, 250, .55) !important;

}



.clean-module-card.is-pressed::after {

    opacity: .35;

}



.clean-module-card__top {

    margin-bottom: 7px !important;

}



.clean-module-card__icon {

    width: 38px !important;

    height: 38px !important;

    border-radius: 13px !important;

    display: grid !important;

    place-items: center !important;

    background: rgba(255, 255, 255, .82) !important;

    border: 1px solid rgba(191, 219, 254, .62) !important;

    box-shadow:

        0 0 0 7px rgba(191, 219, 254, .13),

        0 0 20px rgba(147, 197, 253, .28),

        0 7px 14px rgba(15, 23, 42, .045) !important;

    font-size: 20px !important;

    transition: var(--sp-transition);

}



.clean-module-card:hover .clean-module-card__icon,

.clean-module-card.is-tilting .clean-module-card__icon {

    transform: translateZ(28px) translateY(-2px) scale(1.06);

    box-shadow:

        0 0 0 8px rgba(191, 219, 254, .18),

        0 0 32px rgba(147, 197, 253, .42),

        0 12px 22px rgba(15, 23, 42, .08) !important;

    filter: saturate(1.12);

}



.clean-module-card:active .clean-module-card__icon,

.clean-module-card.is-pressed .clean-module-card__icon {

    transform: translateZ(0) translateY(1px) scale(.97);

    box-shadow:

        0 0 0 5px rgba(191, 219, 254, .10),

        0 0 14px rgba(147, 197, 253, .20),

        inset 0 2px 5px rgba(15, 23, 42, .08) !important;

}



.clean-module-card__status {

    color: #1d4ed8 !important;

    background: rgba(219, 234, 254, .88) !important;

    border: 1px solid rgba(147, 197, 253, .62) !important;

    box-shadow:

        0 4px 10px rgba(37, 99, 235, .055),

        0 1px 0 rgba(255,255,255,.75) inset !important;

}



.clean-module-card h3 {

    transform: translateZ(12px);

}



.clean-module-card p {

    transform: translateZ(8px);

}



.clean-module-card__arrow {

    position: absolute;

    right: 14px;

    bottom: 10px;

    color: var(--sp-red);

    font-size: 18px;

    line-height: 1;

    font-weight: 950;

    opacity: .78;

    z-index: 2;

    transition: var(--sp-transition);

}



.clean-module-card:hover .clean-module-card__arrow,

.clean-module-card.is-tilting .clean-module-card__arrow {

    transform: translateZ(22px) translateX(3px);

    opacity: 1;

}



.clean-module-card:active .clean-module-card__arrow,

.clean-module-card.is-pressed .clean-module-card__arrow {

    transform: translateX(0);

    opacity: .5;

}



/* ---------- tlačítka ---------- */



.btn,

button.btn,

.app-logout,

.table-action .btn {

    transform-style: preserve-3d;

    will-change: transform, box-shadow;

    transition: var(--sp-transition);

}



.btn:hover,

button.btn:hover,

.app-logout:hover,

.table-action .btn:hover {

    transform: translateY(-2px);

    box-shadow: var(--sp-shadow-mid) !important;

}



.btn:active,

button.btn:active,

.app-logout:active,

.table-action .btn:active {

    transform: translateY(1px) scale(.985);

    box-shadow: var(--sp-press) !important;

}



.btn--primary {

    background:

        linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;

    border-color: rgba(239, 68, 68, .34) !important;

    box-shadow:

        0 9px 18px rgba(220, 38, 38, .15),

        inset 0 1px 0 rgba(255,255,255,.30) !important;

}



.btn--secondary {

    background:

        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)) !important;

    border-color: rgba(203, 213, 225, .88) !important;

}



/* ---------- formuláře ---------- */



.field input:not([type="checkbox"]):not([type="radio"]),

.field select,

.field textarea,

.app-form input:not([type="checkbox"]):not([type="radio"]),

.app-form select,

.app-form textarea,

.filter-bar input:not([type="checkbox"]):not([type="radio"]),

.filter-bar select {

    background:

        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;

    box-shadow:

        inset 0 2px 5px rgba(15, 23, 42, .035),

        0 1px 0 rgba(255,255,255,.90) !important;

    transition: var(--sp-transition);

}



.field input:not([type="checkbox"]):not([type="radio"]):focus,

.field select:focus,

.field textarea:focus,

.app-form input:not([type="checkbox"]):not([type="radio"]):focus,

.app-form select:focus,

.app-form textarea:focus,

.filter-bar input:not([type="checkbox"]):not([type="radio"]):focus,

.filter-bar select:focus {

    transform: translateY(-1px);

    box-shadow:

        0 0 0 4px rgba(96, 165, 250, .16),

        0 10px 20px rgba(15, 23, 42, .06),

        inset 0 1px 0 rgba(255,255,255,.90) !important;

    border-color: rgba(96, 165, 250, .88) !important;

}



/* ---------- tabulky ---------- */



.trips-table-wrap {

    background: rgba(255,255,255,.88) !important;

    backdrop-filter: blur(10px);

}



.trips-table tbody tr {

    transition: var(--sp-transition);

}



.trips-table tbody tr:hover td {

    background:

        linear-gradient(90deg, rgba(239,246,255,.92), rgba(255,255,255,.96)) !important;

}



.trips-table tbody tr:hover {

    filter: drop-shadow(0 8px 12px rgba(15, 23, 42, .045));

}



.table-action .btn {

    background:

        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)) !important;

}



/* ---------- detailové stránky ---------- */



.clean-page-head h1,

.clean-dashboard-head h1 {

    text-shadow:

        0 1px 0 rgba(255,255,255,.9),

        0 12px 26px rgba(15,23,42,.055);

}



/* ---------- stavové badge ---------- */



.trip-state,

.status-badge,

.badge-status,

.clean-module-card__status {

    transform-style: preserve-3d;

}



/* ---------- light sweep na kartách ---------- */



.spatial-sweep {

    position: relative;

    overflow: hidden;

}



.spatial-sweep::before {

    content: "";

    position: absolute;

    inset: -40% auto -40% -70%;

    width: 42%;

    transform: rotate(18deg);

    background:

        linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);

    opacity: 0;

    pointer-events: none;

    transition: opacity .18s ease, left .42s ease;

}



.spatial-sweep:hover::before {

    left: 118%;

    opacity: 1;

}



/* ---------- reduced motion ---------- */



@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        transition-duration: .001ms !important;

        animation-duration: .001ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

    }



    .clean-module-card:hover,

    .clean-module-card.is-tilting,

    .clean-module-card:active,

    .clean-module-card.is-pressed,

    .btn:hover,

    .btn:active {

        transform: none !important;

    }

}



/* ---------- mobil ---------- */



@media (max-width: 900px) {

    .clean-module-card:hover,

    .clean-module-card.is-tilting {

        transform: translateY(-2px) scale(1.006) !important;

    }

}



@media (max-width: 640px) {

    .clean-module-card {

        min-height: 84px !important;

    }



    .clean-module-card__icon {

        width: 36px !important;

        height: 36px !important;

        font-size: 19px !important;

    }

}




/* =========================================================

   STRONGER 3D LIFT OVERRIDE

   ========================================================= */



/* Dlaždice rozcestníku – výraznější vystoupení */

.clean-module-card:hover,

.clean-module-card.is-tilting {

    transform:

        perspective(900px)

        rotateX(var(--tilt-x, 0deg))

        rotateY(var(--tilt-y, 0deg))

        translateY(-10px)

        scale(1.028) !important;

    box-shadow:

        0 30px 56px rgba(15, 23, 42, .18),

        0 14px 28px rgba(37, 99, 235, .12),

        0 1px 0 rgba(255, 255, 255, .92) inset !important;

    border-color: rgba(96, 165, 250, .95) !important;

}



.clean-module-card:active,

.clean-module-card.is-pressed {

    transform:

        perspective(900px)

        rotateX(0deg)

        rotateY(0deg)

        translateY(3px)

        scale(.975) !important;

    box-shadow:

        0 3px 7px rgba(15, 23, 42, .10),

        inset 0 5px 12px rgba(15, 23, 42, .16) !important;

}



/* Ikona vystoupí ještě víc než karta */

.clean-module-card:hover .clean-module-card__icon,

.clean-module-card.is-tilting .clean-module-card__icon {

    transform: translateZ(46px) translateY(-5px) scale(1.14) !important;

    box-shadow:

        0 0 0 10px rgba(191, 219, 254, .22),

        0 0 42px rgba(147, 197, 253, .55),

        0 18px 30px rgba(15, 23, 42, .13) !important;

}



.clean-module-card:active .clean-module-card__icon,

.clean-module-card.is-pressed .clean-module-card__icon {

    transform: translateZ(0) translateY(2px) scale(.92) !important;

    box-shadow:

        0 0 0 4px rgba(191, 219, 254, .08),

        0 0 12px rgba(147, 197, 253, .18),

        inset 0 3px 8px rgba(15, 23, 42, .12) !important;

}



/* Šipka také vystoupí */

.clean-module-card:hover .clean-module-card__arrow,

.clean-module-card.is-tilting .clean-module-card__arrow {

    transform: translateZ(38px) translateX(6px) scale(1.08) !important;

    opacity: 1 !important;

}



/* Běžné karty / panely */

.info-card:hover,

.form-card:hover,

.detail-actions-card:hover,

.filter-bar:hover,

.empty-state:hover {

    transform: translateY(-7px) scale(1.01) !important;

    box-shadow:

        0 24px 44px rgba(15, 23, 42, .13),

        0 10px 22px rgba(37, 99, 235, .08),

        0 1px 0 rgba(255, 255, 255, .90) inset !important;

}



/* Tlačítka – výraznější 3D */

.btn:hover,

button.btn:hover,

.app-logout:hover,

.table-action .btn:hover {

    transform: translateY(-5px) scale(1.025) !important;

    box-shadow:

        0 20px 34px rgba(15, 23, 42, .16),

        0 8px 18px rgba(37, 99, 235, .08),

        0 1px 0 rgba(255, 255, 255, .85) inset !important;

}



.btn:active,

button.btn:active,

.app-logout:active,

.table-action .btn:active,

.btn.is-pressed,

button.btn.is-pressed,

.app-logout.is-pressed,

.table-action .btn.is-pressed {

    transform: translateY(3px) scale(.965) !important;

    box-shadow:

        0 3px 8px rgba(15, 23, 42, .10),

        inset 0 5px 12px rgba(15, 23, 42, .15) !important;

}



/* Topbar položky */

.app-nav__link:hover {

    transform: translateY(-4px) scale(1.02) !important;

    box-shadow:

        0 16px 28px rgba(15, 23, 42, .13),

        0 1px 0 rgba(255,255,255,.8) inset !important;

}



.app-nav__link:active {

    transform: translateY(2px) scale(.965) !important;

    box-shadow:

        0 3px 8px rgba(15, 23, 42, .10),

        inset 0 4px 10px rgba(15, 23, 42, .13) !important;

}



/* Form inputy při focusu více vystoupí */

.field input:not([type="checkbox"]):not([type="radio"]):focus,

.field select:focus,

.field textarea:focus,

.app-form input:not([type="checkbox"]):not([type="radio"]):focus,

.app-form select:focus,

.app-form textarea:focus,

.filter-bar input:not([type="checkbox"]):not([type="radio"]):focus,

.filter-bar select:focus {

    transform: translateY(-3px) scale(1.005) !important;

    box-shadow:

        0 0 0 4px rgba(96, 165, 250, .17),

        0 18px 30px rgba(15, 23, 42, .10),

        inset 0 1px 0 rgba(255,255,255,.92) !important;

}



/* Tabulkové řádky jemně vystoupí */

.trips-table tbody tr:hover {

    transform: translateY(-2px) scale(1.002);

    filter: drop-shadow(0 12px 18px rgba(15, 23, 42, .075)) !important;

}



/* Na mobilu zmenšíme, aby to neposkakovalo */

@media (max-width: 900px) {

    .clean-module-card:hover,

    .clean-module-card.is-tilting {

        transform: translateY(-5px) scale(1.012) !important;

    }



    .btn:hover,

    button.btn:hover,

    .app-logout:hover,

    .table-action .btn:hover {

        transform: translateY(-2px) scale(1.01) !important;

    }



    .info-card:hover,

    .form-card:hover,

    .detail-actions-card:hover,

    .filter-bar:hover,

    .empty-state:hover {

        transform: translateY(-3px) scale(1.004) !important;

    }

}




/* =========================================================

   MODULE CARD 3D FIX — STS / CHS / TES / MODULE DASHBOARDS

   ========================================================= */



.cards-grid {

    perspective: 1200px !important;

}



.module-card {

    position: relative !important;

    overflow: hidden !important;

    min-height: 88px !important;

    padding: 12px 14px 11px !important;

    border-radius: 17px !important;

    color: #0f172a !important;

    text-decoration: none !important;

    background:

        linear-gradient(180deg, rgba(221, 235, 255, .96) 0%, rgba(239, 246, 255, .94) 42%, rgba(255, 255, 255, .98) 100%) !important;

    border: 1px solid rgba(191, 219, 254, .78) !important;

    box-shadow:

        0 5px 12px rgba(15, 23, 42, .045),

        0 1px 0 rgba(255, 255, 255, .75) inset !important;

    transform-style: preserve-3d !important;

    will-change: transform, box-shadow !important;

    isolation: isolate !important;

    cursor: pointer !important;

    transition:

        transform .18s ease,

        box-shadow .18s ease,

        border-color .18s ease,

        background .18s ease,

        filter .18s ease !important;

}



.module-card::before {

    content: "" !important;

    position: absolute !important;

    inset: 0 0 auto 0 !important;

    height: 2px !important;

    background:

        linear-gradient(90deg, rgba(37, 99, 235, .75), rgba(96, 165, 250, .35)) !important;

}



.module-card::after {

    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    z-index: 0 !important;

    border-radius: inherit !important;

    background:

        radial-gradient(circle at var(--card-x, 18%) var(--card-y, 12%), rgba(255,255,255,.72), transparent 26%),

        linear-gradient(135deg, rgba(255,255,255,.28), transparent 46%) !important;

    opacity: 0 !important;

    pointer-events: none !important;

    transition: opacity .18s ease !important;

}



.module-card > * {

    position: relative !important;

    z-index: 1 !important;

}



.module-card:hover,

.module-card.is-tilting {

    transform:

        perspective(900px)

        rotateX(var(--tilt-x, 0deg))

        rotateY(var(--tilt-y, 0deg))

        translateY(-10px)

        scale(1.028) !important;

    border-color: rgba(96, 165, 250, .95) !important;

    box-shadow:

        0 30px 56px rgba(15, 23, 42, .18),

        0 14px 28px rgba(37, 99, 235, .12),

        0 1px 0 rgba(255, 255, 255, .92) inset !important;

}



.module-card:hover::after,

.module-card.is-tilting::after {

    opacity: 1 !important;

}



.module-card:active,

.module-card.is-pressed {

    transform:

        perspective(900px)

        rotateX(0deg)

        rotateY(0deg)

        translateY(3px)

        scale(.975) !important;

    box-shadow:

        0 3px 7px rgba(15, 23, 42, .10),

        inset 0 5px 12px rgba(15, 23, 42, .16) !important;

}



.module-card__top {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 12px !important;

    margin-bottom: 7px !important;

}



.module-card__icon {

    width: 38px !important;

    height: 38px !important;

    border-radius: 13px !important;

    display: grid !important;

    place-items: center !important;

    background: rgba(255, 255, 255, .82) !important;

    border: 1px solid rgba(191, 219, 254, .62) !important;

    box-shadow:

        0 0 0 7px rgba(191, 219, 254, .13),

        0 0 20px rgba(147, 197, 253, .28),

        0 7px 14px rgba(15, 23, 42, .045) !important;

    font-size: 20px !important;

    transition:

        transform .18s ease,

        box-shadow .18s ease,

        filter .18s ease !important;

}



.module-card:hover .module-card__icon,

.module-card.is-tilting .module-card__icon {

    transform: translateZ(46px) translateY(-5px) scale(1.14) !important;

    box-shadow:

        0 0 0 10px rgba(191, 219, 254, .22),

        0 0 42px rgba(147, 197, 253, .55),

        0 18px 30px rgba(15, 23, 42, .13) !important;

    filter: saturate(1.12) !important;

}



.module-card:active .module-card__icon,

.module-card.is-pressed .module-card__icon {

    transform: translateZ(0) translateY(2px) scale(.92) !important;

    box-shadow:

        0 0 0 4px rgba(191, 219, 254, .08),

        0 0 12px rgba(147, 197, 253, .18),

        inset 0 3px 8px rgba(15, 23, 42, .12) !important;

}



.module-card__status {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-height: 25px !important;

    max-width: 120px !important;

    padding: 5px 9px !important;

    border-radius: 999px !important;

    color: #1d4ed8 !important;

    background: rgba(219, 234, 254, .88) !important;

    border: 1px solid rgba(147, 197, 253, .62) !important;

    box-shadow:

        0 4px 10px rgba(37, 99, 235, .055),

        0 1px 0 rgba(255,255,255,.75) inset !important;

    font-size: 10px !important;

    line-height: 1 !important;

    font-weight: 950 !important;

    text-transform: uppercase !important;

    letter-spacing: .035em !important;

    white-space: nowrap !important;

}



.module-card h3 {

    margin: 0 0 4px !important;

    color: #0f172a !important;

    font-size: 16px !important;

    line-height: 1.08 !important;

    font-weight: 950 !important;

    letter-spacing: -.025em !important;

    transform: translateZ(12px) !important;

}



.module-card p {

    max-width: calc(100% - 22px) !important;

    margin: 0 !important;

    color: #5b6b82 !important;

    font-size: 12px !important;

    line-height: 1.34 !important;

    font-weight: 720 !important;

    transform: translateZ(8px) !important;

}



.module-card__footer {

    display: none !important;

}



.module-card .module-card__footer strong,

.module-card__arrow {

    position: absolute !important;

    right: 14px !important;

    bottom: 10px !important;

    color: #dc2626 !important;

    font-size: 18px !important;

    line-height: 1 !important;

    font-weight: 950 !important;

    opacity: .78 !important;

    z-index: 2 !important;

    transition:

        transform .18s ease,

        opacity .18s ease !important;

}



.module-card:hover .module-card__footer strong,

.module-card.is-tilting .module-card__footer strong,

.module-card:hover .module-card__arrow,

.module-card.is-tilting .module-card__arrow {

    transform: translateZ(38px) translateX(6px) scale(1.08) !important;

    opacity: 1 !important;

}



@media (max-width: 900px) {

    .module-card:hover,

    .module-card.is-tilting {

        transform: translateY(-5px) scale(1.012) !important;

    }

}




/* =========================================================

   ORGANIZATION BRANDING

   ========================================================= */



.app-brand__mark img {

    display: block;

    max-width: 30px;

    max-height: 30px;

    width: auto;

    height: auto;

    object-fit: contain;

    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .12));

}



body.has-organization-watermark::after {

    content: "";

    position: fixed;

    right: 34px;

    bottom: 28px;

    width: min(340px, 38vw);

    height: min(340px, 38vw);

    z-index: -1;

    pointer-events: none;

    background-image: var(--organization-watermark);

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

    opacity: .045;

    filter: grayscale(1);

}




/* =========================================================

   RADIO / DUTY MODULE

   ========================================================= */



.duty-strip {

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    margin-bottom: 22px !important;

}



.duty-strip__card {

    min-height: 104px !important;

    padding: 16px !important;

    border-radius: 20px !important;

    position: relative;

    overflow: hidden;

    border: 1px solid rgba(203, 213, 225, .65) !important;

    box-shadow:

        0 8px 18px rgba(15, 23, 42, .045),

        inset 0 1px 0 rgba(255,255,255,.86) !important;

}



.duty-strip__card span {

    display: block;

    margin-bottom: 8px;

    color: #64748b;

    font-size: 12px;

    font-weight: 950;

    text-transform: uppercase;

    letter-spacing: .045em;

}



.duty-strip__card strong {

    display: block;

    color: #0f172a;

    font-size: 22px;

    line-height: 1.05;

    font-weight: 950;

    letter-spacing: -.035em;

}



.duty-strip__card em {

    display: block;

    margin-top: 8px;

    color: #64748b;

    font-size: 13px;

    line-height: 1.35;

    font-style: normal;

    font-weight: 750;

}



.duty-strip__card--previous {

    background:

        linear-gradient(180deg, rgba(248, 250, 252, .96), rgba(255, 255, 255, .99)) !important;

}



.duty-strip__card--current {

    background:

        linear-gradient(180deg, rgba(220, 252, 231, .96), rgba(255, 255, 255, .99)) !important;

    border-color: rgba(134, 239, 172, .72) !important;

}



.duty-strip__card--next {

    background:

        linear-gradient(180deg, rgba(219, 234, 254, .96), rgba(255, 255, 255, .99)) !important;

    border-color: rgba(147, 197, 253, .72) !important;

}



@media (max-width: 900px) {

    .duty-strip {

        grid-template-columns: 1fr !important;

    }

}




/* =========================================================

   DUTY MONTH CALENDAR

   ========================================================= */



.duty-calendar {

    margin-bottom: 28px;

}



.duty-calendar__weekdays {

    display: grid;

    grid-template-columns: repeat(7, minmax(0, 1fr));

    gap: 8px;

    margin-bottom: 8px;

}



.duty-calendar__weekdays span {

    padding: 8px 10px;

    color: #64748b;

    font-size: 12px;

    font-weight: 950;

    text-transform: uppercase;

    letter-spacing: .055em;

    text-align: center;

}



.duty-calendar__grid {

    display: grid;

    grid-template-columns: repeat(7, minmax(0, 1fr));

    gap: 10px;

    perspective: 1200px;

}



.duty-day {

    position: relative;

    min-height: 118px;

    padding: 11px;

    border-radius: 18px;

    text-decoration: none;

    color: #0f172a;

    background:

        linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.98));

    border: 1px solid rgba(203, 213, 225, .72);

    box-shadow:

        0 6px 14px rgba(15, 23, 42, .045),

        inset 0 1px 0 rgba(255,255,255,.9);

    overflow: hidden;

    transition:

        transform .18s ease,

        box-shadow .18s ease,

        border-color .18s ease;

}



.duty-day::before {

    content: "";

    position: absolute;

    inset: 0 0 auto 0;

    height: 2px;

    background: linear-gradient(90deg, rgba(148,163,184,.4), rgba(226,232,240,.2));

}



.duty-day.has-duty {

    background:

        linear-gradient(180deg, rgba(219, 234, 254, .96), rgba(255,255,255,.98));

    border-color: rgba(147, 197, 253, .75);

}



.duty-day.has-duty::before {

    background: linear-gradient(90deg, rgba(37,99,235,.72), rgba(96,165,250,.35));

}



.duty-day.is-today {

    border-color: rgba(220, 38, 38, .55);

    box-shadow:

        0 8px 20px rgba(220, 38, 38, .10),

        inset 0 1px 0 rgba(255,255,255,.9);

}



.duty-day.is-today::before {

    background: linear-gradient(90deg, rgba(220,38,38,.82), rgba(248,113,113,.35));

}



.duty-day.is-muted {

    opacity: .58;

}



.duty-day:hover {

    transform: translateY(-8px) scale(1.02);

    box-shadow:

        0 24px 42px rgba(15, 23, 42, .14),

        0 10px 20px rgba(37, 99, 235, .08),

        inset 0 1px 0 rgba(255,255,255,.92);

    border-color: rgba(96, 165, 250, .9);

}



.duty-day:active {

    transform: translateY(2px) scale(.975);

    box-shadow:

        0 3px 7px rgba(15, 23, 42, .10),

        inset 0 5px 12px rgba(15, 23, 42, .16);

}



.duty-day__head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    margin-bottom: 9px;

}



.duty-day__head strong {

    font-size: 20px;

    line-height: 1;

    font-weight: 950;

}



.duty-day__head span {

    padding: 5px 8px;

    border-radius: 999px;

    color: #1d4ed8;

    background: rgba(219, 234, 254, .88);

    border: 1px solid rgba(147, 197, 253, .62);

    font-size: 10px;

    line-height: 1;

    font-weight: 950;

    text-transform: uppercase;

}



.duty-day__body {

    display: grid;

    gap: 6px;

}



.duty-day__body em {

    color: #94a3b8;

    font-size: 12px;

    font-style: normal;

    font-weight: 750;

}



.duty-day__shift {

    padding: 7px 8px;

    border-radius: 12px;

    background: rgba(255,255,255,.78);

    border: 1px solid rgba(191,219,254,.45);

}



.duty-day__shift b {

    display: block;

    color: #0f172a;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 950;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.duty-day__shift small {

    display: block;

    margin-top: 3px;

    color: #64748b;

    font-size: 11px;

    font-weight: 800;

}



.duty-day__more {

    color: #1d4ed8;

    font-size: 11px;

    font-weight: 950;

}



@media (max-width: 1100px) {

    .duty-calendar__grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .duty-calendar__weekdays {

        display: none;

    }

}



@media (max-width: 640px) {

    .duty-calendar__grid {

        grid-template-columns: 1fr;

    }



    .duty-day {

        min-height: 96px;

    }

}




/* =========================================================

   DUTY ROTATION MEMBER CHECKBOXES

   ========================================================= */



.field--checkbox-list ul {

    list-style: none;

    padding: 0;

    margin: 0;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

}



.field--checkbox-list li {

    margin: 0;

}



.field--checkbox-list label {

    display: flex !important;

    align-items: center;

    gap: 10px;

    min-height: 44px;

    padding: 10px 12px;

    border-radius: 14px;

    color: #0f172a;

    background: rgba(255,255,255,.78);

    border: 1px solid rgba(203,213,225,.72);

    font-size: 13px;

    font-weight: 850;

    cursor: pointer;

    box-shadow:

        0 5px 12px rgba(15,23,42,.04),

        inset 0 1px 0 rgba(255,255,255,.78);

    transition:

        transform .18s ease,

        box-shadow .18s ease,

        border-color .18s ease;

}



.field--checkbox-list label:hover {

    transform: translateY(-3px);

    border-color: rgba(96,165,250,.78);

    box-shadow:

        0 14px 24px rgba(15,23,42,.08),

        inset 0 1px 0 rgba(255,255,255,.9);

}



.field--checkbox-list input[type="checkbox"] {

    width: 18px;

    height: 18px;

    accent-color: #2563eb;

}



@media (max-width: 700px) {

    .field--checkbox-list ul {

        grid-template-columns: 1fr;

    }

}




/* =========================================================

   DUTY TEAM DISPLAY

   ========================================================= */



.duty-team-card {

    min-height: 150px !important;

}



.duty-team-list {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 10px;

}



.duty-team-list--detail {

    margin: 0;

}



.duty-team-member {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    min-height: 28px;

    padding: 6px 9px;

    border-radius: 999px;

    color: #0f172a;

    background: rgba(255, 255, 255, .82);

    border: 1px solid rgba(191, 219, 254, .62);

    box-shadow:

        0 5px 12px rgba(15, 23, 42, .04),

        inset 0 1px 0 rgba(255,255,255,.85);

    font-size: 12px;

    line-height: 1.1;

    font-weight: 850;

}



.duty-team-member small {

    color: #64748b;

    font-size: 10px;

    line-height: 1;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .035em;

}



.duty-team-member--leader {

    color: #991b1b;

    background: rgba(254, 226, 226, .80);

    border-color: rgba(252, 165, 165, .62);

}



.duty-team-member--backup {

    color: #92400e;

    background: rgba(254, 243, 199, .82);

    border-color: rgba(252, 211, 77, .58);

}



.duty-day__shift b {

    white-space: normal !important;

}




/* =========================================================

   ARCHIVE ACTIONS

   ========================================================= */



.archive-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin: 0 0 18px;

}



.archive-actions form {

    margin: 0;

}



.btn--danger-soft {

    color: #991b1b !important;

    background:

        linear-gradient(180deg, rgba(254, 242, 242, .96), rgba(255,255,255,.98)) !important;

    border-color: rgba(252, 165, 165, .72) !important;

}



.btn--danger-soft:hover {

    border-color: rgba(239, 68, 68, .85) !important;

    box-shadow:

        0 20px 34px rgba(153, 27, 27, .12),

        0 8px 18px rgba(239, 68, 68, .08),

        0 1px 0 rgba(255,255,255,.85) inset !important;

}




/* =========================================================

   LOGIN MULTI METHOD UI

   ========================================================= */



.login-body--kiosk {

    background:

        radial-gradient(circle at 16% 8%, rgba(220, 38, 38, .08), transparent 32%),

        radial-gradient(circle at 88% 16%, rgba(37, 99, 235, .08), transparent 34%),

        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;

}



.login-main--kiosk {

    min-height: 100vh;

    padding: 28px 20px !important;

    display: grid;

    align-items: center;

}



.login-kiosk {

    width: min(1320px, 100%);

    margin: 0 auto;

}



.login-kiosk__brand {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 20px;

}



.login-kiosk__mark {

    width: 54px;

    height: 54px;

    border-radius: 18px;

    display: grid;

    place-items: center;

    color: #ffffff;

    background: linear-gradient(135deg, #dc2626, #b91c1c);

    box-shadow:

        0 18px 34px rgba(220, 38, 38, .18),

        inset 0 1px 0 rgba(255,255,255,.22);

    font-size: 25px;

    font-weight: 950;

}



.login-kiosk__mark img {

    max-width: 38px;

    max-height: 38px;

    object-fit: contain;

    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .16));

}



.login-kiosk__brand h1 {

    margin: 0;

    color: #0f172a;

    font-size: 34px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: -.055em;

}



.login-kiosk__brand p {

    margin: 5px 0 0;

    color: #64748b;

    font-size: 15px;

    font-weight: 800;

}



.login-kiosk__grid {

    display: grid;

    grid-template-columns: minmax(0, 1.25fr) minmax(380px, .75fr);

    gap: 22px;

    align-items: start;

}



.login-method,

.login-advice {

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background:

        linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86));

    border: 1px solid rgba(203, 213, 225, .76);

    box-shadow:

        0 22px 44px rgba(15, 23, 42, .08),

        inset 0 1px 0 rgba(255,255,255,.9);

}



.login-method--nfc {

    min-height: 520px;

    padding: 28px;

    background:

        radial-gradient(circle at 18% 8%, rgba(34, 197, 94, .12), transparent 28%),

        linear-gradient(180deg, rgba(240,253,244,.9), rgba(255,255,255,.94));

    border-color: rgba(134, 239, 172, .72);

}



.login-method--quick {

    padding: 26px;

}



.login-method__head {

    display: flex;

    justify-content: space-between;

    gap: 14px;

    align-items: flex-start;

}



.login-method h2,

.login-advice h2 {

    margin: 0 0 12px;

    color: #020617;

    font-size: 28px;

    line-height: 1.05;

    font-weight: 950;

    letter-spacing: -.035em;

}



.login-method p,

.login-advice p,

.login-method__hint {

    margin: 0;

    color: #475569;

    font-size: 17px;

    line-height: 1.4;

    font-weight: 600;

}



.login-method__badge {

    display: inline-flex;

    align-items: center;

    min-height: 30px;

    padding: 7px 12px;

    border-radius: 999px;

    color: #166534;

    background: rgba(220, 252, 231, .92);

    border: 1px solid rgba(134, 239, 172, .75);

    font-size: 13px;

    line-height: 1;

    font-weight: 950;

    white-space: nowrap;

}



.nfc-status {

    margin: 28px 0 14px;

    min-height: 58px;

    display: flex;

    align-items: center;

    padding: 15px 18px;

    border-radius: 16px;

    font-size: 18px;

    line-height: 1.25;

    font-weight: 950;

}



.nfc-status--waiting {

    color: #92400e;

    background: rgba(255, 251, 235, .88);

    border: 1px solid rgba(252, 211, 77, .7);

}



.nfc-status--error {

    color: #991b1b;

    background: rgba(254, 242, 242, .9);

    border: 1px solid rgba(252, 165, 165, .8);

}



.nfc-status--ok {

    color: #166534;

    background: rgba(240, 253, 244, .92);

    border: 1px solid rgba(134, 239, 172, .8);

}



.nfc-status--loading {

    color: #1d4ed8;

    background: rgba(239, 246, 255, .9);

    border: 1px solid rgba(147, 197, 253, .8);

}



.login-side {

    display: grid;

    gap: 22px;

}



.login-quick-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin: 24px 0;

}



.login-quick-card {

    min-height: 154px;

    padding: 22px;

    border-radius: 18px;

    text-align: left;

    cursor: default;

    background:

        linear-gradient(180deg, rgba(255,247,237,.92), rgba(255,255,255,.96));

    border: 1px solid rgba(253, 186, 116, .76);

    box-shadow:

        0 10px 22px rgba(15, 23, 42, .055),

        inset 0 1px 0 rgba(255,255,255,.9);

}



.login-quick-card--blue {

    background:

        linear-gradient(180deg, rgba(239,246,255,.94), rgba(255,255,255,.97));

    border-color: rgba(147, 197, 253, .8);

}



.login-quick-card strong {

    display: block;

    margin-bottom: 10px;

    color: #0f172a;

    font-size: 24px;

    line-height: 1.05;

    font-weight: 950;

}



.login-quick-card span {

    display: block;

    color: #475569;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 650;

}



.login-quick-card em {

    display: inline-flex;

    margin-top: 14px;

    padding: 6px 9px;

    border-radius: 999px;

    color: #64748b;

    background: rgba(248, 250, 252, .9);

    border: 1px solid rgba(203, 213, 225, .7);

    font-size: 11px;

    line-height: 1;

    font-style: normal;

    font-weight: 950;

    text-transform: uppercase;

    letter-spacing: .04em;

}



.login-service-toggle {

    width: 100%;

    padding: 16px 0 0;

    border: 0;

    border-top: 1px solid rgba(203, 213, 225, .85);

    color: #2563eb;

    background: transparent;

    text-align: left;

    cursor: pointer;

    font-size: 17px;

    font-weight: 900;

}



.login-service-form {

    display: none;

    margin-top: 18px;

    padding-top: 18px;

    border-top: 1px solid rgba(203, 213, 225, .85);

}



.login-service-form.is-visible {

    display: grid;

    gap: 14px;

}



.login-error {

    padding: 12px 14px;

    border-radius: 14px;

    color: #991b1b;

    background: rgba(254, 242, 242, .95);

    border: 1px solid rgba(252, 165, 165, .8);

    font-weight: 800;

}



.login-submit {

    width: 100%;

    justify-content: center;

}



.login-advice {

    padding: 22px;

    background:

        radial-gradient(circle at 20% 0%, rgba(34, 197, 94, .1), transparent 35%),

        linear-gradient(180deg, rgba(240,253,244,.9), rgba(255,255,255,.94));

    border-color: rgba(134, 239, 172, .72);

}



.login-advice h2 {

    font-size: 22px;

}



.login-advice p {

    font-size: 15px;

}



@media (max-width: 980px) {

    .login-kiosk__grid {

        grid-template-columns: 1fr;

    }



    .login-method--nfc {

        min-height: 300px;

    }

}



@media (max-width: 620px) {

    .login-main--kiosk {

        padding: 16px 12px !important;

    }



    .login-quick-grid {

        grid-template-columns: 1fr;

    }



    .login-method--nfc,

    .login-method--quick {

        padding: 20px;

    }



    .login-method h2 {

        font-size: 24px;

    }

}




/* =========================================================

   LOGIN NATIVE PIN / QR TOGGLES

   ========================================================= */



.login-mode-radio {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}



.login-mode-panel {

    display: none;

    margin-top: 18px;

    padding-top: 18px;

    border-top: 1px solid rgba(203, 213, 225, .85);

}



#login-mode-pin:checked ~ .login-mode-panel--pin,

#login-mode-qr:checked ~ .login-mode-panel--qr,

#login-mode-password:checked ~ .login-mode-panel--password {

    display: grid !important;

    gap: 14px;

}



#login-mode-pin:checked ~ .login-quick-grid label[for="login-mode-pin"],

#login-mode-qr:checked ~ .login-quick-grid label[for="login-mode-qr"] {

    transform: translateY(-5px) scale(1.025);

    border-color: rgba(37, 99, 235, .85);

    box-shadow:

        0 22px 38px rgba(15, 23, 42, .14),

        0 10px 20px rgba(37, 99, 235, .10),

        inset 0 1px 0 rgba(255,255,255,.9);

}



.login-service-toggle--label {

    display: block;

    cursor: pointer;

    user-select: none;

}



.login-quick-card {

    display: block;

}




/* =========================================================

   TOPBAR PROFILE LINK

   ========================================================= */



.app-profile-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 34px;

    padding: 8px 12px;

    border-radius: 999px;

    color: #1d4ed8;

    background: rgba(239, 246, 255, .92);

    border: 1px solid rgba(147, 197, 253, .78);

    font-size: 13px;

    line-height: 1;

    font-weight: 950;

    text-decoration: none;

    white-space: nowrap;

    box-shadow:

        0 8px 16px rgba(37, 99, 235, .08),

        inset 0 1px 0 rgba(255,255,255,.9);

    transition:

        transform .16s ease,

        box-shadow .16s ease,

        border-color .16s ease;

}



.app-profile-link:hover {

    transform: translateY(-2px);

    border-color: rgba(37, 99, 235, .85);

    box-shadow:

        0 14px 24px rgba(37, 99, 235, .13),

        inset 0 1px 0 rgba(255,255,255,.95);

}



.app-profile-link:active {

    transform: translateY(1px) scale(.98);

}



@media (max-width: 900px) {

    .app-profile-link {

        display: none;

    }

}




/* =========================================================

   PROFILE LINK – STEJNÝ TVAR JAKO ODHLÁSIT

   ========================================================= */



.app-profile-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 46px;

    padding: 0 20px;

    border-radius: 18px;

    background: #ffffff;

    color: #0f172a;

    border: 1px solid rgba(203, 213, 225, .95);

    font-size: 15px;

    line-height: 1;

    font-weight: 900;

    text-decoration: none;

    white-space: nowrap;

    box-shadow:

        0 10px 24px rgba(15, 23, 42, .08),

        inset 0 1px 0 rgba(255,255,255,.96);

    transition:

        transform .16s ease,

        box-shadow .16s ease,

        border-color .16s ease,

        background .16s ease;

}



.app-profile-link:hover {

    transform: translateY(-2px);

    border-color: rgba(148, 163, 184, .9);

    box-shadow:

        0 16px 28px rgba(15, 23, 42, .12),

        inset 0 1px 0 rgba(255,255,255,.98);

}



.app-profile-link:active {

    transform: translateY(1px) scale(.985);

    box-shadow:

        0 6px 14px rgba(15, 23, 42, .08),

        inset 0 2px 4px rgba(15, 23, 42, .06);

}



.app-profile-link .app-nav__icon,

.app-profile-link span:first-child {

    font-size: 15px;

    line-height: 1;

}



@media (max-width: 900px) {

    .app-profile-link {

        display: none;

    }

}




/* PROFILE LINK – DOLADĚNÍ VELIKOSTI K ODHLÁSIT */

.app-profile-link {

    min-height: 40px !important;

    height: 40px !important;

    padding: 0 16px !important;

    border-radius: 16px !important;

    font-size: 14px !important;

    font-weight: 900 !important;

    line-height: 1 !important;

}



.app-profile-link:hover {

    transform: translateY(-2px) !important;

}



.app-profile-link:active {

    transform: translateY(1px) scale(.985) !important;

}




/* PROFILE LINK – KOMPAKTNÍ DOLADĚNÍ */

.app-user {

    gap: 10px !important;

}



.app-profile-link {

    min-height: 38px !important;

    height: 38px !important;

    padding: 0 14px !important;

    border-radius: 14px !important;

    font-size: 13px !important;

    font-weight: 900 !important;

    line-height: 1 !important;

    box-sizing: border-box !important;

}



.app-profile-link:hover {

    transform: translateY(-2px) scale(1.01) !important;

}



.app-profile-link:active {

    transform: translateY(2px) scale(.97) !important;

}




/* =========================================================

   DASHBOARD HEADER – APPROVAL ALERT VPRAVO

   ========================================================= */



.clean-dashboard-head--with-alert {

    display: grid !important;

    grid-template-columns: minmax(0, 1fr) minmax(340px, 460px) !important;

    gap: 22px !important;

    align-items: start !important;

}



.clean-dashboard-head__main {

    min-width: 0 !important;

}



.approval-alert-card--head {

    margin: 8px 0 0 !important;

    padding: 14px !important;

    grid-template-columns: 44px minmax(0, 1fr) auto !important;

    gap: 12px !important;

    border-radius: 22px !important;

    align-self: start !important;

}



.approval-alert-card--head .approval-alert-card__icon {

    width: 44px !important;

    height: 44px !important;

    min-width: 44px !important;

    border-radius: 15px !important;

    font-size: 21px !important;

}



.approval-alert-card--head .approval-alert-card__body strong {

    font-size: 16px !important;

    margin-bottom: 3px !important;

}



.approval-alert-card--head .approval-alert-card__body span {

    font-size: 13px !important;

    line-height: 1.25 !important;

}



.approval-alert-card--head .btn {

    min-height: 38px !important;

    height: 38px !important;

    padding: 0 14px !important;

    border-radius: 14px !important;

    font-size: 13px !important;

    white-space: nowrap !important;

}



@media (max-width: 1100px) {

    .clean-dashboard-head--with-alert {

        grid-template-columns: 1fr !important;

    }



    .approval-alert-card--head {

        margin-top: 0 !important;

        width: 100% !important;

    }

}



@media (max-width: 700px) {

    .approval-alert-card--head {

        grid-template-columns: 44px minmax(0, 1fr) !important;

    }



    .approval-alert-card--head .btn {

        grid-column: 1 / -1 !important;

        width: 100% !important;

    }

}




/* =========================================================

   DASHBOARD HEADER – ALERT VPRAVO NAHOŘE FINAL

   ========================================================= */



.clean-dashboard-head--with-alert {

    display: grid !important;

    grid-template-columns: minmax(0, 1fr) minmax(360px, 500px) !important;

    gap: 24px !important;

    align-items: start !important;

}



.clean-dashboard-head__main {

    min-width: 0 !important;

}



.approval-alert-card--head {

    display: grid !important;

    grid-template-columns: 44px minmax(0, 1fr) auto !important;

    gap: 12px !important;

    align-items: center !important;

    margin: 8px 0 0 !important;

    padding: 14px !important;

    border-radius: 22px !important;

    background:

        radial-gradient(circle at 8% 0%, rgba(245, 158, 11, .18), transparent 32%),

        linear-gradient(180deg, rgba(255, 251, 235, .98), rgba(255, 255, 255, .97)) !important;

    border: 1px solid rgba(251, 191, 36, .85) !important;

    box-shadow:

        0 18px 38px rgba(146, 64, 14, .10),

        inset 0 1px 0 rgba(255,255,255,.95) !important;

}



.approval-alert-card--head .approval-alert-card__icon {

    width: 44px !important;

    height: 44px !important;

    min-width: 44px !important;

    border-radius: 15px !important;

    display: grid !important;

    place-items: center !important;

    background: rgba(255, 255, 255, .94) !important;

    border: 1px solid rgba(251, 191, 36, .65) !important;

    font-size: 21px !important;

}



.approval-alert-card--head .approval-alert-card__body strong {

    display: block !important;

    margin: 0 0 3px !important;

    color: #0f172a !important;

    font-size: 16px !important;

    line-height: 1.15 !important;

    font-weight: 950 !important;

}



.approval-alert-card--head .approval-alert-card__body span {

    display: block !important;

    color: #64748b !important;

    font-size: 13px !important;

    line-height: 1.25 !important;

    font-weight: 800 !important;

}



.approval-alert-card--head .btn {

    min-height: 38px !important;

    height: 38px !important;

    padding: 0 14px !important;

    border-radius: 14px !important;

    font-size: 13px !important;

    white-space: nowrap !important;

}



@media (max-width: 1100px) {

    .clean-dashboard-head--with-alert {

        grid-template-columns: 1fr !important;

    }



    .approval-alert-card--head {

        margin-top: 0 !important;

        width: 100% !important;

    }

}



@media (max-width: 700px) {

    .approval-alert-card--head {

        grid-template-columns: 44px minmax(0, 1fr) !important;

    }



    .approval-alert-card--head .btn {

        grid-column: 1 / -1 !important;

        width: 100% !important;

    }

}




/* APPROVAL ALERT – kratší varianta */

.clean-dashboard-head--with-alert {

    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;

}



.approval-alert-card--head {

    max-width: 360px !important;

    justify-self: end !important;

    grid-template-columns: 38px minmax(0, 1fr) auto !important;

    padding: 12px !important;

}



.approval-alert-card--head .approval-alert-card__icon {

    width: 38px !important;

    height: 38px !important;

    min-width: 38px !important;

    font-size: 18px !important;

}



.approval-alert-card--head .approval-alert-card__body strong {

    font-size: 15px !important;

}



.approval-alert-card--head .approval-alert-card__body span {

    font-size: 12px !important;

}



.approval-alert-card--head .btn {

    height: 34px !important;

    min-height: 34px !important;

    padding: 0 12px !important;

    font-size: 12px !important;

}




/* =========================================================

   TRAINING DASHBOARD

   ========================================================= */



.training-dashboard-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;

    margin: 26px 0 34px;

}



.training-mini-list {

    display: grid;

    gap: 12px;

}



.training-mini-item {

    display: block;

    padding: 14px 16px;

    border: 1px solid rgba(148, 163, 184, 0.25);

    border-radius: 16px;

    background: rgba(248, 250, 252, 0.9);

    color: inherit;

    text-decoration: none;

    transition:

        transform 160ms ease,

        border-color 160ms ease,

        box-shadow 160ms ease,

        background 160ms ease;

}



.training-mini-item:hover {

    transform: translateY(-2px);

    border-color: rgba(37, 99, 235, 0.35);

    background: #ffffff;

    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);

}



.training-mini-item strong {

    display: block;

    margin-bottom: 4px;

    color: #0f172a;

    font-size: 15px;

    font-weight: 800;

}



.training-mini-item span {

    display: block;

    color: #64748b;

    font-size: 13px;

    line-height: 1.45;

}



.training-card--disabled {

    opacity: 0.72;

    cursor: default;

}



.training-card--disabled:hover {

    transform: none;

}



.empty-state--compact {

    padding: 18px;

    margin: 0;

}



.empty-state--compact h3 {

    margin-top: 0;

}



@media (max-width: 900px) {

    .training-dashboard-grid {

        grid-template-columns: 1fr;

    }

}




/* =========================================================

   TRAINING COMMANDER / PRINT

   ========================================================= */



.training-print-only {

    display: none;

}



.training-commander-table-wrap {

    margin-bottom: 34px;

}



.training-commander-table td strong {

    white-space: nowrap;

}



@media print {

    body {

        background: #ffffff !important;

    }



    .app-sidebar,

    .site-sidebar,

    .main-sidebar,

    .topbar,

    .navbar,

    .header,

    .training-print-hide,

    .section-actions,

    .filter-bar,

    .btn {

        display: none !important;

    }



    .training-print-only {

        display: block !important;

    }



    .app-main,

    .main-content,

    .content,

    main {

        width: 100% !important;

        max-width: none !important;

        margin: 0 !important;

        padding: 0 !important;

    }



    .trips-table-wrap {

        box-shadow: none !important;

        border: 1px solid #cbd5e1 !important;

        overflow: visible !important;

    }



    .trips-table {

        width: 100% !important;

        border-collapse: collapse !important;

        font-size: 11px !important;

    }



    .trips-table th,

    .trips-table td {

        border-bottom: 1px solid #cbd5e1 !important;

        padding: 7px 8px !important;

        vertical-align: top !important;

    }



    .trips-table th {

        color: #000000 !important;

        background: #f1f5f9 !important;

    }



    .trips-table td strong,

    .trips-table td span {

        color: #000000 !important;

    }



    .trip-state {

        border: 1px solid #94a3b8 !important;

        background: transparent !important;

        color: #000000 !important;

        box-shadow: none !important;

    }

}




/* =========================================================

   TRAINING CARD CLICK FIX

   ========================================================= */



.training-grid > a.training-card {

    display: flex;

    flex-direction: column;

    color: inherit;

    text-decoration: none;

    position: relative;

    z-index: 5;

}



.training-grid > a.training-card,

.training-grid > a.training-card * {

    pointer-events: auto;

}



.training-grid > a.training-card .training-card__footer {

    margin-top: auto;

}






/* =========================================================

   TRAINING REQUIREMENT CHIPS

   ========================================================= */



.training-commander-detail-row td {

    background: #f8fafc !important;

    padding-top: 10px !important;

    padding-bottom: 14px !important;

}



.training-requirement-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.training-requirement-chip {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    max-width: 100%;

    padding: 7px 10px;

    border-radius: 999px;

    border: 1px solid rgba(148, 163, 184, 0.35);

    background: #ffffff;

    color: #334155;

    font-size: 12px;

    line-height: 1.3;

}



.training-requirement-chip strong {

    color: inherit;

    font-weight: 900;

}



.training-requirement-chip--done {

    border-color: rgba(22, 163, 74, 0.35);

    background: rgba(22, 163, 74, 0.08);

    color: #166534;

}



.training-requirement-chip--waiting {

    border-color: rgba(37, 99, 235, 0.28);

    background: rgba(37, 99, 235, 0.07);

    color: #1d4ed8;

}



.training-requirement-chip--missed {

    border-color: rgba(220, 38, 38, 0.35);

    background: rgba(220, 38, 38, 0.08);

    color: #991b1b;

}



@media print {

    .training-commander-detail-row {

        display: none !important;

    }

}




/* =========================================================

   TRAINING TESTS

   ========================================================= */



.training-test-question-list {

    display: grid;

    gap: 16px;

    margin-bottom: 32px;

}



.training-test-question h3 {

    margin: 0 0 10px;

    color: #0f172a;

    font-size: 18px;

    font-weight: 900;

}



.training-test-answer-list {

    display: grid;

    gap: 8px;

    margin: 14px 0 0;

    padding: 0;

    list-style: none;

}



.training-test-answer-list li {

    padding: 10px 12px;

    border: 1px solid rgba(148, 163, 184, 0.35);

    border-radius: 14px;

    background: #f8fafc;

    color: #334155;

    font-weight: 700;

}



.training-test-answer-list li.is-correct {

    border-color: rgba(22, 163, 74, 0.35);

    background: rgba(22, 163, 74, 0.08);

    color: #166534;

}




/* =========================================================

   TRAINING TEST ATTEMPT

   ========================================================= */



.training-test-form {

    display: grid;

    gap: 16px;

}



.training-test-field ul {

    display: grid;

    gap: 10px;

    margin: 12px 0 0;

    padding: 0;

    list-style: none;

}



.training-test-field li {

    display: block;

}



.training-test-field label {

    display: flex;

    gap: 10px;

    align-items: flex-start;

    padding: 12px 14px;

    border: 1px solid rgba(148, 163, 184, 0.35);

    border-radius: 14px;

    background: #f8fafc;

    cursor: pointer;

    font-weight: 700;

    color: #334155;

}



.training-test-field input[type="radio"],

.training-test-field input[type="checkbox"] {

    margin-top: 3px;

}



.training-test-field textarea {

    width: 100%;

    min-height: 120px;

    padding: 12px 14px;

    border: 1px solid rgba(148, 163, 184, 0.45);

    border-radius: 14px;

    background: #ffffff;

    color: #0f172a;

}



.form-errors {

    margin: 10px 0;

    padding: 10px 12px;

    border-radius: 12px;

    background: rgba(220, 38, 38, 0.08);

    color: #991b1b;

    font-weight: 800;

}




/* =========================================================

   TRAINING UPLOAD FORMS

   ========================================================= */



.training-upload-form {

    display: grid;

    gap: 18px;

}



.training-upload-form .form-grid {

    display: grid;

    gap: 18px;

}



.training-upload-form .form-field {

    display: grid;

    gap: 7px;

}



.training-upload-form label {

    color: #0f172a;

    font-weight: 900;

}



.training-upload-form input,

.training-upload-form select {

    width: 100%;

    padding: 12px 14px;

    border: 1px solid rgba(148, 163, 184, 0.45);

    border-radius: 14px;

    background: #ffffff;

    color: #0f172a;

}



.training-upload-form input[type="file"] {

    padding: 10px;

    background: #f8fafc;

}



.training-upload-form p {

    margin: 0;

    color: #64748b;

    font-size: 13px;

}



.info-card pre {

    overflow-x: auto;

    padding: 14px 16px;

    border-radius: 14px;

    background: #0f172a;

    color: #e2e8f0;

    font-size: 13px;

}




/* =========================================================

   TRAINING UPLOAD PROGRESS

   ========================================================= */



.training-upload-progress {

    display: grid;

    gap: 10px;

    padding: 16px;

    border: 1px solid rgba(37, 99, 235, 0.22);

    border-radius: 18px;

    background: rgba(37, 99, 235, 0.06);

}



.training-upload-progress__head {

    display: flex;

    justify-content: space-between;

    gap: 16px;

    color: #0f172a;

}



.training-upload-progress__head strong {

    font-weight: 900;

}



.training-upload-progress__head span {

    font-weight: 900;

    color: #1d4ed8;

}



.training-upload-progress__bar {

    height: 14px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(148, 163, 184, 0.25);

}



.training-upload-progress__fill {

    width: 0;

    height: 100%;

    border-radius: inherit;

    background: linear-gradient(90deg, #2563eb, #16a34a);

    transition: width 180ms ease;

}



.training-upload-progress p {

    margin: 0;

    color: #475569;

    font-size: 13px;

}



.training-upload-result-grid {

    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 16px;

}



.training-upload-result-grid div {

    padding: 14px;

    border: 1px solid rgba(148, 163, 184, 0.28);

    border-radius: 16px;

    background: #f8fafc;

}



.training-upload-result-grid span {

    display: block;

    color: #64748b;

    font-size: 12px;

    font-weight: 800;

}



.training-upload-result-grid strong {

    display: block;

    margin-top: 4px;

    color: #0f172a;

    font-size: 24px;

    font-weight: 950;

}



.training-upload-file-list {

    display: grid;

    gap: 8px;

    margin: 10px 0 20px;

    padding: 0;

    list-style: none;

}



.training-upload-file-list li {

    padding: 12px 14px;

    border-radius: 14px;

    border: 1px solid rgba(148, 163, 184, 0.28);

    background: #ffffff;

}



.training-upload-file-list li strong {

    display: block;

    color: #0f172a;

    font-weight: 900;

}



.training-upload-file-list li span {

    display: block;

    margin-top: 3px;

    color: #64748b;

    font-size: 13px;

}



.training-upload-file-list li.is-ok {

    border-color: rgba(22, 163, 74, 0.3);

    background: rgba(22, 163, 74, 0.06);

}



.training-upload-file-list li.is-warning {

    border-color: rgba(217, 119, 6, 0.35);

    background: rgba(217, 119, 6, 0.07);

}



@media (max-width: 900px) {

    .training-upload-result-grid {

        grid-template-columns: 1fr 1fr;

    }

}




/* =========================================================

   TRAINING PLAN DASHBOARD

   ========================================================= */



.training-plan-tabs {

    margin: 22px 0 36px;

}



.training-plan-tabs__input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}



.training-plan-tabs__nav {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin-bottom: 18px;

}



.training-plan-tabs__button {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    min-height: 58px;

    padding: 14px 18px;

    border-radius: 18px;

    border: 1px solid rgba(148, 163, 184, 0.35);

    background: #ffffff;

    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);

    color: #0f172a;

    font-weight: 950;

    cursor: pointer;

    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;

}



.training-plan-tabs__button span {

    opacity: .72;

    font-size: 13px;

}



.training-plan-tabs__button:hover {

    transform: translateY(-1px);

    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);

}



#training-tab-basic:checked ~ .training-plan-tabs__nav label[for="training-tab-basic"],

#training-tab-special:checked ~ .training-plan-tabs__nav label[for="training-tab-special"] {

    border-color: rgba(239, 68, 68, 0.65);

    background: linear-gradient(135deg, #dc2626, #ef4444);

    color: #ffffff;

}



.training-plan-tabs__panel {

    display: none;

}



#training-tab-basic:checked ~ .training-plan-tabs__panel--basic {

    display: block;

}



#training-tab-special:checked ~ .training-plan-tabs__panel--special {

    display: block;

}



.training-plan-card-grid {

    display: grid;

    gap: 16px;

}



.training-plan-card {

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;

    gap: 16px;

    align-items: stretch;

    padding: 18px;

    border: 1px solid rgba(148, 163, 184, 0.28);

    border-left: 6px solid #94a3b8;

    border-radius: 22px;

    background: #ffffff;

    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);

}



.training-plan-card--done {

    border-left-color: #16a34a;

}



.training-plan-card--waiting {

    border-left-color: #2563eb;

}



.training-plan-card--partial {

    border-left-color: #d97706;

}



.training-plan-card--none {

    border-left-color: #64748b;

}



.training-plan-card__main {

    display: grid;

    gap: 10px;

    color: inherit;

    text-decoration: none;

}



.training-plan-card__head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

}



.training-plan-card__code {

    display: inline-flex;

    align-items: center;

    padding: 5px 10px;

    border-radius: 999px;

    background: #f1f5f9;

    color: #0f172a;

    font-size: 12px;

    font-weight: 950;

}



.training-plan-card__state {

    display: inline-flex;

    align-items: center;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 950;

}



.training-plan-card__state--done {

    background: rgba(22, 163, 74, 0.1);

    color: #166534;

}



.training-plan-card__state--waiting {

    background: rgba(37, 99, 235, 0.1);

    color: #1d4ed8;

}



.training-plan-card__state--partial {

    background: rgba(217, 119, 6, 0.12);

    color: #92400e;

}



.training-plan-card__state--none {

    background: rgba(100, 116, 139, 0.12);

    color: #475569;

}



.training-plan-card h3 {

    margin: 0;

    color: #0f172a;

    font-size: 19px;

    line-height: 1.25;

    font-weight: 950;

}



.training-plan-card__meta {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.training-plan-card__meta span {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 7px 10px;

    border-radius: 999px;

    background: #f8fafc;

    color: #475569;

    font-size: 12px;

    font-weight: 800;

}



.training-plan-card__meta strong {

    color: #0f172a;

}



.training-plan-card__progress {

    height: 10px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(148, 163, 184, 0.22);

}



.training-plan-card__progress div {

    height: 100%;

    border-radius: inherit;

    background: linear-gradient(90deg, #dc2626, #16a34a);

}



.training-plan-card__materials {

    display: grid;

    gap: 6px;

}



.training-plan-card__materials span {

    display: block;

    padding: 7px 10px;

    border-radius: 12px;

    background: rgba(37, 99, 235, 0.06);

    color: #334155;

    font-size: 12px;

    font-weight: 750;

}



.training-plan-card__materials.is-empty span {

    background: rgba(217, 119, 6, 0.08);

    color: #92400e;

}



.training-plan-card__actions {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 190px;

}



.training-plan-card__actions form {

    margin: 0;

}



.training-plan-card__actions .btn[disabled] {

    opacity: .45;

    cursor: not-allowed;

}



@media (max-width: 900px) {

    .training-plan-tabs__nav {

        grid-template-columns: 1fr;

    }



    .training-plan-card {

        grid-template-columns: 1fr;

    }



    .training-plan-card__actions {

        justify-content: flex-start;

        min-width: 0;

    }

}




/* =========================================================

   TRAINING PLAN RECORD FORM

   ========================================================= */



.training-plan-record-form {

    display: grid;

    gap: 20px;

}



.training-plan-record-form .form-grid {

    display: grid;

    gap: 16px;

}



.training-plan-record-form .form-field {

    display: grid;

    gap: 7px;

}



.training-plan-record-form label {

    color: #0f172a;

    font-weight: 900;

}



.training-plan-record-form input,

.training-plan-record-form select,

.training-plan-record-form textarea {

    width: 100%;

    padding: 12px 14px;

    border: 1px solid rgba(148, 163, 184, 0.45);

    border-radius: 14px;

    background: #ffffff;

    color: #0f172a;

    font-weight: 750;

}



.training-plan-record-form textarea {

    min-height: 160px;

}



.training-attendance-checklist ul {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

    gap: 10px;

    margin: 12px 0 0;

    padding: 0;

    list-style: none;

}



.training-attendance-checklist li {

    margin: 0;

}



.training-attendance-checklist label {

    display: flex;

    gap: 10px;

    align-items: center;

    min-height: 48px;

    padding: 10px 12px;

    border: 1px solid rgba(148, 163, 184, 0.35);

    border-radius: 14px;

    background: #f8fafc;

    color: #0f172a;

    cursor: pointer;

}



.training-attendance-checklist input {

    width: auto;

}



.training-material-preview {

    display: block;

    width: 100%;

    min-height: 360px;

    border: 0;

    border-radius: 18px;

    background: #0f172a;

}



.training-material-preview--pdf {

    height: 520px;

    background: #f8fafc;

}




/* =========================================================

   TRAINING EXERCISES

   ========================================================= */



.signature-cell {

    min-width: 180px;

    height: 42px;

    border-bottom: 1px solid rgba(15, 23, 42, 0.45);

}



@media print {

    .training-print-hide,

    .site-header,

    .topbar,

    .sidebar,

    .section-actions,

    .btn {

        display: none !important;

    }



    body {

        background: #ffffff !important;

    }



    .info-card,

    .trips-table-wrap {

        box-shadow: none !important;

        border: 1px solid #d1d5db !important;

        break-inside: avoid;

    }



    .clean-page-head,

    .section-head {

        box-shadow: none !important;

        border: 0 !important;

    }

}




/* =========================================================

   TRAINING UNMATCHED MATERIALS

   ========================================================= */



.training-unmatched-list {

    display: grid;

    gap: 16px;

    margin: 20px 0 34px;

}



.training-unmatched-card {

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);

    gap: 18px;

    align-items: start;

    padding: 18px;

    border: 1px solid rgba(148, 163, 184, 0.32);

    border-radius: 22px;

    background: #ffffff;

    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);

}



.training-unmatched-card__top {

    display: flex;

    justify-content: space-between;

    gap: 12px;

    align-items: flex-start;

    margin-bottom: 12px;

}



.training-unmatched-card__top strong {

    color: #0f172a;

    font-size: 17px;

    font-weight: 950;

    word-break: break-word;

}



.training-unmatched-card__top span {

    display: inline-flex;

    padding: 5px 9px;

    border-radius: 999px;

    background: #f1f5f9;

    color: #475569;

    font-size: 12px;

    font-weight: 900;

}



.training-unmatched-card dl {

    display: grid;

    grid-template-columns: 140px minmax(0, 1fr);

    gap: 8px 12px;

    margin: 0;

}



.training-unmatched-card dt {

    color: #64748b;

    font-weight: 850;

}



.training-unmatched-card dd {

    margin: 0;

    color: #0f172a;

    font-weight: 750;

    word-break: break-word;

}



.training-unmatched-card small {

    color: #64748b;

    font-weight: 750;

}



.training-unmatched-card__form {

    display: grid;

    gap: 10px;

}



.training-unmatched-card__form label {

    color: #0f172a;

    font-weight: 950;

}



.training-unmatched-card__form select {

    width: 100%;

    padding: 12px 14px;

    border: 1px solid rgba(148, 163, 184, 0.45);

    border-radius: 14px;

    background: #ffffff;

    color: #0f172a;

    font-weight: 750;

}



.training-unmatched-card__actions {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}



.btn--danger {

    background: #dc2626 !important;

    color: #ffffff !important;

    border-color: #dc2626 !important;

}



.table-action form {

    display: inline-flex;

    margin: 2px;

}



@media (max-width: 1000px) {

    .training-unmatched-card {

        grid-template-columns: 1fr;

    }



    .training-unmatched-card dl {

        grid-template-columns: 1fr;

    }

}




/* =========================================================

   TRAINING ARCHIVE

   ========================================================= */



.training-archive-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 18px;

    margin: 22px 0 36px;

}



.training-archive-card {

    display: grid;

    gap: 18px;

    padding: 20px;

    border: 1px solid rgba(148, 163, 184, 0.32);

    border-radius: 24px;

    background: #ffffff;

    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);

    color: inherit;

    text-decoration: none;

    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;

}



.training-archive-card:hover {

    transform: translateY(-2px);

    border-color: rgba(220, 38, 38, 0.45);

    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.12);

}



.training-archive-card.is-current {

    border-color: rgba(220, 38, 38, 0.5);

    background:

        linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(255, 255, 255, 0.95)),

        #ffffff;

}



.training-archive-card__head {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 14px;

}



.training-archive-card__head strong {

    color: #0f172a;

    font-size: 34px;

    font-weight: 950;

    letter-spacing: -0.04em;

}



.training-archive-card__head span {

    display: inline-flex;

    padding: 6px 10px;

    border-radius: 999px;

    background: #f1f5f9;

    color: #475569;

    font-size: 12px;

    font-weight: 950;

}



.training-archive-card.is-current .training-archive-card__head span {

    background: rgba(220, 38, 38, 0.1);

    color: #b91c1c;

}



.training-archive-card__stats {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

}



.training-archive-card__stats div {

    padding: 12px;

    border-radius: 16px;

    background: #f8fafc;

}



.training-archive-card__stats span {

    display: block;

    color: #64748b;

    font-size: 12px;

    font-weight: 800;

}



.training-archive-card__stats strong {

    display: block;

    margin-top: 4px;

    color: #0f172a;

    font-size: 22px;

    font-weight: 950;

}



.training-archive-card__footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 4px;

    color: #0f172a;

    font-weight: 950;

}



@media print {

    .training-archive-card {

        box-shadow: none !important;

    }

}




/* =========================================================

   TRAINING PROTOCOL

   ========================================================= */



.protocol-toolbar {

    display: flex;

    justify-content: space-between;

    gap: 18px;

    align-items: flex-start;

    flex-wrap: wrap;

    margin: 0 0 22px;

    padding: 18px;

    border-radius: 22px;

    background: #ffffff;

    border: 1px solid rgba(148, 163, 184, 0.28);

    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);

}



.protocol-toolbar h1 {

    margin: 0 0 4px;

    color: #0f172a;

    font-size: 30px;

    font-weight: 950;

}



.protocol-toolbar p {

    margin: 0;

    color: #64748b;

    font-weight: 750;

}



.training-protocol {

    position: relative;

    overflow: hidden;

    max-width: 1040px;

    margin: 0 auto 44px;

    padding: 34px;

    border-radius: 28px;

    background: #ffffff;

    color: #0f172a;

    border: 1px solid rgba(148, 163, 184, 0.35);

    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);

}



.training-protocol__watermark-text,

.training-protocol__watermark-logo {

    position: absolute;

    inset: auto 0 30%;

    z-index: 0;

    text-align: center;

    color: rgba(15, 23, 42, 0.045);

    font-size: 92px;

    font-weight: 950;

    letter-spacing: -0.06em;

    transform: rotate(-18deg);

    pointer-events: none;

    white-space: nowrap;

}



.training-protocol__watermark-logo {

    font-size: 130px;

    letter-spacing: -0.08em;

}



.training-protocol > *:not(.training-protocol__watermark-text):not(.training-protocol__watermark-logo) {

    position: relative;

    z-index: 1;

}



.training-protocol__header {

    display: flex;

    justify-content: space-between;

    gap: 24px;

    align-items: flex-start;

    padding-bottom: 24px;

    border-bottom: 4px solid #dc2626;

}



.training-protocol__brand {

    display: flex;

    gap: 16px;

    align-items: center;

}



.training-protocol__emblem {

    display: grid;

    place-items: center;

    width: 76px;

    height: 76px;

    border-radius: 22px;

    background: linear-gradient(135deg, #dc2626, #991b1b);

    color: #ffffff;

    font-size: 18px;

    font-weight: 950;

    text-align: center;

    box-shadow: 0 16px 32px rgba(220, 38, 38, 0.28);

}



.training-protocol__eyebrow {

    margin: 0 0 3px;

    color: #dc2626;

    font-size: 12px;

    font-weight: 950;

    text-transform: uppercase;

    letter-spacing: 0.08em;

}



.training-protocol__brand h1 {

    margin: 0;

    color: #0f172a;

    font-size: 27px;

    font-weight: 950;

    line-height: 1.08;

}



.training-protocol__brand p:last-child {

    margin: 4px 0 0;

    color: #64748b;

    font-weight: 850;

}



.training-protocol__number {

    min-width: 190px;

    padding: 14px 16px;

    border-radius: 18px;

    background: #f8fafc;

    border: 1px solid rgba(148, 163, 184, 0.38);

    text-align: right;

}



.training-protocol__number span {

    display: block;

    color: #64748b;

    font-size: 12px;

    font-weight: 850;

}



.training-protocol__number strong {

    display: block;

    margin-top: 4px;

    color: #0f172a;

    font-size: 22px;

    font-weight: 950;

}



.training-protocol__title {

    padding: 28px 0 20px;

}



.training-protocol__title p {

    margin: 0 0 6px;

    color: #dc2626;

    font-size: 13px;

    font-weight: 950;

    text-transform: uppercase;

    letter-spacing: 0.08em;

}



.training-protocol__title h2 {

    margin: 0;

    color: #0f172a;

    font-size: 36px;

    font-weight: 950;

    letter-spacing: -0.04em;

    line-height: 1.08;

}



.training-protocol__grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

}



.training-protocol__box {

    padding: 18px;

    border-radius: 22px;

    background: #f8fafc;

    border: 1px solid rgba(148, 163, 184, 0.28);

    margin-bottom: 18px;

}



.training-protocol__box--full {

    margin-top: 0;

}



.training-protocol__box h3 {

    margin: 0 0 14px;

    color: #0f172a;

    font-size: 18px;

    font-weight: 950;

}



.training-protocol__box p {

    margin: 0;

    color: #334155;

    line-height: 1.6;

    font-weight: 650;

}



.training-protocol dl {

    display: grid;

    grid-template-columns: 140px 1fr;

    gap: 8px 12px;

    margin: 0;

}



.training-protocol dt {

    color: #64748b;

    font-weight: 850;

}



.training-protocol dd {

    margin: 0;

    color: #0f172a;

    font-weight: 850;

}



.training-protocol__materials {

    margin: 0;

    padding-left: 22px;

}



.training-protocol__materials li {

    margin: 0 0 8px;

    color: #0f172a;

}



.training-protocol__materials span {

    color: #64748b;

    font-weight: 800;

}



.training-protocol__summary {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 12px;

    margin: 0 0 18px;

}



.training-protocol__summary div {

    padding: 15px;

    border-radius: 18px;

    background: #ffffff;

    border: 1px solid rgba(148, 163, 184, 0.35);

}



.training-protocol__summary span {

    display: block;

    color: #64748b;

    font-size: 12px;

    font-weight: 850;

}



.training-protocol__summary strong {

    display: block;

    margin-top: 4px;

    color: #0f172a;

    font-size: 28px;

    font-weight: 950;

}



.training-protocol__table {

    width: 100%;

    border-collapse: collapse;

    overflow: hidden;

    border-radius: 16px;

    background: #ffffff;

}



.training-protocol__table th,

.training-protocol__table td {

    padding: 11px 10px;

    border-bottom: 1px solid rgba(148, 163, 184, 0.28);

    text-align: left;

    vertical-align: middle;

}



.training-protocol__table th {

    background: #0f172a;

    color: #ffffff;

    font-size: 12px;

    font-weight: 950;

    text-transform: uppercase;

    letter-spacing: 0.04em;

}



.training-protocol__signature-cell {

    min-width: 150px;

    height: 38px;

    border-bottom: 1px solid rgba(15, 23, 42, 0.45) !important;

}



.training-protocol__signatures {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

    margin-top: 28px;

}



.training-protocol__signatures div {

    min-height: 82px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    border-top: 2px solid rgba(15, 23, 42, 0.55);

    padding-top: 8px;

}



.training-protocol__signatures span {

    color: #64748b;

    font-size: 12px;

    font-weight: 850;

}



.training-protocol__signatures strong {

    color: #0f172a;

    font-size: 15px;

    font-weight: 950;

}



.training-protocol__footer {

    display: flex;

    justify-content: space-between;

    gap: 14px;

    margin-top: 26px;

    padding-top: 14px;

    border-top: 1px solid rgba(148, 163, 184, 0.35);

    color: #64748b;

    font-size: 12px;

    font-weight: 850;

}



.training-protocol--official {

    border-radius: 0;

    box-shadow: none;

}



.training-protocol--official .training-protocol__emblem {

    border-radius: 50%;

}



.training-protocol--compact {

    padding: 24px;

}



.training-protocol--compact .training-protocol__title h2 {

    font-size: 28px;

}



.training-protocol--compact .training-protocol__box {

    padding: 14px;

    margin-bottom: 12px;

}



@media (max-width: 900px) {

    .training-protocol {

        padding: 20px;

    }



    .training-protocol__header,

    .training-protocol__brand,

    .training-protocol__footer {

        flex-direction: column;

    }



    .training-protocol__number {

        width: 100%;

        text-align: left;

    }



    .training-protocol__grid,

    .training-protocol__summary,

    .training-protocol__signatures {

        grid-template-columns: 1fr;

    }



    .training-protocol dl {

        grid-template-columns: 1fr;

    }



    .training-protocol__title h2 {

        font-size: 28px;

    }

}



@media print {

    @page {

        size: A4;

        margin: 12mm;

    }



    html,

    body {

        background: #ffffff !important;

    }



    .training-print-hide,

    .site-header,

    .topbar,

    .sidebar,

    .breadcrumb,

    .messages,

    .protocol-toolbar,

    .section-actions,

    .btn {

        display: none !important;

    }



    .training-protocol {

        max-width: none !important;

        margin: 0 !important;

        padding: 0 !important;

        border: 0 !important;

        border-radius: 0 !important;

        box-shadow: none !important;

    }



    .training-protocol__header {

        padding-bottom: 14px !important;

    }



    .training-protocol__title {

        padding: 18px 0 14px !important;

    }



    .training-protocol__title h2 {

        font-size: 24px !important;

    }



    .training-protocol__box,

    .training-protocol__summary div {

        box-shadow: none !important;

        break-inside: avoid;

    }



    .training-protocol__table {

        break-inside: auto;

    }



    .training-protocol__table tr {

        break-inside: avoid;

        break-after: auto;

    }



    .training-protocol__watermark-text,

    .training-protocol__watermark-logo {

        color: rgba(15, 23, 42, 0.055) !important;

    }

}




/* =========================================================

   TRAINING PROTOCOL - PRINT COMPACT FIX

   ========================================================= */



@media print {

    @page {

        size: A4 portrait;

        margin: 10mm 9mm 10mm 9mm;

    }



    body {

        -webkit-print-color-adjust: exact;

        print-color-adjust: exact;

    }



    .training-protocol {

        width: 100% !important;

        max-width: none !important;

        font-size: 11px !important;

        line-height: 1.25 !important;

    }



    .training-protocol__header {

        padding-bottom: 8px !important;

        border-bottom-width: 2px !important;

    }



    .training-protocol__emblem {

        width: 48px !important;

        height: 48px !important;

        border-radius: 14px !important;

        font-size: 11px !important;

        box-shadow: none !important;

    }



    .training-protocol__brand {

        gap: 10px !important;

    }



    .training-protocol__eyebrow {

        font-size: 9px !important;

        margin-bottom: 1px !important;

    }



    .training-protocol__brand h1 {

        font-size: 15px !important;

        line-height: 1.15 !important;

    }



    .training-protocol__brand p:last-child {

        font-size: 10px !important;

        margin-top: 1px !important;

    }



    .training-protocol__number {

        min-width: 135px !important;

        padding: 8px 10px !important;

        border-radius: 10px !important;

    }



    .training-protocol__number span {

        font-size: 9px !important;

    }



    .training-protocol__number strong {

        font-size: 14px !important;

    }



    .training-protocol__title {

        padding: 10px 0 8px !important;

    }



    .training-protocol__title p {

        font-size: 9px !important;

        margin-bottom: 2px !important;

    }



    .training-protocol__title h2 {

        font-size: 19px !important;

        line-height: 1.12 !important;

    }



    .training-protocol__grid {

        gap: 8px !important;

    }



    .training-protocol__box {

        padding: 9px 10px !important;

        border-radius: 10px !important;

        margin-bottom: 8px !important;

    }



    .training-protocol__box h3 {

        font-size: 12px !important;

        margin-bottom: 6px !important;

    }



    .training-protocol dl {

        grid-template-columns: 92px 1fr !important;

        gap: 3px 8px !important;

    }



    .training-protocol dt,

    .training-protocol dd,

    .training-protocol__box p,

    .training-protocol__materials li {

        font-size: 10.5px !important;

    }



    .training-protocol__summary {

        grid-template-columns: repeat(4, 1fr) !important;

        gap: 6px !important;

        margin-bottom: 8px !important;

    }



    .training-protocol__summary div {

        padding: 8px !important;

        border-radius: 9px !important;

    }



    .training-protocol__summary span {

        font-size: 9px !important;

    }



    .training-protocol__summary strong {

        font-size: 17px !important;

        margin-top: 1px !important;

    }



    .training-protocol__table th,

    .training-protocol__table td {

        padding: 6px 6px !important;

        font-size: 10px !important;

    }



    .training-protocol__signature-cell {

        min-width: 130px !important;

        height: 26px !important;

    }



    .training-protocol__signatures {

        gap: 12px !important;

        margin-top: 22px !important;

    }



    .training-protocol__signatures div {

        min-height: 52px !important;

        padding-top: 5px !important;

    }



    .training-protocol__footer {

        margin-top: 12px !important;

        padding-top: 7px !important;

        font-size: 9px !important;

    }



    .training-protocol__watermark-text,

    .training-protocol__watermark-logo {

        position: fixed !important;

        top: 42% !important;

        left: 0 !important;

        right: 0 !important;

        inset: auto !important;

        font-size: 58px !important;

        line-height: 1 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        opacity: 0.55 !important;

        z-index: 0 !important;

    }



    .training-protocol--watermark-logo .training-protocol__watermark-logo {

        font-size: 66px !important;

    }

}




/* =========================================================

   TRAINING PROTOCOL - REAL LOGO WATERMARK

   ========================================================= */



.training-protocol__emblem {

    display: none !important;

}



.training-protocol__logo {

    width: 76px;

    height: 76px;

    object-fit: contain;

    flex: 0 0 auto;

}



.training-protocol__watermark-logo {

    position: absolute;

    inset: 22% 0 auto 0;

    z-index: 0;

    display: flex;

    justify-content: center;

    pointer-events: none;

    opacity: 0.055;

    transform: rotate(-14deg);

}



.training-protocol__watermark-logo img {

    width: min(520px, 72%);

    height: auto;

    object-fit: contain;

}



.training-protocol__watermark-text {

    display: none !important;

}



@media print {

    .training-protocol__logo {

        width: 46px !important;

        height: 46px !important;

    }



    .training-protocol__watermark-text {

        display: none !important;

    }



    .training-protocol__watermark-logo {

        position: fixed !important;

        top: 26% !important;

        left: 0 !important;

        right: 0 !important;

        inset: auto !important;

        display: flex !important;

        justify-content: center !important;

        opacity: 0.045 !important;

        transform: rotate(-14deg) !important;

        overflow: visible !important;

    }



    .training-protocol__watermark-logo img {

        width: 420px !important;

        max-width: 70vw !important;

        height: auto !important;

    }

}




/* =========================================================

   TRAINING EXERCISE ATTACHMENTS

   ========================================================= */



.info-card hr {

    border: 0;

    border-top: 1px solid rgba(148, 163, 184, 0.28);

    margin: 22px 0;

}



.training-plan-record-form input[type="file"] {

    width: 100%;

    padding: 12px;

    border: 1px dashed rgba(148, 163, 184, 0.7);

    border-radius: 14px;

    background: #f8fafc;

}




/* =========================================================

   TRAINING EXERCISE BULK ATTACHMENTS

   ========================================================= */



.training-plan-record-form input[type="file"][multiple] {

    cursor: pointer;

    min-height: 58px;

}



.training-plan-record-form small {

    display: block;

    margin-top: 6px;

    color: #64748b;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.45;

}




/* =========================================================

   TRAINING EXERCISE ATTACHMENT THUMBNAILS

   ========================================================= */



.exercise-attachment-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));

    gap: 16px;

    margin: 18px 0;

}



.exercise-attachment-card {

    overflow: hidden;

    border: 1px solid rgba(148, 163, 184, 0.32);

    border-radius: 22px;

    background: #ffffff;

    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);

}



.exercise-attachment-card__preview {

    display: block;

    position: relative;

    height: 150px;

    background:

        linear-gradient(135deg, rgba(15, 23, 42, 0.04), rgba(220, 38, 38, 0.06)),

        #f8fafc;

    color: inherit;

    text-decoration: none;

}



.exercise-attachment-card__preview img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}





.exercise-attachment-card__icon {

    height: 100%;

    display: grid;

    place-items: center;

    align-content: center;

    gap: 8px;

    color: #0f172a;

}



.exercise-attachment-card__icon span {

    font-size: 46px;

    line-height: 1;

}



.exercise-attachment-card__icon strong {

    display: inline-flex;

    padding: 5px 10px;

    border-radius: 999px;

    background: #ffffff;

    color: #475569;

    font-size: 12px;

    font-weight: 950;

    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);

}



.exercise-attachment-card__icon--video {

    background:

        radial-gradient(circle at 50% 35%, rgba(220, 38, 38, 0.14), transparent 42%),

        #0f172a;

    color: #ffffff;

}



.exercise-attachment-card__icon--video strong {

    background: rgba(255, 255, 255, 0.12);

    color: #ffffff;

}



.exercise-attachment-card__body {

    padding: 14px;

}



.exercise-attachment-card__body h3 {

    margin: 0 0 4px;

    color: #0f172a;

    font-size: 15px;

    font-weight: 950;

    line-height: 1.25;

    word-break: break-word;

}



.exercise-attachment-card__body p {

    margin: 0 0 8px;

    color: #64748b;

    font-size: 13px;

    font-weight: 800;

}



.exercise-attachment-card__body small {

    display: block;

    margin: 0 0 10px;

    color: #64748b;

    font-size: 12px;

    line-height: 1.45;

}



.exercise-attachment-card__actions {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    align-items: center;

}



.exercise-attachment-card__actions form {

    margin: 0;

}



@media print {

    .exercise-attachment-grid {

        display: none !important;

    }

}




/* =========================================================

   TRAINING EXERCISE GENERATED THUMBNAILS

   ========================================================= */



.exercise-attachment-card__play {

    position: absolute;

    left: 50%;

    top: 50%;

    display: grid;

    place-items: center;

    width: 52px;

    height: 52px;

    border-radius: 999px;

    background: rgba(15, 23, 42, 0.78);

    color: #ffffff;

    font-size: 22px;

    font-weight: 950;

    transform: translate(-50%, -50%);

    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.28);

}



.exercise-attachment-card__preview:hover .exercise-attachment-card__play {

    background: rgba(220, 38, 38, 0.88);

}




/* =========================================================

   TRAINING EXERCISE ATTACHMENT LIGHTBOX

   ========================================================= */



.exercise-attachment-card__preview {

    width: 100%;

    padding: 0;

    border: 0;

    cursor: pointer;

    text-align: inherit;

}



.exercise-lightbox {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

}



.exercise-lightbox.is-open {

    display: block;

}



.exercise-lightbox__backdrop {

    position: absolute;

    inset: 0;

    background: rgba(2, 6, 23, 0.82);

    backdrop-filter: blur(10px);

}



.exercise-lightbox__dialog {

    position: absolute;

    inset: 28px;

    display: grid;

    grid-template-rows: auto minmax(0, 1fr);

    overflow: hidden;

    border-radius: 26px;

    background: #020617;

    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);

}



.exercise-lightbox__header {

    display: flex;

    justify-content: space-between;

    gap: 16px;

    align-items: center;

    padding: 14px 18px;

    background: rgba(15, 23, 42, 0.96);

    border-bottom: 1px solid rgba(148, 163, 184, 0.22);

}



.exercise-lightbox__header strong {

    display: block;

    color: #ffffff;

    font-size: 17px;

    font-weight: 950;

}



.exercise-lightbox__header span {

    display: block;

    margin-top: 2px;

    color: #94a3b8;

    font-size: 13px;

    font-weight: 800;

}



.exercise-lightbox__actions {

    display: flex;

    gap: 10px;

    align-items: center;

}



.exercise-lightbox__close {

    display: grid;

    place-items: center;

    width: 42px;

    height: 42px;

    border: 0;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.1);

    color: #ffffff;

    font-size: 30px;

    line-height: 1;

    cursor: pointer;

}



.exercise-lightbox__close:hover {

    background: rgba(220, 38, 38, 0.85);

}



.exercise-lightbox__content {

    position: relative;

    display: grid;

    place-items: center;

    min-height: 0;

    padding: 18px 76px;

    background:

        radial-gradient(circle at 50% 10%, rgba(220, 38, 38, 0.14), transparent 34%),

        #020617;

}



.exercise-lightbox__media {

    display: block;

    max-width: 100%;

    max-height: calc(100vh - 150px);

    object-fit: contain;

    border-radius: 14px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);

}



.exercise-lightbox__frame {

    width: 100%;

    height: calc(100vh - 150px);

    border: 0;

    border-radius: 14px;

    background: #ffffff;

}



.exercise-lightbox__file {

    max-width: 520px;

    padding: 34px;

    border-radius: 24px;

    background: #ffffff;

    text-align: center;

}



.exercise-lightbox__file-icon {

    font-size: 58px;

    margin-bottom: 12px;

}



.exercise-lightbox__file h3 {

    margin: 0 0 10px;

    color: #0f172a;

    font-size: 24px;

    font-weight: 950;

}



.exercise-lightbox__file p {

    margin: 0 0 18px;

    color: #64748b;

    font-weight: 750;

}



.exercise-lightbox__nav {

    position: absolute;

    top: 50%;

    z-index: 5;

    display: grid;

    place-items: center;

    width: 58px;

    height: 86px;

    border: 0;

    border-radius: 999px;

    background: rgba(15, 23, 42, 0.72);

    color: #ffffff;

    font-size: 58px;

    line-height: 1;

    cursor: pointer;

    transform: translateY(-50%);

    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);

}



.exercise-lightbox__nav:hover {

    background: rgba(220, 38, 38, 0.88);

}



.exercise-lightbox__nav--prev {

    left: 18px;

}



.exercise-lightbox__nav--next {

    right: 18px;

}



body.exercise-lightbox-open {

    overflow: hidden;

}



@media (max-width: 760px) {

    .exercise-lightbox__dialog {

        inset: 10px;

        border-radius: 18px;

    }



    .exercise-lightbox__header {

        align-items: flex-start;

        flex-direction: column;

    }



    .exercise-lightbox__content {

        padding: 14px 52px;

    }



    .exercise-lightbox__nav {

        width: 42px;

        height: 66px;

        font-size: 42px;

    }



    .exercise-lightbox__nav--prev {

        left: 6px;

    }



    .exercise-lightbox__nav--next {

        right: 6px;

    }



    .exercise-lightbox__frame,

    .exercise-lightbox__media {

        max-height: calc(100vh - 190px);

        height: calc(100vh - 190px);

    }

}



@media print {

    .exercise-lightbox {

        display: none !important;

    }

}




/* =========================================================

   EXERCISE LIGHTBOX ROBUST FIX

   ========================================================= */



.exercise-attachment-card__preview {

    cursor: zoom-in !important;

}



.exercise-lightbox {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

}



.exercise-lightbox.is-open {

    display: block;

}



.exercise-lightbox__backdrop {

    position: absolute;

    inset: 0;

    background: rgba(2, 6, 23, 0.86);

    backdrop-filter: blur(10px);

}



.exercise-lightbox__dialog {

    position: absolute;

    inset: 26px;

    display: grid;

    grid-template-rows: auto minmax(0, 1fr);

    overflow: hidden;

    border-radius: 26px;

    background: #020617;

    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);

}



.exercise-lightbox__header {

    display: flex;

    justify-content: space-between;

    gap: 16px;

    align-items: center;

    padding: 14px 18px;

    background: rgba(15, 23, 42, 0.96);

    border-bottom: 1px solid rgba(148, 163, 184, 0.25);

}



.exercise-lightbox__header strong {

    color: #ffffff;

    font-size: 17px;

    font-weight: 950;

}



.exercise-lightbox__header span {

    display: block;

    color: #94a3b8;

    font-size: 13px;

    font-weight: 800;

}



.exercise-lightbox__actions {

    display: flex;

    gap: 10px;

    align-items: center;

}



.exercise-lightbox__close {

    width: 44px;

    height: 44px;

    border: 0;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.1);

    color: #ffffff;

    font-size: 32px;

    line-height: 1;

    cursor: pointer;

}



.exercise-lightbox__close:hover {

    background: rgba(220, 38, 38, 0.9);

}



.exercise-lightbox__content {

    position: relative;

    display: grid;

    place-items: center;

    min-height: 0;

    padding: 18px 82px;

    background: #020617;

}



.exercise-lightbox__media {

    display: block;

    max-width: 100%;

    max-height: calc(100vh - 150px);

    object-fit: contain;

    border-radius: 14px;

}



.exercise-lightbox__frame {

    width: 100%;

    height: calc(100vh - 150px);

    border: 0;

    border-radius: 14px;

    background: #ffffff;

}



.exercise-lightbox__file {

    max-width: 520px;

    padding: 34px;

    border-radius: 24px;

    background: #ffffff;

    text-align: center;

}



.exercise-lightbox__file-icon {

    font-size: 58px;

    margin-bottom: 12px;

}



.exercise-lightbox__nav {

    position: absolute;

    top: 50%;

    z-index: 5;

    width: 62px;

    height: 92px;

    border: 0;

    border-radius: 999px;

    background: rgba(15, 23, 42, 0.78);

    color: #ffffff;

    font-size: 62px;

    line-height: 1;

    cursor: pointer;

    transform: translateY(-50%);

}



.exercise-lightbox__nav:hover {

    background: rgba(220, 38, 38, 0.9);

}



.exercise-lightbox__nav--prev {

    left: 18px;

}



.exercise-lightbox__nav--next {

    right: 18px;

}



body.exercise-lightbox-open {

    overflow: hidden;

}



@media (max-width: 760px) {

    .exercise-lightbox__dialog {

        inset: 10px;

        border-radius: 18px;

    }



    .exercise-lightbox__header {

        align-items: flex-start;

        flex-direction: column;

    }



    .exercise-lightbox__content {

        padding: 14px 52px;

    }



    .exercise-lightbox__nav {

        width: 42px;

        height: 66px;

        font-size: 42px;

    }



    .exercise-lightbox__nav--prev {

        left: 6px;

    }



    .exercise-lightbox__nav--next {

        right: 6px;

    }

}




/* =========================================================

   EXERCISE ATTACHMENT LIGHTBOX - FINAL

   ========================================================= */



.exercise-attachment-card__preview {

    cursor: zoom-in !important;

}



.exercise-lightbox {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

}



.exercise-lightbox.is-open {

    display: block;

}



.exercise-lightbox__backdrop {

    position: absolute;

    inset: 0;

    background: rgba(2, 6, 23, 0.86);

    backdrop-filter: blur(10px);

}



.exercise-lightbox__dialog {

    position: absolute;

    inset: 24px;

    display: grid;

    grid-template-rows: auto minmax(0, 1fr);

    overflow: hidden;

    border-radius: 26px;

    background: #020617;

    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);

}



.exercise-lightbox__header {

    display: flex;

    justify-content: space-between;

    gap: 16px;

    align-items: center;

    padding: 14px 18px;

    background: rgba(15, 23, 42, 0.96);

    border-bottom: 1px solid rgba(148, 163, 184, 0.25);

}



.exercise-lightbox__header strong {

    display: block;

    color: #ffffff;

    font-size: 17px;

    font-weight: 950;

}



.exercise-lightbox__header span {

    display: block;

    color: #94a3b8;

    font-size: 13px;

    font-weight: 800;

}



.exercise-lightbox__actions {

    display: flex;

    gap: 10px;

    align-items: center;

}



.exercise-lightbox__close {

    width: 44px;

    height: 44px;

    border: 0;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.1);

    color: #ffffff;

    font-size: 32px;

    line-height: 1;

    cursor: pointer;

}



.exercise-lightbox__close:hover {

    background: rgba(220, 38, 38, 0.9);

}



.exercise-lightbox__content {

    display: grid;

    place-items: center;

    min-height: 0;

    padding: 18px 82px;

    background: #020617;

}



.exercise-lightbox__media {

    display: block;

    max-width: 100%;

    max-height: calc(100vh - 150px);

    object-fit: contain;

    border-radius: 14px;

}



.exercise-lightbox__frame {

    width: 100%;

    height: calc(100vh - 150px);

    border: 0;

    border-radius: 14px;

    background: #ffffff;

}



.exercise-lightbox__file {

    max-width: 520px;

    padding: 34px;

    border-radius: 24px;

    background: #ffffff;

    text-align: center;

}



.exercise-lightbox__file-icon {

    font-size: 58px;

    margin-bottom: 12px;

}



.exercise-lightbox__nav {

    position: absolute;

    top: 50%;

    z-index: 5;

    width: 62px;

    height: 92px;

    border: 0;

    border-radius: 999px;

    background: rgba(15, 23, 42, 0.78);

    color: #ffffff;

    font-size: 62px;

    line-height: 1;

    cursor: pointer;

    transform: translateY(-50%);

}



.exercise-lightbox__nav:hover {

    background: rgba(220, 38, 38, 0.9);

}



.exercise-lightbox__nav--prev {

    left: 18px;

}



.exercise-lightbox__nav--next {

    right: 18px;

}



body.exercise-lightbox-open {

    overflow: hidden;

}



@media (max-width: 760px) {

    .exercise-lightbox__dialog {

        inset: 10px;

        border-radius: 18px;

    }



    .exercise-lightbox__header {

        align-items: flex-start;

        flex-direction: column;

    }



    .exercise-lightbox__content {

        padding: 14px 52px;

    }



    .exercise-lightbox__nav {

        width: 42px;

        height: 66px;

        font-size: 42px;

    }



    .exercise-lightbox__nav--prev {

        left: 6px;

    }



    .exercise-lightbox__nav--next {

        right: 6px;

    }

}



@media print {

    .exercise-lightbox {

        display: none !important;

    }

}




/* =========================================================

   UNIT STATUS DASHBOARD

   ========================================================= */



.unit-status-hero {

    display: flex;

    justify-content: space-between;

    gap: 18px;

    align-items: flex-start;

}



.unit-status-date {

    min-width: 150px;

    padding: 16px 18px;

    border-radius: 22px;

    background: #0f172a;

    color: #ffffff;

    text-align: right;

    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);

}



.unit-status-date span {

    display: block;

    color: #cbd5e1;

    font-size: 13px;

    font-weight: 800;

}



.unit-status-date strong {

    display: block;

    margin-top: 4px;

    font-size: 22px;

    font-weight: 950;

}



.unit-status-alerts {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin: 18px 0;

}



.unit-alert {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 18px 20px;

    border-radius: 24px;

    border: 1px solid rgba(148, 163, 184, 0.24);

    background: #ffffff;

    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);

}



.unit-alert strong {

    display: grid;

    place-items: center;

    min-width: 58px;

    height: 58px;

    border-radius: 18px;

    font-size: 24px;

    font-weight: 950;

}



.unit-alert span {

    color: #0f172a;

    font-size: 16px;

    font-weight: 900;

}



.unit-alert--ok strong {

    background: #dcfce7;

    color: #166534;

}



.unit-alert--warning strong {

    background: #fef3c7;

    color: #92400e;

}



.unit-alert--danger strong {

    background: #fee2e2;

    color: #991b1b;

}



.unit-status-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-top: 20px;

}



.unit-status-card {

    min-height: 260px;

}



.unit-card-head {

    display: flex;

    justify-content: space-between;

    gap: 14px;

    align-items: flex-start;

    margin-bottom: 16px;

}



.unit-card-head h2 {

    margin: 0 0 4px;

}



.unit-card-head p {

    margin: 0;

    color: #64748b;

    font-weight: 700;

}



.unit-progress-list {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 10px;

    margin: 14px 0 16px;

}



.unit-progress-list div {

    padding: 12px;

    border-radius: 18px;

    background: #f8fafc;

    border: 1px solid rgba(148, 163, 184, 0.24);

}



.unit-progress-list span {

    display: block;

    color: #64748b;

    font-size: 12px;

    font-weight: 850;

}



.unit-progress-list strong {

    display: block;

    margin-top: 4px;

    color: #0f172a;

    font-size: 24px;

    font-weight: 950;

}



.unit-mini-list {

    display: grid;

    gap: 9px;

    margin-top: 12px;

}



.unit-mini-row {

    display: block;

    padding: 11px 12px;

    border-radius: 16px;

    background: #f8fafc;

    border: 1px solid rgba(148, 163, 184, 0.22);

    color: inherit;

    text-decoration: none;

}



.unit-mini-row strong {

    display: block;

    color: #0f172a;

    font-size: 14px;

    font-weight: 950;

}



.unit-mini-row span {

    display: block;

    margin-top: 3px;

    color: #64748b;

    font-size: 13px;

    font-weight: 750;

}



.unit-mini-row--warning {

    background: #fffbeb;

    border-color: rgba(245, 158, 11, 0.35);

}



.unit-mini-row--expired,

.unit-mini-row--danger,

.unit-mini-row--missing {

    background: #fef2f2;

    border-color: rgba(220, 38, 38, 0.35);

}



.unit-empty-ok {

    padding: 14px;

    border-radius: 18px;

    background: #ecfdf5;

    color: #166534;

    font-weight: 900;

}



.unit-status-card--links {

    min-height: auto;

}



.unit-quick-links {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



@media (max-width: 1000px) {

    .unit-status-grid,

    .unit-status-alerts {

        grid-template-columns: 1fr;

    }



    .unit-progress-list {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .unit-status-hero {

        flex-direction: column;

    }



    .unit-status-date {

        width: 100%;

        text-align: left;

    }

}



@media (max-width: 560px) {

    .unit-progress-list {

        grid-template-columns: 1fr;

    }



    .unit-card-head {

        flex-direction: column;

    }

}




/* =========================================================

   UNIT STATUS PRIORITY BOARD

   ========================================================= */



.unit-priority-board {

    margin-top: 20px;

}



.unit-priority-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;

}



.unit-priority-column {

    min-width: 0;

    padding: 14px;

    border-radius: 20px;

    background: #f8fafc;

    border: 1px solid rgba(148, 163, 184, 0.24);

}



.unit-priority-column h3 {

    margin: 0 0 12px;

    color: #0f172a;

    font-size: 16px;

    font-weight: 950;

}



.unit-priority-column .unit-mini-row {

    background: #ffffff;

}



@media (max-width: 1250px) {

    .unit-priority-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (max-width: 700px) {

    .unit-priority-grid {

        grid-template-columns: 1fr;

    }

}




/* =========================================================

   UNIT READINESS STATUS

   ========================================================= */



.unit-readiness-panel {

    display: flex;

    justify-content: space-between;

    gap: 18px;

    align-items: stretch;

    margin: 18px 0;

    padding: 22px;

    border-radius: 28px;

    border: 1px solid rgba(148, 163, 184, 0.28);

    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.10);

}



.unit-readiness-main span,

.unit-readiness-side span {

    display: block;

    margin-bottom: 4px;

    font-size: 13px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    opacity: 0.78;

}



.unit-readiness-main strong {

    display: block;

    font-size: clamp(30px, 4vw, 52px);

    line-height: 1;

    font-weight: 1000;

}



.unit-readiness-main p {

    max-width: 720px;

    margin: 10px 0 0;

    font-size: 16px;

    font-weight: 800;

    line-height: 1.45;

    opacity: 0.88;

}



.unit-readiness-side {

    display: grid;

    grid-template-columns: repeat(2, minmax(110px, 1fr));

    gap: 12px;

    min-width: 260px;

}



.unit-readiness-side div {

    display: grid;

    align-content: center;

    padding: 16px;

    border-radius: 22px;

    background: rgba(255, 255, 255, 0.72);

    border: 1px solid rgba(255, 255, 255, 0.46);

}



.unit-readiness-side strong {

    display: block;

    font-size: 34px;

    line-height: 1;

    font-weight: 1000;

}



.unit-readiness-panel--ok {

    background:

        radial-gradient(circle at 12% 18%, rgba(34, 197, 94, 0.22), transparent 34%),

        linear-gradient(135deg, #ecfdf5, #ffffff);

    color: #14532d;

}



.unit-readiness-panel--warning {

    background:

        radial-gradient(circle at 12% 18%, rgba(245, 158, 11, 0.25), transparent 34%),

        linear-gradient(135deg, #fffbeb, #ffffff);

    color: #78350f;

}



.unit-readiness-panel--critical {

    background:

        radial-gradient(circle at 12% 18%, rgba(220, 38, 38, 0.28), transparent 34%),

        linear-gradient(135deg, #fef2f2, #ffffff);

    color: #7f1d1d;

}



@media (max-width: 860px) {

    .unit-readiness-panel {

        flex-direction: column;

    }



    .unit-readiness-side {

        min-width: 0;

        width: 100%;

    }

}



@media (max-width: 520px) {

    .unit-readiness-side {

        grid-template-columns: 1fr;

    }

}




/* UNIT STATUS SUMMARY BUTTON */



.unit-status-send-summary {

    margin-top: 12px;

}



.unit-status-send-summary .btn {

    width: 100%;

    justify-content: center;

    background: #ffffff;

    color: #0f172a;

}