/* Activation Screen */
    .kds-activation {
        min-height: 100vh;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }
    
    .activation-card {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 1.5rem;
        padding: 3rem;
        text-align: center;
        max-width: 450px;
        width: 100%;
    }
    
    .activation-icon {
        color: #60a5fa;
        margin-bottom: 1.5rem;
    }
    
    .activation-card h1 {
        color: white;
        font-size: 1.75rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    .activation-card .subtitle {
        color: rgba(255,255,255,0.6);
        margin-bottom: 2rem;
    }
    
    .activation-form {
        margin-bottom: 1.5rem;
    }
    
    .activation-input {
        width: 100%;
        padding: 1rem;
        font-size: 1.25rem;
        text-align: center;
        font-family: monospace;
        letter-spacing: 0.1em;
        background: rgba(255,255,255,0.1);
        border: 2px solid rgba(255,255,255,0.2);
        border-radius: 0.75rem;
        color: white;
        outline: none;
        transition: all 0.2s;
        text-transform: uppercase;
    }
    
    .activation-input:focus {
        border-color: #60a5fa;
        background: rgba(255,255,255,0.15);
    }
    
    .activation-input.error {
        border-color: #ef4444;
    }
    
    .error-message {
        color: #ef4444;
        font-size: 0.875rem;
        margin-top: 0.5rem;
    }
    
    .btn-activate {
        width: 100%;
        padding: 1rem;
        margin-top: 1rem;
        border-radius: 0.75rem;
        border: none;
        background: linear-gradient(135deg, #60a5fa, #3b82f6);
        color: white;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        transition: all 0.2s;
    }
    
    .btn-activate:hover:not(:disabled) {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        transform: translateY(-1px);
    }
    
    .btn-activate:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }
    
    .help-text {
        color: rgba(255,255,255,0.5);
        font-size: 0.875rem;
    }
    
    .btn-back-to-pos {
        margin-top: 1.5rem;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        border: 1px solid rgba(255,255,255,0.2);
        background: transparent;
        color: rgba(255,255,255,0.7);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s;
    }
    
    .btn-back-to-pos:hover {
        background: rgba(255,255,255,0.1);
        color: white;
    }

    /* Main KDS Container */
    .kds-container {
        min-height: 100vh;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        color: white;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    
    .kds-container.light {
        background: #f8fafc;
        color: #1e293b;
    }
    
    .kds-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.5rem;
        background: rgba(255,255,255,0.05);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .light .kds-header {
        background: white;
        border-bottom-color: #e2e8f0;
    }
    
    .kds-title {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 1.25rem;
        font-weight: 700;
    }
    
    .expo-badge {
        background: #f59e0b;
        color: #1a1a2e;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        margin-left: 0.5rem;
    }
    
    .kds-station-tabs {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .station-tab {
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        border: 2px solid rgba(255,255,255,0.2);
        background: transparent;
        color: white;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .light .station-tab {
        border-color: #e2e8f0;
        color: #475569;
    }
    
    .station-tab:hover {
        border-color: var(--station-color, #60a5fa);
        background: rgba(255,255,255,0.1);
    }
    
    .station-tab.active {
        background: var(--station-color, #60a5fa);
        border-color: var(--station-color, #60a5fa);
        color: white;
    }
    
    .station-tab .badge, .station-label .badge {
        background: rgba(0,0,0,0.3);
        padding: 0.125rem 0.5rem;
        border-radius: 9999px;
        font-size: 0.75rem;
    }
    
    .station-label {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        background: var(--station-color, #60a5fa);
        font-weight: 500;
        font-size: 0.875rem;
    }
    
    /* Status Filter */
    .kds-status-filter {
        display: flex;
        gap: 0.25rem;
        background: rgba(255,255,255,0.1);
        padding: 0.25rem;
        border-radius: 0.5rem;
    }
    
    .light .kds-status-filter {
        background: #e2e8f0;
    }
    
    .status-btn {
        padding: 0.375rem 0.75rem;
        border-radius: 0.375rem;
        border: none;
        background: transparent;
        color: rgba(255,255,255,0.7);
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .light .status-btn {
        color: #64748b;
    }
    
    .status-btn:hover {
        background: rgba(255,255,255,0.1);
        color: white;
    }
    
    .light .status-btn:hover {
        background: rgba(0,0,0,0.1);
        color: #1e293b;
    }
    
    .status-btn.active {
        background: rgba(255,255,255,0.2);
        color: white;
    }
    
    .light .status-btn.active {
        background: white;
        color: #1e293b;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    
    .status-btn.all.active { background: #8b5cf6; }
    .status-btn.pending.active { background: #fbbf24; color: #1a1a2e; }
    .status-btn.preparing.active { background: #60a5fa; }
    .status-btn.ready.active { background: #34d399; color: #1a1a2e; }

    .kds-actions {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .kds-stats {
        display: flex;
        gap: 1.5rem;
    }
    
    .stat {
        text-align: center;
    }
    
    .stat-value {
        display: block;
        font-size: 1.5rem;
        font-weight: 700;
    }
    
    .stat-value.pending { color: #fbbf24; }
    .stat-value.preparing { color: #60a5fa; }
    .stat-value.ready { color: #34d399; }
    
    .stat-label {
        font-size: 0.75rem;
        opacity: 0.7;
    }
    
    .kds-time {
        font-family: monospace;
        font-size: 1.25rem;
        padding: 0.5rem 1rem;
        background: rgba(255,255,255,0.1);
        border-radius: 0.5rem;
    }
    
    .btn-refresh, .btn-settings {
        padding: 0.5rem;
        border-radius: 0.5rem;
        border: 1px solid rgba(255,255,255,0.2);
        background: transparent;
        color: white;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .light .btn-refresh, .light .btn-settings {
        border-color: #e2e8f0;
        color: #475569;
    }
    
    .btn-refresh:hover, .btn-settings:hover {
        background: rgba(255,255,255,0.1);
    }
    
    /* Tickets Grid */
    .kds-tickets {
        flex: 1;
        padding: 1.5rem;
        display: grid;
        gap: 1rem;
        align-content: start;
    }
    
    .loading-state, .empty-state {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4rem;
        opacity: 0.7;
    }
    
    .empty-state h3 { margin-top: 1rem; font-size: 1.25rem; }
    .empty-state p { opacity: 0.6; }
    
    /* Ticket Card */
    .ticket-card {
        background: rgba(255,255,255,0.05);
        border-radius: 1rem;
        overflow: hidden;
        border: 2px solid transparent;
        transition: all 0.3s;
    }
    
    .light .ticket-card { background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    
    .ticket-card.pending { border-color: #fbbf24; }
    .ticket-card.preparing { border-color: #60a5fa; }
    .ticket-card.ready { border-color: #34d399; opacity: 0.7; }
    .ticket-card.overdue { animation: pulse-overdue 1s infinite; }
    
    @keyframes pulse-overdue {
        0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
        50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    }
    
    .ticket-header {
        background: var(--station-color, #60a5fa);
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .ticket-info { display: flex; align-items: center; gap: 0.75rem; }
    .ticket-number { font-size: 1.25rem; font-weight: 700; }
    .ticket-time {
        font-size: 0.875rem;
        padding: 0.25rem 0.5rem;
        background: rgba(0,0,0,0.2);
        border-radius: 0.25rem;
    }
    .ticket-time.alert { background: #ef4444; animation: blink 1s infinite; }
    @keyframes blink { 50% { opacity: 0.5; } }
    
    .ticket-meta { display: flex; gap: 0.5rem; font-size: 0.875rem; }
    .order-number { font-weight: 600; }
    .table-name, .order-type { background: rgba(0,0,0,0.2); padding: 0.125rem 0.5rem; border-radius: 0.25rem; }
    
    .priority-badge { padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
    .priority-badge.rush { background: #ef4444; }
    .priority-badge.vip { background: #8b5cf6; }
    
    .ticket-items { padding: 0.75rem; }
    .ticket-item { display: flex; gap: 0.75rem; padding: 0.5rem; border-radius: 0.5rem; }
    .ticket-item:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.1); }
    .light .ticket-item:not(:last-child) { border-bottom-color: #e2e8f0; }
    .ticket-item.done { opacity: 0.5; text-decoration: line-through; }
    
    .item-qty { font-weight: 700; color: #fbbf24; min-width: 2rem; }
    .item-details { flex: 1; }
    .item-name { font-weight: 500; display: block; }
    .item-modifiers { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
    .modifier {
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1.2;
        padding: 0.15rem 0.5rem;
        background: rgba(139, 92, 246, 0.55);
        border: 1px solid rgba(196, 181, 253, 0.65);
        border-radius: 0.3rem;
        color: #f5f3ff;
        letter-spacing: 0.01em;
    }
    .light .modifier {
        background: #ede9fe;
        border-color: #a78bfa;
        color: #4c1d95;
    }
    .item-notes { font-size: 0.8125rem; font-weight: 600; color: #fbbf24; margin-top: 0.35rem; }
    .light .item-notes { color: #b45309; }
    .course-badge { font-size: 0.75rem; padding: 0.125rem 0.375rem; background: rgba(96, 165, 250, 0.3); border-radius: 0.25rem; }
    
    .ticket-actions { padding: 0.75rem; border-top: 1px solid rgba(255,255,255,0.1); }
    .light .ticket-actions { border-top-color: #e2e8f0; }
    
    .btn-start, .btn-bump, .btn-recall {
        width: 100%; padding: 0.75rem; border-radius: 0.5rem; border: none;
        font-weight: 700; font-size: 1rem; cursor: pointer;
        display: flex; align-items: center; justify-content: center; gap: 0.5rem;
        transition: all 0.2s;
    }
    
    .btn-start { background: #fbbf24; color: #1a1a2e; }
    .btn-start:hover { background: #f59e0b; }
    .btn-bump { background: #34d399; color: #1a1a2e; }
    .btn-bump:hover { background: #10b981; }
    .btn-recall { background: transparent; border: 2px solid rgba(255,255,255,0.3); color: white; }
    .btn-recall:hover { background: rgba(255,255,255,0.1); }

    /* Settings Modal */
    .settings-overlay {
        position: fixed; inset: 0; background: rgba(0,0,0,0.5);
        display: flex; align-items: center; justify-content: center; z-index: 1000;
    }
    .settings-modal {
        background: #1e293b; border-radius: 1rem; padding: 2rem;
        min-width: 350px; color: white;
    }
    .settings-modal h3 { margin-bottom: 1.5rem; font-size: 1.25rem; }
    .setting-item { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .setting-value { color: #60a5fa; }
    .btn-deactivate { width: 100%; padding: 0.75rem; margin-top: 1rem; border: none; border-radius: 0.5rem; background: #ef4444; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
    .btn-close-settings { width: 100%; padding: 0.75rem; margin-top: 0.5rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 0.5rem; background: transparent; color: white; cursor: pointer; }