@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ============================================================
   3D Tisk Kalkulátor – stylesheet v3 (sidebar redesign)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary:     #f05a00;
    --primary-dk:  #c94b00;
    --primary-lt:  #fff8f4;
    --accent:      #3b82f6;
    --bg:          #f1f5f9;
    --sidebar-bg:  #0d1117;
    --card-bg:     #ffffff;
    --border:      #e8ecf0;
    --text:        #0f172a;
    --text-muted:  #64748b;
    --success:     #059669;
    --success-lt:  #d1fae5;
    --radius:      14px;
    --radius-sm:   8px;
    --shadow:      0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
    --shadow-md:   0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.05);
    --shadow-lg:   0 12px 40px rgba(0,0,0,.12);
    --transition:  .16s ease;
}

body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    min-height: 100vh;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   APP LAYOUT – TOP NAVBAR
   ============================================================ */
.app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Fixed top navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(135deg, #0c1220 0%, #111827 100%);
    color: #e2e8f0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 200;
    border-bottom: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 2px 16px rgba(0,0,0,.3);
    gap: 0;
}

/* Brand */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 20px;
}
.navbar-brand-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary), #ff7a45);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(240,90,0,.3);
}
.navbar-brand-name {
    font-size: .9rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.2;
    white-space: nowrap;
}
.navbar-brand-name strong { color: #fb923c; font-weight: 900; }

/* Nav links */
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.navbar-nav::-webkit-scrollbar { display: none; }
.navbar-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    color: #94a3b8;
    text-decoration: none;
    font-size: .83rem;
    font-weight: 600;
    letter-spacing: -.01em;
    transition: all .15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.navbar-link:hover {
    background: rgba(255,255,255,.08);
    color: #e2e8f0;
}
.navbar-link.active {
    background: rgba(240,90,0,.18);
    color: #fb923c;
    border: 1px solid rgba(240,90,0,.28);
}

/* Right section */
.navbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
    flex-shrink: 0;
}

/* Plan badge */
.navbar-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-decoration: none;
    transition: all .15s ease;
}
.navbar-plan-badge--free {
    background: rgba(255,255,255,.07);
    color: #94a3b8;
    border: 1px solid rgba(255,255,255,.10);
}
.navbar-plan-badge--free:hover {
    background: rgba(240,90,0,.15);
    color: #fb923c;
}
.navbar-plan-badge--warn {
    background: rgba(220,38,38,.18);
    color: #fca5a5;
    border-color: rgba(220,38,38,.30);
    animation: badge-pulse 2s ease-in-out infinite;
}
.navbar-plan-badge--pro {
    background: linear-gradient(135deg, var(--primary), #ff7a45);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(240,90,0,.3);
}
.navbar-mini-bar {
    width: 30px;
    height: 3px;
    background: rgba(255,255,255,.15);
    border-radius: 2px;
    overflow: hidden;
}
.navbar-mini-bar span {
    display: block;
    height: 100%;
    background: #fb923c;
    border-radius: 2px;
    transition: width .5s ease;
}

/* User link */
.navbar-user-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    color: #64748b;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 600;
    transition: all .15s ease;
    white-space: nowrap;
}
.navbar-user-link:hover {
    background: rgba(255,255,255,.07);
    color: #e2e8f0;
}

/* Logout */
.navbar-logout-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    color: #64748b;
    font-size: .8rem;
    font-weight: 600;
    transition: all .15s ease;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.navbar-logout-btn:hover {
    background: rgba(220,38,38,.12);
    color: #f87171;
}

/* Mobile hamburger */
.navbar-hamburger {
    display: none;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 0;
    flex-shrink: 0;
}
.navbar-hamburger span {
    display: block;
    width: 16px;
    height: 2px;
    background: #94a3b8;
    border-radius: 1px;
}

/* Mobile nav dropdown */
.navbar-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 195;
    top: 60px;
}
.navbar-mobile-overlay.is-visible { display: block; }

/* Main content area */
.app-main {
    flex: 1;
    margin-left: 0;
    padding-top: 60px;
    min-height: 100vh;
    background: var(--bg);
}

@media (max-width: 900px) {
    .navbar-link span:not(.navbar-link-icon) { display: none; }
    .navbar-link { padding: 7px 9px; gap: 0; }
    .navbar-user-link span:not(svg) { display: none; }
    .navbar-logout-btn span:not(svg) { display: none; }
}
@media (max-width: 640px) {
    .navbar-nav {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: #111827;
        flex-direction: column;
        align-items: stretch;
        padding: 8px;
        gap: 2px;
        border-bottom: 1px solid rgba(255,255,255,.1);
        box-shadow: 0 8px 24px rgba(0,0,0,.4);
        z-index: 199;
    }
    .navbar-nav.is-open { display: flex; }
    .navbar-nav .navbar-link { padding: 10px 14px; gap: 10px; }
    .navbar-nav .navbar-link span { display: inline !important; }
    .navbar-hamburger { display: flex; }
}

/* ============================================================
   LAYOUT
   ============================================================ */
.page-body {
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 28px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px 32px 80px;
}

.col-form  { min-width: 0; }
.col-result { position: relative; }

/* ============================================================
   SECTION CARDS – clean modern cards
   ============================================================ */
.section-card {
    background: #ffffff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.section-card:hover {
    box-shadow: var(--shadow-md);
}

.section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    background: #ffffff;
    position: relative;
}
/* Orange left accent bar */
.section-head::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary), #ff7a45);
    border-radius: 0;
}

.section-num {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--primary-lt);
    color: var(--primary);
    font-size: .78rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid rgba(240,90,0,.2);
}

.section-head h2 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    flex: 1;
    letter-spacing: -.01em;
    margin: 0;
}

.section-head .section-sub {
    font-size: .78rem;
    color: var(--text-muted);
    font-weight: 500;
}

.section-body {
    padding: 24px;
}

/* Outer wrapper that matches page-body padding for standalone banners */
.page-banner-outer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 28px 0;
}

@media (max-width: 768px) {
    .page-banner-outer {
        padding: 16px 16px 0;
    }
    .page-banner {
        padding: 20px 18px;
    }
    .page-banner-title  { font-size: 1.25rem; }
    .page-banner-icon   { font-size: 2.2rem; }
}

/* ============================================================
   SECTION CARD COLOR VARIANTS
   The ::before left-bar changes color per variant
   ============================================================ */
