/* ============================================================
DrCars ERP - jediny globalni stylesheet
============================================================ */
:root {
--bg: #ffffff;
--bg-2: #f6f7f8;
--bg-3: #eceef1;
--bg-4: #e4e6ea;
--fg: #111418;
--fg-2: #4a5057;
--fg-3: #7a828c;
--fg-4: #9aa1a9;
--line: #dde1e6;
--line-2: #c7ccd3;
--line-3: #b0b6be;
--accent: #1f6feb;
--accent-2: #1858c4;
--accent-bg: #e8f0fe;
--ok: #1a7f37;
--ok-bg: #e6f4ea;
--warn: #b26a00;
--warn-bg:#fff4e5;
--err: #b42318;
--err-bg:#fdecea;
--info: #0a6e8c;
--info-bg:#e3f5fa;
--lift: #f3c13a;
--vip: #a044cc;
--row-h: 28px;
--row-h-sm: 24px;
--gap: 6px;
--gap-lg: 12px;
--radius: 4px;
--font: -apple-system, "Segoe UI", "Inter", system-ui, sans-serif;
--mono: ui-monospace, "JetBrains Mono", Consolas, "Courier New", monospace;
--fs: 13px;
--fs-sm: 12px;
--fs-xs: 11px;
--fs-lg: 15px;
--sidebar-w: 210px;
--sidebar-w-collapsed: 48px;
--topbar-h: 40px;
color-scheme: light;
}
/* Dark theme (manualni prepinani pres data-theme="dark" na ). */
:root[data-theme="dark"] {
--bg: #15181c;
--bg-2: #1a1d21;
--bg-3: #22262b;
--bg-4: #2d3239;
--fg: #e6e8eb;
--fg-2: #b4b8be;
--fg-3: #868c94;
--fg-4: #5d636b;
--line: #2d3239;
--line-2: #3a404a;
--line-3: #4d5460;
--accent: #4c8dff;
--accent-2: #6ea2ff;
--accent-bg: #1a2b4a;
--ok: #3fb950;
--ok-bg: #12281a;
--warn: #d29922;
--warn-bg:#2b2418;
--err: #f85149;
--err-bg:#2d1a1a;
--info: #58a6ff;
--info-bg:#12243a;
color-scheme: dark;
}
* { box-sizing: border-box; }
html, body, #app { height: 100%; margin: 0; }
body {
font-family: var(--font);
font-size: var(--fs);
color: var(--fg);
background: var(--bg-2);
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
/* ============================================================
LOGIN
============================================================ */
.login-wrap {
display: grid;
place-items: center;
min-height: 100vh;
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-4) 100%);
position: relative;
}
.login-theme { position: absolute; top: 16px; right: 16px; font-size: 16px; }
.login-card {
width: 340px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
padding: 28px 26px;
box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.login-card h1 {
margin: 0 0 4px; font-size: 22px; letter-spacing: -.01em;
}
.login-card .login-brand { text-align: center; margin: 0 0 10px; }
.login-card .login-brand img { height: 64px; max-width: 100%; }
.login-card .sub { color: var(--fg-3); margin-bottom: 18px; font-size: 12px; }
.login-card .form-row { margin-bottom: 10px; }
.login-card label { display:block; font-size: 11px; color: var(--fg-3); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .04em;}
.login-card input { width: 100%; height: 34px; padding: 0 10px; border:1px solid var(--line-2); border-radius: var(--radius); background: var(--bg); }
.login-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.login-card .err { color: var(--err); font-size: 12px; margin: 6px 0; }
.login-card .btn { width: 100%; margin-top: 10px; }
/* Cash payment dialog */
.cash-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cash-opt {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 6px;
cursor: pointer; transition: border-color .12s, background .12s;
background: var(--bg);
}
.cash-opt:hover { border-color: var(--accent); }
.cash-opt.active { border-color: var(--accent); background: var(--accent-bg); }
.cash-opt input[type="radio"] { margin: 0; width: 16px; height: 16px; accent-color: var(--accent); flex: 0 0 auto; }
.cash-opt-main { flex: 1; min-width: 0; }
.cash-opt-title { font-weight: 600; font-size: 13px; line-height: 1.2; }
.cash-opt-sub { color: var(--fg-3); font-size: 11px; margin-top: 2px; }
.cash-opt-amount { font-weight: 700; font-size: 14px; white-space: nowrap; }
.cash-opt-input { width: 130px; height: 30px; padding: 0 10px; text-align: right;
border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg); font: inherit; }
.cash-opt-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.cash-note { padding: 10px 12px; background: var(--bg-2); border-radius: 4px; font-size: 12px; color: var(--fg-2); }
/* Pagination */
.pagination {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 12px; border-top: 1px solid var(--line); background: var(--bg-2);
gap: 12px; flex-wrap: wrap;
}
.pagination .pg-nav { display: flex; gap: 3px; flex-wrap: wrap; }
.pagination .btn.sm { min-width: 28px; padding: 4px 8px; }
/* Ukoly - vizualni zaskrnuti hotovych */
.table tr.done td { opacity: .55; }
.table tr.done td:first-child { opacity: 1; }
/* Ukoly - Kanban styl */
.tasks-kanban {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 4px;
}
@media (max-width: 1200px) { .tasks-kanban { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .tasks-kanban { grid-template-columns: 1fr; } }
.kb-col {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
display: flex; flex-direction: column;
min-height: 200px;
transition: background .12s, border-color .12s;
}
.kb-col.dragover { background: var(--accent-bg); border-color: var(--accent); }
.kb-col-hd {
padding: 10px 12px;
border-bottom: 1px solid var(--line);
display: flex; justify-content: space-between; align-items: center;
font-weight: 700; font-size: 13px;
background: var(--bg);
border-radius: 6px 6px 0 0;
}
.kb-col-bd {
padding: 8px;
display: flex; flex-direction: column; gap: 8px;
flex: 1;
min-height: 120px;
}
.kb-empty { text-align: center; color: var(--fg-3); font-size: 11px; padding: 14px 0; }
.kb-card {
background: var(--bg);
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
border-radius: 4px;
padding: 8px 10px;
cursor: grab;
font-size: 12px;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
transition: box-shadow .1s, transform .1s;
}
.kb-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.12); transform: translateY(-1px); }
.kb-card.dragging { opacity: .5; cursor: grabbing; }
.kb-card.err { border-left-color: #c0392b; }
.kb-card.done { opacity: .7; border-left-color: #2a7a3b; }
.kb-card.done .kb-card-title { text-decoration: line-through; color: var(--fg-3); }
.kb-card-title { font-weight: 600; font-size: 13px; line-height: 1.3; }
.kb-card-meta { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-top: 5px; }
.kb-card-meta .pill.xs { font-size: 10px; padding: 1px 5px; }
.pill.xs { font-size: 10px; padding: 1px 5px; }
/* Poznamky - sticky note look */
.notes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
padding: 4px 2px;
}
.note-card {
position: relative;
padding: 14px 14px 40px;
min-height: 160px;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0,0,0,.08), inset 0 -2px 0 rgba(0,0,0,.04);
cursor: pointer;
transition: transform .12s, box-shadow .12s;
display: flex; flex-direction: column;
font-size: 13px;
color: #333;
overflow: hidden;
}
.note-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.note-card.pinned { outline: 2px solid #d97706; outline-offset: -2px; }
.note-hd {
display: flex; align-items: flex-start; gap: 6px;
margin-bottom: 6px;
}
.note-title {
flex: 1; font-weight: 700; font-size: 14px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.note-pin {
background: transparent; border: 0; cursor: pointer; font-size: 16px;
padding: 0; line-height: 1; opacity: .7;
}
.note-pin:hover { opacity: 1; transform: scale(1.2); }
.note-body {
flex: 1;
white-space: pre-wrap;
word-break: break-word;
font-size: 13px; line-height: 1.4;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 8;
-webkit-box-orient: vertical;
}
.note-ft {
position: absolute; bottom: 8px; left: 14px; right: 14px;
display: flex; gap: 6px; align-items: center; justify-content: space-between;
}
.note-ft .btn { padding: 2px 6px; }
.note-meta { padding-top: 6px; border-top: 1px dashed rgba(0,0,0,.15); margin-top: 6px; font-size: 11px; }
/* Color swatches ve form */
.color-swatches { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.color-swatches .swatch {
width: 28px; height: 28px; border-radius: 50%;
border: 2px solid rgba(0,0,0,.15); cursor: pointer;
transition: transform .1s;
}
.color-swatches .swatch:hover { transform: scale(1.15); }
.color-swatches .swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
/* Mzdy (payroll) — pole v bunkach presne zarovnana */
.payroll-table td.num input[type="number"] {
width: 100%;
height: 28px;
padding: 0 6px;
text-align: right;
border: 1px solid var(--line-2);
border-radius: 4px;
background: var(--bg);
font: inherit;
}
.payroll-table td.num input[type="number"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-bg);
}
.payroll-table .payroll-rate {
display: flex; align-items: center; gap: 4px;
}
.payroll-table .payroll-rate input {
flex: 1;
}
.payroll-table .payroll-rate .btn { flex: 0 0 auto; }
/* Aktivni mechanik badge v topbaru (pro workshop ucet) */
.active-mechanic-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 12px; margin: 0 8px;
background: var(--bg-2);
border: 2px solid var(--mc, var(--accent));
border-radius: 16px;
font-size: 13px; font-weight: 600; color: var(--fg);
cursor: pointer; transition: background .12s;
}
.active-mechanic-badge:hover { background: var(--bg); }
.active-mechanic-badge.empty { border-color: #c0392b; color: #c0392b; background: #fdecea; animation: pulse 1.6s ease-in-out infinite; }
.active-mechanic-badge .amb-dot {
width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .6 } }
/* Mechanic picker (landing stranka pro workshop) */
.mechanic-picker-wrap {
min-height: 100vh;
display: grid; place-items: center;
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
padding: 40px 20px;
}
.mechanic-picker-card {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
padding: 40px;
max-width: 880px; width: 100%;
box-shadow: 0 4px 28px rgba(0,0,0,.06);
text-align: center;
}
.mechanic-picker-card .mp-logo { height: 56px; margin: 0 auto 12px; display: block; }
.mechanic-picker-card h1 { font-size: 24px; margin: 0 0 4px; }
.mechanic-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 14px;
margin-top: 20px;
}
.mechanic-tile {
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 22px 14px;
background: var(--bg);
border: 2px solid var(--line);
border-radius: 10px;
cursor: pointer;
transition: transform .12s, border-color .12s, box-shadow .12s;
font: inherit; color: inherit;
}
.mechanic-tile:hover {
border-color: var(--mc);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.mechanic-tile .mt-avatar {
width: 64px; height: 64px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 22px;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.mechanic-tile .mt-name {
font-size: 14px; font-weight: 600; color: var(--fg);
}
/* Stav firmy - velky denni prehled na dashboardu */
.status-board {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-bottom: var(--gap-lg);
}
@media (max-width: 1400px) { .status-board { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .status-board { grid-template-columns: repeat(2, 1fr); } }
.status-tile {
position: relative;
padding: 14px 16px;
background: var(--bg);
border: 1.5px solid var(--line);
border-radius: 8px;
cursor: default;
transition: transform .12s, box-shadow .12s, border-color .12s;
}
.status-tile[onclick], .status-tile:hover {
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.status-tile.ok { border-color: #2a7a3b; background: linear-gradient(180deg, #f2faf4 0%, var(--bg) 100%); }
.status-tile.warn { border-color: #d97706; background: linear-gradient(180deg, #fff8ee 0%, var(--bg) 100%); }
.status-tile.err { border-color: #c0392b; background: linear-gradient(180deg, #fdecea 0%, var(--bg) 100%); }
.status-icon { font-size: 22px; line-height: 1; margin-bottom: 6px; }
.status-label { font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.status-value { font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.status-sub { font-size: 11px; color: var(--fg-3); margin-top: 6px; line-height: 1.4; }
.status-sub .err { color: #c0392b; font-weight: 600; }
/* ============================================================
LAYOUT
============================================================ */
.app {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
grid-template-rows: var(--topbar-h) 1fr;
height: 100vh;
}
.app.collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
.app.workshop { grid-template-columns: 1fr; }
.app.workshop .topbar { grid-column: 1 / 2; }
.app.workshop .main { grid-column: 1 / 2; }
.topbar {
grid-column: 1 / 3;
display: flex;
align-items: center;
gap: var(--gap-lg);
padding: 0 var(--gap-lg);
background: var(--bg);
border-bottom: 1px solid var(--line);
z-index: 5;
}
.topbar .logo {
display: flex;
align-items: center;
padding-right: 12px;
text-decoration: none;
}
.topbar .logo img { height: 24px; display: block; }
.topbar .search {
flex: 1; max-width: 520px; position: relative;
}
.topbar .search input {
width: 100%; height: 28px; padding: 0 12px 0 28px;
border:1px solid var(--line-2); border-radius: 14px; background: var(--bg-2);
}
.topbar .search input:focus { outline: none; background: var(--bg); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.topbar .search .ico {
position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
width: 14px; height: 14px; color: var(--fg-3);
}
.topbar .spacer { flex: 1; }
.topbar .user {
display: flex; align-items: center; gap: 8px; padding: 0 8px;
}
.topbar .user .avatar {
width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff;
display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.topbar .bell {
position: relative; width: 28px; height: 28px; display: grid; place-items: center;
border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg);
}
.topbar .bell .count {
position: absolute; top: -4px; right: -4px; background: var(--err); color: #fff;
min-width: 14px; height: 14px; border-radius: 8px; padding: 0 3px;
font-size: 9px; font-weight: 700; display: grid; place-items: center;
}
.sidebar {
background: var(--bg);
border-right: 1px solid var(--line);
overflow-y: auto;
padding: 6px 0;
}
.sidebar .group {
padding: 10px 12px 4px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--fg-4);
}
.sidebar a.item {
display: flex; align-items: center; gap: 8px;
padding: 6px 12px; color: var(--fg-2);
text-decoration: none; font-size: 13px; border-left: 2px solid transparent;
}
.sidebar a.item:hover { background: var(--bg-2); color: var(--fg); text-decoration: none; }
.sidebar a.item.active {
background: var(--accent-bg); color: var(--accent);
border-left-color: var(--accent); font-weight: 600;
}
.sidebar a.item .ico { width: 16px; text-align: center; }
.sidebar a.item .badge {
margin-left: auto; background: var(--err); color: #fff;
padding: 1px 6px; border-radius: 10px; font-size: 10px; font-weight: 700;
}
.app.collapsed .sidebar .group,
.app.collapsed .sidebar a.item span.label { display: none; }
.app.collapsed .sidebar a.item { justify-content: center; padding: 8px 0; }
.main {
overflow: auto;
padding: var(--gap-lg);
min-width: 0; /* grid-item: bez tohoto se flex-containery uvnitr roztahnou a nescrolluji horizontalne */
}
/* ============================================================
CARDS / PANELS
============================================================ */
.card {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
margin-bottom: var(--gap-lg);
}
.card-hd {
display: flex; align-items: center; gap: 8px;
padding: 6px var(--gap-lg);
background: var(--bg-2);
border-bottom: 1px solid var(--line);
font-weight: 600; font-size: 12px; color: var(--fg-2);
text-transform: uppercase; letter-spacing: .03em;
}
.card-hd .sub { color: var(--fg-3); font-weight: 400; text-transform: none; letter-spacing: 0; }
.card-bd { padding: var(--gap-lg); }
.card-bd.flush { padding: 0; }
.page-hd {
display: flex; align-items: center; gap: var(--gap-lg);
margin-bottom: var(--gap-lg);
}
.page-hd h1 {
margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em;
}
.page-hd .count { color: var(--fg-3); font-size: 12px; }
.page-hd .sp { flex: 1; }
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 26px; padding: 0 10px;
border: 1px solid var(--line-2); background: var(--bg); color: var(--fg);
border-radius: var(--radius);
font-size: var(--fs);
user-select: none;
white-space: nowrap;
}
.btn:hover { background: var(--bg-2); }
.btn:active { background: var(--bg-3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-2); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.warn { background: var(--warn); border-color: var(--warn); color: #fff; }
.btn.danger { background: var(--err); border-color: var(--err); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--bg-2); }
.btn.ghost.danger { background: transparent; border-color: transparent; color: var(--err); }
.btn.ghost.danger:hover { background: var(--err); color: #fff; }
.btn.sm { height: 22px; font-size: var(--fs-sm); padding: 0 7px; }
.btn.lg { height: 34px; padding: 0 14px; }
.btn.icon { width: 26px; padding: 0; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; border-right: none; }
.btn-group .btn:first-child { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); }
.btn-group .btn:last-child { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); border-right: 1px solid var(--line-2); }
.btn-group .btn.active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
/* ============================================================
FORMS
============================================================ */
.form {
display: grid;
grid-template-columns: 150px 1fr;
gap: var(--gap) var(--gap-lg);
align-items: center;
}
.form label { color: var(--fg-2); font-size: 12px; }
.form .full { grid-column: 1 / 3; }
.form input:not([type="checkbox"]):not([type="radio"]), .form select, .form textarea {
width: 100%; height: 26px; padding: 0 8px;
border: 1px solid var(--line-2); border-radius: var(--radius);
background: var(--bg);
}
.form textarea { min-height: 60px; padding: 6px 8px; height: auto; }
.form input:focus, .form select:focus, .form textarea:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg);
}
/* Checkbox/radio ve .form gridu: zachovat prirozenou velikost a nesahat stylem */
.form input[type="checkbox"], .form input[type="radio"] {
width: 16px; height: 16px; margin: 0; padding: 0;
vertical-align: middle; accent-color: var(--accent); cursor: pointer;
flex: 0 0 auto;
}
/* Holý uvnitř .form — inline layout */
.form label:has(> input[type="checkbox"]),
.form label:has(> input[type="radio"]) {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--fg); cursor: pointer; user-select: none;
}
.form-row { display: flex; gap: var(--gap); }
.form-row > * { flex: 1; }
.input, .select, .textarea {
height: 26px; padding: 0 8px;
border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg);
}
.input:focus, .select:focus, .textarea:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg);
}
.form input.invalid, .form select.invalid, .form textarea.invalid,
input.invalid, select.invalid, textarea.invalid {
border-color: #e04a4a; background: #fff5f5;
}
/* Kompaktni check/radio ve formulari faktury */
.inv-check {
display: inline-flex !important; align-items: center; gap: 8px;
font-size: 13px; cursor: pointer; user-select: none;
padding: 4px 0;
}
.inv-check input[type="checkbox"] {
width: 16px !important; height: 16px !important; margin: 0; flex: 0 0 auto;
cursor: pointer; accent-color: var(--accent);
}
.inv-check span { flex: 1; }
.inv-radio {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; cursor: pointer; user-select: none;
padding: 6px 12px; border: 1.5px solid var(--line);
border-radius: 5px; transition: background .1s, border-color .1s;
}
.inv-radio:hover { border-color: var(--accent); }
.inv-radio.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.inv-radio input[type="radio"] {
width: 14px !important; height: 14px !important; margin: 0; flex: 0 0 auto;
cursor: pointer; accent-color: var(--accent);
}
/* ============================================================
SHOP view (dilna - pro mechaniky)
============================================================ */
.shop .shop-search {
flex: 1; max-width: 460px; height: 34px; padding: 0 12px;
font-size: 15px; border: 2px solid var(--line); border-radius: 6px;
background: var(--bg); margin: 0 10px;
}
.shop .shop-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.shop .shop-running-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; padding: 8px 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; align-items: center; }
.shop .shop-running-bar .pill { font-size: 11px; padding: 3px 8px; font-family: var(--mono); font-weight: 600; }
.shop .shop-active {
background: #fff8e0; border: 2px solid #f3c13a; border-radius: 8px;
padding: 16px 20px; margin-bottom: 18px;
}
.shop .shop-active-hd { display: flex; align-items: center; gap: 24px; }
.shop .shop-active-hd > div:first-child { flex: 1; }
.shop .shop-plate {
display: inline-block; background: #f3c13a; color: #000;
font-size: 28px; font-weight: 800; padding: 3px 14px; border-radius: 4px; letter-spacing: 1px;
}
.shop .shop-clock {
font-family: var(--mono); font-size: 46px; font-weight: 700; letter-spacing: 1px;
color: #2a7a3b; background: #fff; padding: 6px 18px; border-radius: 6px; border: 1px solid #cfe5c9;
}
.shop .shop-complaint {
margin-top: 10px; padding: 8px 12px; background: #fff; border-radius: 4px;
font-size: 14px; color: var(--fg-2); border-left: 3px solid #f3c13a;
}
.shop .shop-btn {
font-size: 20px; font-weight: 700; padding: 12px 28px;
border-radius: 6px; border: 0; cursor: pointer; color: #fff; letter-spacing: .5px;
transition: transform .05s;
}
.shop .shop-btn:active { transform: scale(.97); }
.shop .shop-btn.start { background: #2a7a3b; }
.shop .shop-btn.start:hover { background: #1f5d2d; }
.shop .shop-btn.stop { background: #c0392b; }
.shop .shop-btn.stop:hover { background: #8e2a20; }
.shop-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 14px;
}
.shop-card {
background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
min-height: 180px;
}
.shop-card.mine { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.shop-card.running { border-color: #2a7a3b; }
.shop-card.active { background: #fff8e0; border-color: #f3c13a; }
.shop-card-top { display: flex; align-items: center; gap: 8px; }
.shop-card-top .plate {
background: #f3c13a; color: #000; font-weight: 800; padding: 2px 8px;
border-radius: 3px; font-size: 14px; letter-spacing: .5px;
}
.shop-car { font-weight: 600; font-size: 15px; }
.shop-client { }
.shop-compl { font-size: 13px; color: var(--fg-2); flex: 1; }
.shop-foot { display: flex; justify-content: space-between; align-items: center; }
.shop-card .shop-btn { width: 100%; font-size: 16px; padding: 10px; margin-top: 6px; }
.shop-card .shop-btn.sm { width: auto; font-size: 12px; padding: 4px 10px; margin: 0; }
.shop-runners {
display: flex; flex-direction: column; gap: 4px;
background: #eaf7ec; border: 1px solid #c7e8cc; border-radius: 4px;
padding: 6px 8px; margin-top: 4px;
}
.shop-runner { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.shop-runner .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.mech-picker-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 14px;
}
.mech-btn {
min-height: 110px; padding: 16px 12px;
background: var(--bg); border: 3px solid var(--accent); border-radius: 10px;
cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center;
gap: 6px; transition: transform .05s, box-shadow .1s;
font-family: inherit;
}
.mech-btn:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.mech-btn:active { transform: scale(.97); }
.mech-btn.busy { background: #fff4e0; border-style: dashed; }
.mech-btn .name { font-size: 20px; font-weight: 700; letter-spacing: .3px; }
.mech-btn .busy-info { color: #c0392b; font-weight: 600; }
.search-box {
height: 26px; padding: 0 8px 0 26px;
border: 1px solid var(--line-2); border-radius: var(--radius);
background: var(--bg) url("data:image/svg+xml;utf8,") no-repeat 8px center;
width: 220px;
}
/* ============================================================
TABLES
============================================================ */
.table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--bg);
}
.table th, .table td {
height: var(--row-h);
padding: 0 8px;
border-bottom: 1px solid var(--line);
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 320px;
}
.table th {
position: sticky;
top: 0;
background: var(--bg-2);
color: var(--fg-2);
font-weight: 600;
font-size: var(--fs-sm);
border-bottom: 1px solid var(--line-2);
z-index: 1;
user-select: none;
}
.table tbody tr:hover td { background: var(--bg-2); cursor: pointer; }
.table tbody tr.selected td { background: var(--accent-bg); }
.table .num { text-align: right; font-family: var(--mono); }
.table .narrow { width: 1%; }
.table tr.lift > td:first-child { box-shadow: inset 3px 0 0 var(--lift); }
.table tr.err > td:first-child { box-shadow: inset 3px 0 0 var(--err); }
.table tr.ok > td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.table-wrap {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: auto;
max-height: calc(100vh - 160px);
}
/* ============================================================
PILLS / BADGES
============================================================ */
.pill {
display: inline-block; padding: 1px 7px;
border-radius: 10px;
font-size: var(--fs-xs);
line-height: 16px;
font-weight: 600;
border: 1px solid var(--line-2);
background: var(--bg-2);
color: var(--fg-2);
}
.pill.ok { background: var(--ok-bg); border-color: #b7dfc2; color: var(--ok); }
.pill.warn { background: var(--warn-bg); border-color: #ffd9a8; color: var(--warn); }
.pill.err { background: var(--err-bg); border-color: #f4b6af; color: var(--err); }
.pill.info { background: var(--info-bg); border-color: #a7d9e6; color: var(--info); }
.pill.acc { background: var(--accent-bg);border-color: #b7cefb; color: var(--accent); }
.pill.vip { background: #f7ecfb; border-color: #d9b5e6; color: var(--vip); }
.pill.lg { font-size: var(--fs-sm); padding: 2px 10px; }
.status-prijato { background: #eceef1; color: var(--fg-2); border-color: var(--line-2); }
.status-diagnostika { background: var(--info-bg); color: var(--info); border-color: #a7d9e6; }
.status-nabidnuto { background: #ede7f6; color: #5e35b1; border-color: #d1c4e9; }
.status-ceka_na_schvaleni{ background: var(--warn-bg); color: var(--warn); border-color: #ffd9a8; }
.status-ceka_na_dily { background: var(--warn-bg); color: var(--warn); border-color: #ffd9a8; }
.status-v_oprave { background: var(--accent-bg); color: var(--accent); border-color: #b7cefb; }
.status-blokovano { background: var(--err-bg); color: var(--err); border-color: #f4b6af; }
.status-hotovo { background: var(--ok-bg); color: var(--ok); border-color: #b7dfc2; }
.status-fakturovano { background: var(--ok-bg); color: var(--ok); border-color: #b7dfc2; }
.status-zruseno { background: var(--bg-3); color: var(--fg-3); border-color: var(--line-2); text-decoration: line-through; }
/* ============================================================
TIMERS / CLOCK
============================================================ */
.timer {
display: inline-flex; align-items: center; gap: 8px;
height: 28px; padding: 0 12px;
border: 1px solid var(--line-2); border-radius: var(--radius);
background: var(--bg); font-family: var(--mono);
font-size: 14px;
font-weight: 600;
}
.timer .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--fg-4);
}
.timer.running { background: #f7fff3; border-color: var(--ok); color: var(--ok); }
.timer.running .dot { background: var(--ok); animation: pulse 1s infinite; }
.timer.locked { opacity: .5; cursor: not-allowed; }
.timer.big { height: 36px; font-size: 18px; padding: 0 16px; }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.35 } }
/* ============================================================
WO detail layout
============================================================ */
.wo-top {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--gap-lg);
align-items: center;
padding: 10px var(--gap-lg);
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
margin-bottom: var(--gap-lg);
}
.wo-top .title {
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.wo-top .number { font-family: var(--mono); font-size: 16px; font-weight: 700; }
.wo-top .plate { font-weight: 700; letter-spacing: .04em; background: #f3c13a; padding: 2px 8px; border-radius: 3px; color: #000; }
.wo-top .car { color: var(--fg-2); }
.wo-top .meta { color: var(--fg-3); font-size: 12px; }
.wo-top .actions { display: flex; gap: var(--gap); }
.lock-banner {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
background: var(--err-bg); border: 1px solid #f4b6af; color: var(--err);
border-radius: var(--radius); margin-bottom: var(--gap-lg);
font-weight: 600;
}
.lock-banner .btn { margin-left: auto; }
.wo-grid {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: var(--gap-lg);
}
@media (max-width: 1200px) { .wo-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .wo-grid { grid-template-columns: 1fr; } }
.wo-totals {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: var(--gap);
background: var(--bg);
padding: 10px var(--gap-lg);
border: 1px solid var(--line);
border-radius: var(--radius);
margin-top: var(--gap-lg);
}
.wo-totals .item { text-align: right; }
.wo-totals .label { font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; }
.wo-totals .value { font-family: var(--mono); font-size: 15px; font-weight: 700; }
.wo-totals .value.big { font-size: 20px; color: var(--accent); }
/* ============================================================
KANBAN — redesigned
============================================================ */
.kanban-wrap { display: flex; flex-direction: column; height: calc(100vh - 110px); }
.kanban-wrap .page-hd { flex: 0 0 auto; }
.kanban {
display: flex;
flex-direction: row;
gap: 8px;
overflow-x: hidden; overflow-y: hidden;
flex: 1 1 auto;
padding: 4px 2px 12px;
align-items: stretch;
min-width: 0;
}
.kanban .col {
flex: 1 1 0;
min-width: 140px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
display: flex; flex-direction: column;
overflow: hidden;
transition: flex-basis .2s, min-width .2s;
}
.kanban .col.collapsed {
flex: 0 0 40px;
min-width: 40px;
background: var(--bg-3, var(--bg-2));
}
.kanban .col.collapsed .col-hd {
writing-mode: vertical-rl; transform: rotate(180deg);
padding: 14px 8px; height: 100%;
justify-content: flex-start; gap: 10px;
border-bottom: 0;
border-left: 3px solid transparent;
}
.kanban .col.drop-target { background: var(--accent-bg); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
/* Header každého sloupce */
.kanban .col-hd {
padding: 8px 10px;
font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
color: var(--fg); background: var(--bg);
border-bottom: 1px solid var(--line);
display: flex; justify-content: space-between; align-items: center;
gap: 6px;
cursor: pointer; user-select: none;
position: sticky; top: 0; z-index: 2;
white-space: nowrap;
overflow: hidden;
}
.kanban .col-hd:hover { background: var(--bg-2); }
.kanban .col-title {
display: flex; align-items: center; gap: 6px;
overflow: hidden; text-overflow: ellipsis;
}
.kanban .col-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fg-4); }
.kanban .col-hd-collapsed { display: flex; align-items: center; gap: 8px; font-size: 11px; }
/* Barvy sloupců — malé tečky v hlavičce */
.kanban .kb-col-prijato .col-dot { background: #3b82f6; }
.kanban .kb-col-diagnostika .col-dot { background: #8b5cf6; }
.kanban .kb-col-nabidnuto .col-dot { background: #f59e0b; }
.kanban .kb-col-ceka_na_schvaleni .col-dot { background: #eab308; }
.kanban .kb-col-ceka_na_dily .col-dot { background: #ec4899; }
.kanban .kb-col-v_oprave .col-dot { background: #10b981; }
.kanban .kb-col-blokovano .col-dot { background: #ef4444; }
.kanban .kb-col-hotovo .col-dot { background: #64748b; }
.badge-count {
background: var(--fg); color: var(--bg);
padding: 2px 8px; border-radius: 999px;
font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
min-width: 18px; text-align: center;
}
.kanban .col-bd {
padding: 5px; overflow-y: auto; flex: 1;
background: var(--bg-2);
}
/* TICKET karta */
.kanban .ticket {
background: var(--bg); border: 1px solid var(--line);
border-left: 3px solid var(--line-2);
border-radius: 6px;
padding: 6px 8px; margin-bottom: 5px;
cursor: grab;
font-size: 11px;
transition: all .15s;
display: flex; flex-direction: column; gap: 3px;
}
.kanban .ticket:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,.08);
border-color: var(--line-3, var(--line-2));
}
.kanban .ticket:active { cursor: grabbing; }
.kanban .ticket.dragging { opacity: .4; }
.kanban .ticket.lift { border-left-color: var(--err); border-left-width: 4px; }
.kanban .ticket.urgent { border-left-color: var(--warn, #f59e0b); border-left-width: 4px; }
.kanban .ticket.locked { background: linear-gradient(180deg, #fff, #fdecea); }
.kanban .ticket .t-hd { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.kanban .ticket .plate {
display: inline-block; padding: 1px 5px;
background: #fbbf24; color: #000;
border-radius: 3px;
font-weight: 800; font-size: 11px;
letter-spacing: .3px; font-family: var(--mono);
}
.kanban .ticket .number {
font-family: var(--mono); font-size: 9px;
color: var(--fg-3); font-weight: 600;
}
.kanban .ticket .t-vehicle {
display: flex; gap: 4px; align-items: baseline;
font-size: 11px; overflow: hidden;
}
.kanban .ticket .t-vehicle .vname {
font-weight: 600; color: var(--fg);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kanban .ticket .t-vehicle .vyear { color: var(--fg-3); font-size: 10px; flex-shrink: 0; }
.kanban .ticket .t-client {
font-size: 10px; color: var(--fg-2);
display: flex; align-items: center; gap: 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kanban .ticket .t-client .ic { font-size: 9px; opacity: .6; flex-shrink: 0; }
.kanban .ticket .t-ft {
display: flex; align-items: center; gap: 6px;
margin-top: 2px; padding-top: 4px;
border-top: 1px dashed var(--line);
}
.kanban .ticket .avatar {
width: 18px; height: 18px; flex: 0 0 18px;
border-radius: 50%;
display: grid; place-items: center;
color: #fff; font-weight: 700; font-size: 9px;
background: var(--accent);
}
.kanban .ticket .avatar-unassigned {
background: var(--bg-4); color: var(--fg-3);
border: 1px dashed var(--line-2);
}
.kanban .ticket .t-meta {
flex: 1; display: flex; flex-direction: column; gap: 1px;
min-width: 0; font-size: 9px;
}
.kanban .ticket .promise {
display: flex; align-items: center; gap: 3px;
color: var(--fg-3);
}
.kanban .ticket .promise .ic { font-size: 9px; }
.kanban .ticket .promise.soon { color: var(--warn); font-weight: 600; }
.kanban .ticket .promise.overdue { color: var(--err); font-weight: 700; }
.kanban .ticket .amount {
font-weight: 700; color: var(--fg-2);
font-variant-numeric: tabular-nums;
}
.kanban .ticket .t-flags { display: flex; gap: 2px; }
.kanban .ticket .flag {
font-size: 12px; line-height: 1;
}
.kanban .ticket .timer-flag { color: var(--ok); animation: timerPulse 1.5s ease-in-out infinite; }
@keyframes timerPulse {
0%, 100% { opacity: 1; }
50% { opacity: .3; }
}
/* Prázdný sloupec */
.kanban .empty-col {
display: flex; flex-direction: column; align-items: center;
padding: 24px 12px; color: var(--fg-4);
}
.kanban .empty-col .empty-ic { font-size: 22px; opacity: .4; margin-bottom: 4px; }
.kanban .empty-col .empty-txt { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
/* Skeleton loader */
.kanban-loading .skeleton-col {
flex: 1 1 0;
min-width: 140px;
background: var(--bg-2);
border-radius: 8px;
display: flex; flex-direction: column;
border: 1px solid var(--line);
min-height: 300px;
}
.skeleton-col .col-hd-placeholder {
height: 38px;
background: linear-gradient(90deg, var(--bg-3, #eee) 0%, var(--bg) 50%, var(--bg-3, #eee) 100%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 8px 8px 0 0;
}
.skeleton-col .col-bd-placeholder {
flex: 1;
background: var(--bg-2);
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.page-hd .kb-toggle { font-size: 12px; color: var(--fg-2); display: flex; gap: 4px; align-items: center; margin-left: 12px; cursor: pointer; }
.page-hd .kb-toggle input { accent-color: var(--accent); }
/* ============================================================
KPI tiles
============================================================ */
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: var(--gap-lg);
margin-bottom: var(--gap-lg);
}
.kpi {
background: var(--bg); border: 1px solid var(--line);
border-radius: var(--radius); padding: 12px;
}
.kpi .label { font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; }
.kpi .value { font-size: 22px; font-weight: 700; font-family: var(--mono); margin-top: 4px; }
.kpi .sub { font-size: 11px; color: var(--fg-3); }
.kpi.warn .value { color: var(--warn); }
.kpi.err .value { color: var(--err); }
.kpi.ok .value { color: var(--ok); }
/* ============================================================
CALENDAR grid
============================================================ */
.cal-week {
background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
overflow: hidden; display: flex; flex-direction: column;
}
.cal-week-hd {
display: grid; grid-template-columns: 60px repeat(7, 1fr);
border-bottom: 1px solid var(--line); background: var(--bg);
}
.cal-week-hd .daycol-hd {
padding: 8px 4px 6px; text-align: center;
font-size: 12px; color: var(--fg-3);
}
.cal-week-hd .daycol-hd.today .day-num {
display: inline-block; background: var(--accent); color: #fff;
padding: 2px 8px; border-radius: 14px; min-width: 26px;
}
.cal-week-hd .daycol-hd.today .day-name { color: var(--accent); font-weight: 700; }
.cal-week-hd .day-name { text-transform: uppercase; font-weight: 600; font-size: 10px; letter-spacing: .6px; color: var(--fg-3); margin-bottom: 2px; }
.cal-week-hd .day-num { font-size: 15px; font-weight: 600; color: var(--fg); }
.cal-allday {
display: grid; grid-template-columns: 60px repeat(7, 1fr);
border-bottom: 2px solid var(--line); background: var(--bg-2);
min-height: 26px;
}
.cal-allday .timecol {
font-size: 9px; color: var(--fg-3); text-align: right;
padding: 4px 6px; border-right: 1px solid var(--line);
text-transform: uppercase; letter-spacing: .3px;
}
.cal-allday .daycol-allday {
border-right: 1px solid var(--line); padding: 3px 2px; cursor: pointer;
display: flex; flex-direction: column; gap: 2px;
}
.cal-allday .daycol-allday:last-child { border-right: 0; }
.cal-allday .daycol-allday:hover { background: var(--bg); }
.cal-ev.allday {
padding: 2px 6px; font-size: 11px; font-weight: 600;
background: var(--accent);
color: #fff; border-radius: 3px; cursor: pointer;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
border-left: 3px solid rgba(0,0,0,.3);
}
.cal-week-bd {
display: grid; grid-template-columns: 60px repeat(7, 1fr);
position: relative;
overflow-y: auto; max-height: calc(100vh - 220px);
}
.cal-week-bd .timecol {
background: var(--bg);
}
.cal-week-bd .daycol {
position: relative;
cursor: crosshair;
background-image:
linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px);
}
.cal-week-bd .daycol:last-child { background-image: none; }
.cal-week-bd .daycol.today { background-color: rgba(31,111,235,0.03); }
.cal-week-bd .daycol:hover { background-color: rgba(0,0,0,0.015); }
.cal-week-bd .hour-row { border-bottom: 1px dashed rgba(0,0,0,0.06); }
.cal-week-bd .hour-row:last-child { border-bottom: 0; }
.cal-week-bd .timecol .hour-row { border-bottom: 0; position: relative; }
.cal-week-bd .hour-label {
position: absolute; top: -7px; right: 6px;
font-size: 10px; color: var(--fg-3); font-family: var(--mono);
background: var(--bg); padding: 0 3px;
}
.cal-week-bd .cal-ev {
position: absolute; z-index: 2;
background: var(--accent); color: #fff;
border-radius: 3px; padding: 3px 5px;
font-size: 11px; line-height: 1.25;
overflow: hidden; cursor: pointer;
box-shadow: 0 1px 2px rgba(0,0,0,.1);
border-left: 3px solid rgba(0,0,0,.3);
}
.cal-week-bd .cal-ev:hover { filter: brightness(1.08); }
.cal-week-bd .cal-ev .ev-time { font-family: var(--mono); font-size: 10px; opacity: .9; }
.cal-week-bd .cal-ev .ev-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-week-bd .cal-ev .ev-mech { font-size: 10px; opacity: .95; }
/* Všechny události mají stejnou barvu (var(--accent)) */
.cal-week-bd .now-line {
position: absolute; left: 0; right: 0; height: 2px;
background: #e04a4a; z-index: 3; pointer-events: none;
}
.cal-week-bd .now-line::before {
content: ''; position: absolute; left: -5px; top: -4px;
width: 10px; height: 10px; border-radius: 50%; background: #e04a4a;
}
/* Mesicni zobrazeni */
.cal-month {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
}
.cal-month-hd {
display: grid;
grid-template-columns: repeat(7, 1fr);
background: var(--bg-2);
border-bottom: 1px solid var(--line);
}
.cal-month-hd > div {
padding: 8px 10px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--fg-3);
text-align: center;
border-right: 1px solid var(--line);
}
.cal-month-hd > div:last-child { border-right: 0; }
.cal-month-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: minmax(110px, 1fr);
}
.cal-month-cell {
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 4px 6px 6px;
cursor: pointer;
position: relative;
min-height: 110px;
background: var(--bg);
transition: background .1s;
overflow: hidden;
}
.cal-month-cell:hover { background: rgba(31,111,235,0.04); }
.cal-month-cell.today { background: rgba(31,111,235,0.07); }
.cal-month-cell.today .mnum {
background: var(--accent); color: #fff;
border-radius: 50%; width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700;
}
.cal-month-cell.other { background: var(--bg-2); }
.cal-month-cell.other .mnum { color: var(--fg-3); }
.cal-month-cell.weekend:not(.other) { background: rgba(0,0,0,0.01); }
.cal-month-cell:nth-child(7n) { border-right: 0; }
.cal-month-cell .mnum {
font-size: 12px;
font-weight: 600;
padding: 2px 4px;
margin-bottom: 3px;
}
.cal-month-cell .mevs {
display: flex; flex-direction: column; gap: 2px;
}
.cal-month-cell .cal-ev-min {
background: var(--accent);
color: #fff;
padding: 1px 6px;
border-radius: 3px;
font-size: 11px;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cal-month-cell .cal-ev-min:hover { filter: brightness(1.08); }
.cal-month-cell .cal-ev-min .mtime {
font-family: var(--mono);
font-size: 10px;
opacity: .85;
margin-right: 3px;
}
/* ============================================================
MODALS / DRAWERS
============================================================ */
.modal-backdrop {
position: fixed; inset: 0;
background: rgba(17, 20, 24, .45);
display: grid; place-items: center;
z-index: 100;
}
.modal {
background: var(--bg);
border-radius: 6px;
box-shadow: 0 10px 40px rgba(0,0,0,.35);
min-width: 420px;
max-width: 90vw;
max-height: 88vh;
display: flex; flex-direction: column;
}
.modal.lg { min-width: 760px; }
.modal.xl { min-width: 960px; }
.modal .hd {
padding: 10px 16px; border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 8px;
font-weight: 700;
}
.modal .bd { padding: 16px; overflow-y: auto; flex: 1; }
.modal .ft {
padding: 10px 16px; border-top: 1px solid var(--line);
display: flex; justify-content: flex-end; gap: var(--gap);
background: var(--bg-2);
}
.modal .close {
margin-left: auto; width: 24px; height: 24px;
display: grid; place-items: center; border: none; background: transparent;
color: var(--fg-3); font-size: 18px;
}
.drawer-backdrop {
position: fixed; inset: 0;
background: rgba(17, 20, 24, .35);
z-index: 90;
}
.drawer {
position: fixed; top: 0; right: 0; bottom: 0;
width: 900px; max-width: 95vw;
background: var(--bg);
box-shadow: -10px 0 30px rgba(0,0,0,.25);
z-index: 100;
display: flex; flex-direction: column;
}
.drawer .hd {
padding: 10px 16px; border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 8px;
}
.drawer .bd { padding: var(--gap-lg); overflow-y: auto; flex: 1; }
/* ============================================================
TOASTS
============================================================ */
.toasts {
position: fixed; top: 60px; right: 16px; z-index: 1000;
display: flex; flex-direction: column; gap: 8px;
}
.toast {
background: var(--fg); color: #fff;
padding: 8px 14px; border-radius: var(--radius);
font-size: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,.2);
min-width: 220px;
}
.toast.ok { background: var(--ok); }
.toast.err { background: var(--err); }
.toast.warn { background: var(--warn); }
/* ============================================================
EVENT LOG
============================================================ */
.events {
max-height: 400px; overflow-y: auto;
}
.events .ev {
padding: 4px 0; border-bottom: 1px dashed var(--line);
display: grid; grid-template-columns: 60px 1fr; gap: 8px;
font-size: var(--fs-sm);
}
.events .ev:last-child { border-bottom: none; }
.events .ev .t { color: var(--fg-3); font-family: var(--mono); font-size: 11px; }
.events .ev .tag {
display: inline-block; padding: 0 6px; background: var(--bg-3); border-radius: 10px;
font-size: 10px; font-weight: 600; color: var(--fg-2); text-transform: uppercase;
}
/* ============================================================
HELPERS
============================================================ */
.money { font-family: var(--mono); text-align: right; }
.mono { font-family: var(--mono); }
.right { text-align: right; }
.center { text-align: center; }
.muted { color: var(--fg-3); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.bold { font-weight: 700; }
.gap { display: flex; gap: var(--gap); }
.gap-lg { display: flex; gap: var(--gap-lg); }
.col { display: flex; flex-direction: column; gap: var(--gap); }
.row { display: flex; gap: var(--gap-lg); align-items: center; flex-wrap: wrap; }
.spread { display:flex; justify-content:space-between; align-items:center; }
.hide { display: none !important; }
.grow { flex: 1; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.divider { height: 1px; background: var(--line); margin: var(--gap-lg) 0; }
/* empty state */
.empty {
text-align: center; color: var(--fg-3);
padding: 30px 20px;
}
.empty .ico { font-size: 28px; margin-bottom: 6px; }
/* notification dropdown */
.notif-pop {
position: absolute; top: 34px; right: 0; width: 360px;
background: var(--bg); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.15);
max-height: 400px; overflow: auto; z-index: 20;
}
.notif-pop .item { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12px; cursor: pointer; }
.notif-pop .item:hover { background: var(--bg-2); }
.notif-pop .item.unread { background: #fbfdff; font-weight: 500; }
.notif-pop .item .tt { color: var(--fg); }
.notif-pop .item .bb { color: var(--fg-3); font-size: 11px; }
/* dropdown menu */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
position: absolute; top: 100%; right: 0;
background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: 0 4px 18px rgba(0,0,0,.15);
min-width: 180px; z-index: 50;
padding: 4px 0;
}
.dropdown-menu .mi {
padding: 6px 12px; font-size: 12px; cursor: pointer; white-space: nowrap;
display: flex; align-items: center; gap: 8px;
}
.dropdown-menu .mi:hover { background: var(--bg-2); }
.dropdown-menu .mi .ico { width: 14px; text-align: center; color: var(--fg-3); }
.dropdown-menu .sep { height: 1px; background: var(--line); margin: 4px 0; }
.dropdown-menu .hd { padding: 6px 12px; font-size: 10px; text-transform: uppercase; color: var(--fg-4); letter-spacing: .05em; }
/* ============================================================
TABS
============================================================ */
.tabs {
display: flex; gap: 2px;
border-bottom: 1px solid var(--line);
margin-bottom: var(--gap-lg);
}
.tabs .tab {
padding: 6px 14px;
border: 1px solid transparent;
border-bottom: none;
background: transparent;
color: var(--fg-2);
font-size: 12px;
font-weight: 500;
cursor: pointer;
border-radius: 4px 4px 0 0;
margin-bottom: -1px;
}
.tabs .tab:hover { background: var(--bg-2); }
.tabs .tab.active {
background: var(--bg);
border-color: var(--line);
color: var(--accent);
font-weight: 600;
}
.tabs .tab .count {
display: inline-block;
margin-left: 6px;
background: var(--bg-3);
color: var(--fg-2);
padding: 0 6px;
border-radius: 8px;
font-size: 10px;
}
.tabs .tab.active .count { background: var(--accent-bg); color: var(--accent); }
/* ============================================================
CHARTS (SVG based)
============================================================ */
.chart {
width: 100%;
height: 180px;
position: relative;
}
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .axis-label { fill: var(--fg-3); font-size: 10px; font-family: var(--mono); }
.chart .bar { fill: var(--accent); transition: opacity .15s; }
.chart .bar:hover { fill: var(--accent-2); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart .line-fill { fill: var(--accent-bg); opacity: .4; }
.chart .dot { fill: var(--accent); }
.chart .grid { stroke: var(--bg-3); stroke-width: 1; stroke-dasharray: 2,2; }
.sparkline {
display: inline-block;
width: 100%;
height: 32px;
}
.sparkline .line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.sparkline .area { fill: var(--accent-bg); opacity: .5; }
/* donut/pie */
.donut {
width: 140px; height: 140px;
position: relative;
}
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut .bg { fill: none; stroke: var(--bg-3); stroke-width: 14; }
.donut .seg { fill: none; stroke-width: 14; stroke-linecap: butt; }
.donut .center {
position: absolute; inset: 0;
display: grid; place-items: center;
font-size: 14px; font-weight: 700;
text-align: center;
}
/* progress bar */
.progress {
display: block;
width: 100%; height: 6px;
background: var(--bg-3);
border-radius: 3px;
overflow: hidden;
}
.progress > span {
display: block; height: 100%;
background: var(--accent);
transition: width .3s ease;
}
.progress.ok > span { background: var(--ok); }
.progress.warn > span { background: var(--warn); }
.progress.err > span { background: var(--err); }
/* ============================================================
PHOTO GALLERY
============================================================ */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 8px;
}
.gallery .photo {
position: relative;
aspect-ratio: 1;
background: var(--bg-3);
border-radius: 4px;
overflow: hidden;
cursor: pointer;
border: 1px solid var(--line);
}
.gallery .photo img,
.gallery .photo video {
width: 100%; height: 100%; object-fit: cover;
}
.gallery .photo:hover .del { display: block; }
.gallery .photo .del {
display: none;
position: absolute; top: 4px; right: 4px;
width: 20px; height: 20px;
background: rgba(0,0,0,.6); color: #fff;
border: none; border-radius: 50%;
cursor: pointer; font-size: 14px;
}
.gallery .photo .name {
position: absolute; bottom: 0; left: 0; right: 0;
background: rgba(0,0,0,.5); color: #fff;
font-size: 10px; padding: 2px 4px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.upload-drop {
border: 2px dashed var(--line-2);
border-radius: 6px;
padding: 20px;
text-align: center;
color: var(--fg-3);
cursor: pointer;
transition: all .15s;
}
.upload-drop:hover,
.upload-drop.dragover {
border-color: var(--accent);
background: var(--accent-bg);
color: var(--accent);
}
/* ============================================================
COMMAND PALETTE
============================================================ */
.cmdk-backdrop {
position: fixed; inset: 0;
background: rgba(17, 20, 24, .6);
display: grid; place-items: start center;
padding-top: 15vh;
z-index: 200;
}
.cmdk {
width: 560px; max-width: 90vw;
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: 8px;
box-shadow: 0 20px 60px rgba(0,0,0,.4);
overflow: hidden;
}
.cmdk input {
width: 100%; padding: 14px 16px;
border: none; border-bottom: 1px solid var(--line);
font-size: 15px; outline: none;
}
.cmdk .list { max-height: 400px; overflow-y: auto; }
.cmdk .item {
display: flex; align-items: center; gap: 10px;
padding: 8px 16px;
cursor: pointer;
font-size: 13px;
border-left: 2px solid transparent;
}
.cmdk .item:hover,
.cmdk .item.active {
background: var(--bg-2);
border-left-color: var(--accent);
}
.cmdk .item .kbd {
margin-left: auto;
padding: 1px 6px;
border: 1px solid var(--line-2);
border-radius: 3px;
font-family: var(--mono);
font-size: 10px;
color: var(--fg-3);
}
.cmdk .group {
padding: 4px 16px;
font-size: 10px;
text-transform: uppercase;
color: var(--fg-4);
letter-spacing: .05em;
background: var(--bg-2);
border-bottom: 1px solid var(--line);
}
/* ============================================================
TIMELINE
============================================================ */
.timeline {
position: relative;
padding-left: 20px;
}
.timeline::before {
content: ''; position: absolute;
left: 6px; top: 0; bottom: 0;
width: 2px; background: var(--line);
}
.timeline .tl-item {
position: relative;
padding: 8px 0 8px 8px;
font-size: 12px;
}
.timeline .tl-item::before {
content: ''; position: absolute;
left: -18px; top: 12px;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--bg);
border: 2px solid var(--accent);
}
.timeline .tl-item.done::before { background: var(--ok); border-color: var(--ok); }
.timeline .tl-item.warn::before { background: var(--warn); border-color: var(--warn); }
.timeline .tl-item.err::before { background: var(--err); border-color: var(--err); }
.timeline .tl-time { color: var(--fg-3); font-family: var(--mono); font-size: 11px; }
/* ============================================================
CALENDAR v2 (hourly)
============================================================ */
.cal2 {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: auto;
max-height: calc(100vh - 140px);
}
.cal2-grid {
display: grid;
position: relative;
}
.cal2-grid .corner {
background: var(--bg-2);
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
position: sticky; top: 0; left: 0; z-index: 3;
}
.cal2-grid .day-hd {
background: var(--bg-2);
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 6px 8px;
font-size: 11px;
font-weight: 600;
text-align: center;
position: sticky; top: 0; z-index: 2;
}
.cal2-grid .day-hd.today { background: var(--accent-bg); color: var(--accent); }
.cal2-grid .hour {
background: var(--bg-2);
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 2px 6px;
font-size: 10px;
color: var(--fg-3);
font-family: var(--mono);
position: sticky; left: 0; z-index: 1;
}
.cal2-grid .slot {
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
position: relative;
min-height: 30px;
}
.cal2-grid .slot.dragover { background: var(--accent-bg); }
.cal2-ev {
position: absolute;
left: 2px; right: 2px;
background: var(--accent);
color: #fff;
border-radius: 3px;
padding: 2px 6px;
font-size: 11px;
line-height: 1.3;
cursor: move;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.cal2-ev:hover { filter: brightness(1.1); }
.cal2-ev.dragging { opacity: .4; }
/* ============================================================
KEYBOARD SHORTCUTS OVERLAY
============================================================ */
.shortcuts-overlay {
position: fixed; inset: 0;
background: rgba(17, 20, 24, .7);
display: grid; place-items: center;
z-index: 200;
}
.shortcuts-card {
background: var(--bg);
border-radius: 8px;
padding: 24px 30px;
min-width: 500px;
max-width: 90vw;
box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.shortcuts-card h2 { margin: 0 0 16px; font-size: 16px; }
.shortcuts-card .grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 24px;
}
.shortcuts-card .s {
display: flex;
justify-content: space-between;
padding: 4px 0;
font-size: 12px;
}
.shortcuts-card .s kbd {
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 3px;
padding: 1px 6px;
font-family: var(--mono);
font-size: 11px;
margin-left: 4px;
}
/* bucket grid for aging */
.buckets {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin: 12px 0;
}
.bucket {
background: var(--bg-2);
padding: 10px;
border-radius: 4px;
border: 1px solid var(--line);
}
.bucket .label {
font-size: 10px;
color: var(--fg-3);
text-transform: uppercase;
}
.bucket .value {
font-size: 16px;
font-weight: 700;
font-family: var(--mono);
margin-top: 2px;
}
.bucket.warn { background: var(--warn-bg); border-color: #ffd9a8; }
.bucket.err { background: var(--err-bg); border-color: #f4b6af; color: var(--err); }
/* settings panel */
.settings-grid {
display: grid;
grid-template-columns: 200px 1fr;
gap: 20px;
min-height: calc(100vh - 200px);
}
.settings-nav {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 4px;
padding: 6px 0;
height: fit-content;
}
.settings-nav .item {
padding: 8px 14px;
font-size: 13px;
cursor: pointer;
border-left: 2px solid transparent;
color: var(--fg-2);
}
.settings-nav .item:hover { background: var(--bg-2); }
.settings-nav .item.active {
background: var(--accent-bg);
color: var(--accent);
border-left-color: var(--accent);
font-weight: 600;
}
.settings-panel {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 4px;
padding: 20px;
}
.settings-panel h3 {
margin: 0 0 14px;
font-size: 14px;
font-weight: 700;
}
/* toggle switch */
.switch {
display: inline-block;
width: 34px; height: 18px;
background: var(--bg-3);
border-radius: 9px;
position: relative;
cursor: pointer;
transition: background .2s;
}
.switch.on { background: var(--ok); }
.switch::after {
content: '';
position: absolute;
left: 2px; top: 2px;
width: 14px; height: 14px;
background: #fff;
border-radius: 50%;
transition: left .2s;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.switch.on::after { left: 18px; }
/* Loading spinner */
.spinner {
display: inline-block;
width: 14px; height: 14px;
border: 2px solid var(--bg-3);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton {
background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2));
background-size: 200% 100%;
animation: shimmer 1.2s infinite;
border-radius: 3px;
display: inline-block;
height: 14px;
width: 100px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* kbd */
kbd {
display: inline-block;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 3px;
padding: 1px 5px;
font-family: var(--mono);
font-size: 10px;
color: var(--fg-2);
}
/* ============================================================
DARK MODE
============================================================ */
[data-theme="dark"] {
--bg: #0d1117;
--bg-2: #161b22;
--bg-3: #21262d;
--bg-4: #30363d;
--fg: #e6edf3;
--fg-2: #a8b2bd;
--fg-3: #7d8590;
--fg-4: #636c76;
--line: #30363d;
--line-2: #3d444d;
--line-3: #4a525a;
--accent: #58a6ff;
--accent-2: #79b8ff;
--accent-bg: #162640;
--ok: #3fb950;
--ok-bg: #0f2d18;
--warn: #d29922;
--warn-bg:#2b1d0e;
--err: #f85149;
--err-bg:#2d1115;
--info: #58a6ff;
--info-bg:#0d2238;
--lift: #d29922;
--vip: #bc8cff;
}
[data-theme="dark"] .login-wrap { background: linear-gradient(180deg, #161b22, #0d1117); }
[data-theme="dark"] .wo-top .plate { background: #d29922; color: #000; }
/* ============================================================
SORTABLE TABLE HEADERS
============================================================ */
.table.sortable th { cursor: pointer; user-select: none; position: relative; padding-right: 18px; }
.table.sortable th:hover { color: var(--accent); }
.table.sortable th::after { content: '⇅'; position: absolute; right: 4px; font-size: 10px; color: var(--fg-4); }
.table.sortable th.sort-asc::after { content: '▲'; color: var(--accent); }
.table.sortable th.sort-desc::after { content: '▼'; color: var(--accent); }
/* ============================================================
PAGINATION
============================================================ */
.pagination {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 0;
justify-content: center;
}
.pagination .btn { min-width: 28px; }
.pagination .info { font-size: 12px; color: var(--fg-3); }
.pagination .current { font-weight: 700; color: var(--accent); }
/* bulk select checkbox */
.table .bulk-check { width: 16px; height: 16px; cursor: pointer; }
/* ============================================================
MOBILE RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
.app { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
.sidebar .group,
.sidebar a.item span.label { display: none; }
.sidebar a.item { justify-content: center; padding: 8px 0; }
.wo-grid { grid-template-columns: 1fr !important; }
.wo-top { grid-template-columns: 1fr; }
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.settings-grid { grid-template-columns: 1fr; }
.info-grid { grid-template-columns: 1fr; }
.modal { min-width: 95vw; }
}
@media (max-width: 768px) {
.app {
grid-template-columns: 1fr;
grid-template-rows: var(--topbar-h) auto 1fr;
}
.sidebar {
grid-row: 2;
grid-column: 1;
border-right: none;
border-bottom: 1px solid var(--line);
display: flex;
overflow-x: auto;
padding: 0;
gap: 0;
}
.sidebar .group { display: none; }
.sidebar a.item {
flex-direction: column;
padding: 6px 10px;
font-size: 11px;
white-space: nowrap;
border-left: none;
border-bottom: 2px solid transparent;
}
.sidebar a.item.active { border-left: none; border-bottom-color: var(--accent); }
.sidebar a.item span.label { display: block; font-size: 9px; }
.topbar { grid-column: 1; padding: 0 8px; }
.topbar .search { max-width: 200px; }
.topbar .user .small { display: none; }
.main { grid-column: 1; padding: 8px; }
.page-hd { flex-wrap: wrap; gap: 6px; }
.page-hd h1 { font-size: 15px; }
.table-wrap { font-size: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table th, .table td { padding: 0 4px; height: 26px; }
/* Univerzalni hide-on-smaller classes */
.hide-sm { display: none !important; }
/* Scroll indikator na mobilu */
.table-wrap::before {
content: '←→ potáhni';
display: block; text-align: right;
font-size: 10px; color: var(--fg-4);
padding: 2px 4px 0;
}
.wo-totals { grid-template-columns: 1fr 1fr; }
.buckets { grid-template-columns: 1fr 1fr; }
.kanban .col { flex: 0 0 85vw; }
.modal { min-width: auto; max-width: 100vw; margin: 0; border-radius: 0; }
.drawer { width: 100vw; }
.btn.lg { height: 40px; font-size: 14px; }
.timer.big { font-size: 14px; padding: 0 10px; }
}
@media (max-width: 1024px) {
.hide-md { display: none !important; }
}
@media (max-width: 480px) {
.topbar .logo { display: none; }
.topbar .search { max-width: 150px; }
.kpi-grid { grid-template-columns: 1fr 1fr; }
.kpi .value { font-size: 18px; }
}
/* ============================================================
PRINT PANEL - velke tlacitka pro amater
============================================================ */
.print-panel {
background: var(--bg);
border: 2px solid var(--accent);
border-radius: 8px;
padding: 16px;
margin-bottom: var(--gap-lg);
}
.print-panel .hd {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
font-weight: 700;
font-size: 15px;
color: var(--accent);
}
.print-panel .hd .ico { font-size: 22px; }
.print-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
}
.print-card {
border: 1px solid var(--line);
border-radius: 6px;
padding: 14px;
cursor: pointer;
transition: all .15s;
display: flex;
flex-direction: column;
gap: 6px;
}
.print-card:hover {
border-color: var(--accent);
background: var(--accent-bg);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.print-card .title {
font-weight: 700;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.print-card .title .ico { font-size: 20px; }
.print-card .desc {
font-size: 11px;
color: var(--fg-3);
line-height: 1.4;
}
.print-card.disabled {
opacity: .4;
pointer-events: none;
}
/* Auto-suggest modal po akci */
.suggest-modal {
position: fixed;
bottom: 24px;
right: 24px;
background: var(--bg);
border: 2px solid var(--accent);
border-radius: 10px;
padding: 18px 20px;
box-shadow: 0 8px 30px rgba(0,0,0,.2);
z-index: 150;
max-width: 380px;
animation: slideUp .3s ease;
}
.suggest-modal .hd {
font-weight: 700;
font-size: 14px;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.suggest-modal .actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.suggest-modal .act {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 6px;
cursor: pointer;
font-size: 13px;
transition: all .15s;
}
.suggest-modal .act:hover {
background: var(--accent-bg);
border-color: var(--accent);
}
.suggest-modal .act .ico { font-size: 18px; }
.suggest-modal .close-link {
display: block;
text-align: center;
margin-top: 10px;
font-size: 11px;
color: var(--fg-3);
cursor: pointer;
}
@keyframes slideUp {
from { transform: translateY(30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* ============================================================
Lightbox pro fotky v detailu zakázky
============================================================ */
.lb-overlay {
position: fixed; inset: 0; z-index: 1000;
background: rgba(0,0,0,.92);
display: flex; flex-direction: column;
outline: none;
}
.lb-overlay .lb-top {
display: flex; align-items: center; gap: 12px;
padding: 10px 16px;
background: rgba(0,0,0,.45); color: #fff;
font-size: 13px;
}
.lb-overlay .lb-name { flex: 1; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-overlay .lb-idx { color: #9ca3af; font-family: var(--mono); font-size: 12px; }
.lb-overlay .lb-close {
background: transparent; border: 0; color: #fff;
font-size: 26px; cursor: pointer; width: 32px; height: 32px;
line-height: 1; padding: 0;
}
.lb-overlay .lb-close:hover { background: rgba(255,255,255,.1); border-radius: 4px; }
.lb-overlay .lb-body {
flex: 1 1 0;
min-height: 0; min-width: 0;
display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden;
}
.lb-overlay .lb-body img {
max-width: 100%; max-height: 100%;
width: auto; height: auto;
object-fit: contain; display: block;
user-select: none;
touch-action: none;
-webkit-user-drag: none;
}
.lb-overlay .lb-hint {
position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
background: rgba(0,0,0,.55); color: #fff;
padding: 5px 14px; border-radius: 999px;
font-size: 11px; pointer-events: none;
opacity: 0; animation: lbHintFade 2.6s ease-out;
}
@keyframes lbHintFade {
0%, 100% { opacity: 0; }
10%, 70% { opacity: 1; }
}
.lb-overlay .lb-nav {
position: absolute; top: 50%; transform: translateY(-50%);
background: rgba(0,0,0,.45); color: #fff; border: 0;
border-radius: 50%; width: 48px; height: 48px;
font-size: 30px; cursor: pointer; line-height: 1;
transition: background .15s;
}
.lb-overlay .lb-nav:hover:not(:disabled) { background: rgba(0,0,0,.8); }
.lb-overlay .lb-nav:disabled { opacity: .25; cursor: not-allowed; }
.lb-overlay .lb-nav.prev { left: 16px; }
.lb-overlay .lb-nav.next { right: 16px; }
.lb-overlay .lb-bottom {
display: flex; gap: 10px; padding: 12px 16px;
background: rgba(0,0,0,.45);
justify-content: center;
}
.lb-overlay .lb-bottom .btn { text-decoration: none; }
.lb-overlay .lb-bottom .btn.sm { min-width: 42px; padding: 6px 14px; font-size: 13px; }
/* ============================================================
Top-loader (YouTube-style progress bar pri API calls)
============================================================ */
.top-loader {
position: fixed; top: 0; left: 0; right: 0;
height: 2px; z-index: 10000;
pointer-events: none;
opacity: 0; transition: opacity .2s;
}
.top-loader.active { opacity: 1; }
.top-loader .bar {
height: 100%;
background: linear-gradient(90deg, var(--accent), #4fc3f7, var(--accent));
background-size: 200% 100%;
animation: topLoaderMove 1.2s linear infinite;
box-shadow: 0 0 6px rgba(31, 111, 235, .4);
}
@keyframes topLoaderMove {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ============================================================
Soukromé úkoly/poznámky — vizuální odlišení
============================================================ */
.kb-card.is-private {
background: linear-gradient(180deg, #faf5ff 0%, #fff 100%);
border-color: #c4b5fd;
}
.kb-card.is-private::before {
content: ''; position: absolute; top: 0; right: 0;
width: 0; height: 0;
border-top: 16px solid #7c3aed;
border-left: 16px solid transparent;
border-top-right-radius: 4px;
}
.kb-card { position: relative; }
tr.is-private td:first-child::after,
tr.is-private td.is-priv-mark { content: '🔒'; color: #7c3aed; }
.note-card.is-private {
box-shadow: 0 0 0 2px #7c3aed, 0 2px 8px rgba(124, 58, 237, .15) !important;
}
/* ============================================================
Faktury — stats panel + filtry + actions
============================================================ */
.inv-stats {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 10px;
}
.inv-stats .stat {
background: var(--bg);
border: 1px solid var(--line);
border-left: 3px solid var(--line-2);
border-radius: 4px;
padding: 4px 10px;
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
}
.inv-stats .stat-lbl {
font-size: 10px; text-transform: uppercase; letter-spacing: .03em;
color: var(--fg-2); font-weight: 600;
}
.inv-stats .stat-val {
font-size: 13px; font-weight: 600;
font-variant-numeric: tabular-nums;
}
.inv-stats .stat-sub { font-size: 10px; color: var(--fg-2); margin-left: 4px; }
.inv-stats .stat-ok { border-left-color: var(--ok); }
.inv-stats .stat-ok .stat-val { color: var(--ok); }
.inv-stats .stat-warn { border-left-color: var(--warn); }
.inv-stats .stat-warn .stat-val { color: var(--warn); }
.inv-stats .stat-err { border-left-color: var(--err); background: var(--err-bg); }
.inv-stats .stat-err .stat-val { color: var(--err); }
.table .inv-overdue td.err { font-weight: 700; }
.table .inv-paid { background: rgba(26, 127, 55, .03); }
.inv-actions { white-space: nowrap; }
.inv-actions .btn { padding: 2px 6px; font-size: 13px; margin-right: 1px; }
.inv-actions .btn:disabled { opacity: .3; cursor: not-allowed; }
/* ============================================================
Mobilni responsive: tabulky -> karty pod 640px
============================================================
Aplikuje se pro tabulky s class="table responsive". Hlavicka se skryva,
kazda | dostane predtim label z data-label atributu. Radky jsou karty.
*/
@media (max-width: 640px) {
.table.responsive thead { display: none; }
.table.responsive, .table.responsive tbody, .table.responsive tr, .table.responsive td { display: block; width: 100%; }
.table.responsive tr {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 6px;
margin-bottom: 8px;
padding: 8px 10px;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.table.responsive td {
border: none;
padding: 4px 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 13px;
}
.table.responsive td::before {
content: attr(data-label);
font-size: 11px;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: .04em;
flex-shrink: 0;
}
.table.responsive td[data-label=""]::before { content: none; }
.table.responsive td.num { font-variant-numeric: tabular-nums; text-align: right; }
.table.responsive td:empty { display: none; }
/* Skryt nepodstatne sloupce na malych obrazovkach pokud jsou oznaceny. */
.table.responsive td.hide-sm { display: none; }
/* Topbar: zkrat spacing */
.topbar .search { display: none; }
.topbar .user .small { display: none; }
}
/* Default fallback pro vsechny tabulky bez explicitniho responsive modu:
horizontalni scroll wrapper. Chova se jako klasicka tabulka, ale nepreteka. */
@media (max-width: 640px) {
.table:not(.responsive) {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
}
/* Dashboard aging widget */
.aging-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 14px; }
.aging-tile { padding: 6px 10px; border-radius: 4px; background: var(--bg-2); border: 1px solid var(--line); }
.aging-tile .val { font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.aging-tile.ok { border-left: 3px solid var(--ok); }
.aging-tile.warn { border-left: 3px solid var(--warn); background: var(--warn-bg); }
.aging-tile.err { border-left: 3px solid var(--err); background: var(--err-bg); }
@media (max-width: 640px) { .aging-grid { grid-template-columns: repeat(2, 1fr); } }
/* Field-level validation chyba - zobrazuje se primo pod inputem. */
.err-field { color: var(--err); font-size: 11px; margin-top: 2px; font-weight: 500; }
input.is-error, textarea.is-error, select.is-error { border-color: var(--err) !important; box-shadow: 0 0 0 2px var(--err-bg); }
/* PDF drop zone overlay - zobrazi se behem dragu nad expenses view */
.pdf-dropzone {
position: fixed;
inset: 0;
background: rgba(31, 111, 235, 0.08);
border: 3px dashed var(--accent);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
pointer-events: none;
}
.pdf-dropzone > div {
background: var(--bg);
border: 1px solid var(--accent);
border-radius: 8px;
padding: 20px 40px;
font-size: 16px;
font-weight: 600;
color: var(--accent);
box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
|