h1, h4 {
font-family: 'Nunito Sans', sans-serif
}
h1 {
margin-top: 25px
}
.navbar-brand img {
width: 272px;
max-width: 100%;
margin-top: 0
}
.logoDark {
display: none
}
.twhite {
color: #fff;
}
.menu-navigation-container {
background: #f2f0e3;
border-radius: 4px;
padding: 0 0;
margin: 20px 0;
overflow: hidden;
}
.user-info-box {
max-width: 320px;
float: right;
padding: 5px 5px !important;
border-radius: 4px;
background: #f2f0e3
}
.menu li {
line-height: 45px;
font-size: 18px;
padding: 0 5px;
}
.menu li:hover {
background: rgba(0, 0, 0, 0.05);
border-radius: 5px;
}
.menu li a {
color: #4a4948;
display: block;
}
.menu li .fa {
display: inline-block;
width: 34px;
padding-left: 10px;
}
.green {
color: #5e9e43
}
.pad10 {
padding: 10px;
}
.pad15 {
padding: 15px;
}
.oznam {
font-size: 16px;
opacity: 0.8
}
.footer-block {
background: rgba(0, 0, 0, 0.2);
display: none;
}
.actpage {
background: #5e9e43;
color: #fff
}
.strankovanie a {
background: #f2f0e3;
color: #5e9e43;
}
.strankovanie a, .strankovanie b {
border-radius: 4px;
display: inline-block;
padding: 8px;
margin-right: 5px;
}
.message {
background: rgba(43,58,39,.06);
border: 1px solid rgba(43,58,39,.18);
border-left: 4px solid var(--green-deep);
padding: 12px 16px;
border-radius: 0 8px 8px 0;
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 600;
color: var(--green-deep);
box-shadow: var(--shadow-sm);
}
.message .check-ico {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--green-deep);
color: var(--cream);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
font-weight: 700;
}
.message a { color: var(--green-deep); font-weight: 700; text-decoration: underline; }
.message a:hover { color: var(--green-moss); }
.message-error {
background: rgba(139,46,46,.08);
border: 1px solid rgba(139,46,46,.2);
border-left: 4px solid var(--red-deep);
padding: 12px 16px;
border-radius: 0 8px 8px 0;
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 600;
color: var(--brown-dark);
box-shadow: var(--shadow-sm);
}
.message-error .warn-ico {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--red-deep);
color: var(--cream);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
font-weight: 700;
}
.message-error .fa {
color: var(--red-deep);
font-size: 16px;
flex-shrink: 0;
}
.message-error a { color: var(--red-deep); font-weight: 700; text-decoration: underline; }
.message-error a:hover { color: var(--red-blood); }
.message-error-list { margin: -8px 0 10px 16px; padding-left: 16px; font-size: 13px; color: var(--red-deep); }
.edit {
display: inline-block;
color: #39A7F1;
margin-right: 8px;
font-size: 11px
}
.del {
display: inline-block;
color: #39A7F1;
margin-right: 8px;
font-size: 11px
}
.chov th {
background: #e0ddc8;
padding: 6px;
}
.chov tr {
line-height: 30px;
border-bottom: 1px solid #f3f0e1
}
.chov tr:nth-child(odd) {
background: #f3f0e1;
}
.chov tr:nth-child(4n+2) {
background: #fff !important;
}
.chov input {
width: 100%
}
.chov {
border-collapse: collapse;
}
.zalomenka th {
background: #e0ddc8;
padding: 6px 0;
}
.zalomenka tr {
line-height: 30px;
border-bottom: 1px solid #f3f0e1
}
.zalomenka tr:nth-child(odd) {
background: #f3f0e1;
}
.zalomenka tr:nth-child(4n+2) {
background: #fff !important;
}
.zalomenka input {
width: 100%
}
.zalomenka {
border-collapse: collapse;
}
.logged {
font-size: 12px;
}
input:disabled {
background: #eee;
}
.bluelnk {
color: #369de2;
font-weight: bold;
}
.fnt10 {
font-size: 10px;
}
.setting-admin {
color: #5E9E43 !important;
}
.main-container table tr {
background: rgba(255, 255, 255, 0.5)
}
.megamenu table {
color: #222
}
.network-page__image {
max-width: 65px;
max-height: 65px;
position: relative;
}
.network-page__image-holder {
padding-top: 1px;
width: 73px;
height: 73px;
display: table;
opacity: 1;
}
.network-img__holder {
position: absolute;
left: 45px;
top: 35px;
}
.network-img__centerer {
display: table-cell;
vertical-align: middle;
}
.network-box {
position: relative;
}
.network__button a {
color: #ffffff;
font-size: 21px;
font-size: 2.1rem;
font-weight: 400;
line-height: 16px;
}
.site-footer__col {
margin-bottom: 100px;
}
.network-box__col {
width: 73px;
display: inline-block;
vertical-align: top;
}
.network-box__col--left {
margin-right: 30px;
}
.network-box__col--right {
width: 112px;
padding-top: 15px;
}
.network__button .instagram__button {
border-radius: 3px;
background-color: #f56e3f;
color: #ffffff;
font-family: "Nunito Sans";
font-size: 13px;
font-weight: 700;
padding: 3px 21px;
}
.social-button {
margin-top: 10px;
}
#sociall {
background-color: #333;
background-image: url(/social/photopaticka.jpg);
background-size: cover;
background-position: center;
text-align: center;
padding: 30px 0 10px 0;
/*max-width:1200px;*/
}
.social-list__item:not(:last-child) {
margin-right: 0;
}
.social-list__item:last-child {
position: relative;
left: 50px;
}
.social-list__item {
display: inline-block;
margin-bottom: 30px;
}
.visitlnkmini {
position: relative;
margin-top: 10px;
height: 48px;
width: 48px;
border-radius: 24px;
background: rgba(0, 0, 0, 0.5);
display: inline-block;
line-height: 48px;
color: #fff;
text-align: center;
font-size: 18px;
float: left;
margin-right: 20px;
margin-left: 20px;
}
.visitlnk {
position: relative;
margin-top: 10px;
height: 48px;
width: 48px;
border-radius: 24px;
background: rgba(0, 0, 0, 0.5);
display: inline-block;
line-height: 48px;
color: #fff;
text-align: center;
font-size: 18px;
float: left;
margin-right: 20px;
margin-left: 20px;
}
.vlesebg {
background: #d8f9ca;
}
.vlese {
color: #378335
}
@media (max-width: 779px) {
.menu-navigation-container {
margin: 0 -10px;
background: #378335;
border-radius: 0;
padding-bottom: 0 !important;
}
.navbar-brand img {
margin-top: 10px
}
.menu-navigation-container a {
color: #fff !important;
}
.menu-navigation-container li {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
display: block;
font-size: 16px;
line-height: 42px;
}
.userMenu {
position: absolute;
top: 5px;
right: 5px;
text-align: right;
background: transparent !important;
}
/*#sociall{display:none}*/
.social-list__item {
margin-right: 0 !important;
}
.adminlnk {
background: #2e6f2d
}
.eshoplnk {
background: #1e5a1d
}
}
.loga {
background: #2f4e21;
text-align: center;
}
.loga a {
display: inline-block;
padding: 20px;
}
span.required {
color: #3498DB;
}
.filter {
padding: 20px;
border-radius: 5px;
background: #e0ddc877;
margin-bottom: 20px;
}
.filter label {
width: 70px;
float: left;
line-height: 36px;
text-align: right;
padding-right: 6px;
}
.filter input, .filter select {
width: 200px;
float: left;
}
.filter .btn {
padding: 5px !important;
}
#mapid {
min-height: 780px;
width: 100%;
}
.gallery {
margin: 10px 0 !important;
display: block;
padding: 0;
}
.gallery li {
list-style: none;
perspective: 100px;
-webkit-perspective: 100px;
margin: 1px;
float: left;
position: relative;
transition: .1s;
-webkit-transition: 0.1s;
}
.gallery li.video::before {
content: '\25BA';
color: #FFF;
font-size: 20px;
height: 20px;
width: 20px;
line-height: 0.9;
position: absolute;
bottom: 3px;
left: 4px;
z-index: 1;
background: rgba(0, 0, 0, 0.4);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.4);
border-radius: 0 3px 0 0;
pointer-events: none;
opacity: 0;
transition: .5s 0.2s;
}
.gallery li.loaded.video::before {
opacity: 1;
}
.gallery a.img {
display: block;
width: 150px;
height: 110px;
vertical-align: bottom;
overflow: hidden;
background: rgba(0, 0, 0, 0.1);
transition: .4s ease-out;
-webkit-transition: 0.4s ease-out;
-webkit-transform: rotateX(90deg) translate(-50px, -50%);
transform: rotateX(90deg) translate(-50px, -50%);
}
.gallery a.img:active, .gallery a.img:focus {
outline: none;
}
.gallery a.img img {
min-height: 100%;
width: 100%;
transition: .3s ease-out;
-webkit-transition: 0.3s ease-out;
margin: 3px;
}
.gallery .loaded a.img {
-webkit-transform: rotateX(0deg) translate(0, 0);
transform: rotateX(0deg) translate(0, 0);
}
.gallery li.loaded:hover {
z-index: 2;
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
.gallery li.loaded a.img:hover {
box-shadow: 0 0 0 2px #FFF, 0 0 3px 5px #888;
transition: .1s;
-webkit-transition: 0.1s;
}
.gallery li.loaded:hover img {
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
.gallery li.loaded.video:hover::before {
opacity: 0;
}
table {
border-collapse: collapse;
padding: 0;
text-indent: 0;
}
/*
.eyel{position:Absolute; z-index:20; background:#fff; box-shadow:1px 1px 1px 1px #888; border-radius:3px; height:4px; width:5px; left:10px; top:14px;}
.eyer{position:Absolute; z-index:20; background:#fff; box-shadow:1px 1px 1px 1px #666; border-radius:3px; height:4px; width:5px; right:10px; top:14px;}
*/
.eyel, .eyer {
display: none
}
.btn-question {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all .15s;
text-decoration: none;
white-space: nowrap;
border: 1px solid transparent;
background-color: #d49163;
color: #FFF
}
.btn-question:active, .btn-question:focus, .btn-question:hover {
background-color: #bb7748;
border-color: #f3ae80;
color: #FFF;
text-decoration: none;
}
.pomoc {
display: none;
clear: both;
background: #f1c8ac;
border: 1px solid #d49163;
margin: 23px 0 13px 0;
padding: 17px;
line-height: 24px;
border-radius: 4px;
}
.pldata {
font-size: 0;
width: 1px !important;
padding: 0
}
.fa-info-circle:before {
font-size: 20px
}
.odmeny {
background: #fdca6a;
padding: 10px;
}
.overal {
position: relative;
display: inline-block;
float: left;
}
.overal .delete {
display: none
}
.overal:hover .delete {
display: block
}
.form-group {
position: relative;
}
.zonakludu {
color: #1598f9;
}
.obsadene {
color: red;
}
.obsadene .ui-state-hover {
background: red !important;
color: var(--ink);
}
.blokovana {
color: #842121;
font-weight: 700;
}
.ui-multiselect-checkboxes li.blokovana label.ui-state-disabled {
opacity: 1;
text-decoration: line-through;
}
.mtop20 {
margin-top: 20px;
}
table th {
text-align: left
}
#ui-datepicker-div {
/*position: fixed !important;*/
}
.loga .container {
display: flex;
flex-wrap: wrap;
}
.site-footer__copyright--kniha img {
border-radius: 10px;
}
.kalendar-obal {
padding: 15px;
margin-bottom: 30px;
border-radius: 5px;
background: #FBFBF7;
}
.sms {
padding: 15px;
border-radius: 5px;
background: #FBFBF7;
font-size: 20px;
font-weight: bold;
color: #d49163;
}
.smsobal {
color: #777;
line-height: 22px
}
.kalendar-obal h3 {
position: relative;
top: 4px;
}
.mapplaceholder {
padding: 55px;
border-radius: 5px;
background: #FBFBF7;
text-align: center;
font-size: 16px;
}
/* ---- jQuery UI Multiselect Widget ---- */
.ui-multiselect {
box-sizing: border-box;
width: 100% !important;
text-align: left;
background: #fff !important;
background-image: none !important;
border: 1px solid var(--border) !important;
border-radius: 6px !important;
padding: 10px 12px !important;
font-size: 13px !important;
font-family: 'Inter', sans-serif !important;
color: var(--ink) !important;
cursor: pointer;
box-shadow: none !important;
transition: border-color .15s, box-shadow .15s;
}
.ui-multiselect:hover { border-color: rgba(107,68,35,.4) !important; }
.ui-multiselect.ui-state-active,
.ui-multiselect.ui-state-focus {
outline: none !important;
border-color: var(--gold) !important;
box-shadow: 0 0 0 3px rgba(201,169,97,.18) !important;
}
.ui-multiselect .ui-multiselect-open { float: right; opacity: .5; }
.ui-multiselect-menu {
display: none;
position: absolute;
z-index: 9999;
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow-md);
overflow: hidden;
min-width: 240px;
max-width: 100vw;
flex-direction: column;
box-sizing: border-box;
}
.ui-multiselect-menu.ui-multiselect-listbox { position: relative; z-index: 0; }
.ui-multiselect-header {
display: flex;
align-items: center;
padding: 8px 12px;
border-bottom: 1px solid var(--border);
background: var(--cream-light, #f9f3e8);
flex-shrink: 0;
}
.ui-multiselect-header > ul {
display: flex;
gap: 12px;
list-style: none;
margin: 0; padding: 0;
}
.ui-multiselect-header li { float: none; margin: 0; }
.ui-multiselect-header a {
font-size: 11px;
font-weight: 700;
letter-spacing: .6px;
text-transform: uppercase;
text-decoration: none;
color: var(--brown-wood, #6b4423);
cursor: pointer;
transition: color .15s;
}
.ui-multiselect-header a:hover { color: var(--gold-dark, #a07828); text-decoration: none; }
.ui-multiselect-header .ui-icon { display: none; }
.ui-multiselect-header .ui-multiselect-close {
float: none;
margin-left: auto;
font-size: 18px;
line-height: 1;
color: var(--text-dim, #5a4a33);
cursor: pointer;
padding: 0 2px;
text-decoration: none;
}
.ui-multiselect-header .ui-multiselect-close:hover { color: var(--ink); }
.ui-multiselect-checkboxes {
flex: 1;
overflow-y: auto;
max-height: 300px;
padding: 4px 0;
margin: 0;
border: 0;
overscroll-behavior: contain;
}
.ui-multiselect-checkboxes li:not(.ui-multiselect-optgroup) {
list-style: none;
padding: 0;
clear: none;
font-size: 13px;
}
.ui-multiselect-checkboxes label {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 14px;
cursor: pointer;
border: none;
text-indent: 0;
font-family: 'Inter', sans-serif;
font-size: 13px;
transition: background .1s;
white-space: nowrap;
}
.ui-multiselect-checkboxes label:hover { background: rgba(201,169,97,.1); }
.ui-multiselect-checkboxes li.ui-state-highlight label { background: rgba(201,169,97,.18); }
.ui-multiselect-checkboxes input[type=checkbox] {
position: static;
top: auto;
cursor: pointer;
width: 14px;
height: 14px;
flex-shrink: 0;
margin: 0;
accent-color: var(--gold, #c9a961);
}
.ui-multiselect-checkboxes img { height: 24px; vertical-align: middle; margin-right: 4px; }
.ui-multiselect-grouplabel {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--brown-wood);
padding: 8px 14px 4px;
border-bottom: 1px solid var(--border);
}
.ui-multiselect-selectable { cursor: pointer; }
.ui-multiselect-optgroup > ul { padding: 0; }
.ui-multiselect-collapsed > ul { display: none; }
.ui-multiselect-measure > .ui-multiselect-header,
.ui-multiselect-measure > .ui-multiselect-checkboxes { float: left; }
.ui-multiselect-measure > .ui-multiselect-checkboxes { margin: 4px; overflow-y: auto; }
.ui-multiselect-resize { border: 2px dotted var(--gold); }
.leaflet-control-fullscreen a {
background-size: 40px 80px !important;
}
.leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a {
background-position: 2px -38px !important;
}
.leaflet-draw-draw-polygon {
background-size: 1250% !important;
background-position: -59px -7px !important;
}
.leaflet-draw-edit-edit {
background-position: -219px -1px !important;
background-size: 440px 44px !important;
}
.leaflet-draw-edit-remove {
background-position: -264px -1px !important;
background-size: 440px 44px !important;
}
.leaflet-draw-actions {
left: 45px !important;
}
.leaflet-popup-content {
margin: 9px !important;
min-width: 150px;
}
.leaflet-popup-content input {
font-size: 14px;
}
.leaflet-popup-content .btn {
padding: 10px !important;
}
.badge {
display: inline-block;
padding: 3px 5px;
font-size: 12px;
font-weight: bold;
line-height: 1;
text-align: center;
white-space: nowrap;
position: relative;
top: -2px;
background: #f2c686;
border-radius: 5px;
}
.hidden{display: none}
.hidden-menu {
display: none
}
/* ---- tagsInput widget ---- */
div.tagsinput {
box-sizing: border-box;
width: 100% !important;
min-height: 42px;
height: auto !important;
background: #fff;
border: 1px solid var(--border) !important;
border-radius: 6px !important;
padding: 6px 8px !important;
font-family: 'Inter', sans-serif;
transition: border-color .15s, box-shadow .15s;
overflow: visible;
}
div.tagsinput:focus-within {
border-color: var(--gold) !important;
box-shadow: 0 0 0 3px rgba(201,169,97,.18) !important;
}
div.tagsinput span.tag {
display: inline-flex; align-items: center; gap: 5px;
background: var(--green-deep);
color: var(--gold-light);
border: 1px solid transparent;
border-radius: 5px;
padding: 3px 8px;
font-size: 12px;
font-family: 'Inter', sans-serif;
font-weight: 600;
margin: 2px 4px 2px 0;
float: none;
}
div.tagsinput span.tag a {
color: var(--gold);
font-weight: 700;
font-size: 14px;
line-height: 1;
opacity: .7;
text-decoration: none;
transition: opacity .1s;
}
div.tagsinput span.tag a:hover { opacity: 1; color: var(--cream); }
div.tagsinput input {
border: none !important;
outline: none;
background: transparent;
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--ink);
padding: 4px 4px;
margin: 2px 0;
width: auto !important;
min-width: 120px;
}
div.tagsinput div { display: inline; float: none; }
.tags_clear { clear: both; }
.not_valid { background: rgba(139,46,46,.1) !important; color: var(--red-deep) !important; }
.ui-autocomplete {
position: absolute;
z-index: 9999;
list-style: none;
margin: 2px 0 0;
padding: 4px 0;
background: #fff;
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0,0,0,.10);
max-height: 220px;
overflow-y: auto;
box-sizing: border-box;
}
.ui-autocomplete .ui-menu-item-wrapper {
display: block;
padding: 8px 14px;
font-size: 13px;
color: var(--ink);
cursor: pointer;
white-space: nowrap;
}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper:hover {
background: rgba(201,169,97,.13);
color: var(--brown-dark);
outline: none;
}
.form-hint-link {
font-size: 11px;
font-weight: 600;
color: var(--brown-wood);
text-decoration: underline;
cursor: pointer;
margin-top: 4px;
display: inline-block;
letter-spacing: .3px;
transition: color .15s;
}
.form-hint-link:hover { color: var(--green-deep) !important; }
/* ---- jQuery UI Datepicker + Timepicker ---- */
.ui-datepicker {
background: var(--cream-light);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--shadow-lg);
padding: 0;
width: 280px;
font-family: 'Inter', sans-serif;
font-size: 13px;
z-index: 9999 !important;
overflow: hidden;
}
.ui-datepicker-header {
background: linear-gradient(135deg, var(--green-deep), var(--green-dark));
color: var(--gold);
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 0;
position: relative;
}
.ui-datepicker-title {
font-family: 'Lora', serif;
font-size: 14px;
font-weight: 700;
color: var(--gold);
text-align: center;
flex: 1;
letter-spacing: .5px;
}
.ui-datepicker-prev,
.ui-datepicker-next {
width: 28px; height: 28px;
border-radius: 6px;
border: 1px solid rgba(201,169,97,.3);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s;
position: static;
top: auto; left: auto; right: auto;
}
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover { background: rgba(201,169,97,.2); }
.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon { display: none; }
.ui-datepicker-prev::after { content: '‹'; color: var(--gold); font-size: 18px; line-height: 1; }
.ui-datepicker-next::after { content: '›'; color: var(--gold); font-size: 18px; line-height: 1; }
.ui-datepicker-prev.ui-state-disabled,
.ui-datepicker-next.ui-state-disabled { opacity: .35; cursor: default; }
.ui-datepicker table { width: 100%; border-collapse: collapse; padding: 8px 10px 4px; display: block; }
.ui-datepicker thead th {
font-size: 10px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; color: var(--brown-wood);
padding: 6px 0 4px; text-align: center;
}
.ui-datepicker tbody td { padding: 2px; text-align: center; }
.ui-datepicker td .ui-state-default {
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; margin: 0 auto;
border-radius: 6px; border: none;
font-size: 12px; font-weight: 500; color: var(--ink);
text-decoration: none; cursor: pointer;
transition: background .12s, color .12s;
}
.ui-datepicker td .ui-state-default:hover,
.ui-datepicker td .ui-state-hover { background: rgba(201,169,97,.18); color: var(--green-deep); }
.ui-datepicker td .ui-state-active,
.ui-datepicker td .ui-state-highlight.ui-state-active {
background: var(--green-deep) !important;
color: var(--gold) !important;
font-weight: 700;
}
.ui-datepicker td .ui-state-highlight {
background: rgba(201,169,97,.25);
color: var(--green-deep);
font-weight: 700;
}
.ui-datepicker-other-month .ui-state-default { color: var(--parchment-dark); }
.ui-datepicker-unselectable .ui-state-default { opacity: .35; cursor: default; }
.ui-datepicker-week-end .ui-state-default { color: var(--red-deep); }
/* Timepicker section */
.ui-timepicker-div {
padding: 8px 12px 10px;
border-top: 1px solid var(--border);
background: var(--cream);
}
.ui-timepicker-div .ui-widget-header {
font-family: 'Inter', sans-serif;
font-size: 10px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; color: var(--brown-wood);
margin-bottom: 6px;
background: none; border: none; padding: 0;
}
.ui-timepicker-div dl { margin: 0; }
.ui-timepicker-div dl dt {
font-size: 10px; font-weight: 700; letter-spacing: .8px;
text-transform: uppercase; color: var(--brown-wood);
float: left; clear: left; padding: 0; margin-top: 8px; line-height: 20px;
}
.ui-timepicker-div dl dd { margin: 0 0 4px 42%; }
.ui-timepicker-div .ui_tpicker_time_input {
background: #fff; border: 1px solid var(--border);
border-radius: 5px; padding: 4px 8px;
font-size: 13px; font-family: 'Inter', sans-serif;
color: var(--ink); width: calc(100% - 18px);
}
.ui-timepicker-div .ui_tpicker_time_input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,169,97,.2); }
/* Slider inside timepicker */
.ui-timepicker-div .ui-slider {
height: 5px; border-radius: 3px;
background: var(--parchment); border: none;
margin-top: 8px;
}
.ui-timepicker-div .ui-slider-range {
background: var(--gold); border-radius: 3px; height: 100%;
}
.ui-timepicker-div .ui-slider-handle {
width: 14px; height: 14px; border-radius: 50%;
background: var(--gold); border: 2px solid #fff;
box-shadow: 0 0 0 2px var(--gold-dark);
top: -5px; cursor: grab;
outline: none;
}
.ui-timepicker-div .ui-slider-handle:active { cursor: grabbing; }
.ui-timepicker-div .ui-slider-handle.ui-state-active,
.ui-timepicker-div .ui-slider-handle.ui-state-focus { outline: none; }
/* Button pane (Now / Done) */
.ui-datepicker-buttonpane {
padding: 6px 10px 10px;
border-top: 1px solid var(--border);
display: flex; justify-content: flex-end; gap: 6px;
}
.ui-datepicker-buttonpane button {
font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700;
padding: 6px 14px; border-radius: 6px; cursor: pointer;
border: 1px solid var(--border); background: var(--cream);
color: var(--brown-dark); transition: all .15s;
}
.ui-datepicker-buttonpane button:hover { background: var(--green-deep); color: var(--gold); border-color: var(--green-deep); }
.ui-datepicker-buttonpane .ui-datepicker-close {
background: var(--green-deep); color: var(--gold); border-color: var(--green-deep);
}
.ui-datepicker-buttonpane .ui-datepicker-close:hover { background: var(--green-dark); }
.ui-widget {
max-width: 100%;
}
.hidentd {
height: 1px;
width: 1px !important;
display: block;
overflow: hidden;
}
.fa span {
font-size: 0
}
.hiddenscreen {
height: 1px;
width: 1px !important;
display: block;
overflow: hidden;
}
.fc-toolbar-title {
font-size: 16px !important;
color: black;
}
.legenda {
padding: 10px;
background: #FBFBF7
}
/*buttony na mobil*/
@media (max-width: 779px) {
h1 { font-size: 24px; margin-top: 22px; margin-bottom: 12px; }
h2 { font-size: 20px; margin-top: 18px; margin-bottom: 8px; }
.mob-btn-3 .fa {
position: relative;
top: 3px;
}
.mob-btn-3 {
display: inline-block;
float: left;
margin-left: 1%;
margin-bottom: 2%;
width: 30%;
border-radius: 3px;
background-color: #3498db;
color: #FFF;
text-align: center;
opacity: 0.8
}
.mob-btn-3:hover {
color: #fff;
opacity: 1
}
.mob-btn-3.del {
background: #a71010
}
.mob-btn-3.viac {
background: black;
}
}
@media (max-width: 620px) {
form label {
clear: both
}
}
@media (min-width: 673px) and (max-width: 920px) {
form label:nth-of-type(2n+1) {
clear: both
}
}
@media (min-width: 921px) and (max-width: 992px) {
form label:nth-of-type(3n+1) {
clear: both
}
}
@media (min-width: 993px) and (max-width: 1199px) {
form label:nth-of-type(2n+1) {
clear: both
}
}
.select2-container--default .select2-results > .select2-results__options {
max-height: 400px !important;
}
.adminlnk {
background: rgba(0, 0, 0, 0.03);
}
.adminlnk:hover {
background: rgba(0, 0, 0, 0.08) !important;
}
.leaflet-container { font-size:13px !important; }
.image-container {
padding:20px;
}
.image-container img {
max-width:90%; width:200px;
border-radius: 10px;
transform: rotate(-10deg); /* Rotate images slightly and adjust position */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add a subtle shadow effect */
z-index: 1; /* Ensure images overlap and the first one appears on top */
}
/* Adjust the second image's position */
.image-container a:nth-child(2) img {
transform: rotate(10deg); /* Rotate the second image in the opposite direction */
z-index: 0; /* Ensure the second image appears behind the first */
}
/* ================================================================
NOVÝ DIZAJNOVÝ SYSTÉM — HUBERT ŠABLÓNA
================================================================ */
* {
box-sizing: border-box;
text-decoration: none;
margin: 0;
padding: 0;
}
:root {
--green-deep: #2b3a27;
--green-dark: #1a2416;
--green-moss: #4a5d3f;
--green-olive: #6b7752;
--brown-dark: #3d2817;
--brown-wood: #6b4423;
--brown-leather: #8b6f47;
--cream: #f4e8d0;
--cream-light: #faf3e3;
--surface: var(--cream-light);
--parchment: #e8d9b8;
--parchment-dark: #d4c299;
--red-deep: #8b2e2e;
--red-blood: #6d1f1f;
--gold: #c9a961;
--gold-light: #e0c37a;
--gold-dark: #9e8240;
--ink: #1f1a14;
--text-dim: #5a4a33;
--border: rgba(107, 68, 35, 0.18);
--shadow-sm: 0 1px 3px rgba(0,0,0,.06);
--shadow-md: 0 4px 12px rgba(0,0,0,.08);
--shadow-lg: 0 12px 40px rgba(0,0,0,.12);
}
html {
height: 100%;
}
body {
height: 100%;
color: var(--ink);
font-size: 14px;
line-height: 1.5;
overflow: hidden;
-webkit-font-smoothing: antialiased;
font-family: 'Inter', 'Nunito Sans', sans-serif !important;
background: linear-gradient(180deg, #f7ecd3 0%, #eadcbc 100%) !important;
background-color: #f7ecd3 !important;
}
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
repeating-linear-gradient(45deg, rgba(107,68,35,.015) 0 2px, transparent 2px 6px),
repeating-linear-gradient(-45deg, rgba(61,40,23,.015) 0 1px, transparent 1px 5px);
pointer-events: none;
z-index: 0;
}
h1, h2, h3, h4 {
font-family: 'Lora', 'Nunito Sans', serif;
}
h1 { font-size: 28px; margin-top: 28px; margin-bottom: 14px; color: var(--ink); }
h2 { font-size: 22px; margin-top: 22px; margin-bottom: 10px; color: var(--green-deep); }
a { color: var(--brown-wood); }
a:hover, a:focus { color: var(--green-deep) !important; }
/* ---- SIDEBAR OVERLAY ---- */
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(26,19,9,.55);
z-index: 90;
opacity: 0;
transition: opacity .25s;
}
.sidebar-overlay.show { display: block; opacity: 1; }
/* ---- APP SHELL ---- */
.app-shell {
display: grid;
grid-template-columns: 260px 1fr;
height: 100%;
position: relative;
}
/* ---- SIDEBAR ---- */
.sidebar {
background: linear-gradient(180deg, #2b3a27 0%, #1a2416 100%);
color: var(--cream);
display: flex;
flex-direction: column;
border-right: 1px solid rgba(201,169,97,.25);
box-shadow: 2px 0 20px rgba(0,0,0,.18);
position: relative;
overflow: hidden;
}
.sidebar::before {
content: '';
position: absolute; top: 0; right: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, transparent, var(--gold) 15%, var(--gold) 85%, transparent);
opacity: .4;
pointer-events: none;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(201,169,97,.3); border-radius: 2px; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(201,169,97,.3); border-radius: 2px; }
.brand {
padding: 20px 20px 16px;
border-bottom: 1px solid rgba(201,169,97,.2);
flex-shrink: 0;
}
.brand-link { display: block; }
.brand-logo { max-width: 100%; height: auto; max-height: 56px; object-fit: contain; margin: auto; display: block; }
.logoDark { display: none; }
.nav-label {
padding: 14px 20px 5px;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--brown-leather);
}
.nav-label--manager {
color: var(--gold, #c9a961);
border-top: 1px solid rgba(201, 169, 97, 0.25);
margin-top: 4px;
}
.nav-list { list-style: none; padding: 0 10px; margin: 0 0 4px; }
.nav-list li { line-height: normal; font-size: inherit; padding: 0; background: none !important; border-radius: 0; }
.nav-list li:hover { background: none !important; }
.nav-list .nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
color: rgba(244,232,208,.85) !important;
text-decoration: none;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
margin-bottom: 1px;
transition: background .15s, color .15s;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-list .nav-item:hover {
background: rgba(201,169,97,.1) !important;
color: var(--gold-light) !important;
}
.nav-list .nav-item.active {
background: linear-gradient(90deg, rgba(201,169,97,.18), transparent) !important;
color: var(--gold) !important;
font-weight: 600;
position: relative;
}
.nav-list .nav-item.active::before {
content: '';
position: absolute;
left: 0; top: 20%; bottom: 20%;
width: 3px;
background: var(--gold);
border-radius: 0 3px 3px 0;
}
.nav-list .nav-item .fa,
.nav-list .nav-item .fas,
.nav-list .nav-item .far {
width: 16px;
text-align: center;
opacity: .8;
flex-shrink: 0;
font-size: 13px;
}
.sidebar-nav { flex: 1; padding-bottom: 8px; overflow-y: auto; min-height: 0; }
.sidebar-footer {
flex-shrink: 0;
padding: 14px 20px;
border-top: 1px solid rgba(201,169,97,.15);
display: flex;
align-items: center;
gap: 10px;
background: #1a2416;
}
.sb-avatar {
width: 38px; height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brown-leather), var(--brown-dark));
border: 2px solid var(--gold);
display: flex; align-items: center; justify-content: center;
font-family: 'Lora', serif;
font-weight: 700;
color: var(--gold);
font-size: 14px;
flex-shrink: 0;
}
.sb-user-name {
font-size: 12px;
font-weight: 600;
color: var(--cream);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sb-user-role {
font-size: 10px;
color: var(--gold-light);
opacity: .8;
font-style: italic;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sb-logout {
margin-left: auto;
color: rgba(139,111,71,.8) !important;
font-size: 15px;
flex-shrink: 0;
transition: color .15s;
text-decoration: none;
}
.sb-logout:hover { color: var(--cream) !important; }
/* ---- MAIN AREA ---- */
.main {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
}
.topbar {
height: 66px;
min-height: 66px;
background: linear-gradient(180deg, var(--cream-light) 0%, var(--cream) 100%);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
padding: 0 24px;
gap: 14px;
position: relative;
box-shadow: var(--shadow-sm);
flex-shrink: 0;
z-index: 10;
}
.topbar::after {
content: '';
position: absolute; bottom: -1px; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--gold) 10%, var(--gold) 90%, transparent);
opacity: .35;
}
.menu-toggle {
display: none !important;
width: 38px; height: 38px;
background: var(--cream-light);
border: 1px solid var(--border);
border-radius: 8px;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--green-deep);
flex-shrink: 0;
padding: 0;
}
.menu-toggle svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.page-title-block { display: flex; flex-direction: column; }
.page-title {
font-family: 'Lora', 'Nunito Sans', serif;
font-size: 18px;
color: var(--green-deep);
font-weight: 700;
line-height: 1.1;
margin-top: 3px;
max-width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.top-actions {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
flex-shrink: 0;
}
.icon-btn {
width: 38px; height: 38px;
border-radius: 50%;
background: rgba(244,232,208,.7);
border: 1px solid var(--border);
display: inline-flex; align-items: center; justify-content: center;
color: var(--brown-dark) !important;
cursor: pointer;
position: relative;
transition: all .15s;
text-decoration: none;
flex-shrink: 0;
}
.icon-btn:hover {
background: var(--cream);
border-color: var(--gold);
color: var(--green-deep) !important;
text-decoration: none;
}
.icon-btn .fa, .icon-btn .fas { font-size: 14px; }
.icon-btn .dot {
position: absolute; top: 6px; right: 6px;
width: 8px; height: 8px;
background: var(--red-deep);
border-radius: 50%;
border: 2px solid var(--cream-light);
animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.55); }
}
.icon-btn .visitlnk {
width: 28px; height: 28px;
display: block;
margin: 0;
background: transparent !important;
float: none;
border-radius: 0;
line-height: normal;
font-size: inherit;
}
.icon-btn .visitlnk canvas { display: block; }
/* ---- CONTENT AREA ---- */
.main-content {
flex: 1;
overflow-y: auto;
padding: 20px 28px;
background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(201,169,97,.04), transparent);
}
.main-content::-webkit-scrollbar { width: 8px; }
.main-content::-webkit-scrollbar-track { background: transparent; }
.main-content::-webkit-scrollbar-thumb {
background: var(--parchment-dark);
border-radius: 4px;
border: 2px solid transparent;
background-clip: content-box;
}
/* ---- BUTTON OVERRIDES ---- */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: all .15s;
text-decoration: none;
white-space: nowrap;
border: 1px solid transparent;
background-color: var(--red-deep) !important;
color: var(--cream) !important;
border-color: var(--red-deep) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: var(--red-blood) !important;
border-color: var(--red-blood) !important;
color: var(--cream) !important;
text-decoration: none;
}
.btn-primary svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: all .15s;
text-decoration: none;
white-space: nowrap;
border: 1px solid transparent;
background-color: var(--green-moss) !important;
color: var(--cream) !important;
border-color: var(--green-moss) !important;
}
.btn-secondary:hover, .btn-secondary:focus {
background-color: var(--green-deep) !important;
border-color: var(--green-deep) !important;
color: var(--cream) !important;
text-decoration: none;
}
.btn-secondary svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.btn-ghost {
background: transparent;
color: var(--brown-wood) !important;
border: 1px solid var(--border);
padding: 9px 16px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: all .15s;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
white-space: nowrap;
}
.btn-ghost:hover {
border-color: var(--gold) !important;
color: var(--green-deep) !important;
background: rgba(201,169,97,.1);
text-decoration: none;
}
.btn-ghost svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.btn-ghost.btn-sm { padding: 5px 10px; font-size: 11px; letter-spacing: 0; }
.btn-primary.btn-sm { padding: 5px 10px !important; font-size: 11px !important; letter-spacing: 0 !important; }
.btn-red { background-color: var(--red-deep) !important; color: var(--cream) !important; border-color: var(--red-deep) !important; }
/* ---- FORM OVERRIDES ---- */
.form-control, .tagsinput {
background-color: rgba(250,243,227,.8);
border-color: var(--border);
color: var(--ink);
}
.form-control:focus { border-color: var(--gold) !important; }
.form-horizontal select, .form-horizontal input[type=text], .form-horizontal input[type=file],
.form-horizontal input[type=password], .form-horizontal input[type=number], .form-horizontal input[type=email],
.filter-panel select, .filter-panel input[type=text], .filter-panel input[type=number],
.filter-panel input[type=date], .filter-panel input[type=email], .otherinput {
background: rgba(250,243,227,.9);
border-color: rgba(107,68,35,.25);
color: var(--ink);
}
/* ---- TABLES / CONTENT STYLES ---- */
.main-container table tr,
.main-content table tr { background: rgba(250,243,227,.5); }
/* .zalomenka / .chov get full override below — exclude from general tint */
.main-content .zalomenka tr,
.main-content .chov tr,
.main-content .chovlov tr { background: transparent !important; }
.chov th, .zalomenka th { background: rgba(212,194,153,.5); }
.chov tr, .zalomenka tr { border-bottom: 1px solid rgba(212,194,153,.4); }
.chov tr:nth-child(odd), .zalomenka tr:nth-child(odd) { background: rgba(232,217,184,.3); }
.message {
background: rgba(43,58,39,.06);
color: var(--green-deep);
}
.message .check-ico {
background: var(--green-deep);
color: var(--cream);
}
.message-error {
background: rgba(139,46,46,.08);
color: var(--brown-dark);
}
.actpage { background: var(--gold-dark) !important; color: var(--ink) !important; }
.strankovanie a { background: var(--cream); color: var(--green-deep); }
.strankovanie b { background: var(--green-deep); color: var(--cream); }
.green { color: var(--green-deep) !important; }
.setting-admin { color: var(--green-deep) !important; }
.filter { background: rgba(212,194,153,.3); }
/* ---- FOOTER ---- */
.site-footer {
margin-top: 32px;
border-top: 1px solid var(--border, #e8d9bc);
padding: 20px 10px 28px;
background: transparent;
}
.footer-inner {
display: flex;
flex-direction: column;
gap: 14px;
}
.footer-apps {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.footer-app-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 16px;
border: 1px solid var(--border, #e8d9bc);
border-radius: 20px;
font-size: 12px;
font-weight: 600;
color: var(--ink, #2c2416);
text-decoration: none;
background: var(--cream, #f4e8d0);
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.footer-app-btn:hover {
background: var(--gold, #c9a961);
border-color: var(--gold, #c9a961);
color: var(--brown-dark, #3b2a14);
text-decoration: none;
}
/* ---- FILTER PANEL ---- */
.filter-panel {
background: var(--cream-light, #faf3e3);
border: 1px solid var(--border);
border-radius: 10px;
padding: 18px 20px;
margin-bottom: 18px;
box-shadow: 0 1px 3px rgba(0,0,0,.06);
position: relative;
}
.filter-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr auto;
gap: 14px;
align-items: end;
}
.filter-row + .filter-row { margin-top: 12px; }
.filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.filter-label {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--brown-wood, #6b4423);
float: none !important;
width: auto !important;
line-height: normal !important;
padding-right: 0 !important;
text-align: left !important;
display: block;
}
.filter-input,
.filter-select,
.filter-panel input,
.filter-panel select {
background: #fff !important;
border: 1px solid var(--border) !important;
border-radius: 6px !important;
padding: 0 12px !important;
height: 37px !important;
line-height: 37px !important;
font-size: 13px !important;
color: var(--ink, #1f1a14) !important;
transition: border-color .15s, box-shadow .15s;
width: 100% !important;
float: none !important;
box-sizing: border-box !important;
box-shadow: none;
}
.filter-input:focus,
.filter-select:focus,
.filter-panel input:focus,
.filter-panel select:focus {
outline: none !important;
border-color: var(--gold, #c9a961) !important;
box-shadow: 0 0 0 3px rgba(201,169,97,.18) !important;
}
.filter-select,
.filter-panel select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
padding-right: 30px !important;
cursor: pointer;
}
.filter-actions { display: flex; gap: 8px; align-items: flex-end; }
.filter-input-wrap { position: relative; }
.filter-input-wrap .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--brown-wood, #7a5c2e); font-size: 14px; pointer-events: none; }
.filter-input.with-icon { padding-left: 34px !important; }
.filter-panel .btn-primary {
background: var(--red-deep, #8b2e2e) !important;
color: var(--cream, #f4e8d0) !important;
border: none !important;
padding: 0 16px !important;
height: 37px !important;
border-radius: 6px !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
display: inline-flex !important;
align-items: center !important;
justify-content: center;
gap: 6px;
white-space: nowrap;
transition: background .15s;
flex-shrink: 0;
}
.filter-panel .btn-primary:hover { background: var(--red-blood, #6d1f1f) !important; }
.filter-panel .btn-primary svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
/* ---- PAGINATION (new template) ---- */
@media (max-width: 1100px) {
.filter-row { grid-template-columns: 1fr 1fr; }
.filter-row .filter-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 700px) {
.filter-row { grid-template-columns: 1fr; }
}
.footer-app-btn .fab { font-size: 13px; color: var(--brown-wood, #6b4423); }
.footer-app-btn:hover .fab { color: var(--brown-dark, #3b2a14); }
.footer-social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
border: 1px solid var(--border, #e8d9bc);
border-radius: 50%;
color: var(--brown-wood, #6b4423);
text-decoration: none;
background: var(--cream, #f4e8d0);
font-size: 13px;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.footer-social-btn:hover {
background: var(--gold, #c9a961);
border-color: var(--gold, #c9a961);
color: var(--brown-dark, #3b2a14);
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.footer-links {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
font-size: 12px;
}
.footer-links span { color: var(--ink-muted, #6b5d4a); }
.footer-links a {
color: var(--brown-wood, #6b4423);
text-decoration: none;
font-weight: 500;
transition: color 0.15s;
}
.footer-links a:hover { color: var(--green-deep, #2b3a27); }
.footer-lang {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.footer-lang img { height: 18px; width: auto; border-radius: 2px; opacity: 0.65; transition: opacity 0.15s; }
.footer-lang a:hover img { opacity: 1; }
/* suppress old footer elements that may linger */
#sociall, .site-footer__copyright--kniha, .social-list, .network-box { display: none !important; }
/* ---- MOBILE RESPONSIVE ---- */
@media (max-width: 900px) {
.app-shell { grid-template-columns: 1fr; }
.menu-toggle { display: inline-flex !important; }
.sidebar {
position: fixed;
left: -270px; top: 0; bottom: 0;
width: 260px;
z-index: 100;
transition: left .28s ease;
box-shadow: none;
}
.sidebar.open { left: 0; box-shadow: 2px 0 20px rgba(0,0,0,.18); }
html, body { overflow: hidden; }
.main-content { padding: 14px 16px 80px; }
.topbar { padding: 0 14px; gap: 10px; }
.page-title { font-size: 15px; max-width: 220px; }
}
@media (max-width: 900px) {
.top-actions .btn-back-to {
width: 36px; height: 36px;
border-radius: 50%;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
}
.top-actions .btn-back-to .btn-back-text { display: none; }
.top-actions .btn-back-to .fas { display: inline-block !important; font-size: 14px; }
}
@media (max-width: 600px) {
.page-title { font-size: 14px; max-width: 160px; }
.top-actions .btn-ghost:not(.btn-back-to) { display: none; }
}
/* ================================================================
CARD BASE — used globally across all pages
================================================================ */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--shadow-sm);
padding: 22px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.card-title {
font-family: 'Lora', serif;
font-size: 16px;
color: var(--green-deep);
font-weight: 700;
letter-spacing: .5px;
display: flex;
align-items: center;
gap: 8px;
}
.card-action {
font-size: 11px;
color: var(--brown-wood);
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
}
/* ================================================================
TABLE REDESIGN — .zalomenka / .chov / .chovlov
================================================================ */
/* Card wrapper strips padding so table fills edge-to-edge */
.table-wrap {
padding: 0 !important;
overflow-x: auto;
overflow-y: hidden;
}
/* ---- Core table reset ---- */
table.table,
.zalomenka,
.chov,
.chovlov {
border-collapse: collapse;
width: 100%;
}
/* ---- thead ---- */
table.table thead,
.zalomenka thead,
.chov thead {
background: var(--cream, #f4e8d0);
border-bottom: 2px solid var(--brown-wood, #6b4423);
}
/* ---- th ---- */
table.table th,
.zalomenka th,
.chov th,
.chovlov th {
padding: 13px 16px;
text-align: left;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--brown-dark, #3b2a14);
font-weight: 700;
background: var(--cream, #f4e8d0) !important;
white-space: nowrap;
line-height: normal;
}
/* ---- td ---- */
table.table td,
.zalomenka td,
.chov td,
.chovlov td {
padding: 14px 16px;
border-bottom: 1px solid var(--border, #e8d9bc);
font-size: 13px;
color: var(--ink, #2c2416);
line-height: 1.5;
background: none !important;
}
/* ---- row borders / striping override ---- */
.zalomenka tr,
.chov tr,
.chovlov tr {
border-bottom: none;
line-height: normal;
background: transparent !important;
}
.zalomenka tr:nth-child(odd),
.zalomenka tr:nth-child(4n+2),
.chov tr:nth-child(odd),
.chov tr:nth-child(4n+2),
.chovlov tr:nth-child(odd) {
background: transparent !important;
}
/* ---- row hover ---- */
table.table tbody tr:hover td,
.zalomenka tbody tr:hover td,
.chov tbody tr:hover td,
.chovlov tbody tr:hover td,
.zalomenka tr:hover td,
.chov tr:hover td,
.chovlov tr:hover td {
background: rgba(201,169,97,.07) !important;
}
/* ---- expandable "more" detail row ---- */
tr.more > td {
background: var(--cream, #f4e8d0) !important;
border-top: 2px solid var(--gold, #c9a961);
padding: 20px 20px;
font-size: 13px;
}
/* ---- in-table action links ---- */
table .edit,
.zalomenka .edit,
.chov .edit,
.chovlov .edit {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
color: var(--green-moss, #4a6741);
text-decoration: none;
padding: 3px 8px;
border-radius: 4px;
transition: background 0.15s;
}
table .edit:hover { background: rgba(74,103,65,.1); }
table .del,
.zalomenka .del,
.chov .del,
.chovlov .del {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
color: var(--red-deep, #8b2e2e);
text-decoration: none;
padding: 3px 8px;
border-radius: 4px;
transition: background 0.15s;
}
table .del:hover { background: rgba(139,46,46,.1); }
/* mob-btn-3 (edit/del/viac inside table) */
.mob-btn-3 {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
padding: 3px 8px;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
margin-right: 4px;
transition: background 0.15s;
}
.mob-btn-3.edit { color: var(--green-moss, #4a6741); }
.mob-btn-3.edit:hover { background: rgba(74,103,65,.1); }
.mob-btn-3.del { color: var(--red-deep, #8b2e2e); }
.mob-btn-3.del:hover { background: rgba(139,46,46,.1); }
.mob-btn-3.viac { color: var(--brown-wood, #6b4423); }
.mob-btn-3.viac:hover { background: rgba(107,68,35,.1); }
/* ---- "stale v lese" badge ---- */
.vlese {
display: inline-block;
padding: 2px 8px;
background: var(--green-deep, #2b3a27);
color: var(--gold, #c9a961);
border-radius: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
}
.vlesebg td { background: rgba(43,58,39,.04) !important; }
/* ---- tag badges (type labels) ---- */
.tag {
display: inline-block;
padding: 3px 9px;
background: var(--cream, #f4e8d0);
color: var(--brown-dark, #3b2a14);
font-size: 10px;
border-radius: 3px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
border: 1px solid var(--border, #e8d9bc);
}
.tag.medal { background: var(--gold, #c9a961); color: var(--brown-dark, #3b2a14); border-color: var(--gold, #c9a961); }
.tag.boar { background: var(--green-deep, #2b3a27); color: var(--gold, #c9a961); border-color: var(--green-deep); }
.tag.ulovok { background: var(--green-deep); color: var(--gold); border-color: var(--green-deep); }
.tag.uhyn { background: var(--red-deep); color: #fff; border-color: var(--red-deep); }
.tag.odchyt { background: var(--brown-wood); color: var(--cream); border-color: var(--brown-wood); }
.tag.chybena { background: var(--parchment); color: var(--brown-dark); border-color: var(--border); }
.tag.skupina { background: var(--gold); color: var(--brown-dark); border-color: var(--gold); }
/* ---- chovlov special highlight ---- */
.chovlov tr:hover td,
.chovlov tr:hover th,
.highlighted td,
.highlighted th {
background: rgba(201,169,97,.12) !important;
}
.chovlov td.can { background: rgba(139,46,46,.08) !important; }
/* ---- Mobile: keep zalomenka responsive stacking ---- */
@media (max-width: 799px) {
.zalomenka thead { display: none; }
.zalomenka tr {
display: block;
border-top: 2px solid var(--border, #e8d9bc);
padding: 10px 0;
}
.zalomenka td {
display: block;
border-bottom: none;
padding: 4px 14px;
}
.zalomenka td .popisok {
display: inline-block;
width: 38%;
color: var(--brown-wood, #6b4423);
font-weight: 600;
font-size: 11px;
}
.zalomenka td div { display: block; float: none !important; }
.zalomenka .pldata { display: none; }
.fa-bg-mobile {
position: absolute;
opacity: 0.06;
top: 20px; right: 10px;
font-size: 120px !important;
pointer-events: none;
}
}
@media (min-width: 800px) {
.zalomenka td .popisok { display: none; }
.fa-bg-mobile { display: none; }
}
/* ================= UTILITIES ================= */
.page-section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
/* ================= DASHBOARD ================= */
.dashboard-hero {
background:
linear-gradient(135deg, rgba(43,58,39,.94), rgba(26,36,22,.94)),
radial-gradient(circle at 80% 20%, rgba(201,169,97,.3), transparent 50%);
color: var(--cream);
padding: 36px 40px;
border-radius: 12px;
position: relative;
overflow: hidden;
margin-bottom: 24px;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(201,169,97,.2);
}
.dashboard-hero::before {
content: '';
position: absolute; inset: 0;
background-image:
repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 1px, transparent 1px 6px);
}
.dh-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; position: relative; z-index: 1; }
.dh-hero-col { display: flex; align-items: flex-start; gap: 24px; }
.dh-welcome { font-family: 'Lora', serif; font-style: italic; font-size: 18px; color: var(--parchment); }
.dh-name { font-family: 'Lora', serif; font-size: 36px; color: var(--gold); font-weight: 800; letter-spacing: 1px; margin: 4px 0 8px; }
.dh-date { font-size: 13px; color: var(--cream); opacity: .8; }
.dh-tagline {
margin-top: 18px;
padding: 14px 18px;
background: rgba(201,169,97,.1);
border-left: 3px solid var(--gold);
font-family: 'Lora', serif;
font-style: italic;
font-size: 15px;
color: var(--parchment);
border-radius: 0 6px 6px 0;
}
.dh-weather {
background: linear-gradient(135deg, rgba(15,20,9,.6) 0%, rgba(43,58,39,.25) 100%);
border: 1px solid rgba(201,169,97,.25);
border-radius: 14px;
padding: 22px 24px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
position: relative;
overflow: hidden;
min-width: 0;
box-shadow: inset 0 0 0 1px rgba(201,169,97,.05);
}
.dh-weather::before {
content: '';
position: absolute;
top: -50px; right: -50px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(201,169,97,.22) 0%, transparent 65%);
pointer-events: none;
}
.dh-weather::after {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 1px, transparent 1px 6px);
pointer-events: none;
}
.dh-weather > * { position: relative; z-index: 1; }
.dh-w-row { display: flex; align-items: center; gap: 18px; min-width: 0; }
.dh-w-temp-block { min-width: 0; flex: 1; }
.dh-weather .icon { font-size: 60px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); flex-shrink: 0; }
.dh-weather .temp { font-family: 'Lora', serif; font-size: 52px; font-weight: 900; color: var(--gold); line-height: .9; letter-spacing: -1.5px; }
.dh-weather .temp sup { font-size: 18px; color: var(--parchment); font-weight: 600; margin-left: 3px; vertical-align: super; letter-spacing: 0; }
.dh-weather .desc { font-family: 'Lora', serif; font-style: italic; font-size: 15px; color: var(--parchment); margin-top: 6px; line-height: 1.35; opacity: .92; }
.dh-weather .loc {
padding-top: 14px;
border-top: 1px solid rgba(201,169,97,.2);
font-family: 'Lora', serif;
font-size: 12px;
color: var(--gold-light);
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
display: flex; align-items: center; gap: 10px;
}
.dh-weather .loc::before {
content: '';
width: 8px; height: 8px;
background: var(--gold);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(201,169,97,.22);
flex-shrink: 0;
}
.pf-avatar-lg {
width: 110px; height: 110px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brown-leather), var(--brown-dark));
border: 3px solid var(--gold);
display: flex; align-items: center; justify-content: center;
font-family: 'Lora', serif;
font-size: 38px; font-weight: 800;
color: var(--gold);
flex-shrink: 0;
position: relative; z-index: 1;
box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.pf-main { flex: 1; position: relative; z-index: 1; }
.pf-main h2 { font-family: 'Lora', serif; font-size: 32px; color: var(--gold); font-weight: 800; }
.pf-sub { font-family: 'Lora', serif; font-style: italic; font-size: 16px; color: var(--parchment); margin-top: 4px; }
.pf-tags { display: flex; gap: 8px; margin-top: 14px; }
.pf-tag {
padding: 5px 14px;
background: rgba(201,169,97,.12);
border: 1px solid rgba(201,169,97,.4);
color: var(--gold-light);
border-radius: 16px;
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 600;
}
.pf-actions { position: relative; z-index: 1; display: flex; gap: 8px; }
.nastenka-sections { display: flex; flex-direction: column; gap: 24px; }
.nastenka-main { display: flex; flex-direction: column; gap: 24px; }
.nastenka-side { }
.nastenka-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: start;
}
@media (max-width: 700px) {
.nastenka-two-col { grid-template-columns: 1fr; }
}
/* ============================================= */
/* ============ KONTROLY A ČINNOSTI ============= */
/* ============================================= */
.status-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 12px;
font-size: 10px; font-weight: 700;
letter-spacing: .8px; text-transform: uppercase;
}
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.ok { background: rgba(45,122,61,.12); color: #2d7a3d; }
.status-pill.warn { background: rgba(184,138,43,.15); color: #b88a2b; }
.status-pill.danger { background: rgba(139,46,46,.12); color: var(--red-deep); }
.status-pill.info { background: rgba(43,58,39,.12); color: var(--green-deep); }
.status-pill.muted { background: rgba(107,68,35,.1); color: var(--brown-wood); }
.filter-panel {
background: var(--cream-light);
border: 1px solid var(--border);
border-radius: 10px;
padding: 18px 20px;
margin-bottom: 18px;
box-shadow: var(--shadow-sm);
position: relative;
}
.filter-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 14px; align-items: end; }
.filter-row + .filter-row { margin-top: 12px; }
.filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.filter-label { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brown-wood); }
.filter-input, .filter-select {
background: #fff; border: 1px solid var(--border);
border-radius: 6px; padding: 9px 12px;
font-size: 13px; color: var(--ink);
font-family: 'Inter', sans-serif;
transition: border-color .15s, box-shadow .15s;
width: 100%;
}
.filter-input:focus, .filter-select:focus {
outline: none; border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(201,169,97,.18);
}
.filter-input.with-icon { padding-left: 34px; }
.filter-input-wrap { position: relative; }
.filter-input-wrap .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--brown-wood); font-size: 14px; pointer-events: none; }
.filter-select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px; cursor: pointer;
}
.filter-actions { display: flex; gap: 8px; }
.filter-actions .btn-ghost { padding: 9px 14px; }
.filter-summary { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-summary-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--brown-wood); font-weight: 700; }
.filter-pill {
display: inline-flex; align-items: center; gap: 6px;
background: var(--parchment); color: var(--brown-dark);
border: 1px solid var(--parchment-dark);
padding: 4px 6px 4px 10px; border-radius: 14px;
font-size: 11px; font-weight: 600;
}
.filter-pill .x {
width: 16px; height: 16px; border-radius: 50%;
background: var(--brown-dark); color: var(--cream);
display: flex; align-items: center; justify-content: center;
font-size: 10px; cursor: pointer; line-height: 1;
}
.filter-pill .x:hover { background: var(--red-deep); }
.filter-clear {
margin-left: auto; font-size: 11px; font-weight: 600;
color: var(--red-deep); text-transform: uppercase;
letter-spacing: 1px; cursor: pointer;
background: none; border: none; font-family: 'Inter', sans-serif;
}
.filter-clear:hover { text-decoration: underline; }
.table-card { padding: 0; overflow: visible; }
.table-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); gap: 14px; }
.table-toolbar .left { display: flex; align-items: center; gap: 14px; }
.table-toolbar .ttitle { font-family: 'Lora', serif; font-size: 16px; color: var(--green-deep); font-weight: 700; }
.records-count { font-size: 11px; color: var(--brown-wood); background: var(--parchment); padding: 3px 10px; border-radius: 10px; font-weight: 600; }
.table-toolbar .right { display: flex; gap: 8px; }
.inv-card .table-toolbar { padding: 0; margin-bottom: 16px; border-bottom: none; }
.table-scroll { overflow-x: auto; overflow-y:hidden }
.table th.sortable { cursor: pointer; }
.table th.sortable:hover { color: var(--green-deep); }
.table th .sort-ico { opacity: .4; margin-left: 4px; font-size: 10px; }
.table th.sortable.asc .sort-ico,
.table th.sortable.desc .sort-ico { opacity: 1; color: var(--gold-dark); }
.table th.col-check { width: 36px; padding-right: 0; }
.table th.col-actions { width: 56px; text-align: right; padding-right: 18px; }
.table tbody tr.selected td { background: rgba(201,169,97,.14); }
.check {
width: 18px; height: 18px;
border: 1.5px solid var(--brown-leather);
border-radius: 4px; background: #fff; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: all .15s;
}
.check:hover { border-color: var(--gold-dark); }
.check.checked { background: var(--green-deep); border-color: var(--green-deep); }
.check.checked::after {
content: ''; width: 10px; height: 5px;
border-left: 2px solid var(--gold);
border-bottom: 2px solid var(--gold);
transform: rotate(-45deg) translate(1px, -2px);
}
.activity-cell { display: flex; align-items: center; gap: 12px; }
.activity-ico {
width: 38px; height: 38px; border-radius: 8px;
background: var(--parchment);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; border: 1px solid var(--border);
}
.activity-ico svg { width: 18px; height: 18px; }
.activity-ico.green { background: rgba(43,58,39,.1); }
.activity-ico.green svg { fill: var(--green-deep); }
.activity-ico.red { background: rgba(139,46,46,.1); }
.activity-ico.red svg { fill: var(--red-deep); }
.activity-ico.brown { background: rgba(107,68,35,.1); }
.activity-ico.brown svg { fill: var(--brown-wood); }
.activity-ico.gold { background: rgba(201,169,97,.18); }
.activity-ico.gold svg { fill: var(--gold-dark); }
.activity-name { font-family: 'Lora', serif; font-weight: 600; color: var(--ink); }
.activity-sub { font-size: 11px; color: var(--brown-wood); margin-top: 2px; }
.assignee { display: flex; align-items: center; gap: 8px; }
.assignee-avatar {
width: 28px; height: 28px; border-radius: 50%;
overflow: hidden;
background: linear-gradient(135deg, var(--brown-leather), var(--brown-dark));
border: 1.5px solid var(--cream-light);
color: var(--cream); font-size: 10px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.assignee-avatar.green { background: linear-gradient(135deg, var(--green-moss), var(--green-deep)); color: var(--cream) !important; }
.assignee-avatar.gold { background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); color: var(--brown-dark); }
.assignee-avatar.red { background: linear-gradient(135deg, var(--red-deep), var(--red-blood)); }
.assignee-avatar.av-0 { background: linear-gradient(135deg, var(--brown-leather), var(--brown-dark)); color: var(--cream); }
.assignee-avatar.av-1 { background: linear-gradient(135deg, var(--green-moss), var(--green-deep)); color: var(--gold-light) !important; }
.assignee-avatar.av-2 { background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); color: var(--brown-dark); }
.assignee-avatar.av-3 { background: linear-gradient(135deg, var(--red-deep), var(--red-blood)); color: var(--cream); }
.assignee-avatar.av-4 { background: linear-gradient(135deg, #4e6e82, #2d4455); color: var(--cream); }
.assignee-avatar.av-5 { background: linear-gradient(135deg, var(--brown-wood), var(--brown-dark)); color: var(--gold-light) !important; }
.assignee-avatar.av-6 { background: linear-gradient(135deg, #6b7c3a, #3d4a1e); color: var(--gold-light) !important; }
.assignee-avatar.av-7 { background: linear-gradient(135deg, #2e7d6b, #1a4a3f); color: var(--cream); }
.assignee-avatar.av-8 { background: linear-gradient(135deg, #a05028, #6b3018); color: var(--cream); }
.assignee-avatar.av-9 { background: linear-gradient(135deg, #6b3a6b, #3d1e3d); color: var(--cream); }
.assignee-avatar.av-10 { background: linear-gradient(135deg, #5a6878, #333d48); color: var(--cream); }
.assignee-avatar.av-11 { background: linear-gradient(135deg, #2a3d5c, #162030); color: var(--gold-light) !important; }
.assignee-avatar.av-12 { background: linear-gradient(135deg, #7a9a6b, #4a6b3a); color: var(--cream); }
.assignee-avatar.av-13 { background: linear-gradient(135deg, #b06030, #7a3e18); color: var(--cream); }
.assignee-avatar.av-14 { background: linear-gradient(135deg, #1e5c5a, #0f3330); color: var(--gold-light) !important; }
.assignee-avatar.av-15 { background: linear-gradient(135deg, #7a2040, #4a1028); color: var(--cream); }
.assignee-avatar.av-16 { background: linear-gradient(135deg, #8a7a6a, #5a4a3a); color: var(--cream); }
.assignee-avatar.av-17 { background: linear-gradient(135deg, #2e5c2e, #183018); color: var(--gold-light) !important; }
.assignee-avatar.av-18 { background: linear-gradient(135deg, #c87820, #8b5010); color: var(--cream); }
.assignee-avatar.av-19 { background: linear-gradient(135deg, #5a5a28, #303018); color: var(--gold-light) !important; }
.assignee-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.assignee-name { font-size: 12px; color: var(--ink); font-weight: 500; }
.actions-cell { text-align: right; padding-right: 14px !important; position: relative; }
.actions-btn {
width: 32px; height: 32px;
border: 1px solid transparent; background: transparent;
border-radius: 6px; cursor: pointer;
color: var(--brown-wood);
display: inline-flex; align-items: center; justify-content: center;
transition: all .15s;
font-size: 18px; line-height: 1;
letter-spacing: 1px; font-weight: 700;
}
.actions-btn:hover { background: var(--cream); border-color: var(--border); color: var(--green-deep); }
.actions-btn.open { background: var(--green-deep); border-color: var(--gold); color: var(--gold); }
.ctx-menu {
position: fixed;
min-width: 220px; background: #fff;
border: 1px solid var(--border); border-radius: 8px;
box-shadow: 0 12px 32px rgba(26,19,9,.25);
padding: 6px; z-index: 200;
opacity: 0; transform: translateY(-4px);
pointer-events: none;
transition: opacity .15s, transform .15s;
}
.visit-card-actions-top .ctx-menu {
position: absolute !important;
top: calc(100% + 4px) !important;
right: 0 !important; left: auto !important;
}
.ctx-menu.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ctx-menu::before {
content: ''; position: absolute;
top: -6px; right: 10px;
width: 12px; height: 12px; background: #fff;
border-left: 1px solid var(--border);
border-top: 1px solid var(--border);
transform: rotate(45deg);
}
.ctx-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border-radius: 6px;
color: var(--ink); cursor: pointer;
font-size: 13px; text-align: left;
background: none; border: none;
font-family: 'Inter', sans-serif;
width: 100%; transition: background .12s;
}
.ctx-item:hover { background: var(--cream-light); }
.ctx-item svg { width: 16px; height: 16px; fill: var(--brown-wood); flex-shrink: 0; }
.ctx-item.danger { color: var(--red-deep); }
.ctx-item.danger svg { fill: var(--red-deep); }
.ctx-item.danger:hover { background: rgba(139,46,46,.08); }
.ctx-divider { height: 1px; background: var(--border); margin: 4px 6px; }
.ctx-label { padding: 6px 12px 4px; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brown-wood); }
.pagination { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--cream); flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.pagination-info { font-size: 12px; color: var(--brown-wood); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pagination-info b { color: var(--green-deep); font-family: 'Lora', serif; }
.page-size { display: flex; align-items: center; gap: 6px; }
.page-size select {
appearance: none;
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 8px center;
border: 1px solid var(--border); border-radius: 5px;
padding: 4px 22px 4px 10px;
font-size: 12px; color: var(--ink);
cursor: pointer; font-family: 'Inter', sans-serif;
}
.pagination-controls { display: flex; align-items: center; gap: 4px; }
.page-btn {
min-width: 34px; height: 34px;
padding: 0 10px; background: #fff;
border: 1px solid var(--border); border-radius: 6px;
color: var(--brown-dark);
font-size: 13px; font-weight: 600;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all .15s; font-family: 'Inter', sans-serif;
}
.page-btn:hover:not(:disabled):not(.active) { border-color: var(--gold); color: var(--green-deep); background: var(--cream-light); }
.page-btn.active { background: var(--green-deep); color: var(--gold); border-color: var(--gold); }
.page-btn:disabled { opacity: .35; cursor: not-allowed; }
.page-btn.nav { font-size: 14px; font-weight: 700; }
.page-ellipsis { color: var(--brown-wood); padding: 0 4px; font-weight: 700; }
.pg-current-label { display: none; }
.modal-backdrop {
position: fixed; inset: 0;
background: rgba(26, 19, 9, .55);
backdrop-filter: blur(3px);
z-index: 200;
display: flex; align-items: center; justify-content: center;
padding: 24px;
opacity: 0; pointer-events: none;
transition: opacity .2s;
}
.modal-backdrop.show { opacity: 1; pointer-events: auto; }
.modal {
background: var(--cream-light);
border: 1px solid var(--border); border-radius: 14px;
width: 100%; max-width: 640px;
max-height: calc(100vh - 48px);
display: flex; flex-direction: column;
box-shadow: 0 25px 60px rgba(0,0,0,.35);
transform: translateY(12px) scale(.98);
transition: transform .25s ease;
position: relative; overflow: hidden;
}
.modal-backdrop.show .modal { transform: translateY(0) scale(1); }
.modal::before {
content: ''; position: absolute;
top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
}
.modal-header { padding: 22px 26px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); }
.modal-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--brown-wood); }
.modal-title { font-family: 'Lora', serif; font-size: 22px; color: var(--green-deep); font-weight: 800; margin-top: 4px; line-height: 1.2; }
.modal-sub { font-family: 'Lora', serif; font-style: italic; font-size: 14px; color: var(--brown-wood); margin-top: 4px; }
.modal-close {
width: 34px; height: 34px; border-radius: 50%;
background: var(--cream); border: 1px solid var(--border);
color: var(--brown-dark); cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; font-size: 18px; line-height: 1;
transition: all .15s;
}
.modal-close:hover { background: var(--red-deep); color: var(--cream); border-color: var(--red-deep); }
.modal-body { padding: 22px 26px; overflow-y: auto; flex: 1; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brown-wood); }
.form-input, .form-select, .form-textarea {
background: #fff; border: 1px solid var(--border);
border-radius: 6px; padding: 10px 12px;
font-size: 13px; color: var(--ink);
font-family: 'Inter', sans-serif;
transition: border-color .15s, box-shadow .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,97,.18); }
.form-textarea { resize: vertical; min-height: 88px; font-family: 'Inter', sans-serif; }
.form-select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px; cursor: pointer;
}
.modal-callout {
margin-top: 16px; padding: 12px 14px;
background: rgba(201,169,97,.12);
border-left: 3px solid var(--gold);
border-radius: 0 6px 6px 0;
font-family: 'Lora', serif;
font-style: italic; font-size: 14px;
color: var(--brown-dark);
}
.modal-footer { padding: 16px 26px 22px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--cream); }
.modal-footer .meta { font-size: 11px; color: var(--brown-wood); }
.modal-footer .btns { display: flex; gap: 8px; }
.msg-modal { max-width: 420px; }
.msg-modal .modal-header { border-bottom: none; padding-bottom: 0; }
.msg-modal .modal-body { padding-top: 14px; text-align: center; }
.msg-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.msg-icon.success { background: rgba(45,122,61,.12); color: #2d7a3d; }
.msg-icon.warn { background: rgba(184,138,43,.15); color: #b88a2b; }
.msg-icon.error { background: rgba(139,46,46,.12); color: var(--red-deep); }
.msg-icon.info { background: rgba(43,58,39,.12); color: var(--green-deep); }
.msg-title { font-family: 'Lora', serif; font-size: 20px; font-weight: 800; color: var(--green-deep); margin-bottom: 6px; }
.msg-text { font-size: 13px; color: var(--brown-dark); line-height: 1.55; }
.msg-modal .modal-footer { justify-content: center; border-top: none; background: transparent; }
/* ---- jQuery UI dialog restyled to match our .modal ---- */
.ui-widget-overlay {
position: fixed; inset: 0;
background: rgba(26,19,9,.55);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
z-index: 1000;
}
.ui-dialog {
padding: 0;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--cream-light);
box-shadow: 0 25px 60px rgba(0,0,0,.35);
overflow: hidden;
z-index: 1001;
max-width: calc(100vw - 32px);
font-family: inherit;
color: var(--brown-dark);
}
.ui-dialog::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent);
z-index: 2;
}
.ui-dialog .ui-dialog-titlebar {
position: relative;
padding: 20px 60px 16px 26px;
border: none; border-bottom: 1px solid var(--border);
border-radius: 0; background: transparent;
}
.ui-dialog .ui-dialog-title {
float: none; width: auto; margin: 0; white-space: normal;
font-family: 'Lora', serif; font-size: 20px; font-weight: 800;
color: var(--green-deep); line-height: 1.25;
}
.ui-dialog .ui-dialog-titlebar-close {
position: absolute; top: 16px; right: 20px;
width: 34px; height: 34px; margin: 0; padding: 0;
border-radius: 50%; background: var(--cream);
border: 1px solid var(--border); color: var(--brown-dark);
cursor: pointer; transition: all .15s;
display: flex; align-items: center; justify-content: center;
font-size: 0;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
background: var(--red-deep); border-color: var(--red-deep); color: var(--cream);
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space,
.ui-dialog .ui-dialog-titlebar-close span { display: none; }
.ui-dialog .ui-dialog-titlebar-close::before {
content: '\00d7'; font-size: 22px; line-height: 1; display: block;
}
.ui-dialog .ui-dialog-content {
padding: 20px 26px; background: transparent;
color: var(--brown-dark); font-size: 14px; line-height: 1.6;
}
.ui-dialog .ui-dialog-buttonpane {
margin: 0; padding: 14px 26px 20px;
border: none; border-top: 1px solid var(--border); background: var(--cream);
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: none; display: flex; justify-content: flex-end; gap: 8px;
}
.ui-dialog .ui-dialog-buttonpane button {
display: inline-flex; align-items: center; gap: 6px; margin: 0;
padding: 9px 16px; border-radius: 6px;
font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
cursor: pointer; transition: all .15s;
border: 1px solid var(--red-deep); background: var(--red-deep); color: var(--cream);
}
.ui-dialog .ui-dialog-buttonpane button:hover {
background: var(--red-blood); border-color: var(--red-blood); color: var(--cream);
}
.toast-container { position: fixed; top: 24px; right: 24px; z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.toast {
background: #fff; border: 1px solid var(--border);
border-left: 4px solid var(--green-deep);
border-radius: 10px; padding: 14px 16px;
box-shadow: 0 12px 32px rgba(26,19,9,.25);
display: flex; align-items: flex-start; gap: 12px;
animation: toastIn .25s ease; position: relative;
}
.toast.success { border-left-color: #2d7a3d; }
.toast.warn { border-left-color: #b88a2b; }
.toast.error { border-left-color: var(--red-deep); }
.toast .ic { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; background: var(--cream-light); color: var(--green-deep); }
.toast.success .ic { background: rgba(45,122,61,.12); color: #2d7a3d; }
.toast.warn .ic { background: rgba(184,138,43,.15); color: #b88a2b; }
.toast.error .ic { background: rgba(139,46,46,.12); color: var(--red-deep); }
.toast .body { flex: 1; min-width: 0; }
.toast .title-row { font-size: 13px; font-weight: 700; color: var(--ink); font-family: 'Lora', serif; }
.toast .desc { font-size: 12px; color: var(--brown-wood); margin-top: 2px; }
.toast .x { background: none; border: none; color: var(--brown-wood); cursor: pointer; font-size: 14px; padding: 2px; line-height: 1; }
.toast .x:hover { color: var(--red-deep); }
@keyframes toastIn {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
/* ============================================= */
/* ============ ZOZNAM ČLENOV =================== */
/* ============================================= */
.members-toolbar {
display: flex; gap: 12px; align-items: center;
margin-bottom: 18px;
flex-wrap: wrap;
}
.members-toolbar .members-search { flex: 1; min-width: 240px; position: relative; }
.members-toolbar .members-search input {
width: 100%;
background: var(--cream-light);
border: 1px solid var(--border);
border-radius: 24px;
padding: 10px 16px 10px 40px;
font-size: 13px;
color: var(--ink);
font-family: 'Inter', sans-serif;
transition: border-color .15s;
}
.members-toolbar .members-search input:focus { outline: none; border-color: var(--gold); background: #fff; }
.members-toolbar .members-search::before {
content: '⌕';
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
color: var(--brown-wood); font-size: 18px;
}
.filter-bar {
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
margin-bottom: 16px;
}
.filter-chip {
display: inline-flex; align-items: center;
padding: 8px 16px;
background: var(--cream-light);
border: 1px solid var(--border);
border-radius: 20px;
font-size: 12px;
font-weight: 600;
color: var(--brown-dark);
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
user-select: none;
}
.filter-chip:hover {
border-color: var(--gold);
background: var(--parchment);
}
.filter-chip.active {
background: var(--green-deep);
border-color: var(--green-deep);
color: var(--gold);
}
.member-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.member-card {
background: var(--cream-light);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
box-shadow: var(--shadow-sm);
position: relative;
transition: transform .15s, box-shadow .15s, border-color .15s;
cursor: pointer;
}
.member-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--gold);
}
.member-card::before {
content: '';
position: absolute; top: 0; left: 16px; right: 16px;
height: 3px;
background: var(--gold);
border-radius: 0 0 3px 3px;
}
.member-card.role-host::before { background: var(--red-deep); }
.member-card.role-board::before { background: var(--green-deep); }
.member-card.role-young::before { background: var(--brown-wood); }
.member-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.member-avatar {
width: 56px; height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brown-leather), var(--brown-dark));
border: 2px solid var(--gold);
color: var(--gold);
font-family: 'Lora', serif;
font-weight: 800;
font-size: 18px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.member-avatar.green { background: linear-gradient(135deg, var(--green-moss), var(--green-deep)); color: var(--cream) !important; }
.member-avatar.red { background: linear-gradient(135deg, var(--red-deep), var(--red-blood)); color: var(--cream); }
.member-avatar.gold { background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); color: var(--brown-dark); }
.member-avatar.brown { background: linear-gradient(135deg, var(--brown-wood), var(--brown-dark)); }
.member-avatar.av-0 { background: linear-gradient(135deg, var(--brown-leather), var(--brown-dark)); color: var(--cream); }
.member-avatar.av-1 { background: linear-gradient(135deg, var(--green-moss), var(--green-deep)); color: var(--gold-light) !important; }
.member-avatar.av-2 { background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); color: var(--brown-dark); }
.member-avatar.av-3 { background: linear-gradient(135deg, var(--red-deep), var(--red-blood)); color: var(--cream); }
.member-avatar.av-4 { background: linear-gradient(135deg, #4e6e82, #2d4455); color: var(--cream); }
.member-avatar.av-5 { background: linear-gradient(135deg, var(--brown-wood), var(--brown-dark)); color: var(--gold-light) !important; }
.member-avatar.av-6 { background: linear-gradient(135deg, #6b7c3a, #3d4a1e); color: var(--gold-light) !important; }
.member-avatar.av-7 { background: linear-gradient(135deg, #2e7d6b, #1a4a3f); color: var(--cream); }
.member-avatar.av-8 { background: linear-gradient(135deg, #a05028, #6b3018); color: var(--cream); }
.member-avatar.av-9 { background: linear-gradient(135deg, #6b3a6b, #3d1e3d); color: var(--cream); }
.member-avatar.av-10 { background: linear-gradient(135deg, #5a6878, #333d48); color: var(--cream); }
.member-avatar.av-11 { background: linear-gradient(135deg, #2a3d5c, #162030); color: var(--gold-light) !important; }
.member-avatar.av-12 { background: linear-gradient(135deg, #7a9a6b, #4a6b3a); color: var(--cream); }
.member-avatar.av-13 { background: linear-gradient(135deg, #b06030, #7a3e18); color: var(--cream); }
.member-avatar.av-14 { background: linear-gradient(135deg, #1e5c5a, #0f3330); color: var(--gold-light) !important; }
.member-avatar.av-15 { background: linear-gradient(135deg, #7a2040, #4a1028); color: var(--cream); }
.member-avatar.av-16 { background: linear-gradient(135deg, #8a7a6a, #5a4a3a); color: var(--cream); }
.member-avatar.av-17 { background: linear-gradient(135deg, #2e5c2e, #183018); color: var(--gold-light) !important; }
.member-avatar.av-18 { background: linear-gradient(135deg, #c87820, #8b5010); color: var(--cream); }
.member-avatar.av-19 { background: linear-gradient(135deg, #5a5a28, #303018); color: var(--gold-light) !important; }
.member-info { flex: 1; min-width: 0; }
.member-name {
font-family: 'Lora', serif;
font-size: 16px;
color: var(--ink);
font-weight: 700;
line-height: 1.2;
}
.member-since {
font-size: 11px;
color: var(--brown-wood);
margin-top: 2px;
font-family: 'Lora', serif;
font-style: italic;
}
.member-role-badge {
display: inline-block;
margin-top: 6px;
padding: 3px 10px;
background: var(--green-deep);
color: var(--gold);
font-size: 9px;
border-radius: 10px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.member-role-badge.host { background: var(--gold); color: var(--brown-dark); }
.member-role-badge.predseda { background: var(--gold); color: var(--brown-dark); }
.member-role-badge.tajomnik { background: var(--brown-wood); color: var(--cream); }
.member-role-badge.clen { background: var(--parchment); color: var(--brown-dark); }
.member-role-badge.young { background: var(--green-moss); color: var(--cream); }
.member-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 12px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin-bottom: 12px;
}
.member-stat { text-align: center; }
.member-stat-num {
font-family: 'Lora', serif;
font-size: 17px;
color: var(--green-deep);
font-weight: 800;
line-height: 1;
}
.member-stat-lbl {
font-size: 9px;
color: var(--brown-wood);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
margin-top: 4px;
}
.member-contact {
display: flex; flex-direction: column; gap: 5px;
font-size: 11px;
color: var(--brown-wood);
}
.member-contact div { display: flex; align-items: center; gap: 6px; }
.member-contact .ic { color: var(--gold-dark); width: 14px; flex-shrink: 0; }
.member-contact a { color: var(--brown-wood); text-decoration: none; }
.member-contact a:hover { color: var(--red-deep); text-decoration: underline; }
.member-card .actions-btn { position: absolute; top: 14px; right: 14px; }
.member-card .ctx-menu { position: absolute !important; top: 50px !important; right: 14px !important; left: auto !important; }
.member-card:has(.ctx-menu.show) { z-index: 10; }
.member-card-footer { margin-top: 12px; display: flex; justify-content: flex-end; }
.tag.tag-host { background: var(--gold); color: var(--brown-dark); border-color: var(--gold); }
/* ============================================= */
/* ============ RESPONZIVITA ==================== */
/* ============================================= */
@media (max-width: 1200px) {
.app-shell { grid-template-columns: 230px 1fr; }
.content { padding: 24px; }
.stats-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
.weather-details-grid { grid-template-columns: repeat(6, 1fr); gap: 10px; }
.dashboard-hero, .weather-hero, .profile-header { padding: 28px 30px; }
.dh-name, .pf-main h2 { font-size: 30px; }
.wh-main .big-temp { font-size: 76px; }
}
/* ============================================= */
/* ============ INVENTÁR ZNAČIEK =============== */
/* ============================================= */
.inv-page { max-width: 1100px; }
.inv-help-toggle {
background: var(--cream-light);
border: 1px solid var(--border);
color: var(--brown-wood);
border-radius: 50%;
width: 38px; height: 38px;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all .15s;
margin-left: auto;
}
.inv-help-toggle:hover {
background: var(--gold);
color: var(--brown-dark);
border-color: var(--gold-dark);
transform: rotate(8deg);
}
.inv-help-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.inv-help-banner {
background: linear-gradient(90deg, rgba(201,169,97,.12), transparent);
border: 1px solid var(--border);
border-left: 4px solid var(--gold);
border-radius: 0 10px 10px 0;
padding: 14px 18px;
margin-bottom: 18px;
display: none;
font-size: 13px;
color: var(--brown-dark);
line-height: 1.6;
animation: slideDown .25s ease;
}
.inv-help-banner.show { display: block; }
.inv-help-banner b { font-family: 'Lora', serif; color: var(--green-deep); font-weight: 700; }
.inv-help-banner code {
font-family: 'Courier New', monospace;
background: var(--parchment);
color: var(--brown-dark);
padding: 1px 6px;
border-radius: 3px;
font-weight: 700;
}
.inv-section-header {
display: flex; align-items: center; gap: 12px;
margin-bottom: 16px;
}
.inv-section-header .ico {
width: 38px; height: 38px;
border-radius: 8px;
background: var(--green-deep);
border: 1px solid var(--gold);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.inv-section-header .ico svg { width: 18px; height: 18px; fill: var(--gold); }
.inv-section-header h4 {
font-family: 'Lora', serif;
font-size: 18px;
color: var(--green-deep);
font-weight: 800;
letter-spacing: .5px;
}
.inv-section-header .badge {
margin-left: auto;
font-family: 'Inter', sans-serif;
font-size: 11px;
background: var(--parchment);
color: var(--brown-dark);
padding: 4px 10px;
border-radius: 10px;
font-weight: 600;
letter-spacing: .5px;
}
.inv-card {
background: var(--cream-light);
border: 1px solid var(--border);
border-radius: 12px;
padding: 22px 24px;
margin-bottom: 20px;
box-shadow: var(--shadow-sm);
}
.inv-form-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr auto;
gap: 14px;
align-items: end;
}
.inv-field { display: flex; flex-direction: column; gap: 6px; }
.inv-field label {
font-size: 10px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--brown-wood);
}
.inv-field label .req {
color: var(--red-deep);
margin-left: 2px;
}
.inv-field input {
background: #fff;
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 14px;
font-size: 14px;
color: var(--ink);
font-family: 'Courier New', monospace;
font-weight: 700;
letter-spacing: 1px;
transition: border-color .15s, box-shadow .15s;
}
.inv-field input:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(201,169,97,.18);
}
.inv-field-hint {
font-family: 'Lora', serif;
font-style: italic;
font-size: 12px;
color: var(--brown-wood);
margin-top: 4px;
}
.inv-generate-btn {
background: linear-gradient(135deg, #2b4d8b, #1a3361);
color: #fff;
border: none;
padding: 11px 22px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
font-family: 'Inter', sans-serif;
cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
transition: transform .1s, box-shadow .15s;
box-shadow: 0 3px 8px rgba(43,77,139,.25);
height: 42px;
}
.inv-generate-btn:hover {
transform: translateY(-1px);
box-shadow: 0 5px 12px rgba(43,77,139,.35);
}
.inv-generate-btn svg { width: 16px; height: 16px; fill: currentColor; }
.inv-chips-toolbar {
display: flex; justify-content: space-between; align-items: center;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.inv-chips-search {
flex: 1; min-width: 200px; position: relative;
}
.inv-chips-search input {
width: 100%;
background: var(--cream);
border: 1px solid var(--border);
border-radius: 20px;
padding: 8px 14px 8px 36px;
font-size: 12px;
color: var(--ink);
font-family: 'Inter', sans-serif;
}
.inv-chips-search input:focus { outline: none; border-color: var(--gold); background: #fff; }
.inv-chips-search::before {
content: '⌕';
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
color: var(--brown-wood); font-size: 16px;
}
.inv-chips-info {
font-size: 12px;
color: var(--brown-wood);
}
.inv-chips-info b {
color: var(--green-deep);
font-family: 'Lora', serif;
font-weight: 700;
}
.inv-chips-wrap {
background: var(--cream);
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px;
max-height: 380px;
overflow-y: auto;
margin-bottom: 14px;
line-height: 2;
}
.inv-chips-wrap::-webkit-scrollbar { width: 8px; }
.inv-chips-wrap::-webkit-scrollbar-thumb { background: var(--brown-leather); opacity: .4; border-radius: 4px; }
.inv-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 4px 4px 10px;
background: var(--cream-light);
border: 1px solid var(--parchment-dark);
border-radius: 6px;
font-family: 'Courier New', monospace;
font-size: 11px;
color: var(--ink);
margin: 0 4px 4px 0;
font-weight: 700;
letter-spacing: .5px;
transition: all .12s;
position: relative;
}
.inv-chip:hover {
background: var(--parchment);
border-color: var(--gold);
transform: translateY(-1px);
}
.inv-chip .pre {
color: var(--gold-dark);
font-weight: 800;
}
.inv-chip .num {
color: var(--brown-dark);
}
.inv-chip .x {
width: 16px; height: 16px;
border-radius: 50%;
background: var(--brown-leather);
color: var(--cream);
display: inline-flex; align-items: center; justify-content: center;
font-size: 10px;
cursor: pointer;
margin-left: 4px;
line-height: 1;
transition: background .12s;
font-family: 'Inter', sans-serif;
font-weight: 700;
}
.inv-chip .x:hover { background: var(--red-deep); }
.inv-chip.special {
background: linear-gradient(90deg, rgba(201,169,97,.18), rgba(201,169,97,.05));
border-color: var(--gold);
}
.inv-chip.special .pre { color: var(--green-deep); }
.inv-chips-more {
display: inline-flex;
align-items: center;
padding: 6px 14px;
background: var(--green-deep);
color: var(--gold);
border-radius: 6px;
font-family: 'Lora', serif;
font-size: 12px;
font-weight: 700;
margin: 4px;
letter-spacing: .5px;
}
.inv-chips-add {
display: flex; gap: 8px;
margin-top: 10px;
align-items: center;
}
.inv-chips-add input {
flex: 1;
background: var(--cream);
border: 1px dashed var(--border);
border-radius: 6px;
padding: 8px 12px;
font-size: 12px;
color: var(--ink);
font-family: 'Courier New', monospace;
font-weight: 600;
letter-spacing: 1px;
}
.inv-chips-add input:focus { outline: none; border-color: var(--gold); border-style: solid; }
.inv-chips-add input::placeholder { font-family: 'Lora', serif; font-style: italic; color: var(--brown-wood); }
.inv-series-summary {
display: flex; flex-wrap: wrap; gap: 10px;
margin-bottom: 12px;
}
.inv-series-pill {
display: inline-flex; align-items: center; gap: 8px;
background: var(--cream);
border: 1px solid var(--border);
border-radius: 18px;
padding: 6px 14px;
font-size: 12px;
color: var(--brown-dark);
font-family: 'Courier New', monospace;
font-weight: 600;
}
.inv-series-pill .ser {
color: var(--gold-dark);
font-weight: 800;
font-size: 11px;
letter-spacing: 1px;
}
.inv-series-pill .cnt {
background: var(--green-deep);
color: var(--gold);
padding: 2px 8px;
border-radius: 10px;
font-family: 'Lora', serif;
font-weight: 700;
font-size: 11px;
}
.inv-save-row {
display: flex; justify-content: flex-end; align-items: center;
margin-top: 16px;
padding-top: 16px;
flex-wrap: wrap;
gap: 10px;
}
@media (max-width: 700px) {
.inv-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
.filter-row { grid-template-columns: 1fr 1fr; }
.filter-row .filter-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 1000px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.two-col { grid-template-columns: 1fr; }
.three-col { grid-template-columns: 1fr; }
.weather-details-grid { grid-template-columns: repeat(3, 1fr); }
.map-layout { grid-template-columns: 1fr; height: auto; }
.search-box { width: 220px; }
}
@media (max-width: 900px) {
.app-shell { grid-template-columns: 1fr; }
.menu-toggle { display: flex; }
.sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 280px;
z-index: 100;
transform: translateX(-100%);
transition: transform .3s ease;
box-shadow: none;
}
.sidebar.open { transform: translateX(0); box-shadow: 4px 0 30px rgba(0,0,0,.3); }
.topbar { padding: 0 20px; gap: 14px; }
.search-box { display: none; }
.page-title { font-size: 18px; }
.dashboard-hero .dh-grid { grid-template-columns: 1fr; gap: 20px; }
.dh-weather { gap: 14px; }
.dashboard-hero { overflow: visible; margin-top: 55px; padding-top: 62px; }
.dh-hero-col { flex-direction: column; align-items: center; text-align: center; }
.dh-tagline { display: none; }
.dh-avatar { position: absolute; top: -125px; left: 50%; transform: translateX(-50%); }
.weather-hero .wh-grid { grid-template-columns: 1fr; gap: 20px; text-align: center; }
.wh-side { order: -1; }
.wh-main .big-temp { font-size: 90px; }
.profile-header { flex-direction: column; text-align: center; gap: 16px; padding: 28px 24px; }
.pf-tags { justify-content: center; }
.pf-actions { width: 100%; justify-content: center; }
}
@media (max-width: 700px) {
.content { padding: 18px 16px; }
.topbar { height: 62px; padding: 0 16px; }
.page-title { font-size: 16px; }
.top-actions { gap: 6px; margin-left: auto; }
.icon-btn { width: 36px; height: 36px; }
.btn-primary { padding: 9px 12px; font-size: 11px; letter-spacing: 1px; }
.dashboard-hero, .weather-hero, .profile-header { padding: 22px 20px; border-radius: 10px; }
.dashboard-hero { padding-top: 50px; margin-top: 42px; }
.dh-avatar { top: -90px; }
.dh-name { font-size: 24px; }
.dh-welcome { font-size: 15px; }
.dh-tagline { font-size: 13px; padding: 10px 14px; }
.pf-avatar-lg { width: 84px; height: 84px; font-size: 28px; border-width: 2px; }
.pf-main h2 { font-size: 24px; }
.pf-sub { font-size: 13px; }
.pf-tag { font-size: 9px; padding: 4px 10px; }
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.stat-card { padding: 14px; }
.stat-num { font-size: 26px; }
.stat-lbl { font-size: 10px; letter-spacing: 1px; }
.stat-ico { width: 32px; height: 32px; margin-bottom: 8px; }
.stat-ico svg { width: 16px; height: 16px; }
.card { padding: 16px; border-radius: 8px; }
.table-card { padding: 0; }
.footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.footer-links { justify-content: center; flex-wrap: wrap; }
.footer-apps { justify-content: center; }
.footer-lang { justify-content: center; }
.footer-lang img { height: 22px; opacity: 0.85; }
.card-header { margin-bottom: 12px; padding-bottom: 10px; }
.card-title { font-size: 14px; }
.two-col, .three-col { gap: 16px; margin-bottom: 18px; }
.wh-main .big-temp { font-size: 72px; }
.wh-main .loc-name { font-size: 18px; }
.wh-ico { font-size: 64px; }
.weather-details-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wd-card { padding: 12px; }
.wd-val { font-size: 18px; }
.forecast-day { grid-template-columns: 80px 24px 1fr 65px; gap: 10px; font-size: 12px; }
.forecast-day .fact { display: none; }
.forecast-day .fname { font-size: 12px; }
.forecast-day .fico { font-size: 18px; }
.map-canvas { border-radius: 8px; }
.map-toolbar { top: 10px; left: 10px; right: 10px; flex-wrap: wrap; gap: 8px; }
.map-search-bar { width: 100%; box-sizing: border-box; }
.map-search-wrap { flex: 1; min-width: 100%; }
.map-tools { order: 2; }
.map-tool { width: 36px; height: 36px; }
.map-legend-box { bottom: 10px; left: 10px; padding: 10px 12px; font-size: 11px; }
.legend-title { font-size: 10px; }
.card.table-wrap { padding: 0; overflow-x: auto; }
.table { /*min-width: 640px; */}
.table th, .table td { padding: 12px 10px; font-size: 12px; }
.species-mini { width: 32px; height: 32px; }
.filter-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.filter-bar::-webkit-scrollbar { display: none; }
.filter-chip { flex-shrink: 0; font-size: 11px; padding: 7px 12px; }
.filter-bar > div:last-child { margin-left: 12px; flex-shrink: 0; display: flex; gap: 6px; }
.filter-row { grid-template-columns: 1fr; }
.table-toolbar { flex-direction: column; align-items: flex-start; }
.pagination { flex-direction: column; align-items: flex-start; }
.pg-edge { display: none; }
.page-btn:not(.nav) { display: none; }
.page-ellipsis { display: none; }
.pg-current-label { display: inline-flex; align-items: center; padding: 0 10px; font-size: 13px; font-weight: 700; color: var(--green-deep); }
.form-grid { grid-template-columns: 1fr; }
.modal { max-height: 90vh; }
.modal-header, .modal-body, .modal-footer { padding-left: 18px; padding-right: 18px; }
.toast-container { top: 12px; right: 12px; left: 12px; max-width: none; }
.trophy-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.trophy-card { padding: 14px 8px; }
.trophy-ico { width: 46px; height: 46px; margin-bottom: 6px; }
.trophy-ico svg { width: 22px; height: 22px; }
.trophy-name { font-size: 11px; }
.trophy-desc { font-size: 9px; }
.chart-wrap { height: 200px; }
}
@media (max-width: 480px) {
h1 { font-size: 21px; margin-top: 16px; margin-bottom: 10px; }
h2 { font-size: 18px; margin-top: 14px; margin-bottom: 8px; }
.content { padding: 14px 12px; }
.topbar { padding: 0 12px; gap: 10px; }
.page-title { font-size: 15px; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.weather-details-grid { grid-template-columns: repeat(2, 1fr); }
.dh-name { font-size: 22px; }
.wh-main .big-temp { font-size: 60px; }
.pf-main h2 { font-size: 20px; }
.pf-avatar-lg { width: 72px; height: 72px; font-size: 24px; }
.dashboard-hero { padding-top: 44px; margin-top: 36px; }
.dh-avatar { top: -76px; }
.pf-tags { flex-wrap: wrap; gap: 5px; }
.event-date-box { width: 42px; padding: 5px 3px; }
.event-date-box .d { font-size: 15px; }
.event-info h4 { font-size: 12px; }
.event-info p { font-size: 10px; }
.trophy-grid { grid-template-columns: repeat(2, 1fr); }
.sidebar { width: 260px; }
.pin-simple { width: 24px; height: 24px; }
.pin-simple svg { width: 10px; height: 10px; }
.brand-crest { width: 36px; height: 36px; }
.brand-text h1 { font-size: 18px; }
.dh-weather { padding: 16px 18px; gap: 12px; }
.dh-weather .temp { font-size: 38px; }
.dh-weather .icon { font-size: 44px; }
.dh-weather .desc { font-size: 13px; }
.dh-weather .loc { font-size: 11px; padding-top: 10px; letter-spacing: 1.5px; }
}
@media (max-width: 360px) {
.btn-primary { padding: 8px 10px; font-size: 10px; letter-spacing: .5px; }
.icon-btn { width: 34px; height: 34px; }
.stats-grid { grid-template-columns: 1fr; }
.wh-main .big-temp { font-size: 54px; }
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 900px) {
.topbar { height: 54px; }
.dashboard-hero, .weather-hero, .profile-header { padding: 16px 20px; }
}
/* ============================================= */
/* ============ MEMBERS ========================= */
/* ============================================= */
.member-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.member-card {
background: var(--cream-light);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
box-shadow: var(--shadow-sm);
position: relative;
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.member-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--gold);
}
.member-card::before {
content: '';
position: absolute; top: 0; left: 16px; right: 16px;
height: 3px;
background: var(--gold);
border-radius: 0 0 3px 3px;
}
.member-card.role-host::before { background: var(--red-deep); }
.member-card.role-board::before { background: var(--green-deep); }
.member-card.role-young::before { background: var(--brown-wood); }
.member-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.member-avatar {
width: 56px; height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brown-leather), var(--brown-dark));
border: 2px solid var(--gold);
color: var(--gold);
font-family: 'Lora', serif;
font-weight: 800;
font-size: 18px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,.12);
overflow: hidden;
}
.member-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.member-avatar.green { background: linear-gradient(135deg, var(--green-moss), var(--green-deep)); color: var(--cream) !important; }
.member-avatar.red { background: linear-gradient(135deg, var(--red-deep), var(--red-blood)); color: var(--cream); }
.member-avatar.gold { background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); color: var(--brown-dark); }
.member-avatar.brown { background: linear-gradient(135deg, var(--brown-wood), var(--brown-dark)); }
.member-avatar.av-0 { background: linear-gradient(135deg, var(--brown-leather), var(--brown-dark)); color: var(--cream); }
.member-avatar.av-1 { background: linear-gradient(135deg, var(--green-moss), var(--green-deep)); color: var(--gold-light) !important; }
.member-avatar.av-2 { background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); color: var(--brown-dark); }
.member-avatar.av-3 { background: linear-gradient(135deg, var(--red-deep), var(--red-blood)); color: var(--cream); }
.member-avatar.av-4 { background: linear-gradient(135deg, #4e6e82, #2d4455); color: var(--cream); }
.member-avatar.av-5 { background: linear-gradient(135deg, var(--brown-wood), var(--brown-dark)); color: var(--gold-light) !important; }
.member-avatar.av-6 { background: linear-gradient(135deg, #6b7c3a, #3d4a1e); color: var(--gold-light) !important; }
.member-avatar.av-7 { background: linear-gradient(135deg, #2e7d6b, #1a4a3f); color: var(--cream); }
.member-avatar.av-8 { background: linear-gradient(135deg, #a05028, #6b3018); color: var(--cream); }
.member-avatar.av-9 { background: linear-gradient(135deg, #6b3a6b, #3d1e3d); color: var(--cream); }
.member-avatar.av-10 { background: linear-gradient(135deg, #5a6878, #333d48); color: var(--cream); }
.member-avatar.av-11 { background: linear-gradient(135deg, #2a3d5c, #162030); color: var(--gold-light) !important; }
.member-avatar.av-12 { background: linear-gradient(135deg, #7a9a6b, #4a6b3a); color: var(--cream); }
.member-avatar.av-13 { background: linear-gradient(135deg, #b06030, #7a3e18); color: var(--cream); }
.member-avatar.av-14 { background: linear-gradient(135deg, #1e5c5a, #0f3330); color: var(--gold-light) !important; }
.member-avatar.av-15 { background: linear-gradient(135deg, #7a2040, #4a1028); color: var(--cream); }
.member-avatar.av-16 { background: linear-gradient(135deg, #8a7a6a, #5a4a3a); color: var(--cream); }
.member-avatar.av-17 { background: linear-gradient(135deg, #2e5c2e, #183018); color: var(--gold-light) !important; }
.member-avatar.av-18 { background: linear-gradient(135deg, #c87820, #8b5010); color: var(--cream); }
.member-avatar.av-19 { background: linear-gradient(135deg, #5a5a28, #303018); color: var(--gold-light) !important; }
.member-info { flex: 1; min-width: 0; }
.member-name {
font-family: 'Lora', serif;
font-size: 16px;
color: var(--ink);
font-weight: 700;
line-height: 1.2;
}
.member-since {
font-size: 11px;
color: var(--brown-wood);
margin-top: 2px;
font-family: 'Lora', serif;
font-style: italic;
}
.member-role-badge {
display: inline-block;
margin-top: 6px;
padding: 3px 10px;
background: var(--green-deep);
color: var(--gold);
font-size: 9px;
border-radius: 10px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.member-role-badge.host { background: var(--gold); color: var(--brown-dark); }
.member-role-badge.predseda { background: var(--gold); color: var(--brown-dark); }
.member-role-badge.tajomnik { background: var(--brown-wood); color: var(--cream); }
.member-role-badge.clen { background: var(--parchment); color: var(--brown-dark); }
.member-role-badge.young { background: var(--green-moss); color: var(--cream); }
.member-contact {
display: flex; flex-direction: column; gap: 5px;
font-size: 11px;
color: var(--brown-wood);
border-top: 1px solid var(--border);
padding-top: 12px;
margin-top: 12px;
}
.member-contact div { display: flex; align-items: center; gap: 6px; }
.member-contact .ic { color: var(--gold-dark); width: 14px; flex-shrink: 0; }
.member-contact a { color: var(--brown-wood); text-decoration: none; }
.member-contact a:hover { color: var(--red-deep); text-decoration: underline; }
/* ============================================= */
/* ============================================= */
/* ============ NARODENINY ====================== */
/* ============================================= */
.birthday-list { display: flex; flex-direction: column; gap: 10px; }
.birthday-item {
display: flex; align-items: center; gap: 12px;
padding: 10px;
background: var(--cream);
border-radius: 8px;
border-left: 3px solid var(--gold);
transition: background .15s, transform .15s;
}
.birthday-item:hover { background: var(--parchment); transform: translateX(2px); }
.birthday-item.today {
background: linear-gradient(90deg, rgba(201,169,97,.18), var(--cream));
border-left-color: var(--red-deep);
}
.birthday-cake {
width: 38px; height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(201,169,97,.35);
}
.birthday-info { flex: 1; min-width: 0; }
.birthday-name {
font-family: 'Lora', serif;
font-size: 13px; color: var(--ink); font-weight: 700; line-height: 1.2;
}
.birthday-meta {
font-size: 11px; color: var(--brown-wood); margin-top: 2px;
font-family: 'Lora', serif; font-style: italic;
}
.birthday-days {
font-family: 'Lora', serif;
font-size: 12px; color: var(--green-deep); font-weight: 700;
background: var(--cream-light);
padding: 4px 10px;
border-radius: 12px;
border: 1px solid var(--border);
text-align: center; flex-shrink: 0; min-width: 56px;
}
.birthday-age-badge {
display: inline-block;
background: var(--green-deep); color: var(--gold);
font-size: 10px; font-weight: 700;
padding: 1px 7px; border-radius: 9px;
font-family: 'Inter', sans-serif;
vertical-align: middle; margin-left: 4px;
}
/* ============================================= */
/* ============ STATS GRID ====================== */
/* ============================================= */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.stat-card {
background: var(--cream-light);
border: 1px solid var(--border);
border-radius: 10px;
padding: 20px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.stat-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--gold);
}
.stat-card.accent-red::before { background: var(--red-deep); }
.stat-card.accent-green::before { background: var(--green-deep); }
.stat-card.accent-brown::before { background: var(--brown-wood); }
.stat-num { font-family: 'Lora', serif; font-size: 36px; font-weight: 800; color: var(--green-deep); line-height: 1; }
.stat-lbl { font-size: 11px; color: var(--brown-wood); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; margin-top: 6px; }
.stat-change { font-size: 11px; color: #2d7a3d; margin-top: 8px; display: flex; align-items: center; gap: 4px; font-weight: 600; }
/* ============================================= */
/* ============================================= */
/* ============ DAY DETAIL MODAL ================ */
/* ============================================= */
.day-detail-modal { max-width: 580px; }
.day-summary {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 8px; padding: 14px;
background: var(--cream); border-radius: 10px;
margin-bottom: 18px; border: 1px solid var(--border);
}
.day-summary-stat { text-align: center; padding: 4px; }
.day-summary-stat .num { font-family: 'Lora', serif; font-size: 22px; color: var(--green-deep); font-weight: 800; line-height: 1; }
.day-summary-stat .lbl { font-size: 9px; text-transform: uppercase; color: var(--brown-wood); letter-spacing: 1px; font-weight: 600; margin-top: 4px; }
.day-events-timeline { position: relative; padding-left: 4px; }
.day-events-timeline::before {
content: ''; position: absolute;
left: 70px; top: 18px; bottom: 18px;
width: 2px; background: var(--border);
}
.day-event { display: flex; gap: 14px; padding: 12px 0; position: relative; align-items: flex-start; }
.day-event-time {
width: 52px; font-family: 'Lora', serif;
font-size: 13px; color: var(--brown-wood); font-weight: 700;
text-align: right; padding-top: 4px; flex-shrink: 0;
}
.day-event-dot {
width: 26px; height: 26px; border-radius: 50%;
background: var(--green-deep);
display: flex; align-items: center; justify-content: center;
font-size: 11px; color: var(--gold); font-weight: 700;
border: 2px solid var(--cream-light);
box-shadow: 0 0 0 2px var(--green-deep);
margin-top: 2px; flex-shrink: 0;
}
.day-event-dot.hunt { background: var(--red-deep); box-shadow: 0 0 0 2px var(--red-deep); color: var(--cream); }
.day-event-dot.check { background: var(--brown-wood); box-shadow: 0 0 0 2px var(--brown-wood); color: var(--cream); }
.day-event-dot.meeting { background: var(--green-deep); box-shadow: 0 0 0 2px var(--green-deep); }
.day-event-dot.birthday { background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); box-shadow: 0 0 0 2px var(--gold-dark); color: var(--brown-dark); }
.day-event-content {
flex: 1; background: var(--cream-light);
border: 1px solid var(--border); border-radius: 8px;
padding: 10px 14px; transition: border-color .15s, box-shadow .15s;
}
.day-event:hover .day-event-content { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.day-event-title { font-family: 'Lora', serif; font-size: 14px; color: var(--ink); font-weight: 700; line-height: 1.3; }
.day-event-meta { font-size: 11px; color: var(--brown-wood); margin-top: 4px; line-height: 1.4; }
.day-event-tag {
display: inline-block; margin-top: 6px;
padding: 2px 8px; background: var(--parchment);
border-radius: 4px; font-size: 9px; color: var(--brown-dark);
font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.day-event-tag.hunt { background: var(--red-deep); color: var(--cream); }
.day-event-tag.check { background: var(--brown-wood); color: var(--cream); }
.day-event-tag.birthday { background: var(--gold); cgitolor: var(--brown-dark); }
.day-empty { text-align: center; padding: 40px 20px; color: var(--brown-wood); }
.day-empty h4 { font-family: 'Lora', serif; font-size: 16px; color: var(--green-deep); font-weight: 700; margin-bottom: 6px; }
.day-empty p { font-family: 'Lora', serif; font-style: italic; font-size: 14px; }
.btn-primary.green { background-color: var(--green-deep) !important; border-color: var(--green-deep) !important; color: var(--gold) !important; }
.btn-primary.green:hover { background-color: var(--green-dark) !important; border-color: var(--green-dark) !important; }
/* ================= DOBA LOVU — season ================= */
.season-page { max-width: 1100px; }
.season-hero { background: linear-gradient(135deg, rgba(43,58,39,.95), rgba(26,36,22,.95)); color: var(--cream); padding: 26px 32px; border-radius: 12px; margin-bottom: 22px; border: 1px solid rgba(201,169,97,.2); box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.season-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 90% 10%, rgba(201,169,97,.18), transparent 50%); }
.season-hero-row { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; position: relative; z-index: 1; flex-wrap: wrap; }
.season-hero-ico { width: 56px; height: 56px; border-radius: 12px; background: rgba(201,169,97,.18); border: 1px solid rgba(201,169,97,.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.season-hero-ico svg { width: 26px; height: 26px; fill: var(--gold); }
.season-hero h3 { font-family: 'Lora', serif; font-size: 22px; color: var(--gold); font-weight: 800; letter-spacing: .5px; margin-bottom: 4px; }
.season-hero-sub { font-family: 'Lora', serif; font-style: italic; font-size: 14px; color: var(--parchment); line-height: 1.5; position: relative; z-index: 1; max-width: 720px; }
.season-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; position: relative; z-index: 1; }
.season-legend-item { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--parchment); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; }
.season-legend-swatch { width: 22px; height: 14px; border-radius: 3px; border: 1px solid rgba(201,169,97,.35); }
.season-legend-swatch.open { background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); }
.season-legend-swatch.closed { background: rgba(244,232,208,.15); }
.season-legend-swatch.partial { background: linear-gradient(90deg, var(--gold) 50%, rgba(244,232,208,.15) 50%); }
.season-block { margin-bottom: 28px; }
.season-block-title { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-left: 4px; }
.season-block-title .ico { width: 32px; height: 32px; border-radius: 8px; background: var(--green-deep); border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.season-block-title .ico svg { width: 16px; height: 16px; fill: var(--gold); }
.season-block-title h4 { font-family: 'Lora', serif; font-size: 18px; color: var(--green-deep); font-weight: 800; letter-spacing: .5px; }
.season-block-title .count { font-family: 'Inter', sans-serif; font-size: 11px; background: var(--parchment); color: var(--brown-dark); padding: 3px 10px; border-radius: 10px; font-weight: 600; letter-spacing: .5px; }
.season-table-wrap { background: var(--cream-light); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.season-table-scroll { overflow-x: auto; }
.season-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; }
.season-table thead th { background: linear-gradient(135deg, var(--green-deep), var(--green-dark)); color: var(--gold); padding: 10px 4px; text-align: center; font-family: 'Lora', serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; border-right: 1px solid rgba(201,169,97,.15); position: sticky; top: 0; z-index: 2; }
.season-table thead th:first-child { text-align: left; padding-left: 18px; width: 200px; border-right: 2px solid var(--gold); background: linear-gradient(135deg, var(--green-deep), var(--green-dark)); position: sticky; top: 0; left: 0; z-index: 3; }
.season-table thead th:last-child { border-right: none; }
.season-table thead th .month-name { display: block; font-size: 9px; color: var(--parchment); margin-top: 2px; opacity: .8; letter-spacing: .5px; text-transform: none; font-family: 'Lora', serif; font-style: italic; }
.season-table tbody tr { transition: background .12s; }
.season-table tbody tr:hover { background: rgba(201,169,97,.05); }
.season-table tbody tr:hover th { color: var(--green-deep); }
.season-table tbody th { background: var(--cream-light); text-align: left; padding: 10px 14px 10px 18px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; border-right: 2px solid var(--gold); border-bottom: 1px solid var(--border); position: sticky; left: 0; z-index: 1; }
.season-table tbody th .footnote { color: var(--red-deep); font-weight: 700; margin-left: 4px; font-size: 10px; vertical-align: super; }
.season-table tbody td { height: 36px; background: rgba(244,232,208,.4); border-right: 1px solid rgba(107,68,35,.06); border-bottom: 1px solid var(--border); text-align: center; font-family: 'Lora', serif; font-weight: 700; font-size: 11px; color: var(--brown-dark); transition: filter .15s, background .15s; position: relative; }
.season-table tbody td:last-child { border-right: none; }
.season-table tbody td.can { background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 60%, var(--gold-dark) 100%); color: var(--brown-dark); box-shadow: inset 0 0 0 1px rgba(158,130,64,.2); }
.season-table tbody td.can::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 1px, transparent 1px 4px); pointer-events: none; }
.season-table tbody td.can.boundary { background: linear-gradient(90deg, rgba(244,232,208,.4) 50%, var(--gold) 50%); color: var(--brown-dark); }
.season-table tbody td.can.boundary-end { background: linear-gradient(90deg, var(--gold) 50%, rgba(244,232,208,.4) 50%); }
.season-table tbody td.highlighted { filter: brightness(1.08); box-shadow: inset 0 0 0 2px var(--green-deep); z-index: 1; }
.season-table tbody tr:last-child th, .season-table tbody tr:last-child td { border-bottom: none; }
.season-yearround { margin-top: 18px; padding: 16px 20px; background: linear-gradient(90deg, rgba(201,169,97,.12), transparent); border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.season-yearround .label { font-family: 'Lora', serif; font-size: 12px; color: var(--green-deep); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; flex-shrink: 0; }
.season-yearround .species { font-size: 13px; color: var(--brown-dark); line-height: 1.5; }
.season-yearround .species b { font-family: 'Lora', serif; color: var(--ink); font-weight: 600; }
.season-footnotes { margin-top: 22px; padding: 18px 22px; background: var(--cream-light); border: 1px solid var(--border); border-radius: 10px; }
.season-footnotes h5 { font-family: 'Lora', serif; font-size: 12px; color: var(--green-deep); font-weight: 700; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1.4px; display: flex; align-items: center; gap: 8px; }
.season-footnotes h5::before { content: ''; width: 14px; height: 2px; background: var(--gold); }
.season-footnote { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 12px; color: var(--text-dim); line-height: 1.55; }
.season-footnote:last-child { border-bottom: none; }
.season-footnote .num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--green-deep); color: var(--gold); display: flex; align-items: center; justify-content: center; font-family: 'Lora', serif; font-weight: 700; font-size: 11px; }
.season-footnote b, .season-footnote strong { color: var(--ink); font-family: 'Lora', serif; font-weight: 600; }
@media (max-width: 700px) {
.season-hero { padding: 18px 18px; }
.season-table-wrap { border-radius: 8px; }
}
/* ================= MODALY ================= */
.modal-backdrop { position:fixed; inset:0; background:rgba(26,19,9,.55); backdrop-filter:blur(3px); z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .2s; }
.modal-backdrop.show { opacity:1; pointer-events:auto; }
.modal { background:var(--cream-light); border:1px solid var(--border); border-radius:14px; width:100%; max-width:640px; max-height:calc(100vh - 48px); display:flex; flex-direction:column; box-shadow:0 25px 60px rgba(0,0,0,.35); transform:translateY(12px) scale(.98); transition:transform .25s ease; position:relative; overflow:hidden; }
.modal-backdrop.show .modal { transform:translateY(0) scale(1); }
.modal::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent); }
.modal-header { padding:22px 26px 16px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; border-bottom:1px solid var(--border); }
.modal-eyebrow { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--brown-wood); }
.modal-title { font-family:'Lora',serif; font-size:22px; color:var(--green-deep); font-weight:800; margin-top:4px; line-height:1.2; }
.modal-sub { font-family:'Lora',serif; font-style:italic; font-size:14px; color:var(--brown-wood); margin-top:4px; }
.modal-close { width:34px; height:34px; border-radius:50%; background:var(--cream); border:1px solid var(--border); color:var(--brown-dark); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px; line-height:1; transition:all .15s; }
.modal-close:hover { background:var(--red-deep); color:var(--cream); border-color:var(--red-deep); }
.modal-body { padding:22px 26px; overflow-y:auto; flex:1; }
.modal-footer { padding:16px 26px 22px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--cream); }
.modal-footer .meta { font-size:11px; color:var(--brown-wood); }
.modal-footer .btns { display:flex; gap:8px; }
.msg-modal { max-width:420px; }
.msg-modal .modal-header { border-bottom:none; padding-bottom:0; }
.msg-modal .modal-body { padding-top:14px; text-align:center; }
.msg-icon { width:64px; height:64px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; }
.msg-icon.success { background:rgba(45,122,61,.12); color:#2d7a3d; }
.msg-icon.warn { background:rgba(184,138,43,.15); color:#b88a2b; }
.msg-icon.error { background:rgba(139,46,46,.12); color:var(--red-deep); }
.msg-icon.info { background:rgba(43,58,39,.12); color:var(--green-deep); }
.msg-title { font-family:'Lora',serif; font-size:20px; font-weight:800; color:var(--green-deep); margin-bottom:6px; }
.msg-text { font-size:13px; color:var(--brown-dark); line-height:1.55; }
.msg-modal .modal-footer { justify-content:center; border-top:none; background:transparent; }
@media (max-width: 700px) { .modal { max-height:90vh; } .modal-header, .modal-body, .modal-footer { padding-left:18px; padding-right:18px; } }
/* ================= AKTIVITA ================= */
.act-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; background: rgba(43,58,39,.08); color: var(--green-deep); border: 1px solid rgba(43,58,39,.15); border-radius: 4px; padding: 2px 7px; white-space: nowrap; }
/* ================= GRAFY ================= */
.graf-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 16px 16px; font-size: 11px; font-weight: 600; color: var(--brown-wood); font-family: 'Inter', sans-serif; letter-spacing: .4px; }
.graf-item { display: inline-flex; align-items: center; gap: 6px; }
.graf-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
/* ===== MOBILE VISIT CARDS ===== */
.visits-mobile {
display: none;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 12px;
margin-top: 14px;
}
.filter-toggle-btn {
display: none;
align-items: center; gap: 10px;
width: 100%; padding: 16px 18px;
background: var(--cream-light, #faf3e3);
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 10px;
font-size: 15px; font-weight: 600; color: var(--ink);
cursor: pointer; text-align: left; position: relative;
box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.filter-toggle-label { flex: 1; }
.filter-toggle-close { display: none; font-size: 16px; color: var(--brown-wood); }
.filter-toggle-btn.open .filter-toggle-close { display: inline; }
.filter-toggle-btn.open .filter-active-dot { display: none; }
.filter-toggle-btn.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; border-bottom-color: transparent; }
.filter-active-dot {
display: none;
width: 10px; height: 10px; border-radius: 50%;
background: var(--red-deep);
flex-shrink: 0;
animation: filterPulse 1.5s infinite;
}
.filter-toggle-btn.has-filter .filter-active-dot { display: block; }
@keyframes filterPulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(139,46,46,.5); }
50% { opacity: .8; box-shadow: 0 0 0 5px rgba(139,46,46,0); }
}
@media (max-width: 900px) {
.visits-mobile { display: grid; }
.table-toolbar.visits-mobile { display: flex; padding-left:0 }
.visits-desktop { display: none; }
.table-toolbar.visits-mobile .btn-secondary, .table-toolbar.visits-mobile .btn-primary { font-size: 11px; padding: 6px 8px; }
.filter-toggle-btn { display: flex; }
.visits-mobile.member-grid { grid-template-columns: 1fr; }
.filter-panel { display: none; margin-bottom: 18px; border-top-left-radius: 0; border-top-right-radius: 0; }
.filter-panel.open { display: block; }
}
.visit-card {
background: var(--cream-light);
border: 1px solid var(--border);
border-left: 4px solid var(--brown-leather);
border-radius: 10px;
padding: 14px 16px;
box-shadow: var(--shadow-sm);
transition: transform .15s, box-shadow .15s;
position: relative;
display: flex; flex-direction: column;
gap: 10px; min-width: 0;
}
.visit-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.visit-card.active { background: linear-gradient(90deg, rgba(43,58,39,.06), var(--cream-light)); border-left-color: var(--green-deep); }
.visit-card.has-catch { border-left-color: var(--gold-dark); }
.visit-card.has-death { border-left-color: var(--brown-dark); }
.visit-card-header { display: flex; align-items: flex-start; gap: 10px; }
.visit-card-name-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.visit-card-name {
font-family: 'Lora', serif;
font-size: 14px; color: var(--ink); font-weight: 700;
line-height: 1.2; word-break: break-word;
}
.visit-card-name.sub::before { content: '└ '; color: var(--brown-wood); font-weight: normal; }
.type-tag {
display: inline-block; font-family: 'Inter', sans-serif;
font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
padding: 2px 7px; border-radius: 10px; vertical-align: middle;
line-height: 1.5;
}
.type-tag--ulovok { background: rgba(43,85,39,.12); color: var(--green-deep); }
.type-tag--uhyn { background: rgba(120,50,30,.12); color: var(--brown-dark); }
.type-tag--odchyt { background: rgba(100,80,20,.12); color: var(--gold-dark); }
.visit-card-actions-top { display: flex; gap: 4px; flex-shrink: 0; margin-left: auto; position: relative; }
.visit-icon-btn {
width: 28px; height: 28px; border-radius: 6px;
background: transparent; border: 1px solid transparent;
color: var(--brown-wood); cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .12s; font-size: 14px; line-height: 1;
}
.visit-icon-btn:hover { background: var(--cream); border-color: var(--border); color: var(--green-deep); }
.visit-icon-btn.open { background: var(--green-deep); border-color: var(--gold); color: var(--gold); }
.visit-card-info {
display: grid; grid-template-columns: 1fr 1fr;
gap: 8px 12px; padding: 8px 0;
border-top: 1px dashed var(--border);
border-bottom: 1px dashed var(--border);
font-size: 12px;
}
.visit-info-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.visit-info-row .lbl {
font-size: 9px; color: var(--brown-wood);
text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700;
display: flex; align-items: center; gap: 5px;
}
.visit-info-row .lbl .ic { color: var(--gold-dark); font-size: 11px; }
.visit-info-row .val {
font-family: 'Lora', serif;
color: var(--ink); font-weight: 600; font-size: 13px; word-break: break-word;
}
.visit-info-row .val.muted { color: var(--brown-wood); font-style: italic; }
.visit-info-row .val.active { color: var(--green-deep); font-weight: 700; }
.visit-info-row .val.full-width { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 12px; }
.visit-info-row.span-2 { grid-column: 1 / -1; }
@media (max-width: 300px) {
.visit-card-info { grid-template-columns: 1fr; }
.visit-info-row.span-2 { grid-column: 1; }
}
.visit-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.visit-amo {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 700; letter-spacing: .8px;
text-transform: uppercase; padding: 4px 10px;
border-radius: 12px; border: 1px solid;
}
.visit-amo.yes { color: #2d7a3d; background: rgba(45,122,61,.1); border-color: rgba(45,122,61,.3); }
.visit-amo.no { color: var(--red-deep); background: rgba(139,46,46,.08); border-color: rgba(139,46,46,.3); }
.visit-detail-btn {
background: var(--cream); border: 1px solid var(--border);
border-radius: 6px; padding: 6px 12px;
font-size: 11px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; color: var(--brown-dark);
cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
font-family: 'Inter', sans-serif; transition: all .12s;
}
.visit-detail-btn:hover { background: var(--green-deep); color: var(--gold); border-color: var(--gold); }
.visit-detail-btn svg { width: 13px; height: 13px; fill: currentColor; }
/* visit detail modal body */
.visit-detail-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 14px; margin-bottom: 16px;
}
.visit-detail-grid .row { display: flex; flex-direction: column; gap: 4px; }
.visit-detail-grid .row.full { grid-column: 1 / -1; }
.visit-detail-grid .row .lbl {
font-size: 9px; color: var(--brown-wood);
text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700;
}
.visit-detail-grid .row .val {
font-family: 'Lora', serif;
font-size: 14px; color: var(--ink); font-weight: 600; word-break: break-word;
}
.visit-detail-grid .row .val.active { color: var(--green-deep); }
.visit-detail-section {
background: var(--cream); border: 1px solid var(--border);
border-radius: 8px; padding: 12px 16px; margin-bottom: 10px;
}
.visit-detail-section .label {
font-family: 'Lora', serif; font-size: 11px;
color: var(--green-deep); font-weight: 700;
margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1.4px;
}
.visit-detail-section .text { font-size: 13px; color: var(--ink); line-height: 1.55; }
.visit-detail-section.event { border-left: 4px solid var(--gold-dark); }
.visit-detail-section.event.uhyn { border-left-color: var(--brown-dark); }
/* ---- karta jednotlivej zveri (ulovok/uhyn/odchyt/chybene) + kebab menu ---- */
.zver-card {
position: relative;
background: var(--cream-light, #fff);
border: 1px solid var(--border);
border-radius: 8px;
padding: 9px 12px;
margin-bottom: 8px;
}
.zver-card:last-child { margin-bottom: 0; }
.zver-card.has-menu { padding-right: 38px; }
.zver-card .zc-title { font-family: 'Lora', serif; font-weight: 700; color: var(--ink); font-size: 13px; }
.zver-card .zc-body { margin-top: 3px; font-size: 13px; color: var(--ink); line-height: 1.55; }
.zver-card .zc-body .image-container,
.zver-card > .image-container { margin-top: 6px; }
.zver-menu-wrap { position: absolute; top: 6px; right: 6px; }
.zver-menu-wrap .ctx-menu { position: absolute; top: calc(100% + 4px); right: 0; left: auto; }
.zver-card:has(.ctx-menu.show) { z-index: 5; }
/* ============ QUILL EDITOR ============ */
.ql-toolbar.ql-snow { border-radius: 8px 8px 0 0; border-color: var(--border); background: var(--cream-light); }
.ql-container.ql-snow { border-radius: 0 0 8px 8px; border-color: var(--border); border-top: none; background: #fff; font-size: 14px; font-family: 'Inter', sans-serif; height: auto; }
.ql-editor { min-height: 220px; }
.ql-tall .ql-editor { min-height: 400px; }
.ql-snow .ql-stroke { stroke: var(--brown-dark); }
.ql-snow .ql-fill { fill: var(--brown-dark); }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--green-deep); }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--green-deep); }