:root {
    --ft-yellow: #ffcc00;
    --ft-yellow-soft: #fff7cc;
    --ft-black: #171717;
    --ft-ink: #252525;
    --ft-paper: #f4f4f1;
    --ft-border: #deded8;
}

html, body { min-height: 100%; }

body {
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 95% 0, rgba(255, 204, 0, .12), transparent 25rem),
        var(--ft-paper);
    color: var(--ft-ink);
}

main { flex: 1; }
a { color: #161616; }

.ft-navbar {
    background: var(--ft-black);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
}

.ft-navbar .nav-link {
    border-radius: .6rem;
    color: rgba(255, 255, 255, .72);
    padding-inline: .8rem !important;
}

.ft-navbar .nav-link:hover,
.ft-navbar .nav-link.active {
    background: rgba(255, 204, 0, .12);
    color: var(--ft-yellow);
}

.brand-mark {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 204, 0, .72);
    border-radius: 50%;
    background: #25213a;
    box-shadow: 0 0 0 .25rem rgba(255, 204, 0, .12);
    transition: transform .15s ease, box-shadow .15s ease;
}

.brand-mark:hover {
    transform: rotate(-5deg) scale(1.06);
    box-shadow: 0 0 0 .3rem rgba(255, 204, 0, .2);
}

.brand-mark:focus-visible {
    outline: .18rem solid #fff;
    outline-offset: .25rem;
}

.brand-mark svg { width: 88%; height: 88%; }
.strike-plate {
    fill: #fffdf2;
    stroke: rgba(255, 204, 0, .9);
    stroke-width: 2.5;
}
.strike-plate-rim {
    fill: none;
    stroke: #d6d1bc;
    stroke-width: 1.5;
}
.strike-fork-glow {
    fill: none;
    stroke: rgba(255, 204, 0, .28);
    stroke-linecap: round;
    stroke-width: 9;
}
.strike-fork { fill: var(--ft-yellow); }
.strike-hilt { fill: #f28b35; }
.strike-spark {
    fill: none;
    stroke: var(--ft-yellow);
    stroke-linecap: round;
    stroke-width: 2.5;
}

.brand-mark-lg {
    width: 3.5rem;
    height: 3.5rem;
    flex-basis: 3.5rem;
}

.brand-copy { line-height: 1.1; }
.brand-home-link {
    color: #fff;
    font-size: 1rem;
    font-weight: 850;
    letter-spacing: .035em;
    text-decoration: none;
}
.brand-home-link:hover { color: var(--ft-yellow); }
.brand-tagline {
    margin-top: .18rem;
    color: rgba(255, 255, 255, .58);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .015em;
}
.eyebrow { color: #716000; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.hero-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--ft-border);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 16px 50px rgba(31, 31, 25, .07);
}

.order-status-strip {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) auto auto;
    align-items: center;
    gap: 1.25rem;
    padding: .75rem 1rem;
    border: 1px solid var(--ft-border);
    border-radius: .9rem;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 8px 24px rgba(31, 31, 25, .05);
}

.source-state {
    padding: .45rem .7rem;
    border-radius: 999px;
    background: #f3f3ef;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
}

