* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    background: #f4f5f7;
    color: #222;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.topbar {
    background: #20242a;
    color: white;
    padding: 17px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar h1 {
    margin: 0;
    font-size: 23px;
}

.topbar p {
    margin: 4px 0 0;
    opacity: .75;
}

.event-date {
    margin-top: 6px;
    font-size: 13px;
    opacity: .8;
}

.topbar a {
    color: white;
    text-decoration: none;
}

.admin-link {
    font-size: 25px;
}

.top-actions {
    display: flex;
    gap: 15px;
}

.container {
    width: min(100%, 1050px);
    margin: auto;
    padding: 20px;
}

section {
    margin-bottom: 28px;
}

section h2 {
    margin-top: 0;
}

.flash-area {
    margin-bottom: 15px;
}

.flash-message {
    background: #dff6e7;
    border: 1px solid #abd9b9;
    padding: 12px 14px;
    border-radius: 11px;
}

.closed-banner {
    background: #fff1c7;
    border: 1px solid #e5c35b;
    padding: 14px;
    margin-bottom: 20px;
    border-radius: 12px;
    font-weight: bold;
}

.people-section,
.general-note-section,
.active-person-box,
.my-orders,
.admin-section {
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow:
        0 3px 12px rgba(0,0,0,.06);
}

.people-section p,
.general-note-section p {
    color: #666;
}

.people-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.person-button {
    border: 1px solid #ccc;
    background: #f3f3f3;
    border-radius: 999px;
    padding: 10px 16px;
}

.active-person {
    background: #20242a;
    color: white;
    border-color: #20242a;
}

.add-person-form {
    display: flex;
    gap: 10px;
}

.add-person-form input {
    flex: 1;
    min-width: 0;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 10px;
}

.secondary-button {
    border: none;
    background: #e8eaed;
    padding: 11px 15px;
    border-radius: 10px;
    font-weight: 600;
}

.active-person-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.active-person-box h2 {
    margin: 3px 0 0;
}

.small-label {
    color: #777;
    font-size: 12px;
}

.tiny-delete {
    border: none;
    background: #ffe2e2;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
}

.general-note-section textarea,
.special-request-box textarea {
    width: 100%;
    min-height: 85px;
    resize: vertical;
    padding: 11px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-bottom: 10px;
}

.menu-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(230px, 1fr)
        );
    gap: 15px;
}

