/* * 3D Tisk Kalkulátor – Ekash-inspired theme * Requires Bootstrap 5 (loaded via CDN in ) * Font: Rubik via Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&display=swap'); /* ============================================================ ROOT OVERRIDES – 3dtisk brand colours over Ekash palette ============================================================ */ :root { --brand: #f05a00; --brand-dk: #c94b00; --brand-lt: #fff3ee; --sidebar-bg: #f05a00; --sidebar-w: 80px; --header-h: 72px; --body-bg: #F6F9FC; --card-bg: #ffffff; --text-main: #1f2c73; --text-muted: #7184ad; --border-col: #e5eaef; --success: #12A347; --danger: #DC2626; --warning: #FBA801; --info: #0E7CEB; --radius: 6px; --radius-lg: 12px; --shadow-sm: 0 0.125rem 0.25rem rgba(0,0,0,.075); --shadow: 0 0.5rem 1rem rgba(0,0,0,.1); --shadow-lg: rgba(145,158,171,.3) 0 0 2px 0, rgba(145,158,171,.12) 0 12px 24px -4px; --transition: .25s ease; } /* ============================================================ BASE RESET ON TOP OF BOOTSTRAP ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Rubik', 'Segoe UI', system-ui, sans-serif; background: var(--body-bg); color: var(--text-muted); font-size: 0.875rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--text-main); font-weight: 700; } a { color: var(--brand); } a:hover { color: var(--brand-dk); } /* ============================================================ MAIN WRAPPER ============================================================ */ #main-wrapper { transition: all var(--transition); position: relative; z-index: 1; margin-top: var(--header-h); } /* ============================================================ SIDEBAR ============================================================ */ .sidebar { background: var(--sidebar-bg); position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); z-index: 1001; box-shadow: var(--shadow-lg); overflow: visible; transition: width var(--transition); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } .sidebar .brand-logo { margin: 18px auto 12px; text-align: center; display: block; } .sidebar .brand-logo .brand-icon { width: 44px; height: 44px; background: rgba(255,255,255,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto; color: #fff; font-size: 1.3rem; } .sidebar .brand-logo .brand-icon.brand-icon--image { width: auto; height: auto; background: transparent; border-radius: 0; box-shadow: none; padding: 0; } .sidebar .brand-logo .brand-icon.brand-icon--image img { display: block; } .sidebar .menu { margin-top: 16px; padding: 0 10px; } .sidebar .menu ul { list-style: none; padding: 0; margin: 0; } .sidebar .menu ul li { margin-bottom: 4px; border-radius: var(--radius); position: relative; } .sidebar .menu ul li a { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 6px; border-radius: var(--radius); color: rgba(255,255,255,0.9); text-decoration: none; transition: all .18s ease; gap: 0; font-size: 0; position: relative; } .sidebar .menu ul li a .nav-icon { font-size: 1.2rem; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: 0.95; transition: opacity .15s; } .sidebar .menu ul li a .nav-icon svg { width: 24px; height: 24px; stroke: currentColor; } /* Floating tooltip label to the right */ .sidebar .menu ul li a .nav-label { position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%) translateX(-6px); background: rgba(28, 28, 32, 0.94); color: #fff; padding: 5px 13px; border-radius: 7px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; letter-spacing: .02em; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; z-index: 2100; box-shadow: 0 4px 14px rgba(0,0,0,0.28); } /* Arrow pointing left */ .sidebar .menu ul li a .nav-label::before { content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: rgba(28, 28, 32, 0.94); } .sidebar .menu ul li a:hover, .sidebar .menu ul li a:focus { background: rgba(255,255,255,0.15); color: #fff; } .sidebar .menu ul li a:hover .nav-icon, .sidebar .menu ul li a:focus .nav-icon { opacity: 1; } /* Show tooltip on hover */ .sidebar .menu ul li:hover a .nav-label, .sidebar .menu ul li a:focus .nav-label { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); transition: opacity .15s ease, transform .15s ease, visibility 0s linear 0s; } .sidebar .menu ul li.active a, .sidebar .menu ul li.active a:hover { background: rgba(255,255,255,0.22); color: #fff; } .sidebar .menu ul li.active a .nav-icon { opacity: 1; } .sidebar .menu ul li.active a .nav-label { color: #fff; } /* Sidebar user/logout bottom */ .sidebar-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; border-top: 1px solid rgba(255,255,255,0.15); } .sidebar-bottom a { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; color: rgba(255,255,255,0.7); text-decoration: none; border-radius: var(--radius); font-size: 0.6rem; font-weight: 600; gap: 4px; transition: all .15s; } .sidebar-bottom a svg { width: 18px; height: 18px; stroke: currentColor; } .sidebar-bottom a:hover { background: rgba(255,255,255,0.15); color: #fff; } /* Sidebar expand/collapse toggle button */ .sidebar-toggle { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; border-top: 1px solid rgba(255,255,255,0.15); display: flex; justify-content: center; } .sidebar-toggle-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 38px; border: none; background: rgba(255,255,255,0.10); border-radius: var(--radius); color: rgba(255,255,255,0.7); cursor: pointer; transition: background .15s, color .15s; } .sidebar-toggle-btn:hover { background: rgba(255,255,255,0.22); color: #fff; } .sidebar-toggle-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; transition: transform .25s ease; } /* ── Expanded sidebar state ─────────────────────────────── */ .sidebar.expanded { overflow: hidden; /* clip brand/menu to sidebar width */ } .sidebar.expanded .sidebar-toggle-btn svg { transform: rotate(180deg); } .sidebar.expanded .menu ul li a { flex-direction: column; gap: 5px; padding: 9px 6px 7px; align-items: center; } /* In expanded mode labels show below the icon, not as floating tooltip */ .sidebar.expanded .menu ul li a .nav-label { position: static !important; transform: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.85); opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transition: none !important; letter-spacing: .03em; text-align: center; line-height: 1.2; white-space: nowrap; } .sidebar.expanded .menu ul li a .nav-label::before { display: none !important; } .sidebar.expanded .menu ul li.active a .nav-label { color: #fff; } /* Disable hover tooltip in expanded mode */ .sidebar.expanded .menu ul li:hover a .nav-label, .sidebar.expanded .menu ul li a:focus .nav-label { transform: none !important; } /* ============================================================ HEADER (top bar) ============================================================ */ .header { padding: 0; position: fixed; top: 0; left: var(--sidebar-w); right: 0; height: var(--header-h); z-index: 1000; background: var(--body-bg); border-bottom: 1px solid var(--border-col); box-shadow: var(--shadow-sm); } .header .container-fluid { height: 100%; } .header-content { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 24px; } .header-left, .header-right { display: flex; align-items: center; gap: 12px; } /* Page title inside header */ .header-page-title { font-size: 1rem; font-weight: 700; color: var(--text-main); margin: 0; } .header-breadcrumb { font-size: 0.78rem; color: var(--text-muted); margin: 0; } .header-breadcrumb a { color: var(--brand); text-decoration: none; } .header-breadcrumb span { margin: 0 4px; opacity: .5; } /* Plan badge */ .plan-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: 800; letter-spacing: .04em; text-decoration: none; } .plan-badge--free { background: #fff3ee; color: var(--brand); border: 1.5px solid rgba(240,90,0,.2); } .plan-badge--pro { background: linear-gradient(135deg, #f05a00, #ff7a45); color: #fff; } .plan-badge--warn { background: #fef2f2; color: #dc2626; border-color: rgba(220,38,38,.2); animation: pulse-badge 1.5s infinite; } @keyframes pulse-badge { 0%,100% { opacity:1; } 50% { opacity:.7; } } /* Mini bar inside badge */ .plan-mini-bar { width: 36px; height: 4px; background: rgba(0,0,0,.1); border-radius: 2px; overflow: hidden; display: inline-block; } .plan-mini-bar span { display: block; height: 100%; background: currentColor; border-radius: 2px; transition: width .3s ease; } /* User / logout icons in header */ .header-icon-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1.5px solid var(--border-col); color: var(--text-muted); text-decoration: none; transition: all .15s; box-shadow: var(--shadow-sm); } .header-icon-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-lt); } .header-icon-btn svg { width: 16px; height: 16px; stroke: currentColor; } /* User label link */ .header-user-link { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 20px; background: #fff; border: 1.5px solid var(--border-col); color: var(--text-main); text-decoration: none; font-size: 0.8rem; font-weight: 600; transition: all .15s; white-space: nowrap; box-shadow: var(--shadow-sm); } .header-user-link:hover { border-color: var(--brand); color: var(--brand); } .header-user-link svg { width: 14px; height: 14px; stroke: currentColor; } .mobile-menu-toggle, .mobile-menu-overlay, .user-dd-plan-mobile { display: none; } /* ============================================================ CONTENT BODY ============================================================ */ .content-body { margin-left: var(--sidebar-w); margin-top: 30px; margin-bottom: 60px; padding: 0; } /* ============================================================ PAGE TITLE BLOCK ============================================================ */ .page-title { margin-bottom: 28px; } .page-title h3 { font-size: 1.4rem; font-weight: 700; margin: 0 0 2px; color: var(--text-main); } .page-title p { margin: 0; font-size: 0.85rem; color: var(--text-muted); } .breadcrumbs { font-size: 0.8rem; color: var(--text-muted); } .breadcrumbs a { color: var(--brand); text-decoration: none; font-weight: 500; } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs span { margin: 0 4px; font-size: 0.7rem; } /* ============================================================ STAT WIDGET – like ekash stat-widget-1 ============================================================ */ .stat-widget-1 { background: var(--card-bg); border-radius: var(--radius-lg); padding: 22px 22px 18px; margin-bottom: 24px; box-shadow: var(--shadow-lg); border: 1px solid rgba(0,0,0,.04); transition: box-shadow .2s; } .stat-widget-1:hover { box-shadow: rgba(145,158,171,.4) 0 0 2px 0, rgba(145,158,171,.2) 0 16px 32px -4px; } .stat-widget-1 h6 { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .05em; } .stat-widget-1 h3 { font-size: 1.5rem; font-weight: 800; color: var(--text-main); margin: 0 0 8px; letter-spacing: -.02em; } .stat-widget-1 p { font-size: 0.78rem; margin: 0; color: var(--text-muted); } .stat-widget-1 .stat-icon-wrap { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; float: right; margin-left: 12px; } .stat-widget-1 .stat-icon-wrap svg { width: 22px; height: 22px; } .stat-icon-orange { background: #fff3ee; color: var(--brand); } .stat-icon-green { background: #d0edda; color: var(--success); } .stat-icon-blue { background: #cfe5fb; color: var(--info); } .stat-icon-purple { background: #ede9fe; color: #7c3aed; } .stat-icon-amber { background: #feeecc; color: var(--warning); } .stat-icon-red { background: #fee2e2; color: var(--danger); } .stat-icon-teal { background: #ccfbf1; color: #0d9488; } /* ============================================================ CARDS ============================================================ */ .card { border: 1px solid rgba(0,0,0,.05); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: var(--card-bg); margin-bottom: 24px; } .card-header { background: transparent; border-bottom: 1px solid var(--border-col); padding: 18px 22px 14px; } .card-header h4, .card-header .card-title { font-size: 1rem; font-weight: 700; color: var(--text-main); margin: 0; } .card-body { padding: 22px; } .card-footer { background: transparent; border-top: 1px solid var(--border-col); padding: 14px 22px; } /* Section card (form sections) – similar to card but coloured accent */ .section-card { background: var(--card-bg); border-radius: var(--radius-lg); border: 1px solid rgba(0,0,0,.05); box-shadow: var(--shadow-lg); margin-bottom: 20px; overflow: hidden; } .section-card .section-head { padding: 16px 22px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--border-col); background: var(--card-bg); } .section-card .section-head h2 { font-size: 0.95rem; font-weight: 700; color: var(--text-main); margin: 0; } .section-card .section-head .section-sub { font-weight: 400; color: var(--text-muted); font-size: 0.82rem; } .section-card .section-num { width: 28px; height: 28px; border-radius: 8px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; flex-shrink: 0; } .section-card--blue .section-num { background: var(--info); } .section-card--green .section-num { background: var(--success); } .section-card--amber .section-num { background: var(--warning); } .section-card--orange .section-num { background: var(--brand); } .section-card--red .section-num { background: var(--danger); } .section-card .section-body { padding: 20px 22px; } /* ============================================================ FORM ELEMENTS (Bootstrap 5 override to match Ekash style) ============================================================ */ .form-label { font-size: 0.8rem; font-weight: 600; color: var(--text-main); margin-bottom: 6px; } .form-control, .form-select { border: 1.5px solid #dde2eb; border-radius: var(--radius); font-size: 0.875rem; font-family: 'Rubik', sans-serif; color: var(--text-main); background: #fff; padding: 9px 14px; transition: border-color .15s, box-shadow .15s; } .form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(240,90,0,.12); outline: none; } .form-control.has-unit { padding-right: 60px; } /* Input groups */ .input-group-text { background: #f8f9fb; border: 1.5px solid #dde2eb; color: var(--text-muted); font-size: 0.8rem; font-weight: 600; } /* ============================================================ BUTTONS ============================================================ */ .btn { font-family: 'Rubik', sans-serif; font-weight: 600; border-radius: var(--radius); font-size: 0.875rem; padding: 9px 20px; transition: all .15s; letter-spacing: .01em; } .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; } .btn-primary:hover, .btn-primary:focus { background: var(--brand-dk); border-color: var(--brand-dk); color: #fff; box-shadow: 0 4px 12px rgba(240,90,0,.3); } .btn-success { background: var(--success); border-color: var(--success); color: #fff; } .btn-success:hover { background: #0d8a3b; border-color: #0d8a3b; } .btn-outline-secondary { border: 1.5px solid var(--border-col); color: var(--text-muted); background: #fff; } .btn-outline-secondary:hover { background: var(--body-bg); color: var(--text-main); } .btn-sm { padding: 5px 12px; font-size: 0.78rem; } .btn-lg { padding: 12px 28px; font-size: 1rem; } /* ============================================================ TABLE ============================================================ */ .table { font-size: 0.82rem; color: var(--text-muted); --bs-table-striped-bg: #f8fafd; } .table thead th { font-size: 0.72rem; font-weight: 700; color: var(--text-main); text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid var(--border-col); white-space: nowrap; padding: 12px 14px; } .table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border-col); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover td { background: #f8fafd; } /* ============================================================ ALERTS ============================================================ */ .alert { border-radius: var(--radius); border: none; font-size: 0.875rem; padding: 14px 18px; } .alert-success { background: #d0edda; color: #07411c; } .alert-danger { background: #fee2e2; color: #580f0f; } .alert-warning { background: #feeecc; color: #644300; } .alert-info { background: #cfe5fb; color: #06325e; } .alert-error { background: #fee2e2; color: #580f0f; } /* alias */ /* ============================================================ BADGES ============================================================ */ .badge { font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 0.7rem; padding: 4px 8px; border-radius: 4px; } /* ============================================================ HISTORY PAGE – specific components kept working ============================================================ */ /* Stats grid → now uses Bootstrap cols + stat-widget-1, but keep legacy too */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; margin-bottom: 24px; } .stat-box { background: var(--card-bg); border-radius: var(--radius-lg); padding: 18px 18px 14px; display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow-lg); border: 1px solid rgba(0,0,0,.04); } .stat-box .stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand); } .stat-icon--orange { background: #fff3ee; color: var(--brand); } .stat-icon--green { background: #d0edda; color: var(--success); } .stat-icon--blue { background: #cfe5fb; color: var(--info); } .stat-icon--purple { background: #ede9fe; color: #7c3aed; } .stat-icon--amber { background: #feeecc; color: var(--warning); } .stat-icon--red { background: #fee2e2; color: var(--danger); } .stat-icon--teal { background: #ccfbf1; color: #0d9488; } .stat-text { display: flex; flex-direction: column; } .stat-value { font-size: 1.1rem; font-weight: 700; color: var(--text-main); line-height: 1.2; } .stat-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; margin-top: 2px; } /* Table wrapper */ .table-wrap { background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid rgba(0,0,0,.04); overflow: hidden; margin-bottom: 24px; } .history-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .history-table thead th { padding: 12px 14px; background: #f8fafd; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); border-bottom: 1.5px solid var(--border-col); white-space: nowrap; } .history-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border-col); vertical-align: middle; color: var(--text-muted); } .history-table tbody tr:last-child td { border-bottom: none; } .history-table tbody tr:hover td { background: #f8fafd; } .history-table .badge-realizovano { background: #d0edda; color: #07411c; padding: 3px 9px; border-radius: 4px; font-size:.7rem; font-weight:700; } .history-table .badge-nabidka { background: #cfe5fb; color: #06325e; padding: 3px 9px; border-radius: 4px; font-size:.7rem; font-weight:700; } .history-table .badge-pending { background: #feeecc; color: #644300; padding: 3px 9px; border-radius: 4px; font-size:.7rem; font-weight:700; } /* Search input */ .history-search-wrap { margin-bottom: 20px; } .history-search-wrap input { max-width: 420px; padding: 10px 16px; border: 1.5px solid var(--border-col); border-radius: 10px; font-family: 'Rubik', sans-serif; font-size: 0.875rem; color: var(--text-main); background: #fff; outline: none; transition: border-color .15s; width: 100%; } .history-search-wrap input:focus { border-color: var(--brand); } /* Keep spools list as table rows on mobile (no giant stacked cards) */ @media (max-width: 768px) { .spools-th-short { display: inline; } .spools-th-full { display: none; } .spools-table { width: max-content; table-layout: auto; } .spools-table th { font-size: 0.66rem !important; letter-spacing: .03em; line-height: 1.15; white-space: nowrap; min-width: 0 !important; width: auto !important; padding: 8px 6px !important; } .spools-table thead { display: table-header-group !important; } .spools-table tbody tr { display: table-row !important; border-bottom: 1px solid var(--border-col); padding: 0 !important; } .spools-table tbody td { display: table-cell !important; grid-template-columns: none !important; gap: 0 !important; padding: 8px 6px !important; text-align: inherit !important; white-space: nowrap; font-size: 0.79rem; } .spools-table tbody td::before { content: none !important; display: none !important; } .spools-table tbody td:first-child, .spools-table tbody td:first-child + td { display: table-cell !important; width: auto !important; margin-right: 0 !important; padding-top: 8px !important; } .spool-row-actions { justify-content: flex-end !important; } } @media (min-width: 769px) { .spools-th-short { display: none; } .spools-th-full { display: inline; } } /* ============================================================ CALCULATOR PAGE – result panel, form grid already in style.css ============================================================ */ .calculator-layout { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; } @media (max-width: 1100px) { .calculator-layout { grid-template-columns: 1fr; } } /* Welcome / upgrade banners */ .welcome-banner, .upgrade-banner { border-radius: var(--radius-lg); padding: 16px 20px; display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; } .welcome-banner { background: #d0edda; border: 1px solid #a0dab5; color: #07411c; } .welcome-banner-icon { color: var(--success); flex-shrink: 0; margin-top: 2px; } .welcome-banner-text h3 { font-size: .95rem; margin: 0 0 4px; color: #07411c; } .welcome-banner-text p { font-size: .82rem; margin: 0; color: #07411c; } .upgrade-banner { background: #feeecc; border: 1px solid #fddc99; color: #644300; align-items: center; } .upgrade-banner .btn { margin-left: auto; flex-shrink: 0; } /* Save panel inside card */ .save-panel { background: var(--card-bg); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-lg); border: 1px solid rgba(0,0,0,.04); margin-top: 16px; } .save-panel h4 { font-size: .9rem; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; } .save-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .save-fields input { padding: 9px 14px; border: 1.5px solid var(--border-col); border-radius: var(--radius); font-family: 'Rubik', sans-serif; font-size: .875rem; color: var(--text-main); outline: none; transition: border-color .15s; } .save-fields input:focus { border-color: var(--brand); } /* ============================================================ TOGGLE SWITCH ============================================================ */ .toggle-row { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 6px 0; } .toggle-row input[type="checkbox"] { display: none; } .toggle-switch { width: 38px; height: 22px; background: #cbd5e1; border-radius: 11px; position: relative; flex-shrink: 0; transition: background .15s; } .toggle-switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); } .toggle-row input:checked ~ .toggle-switch { background: var(--brand); } .toggle-row input:checked ~ .toggle-switch::after { left: 19px; } .toggle-text { font-size: .875rem; font-weight: 600; color: var(--text-main); } .toggle-sub { font-size: .75rem; color: var(--text-muted); } /* ============================================================ PAGINATION ============================================================ */ .pagination { gap: 4px; margin-top: 20px; } .page-link { color: var(--brand); border: 1.5px solid var(--border-col); border-radius: var(--radius) !important; font-size: 0.82rem; font-weight: 600; padding: 6px 12px; transition: all .15s; } .page-link:hover { background: var(--brand-lt); color: var(--brand); border-color: var(--brand); } .page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; } .page-item.disabled .page-link { opacity: .5; } /* ============================================================ RESULT PANEL (calculator result box) ============================================================ */ .result-sticky { position: sticky; top: calc(var(--header-h) + 16px); } .result-card { background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid rgba(0,0,0,.05); overflow: hidden; } .result-card-header { padding: 16px 20px; background: var(--brand); color: #fff; } .result-card-header h3 { font-size: 1rem; font-weight: 700; margin: 0; color: #fff; } .rdh-card { background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid rgba(0,0,0,.04); overflow: hidden; margin-bottom: 16px; } .rdh-card-header { padding: 12px 18px; border-bottom: 1px solid var(--border-col); display: flex; align-items: center; gap: 10px; } .rdh-card-header h3 { font-size: .9rem; font-weight: 700; margin: 0; } .rdh-card-body { padding: 14px 18px; } /* ============================================================ MOBILE – sidebar becomes off-canvas drawer ============================================================ */ @media (max-width: 991px) { body.mobile-menu-open { overflow: hidden; } .sidebar { top: 0; left: 0; bottom: 0; width: min(84vw, 320px); height: 100vh; z-index: 1305; transform: translateX(calc(-100% - 8px)); transition: transform .25s ease; overflow-y: auto !important; box-shadow: 0 16px 40px rgba(15,23,42,.22); } .sidebar.mobile-open { transform: translateX(0); } .sidebar.expanded { width: min(84vw, 320px); overflow-y: auto !important; } .sidebar-toggle { display: none !important; } .sidebar .brand-logo { display: block; margin: 14px 0 10px; } .sidebar .brand-logo a { display: flex; justify-content: center; } .sidebar .menu { margin-top: 0; padding: 8px 10px 14px; height: auto; display: block; } .sidebar .menu ul { display: block; width: 100%; } .sidebar .menu ul li { margin-bottom: 6px; } .sidebar .menu ul li a { flex-direction: row; justify-content: flex-start; align-items: center; padding: 10px 12px; gap: 12px; font-size: .92rem; } .sidebar.expanded .menu ul li a { flex-direction: row; gap: 12px; align-items: center; padding: 10px 12px; } .sidebar .menu ul li a .nav-icon { width: 22px; justify-content: center; } .sidebar .menu ul li a .nav-label, .sidebar.expanded .menu ul li a .nav-label { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; background: transparent !important; box-shadow: none !important; color: rgba(255,255,255,.95) !important; padding: 0 !important; font-size: .88rem; line-height: 1.2; text-align: left; } .sidebar .menu ul li a .nav-label::before, .sidebar.expanded .menu ul li a .nav-label::before { display: none !important; } .sidebar-bottom { display: none; } .mobile-menu-overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(15,23,42,.34); opacity: 0; visibility: hidden; transition: opacity .2s ease; z-index: 1304; pointer-events: none; } body.mobile-menu-open .mobile-menu-overlay { opacity: 1; visibility: visible; pointer-events: auto; } .header { left: 0; z-index: 1203; } .header-content { padding: 0 12px; } .header-left { min-width: 0; } .header-page-title { font-size: 0.92rem; max-width: 44vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-breadcrumb { display: none; } .header-right { gap: 8px; } .header-user-link { padding: 6px 10px; max-width: 44vw; } .header-user-link span { display: inline-block; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plan-badge-desktop { display: none; } .user-dd-plan-mobile { display: block; font-weight: 700; } .mobile-menu-toggle { display: inline-flex; } .content-body { margin-left: 0; margin-bottom: 40px; } #main-wrapper { margin-top: var(--header-h); } .calculator-layout { grid-template-columns: 1fr; } } @media (min-width: 992px) and (max-width: 1199px) { .sidebar { width: 70px; } .content-body { margin-left: 70px; } .header { left: 70px; } } /* ============================================================ PAGE BANNER (old style still works, but we provide new one) ============================================================ */ /* Hide old banner – each page will use Bootstrap page-title block instead */ .page-banner-outer { display: none !important; } /* ============================================================ UTILITY – keep old classes working in the meanwhile ============================================================ */ .page-simple { /* was wrapping content in history.php */ } .page-body { /* was wrapping content in index.php */ } .col-form, .col-result { /* kept for JS references */ } /* ============================================================ DEEP OVERRIDE – remap style.css legacy variables to Ekash palette so that every old component naturally picks up the new colour tokens without touching style.css. ============================================================ */ :root { /* Old style.css vars → Ekash values */ --text: #7184ad; /* was #0f172a */ --text-muted: #7184ad; /* was #64748b */ --bg: #F6F9FC; /* was #f1f5f9 */ --border: #e5eaef; /* was #e8ecf0 */ --radius: 6px; /* was 14px */ --radius-sm: 4px; /* was 8px */ --shadow: rgba(145,158,171,.3) 0 0 2px 0, rgba(145,158,171,.12) 0 12px 24px -4px; --shadow-md: rgba(145,158,171,.35) 0 0 2px 0, rgba(145,158,171,.18) 0 16px 32px -4px; --shadow-lg: rgba(145,158,171,.3) 0 0 2px 0, rgba(145,158,171,.12) 0 12px 24px -4px; --font: 'Rubik', 'Segoe UI', system-ui, sans-serif; /* Align success to Ekash green */ --success: #12A347; --success-lt: #d0edda; } /* Force Rubik on absolutely every element that might have inherited Inter */ *, *::before, *::after { font-family: inherit; } body { font-family: 'Rubik', 'Segoe UI', system-ui, sans-serif !important; } /* ============================================================ FORM-GROUP inputs (old custom class in style.css) Override these to Ekash-style so every form in the app gets Rubik font, correct colours, Ekash border radius. ============================================================ */ .form-group input, .form-group select, .form-group textarea { font-family: 'Rubik', sans-serif !important; color: #1f2c73 !important; border-color: #dde2eb !important; border-radius: 6px !important; background: #fff !important; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #f05a00 !important; box-shadow: 0 0 0 3px rgba(240,90,0,.12) !important; outline: none !important; } .form-group label { color: #1f2c73 !important; font-family: 'Rubik', sans-serif !important; font-weight: 600; font-size: 0.8rem; } /* Unit suffix spans */ .input-unit { font-family: 'Rubik', sans-serif; color: #7184ad; font-size: 0.78rem; } /* ============================================================ SECTION-HEAD – remove old left orange bar pseudo-element replaced by the .section-num badge in the new layout ============================================================ */ .section-head::before { display: none !important; } .section-head { padding-left: 22px !important; } /* ============================================================ SECTION-CARD body padding (old style was tighter) ============================================================ */ .section-body { padding: 20px 22px !important; } /* ============================================================ HISTORY TABLE – comprehensive Ekash re-skin ============================================================ */ .history-table, .history-table table { font-family: 'Rubik', sans-serif; } .history-table thead, .history-table thead tr { background: #f8fafd !important; } .history-table thead th { background: #f8fafd !important; color: #7184ad !important; font-family: 'Rubik', sans-serif !important; font-size: 0.7rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .05em !important; border-bottom: 1.5px solid #e5eaef !important; padding: 12px 14px !important; white-space: nowrap; } .history-table tbody td { color: #7184ad !important; font-family: 'Rubik', sans-serif !important; font-size: 0.8rem !important; border-bottom: 1px solid #e5eaef !important; padding: 11px 14px !important; vertical-align: middle; background: #fff; } .history-table tbody tr:hover td { background: #f8fafd !important; } .history-table tbody tr:last-child td { border-bottom: none !important; } /* Name / project name column: slightly heavier */ .history-table .col-name td, .history-table td.td-name, .history-table td:first-child { color: #1f2c73 !important; font-weight: 600; } /* ============================================================ TABLE-WRAP (card container for tables) ============================================================ */ .table-wrap { border-radius: 12px !important; box-shadow: rgba(145,158,171,.3) 0 0 2px 0, rgba(145,158,171,.12) 0 12px 24px -4px !important; border: 1px solid rgba(0,0,0,.04) !important; overflow: hidden !important; } /* ============================================================ PAGE-HEADER (history.php search/filter bar) ============================================================ */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .page-header h1, .page-header h2, .page-header h3 { color: #1f2c73 !important; font-family: 'Rubik', sans-serif; } /* ============================================================ REALIZED / STATUS BUTTONS in table ============================================================ */ .btn-realizovano { font-family: 'Rubik', sans-serif !important; border-radius: 20px !important; font-size: 0.75rem !important; } .btn-realizovano.is-realized { background: #d0edda !important; border-color: #a0dab5 !important; color: #07411c !important; } /* ============================================================ AUTH PAGES (login, register, forgot…) ============================================================ */ .auth-card, .page-simple .auth-card { border-radius: 12px !important; box-shadow: rgba(145,158,171,.3) 0 0 2px 0, rgba(145,158,171,.12) 0 12px 24px -4px !important; border: 1px solid rgba(0,0,0,.04) !important; font-family: 'Rubik', sans-serif; } .auth-card h1, .auth-card h2 { color: #1f2c73 !important; } .auth-card label { color: #1f2c73 !important; font-weight: 600; font-size: 0.8rem; font-family: 'Rubik', sans-serif; } .auth-card input { font-family: 'Rubik', sans-serif !important; border-radius: 6px !important; border-color: #dde2eb !important; color: #1f2c73 !important; } .auth-card input:focus { border-color: #f05a00 !important; box-shadow: 0 0 0 3px rgba(240,90,0,.12) !important; } .auth-card p, .auth-card small { color: #7184ad !important; font-family: 'Rubik', sans-serif; } /* ============================================================ RESULT PANEL – override dark gradient headers to use orange brand with Ekash card shadow ============================================================ */ .result-panel { font-family: 'Rubik', sans-serif; } .result-header, .result-panel .result-header { background: linear-gradient(135deg, #f05a00 0%, #ff7a45 100%) !important; border-radius: 10px 10px 0 0 !important; } .result-header * { color: #fff !important; } .rdh-card-head--cost { background: linear-gradient(135deg, #1f2c73 0%, #2d3e9e 100%) !important; } .rdh-card-head--material { background: linear-gradient(135deg, #12A347 0%, #16c45a 100%) !important; } /* result values */ .result-row, .result-row .result-label, .result-row .result-value { font-family: 'Rubik', sans-serif; color: #1f2c73; } .result-final .result-label { color: #7184ad !important; } .result-final .result-value { color: #1f2c73 !important; font-weight: 800; } /* ============================================================ CHIP / FILAMENT-CHIP badges ============================================================ */ .chip, .filament-chip { font-family: 'Rubik', sans-serif !important; border-radius: 20px !important; font-size: 0.72rem !important; font-weight: 600; } /* ============================================================ MODAL REDESIGN ============================================================ */ .modal-card { border-radius: 12px !important; overflow: hidden !important; box-shadow: rgba(145,158,171,.4) 0 0 4px 0, rgba(145,158,171,.25) 0 24px 48px -8px !important; font-family: 'Rubik', sans-serif; } .modal-card-head { background: #fff !important; border-bottom: 1px solid #e5eaef !important; padding: 20px 24px !important; } .modal-card-head h3, .modal-card-head .modal-title { color: #1f2c73 !important; font-size: 1rem !important; font-weight: 700 !important; } .detail-label { color: #7184ad !important; font-family: 'Rubik', sans-serif; font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em; } .detail-value, .detail-row .detail-value { color: #1f2c73 !important; font-family: 'Rubik', sans-serif; font-size: 0.875rem !important; } /* ============================================================ PRINTER / ADMIN TABLES (printers.php, admin.php, sazby.php…) Apply the same Ekash table look to all tables sharing table-wrap or plain inside .content-body ============================================================ */ .content-body table { font-family: 'Rubik', sans-serif; font-size: 0.82rem; border-collapse: collapse; width: 100%; } .content-body table thead th { background: #f8fafd !important; color: #7184ad !important; font-size: 0.7rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1.5px solid #e5eaef !important; padding: 12px 14px !important; } .content-body table tbody td { color: #7184ad !important; border-bottom: 1px solid #e5eaef !important; padding: 11px 14px !important; vertical-align: middle; background: #fff; } .content-body table tbody tr:hover td { background: #f8fafd !important; } .content-body table tbody tr:last-child td { border-bottom: none !important; } /* First column (names) should be dark heading colour */ .content-body table tbody td:first-child { color: #1f2c73 !important; font-weight: 600; } /* ============================================================ STAT-BOX LEGACY (reuse in old pages that still have it) ============================================================ */ .stat-box { font-family: 'Rubik', sans-serif !important; } .stat-value { color: #1f2c73 !important; } .stat-label { color: #7184ad !important; } /* ============================================================ EMPTY STATE ============================================================ */ .empty-state { font-family: 'Rubik', sans-serif; color: #7184ad !important; } .empty-state h3 { color: #1f2c73 !important; } /* ============================================================ NAB (offer form) overrides ============================================================ */ .nab-label, .nab-url-label { color: #7184ad !important; font-family: 'Rubik', sans-serif !important; } .nab-regen-row { border-radius: 6px !important; font-family: 'Rubik', sans-serif; } /* ============================================================ PRINTER BADGE ============================================================ */ .printer-badge { font-family: 'Rubik', sans-serif !important; border-radius: 20px !important; font-size: 0.72rem !important; font-weight: 600; } /* ============================================================ CONTENT WRAP (inner padding wrapper inside .content-body) ============================================================ */ .content-wrap { min-height: calc(100vh - var(--header-h) - 60px); } /* ============================================================ RI – compact result-icon spans (new result panel in index.php) ============================================================ */ .ri { width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .ri svg { width: 13px; height: 13px; } .ri-orange { background: #fff3ee; color: #f05a00; } .ri-blue { background: #cfe5fb; color: #0E7CEB; } .ri-gray { background: #f1f5f9; color: #64748b; } /* ============================================================ RESULT PANEL rows – fix JS show/hide for !important display:none The JS toggles these with .style.display, but CSS !important blocks it. Only use !important on initial placeholder states. ============================================================ */ #row-marz-fixni, #row-marz-procent, #row-prace, #row-model, #row-rezie, #row-chybovost { display: none; } /* ============================================================ SPOOL COLOR DOT ============================================================ */ .spool-color-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex-shrink: 0; border: 1.5px solid rgba(0,0,0,.1); background: transparent; } /* ============================================================ CHIP ROW (quick-select buttons under margin inputs) ============================================================ */ .chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; border: 1.5px solid #e5eaef; background: #f8fafd; color: #7184ad; font-size: 0.72rem; font-weight: 600; cursor: pointer; font-family: 'Rubik', sans-serif; transition: all .12s; white-space: nowrap; } .chip:hover { border-color: #f05a00; color: #f05a00; background: #fff3ee; } .chip.active { border-color: #f05a00; color: #f05a00; background: #fff3ee; } /* ============================================================ TIME ROWS CONTAINER (work/modelling time dynamic rows) ============================================================ */ .time-rows-container { display: flex; flex-direction: column; gap: 8px; } .time-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f8fafd; border: 1.5px solid #e5eaef; border-radius: 8px; } .time-row input, .time-row select { font-family: 'Rubik', sans-serif; font-size: 0.82rem; border: 1.5px solid #dde2eb; border-radius: 6px; padding: 5px 8px; color: #1f2c73; background: #fff; } .time-row input:focus, .time-row select:focus { border-color: #f05a00; outline: none; } .time-row-col { min-width: 0; } .btn-remove-row { background: none; border: none; color: #dc2626; cursor: pointer; padding: 4px; font-size: 1rem; line-height: 1; flex-shrink: 0; opacity: .6; transition: opacity .15s; } .btn-remove-row:hover { opacity: 1; } @media (max-width: 768px) { .time-rows-header { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px; } .time-rows-header span:nth-child(4), .time-rows-header span:nth-child(5) { display: none; } .prace-row, .model-row, #prace-rows-container .prace-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px; } .prace-row .time-row-col, .model-row .time-row-col, #prace-rows-container .prace-row .time-row-col { min-width: 0; } .prace-row input, .model-row input, #prace-rows-container .prace-row input { padding: 8px 8px; font-size: 0.84rem; } .prace-row .prace-total, .model-row .prace-total, #prace-rows-container .prace-row .prace-total { grid-column: 1 / span 2 !important; min-height: 34px; font-size: 0.88rem; padding: 0 6px; } .prace-row .btn-del, .model-row .btn-del, #prace-rows-container .prace-row .btn-del { grid-column: 3 / span 1 !important; justify-self: end; padding: 6px 8px; font-size: 0.78rem; } } /* ============================================================ MOBILE SUMMARY BAR ============================================================ */ .mobile-summary { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; background: linear-gradient(135deg, #f05a00, #ff7a45); color: #fff; padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); text-align: center; } .mobile-summary-label { font-size: 0.6rem; font-weight: 700; letter-spacing: .08em; opacity: .92; color: #fff; margin-bottom: 2px; } .mobile-summary-val { font-size: 1.2rem; font-weight: 800; color: #fff; } .mobile-summary-sub { font-size: 0.72rem; opacity: 1; color: #fff; } @media (max-width: 991px) { .mobile-summary { display: block; } }