.source-state.is-verified { background: #e7f5ec; color: #116534; }
.source-state.is-warning { background: #fff2cc; color: #765b00; }

.cutoff-inline {
    min-width: 9.5rem;
    padding-left: 1rem;
    border-left: .25rem solid var(--ft-yellow);
}

.cutoff-inline span,
.cutoff-inline strong { display: block; }
.cutoff-inline span { color: #71716b; font-size: .75rem; text-transform: uppercase; }
.cutoff-inline strong { font-variant-numeric: tabular-nums; }
.cutoff-inline.is-closed { border-left-color: #999; }
.cutoff-inline.is-unlocked {
    min-width: 12rem;
    border-left-color: #198754;
}
.cutoff-inline.is-unlocked strong {
    color: #116534;
    font-size: .88rem;
}

.identity-panel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--ft-border);
    border-radius: 1rem;
    background: var(--ft-black);
    color: #fff;
}

.identity-copy {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 13rem;
}

.identity-panel .avatar { color: var(--ft-black); }
.identity-panel .text-secondary { color: #bdbdb8 !important; }
.identity-form { width: min(24rem, 100%); }

.save-status {
    padding: .45rem .75rem;
    border: 1px solid var(--ft-border);
    border-radius: 999px;
    background: #fff;
    color: #66665f;
    font-size: .85rem;
    font-weight: 700;
}

.save-status[data-state="saving"] { border-color: #dfbf3d; background: var(--ft-yellow-soft); color: #6f5900; }
.save-status[data-state="saved"] { border-color: #9fcdae; background: #e7f5ec; color: #116534; }
.save-status[data-state="error"] { border-color: #e3aaaa; background: #fbeaea; color: #9b1c1c; }

.cutoff-card {
    min-width: 12rem;
    padding: 1rem 1.25rem;
    border-left: .35rem solid var(--ft-yellow);
    border-radius: .75rem;
    background: var(--ft-black);
    color: #fff;
}

.cutoff-card span, .cutoff-card strong { display: block; }
.cutoff-card strong { color: var(--ft-yellow); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.cutoff-card.is-closed { border-left-color: #777; }
.cutoff-card.is-closed strong { color: #ccc; }

.ft-card {
    overflow: hidden;
    border: 1px solid var(--ft-border);
    border-radius: 1rem;
    box-shadow: 0 10px 35px rgba(31, 31, 25, .05);
}

.ft-card .card-header { padding: 1rem 1.25rem; border-bottom-color: var(--ft-border); }

.ft-card.table-responsive,
.table-scroll,
.ft-card > .table-responsive {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: #777 var(--ft-paper);
    scrollbar-width: auto;
    -webkit-overflow-scrolling: touch;
}

.ft-card.table-responsive::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar,
.ft-card > .table-responsive::-webkit-scrollbar {
    height: .8rem;
}

.ft-card.table-responsive::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track,
.ft-card > .table-responsive::-webkit-scrollbar-track {
    border-top: 1px solid var(--ft-border);
    background: var(--ft-paper);
}

.ft-card.table-responsive::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb,
.ft-card > .table-responsive::-webkit-scrollbar-thumb {
    border: 3px solid var(--ft-paper);
    border-radius: 999px;
    background: #777;
}

.table-scroll:focus-visible {
    outline: .2rem solid rgba(255, 204, 0, .65);
    outline-offset: -.2rem;
}

.meal-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ft-border);
    border-radius: 1.1rem;
    background: linear-gradient(145deg, #fff 0%, #fdfdfb 100%);
    box-shadow: 0 8px 24px rgba(31, 31, 25, .045);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.meal-card:hover {
    transform: translateY(-2px);
    border-color: #c9c9c0;
    box-shadow: 0 14px 32px rgba(25, 25, 20, .1);
}

.meal-card.is-selected {
    border-color: #d1a700;
    box-shadow: inset 0 0 0 1px var(--ft-yellow), 0 14px 32px rgba(255, 204, 0, .14);
}

.meal-card.is-selected::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    height: .3rem;
    background: var(--ft-yellow);
}

.meal-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.meal-identity {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.meal-index {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    place-items: center;
    border-radius: .75rem;
    background: var(--ft-black);
    color: var(--ft-yellow);
    font-size: 1.05rem;
    font-weight: 900;
}

.meal-card.is-selected .meal-index {
    background: var(--ft-yellow);
    color: var(--ft-black);
}

.meal-kind,
.meal-identity small { display: block; }
.meal-kind { font-size: .86rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.meal-identity small { margin-top: .08rem; color: #77776f; font-size: .74rem; }

.meal-price {
    padding: .42rem .62rem;
    border: 1px solid var(--ft-border);
    border-radius: 999px;
    background: #fff;
    color: var(--ft-black);
    font-size: .95rem;
    white-space: nowrap;
}

.meal-price.is-unverified {
    border-color: #ddc562;
    background: var(--ft-yellow-soft);
    color: #6f5900;
}

.meal-card .card-body { padding: 1.15rem; }

.meal-card-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1rem;
}

.meal-card-copy {
    min-width: 0;
}

.meal-dish-title {
    margin: 0 0 .8rem;
    color: #24241f;
    font-size: 1.08rem;
    font-weight: 750;
    line-height: 1.42;
}

.allergen-chip {
    align-self: flex-start;
    margin-bottom: 1rem;
    padding: .28rem .5rem;
    border-radius: .5rem;
    background: #eeeeea;
    color: #67675f;
    font-size: .74rem;
    font-weight: 650;
}

.quantity-control {
    display: grid;
    grid-template-columns: 3.1rem minmax(3.5rem, 1fr) 3.1rem;
    width: min(15rem, 100%);
    overflow: hidden;
    border: 1px solid #9c9c94;
    border-radius: .7rem;
    background: #f6f6f2;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.quantity-control:focus-within {
    border-color: #b99500;
    box-shadow: 0 0 0 .2rem rgba(255, 204, 0, .18);
}

.quantity-control .btn {
    min-height: 3rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #55554f;
    font-size: 1.25rem;
    font-weight: 700;
}

.quantity-control .btn:hover,
.quantity-control .btn:focus-visible {
    background: #e8e8e2;
    color: #111;
}

.quantity-control .form-control {
    min-height: 3rem;
    border: 0;
    border-radius: 0;
    background: #ededf0;
    font-size: 1.15rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.quantity-control .form-control:focus {
    border-color: transparent;
    background: #fff;
    box-shadow: none;
}

.quantity-control .form-control[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.quantity-control .form-control[type="number"]::-webkit-inner-spin-button,
.quantity-control .form-control[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.meal-card.is-selected .quantity-control {
    border-color: #caa300;
    background: #fff9d9;
}

.btn-ft {
    border-color: var(--ft-yellow);
    background: var(--ft-yellow);
    color: var(--ft-black);
    font-weight: 800;
}

.btn-ft:hover, .btn-ft:focus { border-color: #e6b800; background: #e6b800; color: #000; }
.btn-foodora { border-color: #d70f64; background: #d70f64; color: #fff; }
.btn-foodora:hover { border-color: #ad0c50; background: #ad0c50; color: #fff; }

.sticky-submit {
    position: sticky;
    z-index: 1010;
    bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 1rem;
    background: rgba(23, 23, 23, .96);
    color: #fff;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .26);
    backdrop-filter: blur(12px);
}

.quantity-badge {
    display: inline-grid;
    min-width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: 50%;
    background: var(--ft-yellow);
    color: #000;
    font-weight: 800;
}

.order-overview th, .order-overview td { min-width: 5rem; }
.order-overview .sticky-column {
    position: sticky;
    z-index: 2;
    left: 0;
    min-width: 10rem;
    background: #fff;
    box-shadow: 1px 0 0 var(--ft-border);
}
.order-overview tfoot .sticky-column { background: #f8f9fa; }

.stat-card {
    min-height: 9rem;
    padding: 1.25rem;
    border: 1px solid var(--ft-border);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 35px rgba(31, 31, 25, .05);
}

.stat-card span, .stat-card strong { display: block; }
.stat-card span { color: #6f6f69; font-size: .85rem; }
.stat-card strong { margin-top: 1rem; font-size: 2rem; }

.status-dot {
    display: inline-block;
    width: .65rem;
    height: .65rem;
    margin-right: .45rem;
    border-radius: 50%;
    background: #f0ad00;
}

.status-dot.is-done { background: #198754; }

.summary-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: center;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 1rem;
    background: var(--ft-black);
    color: #fff;
}

.summary-panel span { color: #bdbdb8; }
.summary-panel strong { text-align: right; font-size: 1.25rem; }

.avatar {
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: .75rem;
    background: var(--ft-yellow-soft);
    font-weight: 800;
}

.credit-form {
    padding-top: 1rem;
    border-top: 1px solid var(--ft-border);
}

.admin-order-grid .grid-quantity { min-width: 4.5rem; }
.admin-order-grid .sticky-column {
    position: sticky;
    z-index: 2;
    left: 0;
    min-width: 8rem;
    background: #fff;
    box-shadow: 1px 0 0 var(--ft-border);
}
.admin-order-grid tfoot .sticky-column { background: #f8f9fa; }

.form-control:focus, .form-select:focus {
    border-color: #b99500;
    box-shadow: 0 0 0 .25rem rgba(255, 204, 0, .2);
}

.table > :not(caption) > * > * { padding: .85rem 1rem; }
.table thead th { color: #686862; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
code { color: #7b6200; }

/* Zaměstnanecká objednávka je pracovní plocha: na desktopu má využít dostupný prostor. */
.employee-order-page main {
    padding-top: 1.25rem !important;
    padding-bottom: 1.5rem !important;
}

.employee-order-page .ft-navbar > .container,
.employee-order-page main > .container,
.employee-order-page footer > .container {
    max-width: 1720px;
}

.employee-order-page .order-status-strip {
    gap: .8rem;
    min-height: 3.5rem;
    padding: .5rem .75rem;
}

.employee-order-page .source-state {
    padding: .35rem .6rem;
    font-size: .76rem;
}

.employee-order-page .cutoff-inline {
    min-width: 8.5rem;
    padding-left: .75rem;
}

.employee-order-page .identity-panel {
    gap: .75rem;
    min-height: 3.75rem;
    padding: .55rem .75rem;
    border-radius: .85rem;
}

.employee-order-page .identity-copy {
    gap: .6rem;
    min-width: 12rem;
}

.employee-order-page .identity-panel .avatar {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: .6rem;
}

.employee-order-page .identity-form {
    width: min(22rem, 100%);
}

.employee-order-page .order-section-heading h1,
.employee-order-page .team-overview-section h2 {
    font-size: 1.35rem;
}

.employee-order-page .order-section-heading .eyebrow,
.employee-order-page .team-overview-section .eyebrow {
    font-size: .68rem;
}

.employee-order-page .save-status {
    padding: .35rem .65rem;
    font-size: .78rem;
}

.employee-order-page .meal-card {
    border-radius: .85rem;
}

.employee-order-page .meal-identity {
    gap: .5rem;
}

.employee-order-page .meal-index {
    width: 2.1rem;
    height: 2.1rem;
    flex-basis: 2.1rem;
    border-radius: .6rem;
    font-size: .92rem;
}

.employee-order-page .meal-kind {
    font-size: .78rem;
}

.employee-order-page .meal-identity small {
    font-size: .67rem;
}

.employee-order-page .meal-price {
    padding: .32rem .5rem;
    font-size: .82rem;
}

.employee-order-page .meal-card .card-body {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .65rem .7rem .7rem;
}

.employee-order-page .meal-card-meta {
    gap: .6rem;
}

.employee-order-page .meal-card-content {
    flex: 1;
    gap: .65rem;
}

.employee-order-page .meal-dish-title {
    margin-bottom: 0;
    font-size: .94rem;
    line-height: 1.25;
}

.employee-order-page .allergen-chip {
    margin-top: .35rem;
    margin-bottom: 0;
    padding: .2rem .4rem;
    font-size: .67rem;
}

.employee-order-page .quantity-control {
    grid-template-columns: 2.25rem minmax(2.7rem, 1fr) 2.25rem;
    width: min(9rem, 100%);
}

.employee-order-page .quantity-control .btn,
.employee-order-page .quantity-control .form-control {
    min-height: 2.4rem;
}

.employee-order-page .quantity-control .btn {
    font-size: 1rem;
}

.employee-order-page .quantity-control .form-control {
    font-size: 1rem;
}

.employee-order-page .team-overview-section {
    scroll-margin-top: 5rem;
}

.employee-order-page .order-overview {
    min-width: 56rem;
    table-layout: fixed;
}

.employee-order-page .order-overview th,
.employee-order-page .order-overview td {
    min-width: 0;
    padding: .48rem .3rem;
    font-size: .82rem;
}

.employee-order-page .order-overview .sticky-column {
    width: 9rem;
    min-width: 9rem;
    padding-left: .65rem;
}

.employee-order-page .order-overview th:last-child,
.employee-order-page .order-overview td:last-child {
    width: 5.25rem;
    white-space: nowrap;
}

.employee-order-page .quantity-badge {
    min-width: 1.45rem;
    height: 1.45rem;
    font-size: .76rem;
}

@media (max-width: 767.98px) {
    .hero-panel { align-items: stretch; flex-direction: column; }
    .cutoff-card { min-width: 0; }
    .order-status-strip {
        grid-template-columns: 1fr auto;
        gap: .75rem;
    }
    .order-status-strip > :first-child {
        grid-column: 1 / -1;
        flex-wrap: wrap;
    }
    .source-state {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }
    .cutoff-inline {
        grid-column: 2;
        grid-row: 2;
        min-width: 8.5rem;
    }
    .identity-panel { align-items: stretch; flex-direction: column; }
    .identity-copy { min-width: 0; }
    .identity-form { width: 100%; }
    .quantity-control { width: 100%; }
    .sticky-submit { align-items: stretch; flex-direction: column; bottom: .5rem; }
    .sticky-submit .btn, .sticky-submit > .d-flex { width: 100%; }
    .sticky-submit > .d-flex .btn { flex: 1; }

    .employee-order-page main {
        padding-top: .9rem !important;
    }

    .employee-order-page .identity-panel {
        padding: .75rem;
    }

    .employee-order-page .meal-card .card-body {
        padding: .8rem;
    }

    .employee-order-page .meal-card-content {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: .65rem;
    }

    .employee-order-page .quantity-control {
        justify-self: stretch;
        width: 100%;
    }

    .employee-order-page .quantity-control .btn,
    .employee-order-page .quantity-control .form-control {
        min-height: 2.75rem;
    }

    .employee-order-page .order-overview {
        min-width: 52rem;
    }

    .employee-order-page .order-overview .sticky-column {
        width: 7.5rem;
        min-width: 7.5rem;
    }
}