body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 20px;
    background-color: #f5f7fa;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

h1 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 30px;
}

h2 {
    color: #3498db;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-top: 30px;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

input, select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}

button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-right: 10px;
    margin-top: 10px;
}

button:hover {
    background-color: #2980b9;
}

button:disabled {
    background-color: #95a5a6;
    cursor: not-allowed;
}

#test-notification {
    background-color: #2ecc71;
}

#test-notification:hover {
    background-color: #27ae60;
}

.status-panel, .results-panel, .notifications-panel {
    margin-top: 30px;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 15px;
    background-color: #f9f9f9;
}

#status-message, #last-check {
    margin-bottom: 10px;
    font-weight: 500;
}

#ferry-data {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #fff;
    border-radius: 4px;
}

#notification-history {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #fff;
    border-radius: 4px;
}

.notification {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    background-color: #e8f4f8;
    border-left: 4px solid #3498db;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 12px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
    font-weight: 600;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #f1f1f1;
}

.help-text {
    font-size: 0.85em;
    color: #7f8c8d;
    margin-top: 5px;
    font-style: italic;
}

.time-range {
    margin-top: 15px;
}

.time-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.time-inputs span {
    font-weight: 500;
}

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    button {
        width: 100%;
        margin-bottom: 10px;
    }
}

.install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #3498db;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.install-banner p {
    margin: 0;
    flex-grow: 1;
}

.install-banner button {
    margin: 0 5px;
    background-color: white;
    color: #3498db;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.install-banner button:hover {
    background-color: #f5f5f5;
}

#close-banner {
    padding: 5px 10px;
    font-size: 16px;
}

/* ===== Direction selector (segmented toggle) ===== */
.direction-toggle {
    display: flex;
    border: 2px solid #3498db;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
}

.direction-btn {
    flex: 1 1 0;
    width: auto;          /* override global button width/margins */
    margin: 0;
    padding: 12px 8px;
    background-color: #fff;
    color: #2c3e50;
    border: none;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.direction-btn + .direction-btn {
    border-left: 2px solid #3498db;
}

.direction-btn:hover {
    background-color: #eaf4fb;
}

.direction-btn .dir-btn-icon {
    font-size: 20px;
    letter-spacing: 1px;
}

.direction-btn .dir-btn-text {
    font-weight: 600;
    font-size: 15px;
}

.direction-btn .dir-btn-sub {
    font-size: 12px;
    color: #7f8c8d;
    font-weight: 400;
}

/* active VK button = blue (to the island) */
#dir-btn-vk.active {
    background-color: #3498db;
    color: #fff;
}
#dir-btn-vk.active .dir-btn-sub { color: #eaf4fb; }

/* active KV button = green (leaving the island) */
#dir-btn-kv.active {
    background-color: #2ecc71;
    color: #fff;
}
#dir-btn-kv.active .dir-btn-sub { color: #eafaf0; }

.direction-btn:focus-visible {
    outline: 3px solid #f1c40f;
    outline-offset: -3px;
    z-index: 1;
}

