/* KDS - clean professional board style matching reference */

:root {
    --blue: #0b2f75;
    --blue-border: #3347b7;
    --bg: #efefec;
    --card-bg: #f7f7f3;
    --green-top: #4ad15b;
    --green-bottom: #1f8f35;
    --text: #222;
    --muted: #666;
    --danger: #d42c2c;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    overflow: hidden;
}

.kds-header {
    height: 56px;
    background: var(--blue);
    color: #fff;
    border-bottom: 2px solid #ececec;
    padding: 0 10px;
}

.header-container {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-right { justify-content: flex-end; }
.header-center { display: flex; align-items: center; justify-content: center; }
.header-logo { display: none; }

.station-selector-header label {
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
}

.station-dropdown-header {
    height: 30px;
    min-width: 150px;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    font-size: 12px;
}

.kds-pager {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pager-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.pager-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.pager-meta {
    min-width: 200px;
    text-align: center;
}

.pager-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.05;
}

.pager-subtitle {
    font-size: 10px;
    opacity: 0.95;
}

.header-buttons {
    display: flex;
    gap: 6px;
}

.header-buttons .btn {
    height: 30px;
    padding: 0 10px;
    font-size: 11px;
    border-radius: 4px;
}

.refresh-indicator {
    font-size: 10px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 11px;
    padding: 4px 8px;
}

.connection-status {
    position: fixed;
    top: 62px;
    right: 10px;
    z-index: 900;
    font-size: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 3px 9px;
}

.orders-grid {
    height: calc(100vh - 56px);
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.order-card {
    background: var(--card-bg);
    border: 2px solid var(--blue-border);
    border-radius: 0;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    min-height: 0;
    overflow: hidden;
    box-shadow: none;
}

.order-card::before,
.order-card::after { display: none; }

.order-header {
    background: #fff;
    border-bottom: 1px solid #dddddd;
    padding: 2px 5px 0;
    border-radius: 0;
}

.header-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.order-number {
    font-size: 17px;
    font-weight: 700;
    color: #1f1f1f;
}

.header-items-count {
    font-size: 17px;
    color: #4b2a86;
    font-weight: 700;
}

.order-type-badge {
    display: block;
    width: 100%;
    margin: 0;
    border-radius: 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    padding: 6px 3px;
    background: linear-gradient(to bottom, var(--green-top), var(--green-bottom));
    border-top: 1px solid #90e598;
    border-bottom: 1px solid #0f651f;
}

.order-type-badge.take_away {
    background: linear-gradient(to bottom, #f0c24e, #cc8d19);
    border-top: 1px solid #f7db92;
    border-bottom: 1px solid #8d5f0f;
}

.order-type-badge.delivery {
    background: linear-gradient(to bottom, #7aa2ff, #385fbd);
    border-top: 1px solid #b8ccff;
    border-bottom: 1px solid #27448b;
}

.table-floor-info {
    margin-top: 2px;
    background: #f0be2f;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding: 2px 3px;
}

.order-body {
    min-height: 0;
    overflow: auto;
    padding: 6px 8px;
}

.items-list {
    height: 100%;
    overflow: auto;
    padding-right: 4px;
}

.order-body::-webkit-scrollbar,
.items-list::-webkit-scrollbar {
    width: 8px;
}

.order-body::-webkit-scrollbar-track,
.items-list::-webkit-scrollbar-track {
    background: #ececec;
}

.order-body::-webkit-scrollbar-thumb,
.items-list::-webkit-scrollbar-thumb {
    background: #9ea3b8;
    border-radius: 8px;
}

.order-body::-webkit-scrollbar-thumb:hover,
.items-list::-webkit-scrollbar-thumb:hover {
    background: #7f8599;
}

.item-row {
    border: none;
    padding: 2px 0;
    align-items: flex-start;
}

.item-row .d-flex { gap: 0; }

.item-quantity {
    background: transparent !important;
    color: #1f308b !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    min-width: auto;
    line-height: 1.1;
    padding: 0 !important;
}

.item-name {
    color: #2b2b2b;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.22;
    white-space: normal;
    max-width: none;
}

.deal-subitems {
    margin: 4px 0 2px;
    padding-left: 2px;
}

.deal-subitem {
    font-size: 24px;
    font-weight: 500;
    color: #303030;
    line-height: 1.25;
    margin-top: 2px;
}

.deal-subitem::before {
    content: "o ";
    color: #8f6a2f;
    margin-right: 4px;
}

.item-template,
.item-modifiers,
.item-remarks {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #333 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    display: block !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    color: #232323 !important;
}

.running-order-badge,
.post-service-order-badge,
.running-order-item-label,
.cancelled-order-badge,
.item-status,
.priority-indicator,
.customer-name,
.priority-info,
.timing-source {
    display: none !important;
}

.order-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 5px;
    background: #fff;
    border-top: 1px solid #e3e3e3;
    font-size: 18px;
    font-weight: 700;
}

.order-age { color: #222; }
.order-mini-page { color: #1f8f35; font-size: 17px; }

.order-time {
    min-width: 44px;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    border-radius: 2px;
    padding: 2px 4px;
}

.order-time.normal {
    background: #f0f0f0;
    color: #333;
}

.order-time.danger {
    background: var(--danger);
    color: #fff;
}

.order-actions-container {
    background: #fff;
    border-top: 1px solid #e3e3e3;
    padding: 3px 5px;
}

.ready-button {
    width: 100%;
    height: 23px;
    border: 1px solid #bcbcbc;
    border-radius: 2px;
    background: #f3f3f3;
    color: #1f1f1f;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: none;
    margin: 0;
    padding: 0 6px;
}

.ready-button:hover {
    transform: none;
    box-shadow: none;
    background: #ececec;
}

.no-orders {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: grid;
    place-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
}

.no-orders i {
    font-size: 46px;
    color: #9b9b9b;
}

@media (max-width: 1280px) {
    .orders-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    body { overflow: auto; }

    .kds-header {
        height: auto;
        padding: 8px;
    }

    .header-container {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .header-left,
    .header-center,
    .header-right {
        justify-content: center;
        flex-wrap: wrap;
    }

    .orders-grid {
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
}