.menu-card {
    background: white;
    border-radius: 16px;
    padding: 18px;
    box-shadow:
        0 3px 12px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.menu-card h3 {
    margin: 0;
    font-size: 21px;
}

.description {
    color: #666;
}

.price {
    font-size: 18px;
    font-weight: bold;
}

.order-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quantity-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quantity-row input {
    width: 80px;
    padding: 9px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.order-form textarea {
    width: 100%;
    min-height: 65px;
    resize: vertical;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 9px;
}

.order-button,
.primary-button,
.special-button {
    width: 100%;
    border: none;
    padding: 13px;
    border-radius: 10px;
    color: white;
    background: #20242a;
    font-weight: bold;
}

.sold-out {
    opacity: .55;
}

.sold-label {
    background: #ddd;
    padding: 10px;
    text-align: center;
    border-radius: 9px;
    font-weight: bold;
}

.special-request-box {
    padding: 24px;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #fff8dc,
            #fff
        );
    border: 1px solid #eadca7;
}

.special-request-box h2 {
    margin-bottom: 5px;
}

.special-request-box p {
    color: #666;
}

.special-icon {
    font-size: 30px;
}

.special-button {
    background: #574b27;
}

.general-note-display {
    padding: 12px;
    background: #fff5cf;
    border-radius: 10px;
    margin-bottom: 15px;
}

.my-order-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.my-order {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 13px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.my-order-note {
    margin-top: 5px;
    color: #66530e;
}

.my-order-time {
    color: #888;
    font-size: 11px;
    margin-top: 6px;
}

.my-order-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.status-badge {
    background: #e8eaed;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

.cancel-own-button {
    border: none;
    background: #ffe2e2;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 12px;
}

.subheading {
    margin-top: 25px;
}

.welcome-box {
    background: white;
    border-radius: 16px;
    padding: 25px;
    text-align: center;
}

.login-wrapper {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
}

.login-card {
    background: white;
    width: min(100%, 360px);
    padding: 30px;
    border-radius: 18px;
    box-shadow:
        0 5px 25px rgba(0,0,0,.12);
}

.login-card input {
    width: 100%;
    padding: 13px;
    margin: 15px 0;
    border: 1px solid #ccc;
    border-radius: 9px;
}

.login-card a {
    display: block;
    text-align: center;
    margin-top: 15px;
}

.error {
    background: #ffdede;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.event-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.event-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.event-form input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

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

.checkbox-field {
    flex-direction: row !important;
    align-items: center;
}

.admin-form,
.edit-form {
    display: grid;
    grid-template-columns:
        2fr
        1fr
        1fr
        2fr
        auto;
    gap: 10px;
}

.admin-form input,
.admin-form select,
.edit-form input,
.edit-form select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.admin-items,
.orders-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.admin-item,
.admin-order {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 15px;
}

.special-admin-order {
    background: #fffdf3;
}

.order-main {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.order-person {
    font-size: 17px;
}

.order-title {
    margin-top: 5px;
    font-size: 19px;
    font-weight: bold;
}

.order-note {
    margin-top: 8px;
    background: #fff4cc;
    padding: 8px;
    border-radius: 8px;
}

.order-time {
    margin-top: 8px;
    color: #777;
    font-size: 12px;
}

.order-status {
    font-weight: bold;
}

.item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.item-actions select {
    padding: 8px;
    border-radius: 8px;
}

.action-button,
.small-button,
.delete-button,
.move-button {
    border: none;
    padding: 9px 12px;
    border-radius: 8px;
}

.small-button {
    background: #20242a;
    color: white;
}

.action-button,
.move-button {
    background: #e7e7e7;
}

.delete-button {
    background: #ffe2e2;
}

.move-buttons {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

.move-button {
    min-width: 44px;
    font-size: 19px;
}

.hidden-item {
    opacity: .5;
}

.status-line {
    margin-top: 10px;
    display: flex;
    gap: 5px;
}

.status-line span {
    font-size: 11px;
    font-weight: bold;
    background: #ddd;
    padding: 4px 7px;
    border-radius: 5px;
}

.guest-list {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );
    gap: 10px;
}

.guest-card {
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 10px;
}

.guest-note {
    color: #705b14;
    margin-top: 6px;
    font-size: 13px;
}

.empty-info {
    color: #777;
}

@media (max-width: 750px) {

    .container {
        padding: 12px;
    }

    .admin-form,
    .edit-form,
    .event-form {
        grid-template-columns: 1fr;
    }

    .full-field {
        grid-column: auto;
    }

    .menu-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .menu-card {
        padding: 14px;
    }

}

@media (max-width: 520px) {

    .menu-grid {
        grid-template-columns: 1fr;
    }

    .add-person-form {
        flex-direction: column;
    }

    .my-order,
    .order-main {
        flex-direction: column;
    }

    .my-order-right {
        align-items: flex-start;
    }

    .active-person-box {
        gap: 10px;
    }

}

/* ==========================================================
   TABLET / PROVOZNI OBJEDNAVKY
   ========================================================== */

.orders-body {
    background: #eef0f3;
}

.orders-topbar {
    position: sticky;
    top: 0;
    z-index: 100;

    background: #171a1f;
    color: white;

    padding: 14px 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    box-shadow:
        0 3px 12px rgba(0,0,0,.25);
}

.orders-topbar h1 {
    margin: 0 0 8px;
    font-size: 26px;
}

.orders-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.orders-summary span {
    background: rgba(255,255,255,.12);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
}

.orders-summary strong {
    margin-left: 4px;
    font-size: 15px;
}

.orders-top-actions {
    display: flex;
    gap: 10px;
}

.orders-top-actions a {
    color: white;
    text-decoration: none;

    background: rgba(255,255,255,.12);

    padding: 10px 13px;
    border-radius: 9px;

    white-space: nowrap;
}

.orders-container {
    width: min(1400px, 100%);
    margin: auto;
    padding: 18px;
}

.orders-tabs {
    display: flex;
    gap: 8px;

    margin-bottom: 15px;
}

.orders-tab {
    text-decoration: none;
    color: #222;

    background: white;

    padding: 11px 16px;
    border-radius: 10px;

    font-weight: 600;

    box-shadow:
        0 2px 6px rgba(0,0,0,.06);
}

.orders-tab.active {
    background: #20242a;
    color: white;
}

.order-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 20px;
}

.filter-button {
    border: none;
    background: white;

    padding: 11px 17px;
    border-radius: 10px;

    font-weight: 600;

    box-shadow:
        0 2px 6px rgba(0,0,0,.08);
}

.filter-button.active {
    background: #20242a;
    color: white;
}

.tablet-section-title {
    margin: 10px 0 15px;
}

.tablet-orders-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(330px, 1fr)
        );

    gap: 14px;
}

.tablet-order-card {
    background: white;

    border-radius: 15px;

    padding: 16px;

    box-shadow:
        0 3px 12px rgba(0,0,0,.09);

    border-left:
        6px solid #aaa;
}

.tablet-order-card[data-status="Nová"] {
    border-left-color: #d65b5b;
}

.tablet-order-card[data-status="Připravuje se"] {
    border-left-color: #d69a38;
}

.tablet-order-card[data-status="Hotovo"] {
    border-left-color: #58a56a;
}

.tablet-order-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 12px;
}

.tablet-order-person {
    font-size: 16px;
    font-weight: 700;
}

.tablet-order-title {
    margin-top: 5px;

    font-size: 25px;
    font-weight: 800;
}

.tablet-order-category {
    background: #eef0f3;

    padding: 7px 9px;
    border-radius: 8px;

    font-size: 12px;

    white-space: nowrap;
}

.tablet-item-note {
    margin-top: 14px;

    background: #fff0bc;

    padding: 12px;
    border-radius: 10px;

    font-size: 16px;
}

.tablet-general-note {
    margin-top: 9px;

    background: #e9f1ff;

    padding: 12px;
    border-radius: 10px;

    font-size: 15px;
}

.tablet-note-label {
    font-size: 11px;
    font-weight: 800;

    margin-bottom: 5px;

    opacity: .65;
}

.tablet-order-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 10px;

    margin-top: 13px;

    color: #777;
    font-size: 12px;
}

