/* =========================================================
   PIXEL UI / MM3 PLATFORM
   Wspólny motyw oparty na sprawdzonym stylu Floty.
   Klasa body: .dark albo .light (obsługuje resources/js/app.js).
   ========================================================= */

:root {
    --gold: #d4af37;
    --gold-light: #f1d27a;
    --gold-soft: rgba(212, 175, 55, .18);
    --gold-border: rgba(212, 175, 55, .28);
    --green: #2ecc71;
    --yellow: #f1c40f;
    --red: #e74c3c;
    --blue: #3b82f6;
    --radius-sm: 8px;
    --radius: 10px;
    --radius-lg: 16px;
    --transition: .18s ease;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.45;
    transition: background var(--transition), color var(--transition);
}
body.dark { background: #0d0d0f; color: #f5f5f5; }
body.light { background: #d4d4d4; color: #111; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

/* Tło znane z Floty */
.app-background { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.background-mark {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: #fff; font-size: clamp(140px, 28vw, 380px); font-weight: 800;
    letter-spacing: -.09em; opacity: .035; filter: grayscale(1); user-select: none;
}
.background-lines { position: absolute; inset: 0; }
.background-lines i {
    position: absolute; display: block; width: 1px; height: 140%; opacity: .25;
    background: linear-gradient(to bottom, transparent, rgba(212,175,55,.4), transparent);
    animation: pixel-float 20s linear infinite;
}
.background-lines i:nth-child(1) { left: 10%; animation-duration: 16s; }
.background-lines i:nth-child(2) { left: 30%; animation-duration: 22s; }
.background-lines i:nth-child(3) { left: 50%; animation-duration: 18s; }
.background-lines i:nth-child(4) { left: 70%; animation-duration: 26s; }
.background-lines i:nth-child(5) { left: 85%; animation-duration: 20s; }
.background-lines i:nth-child(6) { left: 92%; animation-duration: 24s; }
body.light .background-mark { color: #111; opacity: .025; }
@keyframes pixel-float { from { transform: translateY(0); } to { transform: translateY(-20%); } }

/* Układ aplikacji */
.app-layout { position: relative; z-index: 1; display: flex; min-height: 100vh; }
.app-sidebar {
    display: flex; flex: 0 0 240px; flex-direction: column; gap: 18px;
    min-height: 100vh; padding: 18px; background: #111115;
    border-right: 1px solid var(--gold-border);
}
body.light .app-sidebar { background: #fff; border-right-color: #ddd; }
.app-main { flex: 1; min-width: 0; overflow: hidden; }
.app-content { height: calc(100vh - 82px); overflow: auto; padding: 0 20px 20px; }

/* Logo i menu */
.app-logo { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.app-logo__mark {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius);
    background: #0d0d0f; border: 1px solid var(--gold-border); color: var(--gold);
    font-size: 14px; font-weight: 800; letter-spacing: .04em;
}
body.light .app-logo__mark { background: #efefef; }
.app-logo__text { display: flex; flex-direction: column; font-size: 15px; font-weight: 700; }
.app-logo__text small { color: #c0c0d0; font-size: 11px; font-weight: 400; }
body.light .app-logo__text small { color: #555; }
.app-menu { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.app-menu__item {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius);
    color: #e0e0f0; font-size: 13px; text-decoration: none; transition: background var(--transition), color var(--transition);
}
.app-menu__item i { width: 16px; text-align: center; color: var(--gold); }
.app-menu__item:hover { background: rgba(212,175,55,.12); }
.app-menu__item.is-active { background: rgba(212,175,55,.22); color: #fff; font-weight: 600; }
body.light .app-menu__item { color: #333; }
body.light .app-menu__item:hover { background: rgba(212,175,55,.15); }
body.light .app-menu__item.is-active { background: rgba(212,175,55,.25); color: #111; }
.app-sidebar__footer { display: flex; flex-direction: column; gap: 10px; margin-top: auto; color: #777; font-size: 11px; }

/* Górny pasek */
.app-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 82px; padding: 20px; }
.app-topbar__title { margin: 0; font-size: 18px; font-weight: 600; }
.app-topbar__subtitle { margin: 2px 0 0; color: #9a9ab0; font-size: 12px; }
body.light .app-topbar__subtitle { color: #666; }
.app-topbar__actions { display: flex; align-items: center; gap: 10px; }
.live-clock { color: #9a9ab0; font-size: 12px; text-transform: capitalize; white-space: nowrap; }
body.light .live-clock { color: #666; }
.icon-button {
    display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
    border: 1px solid rgba(212,175,55,.4); border-radius: var(--radius); background: transparent;
    color: #f5f5f5; cursor: pointer; transition: background var(--transition), transform var(--transition);
}
.icon-button:hover { background: rgba(212,175,55,.2); transform: translateY(-1px); }
body.light .icon-button { color: #222; }

/* Panele, karty i grid */
.panel, .section-card {
    margin-bottom: 16px; padding: 16px; border: 1px solid var(--gold-soft); border-radius: var(--radius-lg);
    background: #15151a; box-shadow: 0 0 18px rgba(0,0,0,.5);
}
body.light .panel, body.light .section-card { background: #cfcfcf; border-color: #b5b5b5; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
.panel__header, .section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel__header h2, .section-header h2 { margin: 0; font-size: 16px; }
.panel__header p, .panel__header small, .section-header span { margin: 0; color: #9a9ab0; font-size: 12px; }
body.light .panel__header p, body.light .panel__header small, body.light .section-header span { color: #777; }
.grid { display: grid; gap: 12px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.record-card, .card {
    padding: 14px; border: 1px solid var(--gold-soft); border-radius: 14px; background: #111115;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.record-card:hover, .card:hover { transform: translateY(-2px); border-color: var(--gold-border); box-shadow: 0 0 18px rgba(212,175,55,.4); }
body.light .record-card, body.light .card { background: #c8c8c8; border-color: #b3b3b3; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.card__title { margin: 0 0 2px; font-size: 14px; font-weight: 700; }
.card__meta { color: #9a9ab0; font-size: 12px; }
body.light .card__meta { color: #777; }
.metric-card { min-height: 128px; }
.metric-card__icon { color: var(--gold); font-size: 20px; }
.metric-card__value { margin: 12px 0 2px; font-size: 28px; font-weight: 700; }
.metric-card__label { color: #9a9ab0; font-size: 12px; }
body.light .metric-card__label { color: #666; }

/* Przyciski */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px;
    padding: 8px 12px; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
    font-size: 13px; font-weight: 600; text-decoration: none; transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn--gold, .btn-main { background: var(--gold); color: #0d0d0f; }
.btn--gold:hover, .btn-main:hover { background: var(--gold-light); }
.btn--secondary { background: #222228; color: #f5f5f5; }
.btn--secondary:hover { background: #2b2b32; }
.btn--outline { border-color: rgba(212,175,55,.4); background: transparent; color: inherit; }
.btn--outline:hover { background: rgba(212,175,55,.16); }
.btn--danger { background: #a00; color: #fff; }
.btn--danger:hover { background: #c00; }
.btn--success { background: var(--green); color: #082813; }
body.light .btn--secondary { background: #f0f0f0; color: #222; }
body.light .btn--secondary:hover { background: #e0e0e0; }

/* Formularze */
.form-grid { display: grid; gap: 14px; }
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { color: #c0c0d0; font-size: 12px; }
body.light .field label { color: #555; }
.field input, .field select, .field textarea, .input-text {
    width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #2a2a33; border-radius: var(--radius);
    outline: none; background: #111115; color: #f5f5f5; font-size: 13px; transition: border-color var(--transition), box-shadow var(--transition);
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input-text:focus { border-color: var(--gold); box-shadow: 0 0 8px rgba(212,175,55,.35); }
.field input::placeholder, .field textarea::placeholder { color: #747481; }
body.light .field input, body.light .field select, body.light .field textarea, body.light .input-text { background: #fafafa; border-color: #ccc; color: #111; }
.helper-text { color: #9a9ab0; font-size: 11px; }
body.light .helper-text { color: #666; }

/* Tabele */
.table-wrap { overflow-x: auto; border: 1px solid var(--gold-soft); border-radius: 12px; }
.data-table { width: 100%; border-collapse: collapse; background: #15151a; font-size: 13px; }
.data-table th, .data-table td { padding: 11px 12px; border-bottom: 1px solid #2a2a33; text-align: left; white-space: nowrap; }
.data-table th { background: #111115; color: #fff; font-size: 12px; }
.data-table tbody tr { transition: background var(--transition); }
.data-table tbody tr:hover { background: #1d1d22; }
.data-table tbody tr:last-child td { border-bottom: 0; }
body.light .table-wrap { border-color: #b5b5b5; }
body.light .data-table th { background: #e0e0e0; border-color: #b5b5b5; color: #111; }
body.light .data-table td { background: #f5f5f5; border-color: #ccc; color: #111; }
body.light .data-table tbody tr:hover td { background: #e8e8e8; }

/* Statusy */
.badge { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge--success { background: rgba(76,175,80,.15); color: #8be58b; }
.badge--warning { background: rgba(255,193,7,.15); color: #ffdd7a; }
.badge--danger { background: rgba(244,67,54,.15); color: #ff9b9b; }
.badge--info { background: rgba(59,130,246,.18); color: #a9c8ff; }
body.light .badge--success { background: var(--green); color: #fff; }
body.light .badge--warning { background: var(--yellow); color: #000; }
body.light .badge--danger { background: var(--red); color: #fff; }
body.light .badge--info { background: var(--blue); color: #fff; }

/* Komunikaty */
.alert { padding: 11px 13px; margin-bottom: 16px; border: 1px solid var(--gold-border); border-radius: var(--radius); background: rgba(212,175,55,.1); }
.alert--success { border-color: rgba(76,175,80,.5); background: rgba(76,175,80,.12); color: #a5efaa; }
.alert--warning { border-color: rgba(255,193,7,.5); background: rgba(255,193,7,.12); color: #ffdd7a; }
.alert--danger { border-color: rgba(244,67,54,.5); background: rgba(244,67,54,.12); color: #ffabab; }
body.light .alert--success { color: #0f3d0f; }
body.light .alert--warning { color: #6a4b00; }
body.light .alert--danger { color: #5a0000; }

/* Modal i wysuwany panel */
.modal-overlay, .slide-panel-overlay { position: fixed; inset: 0; z-index: 50; opacity: 0; pointer-events: none; background: rgba(0,0,0,.6); transition: opacity .25s ease; }
.modal-overlay.is-open, .slide-panel-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal { position: fixed; top: 50%; left: 50%; z-index: 51; width: min(560px, calc(100vw - 32px)); padding: 18px; border: 1px solid var(--gold-border); border-radius: var(--radius-lg); background: #15151a; box-shadow: 0 10px 35px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transform: translate(-50%, -46%); transition: opacity .25s ease, transform .25s ease; }
.modal.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.slide-panel { position: fixed; top: 0; right: -100%; z-index: 51; width: min(420px, 100%); height: 100vh; padding: 18px; border-left: 1px solid var(--gold-border); background: #111115; box-shadow: -4px 0 20px rgba(0,0,0,.7); transition: right .25s ease; }
.slide-panel.is-open { right: 0; }
.slide-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.slide-panel__header h3 { margin: 0; font-size: 16px; }
.slide-panel__body { height: calc(100% - 42px); overflow: auto; }
body.light .modal, body.light .slide-panel { background: #fff; border-color: #ddd; }

/* Login */
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 20px; }
.login-card { width: min(340px, 100%); padding: 40px 35px; border: 1px solid #2a2a2d; border-radius: var(--radius-lg); background: #1a1a1d; box-shadow: 0 0 35px rgba(0,0,0,.45); animation: pixel-fade-in .6s ease; }
.login-card__brand { display: grid; place-items: center; width: 82px; height: 82px; margin: 0 auto 20px; border: 1px solid var(--gold-border); border-radius: 14px; color: var(--gold); font-weight: 800; }
.login-card h1 { margin: 0 0 20px; color: var(--gold); font-size: 20px; text-align: center; }
body.light .login-card { background: #f7f7f7; border-color: #bbb; }
@keyframes pixel-fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Drobne elementy */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.toolbar__spacer { flex: 1; }
.empty-state { padding: 42px 20px; color: #9a9ab0; text-align: center; }
.empty-state i { display: block; margin-bottom: 10px; color: var(--gold); font-size: 32px; }
body.light .empty-state { color: #666; }

@media (max-width: 1100px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
    .app-sidebar { flex-basis: 64px; padding: 10px; }
    .app-logo__text, .app-menu__item span, .app-sidebar__footer span { display: none; }
    .app-logo { justify-content: center; }
    .app-menu__item { justify-content: center; padding: 11px; }
    .app-menu__item i { width: auto; font-size: 16px; }
    .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .app-layout { display: block; }
    .app-sidebar { position: sticky; top: 0; z-index: 10; flex-direction: row; min-height: auto; height: 58px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--gold-border); }
    .app-menu { flex-direction: row; margin: 0; }
    .app-sidebar__footer { display: none; }
    .app-main { overflow: visible; }
    .app-content { height: auto; min-height: calc(100vh - 58px); padding: 0 12px 12px; overflow: visible; }
    .app-topbar { min-height: 70px; padding: 16px 12px; }
    .live-clock { display: none; }
    .grid--2, .grid--3, .grid--4, .form-grid--2 { grid-template-columns: 1fr; }
    .panel, .section-card { padding: 13px; }
}

.dashboard-secondary-panels {
    margin-top: 16px;
}

body.dark .data-table th {
    background: #111115 !important;
    color: #fff !important;
    border-color: #2a2a33 !important;
}

body.dark .data-table td {
    background: #15151a !important;
    color: #f5f5f5 !important;
    border-color: #2a2a33 !important;
}

body.dark .data-table strong {
    color: #fff !important;
}

.btn--small {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 11px;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.table-actions form {
    margin: 0;
}

.measurement-section {
    padding: 14px;
    border: 1px solid var(--gold-soft);
    border-radius: 14px;
    background: rgba(212, 175, 55, 0.05);
}

.measurement-section h3 {
    margin: 0 0 14px;
    color: var(--gold);
    font-size: 14px;
}

.measurement-section[hidden] {
    display: none;
}

.protocol-document__title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 6px 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gold-border);
}

.protocol-document__title span {
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.protocol-document__title h2 {
    margin: 4px 0;
    font-size: 24px;
}

.protocol-document__title p {
    margin: 0;
    color: #9a9ab0;
}

.protocol-document__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.protocol-document__section-title {
    margin: 0 0 14px;
    color: var(--gold);
    font-size: 14px;
}

.protocol-details {
    display: grid;
    gap: 10px;
    margin: 0;
}

.protocol-details--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.protocol-details div {
    min-width: 0;
}

.protocol-details dt {
    margin-bottom: 2px;
    color: #9a9ab0;
    font-size: 11px;
}

.protocol-details dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.protocol-document__notes {
    margin: 0;
    white-space: normal;
}

body.light .protocol-document__title p,
body.light .protocol-details dt {
    color: #666;
}

@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    body,
    body.light,
    body.dark {
        background: #fff !important;
        color: #111 !important;
    }

    .app-sidebar,
    .app-topbar,
    .app-background,
    .no-print {
        display: none !important;
    }

    .app-layout,
    .app-main,
    .app-content {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .panel,
    .card {
        margin: 0 0 12px !important;
        padding: 12px !important;
        border: 1px solid #aaa !important;
        background: #fff !important;
        box-shadow: none !important;
        color: #111 !important;
        break-inside: avoid;
    }

    .protocol-document__title h2,
    .protocol-details dd {
        color: #111 !important;
    }

    .protocol-document__title p,
    .protocol-details dt,
    .helper-text {
        color: #555 !important;
    }
}

@media (max-width: 620px) {
    .protocol-document__title {
        flex-direction: column;
    }

    .protocol-document__badges {
        justify-content: flex-start;
    }

    .protocol-details--grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-notifications {
    display: grid;
    gap: 9px;
    max-height: 205px;
    overflow-y: auto;
    padding-right: 4px;
}

.dashboard-notification {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--gold-soft);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    background: #111115;
    color: inherit;
    text-decoration: none;
    transition: transform var(--transition), border-color var(--transition);
}

.dashboard-notification:hover {
    transform: translateX(2px);
    border-color: var(--gold);
}

.dashboard-notification > i:first-child {
    color: var(--gold);
    font-size: 16px;
    text-align: center;
}

.dashboard-notification strong,
.dashboard-notification small {
    display: block;
}

.dashboard-notification strong {
    font-size: 12px;
}

.dashboard-notification small {
    margin-top: 2px;
    color: #a7a7b8;
    font-size: 11px;
}

.dashboard-notification__arrow {
    color: #888;
    font-size: 10px;
}

.dashboard-notification--danger {
    border-left-color: var(--red);
}

.dashboard-notification--danger > i:first-child {
    color: var(--red);
}

.dashboard-notification--warning {
    border-left-color: var(--yellow);
}

.dashboard-notification--warning > i:first-child {
    color: var(--yellow);
}

.dashboard-notification--info {
    border-left-color: var(--blue);
}

.dashboard-notification--info > i:first-child {
    color: var(--blue);
}

body.light .dashboard-notification {
    background: #dedede;
    border-color: #b4b4b4;
}

body.light .dashboard-notification small {
    color: #666;
}

.app-menu__item--logout i {
    color: var(--red);
}

.app-menu__item--logout:hover {
    background: rgba(231, 76, 60, .14);
}

/* Ekran logowania */
.login-card {
    text-align: center;
}

.login-card .form-grid {
    margin-top: 22px;
    text-align: left;
}

.login-card .form-actions {
    justify-content: center;
    margin-top: 26px;
}

.login-card .form-actions .btn {
    width: auto;
    min-width: 156px;
}

.login-card__brand--image {
    padding: 6px;
    overflow: hidden;
    background: #fff;
}

.login-card__brand--image img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}