/* Offline business-workspace skin. System fonts only; no remote assets. */
:root {
    --primary: #173e68; --success: #087e79; --warning: #a8610a;
    --danger: #b42332; --gift: #68518a; --bg: #f2f5f8; --card-bg: #fff;
    --text: #203149; --text-muted: #586b80; --border: #d9e2eb;
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a, [role="button"] { touch-action: manipulation; }
button:disabled, [aria-disabled="true"] { opacity: .58; cursor: wait; }
:focus-visible { outline: 3px solid #07958a !important; outline-offset: 3px; }
a { color: var(--primary); }
.navbar { min-height: 64px; padding: 12px 32px; background: #173650; color: #fff; box-shadow: none; border-bottom: 3px solid #0c8c85; }
.navbar-brand { font-size: 17px; font-weight: 600; letter-spacing: .2px; }
.navbar .nav-link, .navbar #emp-manage-link { color: #e0edf6 !important; }
.navbar .btn { background: transparent; color: #edf5fb; border: 1px solid #698096; }
.navbar-user { font-size: 14px; }
.main-content { max-width: 1480px; margin: 24px auto; padding: 0 32px; }
.ledger-employees .main-content { max-width: 1200px; }
.workspace-header, .page-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.workspace-header h1 { font-size: 28px; font-weight: 650; line-height: 1.35; }
.eyebrow { font-size: 11px; font-weight: 650; color: #087e79; letter-spacing: 1px; margin-bottom: 8px; }
.page-desc { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.workspace-link { border: 1px solid var(--border); background: white; padding: 8px 16px; border-radius: 6px; text-decoration: none; font-size: 13px; white-space: nowrap; }
.stats-grid { gap: 16px; margin-bottom: 24px; }
.stat-card { border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; box-shadow: none; border-top: 3px solid #b6c9d9; }
.stat-card:nth-child(even) { border-top-color: #0c8c85; }
.stat-label { color: var(--text-muted); font-size: 12px; }
.stat-value { font-size: 28px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.5px; color: var(--primary); }
.btn { min-height: 38px; border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; transition: background-color .15s; }
.btn-sm { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: #24527b; opacity: 1; }
.btn-success { background: var(--success); }
.btn-outline, .date-filter .btn:not(.btn-primary):not(.btn-success) { background: #fff; color: var(--primary); border: 1px solid var(--border); }
.btn-warning { background: #fff4df; color: #87500a; border: 1px solid #ead4ac; }
.btn-danger { background: #fff0f1; color: var(--danger); border: 1px solid #ecc6cb; }
.date-filter { border: 1px solid var(--border); border-radius: 8px; padding: 16px; gap: 12px; margin-bottom: 12px; }
.date-filter label { font-size: 13px; }
.query-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px; border: 1px solid var(--border); background: white; border-radius: 8px; }
.query-bar label { font-size: 13px; font-weight: 600; }
.query-bar input { flex: 1; min-width: 180px; }
.query-bar select { max-width: 220px; }
#orders-status { font-size: 12px; color: var(--text-muted); }
.scope-hint { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin: 8px 0 12px; }
input, select, textarea, .form-group input, .form-group select, .form-group textarea, .card-item input, .card-item select {
    border: 1px solid #c8d5e1; background: #fff; border-radius: 5px; padding: 8px 10px; min-height: 38px; color: var(--text); min-width: 0;
}
input::placeholder { color: #778a9d; }
input[readonly] { background: #f4f7fa; color: var(--text-muted); }
.form-group label { color: #40576e; font-size: 13px; font-weight: 600; }
.ledger-table, .card { border: 1px solid var(--border); border-radius: 8px; box-shadow: none; overflow: auto; }
.ledger-table table { min-width: 1050px; }
.ledger-employees .card table { min-width: 880px; }
.ledger-table th, .ledger-table td, .card th, .card td { padding: 10px 12px; font-size: 13px; vertical-align: middle; }
.ledger-table th, .card th { background: #eaf0f5; color: #465d73; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.ledger-table tbody tr:nth-child(even), .card tbody tr:nth-child(even) { background: #fbfcfd; }
.ledger-table tr:hover, .card tr:hover { background: #edf6f7; }
.ledger-table td:nth-child(2) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.ledger-table td:nth-child(5), .ledger-table td:nth-child(7), .amount, .order-amount, .calc-result { font-variant-numeric: tabular-nums; }
.status-tag, .tag { border-radius: 4px; font-size: 11px; padding: 3px 7px; white-space: nowrap; }
.status-normal, .tag-normal, .tag-admin { background: #e7eff8; color: #234e78; }
.status-complete, .tag-photo-ok, .tag-active { background: #e2f3ee; color: #096950; }
.status-pending, .tag-photo-wait, .tag-must-change { background: #fff1d8; color: #87520c; }
.modal-overlay { background: rgba(18,39,58,.48); backdrop-filter: blur(2px); }
.modal { border-radius: 10px; padding: 24px; box-shadow: 0 20px 60px #0f26332b; }
.modal-header { padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.modal-close { min-width: 40px; min-height: 40px; border: 1px solid var(--border); border-radius: 6px; background: #f4f7fa; color: var(--text); }
.card-list { padding: 12px; border: 1px solid var(--border); background: #f5f8fa; }
.card-item { padding: 8px; border: 1px solid var(--border); grid-template-columns: 85px 64px minmax(160px,1fr) minmax(160px,1fr) 80px 40px; }
.card-start, .card-number-display { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.calc-result { background: #ecf7f5; border-color: #bbddd7; }
.calc-row.total { color: #086c67; }
.form-actions, .modal-actions { position: sticky; bottom: -24px; background: white; padding: 12px 0; border-top: 1px solid var(--border); z-index: 2; }
.order-type-btn { padding: 12px; border-width: 1px; }
.order-type-icon { font-size: 24px; }
.order-type-btn.active { background: #eaf1f8; border-color: var(--primary); }
.inline-error { color: #a12130; background: #fff0f1; border-left: 3px solid #bd3d4d; padding: 10px 12px; font-size: 13px; margin: 12px 0; }
.inline-error:empty, .upload-feedback:empty { display: none; }
.loading { padding: 32px !important; color: var(--text-muted); text-align: center !important; }
.loading button, .empty-state button { margin: 12px 8px 0; }
.toast { max-width: calc(100vw - 32px); overflow-wrap: anywhere; background: #173650; line-height: 1.5; }
.ledger-login { background: #eaf0f5; }
.login-page { padding: 32px 16px; background: linear-gradient(90deg, #173650 0 28%, #eaf0f5 28% 100%); }
.login-container { max-width: 440px; padding: 40px; border-radius: 10px; border: 1px solid var(--border); box-shadow: 0 12px 40px #19394d14; border-top: 4px solid #087e79; }
.login-container h1 { font-size: 27px; text-align: left; color: var(--primary); }
.login-container .subtitle { text-align: left; font-size: 13px; margin-bottom: 28px; }
.login-container input { min-height: 46px; }
.login-container .btn-primary { min-height: 46px; }
.demo-accounts { border: 1px solid var(--border); padding: 12px; background: #f4f7fa; font-size: 12px; }
.password-toggle { color: #365973; }
.password-field input { padding-right: 70px; }
.ledger-employees #fg-password > div { flex-wrap: wrap; }
.ledger-employees #emp-password { flex-basis: 100% !important; }
.ledger-mobile .navbar { padding: 10px 16px; }
.ledger-mobile .filter-bar { position: sticky; top: 64px; padding: 12px 16px; gap: 8px; }
.ledger-mobile .filter-btn { min-height: 44px; border-radius: 6px; padding: 10px 16px; font-weight: 600; }
.ledger-mobile .logout-btn { min-height: 44px; }
.ledger-mobile .order-list { max-width: 760px; margin: auto; padding: 16px; }
.ledger-mobile .order-card { padding: 16px; border: 1px solid var(--border); border-left: 3px solid #0c8c85; box-shadow: none; border-radius: 8px; }
.ledger-mobile .order-amount { font-size: 22px; }
.ledger-mobile .order-no { font-size: 12px; }
.ledger-mobile .order-info { margin: 12px 0; font-size: 13px; }
.ledger-mobile .tag { font-size: 12px; }
.ledger-mobile .modal-panel { max-width: 760px; margin: auto; padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); border-radius: 12px 12px 0 0; max-height: 90dvh; }
.ledger-mobile .modal-header { position: sticky; top: -20px; background: white; z-index: 2; padding-top: 12px; }
.ledger-mobile .section-title { color: var(--primary); font-size: 14px; }
.ledger-mobile .detail-row { gap: 16px; padding: 10px 0; }
.ledger-mobile .detail-value { overflow-wrap: anywhere; max-width: 70%; }
.ledger-mobile .upload-item { border-radius: 8px; background: #edf5f6; }
.upload-feedback { padding: 10px 12px; background: #e9f2f8; border-left: 3px solid #28738f; font-size: 13px; color: #234a64; margin-bottom: 12px; }
@media (max-width: 760px) {
    .navbar { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
    .navbar-left { flex-wrap: wrap; gap: 12px; }
    .navbar-user { gap: 12px; }
    .main-content { margin: 20px auto; padding: 0 16px; }
    .workspace-header, .page-header { align-items: flex-start; flex-wrap: wrap; margin-bottom: 20px; }
    .workspace-header h1 { font-size: 24px; }
    .stats-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
    .stat-card { padding: 12px; }
    .stat-value { font-size: 24px; }
    .date-filter { padding: 12px; gap: 8px; }
    .date-filter input { max-width: 145px; }
    .query-bar { padding: 12px; gap: 8px; }
    .query-bar label { width: 100%; }
    .query-bar input { flex-basis: 100%; }
    .query-bar select { flex: 1; max-width: none; }
    .btn, .btn-sm { min-height: 44px; }
    input, select, .form-group input, .form-group select { min-height: 44px; font-size: 16px; }
    .modal { padding: 16px; width: calc(100% - 24px); max-height: 92dvh; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .card-list { overflow-x: auto; padding: 8px; }
    .card-item, .card-header { min-width: 720px; }
    .form-actions, .modal-actions { bottom: -16px; }
    .login-page { background: #eaf0f5; }
    .login-container { padding: 28px 24px; }
    .order-type-selector { gap: 8px; }
    .order-type-desc { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }