/* public/assets/css/style.css */
:root {
    --primary: #1e3a8a; /* blue-900 */
    --primary-light: #3b82f6; /* blue-500 */
    --secondary: #475569; /* slate-600 */
    --bg-color: #f3f4f6; /* gray-100 */
    --surface: #ffffff;
    --text-main: #1f2937; /* gray-800 */
    --text-muted: #6b7280; /* gray-500 */
    --border: #e5e7eb;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --radius: 6px;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-family); background-color: var(--bg-color); color: var(--text-main); line-height: 1.5; }

a { color: var(--primary-light); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--primary); }

/* Layout */
.app-container { display: flex; min-height: 100vh; flex-direction: column; }
.navbar { background-color: var(--primary); color: white; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow); }
.navbar-brand { font-size: 1.25rem; font-weight: 700; color: white; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; }
.navbar-nav { display: flex; gap: 1rem; list-style: none; }
.navbar-nav a { color: #e2e8f0; font-weight: 500; }
.navbar-nav a:hover { color: white; }

.main-content { flex: 1; padding: 2rem; max-width: 1200px; margin: 0 auto; width: 100%; }

/* Cards */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 1.5rem; }
.card-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); background: #f9fafb; font-weight: 600; color: var(--text-main); }
.card-body { padding: 1.5rem; }
.card-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: #f9fafb; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: var(--radius); font-weight: 500; cursor: pointer; transition: all 0.2s; border: 1px solid transparent; font-size: 0.875rem; text-align: center; }
.btn-primary { background-color: var(--primary); color: white; }
.btn-primary:hover { background-color: #1e40af; }
.btn-secondary { background-color: var(--secondary); color: white; }
.btn-secondary:hover { background-color: #334155; }
.btn-success { background-color: var(--success); color: white; }
.btn-success:hover { background-color: #059669; }
.btn-danger { background-color: var(--danger); color: white; }
.btn-danger:hover { background-color: #dc2626; }
.btn-outline { background-color: transparent; border-color: var(--border); color: var(--text-main); }
.btn-outline:hover { background-color: #f3f4f6; }
.btn-block { width: 100%; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1.125rem; }

/* Forms */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-main); }
.form-control { width: 100%; padding: 0.625rem; border: 1px solid var(--border); border-radius: var(--radius); font-family: inherit; font-size: 1rem; transition: border-color 0.2s; }
.form-control:focus { outline: none; border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }

/* Tables */
.table-responsive { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; text-align: left; }
.table th, .table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.table th { background-color: #f9fafb; font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background-color: #f9fafb; }

/* Alerts */
.alert { padding: 1rem; border-radius: var(--radius); margin-bottom: 1.5rem; border: 1px solid transparent; }
.alert-success { background-color: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.alert-danger { background-color: #fef2f2; color: #991b1b; border-color: #fecaca; }
.alert-info { background-color: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

/* Badges */
.badge { display: inline-block; padding: 0.25em 0.5em; font-size: 0.75em; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 9999px; }
.badge-primary { background-color: var(--primary); color: white; }
.badge-success { background-color: var(--success); color: white; }
.badge-warning { background-color: var(--warning); color: white; }

/* Grid */
.grid { display: grid; gap: 1.5rem; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px) {
    .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Utilities */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 0.875rem; }
.font-bold { font-weight: 700; }

/* Kiosk Specific */
.kiosk-btn { height: 120px; font-size: 1.5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: var(--shadow); transition: transform 0.2s; }
.kiosk-btn:active { transform: scale(0.98); }
.kiosk-prefix { font-size: 1rem; opacity: 0.8; margin-bottom: 0.5rem; }

/* TV Specific */
.tv-layout { height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: #000; color: white; }
.tv-header { background: var(--primary); padding: .7rem 2rem; display: flex; align-items: center; gap: 1.5rem; flex-shrink: 0; }
.tv-header-left { flex: 1; display: flex; align-items: center; gap: .85rem; min-width: 0; overflow: hidden; }
.tv-header-logo { flex: 0 0 auto; display: flex; align-items: center; }
.tv-header-logo img { height: 52px; max-width: 180px; object-fit: contain; display: block; }
.tv-header-name { font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; line-height: 1.15; }
.tv-header-clock { flex: 0 0 auto; font-size: clamp(1.2rem, 2vw, 1.9rem); font-weight: 700; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; letter-spacing: 1px; white-space: nowrap; }
.tv-body { flex: 1; display: flex; }
.tv-sidebar { width: 30%; background: #111; border-right: 2px solid #333; display: flex; flex-direction: column; }
.tv-main { width: 70%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #0a0a0a; position: relative; }
.tv-current-call { position: relative; z-index: 10; text-align: center; padding: 2rem; background: var(--primary); border-radius: 20px; width: 80%; box-shadow: 0 10px 25px rgba(30,58,138,0.5); border: 4px solid var(--primary-light); animation: pulse 2s infinite; }
.tv-ticket-number { font-size: 8rem; font-weight: 900; line-height: 1; margin: 1rem 0; color: #fff; }
.tv-window-name { font-size: 3rem; color: #e2e8f0; }
.tv-recent-list { flex: 1; overflow: hidden; padding: 1rem; }
.tv-recent-item { background: #222; margin-bottom: 1rem; padding: 1rem; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; border-left: 5px solid var(--primary-light); }
.tv-recent-ticket { font-size: 2.5rem; font-weight: bold; color: #fff; }
.tv-recent-window { font-size: 1.5rem; color: #cbd5e1; }
.tv-footer { background: var(--primary); padding: 0.5rem; overflow: hidden; white-space: nowrap; }
.tv-ticker { display: inline-block; padding-left: 100%; animation: ticker 20s linear infinite; font-size: 1.5rem; font-weight: 500; }

@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
    70% { box-shadow: 0 0 0 20px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* Modals */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); align-items: center; justify-content: center; }
.modal.show { display: flex; }
.modal-content { background-color: var(--surface); margin: auto; padding: 2rem; border: 1px solid var(--border); width: 100%; max-width: 500px; border-radius: var(--radius); box-shadow: var(--shadow); position: relative; }
.modal-close { color: var(--text-muted); float: right; font-size: 28px; font-weight: bold; cursor: pointer; position: absolute; right: 1rem; top: 0.5rem; }
.modal-close:hover { color: var(--text-main); }

/* Dark Mode */
[data-theme="dark"] {
    --bg-color: #0f172a;
    --surface: #1e293b;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --border: #334155;
}
[data-theme="dark"] body { background-color: var(--bg-color); color: var(--text-main); }
[data-theme="dark"] .card { background: var(--surface); }
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer { background: #263548; }
[data-theme="dark"] .table th { background-color: #263548; color: var(--text-muted); }
[data-theme="dark"] .table tbody tr:hover { background-color: #263548; }
[data-theme="dark"] .form-control { background: #263548; color: var(--text-main); border-color: var(--border); }
[data-theme="dark"] .form-control:focus { border-color: var(--primary-light); }
[data-theme="dark"] .btn-outline { border-color: var(--border); color: var(--text-main); }
[data-theme="dark"] .btn-outline:hover { background-color: #263548; }
[data-theme="dark"] .modal-content { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .admin-sidebar { background-color: #1e293b !important; }
[data-theme="dark"] .admin-nav-item:hover,
[data-theme="dark"] .admin-nav-item.active { background-color: #263548; }
[data-theme="dark"] select.form-control option { background: #1e293b; }
[data-theme="dark"] .alert-info { background-color: #1e3a5f; color: #93c5fd; border-color: #1d4ed8; }
[data-theme="dark"] .alert-success { background-color: #052e16; color: #86efac; border-color: #166534; }
[data-theme="dark"] .alert-danger { background-color: #450a0a; color: #fca5a5; border-color: #991b1b; }