.wait-time {
    background: #ececec;
    color: #333;

    padding: 5px 8px;
    border-radius: 999px;

    font-weight: 700;
}

.wait-medium {
    background: #fff0c8;
}

.wait-long {
    background: #ffd7d7;
}

.tablet-current-status {
    margin-top: 12px;

    text-align: center;

    font-size: 13px;

    color: #666;
}

.tablet-status-buttons {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 7px;

    margin-top: 9px;
}

.status-action {
    min-height: 65px;

    border: 2px solid transparent;
    border-radius: 10px;

    background: #e8eaed;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 3px;

    font-size: 20px;
}

.status-action span {
    font-size: 11px;
    font-weight: 700;
}

.selected-status {
    border-color: #20242a;
    box-shadow:
        inset 0 0 0 1px #20242a;
}

.new-action {
    background: #ffe2e2;
}

.preparing-action {
    background: #ffedcb;
}

.ready-action {
    background: #daf1df;
}

.delivered-action {
    background: #e0e4e8;
}

.delivered-label {
    margin-top: 15px;

    background: #dff2e4;

    padding: 10px;
    border-radius: 9px;

    text-align: center;
    font-weight: 700;
}

.tablet-empty {
    background: white;

    border-radius: 15px;

    padding: 35px;

    text-align: center;

    color: #666;

    font-size: 18px;
}


/* ==========================================================
   SPECIALNI POZADAVKY
   ========================================================== */

.tablet-special-section {
    background: #fff9df;

    border: 1px solid #e7dba2;

    padding: 16px;

    border-radius: 15px;

    margin-bottom: 22px;
}

.tablet-special-section h2 {
    margin-top: 0;
}

.tablet-special-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );

    gap: 10px;
}

