/* CSS Variables for Theming */
:root {
    /* Default Theme (Warm Indigo) */
    --primary-color: #4f46e5; --primary-dark-color: #4338ca; --secondary-color: #e0e7ff; --secondary-dark-color: #c7d2fe; --accent-color: #f59e0b; --bg-color: #f3f4f6; --card-bg-color: #ffffff; --text-color: #374151; --header-text-color: #ffffff; --border-color: #e5e7eb; --input-bg-color: #fcfdfe; --success-color: #10b981; --danger-color: #ef4444; --info-color: #3b82f6; --warning-color: #f59e0b;
}
/* Other Themes */
.theme-blue-grey { --primary-color: #3b82f6; --primary-dark-color: #2563eb; --secondary-color: #e0f2fe; --secondary-dark-color: #bfdbfe; --text-color: #475569; --border-color: #e2e8f0; }
.theme-green-gold { --primary-color: #16a34a; --primary-dark-color: #15803d; --secondary-color: #dcfce7; --secondary-dark-color: #a7f3d0; --text-color: #1f2937; --border-color: #d1fae5; }
.theme-red-black { --primary-color: #dc2626; --primary-dark-color: #b91c1c; --secondary-color: #fee2e2; --secondary-dark-color: #fecaca; --bg-color: #1f2937; --card-bg-color: #374151; --text-color: #f9fafb; --header-text-color: #f9fafb; --border-color: #4b5563; }
.theme-purple-teal { --primary-color: #7c3aed; --primary-dark-color: #6d28d9; --secondary-color: #ede9fe; --secondary-dark-color: #ddd6fe; --text-color: #4c1d95; --border-color: #e0e7ff; }

/* Global Styling */
html, body { height: 100%; margin: 0; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-color); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; color: var(--text-color); padding: 20px; box-sizing: border-box; }
.container { width: 100%; max-width: 1200px; background-color: var(--card-bg-color); border-radius: 15px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); position: relative; padding: 2rem; display: flex; flex-direction: column; height: 100%; overflow: hidden; transition: height 0.3s ease; }
#main-app-header { background-color: var(--primary-color); color: var(--header-text-color); padding: 1.5rem 2rem; border-radius: 10px; margin-bottom: 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.3s ease; flex-shrink: 0; }
#main-app-header.header-public-tv-style { padding: 1rem 1.5rem; margin-bottom: 0.2rem; flex-direction: row; justify-content: space-between; align-items: center; }
#main-app-header.header-public-tv-style #company-logo-default, #main-app-header.header-public-tv-style #default-header-title, #main-app-header.header-public-tv-style #default-header-tagline { display: none; }
#main-app-header.header-public-tv-style #public-tv-header-content { display: flex; width: 100%; align-items: center; }
.btn-primary, .btn-secondary, .btn-danger { padding: 0.75rem 1.5rem; border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease, transform 0.1s ease; font-weight: 600; cursor: pointer; }
.btn-primary { background-color: var(--primary-color); color: var(--header-text-color); } .btn-primary:hover { background-color: var(--primary-dark-color); transform: translateY(-1px); }
.btn-secondary { background-color: var(--secondary-dark-color); color: var(--text-color); } .btn-secondary:hover { background-color: var(--secondary-color); transform: translateY(-1px); }
.btn-danger { background-color: var(--danger-color); color: white; } .btn-danger:hover { background-color: #b91c1c; transform: translateY(-1px); }
.input-field { width: 100%; padding: 0.75rem; border-width: 2px; border-radius: 0.5rem; transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; border-color: var(--border-color); background-color: var(--input-bg-color); color: var(--text-color); }
.input-field:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.3); }
.card { background-color: var(--card-bg-color); padding: 1.5rem; border-radius: 0.75rem; border: 1px solid var(--border-color); }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background-color: var(--card-bg-color); padding: 30px; border-radius: 10px; max-width: 500px; width: 90%; text-align: center; position: relative; color: var(--text-color); }
.close-button { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 1.5rem; cursor: pointer; }
.ticket-card { padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--border-color); display: flex; flex-direction: column; justify-content: space-between; }
.ticket-card.waiting { background-color: var(--secondary-color); border-color: var(--warning-color); }
.ticket-card.requeued { background-color: #ffedd5; border: 2px solid #f97316; }
.ticket-card.called { background-color: var(--secondary-color); border-color: var(--info-color); }
.ticket-card.serving { background-color: var(--secondary-color); border-color: var(--success-color); }
.status-badge { padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; color: white; }
.status-waiting { background-color: var(--warning-color); }
.status-called { background-color: var(--info-color); }
.status-serving { background-color: var(--success-color); }
.status-no_show { background-color: var(--danger-color); }
.status-cancelled { background-color: var(--primary-color); }
.status-completed { background-color: var(--border-color); color: var(--text-color); }
#public-tv-display-view > .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; flex-grow: 1; height: 100%; }
#public-tv-display-view .card { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#now-serving-list { display: grid; grid-template-columns: 1fr; gap: 0.75rem; flex-grow: 1; overflow-y: auto; }
@media (min-width: 768px) { #now-serving-list { grid-template-columns: 1fr 1fr; } }
#waiting-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.75rem; align-content: start; }
#public-tv-display-view .public-ticket-card { background-color: var(--success-color); color: white; padding: 0.75rem; border-radius: 0.5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
#public-tv-display-view .public-ticket-card p { font-size: 2.2vw; line-height: 1.1; font-weight: 700; margin: 0; }
#now-serving-list .card h4 { font-size: 1.5vw; margin-bottom: 0.5rem; text-align: center; color: white; }
#now-serving-list .card { background-color: #312e81; }
#app-container { flex-grow: 1; overflow-y: auto; padding-bottom: 1rem; }