/* ============================================================
   EUROPLANT — warstwa komponentów wg Makiety/ (design system).
   Ładowana PO bootstrap.min.css i po inline <style> w base.html,
   więc nadpisuje domyślne style Bootstrapa.
   ============================================================ */

:root {
    --ep-navy: #143C4B;
    --ep-navy2: #1F4E5F;
    --ep-green: #4A9D5B;
    --ep-green-d: #2E7D46;
    --ep-bg: #EEF2F4;
    --ep-card: #FFFFFF;
    --ep-line: #E1E8EB;
    --ep-ink: #1B2A30;
    --ep-muted: #65787F;

    --ep-ok-bg: #E6F4EA;   --ep-ok-fg: #2E7D46;
    --ep-wait-bg: #FBEEDA; --ep-wait-fg: #A96A00;
    --ep-alert-bg: #FBE7E4;--ep-alert-fg: #C0392B;
    --ep-prog-bg: #E4EFF7; --ep-prog-fg: #1F6FB2;
    --ep-new-bg: #EBEFF1;  --ep-new-fg: #566970;

    --ep-shadow: 0 1px 2px rgba(20,60,75,.06), 0 4px 14px rgba(20,60,75,.05);
}

/* ---- align base.html sidebar palette with the mockups ---- */
.sidebar { background-color: var(--ep-navy) !important; }
.nav-link.active { background-color: var(--ep-green) !important; }
.user-avatar { background-color: var(--ep-green) !important; }

body { color: var(--ep-ink); }

/* ============================================================
   PAGE HEADER  (tytuł strony + akcje)
   ============================================================ */
.ep-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.ep-head .ep-head-main h1,
.ep-head .ep-head-main h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--ep-navy);
    margin: 0;
}
.ep-head .ep-head-sub {
    font-size: 13px;
    color: var(--ep-muted);
    margin-top: 3px;
}
.ep-head .ep-head-badges { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.ep-head .ep-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 768px) {
    .ep-head .ep-head-actions { margin-left: 0; width: 100%; }
    .ep-head .ep-head-actions .btn { flex: 1; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary,
.btn-success {
    background-color: var(--ep-green);
    border-color: var(--ep-green);
    font-weight: 600;
}
.btn-primary:hover,
.btn-success:hover,
.btn-primary:focus,
.btn-success:focus {
    background-color: var(--ep-green-d);
    border-color: var(--ep-green-d);
}
.btn-ghost {
    background: var(--ep-bg);
    color: var(--ep-navy);
    border: 1px solid var(--ep-line);
    font-weight: 600;
}
.btn-ghost:hover { background: #e4ebee; color: var(--ep-navy); }
.btn-outline-primary {
    color: var(--ep-green-d);
    border-color: var(--ep-green);
}
.btn-outline-primary:hover {
    background-color: var(--ep-green);
    border-color: var(--ep-green);
}

/* ============================================================
   PANEL  (biała karta — zamiennik .card z kolorowym headerem)
   ============================================================ */
.panel {
    background: var(--ep-card);
    border: 1px solid var(--ep-line);
    border-radius: 12px;
    box-shadow: var(--ep-shadow);
    overflow: hidden;
    margin-bottom: 16px;
}
.panel > .panel-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 17px;
    border-bottom: 1px solid var(--ep-line);
    background: #FAFBFC;
}
.panel > .panel-h h2,
.panel > .panel-h h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ep-muted);
    margin: 0;
}
.panel > .panel-h .panel-h-link { font-size: 12px; font-weight: 600; color: var(--ep-green-d); text-decoration: none; }
.panel > .panel-b { padding: 15px 17px; }

/* Bootstrap .card — złagodź domyślny wygląd, żeby nietknięte ekrany też wyglądały spójnie */
.card {
    border: 1px solid var(--ep-line);
    border-radius: 12px;
    box-shadow: var(--ep-shadow);
}
.card > .card-header {
    background-color: #FAFBFC;
    border-bottom: 1px solid var(--ep-line);
    color: var(--ep-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 13px;
}
.card > .card-header.bg-primary,
.card > .card-header.bg-success,
.card > .card-header.bg-info,
.card > .card-header.bg-dark,
.card > .card-header.bg-secondary {
    background-color: #FAFBFC !important;
    color: var(--ep-muted) !important;
}
.card > .card-header.bg-primary h5, .card > .card-header.bg-success h5,
.card > .card-header.bg-info h5, .card > .card-header.bg-dark h5,
.card > .card-header.bg-secondary h5,
.card > .card-header h5, .card > .card-header h6 {
    font-size: 13px; margin: 0;
}

/* ============================================================
   INFO GRID  (dwie kolumny "klucz — wartość")
   ============================================================ */
.ep-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 900px) { .ep-grid { grid-template-columns: 1fr; } }