.tablet-special-card {
    background: white;

    border-radius: 11px;

    padding: 14px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.06);
}

.tablet-special-text {
    margin-top: 8px;

    font-size: 18px;
    font-weight: 700;
}

.tablet-order-time {
    margin-top: 7px;

    color: #888;
    font-size: 11px;
}

.special-status-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    gap: 6px;

    margin-top: 12px;
}

.special-status-buttons button {
    border: none;

    min-height: 45px;

    border-radius: 8px;

    background: #e4efe7;

    font-weight: 700;
}

.special-status-buttons .cannot-button {
    background: #ffe2e2;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .tablet-orders-grid {
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(300px, 1fr)
            );
    }

    .orders-topbar {
        align-items: flex-start;
    }

}


/* ==========================================================
   MOBIL
   ========================================================== */

@media (max-width: 600px) {

    .orders-topbar {
        position: static;

        flex-direction: column;

        padding: 13px;
    }

    .orders-top-actions {
        width: 100%;
    }

    .orders-top-actions a {
        flex: 1;
        text-align: center;
    }

    .orders-container {
        padding: 10px;
    }

    .tablet-orders-grid {
        grid-template-columns: 1fr;
    }

    .tablet-status-buttons {
        grid-template-columns:
            1fr 1fr;
    }

    .status-action {
        min-height: 58px;
    }

    .tablet-order-meta {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* ==========================================================
   LIVE STATUS
   ========================================================== */

.live-indicator {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 9999;

    display: flex;
    align-items: center;
    gap: 7px;

    background: #20242a;
    color: white;

    padding: 8px 11px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    box-shadow:
        0 3px 12px rgba(0,0,0,.2);
}

.live-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #65d47a;

    box-shadow:
        0 0 0 4px
        rgba(101,212,122,.15);
}

.live-error .live-dot {
    background: #e45b5b;

    box-shadow:
        0 0 0 4px
        rgba(228,91,91,.15);
}


/* ==========================================================
   SPOLECNA ADMIN NAVIGACE
   ========================================================== */

.admin-main-nav {
    position: sticky;
    top: 0;
    z-index: 5000;

    background: #171a1f;

    padding: 10px 14px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;

    box-shadow:
        0 3px 14px rgba(0,0,0,.25);
}


.admin-main-nav-inner {
    display: flex;
    align-items: stretch;

    gap: 7px;

    min-width: 0;
}


.admin-main-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 44px;

    padding: 8px 13px;

    border-radius: 10px;

    text-decoration: none;

    color: white;

    font-size: 14px;
    font-weight: 800;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.06);

    white-space: nowrap;
}


.admin-main-nav-item:hover {
    background:
        rgba(255,255,255,.15);
}


.admin-main-nav-active {
    background: #ffffff;
    color: #171a1f;

    border-color: #ffffff;
}


.admin-operation-tools {
    display: flex;
    gap: 7px;
}


.admin-sound-test {
    min-height: 44px;

    border: none;
    border-radius: 10px;

    padding: 8px 13px;

    background: #f0b429;
    color: #202020;

    font-weight: 900;

    cursor: pointer;
}


.old-admin-actions {
    display: none !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 850px) {

    .admin-main-nav {
        align-items: stretch;
    }

    .admin-main-nav-inner {
        flex: 1;
    }

    .admin-main-nav-item {
        flex: 1;

        padding-left: 9px;
        padding-right: 9px;
    }

}


/* ==========================================================
   TELEFON
   ========================================================== */

@media (max-width: 600px) {

    .admin-main-nav {
        position: sticky;

        flex-direction: column;

        padding: 8px;
    }


    .admin-main-nav-inner {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(5, 1fr);

        gap: 5px;
    }


    .admin-main-nav-item {
        min-width: 0;

        flex-direction: column;

        gap: 2px;

        padding: 7px 3px;

        font-size: 18px;
    }


    .admin-main-nav-item span {
        font-size: 10px;

        overflow: hidden;
        text-overflow: ellipsis;

        max-width: 100%;
    }


    .admin-operation-tools {
        width: 100%;
    }


    .admin-sound-test {
        width: 100%;
        min-height: 38px;
    }

}