/* ===== barevne akcenty (prepinatelne pres data-accent na ) ===== */ :root, [data-accent="teal"] { --accent: #00897b; --accent-dark: #00695c; --accent-darker: #004d43; --accent-soft: rgba(0, 137, 123, .12); } [data-accent="blue"] { --accent: #1e6ee5; --accent-dark: #1557bd; --accent-darker: #0e3f8c; --accent-soft: rgba(30,110,229,.12); } [data-accent="purple"] { --accent: #7b46c9; --accent-dark: #6234a8; --accent-darker: #482380; --accent-soft: rgba(123,70,201,.12); } [data-accent="rose"] { --accent: #d23d6d; --accent-dark: #ad2c56; --accent-darker: #821e40; --accent-soft: rgba(210,61,109,.12); } [data-accent="orange"] { --accent: #e07b26; --accent-dark: #bd621a; --accent-darker: #8f4a12; --accent-soft: rgba(224,123,38,.12); } [data-accent="green"] { --accent: #3d9142; --accent-dark: #2e7433; --accent-darker: #205624; --accent-soft: rgba(61,145,66,.12); } body { min-height: 100vh; background: var(--bs-tertiary-bg); } /* akcentove komponenty */ .btn-accent { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-dark); --bs-btn-hover-border-color: var(--accent-dark); --bs-btn-active-bg: var(--accent-darker); --bs-btn-active-border-color: var(--accent-darker); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } .btn-outline-accent { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-color: var(--accent-dark); --bs-btn-hover-border-color: var(--accent-dark); --bs-btn-active-bg: var(--accent); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--accent); } .text-accent { color: var(--accent) !important; } .bg-accent-soft { background: var(--accent-soft); } .nav-pills .nav-link.active { background-color: var(--accent); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } /* ===== login ===== */ .login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; background: linear-gradient(150deg, var(--accent-dark), var(--accent-darker)); } .login-card { width: 100%; max-width: 370px; border: none; border-radius: 16px; } .login-logo { font-size: 42px; color: var(--accent); } /* ===== layout ===== */ #app { display: flex; min-height: 100vh; } #sidebar { width: 210px; flex-shrink: 0; background: linear-gradient(180deg, var(--accent-dark), var(--accent-darker)); color: #fff; position: sticky; top: 0; height: 100vh; } .side-logo { font-size: 21px; font-weight: 700; letter-spacing: .5px; padding: 18px 18px 14px; } .side-logo .bi { margin-right: 6px; } .side-item { display: flex; align-items: center; gap: 10px; background: none; border: none; color: rgba(255,255,255,.85); padding: 10px 12px; font-size: 14px; cursor: pointer; border-radius: 8px; text-align: left; text-decoration: none; width: 100%; } .side-item:hover { background: rgba(255,255,255,.08); color: #fff; } .side-item.active { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; } .side-item .bi { width: 20px; text-align: center; } .side-sep { border-color: rgba(255,255,255,.25); margin: 8px 4px; opacity: 1; } .side-add { font-weight: 600; color: #fff; margin: 4px 0; } .add-circle { width: 28px; height: 28px; border-radius: 50%; background: #f5a623; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; margin-left: -4px; } .content { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { margin: 12px 16px 0; border: none; } .app-main { padding: 14px 16px 32px; max-width: 1250px; } .avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; } .theme-menu { min-width: 230px; } .accent-swatch { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); border: 3px solid transparent; cursor: pointer; } .accent-swatch.active { border-color: var(--bs-body-color); } /* ===== timeline ===== */ .timeline { position: relative; } .timeline::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: var(--bs-border-color); } .t-month { position: relative; margin: 12px 0 8px 48px; color: var(--bs-secondary-color); font-size: 13px; font-weight: 600; } .t-entry { position: relative; display: flex; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--bs-border-color); } .t-entry:last-child { border-bottom: none; } .t-ico { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; color: #fff; z-index: 1; } .t-ico.fuel { background: #f5a623; } .t-ico.svc { background: #8d6e63; } .t-body { flex: 1; min-width: 0; } .t-title { font-weight: 700; margin-bottom: 3px; } .t-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 2px 14px; font-size: 13px; color: var(--bs-secondary-color); } .t-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .t-meta .bi { margin-right: 4px; } .t-cost { color: var(--bs-danger); font-weight: 700; margin-top: 5px; } .t-actions { display: flex; flex-direction: column; gap: 2px; } .t-actions .btn { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .4rem; } /* ===== stat karty / reporty ===== */ .s-ico { width: 32px; height: 32px; border-radius: 8px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; } .stat-total { font-size: 20px; font-weight: 700; } .chart-box { position: relative; height: 300px; } @media (max-width: 575px) { .chart-box { height: 240px; } } /* ===== bottom navbar (mobil) ===== */ #bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: flex; align-items: stretch; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); box-shadow: 0 -4px 16px rgba(0,0,0,.08); padding-bottom: env(safe-area-inset-bottom); } .bn-item { flex: 1; background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 0 6px; font-size: 11px; color: var(--bs-secondary-color); } .bn-item .bi { font-size: 19px; line-height: 1.1; } .bn-item.active { color: var(--accent); font-weight: 600; } .bn-fab { width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: #fff; border: none; font-size: 22px; margin: -20px 6px 6px; align-self: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,.25); } @media (max-width: 991px) { body { padding-bottom: 70px; } .app-main { padding: 12px 10px 24px; } .topbar { margin: 10px 10px 0; } } /* ===== add menu ===== */ .add-menu { position: fixed; z-index: 1060; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden; min-width: 180px; } .add-menu button { background: none; border: none; padding: 12px 20px; text-align: left; font-size: 14px; color: var(--bs-body-color); } .add-menu button:hover { background: var(--bs-tertiary-bg); } .add-menu .bi { margin-right: 8px; } /* ===== vozidla ===== */ .vehicle-card.selected { outline: 2px solid var(--accent); } /* ===== dark mode ladeni ===== */ [data-bs-theme="dark"] #bottomnav { box-shadow: 0 -4px 16px rgba(0,0,0,.4); } [data-bs-theme="dark"] .t-ico.fuel { background: #c98613; } [data-bs-theme="dark"] .t-ico.svc { background: #6d554e; } [data-bs-theme="dark"] .s-ico { filter: saturate(.8) brightness(.9); }