/* R6-64 station service log ("Dziennik serwisowy"): station page, network overview, entry dialog, station card.
   Outlined pills (filters, topics, outcomes), filled action buttons (DevExpress), month-grouped timeline.
   Phone (390 px): pills wrap, the timeline loses its rail, the overview table becomes cards. */

.sl-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sl-pill {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid #3d4f75; border-radius: 999px; background: transparent;
    padding: 4px 11px; font-size: 0.8rem; font-weight: 600; color: #cdd6e8;
    white-space: nowrap; line-height: 1.4;
}
button.sl-pill { cursor: pointer; }
button.sl-pill:hover { border-color: #7aa2ff; color: #fff; }
button.sl-pill:focus-visible { outline: 2px solid #7aa2ff; outline-offset: 2px; }
.sl-pill.on { border-color: #7aa2ff; color: #fff; background: rgba(59, 130, 246, 0.2); }
.sl-pill.small { font-size: 0.72rem; padding: 2px 9px; }
.sl-pill.outcome-resolved { border-color: #10b981; color: #6ee7b7; }
.sl-pill.outcome-in_progress { border-color: #f59e0b; color: #fcd34d; }
.sl-pill.outcome-watch { border-color: #60a5fa; color: #93c5fd; }
.sl-pill.on.outcome-resolved { background: rgba(16, 185, 129, 0.18); }
.sl-pill.on.outcome-in_progress { background: rgba(245, 158, 11, 0.18); }
.sl-pill.on.outcome-watch { background: rgba(96, 165, 250, 0.18); }
.sl-pill.agent { border-color: #a78bfa; color: #c4b5fd; }
.sl-pill.seed { border-color: #64748b; color: #cbd5e1; }
.sl-pill.deleted { border-color: #ef4444; color: #fca5a5; }

.sl-label {
    font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: #8d9ab5; font-weight: 700;
}
.sl-hint { font-size: 0.75rem; color: #8d9ab5; margin-top: 4px; }

/* Summary strip and filters of the station page */
.sl-summary { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; padding: 16px 20px; }
.sl-summary .sl-big { font-size: 1.4rem; font-weight: 800; margin-top: 2px; }
.sl-summary .sl-add { margin-left: auto; }
.sl-filters { display: flex; flex-direction: column; gap: 10px; padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.sl-filter-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.sl-filter-row > .sl-label { width: 70px; flex: none; }
.sl-filter-row .sl-search { margin-left: auto; min-width: 220px; }

/* Timeline */
.sl-month { padding: 12px 20px 0; color: #8d9ab5; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.sl-timeline { position: relative; padding: 4px 20px 8px 64px; }
.sl-timeline::before { content: ""; position: absolute; left: 37px; top: 0; bottom: 0; width: 2px; background: #26365a; }
.sl-entry {
    position: relative; background: rgba(9, 18, 40, 0.55); border: 1px solid #23304e;
    border-radius: 12px; padding: 14px 16px; margin: 10px 0;
}
.sl-entry.is-deleted { opacity: 0.6; border-style: dashed; }
.sl-entry .sl-dot {
    position: absolute; left: -41px; top: 14px; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem;
    border: 2px solid #0b1530;
}
.sl-dot.ch-phone { background: #2563eb; }
.sl-dot.ch-email { background: #0891b2; }
.sl-dot.ch-remote { background: #7c3aed; }
.sl-dot.ch-visit { background: #059669; }
.sl-dot.ch-part_swap { background: #d97706; }
.sl-dot.ch-configuration { background: #475569; }
.sl-dot.ch-other { background: #334155; }
.sl-entry .sl-when { color: #9fb0d0; font-weight: 700; font-size: 0.8rem; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 6px; padding-right: 96px; }
.sl-entry h3 { margin: 0 0 4px; font-size: 0.98rem; font-weight: 700; }
.sl-entry .sl-desc { margin: 6px 0; color: #c8d1e3; line-height: 1.45; font-size: 0.86rem; white-space: pre-line; overflow-wrap: anywhere; }
.sl-entry .sl-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: #8d9ab5; font-size: 0.76rem; font-weight: 600; margin-top: 8px; }
.sl-entry .sl-actions { position: absolute; right: 12px; top: 10px; display: flex; gap: 6px; }
.sl-entry .sl-station { font-weight: 800; color: #e6ebf5; }
.sl-history { margin-top: 8px; border-top: 1px dashed #2b3a5e; padding-top: 6px; font-size: 0.76rem; color: #9fb0d0; }
.sl-history div { padding: 2px 0; }
.sl-linkbtn { background: none; border: none; color: #7aa2ff; padding: 0; font-size: 0.76rem; font-weight: 600; cursor: pointer; }
.sl-linkbtn:hover { text-decoration: underline; }
.sl-empty { padding: 22px 20px; color: #8d9ab5; }
.sl-more { display: flex; justify-content: center; padding: 6px 0 18px; }

/* Entry dialog */
.sl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.sl-form .sl-full { grid-column: 1 / -1; }
.sl-form .sl-field > .sl-label { display: block; margin-bottom: 6px; }
.sl-form-error { color: #fca5a5; font-weight: 600; font-size: 0.85rem; }

/* Card on the station page */
.sl-card-row { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-wrap: wrap; }
.sl-card-row:last-child { border-bottom: none; }
.sl-card-row .sl-card-when { color: #9fb0d0; font-weight: 700; font-size: 0.8rem; min-width: 112px; }
.sl-card-row .sl-card-title { font-weight: 600; }

/* Network overview */
.sl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.sl-kpi { background: rgba(9, 18, 40, 0.55); border: 1px solid #23304e; border-radius: 12px; padding: 14px 16px; }
.sl-kpi .sl-kpi-value { display: block; font-size: 1.6rem; font-weight: 800; margin-top: 4px; }
.sl-kpi .sl-kpi-value.text { font-size: 1.15rem; margin-top: 10px; }
.sl-kpi .sl-kpi-value.warn { color: #fcd34d; }
.sl-overview-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 16px 20px; }
.sl-table-wrap { overflow-x: auto; }
.sl-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.sl-table th {
    text-align: left; color: #8d9ab5; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 10px 7px; border-bottom: 1px solid #23304e; white-space: nowrap; user-select: none;
}
.sl-table th.sortable { cursor: pointer; }
.sl-table th.sortable:hover { color: #e6ebf5; }
.sl-table th .sl-sort { color: #7aa2ff; margin-left: 3px; }
.sl-table td { padding: 9px 7px; border-bottom: 1px solid #1b2742; white-space: nowrap; }
.sl-table td.num, .sl-table th.num { text-align: center; }
.sl-table td.num { font-weight: 700; }
.sl-table td.zero { color: #3c4a69; font-weight: 400; }
.sl-table td.heat-1 { background: rgba(245, 158, 11, 0.14); }
.sl-table td.heat-2 { background: rgba(245, 158, 11, 0.28); }
.sl-table td.heat-3 { background: rgba(239, 68, 68, 0.32); }
.sl-table tbody tr { cursor: pointer; }
.sl-table tbody tr:hover td { background-color: rgba(59, 130, 246, 0.12); }
.sl-table tbody tr:focus-visible { outline: 2px solid #7aa2ff; outline-offset: -2px; }
.sl-table .sl-st-name { font-weight: 800; }
.sl-table .sl-st-code { display: block; font-size: 0.7rem; color: #8d9ab5; font-weight: 600; }
.sl-note { color: #8d9ab5; font-size: 0.76rem; margin: 8px 20px 16px; }
.sl-cards { display: none; }
.sl-recent-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #1b2742; cursor: pointer; }
.sl-recent-row:last-child { border-bottom: none; }
.sl-recent-row .sl-card-when { color: #9fb0d0; font-weight: 700; min-width: 100px; }

@media (max-width: 767.98px) {
    .sl-summary { padding: 12px 14px; gap: 12px 18px; }
    .sl-summary .sl-add { margin-left: 0; width: 100%; }
    .sl-filters { padding: 12px 14px; }
    .sl-filter-row > .sl-label { width: 100%; }
    .sl-filter-row .sl-search { margin-left: 0; min-width: 0; width: 100%; }
    .sl-month { padding: 10px 14px 0; }
    .sl-timeline { padding: 4px 10px 8px 10px; }
    .sl-timeline::before { display: none; }
    .sl-entry { padding: 12px; }
    .sl-entry .sl-dot { position: static; width: 26px; height: 26px; display: inline-flex; margin-right: 4px; border: none; }
    .sl-entry .sl-when { padding-right: 88px; }
    .sl-form { grid-template-columns: 1fr; }
    .sl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .sl-overview-bar { padding: 12px 14px; }
    .sl-table-wrap { display: none; }
    .sl-cards { display: block; padding: 0 14px 6px; }
    .sl-ov-card { border: 1px solid #23304e; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; cursor: pointer; }
    .sl-ov-card .sl-ov-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
    .sl-ov-card .sl-ov-count { font-size: 1.2rem; font-weight: 800; }
    .sl-note { margin: 8px 14px 14px; }
}

/* Row actions: icon-only 38x38 squares (the site's row-action standard). */
.sl-icon-btn { width: 38px; height: 38px; padding: 0 !important; justify-content: center; }

.sl-table .zero { color: #3c4a69; font-weight: 400; }