.infocard {
    background: var(--ep-card);
    border: 1px solid var(--ep-line);
    border-radius: 12px;
    box-shadow: var(--ep-shadow);
    padding: 15px 17px;
}
.infocard > h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ep-muted);
    font-weight: 700;
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.kv { display: flex; padding: 6px 0; font-size: 13px; border-bottom: 1px solid #F4F7F8; }
.kv:last-child { border-bottom: none; }
.kv > .k { color: var(--ep-muted); width: 140px; flex-shrink: 0; }
.kv > .v { color: var(--ep-ink); font-weight: 500; }
.kv > .v.strong { font-weight: 700; color: var(--ep-navy); }

.pay-note {
    background: #FFF8EC;
    border: 1px solid #F1DFBC;
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 12px;
    color: #8A6412;
    margin-top: 11px;
    display: flex;
    gap: 8px;
}
.pay-note .pn-t { font-weight: 700; }

/* ============================================================
   BADGES  (pigułki statusów — .ep-badge, żeby nie kolidować z .badge Bootstrapa)
   ============================================================ */
.ep-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.ep-badge.b-ok { background: var(--ep-ok-bg); color: var(--ep-ok-fg); }
.ep-badge.b-wait { background: var(--ep-wait-bg); color: var(--ep-wait-fg); }
.ep-badge.b-alert { background: var(--ep-alert-bg); color: var(--ep-alert-fg); }
.ep-badge.b-prog { background: var(--ep-prog-bg); color: var(--ep-prog-fg); }
.ep-badge.b-new { background: var(--ep-new-bg); color: var(--ep-new-fg); }

.tag {
    display: inline-block;
    background: var(--ep-bg);
    border: 1px solid var(--ep-line);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 10.5px;
    color: var(--ep-muted);
    margin-right: 3px;
}

/* ============================================================
   TABLES  (listy — wygląd z makiet)
   ============================================================ */
.ep-table { width: 100%; border-collapse: collapse; background: var(--ep-card); }
.ep-table thead th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ep-muted);
    font-weight: 600;
    padding: 11px 16px;
    background: #FAFBFC;
    border-bottom: 1px solid var(--ep-line);
}
.ep-table tbody td {
    padding: 12px 16px;
    font-size: 12.5px;
    border-bottom: 1px solid #F0F4F5;
    vertical-align: middle;
}
.ep-table tbody tr:last-child td { border-bottom: none; }
.ep-table tbody tr.clickable { cursor: pointer; }
.ep-table tbody tr:hover { background: #F6FAF9; }
.ep-table .onr { font-weight: 700; color: var(--ep-navy); text-decoration: none; }
.ep-table .onr:hover { text-decoration: underline; }
.ep-table .sub { color: var(--ep-muted); font-size: 11px; margin-top: 2px; }
.ep-table .muted { color: var(--ep-muted); }
.ep-table .pos-total td {
    background: #FAFBFC;
    font-weight: 700;
    color: var(--ep-navy);
    border-top: 2px solid var(--ep-line);
}
.pos-mag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    background: #EAF1F4;
    color: var(--ep-navy2);
}

/* Bootstrap .table — dociągnij do stylu z makiet dla nietkniętych ekranów */
.table > thead > tr > th {
    background-color: #FAFBFC;
    color: var(--ep-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--ep-line);
}
.table > tbody > tr > td { font-size: 12.5px; vertical-align: middle; }

/* ============================================================
   FILTR CHIPS  (segmenty na listach)
   ============================================================ */