/* ===== Direction graphic banner ===== */
.direction-banner {
    margin: 0 0 20px;
    padding: 14px 16px 10px;
    border-radius: 8px;
    border: 1px solid #d6e4f0;
    background: linear-gradient(180deg, #eaf4fb 0%, #ffffff 100%);
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.direction-banner .dir-scene {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* scene static parts */
.dir-water   { fill: #aed4ef; }
.dir-wave    { fill: none; stroke: #7fb8e0; stroke-width: 2; opacity: 0.7; }
.dir-mainland rect { fill: #95a5a6; }
.dir-mainland .dir-building { fill: #7f8c8d; }
.dir-island ellipse { fill: #6ab04c; }
.dir-island .dir-trunk { fill: #8d6e63; }
.dir-island .dir-palm  { fill: #2ecc71; }

/* ferry */
.dir-hull  { fill: #2c3e50; }
.dir-deck  { fill: #ecf0f1; stroke: #bdc3c7; stroke-width: 1; }
.dir-cabin { fill: #e74c3c; }
.dir-bow   { stroke: #2c3e50; stroke-width: 3; stroke-linecap: round; }

/* arrow */
.dir-arrow line,
.dir-arrow .dir-arrowhead {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.2s ease;
}

/* banner label */
.dir-banner-label {
    margin-top: 6px;
    font-size: 17px;
    font-weight: 700;
    color: #2c3e50;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.dir-banner-emoji { font-size: 20px; }

/* ferry sits centered in the 320-wide viewBox, nudged onto the water;
   the two state rules re-declare the full transform so the flip pivots
   around the ferry's own center */
.dir-ferry { transition: transform 0.4s ease; }
.direction-banner.dir-vk .dir-ferry { transform: translate(160px, 90px) scaleX(1); }
.direction-banner.dir-kv .dir-ferry { transform: translate(160px, 90px) scaleX(-1); }

/* STATE: to the island (VK) — ferry & arrow point RIGHT, blue accent */
.direction-banner.dir-vk {
    border-color: #3498db;
    background: linear-gradient(180deg, #eaf4fb 0%, #ffffff 100%);
}
.direction-banner.dir-vk .dir-arrow line,
.direction-banner.dir-vk .dir-arrow .dir-arrowhead { stroke: #3498db; }

/* STATE: leaving the island (KV) — ferry & arrow point LEFT, green accent */
.direction-banner.dir-kv {
    border-color: #2ecc71;
    background: linear-gradient(180deg, #eafaf0 0%, #ffffff 100%);
}
.direction-banner.dir-kv .dir-arrow {
    transform: scaleX(-1);
    transform-origin: 160px 0;
    transition: transform 0.4s ease;
}
.direction-banner.dir-kv .dir-arrow line,
.direction-banner.dir-kv .dir-arrow .dir-arrowhead { stroke: #27ae60; }

@media (max-width: 768px) {
    .direction-btn {
        width: auto;          /* keep segmented buttons side-by-side, not stacked full-width */
        margin-bottom: 0;
    }
    .direction-btn .dir-btn-sub { display: none; }
    .dir-banner-label { font-size: 16px; }
}

/* ===== Ferry results (card layout) ===== */
#ferry-data {
    max-height: 460px;
    background-color: #f9fbfd;
}

.ferry-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    padding: 4px 2px 12px;
    border-bottom: 1px solid #e3e9ef;
    margin-bottom: 12px;
}
.ferry-summary-dir  { font-weight: 700; color: #2c3e50; font-size: 16px; }
.ferry-summary-meta { color: #7f8c8d; font-size: 13px; }

.ferry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.ferry-card {
    border: 1px solid #e3e9ef;
    border-left: 5px solid #95a5a6;   /* state colour, overridden below */
    border-radius: 8px;
    padding: 12px 14px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.ferry-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.ferry-time { font-size: 22px; font-weight: 700; color: #2c3e50; }

.ferry-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 8px;
    border-radius: 999px;
    color: #fff;
    background-color: #95a5a6;
}

.ferry-ship {
    font-size: 12px;
    color: #7f8c8d;
    margin: 2px 0 10px;
}

.ferry-cars {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 10px;
}
.ferry-cars .cars-ico   { font-size: 18px; }
.ferry-cars .cars-num   { font-size: 26px; font-weight: 800; line-height: 1; }
.ferry-cars .cars-label { font-size: 12px; color: #7f8c8d; }

.ferry-others {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding-top: 8px;
    border-top: 1px dashed #e3e9ef;
}
.cap-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #34495e;
}
.cap-ico { font-size: 14px; }

/* state colours: left border, badge, and the big car number */
.ferry-card.state-available { border-left-color: #2ecc71; }
.ferry-card.state-available .ferry-badge { background-color: #2ecc71; }
.ferry-card.state-available .cars-num    { color: #27ae60; }

.ferry-card.state-limited   { border-left-color: #f39c12; }
.ferry-card.state-limited .ferry-badge   { background-color: #f39c12; }
.ferry-card.state-limited .cars-num      { color: #e67e22; }

.ferry-card.state-full      { border-left-color: #e74c3c; }
.ferry-card.state-full .ferry-badge      { background-color: #e74c3c; }
.ferry-card.state-full .cars-num         { color: #c0392b; }

.ferry-card.state-unknown   { border-left-color: #95a5a6; }
.ferry-card.state-unknown .cars-num      { color: #95a5a6; }