:root { --primary: #103D2B; --primary-dark: #082C1D; --secondary: #50615A; --success: #159355; --warning: #F5B82F; --danger: #D95858; --info: #4978A0; --light-bg: #F5F7F8; --card-bg: #fff; --border: #E8ECEF; --text: #101C24; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--light-bg); color: var(--text); font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
a { text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #66B18C; outline-offset: 3px; }
[hidden] { display: none !important; }
.ui-icon { width: 22px; height: 22px; flex-shrink: 0; vertical-align: middle; }
.admin-sidebar { position: fixed; inset: 0 auto 0 0; width: 244px; padding: 26px 16px 18px; display: flex; flex-direction: column; background: linear-gradient(140deg,#082E20,#032317); color: #fff; z-index: 200; }
.admin-brand { display: flex; align-items: center; gap: 16px; color: white; padding: 0 12px 28px; }
.admin-brand>.ui-icon { width: 38px; height: 38px; }
.admin-brand strong { display: block; font-size: 25px; letter-spacing: -.5px; }
.admin-brand small { display: block; color: #D8E7DF; font-size: 13px; }
.admin-brand-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 12px; background: white; padding: 4px; }
.sidebar-links { display: flex; flex-direction: column; gap: 7px; overflow-y: auto; }
.sidebar-links a, .sidebar-logout { color: #EDF5F0; display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.sidebar-links a.active, .sidebar-links a:hover { background: #FFFFFF15; }
.sidebar-links a.active { font-weight: 600; }
.sidebar-count { margin-left: auto; background: #FFCF23; color: #143528; min-width: 24px; padding: 2px 7px; border-radius: 20px; text-align: center; font-weight: 700; font-size: 12px; }
.sidebar-bottom { margin-top: auto; padding-top: 22px; }
.sidebar-account { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #FFFFFF18; border-radius: 14px; margin-bottom: 14px; }
.sidebar-account strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.sidebar-account small { display: block; font-size: 12px; color: #BCD7CA; }
.admin-avatar { width: 38px; height: 38px; flex-shrink: 0; display: inline-grid; place-items: center; border-radius: 50%; background: linear-gradient(140deg,#18563C,#052318); color: white; font-size: 17px; }
.sidebar-account .admin-avatar { background: #1D6847; }
.admin-workspace { margin-left: 244px; min-height: 100vh; }
.admin-topbar { min-height: 72px; background: #FFFFFFF5; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 18px; padding: 14px 26px; }
.admin-search { display: flex; align-items: center; gap: 14px; background: #EFF2F5; border-radius: 16px; padding: 10px 16px; flex: 1; max-width: 580px; margin: 0; }
.admin-search input { background: transparent; border: 0; padding: 0; min-height: 22px; width: 100%; outline-offset: 7px; font-size: 13px; }
.admin-search input::placeholder { color: #7A8592; }
.topbar-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.ui-icon-button { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; background: white; border: 1px solid var(--border); border-radius: 50%; color: var(--text); }
.notification-dot { position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #E84D53; }
.admin-language { display: flex; align-items: center; gap: 9px; padding: 10px 16px; background: #EFF2F5; border-radius: 14px; font-size: 13px; font-weight: 600; }
.lv-flag { width: 24px; height: 17px; border-radius: 3px; background: linear-gradient(#A20E2A 40%,white 40%,white 60%,#A20E2A 60%); }
.admin-user { display: flex; align-items: center; gap: 10px; }
.admin-user strong, .admin-user small { display: block; white-space: nowrap; }
.admin-user strong { font-size: 13px; }
.admin-user small { font-size: 11px; color: #697583; }
.sidebar-toggle { display: none; }
.admin-content { max-width: 1600px; margin: auto; padding: 26px; }
.admin-content>.container { max-width: none; padding: 0; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 24px; }
.page-heading h1 { font-size: clamp(24px,2.5vw,32px); font-weight: 750; letter-spacing: -.7px; margin: 0 0 4px; }
.page-heading p { color: #6A7685; font-size: 15px; }
.today-chip { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: white; border: 1px solid var(--border); border-radius: 14px; min-width: 170px; }
.today-chip strong, .today-chip small { display: block; font-size: 12px; }
.today-chip small { margin-top: 2px; font-weight: 400; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin-bottom: 20px; }
.metric-card { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 20px; box-shadow: 0 5px 18px #102C1D04; overflow: hidden; }
.metric-top { display: flex; align-items: center; gap: 16px; }
.metric-icon { width: 50px; height: 50px; background: #159355; color: white; display: grid; place-items: center; border-radius: 50%; }
.metric-icon.amber { background: #FFC32C; }.metric-icon.orange { background: #FF8B35; }.metric-icon.blue { background: #4298F2; }
.metric-value { display: block; font-size: 26px; font-weight: 750; line-height: 1.25; }
.metric-label { display: block; margin-top: 4px; font-size: 12px; color: #657081; }
.metric-spark { width: 100%; height: 30px; margin-top: 14px; display: block; }
.metric-foot { color: #697583; font-size: 11px; margin-top: 12px; }
.action-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin-bottom: 22px; }
.action-tile { overflow: hidden; background: white; border: 1px solid var(--border); border-radius: 16px; color: var(--text); box-shadow: 0 4px 18px #102C1D04; }
.action-tile>img, .action-cover { display: block; width: 100%; height: 78px; object-fit: cover; background: linear-gradient(120deg,#153E2D,#667D65); }
.action-tile-body { display: flex; gap: 12px; padding: 15px; align-items: center; }
.action-tile-body>span:first-child { width: 42px; height: 42px; background: var(--primary); color: white; display: grid; place-items: center; border-radius: 12px; flex-shrink: 0; }
.action-tile-body strong { font-size: 15px; display: block; }.action-tile-body small { font-size: 11px; color: #697583; display: block; margin-top: 3px; }.action-tile-body>.ui-icon { margin-left: auto; width: 16px; }
.overview-grid { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(300px,1fr); gap: 20px; }
.ui-panel, .admin-content .card, .admin-content .dashboard-card, .admin-content .filters-card, .admin-content .table-container { background: white; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 5px 18px #102C1D04; }
.ui-panel { padding: 18px; min-width: 0; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }.panel-heading h2 { font-size: 17px; display: flex; align-items: center; gap: 10px; margin: 0; }
.admin-content .btn, .ui-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 9px 14px; background: #EDF1F4; color: #233A2E; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.ui-button.primary, .admin-content .btn-success { background: var(--primary); color: white; }.ui-button.outline, .admin-content .btn-info { border-color: #BDD0C5; color: var(--primary); background: white; }.ui-button.warning, .admin-content .btn-warning { background: #FFF1CD; color: #806014; }.ui-button.danger, .admin-content .btn-danger { background: #FCE7E7; color: #AB3535; }
.ui-button .ui-icon { width: 16px; height: 16px; }.ui-button:hover, .btn:hover { filter: brightness(.96); transform: none; }
.table-scroll, .admin-content .table-container { overflow-x: auto; }
.admin-content table { width: 100%; border-collapse: collapse; font-size: 12px; }.admin-content th { color: #697583; font-weight: 500; background: #F7F9FA; padding: 13px 12px; text-align: left; white-space: nowrap; }.admin-content td { padding: 13px 12px; border-bottom: 1px solid #EFF2F4; vertical-align: middle; }.admin-content tbody tr:last-child td { border-bottom: 0; }
.admin-content .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.admin-content .status-pending { background: #FCE5E5; color: #BE4747; }.admin-content .status-confirmed { background: #E2ECFA; color: #406B9E; }.admin-content .status-preparing { background: #FFF0CC; color: #966D13; }.admin-content .status-ready, .admin-content .status-delivered { background: #DFF2E7; color: #237448; }.admin-content .status-cancelled { background: #F8DFDF; color: #9D3C3C; }
.table-food { display: flex; align-items: center; gap: 10px; min-width: 125px; }.table-food img { width: 38px; height: 38px; object-fit: cover; border-radius: 9px; }.table-food strong, .table-food small { display: block; }.table-food small { color: #697583; margin-top: 2px; }
.activity-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #EFF2F4; }.activity-row:last-child { border: 0; }.activity-circle { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: #E7F3EC; color: #16834B; display: grid; place-items: center; }.activity-row>div { flex: 1; }.activity-row strong { display: block; font-size: 13px; }.activity-row p { font-size: 12px; color: #697583; }.activity-row time { color: #697583; font-size: 11px; }
.empty-state, .no-orders { padding: 36px 20px; text-align: center; color: #77828E; }.empty-state .ui-icon { width: 32px; height: 32px; margin-bottom: 12px; }
.charts-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; margin-bottom: 20px; }.status-chart { display: flex; align-items: center; gap: 25px; }.donut { width: 145px; height: 145px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; }.donut>span { width: 98px; height: 98px; display: grid; align-content: center; text-align: center; background: white; border-radius: 50%; }.donut strong { font-size: 26px; }.donut small { color: #697583; font-size: 11px; }.chart-legend { flex: 1; }.legend-row { display: flex; align-items: center; gap: 8px; margin: 9px 0; font-size: 12px; }.legend-row strong { margin-left: auto; }.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.hour-chart { height: 165px; display: flex; align-items: flex-end; gap: 7px; border-bottom: 1px solid var(--border); padding-top: 15px; }.hour-column { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }.hour-bar { width: 70%; background: linear-gradient(#499BF5,#92C3F7); border-radius: 3px 3px 0 0; min-height: 2px; }.hour-column small { color: #7B8794; font-size: 9px; }.chart-note { font-size: 11px; color: #77828E; margin-top: 10px; }
.tables-mini { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.mini-table { background: #F3F5F6; padding: 12px 8px; border-radius: 12px; text-align: center; }.mini-table.busy { background: #E5F3EB; color: #226C47; }.mini-table strong { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; margin: 0 auto 5px; }.mini-table small { display: block; font-size: 11px; }
.admin-content .filters-card { padding: 18px; margin-bottom: 20px; }.admin-content .filters-grid { gap: 16px; }.admin-content input:not([type=checkbox]):not([type=radio]):not([type=color]), .admin-content select, .admin-content textarea { border: 1px solid #DDE4E8; border-radius: 9px; padding: 10px 12px; background: white; min-height: 40px; color: var(--text); max-width: 100%; }.admin-content label { font-size: 12px; color: #53616F; font-weight: 600; }
.admin-content .modal, .admin-content .qr-modal { z-index: 500; background: #082C1D80; backdrop-filter: blur(3px); }.admin-content .modal-content, .admin-content .qr-content { border-radius: 20px; box-shadow: 0 20px 70px #082C1D30; }.admin-content .modal-header { background: #F6F8F7; border-bottom: 1px solid var(--border); color: var(--text); }.admin-content .modal-header h2 { font-size: 20px !important; }.admin-content .close-modal { background: transparent; color: #697583; }
.admin-content .stats-grid { gap: 16px; grid-template-columns: repeat(4,1fr); margin-bottom: 20px; }.admin-content .stat-card { border: 1px solid var(--border); border-radius: 16px; box-shadow: none; padding: 18px; background: white; }.admin-content .stat-value { font-size: 26px; color: var(--text); }.admin-content .stat-label { font-size: 12px; color: #697583; }.admin-content .dashboard { gap: 20px; }.admin-content .history-item { border-bottom: 1px solid var(--border); box-shadow: none; margin: 0; padding: 20px; }.admin-content .history-icon { background: #E8F3ED; color: var(--primary); }.admin-content .history-title { font-size: 14px; }.admin-content .history-details, .admin-content .history-time { font-size: 12px; }
.admin-content .user-stats, .admin-content .menu-stats { box-shadow: none; border: 1px solid var(--border); border-radius: 16px; }.admin-content .card h2 { font-size: 18px; }.admin-content .table-item { border: 1px solid var(--border); border-radius: 14px; box-shadow: none; }.admin-content .table-info { min-width: 0; }.admin-content .table-details { overflow-wrap: anywhere; }.admin-content .welcome-banner, .admin-content .admin-nav { display: none; }
.readonly-notice { padding: 14px 18px; background: #E8F2EC; color: #285C3F; border-radius: 12px; margin-bottom: 20px; font-size: 13px; }
.order-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }.order-tabs { display: flex; gap: 8px; flex-wrap: wrap; }.order-tab { min-height: 40px; padding: 10px 16px; border: 0; border-radius: 10px; background: #EDEFF3; color: #53616F; cursor: pointer; font-size: 12px; font-weight: 600; }.order-tab.active { background: var(--primary); color: white; }.connection-status { font-size: 12px; color: #237448; }.connection-status.error { color: #A44444; }
.orders-board { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr)); gap: 16px; }.staff-order { background: white; border: 1px solid var(--border); border-left: 3px solid #D2E1D8; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 14px #102C1D04; }.staff-order.pending { border-left-color: #F16B71; }.staff-order.preparing { border-left-color: #F1BD40; }.staff-order.ready { border-left-color: #46B67B; }.staff-order-head { display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: #F6F8F7; flex-wrap: wrap; font-size: 13px; }.pending .staff-order-head { background: #FFF2F3; }.preparing .staff-order-head { background: #FFFAEE; }.ready .staff-order-head { background: #EDF8F1; }.staff-order-head strong { font-size: 16px; }.staff-order-head time { margin-left: auto; color: #697583; font-size: 12px; }.staff-order-items { padding: 6px 16px; }.staff-food { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #EFF2F4; }.staff-food:last-child { border: 0; }.staff-food img { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; }.staff-food>div { flex: 1; min-width: 0; }.staff-food strong { display: block; font-size: 13px; }.staff-food p { color: #697583; font-size: 11px; }.staff-food>span { font-size: 12px; font-weight: 700; }.staff-order-actions { display: flex; gap: 8px; padding: 10px 16px 16px; }.staff-order-actions form { flex: 1; }.staff-order-actions form button { width: 100%; }.staff-order-actions .ui-button { min-height: 40px; }.staff-order-note { margin: 0 16px 10px; padding: 10px; border-radius: 8px; background: #FFF4DD; font-size: 12px; }
.order-filter-details { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; }.order-filter-details summary { cursor: pointer; font-weight: 600; color: #4E5F56; font-size: 12px; }.order-filter-details .filters-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(4,1fr); }.filter-actions { display: flex; gap: 10px; margin-top: 16px; align-items: center; flex-wrap: wrap; }.filter-actions label { display: inline-flex; align-items: center; gap: 8px; }.orders-error { background: #FFF0E6; color: #955425; padding: 14px; border-radius: 12px; margin-bottom: 16px; }
.order-dialog { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%,-50%); margin: 0; border: 0; border-radius: 20px; padding: 24px; width: calc(100% - 32px); max-width: 620px; max-height: 85dvh; overflow: auto; }.order-dialog::backdrop { background: #082C1D80; backdrop-filter: blur(3px); }.order-dialog .dialog-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }.order-dialog h2 { font-size: 20px; }.order-dialog .ui-icon-button { cursor: pointer; }.order-dialog label { display: block; margin: 12px 0 6px; }.order-dialog select, .order-dialog textarea { width: 100%; }.order-dialog .dialog-actions { display: flex; gap: 12px; margin-top: 18px; }
.admin-content .appearance-page { padding: 0; max-width: none; }.admin-content .appearance-page>.back-link, .admin-content .appearance-page>h1, .admin-content .appearance-page>.page-intro { display: none; }.admin-content .appearance-layout { grid-template-columns: 1.3fr 1fr; }
@media(min-width:1500px) { .admin-sidebar { width: 258px; }.admin-workspace { margin-left: 258px; }.admin-content { padding: 26px 28px; } }
@media(max-width:1150px) { .admin-sidebar { width: 218px; padding-left: 12px; padding-right: 12px; }.admin-workspace { margin-left: 218px; }.admin-content { padding: 22px; }.admin-topbar { padding: 14px 22px; }.admin-user>span:last-child { display: none; }.overview-grid { grid-template-columns: minmax(0,1fr); }.metric-grid { gap: 12px; }.metric-card { padding: 16px; }.metric-top { gap: 10px; }.metric-icon { width: 40px; height: 40px; }.metric-value { font-size: 23px; }.action-grid { gap: 12px; }.action-tile-body { padding: 12px; }.action-tile-body>span:first-child { display: none; }.charts-grid { grid-template-columns: 1fr; } }
@media(max-width:800px) { .admin-sidebar { transform: translateX(-100%); transition: transform .2s ease; width: 244px; }.sidebar-open .admin-sidebar { transform: translateX(0); }.admin-overlay { position: fixed; inset: 0; background: #082C1D80; z-index: 190; }.admin-workspace { margin-left: 0; }.sidebar-toggle { display: inline-grid; }.admin-content { padding: 20px 16px; }.admin-topbar { padding: 12px 16px; gap: 12px; }.topbar-actions { gap: 10px; }.admin-language { display: none; }.admin-search { max-width: none; }.metric-grid { grid-template-columns: repeat(2,1fr); }.action-grid { grid-template-columns: repeat(2,1fr); }.page-heading { align-items: flex-start; }.page-heading p { font-size: 13px; }.today-chip { min-width: auto; padding: 10px; }.admin-content .stats-grid { grid-template-columns: repeat(2,1fr); }.order-filter-details .filters-grid { grid-template-columns: repeat(2,1fr); }.admin-content .appearance-layout { grid-template-columns: 1fr; } }
@media(max-width:480px) { .admin-user { display: none; }.admin-search { padding: 10px; gap: 8px; }.admin-search input { font-size: 11px; }.today-chip { display: none; }.metric-card { padding: 14px; }.metric-value { font-size: 22px; }.metric-label { font-size: 11px; }.metric-icon { width: 36px; height: 36px; }.metric-icon .ui-icon { width: 18px; }.action-tile-body strong { font-size: 13px; }.action-tile-body small { font-size: 10px; }.ui-panel { padding: 14px; }.panel-heading h2 { font-size: 15px; }.status-chart { gap: 16px; }.donut { width: 120px; height: 120px; }.donut>span { width: 82px; height: 82px; }.staff-order-head { gap: 10px; }.order-dialog { padding: 18px; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.sidebar-links a, .sidebar-logout { font-size: 15px; }
.admin-content table { font-size: 14px; }
.metric-label { font-size: 13px; }
.action-tile-body strong { font-size: 16px; }
.action-tile-body small { font-size: 12px; }
.staff-food strong { font-size: 14px; }
.staff-food p, .staff-food>span, .staff-order-note { font-size: 12px; }
.admin-content .table-details>small { display: none; }
.category-editor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end; padding: 16px 0; }
.category-editor label { display: grid; gap: 6px; font-size: 13px; }
.category-editor input { width: 100%; min-width: 0; }
.category-management-list { display: grid; gap: 10px; margin-top: 16px; }
.category-management-list details { border: 1px solid #e5ebe8; border-radius: 12px; padding: 12px; }
.category-management-list summary { cursor: pointer; font-weight: 600; }
@media (max-width: 800px) { .category-editor { grid-template-columns: 1fr; } }