body{
    margin:0;
    padding:20px;
    font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color:#e0e0e0;
    background: #030611;
    overflow-y:auto;
}

:root{
    --panel-bg: rgba(7, 11, 24, 0.82);
    --panel-border: rgba(127, 181, 255, 0.16);
    --panel-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    --table-bg: rgba(0, 0, 0, 0.55);
    --table-border: rgba(131, 144, 172, 0.28);
    --table-head: rgba(16, 24, 32, 0.94);
    --slot-on: rgba(64, 160, 74, 0.38);
    --slot-on-strong: rgba(71, 173, 81, 0.52);
    --current-slot: #ff4d57;
    --text-muted: #9fb2c9;
    --accent: #7fb5ff;
}

h2, h3{
    letter-spacing: 0.02em;
}

hr{
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(127, 181, 255, 0.3), transparent);
    margin: 18px 0;
}

input, select, button{
    font: inherit;
}

input, select{
    background: rgba(8, 14, 24, 0.92);
    color: #f2f6fb;
    border: 1px solid rgba(127, 181, 255, 0.24);
    border-radius: 8px;
    padding: 7px 10px;
}

button{
    background: linear-gradient(180deg, rgba(248, 249, 251, 0.98), rgba(214, 223, 231, 0.92));
    color: #08111b;
    border: 0;
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

button:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

button:active{
    transform: translateY(0);
}

form{
    margin: 8px 0;
}

.page-grid{
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.panel{
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(10px);
}

.panel.side-panel{
    flex: 1;
    min-width: 300px;
    padding: 18px 20px;
}

.panel.main-panel{
    flex: 2;
    min-width: 720px;
    padding: 18px 20px;
}

.status-chip{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.status-chip strong{
    color: #f5fbff;
}

/* ========================= */
/* TABULKY */
/* ========================= */

.tables {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.tables table {
    min-width: 250px;
}



table{
    border-collapse:collapse;
    background:var(--table-bg);
    width: 100%;
}

th,td{
    padding:8px 10px;
    border:1px solid var(--table-border);
}

th{
    background:var(--table-head);
    color: #eef5ff;
}

tbody tr:hover td{
    background: rgba(255, 255, 255, 0.035);
}

.price-table td,
.price-table th{
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.price-table tr.slot-on td{
    background: var(--slot-on);
}

.price-table tr.slot-on td:nth-child(-n+5){
    background: var(--slot-on-strong);
}

.price-table tr.current-slot td{
    box-shadow: inset 0 2px 0 var(--current-slot), inset 0 -2px 0 var(--current-slot);
}

.price-table tr.current-slot td:first-child{
    box-shadow: inset 2px 0 0 var(--current-slot), inset 0 2px 0 var(--current-slot), inset 0 -2px 0 var(--current-slot);
}

.price-table tr.current-slot td:last-child{
    box-shadow: inset -2px 0 0 var(--current-slot), inset 0 2px 0 var(--current-slot), inset 0 -2px 0 var(--current-slot);
}

.price-table .reason-pill{
    display: inline-block;
    min-width: 106px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #f2fbf5;
    background: rgba(255, 255, 255, 0.08);
}

.price-table .reason-pill.is-off{
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
}

.price-table .reason-pill.is-solar{
    color: #fff7cf;
    background: linear-gradient(180deg, rgba(255, 205, 72, 0.4), rgba(196, 128, 10, 0.3));
    border: 1px solid rgba(255, 214, 102, 0.38);
}

.price-table .reason-pill.is-price{
    color: #dff2ff;
    background: linear-gradient(180deg, rgba(72, 149, 239, 0.38), rgba(25, 93, 171, 0.28));
    border: 1px solid rgba(127, 181, 255, 0.34);
}

.price-table .reason-pill.is-manual{
    color: #e9ddff;
    background: linear-gradient(180deg, rgba(145, 109, 255, 0.38), rgba(83, 56, 166, 0.28));
    border: 1px solid rgba(188, 160, 255, 0.3);
}

.price-table .reason-pill.is-override-plus{
    color: #eafff0;
    background: linear-gradient(180deg, rgba(39, 201, 120, 0.42), rgba(20, 132, 76, 0.32));
    border: 1px solid rgba(81, 223, 146, 0.34);
}

.price-table .reason-pill.is-override-minus{
    color: #ffe5e7;
    background: linear-gradient(180deg, rgba(255, 94, 109, 0.42), rgba(150, 37, 49, 0.3));
    border: 1px solid rgba(255, 120, 132, 0.35);
}

.price-table .smart-state{
    font-size: 18px;
}

.price-table .action-cell button{
    min-width: 74px;
}

.chart-shell{
    margin: 14px 0 20px;
    padding: 14px;
    border-radius: 18px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    box-shadow: var(--panel-shadow);
}

.chart-shell canvas{
    width: 100% !important;
    height: auto !important;
}

.chart-notes{
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(127, 181, 255, 0.22);
    background: rgba(6, 11, 20, 0.75);
    line-height: 1.55;
    font-size: 14px;
}

.chart-notes .note-ts{
    display: inline-block;
    margin-right: 8px;
    color: #f0f6ff;
    font-weight: 600;
}

.chart-notes .note-row{
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
    color: #dbe8f7;
}

.chart-notes .note-dot{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.toolbar-form{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    box-shadow: var(--panel-shadow);
}

.toolbar-form b{
    color: #f0f6ff;
}

.muted{
    color: var(--text-muted);
}

a{
    color:#7fb5ff;
    text-decoration:none;
}

a:hover{
    color:#ffffff;
}



@media (max-width: 980px){
    .panel.main-panel{
        min-width: 100%;
    }

    .price-table{
        font-size: 13px;
    }

    th, td{
        padding: 7px 8px;
    }
}

.nav-bar{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 18px;
    padding: 14px;
}

.nav-button{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(127, 181, 255, 0.16);
    color: #eef6ff;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.nav-button:hover{
    transform: translateY(-1px);
    border-color: rgba(127, 181, 255, 0.4);
    background: rgba(127, 181, 255, 0.1);
}

.nav-button.active{
    background: linear-gradient(180deg, rgba(127, 181, 255, 0.22), rgba(127, 181, 255, 0.08));
    border-color: rgba(127, 181, 255, 0.45);
}

.nav-icon{
    font-size: 18px;
}

.smart-grid{
    align-items: stretch;
}

.smart-side-panel,
.smart-main-panel{
    min-height: 100%;
}

.smart-header{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.status-stack{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.button-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.button-grid form,
.button-grid button{
    width: 100%;
}

.button-danger{
    background: linear-gradient(180deg, rgba(255, 214, 214, 0.98), rgba(255, 175, 175, 0.92));
}

.info-card{
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(10, 17, 29, 0.82);
    border: 1px solid rgba(127, 181, 255, 0.18);
}

.panel-soft{
    padding: 16px;
    border-radius: 16px;
    background: rgba(5, 10, 18, 0.5);
    border: 1px solid rgba(127, 181, 255, 0.12);
}

.smart-form{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.field-row{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-row span{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.field-help{
    color: var(--text-muted);
    line-height: 1.5;
    font-size: 13px;
}

.smart-stats{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.stat-card{
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(8, 13, 24, 0.84);
    border: 1px solid rgba(127, 181, 255, 0.16);
}

.stat-label{
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.weather-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.weather-card p{
    margin: 8px 0;
}

.highlight-card{
    background: linear-gradient(180deg, rgba(30, 48, 18, 0.72), rgba(10, 17, 29, 0.9));
}

.smart-forecast-table td,
.smart-forecast-table th{
    text-align: center;
}

.page-stack{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.section-panel{
    padding: 18px 20px;
}

.link-strip{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.link-pill{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(127, 181, 255, 0.14);
}

.log-terminal{
    background: rgba(4, 12, 8, 0.92);
    color: #9dffcb;
    padding: 12px;
    height: 300px;
    overflow: auto;
    font-family: Consolas, monospace;
    font-size: 13px;
    border-radius: 14px;
    border: 1px solid rgba(86, 219, 149, 0.14);
    box-shadow: inset 0 0 24px rgba(47, 154, 93, 0.08);
}

.admin-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 10px 14px;
}

.admin-bar strong{
    color: #f4fbff;
}

.admin-bar form{
    margin: 0;
}

.admin-bar-actions{
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 980px){
    .nav-bar{
        padding: 12px;
    }

    .nav-button{
        flex: 1 1 140px;
        justify-content: center;
    }

    .smart-header{
        flex-direction: column;
    }
}