.ep-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}
.chip {
    background: var(--ep-card);
    border: 1px solid var(--ep-line);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12.5px;
    color: var(--ep-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.chip:hover { border-color: #cdd8dd; color: var(--ep-ink); }
.chip .cv { color: var(--ep-muted); }
.chip.active {
    border-color: var(--ep-green);
    background: #F1F8F3;
    color: var(--ep-green-d);
    font-weight: 600;
}
.chip.active .cv { color: var(--ep-green-d); }
.ep-filters .count { margin-left: auto; font-size: 12.5px; color: var(--ep-muted); }

/* ============================================================
   TIMELINE  (pasek postępu zlecenia — Makieta_02)
   ============================================================ */
.ep-timeline-wrap {
    background: var(--ep-card);
    border: 1px solid var(--ep-line);
    border-radius: 12px;
    box-shadow: var(--ep-shadow);
    padding: 16px 20px 12px;
    margin-bottom: 16px;
}
.timeline { display: flex; gap: 0; margin: 4px 0 2px; overflow-x: auto; }
.tstep {
    flex: 1;
    min-width: 96px;
    text-align: center;
    position: relative;
    padding-top: 22px;
}
.tstep::before {
    content: '';
    position: absolute;
    top: 7px; left: 0; right: 0;
    height: 2px;
    background: var(--ep-line);
}
.tstep:first-child::before { left: 50%; }
.tstep:last-child::before { right: 50%; }
.tstep .dot {
    position: absolute;
    top: -3px; left: 50%;
    transform: translateX(-50%);
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--ep-line);
    z-index: 2;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--ep-muted);
}
.tstep.done .dot { background: var(--ep-green); border-color: var(--ep-green); color: #fff; }
.tstep.done::before { background: var(--ep-green); }
.tstep.now .dot { border-color: var(--ep-green); color: var(--ep-green-d); box-shadow: 0 0 0 4px var(--ep-ok-bg); }
.tstep.cancelled .dot { background: var(--ep-alert-fg); border-color: var(--ep-alert-fg); color: #fff; }
.tstep { padding-top: 28px; }
.tstep::before { top: 8px; }
.tstep .tl-lbl { font-size: 11.5px; font-weight: 600; color: var(--ep-ink); }
.tstep.todo .tl-lbl { color: var(--ep-muted); font-weight: 500; }
.tstep .tl-date { font-size: 10.5px; color: var(--ep-muted); margin-top: 2px; }

/* pasek "co teraz / kto / czego brakuje" pod timeline'em — układ poziomy */
.ep-next {
    margin-top: 14px;
    border-top: 1px dashed var(--ep-line);
    padding-top: 12px;
    font-size: 12.5px;
}
.ep-next-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    align-items: flex-start;
}
.ep-next .en-cell { display: flex; flex-direction: column; gap: 2px; }
.ep-next .en-k {
    color: var(--ep-muted);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .05em;
    font-weight: 700;
}
.ep-next .en-v { color: var(--ep-ink); }
.ep-next .en-v.owner { font-weight: 700; color: var(--ep-navy); }
.ep-next .ok-line { color: var(--ep-ok-fg); font-weight: 600; }
.ep-next-block { margin-top: 10px; display: flex; gap: 10px; align-items: baseline; }
.ep-next-block .en-k { padding-top: 1px; flex-shrink: 0; }
.ep-next-block ul.blockers { margin: 0; padding-left: 16px; }
.ep-next-block ul.blockers li { margin-bottom: 2px; }

/* ============================================================
   STAT TILES  (kafelki liczbowe)
   ============================================================ */
.ep-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.ep-stat {
    background: var(--ep-card);
    border: 1px solid var(--ep-line);
    border-left: 4px solid var(--ep-green);
    border-radius: 10px;
    box-shadow: var(--ep-shadow);
    padding: 14px 16px;
}
.ep-stat small { display: block; color: var(--ep-muted); font-size: 11px; }
.ep-stat strong { display: block; color: var(--ep-navy); font-size: 24px; line-height: 1.3; }
.ep-stat.s-prog { border-left-color: var(--ep-prog-fg); }
.ep-stat.s-wait { border-left-color: var(--ep-wait-fg); }
.ep-stat.s-alert { border-left-color: var(--ep-alert-fg); }
.ep-stat.s-ok { border-left-color: var(--ep-ok-fg); }

/* ============================================================
   SECTION TITLE
   ============================================================ */
.ep-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ep-muted);
    font-weight: 700;
    margin: 4px 0 11px;
}

