/* ==========================================================================
app.css – globální styl administrace e-shopu
Jeden soubor pro celou aplikaci. Mobile-first, bez závislosti na frameworku.
Volitelně: pro plné znění nadpisového fontu přidej do layoutu
Bez něj se použije systémové písmo - vzhled zůstává funkční, jen o něco neutrálnější.
========================================================================== */
/* ---------- Tokeny (barvy, rozestupy, typografie) ---------- */
:root {
/* barvy - hlubší "veterinární" teal jako identita, jantarový akcent jen pro značku */
--color-bg: #f3f7f5;
--color-surface: #ffffff;
--color-surface-tint: #eaf2ee;
--color-border: #dde6e2;
--color-text: #16241f;
--color-text-muted: #5b6d68;
--color-primary: #1f6f5c;
--color-primary-hover: #175a4a;
--color-primary-contrast: #ffffff;
--color-primary-soft: #e2f1ec;
--color-accent: #dd8b3d;
--color-danger: #b3432b;
--color-danger-hover: #96371f;
--color-success-bg: #e6f2ec;
--color-success-text: #1f6b4f;
--color-error-bg: #fbebe8;
--color-error-text: #a33324;
/* rozestupy (4px škála) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
/* ostatní */
--radius: 12px;
--radius-sm: 8px;
--font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--shadow-sm: 0 1px 2px rgba(22, 36, 31, 0.06), 0 1px 1px rgba(22, 36, 31, 0.04);
--shadow-md: 0 12px 28px -12px rgba(31, 111, 92, 0.28);
--ease: cubic-bezier(.2, .7, .3, 1);
--max-width: 1040px;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.5;
color: var(--color-text);
background: var(--color-bg);
}
h1, h2, h3, p, ul, ol, table { margin: 0 0 var(--space-4); }
h1 { font-family: var(--font-display); font-size: 23px; font-weight: 800; letter-spacing: -0.015em; }
h2 { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 13px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ---------- Layout ---------- */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--space-5) var(--space-4);
}
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: var(--space-5);
margin-bottom: var(--space-4);
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
max-width: var(--max-width);
margin: 0 auto;
padding: var(--space-3) var(--space-4);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
border-left: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
border-radius: 0 0 var(--radius) var(--radius);
position: sticky;
top: 0;
z-index: 10;
}
.topbar__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.topbar__brand {
display: inline-flex;
align-items: center;
font-family: var(--font-display);
font-weight: 800;
letter-spacing: -0.01em;
color: var(--color-text);
}
/* drobná "kříž" značka - jediný jantarový akcent v rozhraní, symbol veterinární péče */
.topbar__brand::before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
margin-right: var(--space-2);
background: var(--color-accent);
border-radius: 3px;
clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%);
}
.topbar__nav {
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.topbar__logout {
margin-left: auto;
color: var(--color-text-muted);
}
.topbar__logout:hover { color: var(--color-danger); }
.topbar__logo {
width: 120px;
height: auto;
max-width: 100%;
}
.login__logo {
width: 320px;
max-width: 100%;
height: auto;
display: block;
margin: var(--space-5) auto;
}
/* hamburger tlačítko - viditelné jen na malých displejích, viz media query níže */
.topbar__toggle {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
cursor: pointer;
}
.topbar__toggle span {
display: block;
width: 18px;
height: 2px;
background: var(--color-text);
border-radius: 2px;
transition: transform .2s var(--ease), opacity .2s var(--ease);
}
/* morph na "X" po otevření */
.topbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---------- Tlačítka ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
min-height: 40px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 600;
line-height: 1;
cursor: pointer;
background: var(--color-surface);
color: var(--color-text);
border-color: var(--color-border);
text-decoration: none;
transition: background-color .15s var(--ease), border-color .15s var(--ease),
transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover { background: var(--color-bg); text-decoration: none; }
.btn-primary {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-primary-contrast);
}
.btn-primary:hover {
background: var(--color-primary-hover);
border-color: var(--color-primary-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-danger {
background: var(--color-danger);
border-color: var(--color-danger);
color: #fff;
}
.btn-danger:hover { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }
.btn-ghost {
background: transparent;
border-color: transparent;
color: var(--color-primary);
}
.btn-ghost:hover { background: var(--color-primary-soft); }
.btn-sm { min-height: 32px; padding: var(--space-1) var(--space-3); font-size: 13px; }
.btn-block { width: 100%; }
/* skupina akcí pod formulářem / v hlavičce */
.actions {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
margin-bottom: var(--space-4);
}
/* ---------- Formuláře ---------- */
.form-group {
margin-bottom: var(--space-4);
}
label {
display: block;
margin-bottom: var(--space-1);
font-size: 13px;
font-weight: 600;
color: var(--color-text-muted);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
select,
textarea {
width: 100%;
min-height: 40px;
padding: var(--space-2) var(--space-3);
font-size: 15px;
font-family: inherit;
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-soft);
}
input[type="checkbox"], input[type="radio"] {
width: 18px;
height: 18px;
margin-right: var(--space-2);
vertical-align: middle;
}
.form-error {
color: var(--color-danger);
font-size: 13px;
margin-top: var(--space-1);
}
/* chybové hlášky formuláře (Nette Forms $form->addError) */
ul.error, .form-errors {
list-style: none;
padding: var(--space-3) var(--space-4);
margin: 0 0 var(--space-4);
background: var(--color-error-bg);
color: var(--color-error-text);
border-left: 3px solid var(--color-danger);
border-radius: var(--radius-sm);
font-size: 14px;
}
/* ---------- Tabulky / seznamy ---------- */
.table-wrap {
overflow-x: auto;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
}
table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
th, td {
text-align: left;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}
.table-wrap th {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
background: var(--color-surface-tint);
}
.table-wrap tbody tr:hover,
.table-wrap tr:hover { background: var(--color-bg); }
.table-wrap tr:last-child td { border-bottom: none; }
/* Nette Forms defaultně vykresluje formulář jako - dáme mu čistší,
neutrální vzhled bez hlavičkových stylů určených pro datové tabulky */
.card table {
border: none;
}
.card table th {
text-align: left;
white-space: normal;
border-bottom: none;
padding: var(--space-3) var(--space-3) var(--space-1) 0;
background: none;
vertical-align: top;
width: 1%;
}
.card table td {
border-bottom: none;
padding: var(--space-3) 0;
white-space: normal;
}
td.actions-cell {
display: flex;
gap: var(--space-3);
white-space: nowrap;
}
/* jednoduchý seznam bez tabulky (např. detail karty) */
.list { list-style: none; padding: 0; margin: 0; }
.list li {
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-border);
}
.list li:last-child { border-bottom: none; }
/* ---------- Flash zprávy ---------- */
.flash {
padding: var(--space-3) var(--space-4);
border-left: 4px solid transparent;
border-radius: var(--radius-sm);
margin-bottom: var(--space-4);
font-size: 14px;
}
.flash-success { background: var(--color-success-bg); color: var(--color-success-text); border-left-color: var(--color-primary); }
.flash-error { background: var(--color-error-bg); color: var(--color-error-text); border-left-color: var(--color-danger); }
.flash-warning { background: #fdf1e0; color: #8a5a1a; border-left-color: #c9862a; }
/* ---------- Přihlašovací stránka (Home) ---------- */
.login-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-5) var(--space-4);
background:
radial-gradient(circle at 15% 15%, rgba(31, 111, 92, 0.07), transparent 45%),
radial-gradient(circle at 85% 85%, rgba(221, 139, 61, 0.06), transparent 40%),
var(--color-bg);
}
.login-box {
width: 100%;
max-width: 420px;
animation: login-rise .5s var(--ease) both;
}
@keyframes login-rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.login-box .card {
position: relative;
text-align: left;
overflow: hidden;
padding-top: calc(var(--space-5) + 4px);
}
/* tenký barevný pruh nahoře karty - jemný, ne křiklavý akcent */
.login-box .card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.login-title {
font-family: var(--font-display);
font-size: 19px;
font-weight: 800;
line-height: 1.4;
letter-spacing: -0.01em;
text-align: center;
color: var(--color-text);
margin: 0 0 var(--space-5);
}
/* Nette Forms vykresluje formulář jako - v přihlašovacím boxu ho
chceme jako jednoduchý blokový formulář bez tabulkového rozvržení */
.login-box .card table,
.login-box .card tbody,
.login-box .card tr,
.login-box .card th,
.login-box .card td {
display: block;
width: 100%;
padding: 0;
border: none;
background: none;
}
.login-box .card th {
margin-bottom: var(--space-1);
}
.login-box .card td {
margin-bottom: var(--space-4);
}
/* Tlačítko "Přihlásit se" přes celou šířku boxu */
.login-box input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 42px;
padding: var(--space-2) var(--space-4);
border: 1px solid var(--color-primary);
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 700;
cursor: pointer;
background: var(--color-primary);
color: var(--color-primary-contrast);
transition: background-color .15s var(--ease), border-color .15s var(--ease),
transform .15s var(--ease), box-shadow .15s var(--ease);
}
.login-box input[type="submit"]:hover {
background: var(--color-primary-hover);
border-color: var(--color-primary-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.login-box input[type="submit"]:active { transform: translateY(0); box-shadow: none; }
/* checkbox "Zapamatovat přihlášení" - vedle sebe s popiskem */
.login-box label:has(input[type="checkbox"]) {
display: flex;
align-items: center;
font-weight: 400;
color: var(--color-text);
text-transform: none;
letter-spacing: normal;
}
/* ---------- Rozbalovací menu v topbaru ---------- */
.topbar__dropdown {
position: relative;
display: inline-block;
}
.topbar__dropdown-toggle {
cursor: pointer;
}
.topbar__dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
flex-direction: column;
min-width: 160px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
z-index: 20;
overflow: hidden;
}
.topbar__dropdown-menu a {
padding: var(--space-2) var(--space-3);
white-space: nowrap;
color: var(--color-text);
}
.topbar__dropdown-menu a:hover {
background: var(--color-bg);
text-decoration: none;
}
/* :hover pro myš, :focus-within pro klávesnici/dotyk - jinak menu nejde
otevřít bez myši */
.topbar__dropdown:hover .topbar__dropdown-menu,
.topbar__dropdown:focus-within .topbar__dropdown-menu {
display: flex;
}
/* ---------- Filtr a tabulka produktů ---------- */
.products-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.products-filter .filter-group {
display: flex;
align-items: center;
gap: var(--space-2);
}
.products-filter label {
margin-bottom: 0;
white-space: nowrap;
}
.products-filter select {
width: auto;
min-width: 160px;
}
.products-table {
width: 100%;
border-collapse: collapse;
background: var(--color-surface);
}
.products-table th,
.products-table td {
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border);
text-align: left;
}
/* Název a Kategorie smí být dlouhé - necháme je zalomit na víc řádků
(obsah má mezery, takže max-width v auto layoutu funguje spolehlivě) */
.products-table td.col-name {
white-space: normal;
max-width: 220px;
word-break: break-word;
}
.products-table td.col-category {
white-space: normal;
max-width: 160px;
word-break: break-word;
}
.products-table thead th {
background: var(--color-surface-tint);
font-weight: 600;
color: var(--color-text-muted);
}
.products-table th a {
color: inherit;
text-decoration: none;
}
.products-table th a:hover { text-decoration: underline; }
.products-table tbody tr:hover { background: var(--color-bg); }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
text-align:right;
-moz-appearance: textfield;
appearance: textfield;
}
/* ---------- Inline editovatelná pole v tabulce ---------- */
.editable-field {
width: 90px;
padding: var(--space-1) var(--space-2);
font-family: inherit;
font-size: 14px;
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
text-align: right;
transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
/* konkrétní pole si podle potřeby jen upraví šířku - kombinuj s .editable-field,
např. class="editable-field editable-field-price" */
.editable-field-qty { width: 80px !important; }
.editable-field-price { width: 110px !important; }
.editable-field:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.editable-field.field-saved {
border-color: var(--color-primary);
background: var(--color-success-bg);
}
.editable-field.field-error {
border-color: var(--color-danger);
background: var(--color-error-bg);
}
/* skrytí šipek u number inputu (Chrome/Safari + Firefox) */
.editable-field::-webkit-outer-spin-button,
.editable-field::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.editable-field[type='number'] {
-moz-appearance: textfield;
appearance: textfield;
}
/* ---------- Honeypot pole proti botům (login formulář) ---------- */
.hp-field {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
overflow: hidden !important;
}
/* ---------- Košík widget ---------- */
.cart-widget {
position: fixed;
top: 50%;
right: var(--space-4);
transform: translateY(-50%);
z-index: 30;
width: 240px;
max-height: 70vh;
overflow-y: auto;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
padding: var(--space-3);
}
.cart-widget__header {
display: flex;
align-items: center;
gap: var(--space-2);
font-weight: 700;
color: var(--color-text);
margin-bottom: var(--space-2);
}
.cart-widget__header svg { color: var(--color-primary); flex-shrink: 0; }
.cart-widget__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 4px;
background: var(--color-accent);
color: #1f1406;
font-size: 11px;
font-weight: 700;
border-radius: 999px;
margin-left: auto;
}
.cart-widget__list {
list-style: none;
margin: 0 0 var(--space-2);
padding: 0;
}
.cart-widget__list li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-1) 0;
border-bottom: 1px solid var(--color-border);
font-size: 13px;
}
.cart-widget__list li:last-child { border-bottom: none; }
.cart-widget__item-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cart-widget__item-qty {
flex-shrink: 0;
color: var(--color-text-muted);
font-size: 12px;
}
.cart-widget__more {
font-size: 12px;
color: var(--color-text-muted);
margin: 0 0 var(--space-2);
}
.cart-widget__empty {
font-size: 13px;
margin: 0 0 var(--space-2);
}
.cart-widget__total {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--space-2);
margin-bottom: var(--space-3);
border-top: 1px solid var(--color-border);
font-size: 14px;
}
/* ---------- Drobné utility ---------- */
.text-muted { color: var(--color-text-muted); }
.text-right { text-align: right !important; }
.text-danger { color: var(--color-danger); font-weight: 600; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.btn-icon { padding: var(--space-2); min-width: 32px; }
/* ==========================================================================
Responzivita – mobil (do 640px)
========================================================================== */
@media (max-width: 640px) {
.container { padding: var(--space-4) var(--space-3); }
h1 { font-size: 20px; }
.topbar {
flex-direction: column;
align-items: stretch;
position: static;
max-width: none;
border-left: none;
border-right: none;
border-radius: 0;
}
.topbar__row { width: 100%; }
.topbar__toggle { display: flex; }
.topbar__nav {
display: none;
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 0;
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.topbar__nav.is-open { display: flex; }
.topbar__nav a { padding: var(--space-2) 0; }
.topbar__logout {
margin-left: 0;
margin-top: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.card { padding: var(--space-4); }
/* tlačítka v akční liště přes celou šířku, snazší dotykové ovládání */
.actions { flex-direction: column; }
.actions .btn { width: 100%; }
/* tabulky: necháváme horizontální scroll místo lámání layoutu,
je to nejjednodušší a nejspolehlivější řešení bez úprav šablon */
th, td { padding: var(--space-2) var(--space-3); }
td.actions-cell { flex-direction: column; gap: var(--space-2); }
.products-table { font-size: 13px; }
.products-table th,
.products-table td { padding: var(--space-2); }
.products-table td.col-name { max-width: 120px; }
.products-table td.col-category { max-width: 90px; }
.editable-field-qty { width: 60px !important; }
.editable-field-price { width: 80px !important; }
.cart-widget {
position: static;
top: auto;
bottom: auto;
right: auto;
left: auto;
transform: none;
width: auto;
max-height: none;
margin-top: var(--space-4);
}
.login-page { padding: var(--space-4) var(--space-3); }
.login-box .card { padding: var(--space-4); padding-top: calc(var(--space-4) + 4px); }
}
/* Respektovat preferenci omezeného pohybu */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}