/* Spolecny vzhled webu (tmavy styl VB330) – nacita ho kazda stranka pres pageHead() v common.php.
   Stranky si v <style> doplnuji jen vlastni prvky. */
:root {
    --bg:        #222222;
    --bar:       #2d2d2d;
    --bar-line:  #3a3a3a;
    --text:      #dcdcdc;
    --text-dim:  #a8a8a8;
    --title:     #c8c8c8;
    --accent:    #3fb54a;
    --gold:      #8c7b3c;
    --warn:      #e8e000;
    --orange:    #ffa62b;
    --err:       #e0453a;
    --err-text:  #ff8a80;
    --blue:      #5ea2ff;
    --grey-sq:   #cfcfcf;
    --th-bg:     #121212;
    --row-a:     #3b3b3b;
    --row-b:     #333333;
    --row-hover: #4a4a4a;
    --input-bg:  #2a2a2a;
    --input-bd:  #5a5a5a;
    --mono:      Consolas, "Courier New", monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: Arial, Helvetica, sans-serif; font-size: 13px;
}
a { color: var(--text); }
a:hover { color: #fff; }

/* ---------- Horni lista ---------- */
.topbar {
    display: flex; align-items: center; gap: 10px; padding-right: 18px;
    height: 50px; background: var(--bar); border-bottom: 1px solid #1a1a1a;
}
.topbar .burger {
    width: 64px; height: 100%; display: flex; align-items: center; justify-content: center; flex: none;
    font-size: 20px; color: var(--text); border-right: 1px solid var(--bar-line); text-decoration: none;
}
.topbar .burger:hover { background: #3a3a3a; }
.topbar .title {
    font-size: 23px; color: var(--title); padding-left: 18px; flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar form { margin: 0; }
.topbar .top-btn {
    background: none; color: var(--text); text-decoration: none; white-space: nowrap; cursor: pointer;
    border: 1px solid var(--gold); padding: 4px 14px; font: inherit; font-size: 13px;
}
.topbar .top-btn:hover:not(:disabled) { background: #3a3a3a; }
.topbar .top-btn:disabled { opacity: .45; cursor: not-allowed; }

.content { padding: 6px 16px 16px 16px; }

/* ---------- Zalozky ---------- */
.tabs {
    display: flex; flex-wrap: wrap; gap: 4px 12px; border-bottom: 1px solid #8a8a8a; margin-bottom: 6px;
    padding: 0 2px; width: fit-content; min-width: 360px; max-width: 100%;
}
.tab {
    background: none; border: none; color: var(--text); cursor: pointer; text-decoration: none;
    font: inherit; font-size: 13px; padding: 3px 8px;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: #fff; }
.tab.active { border-bottom-color: var(--accent); color: #fff; }
.tabs.subtabs .tab { font-size: 12px; }

/* ---------- Souhrnne bloky ---------- */
.summary { display: flex; flex-wrap: wrap; gap: 6px 30px; margin-bottom: 8px; }
.sum-block { min-width: 120px; }
.sum-title {
    font-weight: bold; padding-bottom: 1px; margin-bottom: 3px;
    border-bottom: 1px solid var(--gold); display: flex; align-items: center; gap: 6px;
}
.kv { display: grid; grid-template-columns: max-content auto; justify-content: start; column-gap: 12px; row-gap: 1px; align-items: center; }
.kv .k { color: var(--text-dim); white-space: nowrap; }
.kv .v { white-space: nowrap; }
.kv .v.sqv { display: flex; align-items: center; gap: 8px; }

.sq { display: inline-block; width: 11px; height: 11px; border: 1px solid #111; background: var(--accent); flex: none; vertical-align: -1px; }
.sq.warn   { background: var(--warn); }
.sq.orange { background: var(--orange); }
.sq.err    { background: var(--err); }
.sq.grey   { background: var(--grey-sq); }
.sq.dim    { background: #777; }

/* ---------- Tlacitka a vstupy ---------- */
.btn {
    background: #2a2a2a; color: var(--text); border: 1px solid var(--gold);
    padding: 2px 8px; font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-block;
}
.btn:hover:not(:disabled) { background: #3a3a3a; color: var(--text); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { border-color: var(--accent); }
.btn.danger  { border-color: var(--err); }
.btn.small   { font-size: 12px; padding: 1px 6px; }
.icon-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 0 4px; }
.icon-btn:hover { color: var(--err-text); }

input[type=text], input[type=number], input[type=password], input[type=datetime-local], input[type=time], select, textarea {
    background: var(--input-bg); color: var(--text); color-scheme: dark;
    border: 1px solid var(--input-bd); font: inherit; font-size: 12px; padding: 2px 4px; min-height: 22px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
input.invalid, select.invalid { border-color: var(--err); }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); margin: 0; vertical-align: middle; cursor: pointer; }
input[type=file] { color: var(--text-dim); font: inherit; font-size: 12px; }
input[type=file]::file-selector-button {
    background: #2a2a2a; color: var(--text); border: 1px solid var(--gold);
    padding: 2px 8px; font: inherit; font-size: 12px; cursor: pointer; margin-right: 8px;
}
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }

/* ---------- Texty a stavy ---------- */
.section-label { font-weight: bold; font-size: 11px; margin: 10px 0 2px 0; }
.section-head { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 4px 0; }
.section-head .section-label { margin: 0; }
.hint, .muted { color: var(--text-dim); }
.hint { font-weight: normal; font-size: 11px; }
.msg-err  { color: var(--err-text); font-weight: bold; margin: 6px 0; }
.msg-ok   { color: var(--accent); margin: 6px 0; }
.status-ok   { color: var(--accent); }
.status-warn { color: var(--warn); }
.status-err  { color: var(--err-text); }
.mono { font-family: var(--mono); font-size: 12px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.toolbar label { color: var(--text-dim); }
.panel { border: 1px solid #bdbdbd; background: var(--bg); }

/* Vystup programu / log */
.console {
    margin-top: 8px; padding: 8px 10px; min-height: 20px; max-height: 400px; overflow-y: auto;
    background: #1c1c1c; border: 1px solid #444; color: var(--text); line-height: 1.4;
    font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-word;
}

/* ---------- Tabulky ---------- */
.table-wrap { border: 1px solid #bdbdbd; overflow: auto; background: var(--bg); max-height: 60vh; }
.data-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.data-table thead { position: sticky; top: 0; z-index: 3; }
.data-table th {
    background: var(--th-bg); color: #fff; font-weight: normal; text-align: left;
    padding: 3px 6px; white-space: nowrap;
    border-right: 1px solid var(--gold); border-bottom: 1px solid #555;
}
.data-table thead tr + tr th { padding: 2px 4px; background: #1a1a1a; }
.data-table td {
    padding: 2px 6px; vertical-align: middle; white-space: nowrap;
    border-right: 1px solid var(--gold); border-bottom: 1px solid #2a2a2a;
}
.data-table th:last-child, .data-table td:last-child { border-right: none; }
.data-table tbody tr:nth-child(odd)  { background: var(--row-a); }
.data-table tbody tr:nth-child(even) { background: var(--row-b); }
.data-table tbody tr:hover { background: var(--row-hover); }
.data-table td input[type=text], .data-table td input[type=number], .data-table td select { width: 100%; }
.data-table .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .col-wrap { white-space: normal; }
.empty-row td { text-align: center; padding: 14px; color: var(--text-dim); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: #262626; }
.sort-icon { margin-left: 4px; opacity: .45; font-size: 10px; }
th.sort-asc .sort-icon, th.sort-desc .sort-icon { opacity: 1; color: var(--accent); }
.filter-input { width: 100%; min-width: 50px; }
.filter-input.active { border-color: var(--warn); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #1b1b1b; }
::-webkit-scrollbar-thumb { background: #4a4a4a; }
::-webkit-scrollbar-thumb:hover { background: #5a5a5a; }