/* ============================================================
   TOOLBAR  (wyszukiwarka + akcja nad listą)
   ============================================================ */
.ep-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ep-toolbar .ep-search { flex: 1; min-width: 220px; }
.ep-toolbar .ep-search input {
    width: 100%;
    background: var(--ep-card);
    border: 1px solid var(--ep-line);
    border-radius: 8px;
    padding: 9px 13px;
    font-size: 13px;
}

/* timeline card w wersji wąskiej */
@media (max-width: 768px) {
    .tstep { min-width: 82px; }
    .ep-next { grid-template-columns: 1fr; }
    .ep-next .en-k { padding-top: 8px; }
}

/* ============================================================
   FORMULARZ SEKCYJNY  (Makieta_10 — numerowane sekcje)
   ============================================================ */
.form-wrap {
    width: 82%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 1200px) { .form-wrap { width: 100%; } }

.fsection {
    background: var(--ep-card);
    border: 1px solid var(--ep-line);
    border-radius: 12px;
    box-shadow: var(--ep-shadow);
    margin-bottom: 16px;
    overflow: hidden;
}
.fsection-h {
    padding: 13px 18px;
    border-bottom: 1px solid var(--ep-line);
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FAFBFC;
}
.fsection-h .num {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--ep-green);
    color: #fff;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700;
    flex-shrink: 0;
}
.fsection-h h2 { font-size: 14px; font-weight: 700; color: var(--ep-navy); margin: 0; }
.fsection-h .hint { margin-left: auto; font-size: 11.5px; color: var(--ep-muted); }
.fbody { padding: 16px 18px; }

/* pola formularza w sekcji — spójny wygląd niezależnie od crispy/Django */
.fbody .form-label,
.fbody label:not(.radio-opt):not(.form-check-label) {
    font-size: 12px; font-weight: 600; color: var(--ep-ink);
    margin-bottom: 5px; display: block;
}
.fbody .form-control,
.fbody .form-select,
.fbody input[type="text"],
.fbody input[type="number"],
.fbody input[type="date"],
.fbody input[type="email"],
.fbody input[type="tel"],
.fbody select,
.fbody textarea {
    border: 1px solid var(--ep-line);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 13px;
    width: 100%;
    background: #fff;
    color: var(--ep-ink);
}
.fbody textarea { min-height: 68px; resize: vertical; }
.fbody .help, .fbody .form-text, .fbody .helptext { font-size: 11px; color: var(--ep-muted); margin-top: 3px; }

.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.fgrid.g3 { grid-template-columns: 1fr 1fr 1fr; }
.fgrid .full, .field.full { grid-column: 1 / -1; }
.fgrid .field { display: flex; flex-direction: column; }
@media (max-width: 760px) { .fgrid, .fgrid.g3 { grid-template-columns: 1fr; } }

/* typ zlecenia — kafelki radio */
.radio-row { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-row label,
.radio-opt {
    border: 1px solid var(--ep-line);
    border-radius: 8px;
    padding: 9px 13px;
    font-size: 12.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    margin: 0;
    font-weight: 500;
}
.radio-row label:has(input:checked),
.radio-opt.sel {
    border-color: var(--ep-green);
    background: #F1F8F3;
    color: var(--ep-green-d);
    font-weight: 700;
}
.radio-row input[type="radio"] { accent-color: var(--ep-green); }

/* dodawanie pozycji */
.pos-note {
    background: #EDF4FA;
    border: 1px solid #CBE0F0;
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 12px;
    color: #1F5C86;
    margin-top: 10px;
    display: flex;
    gap: 8px;
}
.pos-note .nt { font-weight: 700; }
.btn-add {
    background: #F1F8F3;
    color: var(--ep-green-d);
    border: 1px solid #CDE7D4;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

/* pasek akcji na dole formularza */
.actionbar {
    position: sticky;
    bottom: 0;
    background: var(--ep-card);
    border: 1px solid var(--ep-line);
    border-radius: 12px;
    box-shadow: 0 -2px 14px rgba(20,60,75,.06);
    padding: 13px 18px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.actionbar .spacer { margin-left: auto; }

.auto-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--ep-prog-bg);
    color: var(--ep-prog-fg);
    padding: 4px 10px;
    border-radius: 20px;
}