.section-card--blue .section-head::before   { background: linear-gradient(180deg, #3b82f6, #60a5fa); }
.section-card--blue .section-num            { background: #eff6ff; color: #2563eb; border-color: rgba(37,99,235,.2); }

.section-card--green .section-head::before  { background: linear-gradient(180deg, #059669, #34d399); }
.section-card--green .section-num           { background: #ecfdf5; color: #059669; border-color: rgba(5,150,105,.2); }

.section-card--purple .section-head::before { background: linear-gradient(180deg, #7c3aed, #a78bfa); }
.section-card--purple .section-num          { background: #f5f3ff; color: #7c3aed; border-color: rgba(124,58,237,.2); }

.section-card--teal .section-head::before   { background: linear-gradient(180deg, #0d9488, #2dd4bf); }
.section-card--teal .section-num            { background: #f0fdfa; color: #0d9488; border-color: rgba(13,148,136,.2); }

.section-card--amber .section-head::before  { background: linear-gradient(180deg, #d97706, #fbbf24); }
.section-card--amber .section-num           { background: #fffbeb; color: #d97706; border-color: rgba(217,119,6,.2); }

.section-card--red .section-head::before    { background: linear-gradient(180deg, #dc2626, #f87171); }
.section-card--red .section-num             { background: #fef2f2; color: #dc2626; border-color: rgba(220,38,38,.2); }

/* ============================================================
   PAGE BANNER – colorful gradient header for each page
   Usage: <div class="page-banner page-banner--blue"> ... </div>
   ============================================================ */
.page-banner {
    border-radius: var(--radius);
    padding: 28px 30px;
    margin-bottom: 24px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    overflow: hidden;
}
.page-banner::after {
    content: '';
    position: absolute;
    right: -20px;
    top: -20px;
    width: 180px;
    height: 180px;
    background: rgba(255,255,255,.07);
    border-radius: 50%;
    pointer-events: none;
}
.page-banner::before {
    content: '';
    position: absolute;
    right: 60px;
    bottom: -40px;
    width: 120px;
    height: 120px;
    background: rgba(255,255,255,.05);
    border-radius: 50%;
    pointer-events: none;
}
.page-banner--orange { background: linear-gradient(135deg, #ea580c 0%, #f97316 50%, #fb923c 100%); }
.page-banner--blue   { background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #60a5fa 100%); }
.page-banner--green  { background: linear-gradient(135deg, #047857 0%, #059669 50%, #10b981 100%); }
.page-banner--purple { background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 50%, #8b5cf6 100%); }
.page-banner--teal   { background: linear-gradient(135deg, #0f766e 0%, #0d9488 50%, #14b8a6 100%); }
.page-banner--dark   { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); }
.page-banner--amber  { background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%); }

.page-banner-text {}
.page-banner-title {
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.15;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
}
.page-banner-sub {
    font-size: .875rem;
    opacity: .85;
    font-weight: 500;
    line-height: 1.5;
    position: relative;
    z-index: 1;
}
.page-banner-icon {
    font-size: 3.2rem;
    opacity: .85;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.2));
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.page-banner-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.page-banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .76rem;
    font-weight: 700;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.25);
    white-space: nowrap;
}
.page-banner-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.btn-banner {
    padding: 9px 18px;
    border-radius: 8px;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid rgba(255,255,255,.4);
    background: rgba(255,255,255,.15);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-banner:hover {
    background: rgba(255,255,255,.28);
    border-color: rgba(255,255,255,.6);
}
.btn-banner--solid {
    background: rgba(255,255,255,.95);
    color: #0f172a;
    border-color: transparent;
}
.btn-banner--solid:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* ============================================================
   COLORED MATERIAL BADGES
   ============================================================ */
.mat-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
    white-space: nowrap;
}
.mat-pla    { background: #dbeafe; color: #1e40af; }
.mat-petg   { background: #d1fae5; color: #065f46; }
.mat-abs    { background: #fee2e2; color: #991b1b; }
.mat-tpu    { background: #fce7f3; color: #9d174d; }
.mat-asa    { background: #fef3c7; color: #92400e; }
.mat-pa     { background: #ede9fe; color: #5b21b6; }
.mat-pc     { background: #ccfbf1; color: #134e4a; }
.mat-other  { background: #f1f5f9; color: #475569; }

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-group label {
    font-size: .75rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    gap: 5px;
}

.form-group label span[style*="color: #dc2626"] {
    font-size: 1.1em;
    margin-left: 2px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    color: #0f172a;
    background: #f8fafc;
    transition: all .15s ease;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-weight: 500;
}

.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.form-group input:hover,
.form-group select:hover {
    border-color: #cbd5e0;
    background: #f1f5f9;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(240,90,0,.10);
    background: #fff;
}

.form-group input.has-unit {
    padding-right: 55px;
}

.form-full {
    grid-column: 1 / -1;
}

.form-group small {
    font-size: .76rem;
    color: #64748b;
    display: block;
    font-weight: 500;
}

/* ============================================================
   TOGGLE SWITCH
   ============================================================ */
.toggle-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #f8f9fa;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}
.toggle-row:hover { border-color: var(--primary); background: #fff8f4; }

/* Emphasis for key pricing inputs in calculator offer block */
.offer-key-field {
    background: #fff8f1;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    padding: 12px;
}
.offer-key-field .form-label {
    color: #9a3412;
    font-weight: 800;
}
.offer-key-field .form-control,
.offer-key-field .input-group-text {
    border-color: #f59e0b;
}
.offer-key-field .form-text {
    color: #9a3412;
    font-weight: 600;
}

/* ============================================================
   HISTORY TABLE ROWS
   ============================================================ */
.history-row { cursor: pointer; }
.history-row:hover { background: #fafbfc; }

/* ============================================================
   HISTORY MODAL
   ============================================================ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1200;
}

.modal-card {
    width: min(1000px, 98vw);
    max-height: 90vh;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

.modal-title {
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -.02em;
    color: #0f172a;
}

.modal-close {
    border: 0;
    background: #f1f5f9;
    font-size: 1.2rem;
    cursor: pointer;
    color: #475569;
    transition: all .15s ease;
    padding: 0;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.modal-close:hover {
    color: #0f172a;
    background: #e2e8f0;
}

.modal-body {
    padding: 22px 26px;
    overflow: auto;
    background: #f8fafc;
}

.detail-group {
    margin-bottom: 20px;
}
.detail-group:last-child { margin-bottom: 0; }

.detail-group-title {
    font-size: .70rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #94a3b8;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (max-width: 540px) {
    .detail-grid { grid-template-columns: 1fr; }
}

.detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: .88rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
}
.detail-row--highlight {
    border-color: #f05a00;
    background: #fff8f4;
}
.detail-row--highlight .detail-label { color: #c2410c !important; }
.detail-row--highlight .detail-value { color: #f05a00 !important; font-size: 1.05rem; }

.detail-row--highlight-pos {
    border-color: #16a34a;
    background: #f0fdf4;
}
.detail-row--highlight-pos .detail-label { color: #15803d !important; }
.detail-row--highlight-pos .detail-value { color: #16a34a !important; font-size: 1.05rem; }

.detail-label {
    color: #64748b;
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.detail-value {
    font-weight: 700;
    color: #0f172a;
    font-size: .95rem;
}
.toggle-row input[type="checkbox"] { display: none; }

.toggle-switch {
    width: 44px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 12px;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    transition: background .18s ease;
}
.toggle-switch::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: left .18s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    z-index: 1;
}
.toggle-row.is-on .toggle-switch { background: var(--primary); }
.toggle-row.is-on .toggle-switch::after { left: 23px; }

.toggle-text { font-size: .96rem; font-weight: 700; color: #1f2937; flex: 1; }
.toggle-sub  { font-size: .82rem; color: #64748b; font-weight: 600; }

.amort-info {
    margin-top: 10px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: #fcfcfd;
}

.amort-info summary {
    cursor: pointer;
    list-style: none;
    padding: 9px 12px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-muted);
}

.amort-info[open] summary {
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.amort-info-body {
    padding: 10px 12px 12px;
    font-size: .82rem;
    line-height: 1.65;
    color: var(--text-muted);
}

/* ---- Preset chips ---- */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 0;
}
.chip {
    padding: 8px 16px;
    border: 1.5px solid #d1d5db;
    border-radius: 22px;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    background: #f8fafb;
    color: #475569;
    transition: all .18s ease;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.chip:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(240,90,0,.25);
}
.chip:active {
    transform: translateY(0);
}

/* ============================================================
   PRAVÝ SLOUPEC – VÝSLEDEK (sticky)
   ============================================================ */
.result-sticky {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.result-panel {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    border: 1px solid var(--border);
}

.result-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 26px 26px 22px;
    color: #fff;
    position: relative;
}
.result-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}

.result-header h3 {
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #cbd5e1;
    margin-bottom: 10px;
    margin: 0 0 10px 0;
}

/* ============================================================
   DUAL CARDS – cost & selling price side by side
   ============================================================ */
.result-dual-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Each half-card */
.rdh-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Colored card headers */
.rdh-card-head {
    padding: 16px 14px 14px;
    color: #fff;
}
.rdh-card-head--cost {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.rdh-card-head--sell {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
}

/* Card body (white rows) */
.rdh-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.rdh-card-body .result-row {
    padding: 8px 12px;
    font-size: .8rem;
}
.rdh-card-body .result-row-lbl { font-size: .78rem; }
.rdh-card-body .result-row-sub { font-size: .68rem; }
.rdh-card-body .result-row-val { font-size: .86rem; }
.rdh-card-body .result-icon {
    width: 24px;
    height: 24px;
    font-size: .8rem;
}
.rdh-card-body .result-bar-wrap {
    padding: 8px 12px 12px;
    margin-top: auto;
}
.rdh-card-body .result-offer {
    margin: 0;
    border-radius: 0;
    border-top: 1px solid var(--border);
    padding: 12px 12px;
}

/* Labels/val/sub inside colored header */
.rdh-label {
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .11em;
    opacity: .7;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.rdh-val {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
    word-break: break-all;
}
.rdh-sub {
    font-size: .68rem;
    opacity: .72;
    margin-top: 5px;
    line-height: 1.4;
    font-weight: 500;
}
.rdh-sub--profit {
    opacity: 1;
    font-weight: 700;
    color: #bbf7d0;
    font-size: .74rem;
}

@media (max-width: 540px) {
    .result-dual-header { grid-template-columns: 1fr; }
}

.result-total-val {
    font-size: 3.2rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -.04em;
    margin: 10px 0;
    text-shadow: 0 3px 16px rgba(0,0,0,.3);
}

.result-total-label {
    font-size: .88rem;
    color: #e2e8f0;
    margin-top: 10px;
    line-height: 1.5;
    opacity: 0.95;
    font-weight: 600;
}

.result-body {
    padding: 22px 24px;
}

.result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #e5e7eb;
}
.result-row:last-of-type { border-bottom: none; }

.result-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.result-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.ri-orange { background: #fff3ec; }
.ri-blue   { background: #e0f2fe; }
.ri-gray   { background: #f1f5f9; }

.result-row-lbl {
    font-size: .92rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
}
.result-row-sub {
    font-size: .80rem;
    color: #64748b;
    font-weight: 600;
}

.result-row-val {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.result-final {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    padding: 20px 22px;
    border-radius: 11px;
    text-align: center;
    margin-top: 18px;
}

.result-final-label {
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #d1fae5;
    margin-bottom: 8px;
}

.result-final-val {
    font-size: 2.2rem;
    font-weight: 900;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.result-final-detail {
    font-size: .80rem;
    color: #a7f3d0;
    margin-top: 8px;
    line-height: 1.6;
    font-weight: 600;
}

.result-offer {
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    padding: 16px 20px;
}

.result-offer-title {
    font-weight: 800;
    font-size: .90rem;
    color: #1f2937;
    margin-bottom: 8px;
}

.result-offer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .96rem;
    padding: 6px 0;
    font-weight: 700;
    color: #0f172a;
}

.result-offer-sub {
    font-size: .80rem;
    color: #64748b;
    margin-top: 5px;
    font-weight: 600;
}

.mobile-summary {
    background: #0f172a;
    color: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 14px;
    display: none;
}

.mobile-summary-label {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
    font-weight: 700;
}

.mobile-summary-val {
    font-size: 1.8rem;
    font-weight: 800;
    margin-top: 4px;
}

.mobile-summary-sub {
    font-size: .78rem;
    color: #cbd5f5;
}

/* Bar grafika */
.result-bar-wrap {
    padding: 14px 18px;
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.result-bar-label {
    font-size: .84rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #475569;
    margin-bottom: 12px;
}
.bar-track {
    height: 10px;
    background: #f1f5f9;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
}
.bar-seg {
    height: 100%;
    transition: width .4s ease;
}
.bar-fil  { background: var(--primary); }
.bar-el   { background: var(--accent); }
.bar-amor { background: #a78bfa; }
.bar-legend {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.bar-leg-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    color: #475569;
    font-weight: 700;
}
.bar-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Placeholder stav */
.result-placeholder {
    padding: 60px 28px;
    text-align: center;
    color: var(--text-muted);
}
.result-placeholder .ph-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: .3;
    animation: breathe 3s ease-in-out infinite;
}
.result-placeholder p {
    font-size: .95rem;
    line-height: 1.7;
    color: #6b7280;
    margin: 0;
}
.result-placeholder strong {
    color: var(--text);
    font-weight: 600;
}
.result-placeholder small {
    display: block;
    margin-top: 8px;
    font-size: .78rem;
    color: #b0b9c6;
}

@keyframes breathe {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(1.05); }
}

/* Detail info pásek */
.result-detail {
    padding: 12px 20px;
    background: #f8f9fa;
    border-top: 1px solid var(--border);
    font-size: .78rem;
    color: var(--text-muted);
    line-height: 1.8;
}

/* Uložit sekce */
.save-panel {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 20px;
    margin-top: 14px;
}
.save-panel h4 {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.save-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.save-fields input {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    color: var(--text);
    background: #fdfdfd;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.save-fields input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(240,90,0,.12);
    background: #fff;
}

/* ============================================================
   BUTTONS (PROFESSIONAL UPGRADE)
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 8px;
    font-size: .90rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all var(--transition);
    letter-spacing: .02em;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, #ff7a45 100%);
    color: #fff;
    border-color: var(--primary);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dk) 0%, var(--primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(240,90,0,.3);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(240,90,0,.2);
}

.btn-secondary {
    background: #f7fafc;
    color: #2d3748;
    border-color: #e2e8f0;
}
.btn-secondary:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline:hover {
    background: var(--primary);
    color: #fff;
}

.btn-success {
    background: linear-gradient(135deg, var(--success) 0%, #047857 100%);
    color: #fff;
    width: 100%;
    justify-content: center;
    padding: 16px 28px;
    font-size: 1.0rem;
    font-weight: 800;
}
.btn-success:hover:not(:disabled) {
    background: linear-gradient(135deg, #047857 0%, var(--success) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(5,150,105,.35);
}
.btn-success:active {
    transform: translateY(0);
}

.btn-sm {
    padding: 9px 18px;
    font-size: .88rem;
    border-radius: 7px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
   ALERT
   ============================================================ */
.alert {
    padding: 16px 20px;
    border-radius: 10px;
    margin-bottom: 24px;
    font-size: .96rem;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    border: 1px solid;
}
.alert-success { 
    background: #d1fae5;
    color: #065f46; 
    border-color: #6ee7b7; 
}
.alert-error   { 
    background: #fee2e2;
    color: #991b1b; 
    border-color: #fca5a5; 
}

/* ============================================================
   STATS + HISTORY (history.php)
   ============================================================ */
.page-simple {
    max-width: 1280px;
    margin: 0 auto;
    padding: 36px 32px 80px;
}

.page-narrow {
    max-width: 960px;
    margin: 0 auto;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.stat-box {
    background: #ffffff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid var(--border);
    border-top: 3px solid #e2e8f0;
    transition: box-shadow var(--transition), transform var(--transition);
    position: relative;
    overflow: hidden;
}
.stat-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
/* Colored top border per icon variant */
.stat-box:has(.stat-icon--orange) { border-top-color: #f05a00; }
.stat-box:has(.stat-icon--blue)   { border-top-color: #3b82f6; }
.stat-box:has(.stat-icon--green)  { border-top-color: #059669; }
.stat-box:has(.stat-icon--purple) { border-top-color: #8b5cf6; }
.stat-box:has(.stat-icon--teal)   { border-top-color: #14b8a6; }
.stat-box:has(.stat-icon--amber)  { border-top-color: #d97706; }
.stat-box:has(.stat-icon--red)    { border-top-color: #dc2626; }

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff5ed 0%, #fed7aa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
/* Stat icon color variants */
.stat-icon--orange { background: linear-gradient(135deg, #fff5ed, #fed7aa); }
.stat-icon--blue   { background: linear-gradient(135deg, #dbeafe, #93c5fd); }
.stat-icon--green  { background: linear-gradient(135deg, #d1fae5, #6ee7b7); }
.stat-icon--purple { background: linear-gradient(135deg, #ede9fe, #c4b5fd); }
.stat-icon--teal   { background: linear-gradient(135deg, #ccfbf1, #5eead4); }
.stat-icon--amber  { background: linear-gradient(135deg, #fef3c7, #fcd34d); }
.stat-icon--red    { background: linear-gradient(135deg, #fee2e2, #fca5a5); }

.stat-box .stat-text {
    flex: 1;
    min-width: 0;
}
.stat-box .stat-value {
    display: block;
    font-size: 1.65rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.1;
    letter-spacing: -.04em;
}
.stat-box .stat-label {
    display: block;
    font-size: .72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: 5px;
    font-weight: 700;
}

.table-wrap {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
}

.table-wrap::-webkit-scrollbar {
    height: 8px;
}

.table-wrap::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
}

.table-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

.table-wrap::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.history-table thead {
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
}

.history-table thead th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-muted);
    white-space: nowrap;
}

.history-table tbody tr { 
    transition: background var(--transition);
    border-bottom: 1px solid #f4f6f8;
}
.history-table tbody tr:nth-child(even) { 
    background: #fafbfc;
}
.history-table tbody tr:hover { 
    background: #fff8f4;
}

.history-table td {
    padding: 14px 16px;
    vertical-align: middle;
    color: var(--text);
}

.td-num   { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .94rem; font-weight: 600; }
.td-total { font-weight: 900; color: #f05a00; font-size: 1.1rem; }
.td-date  { white-space: nowrap; font-size: .88rem; color: #64748b; }
.td-name  { font-weight: 700; max-width: 220px; font-size: .96rem; color: #0f172a; }
.note-icon { cursor: help; font-size: .90rem; margin-left: 4px; color: #94a3b8; }

.history-toolbar {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px 12px;
    margin-bottom: 10px;
    align-items: end;
}

.history-search-wrap { grid-column: span 6; }
.history-filter-status { grid-column: span 3; }
.history-filter-sort { grid-column: span 3; }
.history-filter-date-from { grid-column: span 3; }
.history-filter-date-to { grid-column: span 3; }

.history-filter-wrap {
    min-width: 160px;
}

.history-view-wrap {
    min-width: 300px;
    grid-column: span 6;
}

.history-view-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.history-view-row .form-select {
    min-width: 0;
    flex: 1 1 auto;
}

.history-bulk-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 6px 0 12px;
}

.history-selected-count {
    font-size: .84rem;
    color: #475569;
    font-weight: 700;
    min-width: 92px;
}

.history-bulk-select {
    min-width: 240px;
    max-width: 360px;
    flex: 0 1 320px;
}

.history-filter-label {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #64748b;
    margin-bottom: 4px;
    font-weight: 700;
}

.history-visible-count {
    color: #64748b;
    font-size: .84rem;
    margin-bottom: 10px;
}

.spools-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) repeat(2, minmax(160px, 1fr)) auto;
    gap: 10px 12px;
    align-items: end;
}

.spools-toolbar-search {
    min-width: 0;
}

.spools-toolbar-low {
    justify-self: end;
}

.spools-table td,
.spools-table th {
    vertical-align: middle;
}

.spool-row-actions {
    justify-content: flex-end;
}

.spool-critical-badge {
    display: inline-flex;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

@media (max-width: 991px) {
    .history-toolbar {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .history-search-wrap,
    .history-view-wrap { grid-column: span 6; }

    .history-filter-status,
    .history-filter-sort,
    .history-filter-date-from,
    .history-filter-date-to { grid-column: span 3; }
}

@media (max-width: 640px) {
    .history-toolbar {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .history-search-wrap,
    .history-filter-status,
    .history-filter-sort,
    .history-filter-date-from,
    .history-filter-date-to,
    .history-view-wrap {
        grid-column: 1;
        min-width: 0;
    }

    .history-view-row {
        flex-wrap: wrap;
    }

    .history-view-row .form-select,
    .history-bulk-select {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 920px) {
    .spools-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .spools-toolbar-search {
        grid-column: 1 / -1;
    }

    .spools-toolbar-low {
        justify-self: start;
    }
}

@media (max-width: 768px) {
    .spools-table thead {
        display: none;
    }

    .spools-table tbody tr {
        display: block;
        border-bottom: 1px solid #e2e8f0;
        padding: 8px 12px;
    }

    .spools-table tbody td {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 10px;
        align-items: center;
        padding: 8px 4px;
        text-align: left !important;
    }

    .spools-table tbody td::before {
        content: attr(data-label);
        font-size: .7rem;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-weight: 700;
    }

    .spools-table tbody td:first-child,
    .spools-table tbody td:first-child + td {
        display: inline-flex;
        width: auto;
        margin-right: 10px;
        padding-top: 4px;
    }

    .spools-table tbody td:first-child::before,
    .spools-table tbody td:first-child + td::before {
        content: '';
        display: none;
    }

    .spool-row-actions {
        justify-content: flex-start;
    }
}

.history-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.note-quick-btn,
.name-quick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d6dee7;
    background: #fff;
    color: #475569;
    border-radius: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    cursor: pointer;
    outline: none;
}

.note-quick-btn:focus,
.name-quick-btn:focus {
    outline: none;
    box-shadow: none;
}

.note-quick-btn:hover,
.name-quick-btn:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.note-inline-editor {
    margin-top: 8px;
    max-width: 360px;
}

.name-inline-editor {
    margin-top: 6px;
    max-width: 360px;
}

.name-inline-input {
    width: 100%;
    font-size: .85rem;
}


.note-inline-input {
    width: 100%;
    border: 1px solid #d6dee7;
    border-radius: 8px;
    padding: 7px 9px;
    font-size: .83rem;
    resize: vertical;
    min-height: 56px;
}

.note-inline-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.history-pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 0;
    flex-wrap: wrap;
}

.history-page-info {
    color: #64748b;
    font-size: .9rem;
}

.history-page-dots {
    color: #94a3b8;
    font-weight: 700;
}

.printer-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #0f172a;
    color: #ffffff;
    border-radius: 20px;
    font-size: .80rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(15,23,42,.2);
}

.printer-visual-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}

.printer-card {
    border: 1px solid #dbe3ea;
    border-radius: 12px;
    background: #fff;
    padding: 8px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.printer-card:hover {
    transform: translateY(-1px);
    border-color: #93c5fd;
    box-shadow: 0 5px 12px rgba(15,23,42,.08);
}

.printer-card.is-active {
    border-color: #f05a00;
    box-shadow: 0 0 0 2px rgba(240,90,0,.15);
}

.printer-card-thumb {
    width: 100%;
    height: 78px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    object-fit: cover;
    display: block;
}

.printer-card-fallback {
    width: 100%;
    height: 78px;
    border-radius: 10px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 1.2rem;
}

.printer-card-name {
    margin-top: 7px;
    font-size: .77rem;
    line-height: 1.3;
    color: #334155;
    font-weight: 700;
}

.printer-selected-preview {
    height: 160px;
    border: 1px solid #dbe3ea;
    border-radius: 12px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.printer-selected-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.printer-selected-preview-fallback {
    font-size: 2.1rem;
    color: #64748b;
}

.btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    font-size: .90rem;
    text-decoration: none;
    font-weight: 800;
    transition: all .18s ease;
    border: 1px solid #fecaca;
}
.btn-delete:hover { 
    background: #dc2626; 
    color: #ffffff; 
    transform: scale(1.08);
    border-color: #dc2626;
    box-shadow: 0 2px 8px rgba(220,38,38,.3);
}

.empty-state {
    text-align: center;
    padding: 100px 20px;
    color: #64748b;
}
.empty-state .es-icon { 
    font-size: 4.5rem; 
    margin-bottom: 20px; 
    opacity: .2;
    animation: breathe 3s ease-in-out infinite;
}
.empty-state p { 
    margin-bottom: 28px; 
    font-size: 1.1rem; 
    color: #475569;
    font-weight: 600;
}

@keyframes breathe {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50% { opacity: 0.25; transform: scale(1.03); }
}

/* History header */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}
.page-header h1 {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.03em;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

/* ============================================================
   AUTH PAGES – login, register
   ============================================================ */
.auth-page {
    background: linear-gradient(135deg, #0f172a 0%, #1e2a45 50%, #0f172a 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.auth-wrap {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    text-decoration: none;
}

.auth-brand-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--primary) 0%, #ff7a45 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 8px 24px rgba(240,90,0,.35);
}

.auth-brand-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.02em;
}
.auth-brand-name strong { color: var(--primary); }

.auth-card {
    width: 100%;
    background: #fff;
    border-radius: 20px;
    padding: 36px 40px 32px;
    box-shadow: 0 32px 64px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.08);
}

.auth-title {
    font-size: 1.6rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 4px;
    letter-spacing: -.03em;
}

.auth-subtitle {
    font-size: .92rem;
    color: #64748b;
    margin: 0 0 26px;
    font-weight: 500;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-footer {
    margin-top: 22px;
    text-align: center;
    font-size: .9rem;
    color: #64748b;
}
.auth-footer a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}
.auth-footer a:hover { text-decoration: underline; }

/* Eye toggle for password inputs */
.input-wrap-eye {
    position: relative;
}
.input-wrap-eye input {
    width: 100%;
    padding-right: 48px !important;
}
.eye-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color .15s ease;
}
.eye-toggle:hover { color: var(--primary); }

/* Plan info box in register */
.plan-info-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 12px;
    font-size: .88rem;
    color: #065f46;
    line-height: 1.55;
}
.plan-info-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.plan-info-box strong { font-weight: 800; }
.plan-info-box .text-muted { color: #6b7280; font-size: .82rem; }

/* Label helpers */
.label-required { color: #dc2626; font-weight: 700; }
.label-optional  { color: #9ca3af; font-weight: 500; font-size: .82em; text-transform: none; letter-spacing: 0; }

/* btn full-width */
.btn-full { width: 100%; }

/* Old .login-page kept for compat – maps to auth-wrap */
.login-page { max-width: 420px; margin: 60px auto; padding: 0 16px; }
.login-card  { background: #fff; border-radius: 12px; box-shadow: var(--shadow); padding: 22px; }
.login-card h1 { font-size: 1.3rem; margin-bottom: 6px; }
.login-card p  { color: var(--text-muted); margin-bottom: 14px; }

/* ============================================================
   SEO LANDING + LOGIN (public page)
   ============================================================ */
.landing-auth-page {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background:
        radial-gradient(950px 420px at 12% -6%, rgba(240,90,0,.16), transparent 62%),
        radial-gradient(880px 380px at 88% -8%, rgba(30,41,59,.14), transparent 60%),
        var(--bg);
    color: var(--text);
    min-height: 100vh;
}

.landing-topbar {
    background: rgba(255,255,255,.88);
    border-bottom: 1px solid rgba(15,23,42,.08);
    backdrop-filter: saturate(180%) blur(10px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.landing-topbar-inner {
    width: min(1160px, 100% - 32px);
    margin: 0 auto;
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.landing-brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dk));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.landing-brand-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.02em;
}
.landing-brand-name strong { color: var(--primary); }

.landing-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.landing-main {
    width: min(1160px, 100% - 32px);
    margin: 28px auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 28px;
    align-items: start;
}

.landing-copy {
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(15,23,42,.07);
    border-radius: 22px;
    padding: 26px 24px;
    box-shadow: 0 20px 48px rgba(15,23,42,.08), 0 4px 14px rgba(15,23,42,.06);
}

.landing-copy h1 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.03em;
    margin: 0 0 14px;
}

.landing-kicker {
    margin: 0 0 10px;
    color: var(--primary);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .78rem;
}

.landing-lead {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 16px;
    max-width: 72ch;
}

.landing-proof-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.landing-proof-strip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #334155;
    border-radius: 999px;
    padding: 5px 11px;
    font-size: .76rem;
    font-weight: 700;
}

.landing-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px;
}

.landing-trust-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
}

.landing-trust-item strong {
    display: block;
    margin-bottom: 5px;
    font-size: .9rem;
    color: #0f172a;
}

.landing-trust-item p {
    margin: 0;
    color: #64748b;
    font-size: .84rem;
    line-height: 1.5;
}

.landing-steps {
    margin: 0 0 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow);
}

.landing-steps h2 {
    margin: 0 0 12px;
    font-size: 1.06rem;
    font-weight: 800;
}

.landing-step-grid {
    display: grid;
    gap: 10px;
}

.landing-step-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 12px;
}

.landing-step-num {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff7ed;
    color: var(--primary);
    font-size: .82rem;
    font-weight: 800;
    border: 1px solid #fdba74;
}

.landing-step-item h3 {
    margin: 2px 0 4px;
    font-size: .92rem;
    font-weight: 800;
}

.landing-step-item p {
    margin: 0;
    color: #64748b;
    font-size: .84rem;
}

.landing-calc-example {
    margin: 0 0 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow);
}

.landing-calc-example h2 {
    margin: 0 0 12px;
    font-size: 1.06rem;
    font-weight: 800;
}

.landing-calc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.landing-calc-col {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
}

.landing-calc-col--result {
    border-color: #fdba74;
    background: #fff7ed;
}

.landing-calc-col h3 {
    margin: 0 0 8px;
    font-size: .92rem;
    font-weight: 800;
}

.landing-calc-col ul {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: 5px;
}

.landing-calc-col li {
    color: #334155;
    font-size: .84rem;
}

.landing-audience {
    margin: 0 0 16px;
    background: linear-gradient(135deg, #fff7ed, #fff);
    border: 1px solid #fed7aa;
    border-radius: 14px;
    padding: 14px;
}

.landing-audience h2 {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 800;
    color: #9a3412;
}

.landing-audience p {
    margin: 0;
    color: #475569;
    font-size: .9rem;
}

.landing-benefits {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 8px;
}

.landing-benefits li {
    color: var(--text);
    line-height: 1.55;
}

.landing-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 28px;
}

.landing-register-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 18px;
    background: linear-gradient(135deg, #0f172a 0%, #1e2a45 55%, #1f2c73 100%);
    color: #e2e8f0;
    border-radius: 18px;
    padding: 18px;
    margin: 0 0 18px;
    box-shadow: 0 18px 36px rgba(2,6,23,.24);
}

.landing-register-kicker {
    margin: 0 0 6px;
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fbbf24;
    font-weight: 800;
}

.landing-register-hero h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 1.24rem;
    font-weight: 900;
    line-height: 1.25;
}

.landing-register-hero p {
    margin: 0;
    color: #cbd5e1;
    font-size: .92rem;
}

.landing-register-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.landing-register-btn {
    width: 100%;
    font-size: 1rem;
    font-weight: 800;
    padding: .8rem 1rem;
    box-shadow: 0 10px 24px rgba(240,90,0,.35);
}

.landing-register-actions small {
    color: #94a3b8;
    font-size: .76rem;
    line-height: 1.4;
}

.landing-plan-teaser {
    margin: 0 0 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow);
}

.landing-plan-teaser h2 {
    margin: 0 0 12px;
    font-size: 1.06rem;
    font-weight: 800;
}

.landing-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.landing-plan-badge {
    font-size: .72rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #ff7a45);
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
}

.landing-plan-grid-strong .landing-plan-card {
    padding: 14px;
}

.landing-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.landing-plan-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
}

.landing-plan-card--pro {
    border-color: #fdba74;
    background: #fff7ed;
    box-shadow: 0 6px 18px rgba(240,90,0,.14);
}

.landing-plan-card--pro .landing-plan-name {
    color: #9a3412;
}

.landing-plan-name {
    font-size: .9rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.landing-plan-card p {
    margin: 0 0 8px;
    font-size: .85rem;
    color: var(--text-muted);
}

.landing-plan-card ul {
    margin: 0;
    padding-left: 1.05rem;
    display: grid;
    gap: 4px;
}

.landing-plan-card li {
    font-size: .84rem;
    color: #0f172a;
}

.landing-reasons,
.landing-faq {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow);
}

.landing-reasons { margin-bottom: 16px; }

.landing-reasons h2,
.landing-faq h2 {
    font-size: 1.08rem;
    font-weight: 800;
    margin: 0 0 14px;
}

.landing-reason-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.landing-reason-card {
    background: var(--primary-lt);
    border: 1px solid #fde0c8;
    border-radius: 12px;
    padding: 12px;
}

.landing-reason-card h3 {
    margin: 0 0 6px;
    font-size: .92rem;
    font-weight: 800;
}

.landing-reason-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: .86rem;
    line-height: 1.5;
}

.landing-faq-item + .landing-faq-item {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.landing-faq-item h3 {
    margin: 0 0 5px;
    font-size: .95rem;
    font-weight: 700;
}

.landing-faq-item p {
    margin: 0;
    color: var(--text-muted);
    font-size: .9rem;
}

.landing-login-col {
    position: sticky;
    top: 94px;
}

.landing-login-card {
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 18px;
    box-shadow: 0 22px 46px rgba(15,23,42,.14), 0 6px 16px rgba(15,23,42,.08);
}

.landing-login-title {
    font-size: 1.35rem;
    color: #1f2c73;
}

.landing-eye-btn {
    cursor: pointer;
    border-left: none;
}

.landing-link-primary,
.landing-link-muted {
    text-decoration: none;
}

.landing-link-primary {
    color: var(--primary);
    margin-left: 4px;
}

.landing-link-muted { color: #7184ad; }

.landing-link-primary:hover,
.landing-link-muted:hover { text-decoration: underline; }

.landing-footer {
    width: min(1160px, 100% - 32px);
    margin: 8px auto 24px;
    color: var(--text-muted);
    font-size: .82rem;
}

.landing-footer p {
    margin: 0;
    padding-top: 8px;
}

@media (max-width: 1080px) {
    .landing-main {
        grid-template-columns: 1fr;
    }
    .landing-copy {
        padding: 20px;
    }
    .landing-login-col {
        position: static;
    }
    .landing-reason-grid {
        grid-template-columns: 1fr;
    }
    .landing-plan-grid {
        grid-template-columns: 1fr;
    }
    .landing-calc-grid {
        grid-template-columns: 1fr;
    }
    .landing-trust-grid {
        grid-template-columns: 1fr;
    }
    .landing-register-hero {
        grid-template-columns: 1fr;
    }
    .landing-plan-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .landing-topbar-inner,
    .landing-main,
    .landing-footer {
        width: calc(100% - 20px);
    }
    .landing-topbar-inner {
        min-height: 64px;
        gap: 8px;
    }
    .landing-brand-name {
        font-size: .95rem;
    }
    .landing-nav .btn {
        padding: .25rem .55rem;
        font-size: .76rem;
    }
    .landing-main {
        margin-top: 18px;
        gap: 18px;
    }
    .landing-copy h1 {
        font-size: 1.6rem;
    }
}

/* ============================================================
   SPINNER
   ============================================================ */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2.5px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   RESPONSIVE – TABLET + MOBILE
   ============================================================ */

/* --- 900px: začínáme zmenšovat padding --- */
@media (max-width: 900px) {
    .page-body {
        padding: 20px 16px 40px;
        gap: 16px;
    }
    .section-body { padding: 20px; }
    .section-head { padding: 16px 20px; }
    .result-body  { padding: 16px 18px; }
}

/* --- 1020px: jednosloupec – výsledkový panel NAD formulář --- */
@media (max-width: 1020px) {
    .page-body {
        grid-template-columns: 1fr;
        padding: 16px 12px 40px;
        gap: 14px;
    }

    /* Výsledkový panel zůstane POD formulářem */
    .col-result {
        order: 1;
    }
    .result-sticky { position: static; top: auto; }

    /* Kompaktnější result header na mobilu */
    .result-header {
        padding: 18px 20px 16px;
    }
    .result-total-val {
        font-size: 2.4rem;
    }
    .result-total-label {
        font-size: .82rem;
    }
    .result-body {
        padding: 14px 16px;
    }
    .result-final {
        padding: 16px 18px;
        margin-top: 12px;
    }
    .result-final-val {
        font-size: 1.8rem;
    }
    .result-offer {
        padding: 14px 16px;
    }
    .result-bar-wrap {
        padding: 14px 16px 12px !important;
    }

    /* Sekce formuláře */
    .section-body { padding: 16px; }
    .section-head { padding: 14px 16px; gap: 10px; }
    .section-num  { width: 34px; height: 34px; font-size: .82rem; }
    .section-head h2 { font-size: 1.0rem; }

    /* Formulář */
    .form-grid { grid-template-columns: 1fr; gap: 16px; }
    .form-group input,
    .form-group select { padding: 13px 14px; font-size: .96rem; }

    /* Uložit panel */
    .save-panel { padding: 16px; }

    /* Topbar nav scrollovatelný */
    .topbar-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 2px;
    }
    .topbar-nav::-webkit-scrollbar { display: none; }
    .topbar-link { white-space: nowrap; }
    .mobile-summary.is-visible { display: block; }
}

/* --- 480px: malý telefon --- */
@media (max-width: 480px) {
    .page-body { padding: 12px 10px 32px; }

    /* Result */
    .result-total-val { font-size: 2.0rem; }
    .result-final-val { font-size: 1.6rem; }
    .result-row-lbl   { font-size: .86rem; }
    .result-row-val   { font-size: 1.0rem; }
    .result-header h3 { font-size: .72rem; }

    /* Sekce */
    .section-body { padding: 12px; }
    .section-head { padding: 12px 14px; }
    .section-head h2 { font-size: .95rem; }

    /* History stats – 2 sloupce */
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .stat-box   { padding: 18px 14px; }
    .stat-value { font-size: 1.35rem; }
    .stat-icon  { width: 44px; height: 44px; font-size: 1.4rem; }

    /* History tabulka */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .history-table { font-size: .82rem; min-width: 560px; }
    .history-table thead th { padding: 14px 12px; }
    .history-table td { padding: 12px 12px; }
    .history-toolbar { grid-template-columns: 1fr; }
    .history-filter-wrap { min-width: 0; }
    .history-view-wrap { min-width: 0; }
    .history-view-row { flex-wrap: wrap; }
    .history-view-row .form-select { min-width: 0; flex: 1 1 100%; }
    .history-bulk-select { min-width: 0; width: 100%; }
    .note-inline-editor { max-width: 100%; }

    /* Page header */
    .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .page-header h1 { font-size: 1.5rem; }

    /* Login */
    .login-page { margin: 20px auto; padding: 0 12px; }
    .login-card { padding: 20px 18px; border-radius: 10px; }
    .login-card h1 { font-size: 1.25rem; }

    /* Chips */
    .chip { padding: 7px 12px; font-size: .80rem; }
    .chip-row { gap: 8px; }

    /* Práce/modelování */
    .prace-row,
    .model-row { gap: 8px; padding: 10px; }
    .prace-row input,
    .model-row input { padding: 9px 10px; font-size: .90rem; }

    /* Topbar */
    .topbar { padding: 10px 12px; }
    .topbar-brand .brand-icon { width: 32px; height: 32px; font-size: .9rem; }
    .topbar-link { font-size: .72rem; padding: 5px 8px; }
}

/* Inline table inputs (printers page) */
.table-input {
    padding: 8px 12px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: .92rem;
    font-weight: 600;
    color: #0f172a;
    background: #fff;
    width: 110px;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
}
.table-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(240,90,0,.12);
}

/* ============================================================
   Pracovní řádky + Čas modelování
   ============================================================ */

.time-rows-container {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    margin-top: 8px;
}
.time-rows-container:empty {
    display: none;
}

/* Pill toggle: × podložky / 1× zakázka */
.prace-mode-toggle {
    display: inline-flex;
    border: 1px solid #c4b5fd;
    border-radius: 20px;
    overflow: hidden;
    vertical-align: middle;
    margin-left: 8px;
    font-weight: 400;
}
.pmt-btn {
    border: none;
    background: transparent;
    color: #7c3aed;
    font-size: .72rem;
    padding: 2px 10px;
    cursor: pointer;
    line-height: 1.6;
    transition: background .12s, color .12s;
}
.pmt-btn.active {
    background: #7c3aed;
    color: #fff;
}
.pmt-btn:hover:not(.active) {
    background: #f5f3ff;
}

.time-rows-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto auto;
    gap: 8px;
    padding: 4px 8px 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.prace-row,
.model-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fafbfc;
}

.prace-row input,
.model-row input {
    padding: 10px 12px;
    font-size: .96rem;
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #d1d5db;
    border-radius: 7px;
    font-weight: 600;
    color: #0f172a;
}

.prace-row .prace-total,
.model-row .prace-total {
    font-weight: 800;
    color: var(--primary);
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 10px;
    white-space: nowrap;
    background: transparent;
    font-size: 1.0rem;
}

.prace-row .btn-del,
.model-row .btn-del {
    padding: 8px 12px;
    font-size: .88rem;
    font-weight: 700;
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    cursor: pointer;
    transition: 150ms;
    white-space: nowrap;
}

.prace-row .btn-del:hover,
.model-row .btn-del:hover {
    background: #fecaca;
    color: #991b1b;
    transform: scale(1.03);
}

/* legacy compat – IDs still used in old markup */
#prace-rows-container .prace-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto auto;
}

/* ============================================================
   Doplňkové komponenty
   ============================================================ */

/* ── .form-control — used in modals & forms ───────────────────── */
.form-control {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    font-size: 0.92rem;
    color: #1e293b;
    font-family: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    box-sizing: border-box;
}
.form-control:focus {
    outline: none;
    background: #fff;
    border-color: #f05a00;
    box-shadow: 0 0 0 3px rgba(240, 90, 0, 0.12);
}
.form-control[readonly] {
    background: #f1f5f9;
    color: #475569;
    cursor: default;
}
.form-control::placeholder { color: #adb5bd; }
textarea.form-control { resize: vertical; min-height: 80px; }

/* ── Nabídka modal form ──────────────────────────────────────── */
.nab-form { display: grid; gap: 18px; }

.nab-field { display: flex; flex-direction: column; gap: 6px; }

.nab-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b7280;
}
.nab-label-note {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.78rem;
    color: #adb5bd;
}

.nab-regen-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff8f0;
    border: 1.5px solid #fcd9b0;
    border-radius: 9px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #92400e;
    font-weight: 500;
}
.nab-regen-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }

.nab-error {
    display: none;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 0.84rem;
}

/* URL result block */
.nab-url-block { display: grid; gap: 14px; }
.nab-url-label { font-size: 0.78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; }
.nab-url-row { display: flex; gap: 8px; align-items: center; }
.nab-url-row .form-control { font-size: 0.8rem; font-family: monospace; }
.nab-url-validity { font-size: 0.78rem; color: #9ca3af; }
.nab-url-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
}

.edit-sub-head {
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
}

/* Spool type toggle buttons */
.spool-type-btn {
    position: relative;
    cursor: pointer;
}
.spool-type-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.spool-type-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    font-weight: 800;
    font-size: 1rem;
    color: #475569;
    gap: 4px;
    min-width: 150px;
    text-align: center;
    transition: all .18s ease;
    line-height: 1.3;
}
.spool-type-label small {
    font-size: .75rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: none;
    letter-spacing: 0;
}
.spool-type-btn input[type="radio"]:checked + .spool-type-label {
    border-color: #f05a00;
    background: #fff5ed;
    color: #f05a00;
    box-shadow: 0 0 0 3px rgba(240,90,0,.12);
}
.spool-type-label:hover {
    border-color: #f05a00;
    background: #fffbf8;
}

.section-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 400;
}

.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrap input {
    flex: 1;
    padding-right: 55px;
}

.unit {
    position: absolute;
    right: 14px;
    color: #64748b;
    font-size: .96rem;
    font-weight: 700;
    pointer-events: none;
}

/* Card styling */
.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
}

.alert-info {
    background: #dbeafe;
    color: #0c4a6e;
    border-color: #93c5fd;
}

/* ============================================================
   Spool color dot + add button
   ============================================================ */
.spool-select-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.spool-color-dot {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    display: none;
}
.btn-add-spool {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1.5px dashed #6366f1;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    font-size: 1.25rem;
    color: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
    padding: 0;
}
.btn-add-spool:hover {
    background: #eef2ff;
    border-style: solid;
    transform: scale(1.08);
}

/* ============================================================
   Page header subtitle (sazby, history apod.)
   ============================================================ */
.page-header-sub {
    color: #64748b;
    font-size: .9rem;
    margin-top: 4px;
    font-weight: 500;
    line-height: 1.5;
}

/* ============================================================
   Section card variant – danger (smazání účtu)
   ============================================================ */
.section-card-danger {
    border-color: #ef4444;
}
.section-card-danger .section-head {
    background: #1a0808;
}
.section-card-danger .section-num {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 2px 8px rgba(239,68,68,.3);
}
.section-card-danger .section-head h2 {
    color: #f87171;
}

/* ============================================================
   Utility helpers
   ============================================================ */
.text-muted   { color: #64748b !important; }
.text-danger  { color: #dc2626 !important; }
.text-success { color: #16a34a !important; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }



@media (max-width: 768px) {
    .prace-row,
    .model-row,
    #prace-rows-container .prace-row {
        grid-template-columns: 1fr 1fr;
    }
    .time-rows-header {
        grid-template-columns: 1fr 1fr;
    }
    .prace-row .prace-total,
    .prace-row .btn-del,
    .model-row .prace-total,
    .model-row .btn-del,
    #prace-rows-container .prace-row .prace-total,
    #prace-rows-container .prace-row .btn-del {
        grid-column: 1 / -1;
    }
}

/* ── Realizováno badge/button ─────────────────────────────────────────────── */
.td-stav { white-space: nowrap; }
.btn-realizovano {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1.5px solid #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
.btn-realizovano:hover { border-color: #94a3b8; background: #f1f5f9; }
.btn-realizovano.is-realized {
    border-color: #16a34a;
    background: #f0fdf4;
    color: #16a34a;
}
.btn-realizovano.is-realized:hover { background: #dcfce7; }
.btn-realizovano:disabled { opacity: .5; pointer-events: none; }

.history-status-select {
    min-width: 150px;
    font-size: .8rem;
    font-weight: 700;
    border-radius: 999px;
    padding-top: 4px;
    padding-bottom: 4px;
    border: 1.5px solid #cbd5e1;
    background: #f8fafc;
    color: #64748b;
}
.history-status-select.is-realized {
    border-color: #16a34a;
    background: #f0fdf4;
    color: #15803d;
}
.history-status-select.is-nonrealized {
    border-color: #dc2626;
    background: #fef2f2;
    color: #b91c1c;
}

.history-row.history-row-nonrealized {
    background: #fff5f5;
}
.history-row.history-row-nonrealized:hover {
    background: #ffe4e6;
}

.nonrealized-reason {
    margin-top: 4px;
    font-size: .73rem;
    color: #b91c1c;
    font-weight: 600;
    max-width: 170px;
    white-space: normal;
    line-height: 1.25;
}

/* ============================================================
   MOBILE POLISH – cross-page alignment and overflow fixes
   ============================================================ */
@media (max-width: 767px) {
    .content-wrap {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .card-header {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .card-footer.d-flex {
        flex-wrap: wrap;
        gap: 8px;
    }

    .card-footer.d-flex .btn {
        width: 100%;
    }

    .table-responsive,
    .table-wrap {
        -webkit-overflow-scrolling: touch;
    }

    .history-bulk-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .history-bulk-wrap .btn,
    .history-bulk-wrap .history-bulk-select {
        width: 100%;
    }

    #printers-db-card .card-header {
        align-items: flex-start;
    }

    #printers-table input[name="cp_nazev[]"] {
        min-width: 130px !important;
    }

    #printers-table input[name="cp_prikon[]"],
    #printers-table input[name="cp_cena[]"],
    #printers-table input[name="cp_zivotnost[]"] {
        width: 88px !important;
        min-width: 88px !important;
    }
}

/* ============================================================
   PLAN BADGES – topbar
   ============================================================ */
.plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-decoration: none;
    transition: all var(--transition);
}
.plan-badge--free {
    background: rgba(255,255,255,.10);
    color: #94a3b8;
    border: 1.5px solid rgba(255,255,255,.15);
}
.plan-badge--free:hover {
    background: rgba(240,90,0,.18);
    color: #fbbf9a;
    border-color: rgba(240,90,0,.35);
}
.plan-badge--warn {
    background: rgba(220,38,38,.18);
    color: #fca5a5;
    border-color: rgba(220,38,38,.35);
    animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.3); }
    50%       { box-shadow: 0 0 0 5px rgba(220,38,38,.0); }
}
.plan-badge--pro {
    background: linear-gradient(135deg, #f05a00, #ff7a45);
    color: #fff;
    border: none;
    box-shadow: 0 3px 10px rgba(240,90,0,.3);
}

/* Mini progress bar in badge */
.plan-mini-bar {
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,.15);
    border-radius: 2px;
    overflow: hidden;
}
.plan-mini-bar span {
    display: block;
    height: 100%;
    background: #fb923c;
    border-radius: 2px;
    transition: width .5s ease;
}

/* ============================================================
   HAMBURGER – mobile nav toggle
   ============================================================ */
.topbar-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
}
.topbar-hamburger span {
    display: block;
    height: 2px;
    background: #cbd5e1;
    border-radius: 2px;
    transition: all .2s ease;
}

/* nav icon in links */
.nav-icon { font-size: 1rem; line-height: 1; }

/* ============================================================
   UPGRADE BANNER – free limit warning
   ============================================================ */
.upgrade-banner {
    background: linear-gradient(135deg, #fff3ec 0%, #fef2e8 100%);
    border: 1.5px solid #fed7aa;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.upgrade-banner-icon { font-size: 1.4rem; flex-shrink: 0; }
.upgrade-banner-text { flex: 1; font-size: .9rem; color: #7c2d12; line-height: 1.5; }
.upgrade-banner-text strong { font-weight: 800; }
.upgrade-banner .btn { flex-shrink: 0; font-size: .82rem; padding: 8px 16px; }

/* Welcome banner */
.welcome-banner {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #fff;
}
.welcome-banner-icon { font-size: 2rem; }
.welcome-banner-text h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; }
.welcome-banner-text p  { margin: 0; font-size: .88rem; color: #94a3b8; }

/* ============================================================
   PRICING CARDS – upgrade.php
   ============================================================ */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 24px;
}

.pricing-card {
    background: #fff;
    border-radius: 20px;
    padding: 32px 28px;
    border: 2px solid #e5e7eb;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transition: box-shadow var(--transition), border-color var(--transition);
}
.pricing-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.pricing-card--current {
    border-color: var(--primary);
}
.pricing-card--featured {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-color: var(--primary);
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.pricing-card--featured .pricing-name,
.pricing-card--featured .pricing-price,
.pricing-card--featured .pricing-features li {
    color: #e2e8f0;
}
.pricing-card--featured .pricing-features li.ok { color: #d1fae5; }
.pricing-card--featured .pricing-features li.ok::before { color: #4ade80; }
.pricing-card--featured .pricing-features li.no  { color: #475569; }

.pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .06em;
    white-space: nowrap;
}
.pricing-badge--current {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(240,90,0,.3);
}
.pricing-badge--pro {
    background: linear-gradient(135deg, var(--primary), #ff7a45);
    color: #fff;
    box-shadow: 0 4px 12px rgba(240,90,0,.4);
}

.pricing-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1f2937;
    margin-top: 6px;
}

.pricing-price {
    font-size: 2.6rem;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.04em;
    line-height: 1;
}
.pricing-price span {
    font-size: 1rem;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0;
}

.pricing-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.pricing-features li {
    font-size: .9rem;
    color: #374151;
    padding-left: 22px;
    position: relative;
    font-weight: 500;
    line-height: 1.45;
}
.pricing-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: 900;
    font-size: .85rem;
}
.pricing-features li.ok::before  { color: #16a34a; }
.pricing-features li.no          { color: #9ca3af; text-decoration: line-through; }
.pricing-features li.no::before  { content: '✗'; color: #d1d5db; }
.pricing-features li.limit::before { content: '⚠'; color: #f59e0b; font-size: .75em; top: 1px; }
.pricing-features li.limit {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* usage bar inside pricing */
.usage-bar-wrap {
    height: 5px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}
.usage-bar {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    border-radius: 3px;
    transition: width .5s ease;
}

@media (max-width: 600px) {
    .pricing-grid    { grid-template-columns: 1fr; }
    .auth-card       { padding: 24px 20px 20px; }
}