/* Identitas visual Angkringan Ruang Biru. */
.printer-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 15px 0; }
.page-heading .printer-buttons { margin: 0; justify-content: flex-end; }
.printer-device { display: flex; align-items: center; gap: 14px; padding: 16px; background: #f4f8ff; border: 1px solid #e1ebfa; border-radius: 10px; margin-bottom: 17px; }
.printer-device strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.printer-device small { margin-top: 4px; font-size: 10px; }
.printer-device-icon { font-size: 29px; color: #2563eb; }
.printer-advanced { margin: 20px 0; padding: 14px; border: 1px solid #e1ebfa; border-radius: 10px; }
.printer-advanced summary { cursor: pointer; font-size: 11px; color: #567cae; }
.printer-advanced p { margin: 12px 0 0; }
.printer-steps { padding-left: 20px; color: #5d7da4; font-size: 12px; }
.printer-steps li { padding: 6px 0; }
.printer-panel #printer-channel { font-size: 10px; }
.sidebar nav { overflow-y: auto; min-height: 0; }
.sidebar-bottom { flex-shrink: 0; }
@media (max-width: 760px) { .page-heading .printer-buttons { justify-content: flex-start; } .printer-panel { min-width: 0; } }
:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --navy: #153e75;
    --blue-soft: #eff6ff;
    --bg: #f5f8ff;
    --ink: #193354;
    --muted: #71849d;
    --line: #e3ebf7;
    --green: var(--primary);
    --green-dark: var(--primary-dark);
    --mint: #eaf2ff;
}
.brand { gap: 10px; letter-spacing: -.7px; }
.brand-icon { width: 43px; height: 46px; flex-shrink: 0; font-size: 18px; letter-spacing: -1px; background: var(--primary); box-shadow: 0 5px 14px #2563eb18; }
.brand .brand-wordmark { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand-wordmark > span { font-size: 22px; font-weight: 800; white-space: nowrap; line-height: 1.1; color: var(--navy); }
.brand .brand-wordmark small { font-size: 8px; margin: 0; letter-spacing: 2px; color: #6386b5; }
.brand-logo-frame { display: grid; place-items: center; width: 44px; height: 48px; flex-shrink: 0; background: white; border: 1px solid var(--line); border-radius: 11px; padding: 4px; }
.brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.receipt-brand-logo { display: block; width: auto; height: auto; max-width: 150px; max-height: 110px; object-fit: contain; margin: 0 auto 16px; }
.receipt-logo > span { display: block; font: 600 8px/1.7 'DM Sans', sans-serif; letter-spacing: 2.4px; }
.logo-upload-box { display: flex; align-items: flex-start; gap: 18px; padding: 18px; border-radius: 12px; border: 1px dashed #bdd2f4; background: #f6f9ff; margin: 20px 0; }
.logo-upload-box label { margin-top: 0; }
.logo-upload-box input[type="file"] { font-size: 11px; padding: 8px; }
.logo-upload-box p { margin-bottom: 0; line-height: 1.7; }
.logo-preview { width: 88px; height: 88px; flex-shrink: 0; display: grid; place-items: center; background: white; border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.logo-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.branding-note { padding: 24px; background: var(--blue-soft); border-radius: 12px; border: 1px solid #dce9ff; margin-top: 30px; }
.branding-note p { font-size: 12px; color: #6987af; }
.palette { display: flex; gap: 9px; }
.palette span { width: 28px; height: 28px; border-radius: 50%; background: #2563eb; border: 1px solid #dbe6f7; }
.palette span:nth-child(2) { background: #153e75; }
.palette span:nth-child(3) { background: #dbeafe; }
.palette span:nth-child(4) { background: #fff; }
@media screen {
    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: #93b8ff; }
    .sidebar { background: #fff; border-color: #e4ecf9; }
    .nav-label { color: #91a4bf; }
    nav a { color: #7186a3; }
    nav a.active { background: #eaf2ff; color: #2563eb; box-shadow: inset 3px 0 0 #2563eb; }
    nav a:hover { background: #f1f6ff; }
    .sidebar-bottom small, .footer { color: #8fa4bf; }
    .store-mark { background: #eff6ff; color: #2563eb; }
    .topbar { background: #ffffffed; }
    .topbar-location { color: #7089aa; }
    .user-chip > span { background: #eaf2ff; color: #356abb; }
    .shift-pill.on { background: #edf5ff; color: #356ec4; border-color: #dce9fc; }
    .eyebrow { color: #6a8bb7; }
    .welcome-banner { background: linear-gradient(110deg, #eaf3ff 0%, #f5f9ff 65%, #dceaff 100%); border-color: #dbe8fc; }
    .welcome-banner h2 { color: var(--navy); }
    .welcome-banner h2 span { color: #91b8f9; }
    .welcome-banner p { color: #6c8bb2; }
    .stat > div { color: #7a90ad; }
    .stat small { color: #91a2bb; }
    .stat-icon { background: #eef5ff; color: #5485d2; }
    .stat.accent { background: #edf4ff; border-color: #d7e6fd; }
    .bar-track { background: repeating-linear-gradient(to top, transparent 0px, transparent 48px, #f0f5fd 49px, #f0f5fd 50px); }
    .bar { background: #cddffc; }
    .bar.today { background: #2563eb; }
    .quick-panel { background: #eff5ff; border-color: #e0eafe; }
    .quick-panel h2 { color: var(--navy); }
    .quick-panel p { color: #7891b5; }
    .quick-links { border-color: #dce7f9; color: #6485b2; }
    th { background: #f5f8fe; color: #8094b0; }
    td { color: #637a99; border-color: #edf2fa; }
    td small { color: #8fa3bf; }
    .order-number { color: #3c6aad; }
    .badge { background: #f0f4fc; color: #7b90ac; }
    .secondary:hover, button.secondary:hover { background: #f0f6ff; }
    .badge.done { background: #ecf8f1; color: #3f8261; }
    .positive { color: #36815c; }
    input, select, textarea { color: #294c79; border-color: #dce6f4; }
    input::placeholder, textarea::placeholder { color: #9aacc3; }
    label { color: #617d9f; }
    .checkbox input { accent-color: #2563eb; }
    .explanation { background: #edf5ff; }
    .menu-card:hover { border-color: #a9c8fb; box-shadow: 0 8px 24px #2563eb09; }
    .menu-image { background: #edf3fd; }
    .menu-image.tone-1 { background: #eaf1fc; }
    .menu-image.tone-2 { background: #e5f0ff; }
    .menu-image.tone-3 { background: #f1f5fe; }
    .menu-card-info small { color: #91a7c4; }
    .category { color: #7e95b5; border-color: #dce6f5; }
    .category.active { color: white; }
    .cart-meta, .cart-totals, .cart-totals .grand-total { border-color: #dce7f7; }
    .cart-item { border-color: #edf2fa; }
    .cart-totals > div { color: #8098b8; }
    .cart-totals strong { color: #3765a2; }
    .cart-totals .grand-total { color: var(--navy); }
    .cart-empty { color: #8fa7c4; }
    .cart-empty > span { color: #aac5eb; }
    .quantity-controls button { color: #2563eb; background: #f2f7ff; border-color: #d5e4fb; }
    .quick-cash button { background: #f2f7ff; border-color: #dce8fa; color: #5b82b6; }
    .change-row { color: #7d97b7; }
    .variant-option { background: #f5f8ff; }
    .receipt-header, .receipt-items, .receipt-thanks, .receipt-total { border-color: #d5e2f5; }
    .receipt-thanks { color: #5d82b3; }
    .login-page { background: white; }
    .login-story { background: radial-gradient(ellipse at 20% 90%, #c8ddff 0%, transparent 55%), linear-gradient(135deg, #edf5ff, #deecff); }
    .login-story h1 { color: #153e75; }
    .login-story p { color: #6f8fb8; }
    .login-story > small { color: #80a0c8; }
    .mini-receipt { box-shadow: 0 15px 35px #2563eb17; }
    .mini-receipt > span { color: #4a76b3; }
    .mini-receipt hr { border-color: #d3e0f4; }
    .illustration-orbit { color: #9bbff5; }
}
@media (max-width: 1250px) {
    .sidebar .brand { gap: 7px; }
    .sidebar .brand-icon, .sidebar .brand-logo-frame { width: 36px; height: 40px; font-size: 15px; }
    .sidebar .brand-wordmark > span { font-size: 19px; }
    .sidebar .brand-wordmark small { font-size: 7px; letter-spacing: 1.8px; }
}
@media (max-width: 1000px) {
    .sidebar .brand-wordmark > span { font-size: 16px; }
    .sidebar .brand-wordmark small { font-size: 6px; }
}
@media (max-width: 760px) {
    .sidebar .brand-wordmark > span { font-size: 23px; }
    .sidebar .brand-wordmark small { font-size: 8px; }
    .logo-upload-box { flex-direction: column; }
    .logo-upload-box .grow { width: 100%; }
    .branding-note { padding: 20px; }
}
@media print {
    .receipt-brand-logo { max-width: 34mm; max-height: 24mm; margin: 0 auto 3mm; filter: grayscale(1) contrast(1.2); }
    .receipt-logo { color: #000; }
    .receipt-header h2 { overflow-wrap: anywhere; }
    .receipt-logo > span { color: #000; font-family: monospace; font-size: 7px; }
}