/* ── reset & base ────────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --cash:    #27ae60;
      --card:    #2980b9;
      --expense: #c0392b;
      --return:  #c0392b;
      --bg:      #f0f2f5;
      --surface: #ffffff;
      --border:  #dde1e7;
      --text:    #1a1d23;
      --muted:   #6b7280;
      --header:  #1a1d2e;
      --accent:  #3b82f6;
      --radius:  8px;
      --shadow:  0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
      line-height: 1.5;
      min-height: 100vh;
    }

    /* ── toast ───────────────────────────────────────────────────────────── */
    #toastContainer {
      position: fixed; top: 16px; right: 16px; z-index: 9999;
      display: flex; flex-direction: column; gap: 8px;
    }
    .toast {
      padding: 10px 16px; border-radius: var(--radius);
      font-size: 13px; font-weight: 500;
      background: #333; color: #fff;
      opacity: 0; transform: translateX(20px);
      transition: opacity .25s, transform .25s;
      max-width: 320px;
    }
    .toast.show { opacity: 1; transform: translateX(0); }
    .toast-success { background: #166534; }
    .toast-error   { background: #991b1b; }
    .toast-info    { background: #1e40af; }

    /* ── modal overlay ───────────────────────────────────────────────────── */
    .modal-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,.45); z-index: 1000;
      align-items: center; justify-content: center; padding: 16px;
      overflow-y: auto;
    }
    .modal-overlay.open { display: flex; }

    .modal {
      background: var(--surface); border-radius: 12px;
      padding: 28px 28px 24px; width: 100%; max-width: 420px;
      box-shadow: 0 20px 60px rgba(0,0,0,.25);
    }
    .modal h2 { font-size: 18px; margin-bottom: 6px; }
    .modal p  { color: var(--muted); margin-bottom: 16px; font-size: 13px; }

    .modal input[type="text"],
    .modal input[type="password"],
    .modal input[type="number"],
    .modal select {
      width: 100%; padding: 10px 12px;
      border: 1.5px solid var(--border); border-radius: var(--radius);
      font-size: 15px; background: var(--surface); color: var(--text);
      margin-bottom: 12px;
    }
    .modal input:focus,
    .modal select:focus { outline: none; border-color: var(--accent); }

    .modal-actions {
      display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px;
    }

    .error-msg {
      color: var(--expense); font-size: 12px; margin-top: -8px; margin-bottom: 10px;
      display: none;
    }

    /* wide modal for edit */
    .modal-wide { max-width: 560px; }
    .modal-wide .form-row {
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
    }
    .modal-wide .form-group label {
      display: block; font-size: 12px; font-weight: 600;
      color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .4px;
    }
    .modal-wide .form-group { margin-bottom: 12px; }
    .modal-wide input[type="number"],
    .modal-wide input[type="text"],
    .modal-wide select { margin-bottom: 0; }

    /* ── buttons ─────────────────────────────────────────────────────────── */
    button {
      cursor: pointer; border: none; border-radius: var(--radius);
      font-size: 13px; font-weight: 600; padding: 8px 16px;
      transition: opacity .15s, transform .1s;
    }
    button:active { transform: scale(.97); }
    button:disabled { opacity: .5; cursor: not-allowed; }

    .btn-primary   { background: var(--accent); color: #fff; }
    .btn-secondary { background: #e5e7eb; color: var(--text); }
    .btn-success   { background: var(--cash);  color: #fff; }
    .btn-danger    { background: var(--expense); color: #fff; }
    .btn-ghost     { background: transparent; border: 1.5px solid var(--border); color: var(--text); }

    .btn-icon {
      background: transparent; padding: 4px 7px; font-size: 15px;
      border-radius: 6px; line-height: 1;
    }
    .btn-icon:hover { background: #f3f4f6; }

    /* ── header ──────────────────────────────────────────────────────────── */
    header {
      background: var(--header); color: #fff;
      padding: 0 20px; position: sticky; top: 0; z-index: 100;
      box-shadow: 0 2px 8px rgba(0,0,0,.3);
    }
    .header-inner {
      max-width: 1280px; margin: 0 auto;
      display: flex; align-items: center; gap: 16px;
      min-height: 60px; flex-wrap: wrap;
    }
    .header-brand h1 {
      font-size: 17px; font-weight: 700; letter-spacing: -.3px;
    }
    .header-brand span {
      font-size: 11px; color: #94a3b8; display: block; line-height: 1;
    }

    .header-shift { display: flex; align-items: center; gap: 10px; flex: 1; }

    .shift-badge {
      padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700;
      letter-spacing: .3px;
    }
    .shift-open   { background: rgba(39,174,96,.25);  color: #4ade80; }
    .shift-closed { background: rgba(255,255,255,.1); color: #94a3b8; }

    .employee-chip {
      font-size: 12px; color: #cbd5e1;
      display: flex; align-items: center; gap: 5px;
    }
    .employee-chip strong { color: #fff; }
    .employee-chip button {
      background: transparent; color: #64748b; font-size: 11px; padding: 2px 5px;
    }
    .employee-chip button:hover { color: #94a3b8; }

    .header-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
    .header-actions button { font-size: 12px; padding: 6px 12px; color: #fff; border-color: rgba(255,255,255,.3); white-space: nowrap; }
    .header-actions button:hover { background: rgba(255,255,255,.1); }
    .branch-switcher { display: flex; gap: 4px; background: rgba(255,255,255,.08); border-radius: var(--radius); padding: 3px; }
    .branch-switcher button { font-size: 11px; padding: 4px 9px; border: none !important; border-radius: 5px; }
    .branch-switcher .btn-primary { background: var(--accent); }
    .branch-switcher .btn-ghost { background: transparent; color: #94a3b8; }
    .branch-switcher .btn-ghost:hover { background: rgba(255,255,255,.15); color: #fff; }

    /* ── main layout ─────────────────────────────────────────────────────── */
    main {
      max-width: 1280px; margin: 0 auto; padding: 20px 16px 40px;
      display: flex; flex-direction: column; gap: 16px;
    }

    .alert {
      padding: 12px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 500;
    }
    .alert-warning {
      background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
    }

    /* ── card ────────────────────────────────────────────────────────────── */
    .card {
      background: var(--surface); border-radius: 10px;
      padding: 20px; box-shadow: var(--shadow); border: 1px solid var(--border);
    }
    .card h2 {
      font-size: 15px; font-weight: 700; margin-bottom: 16px;
      color: var(--text); letter-spacing: -.2px;
    }

    /* ── form ────────────────────────────────────────────────────────────── */
    .form-section.disabled { opacity: .55; pointer-events: none; }
    .form-section.disabled .admin-toggle-wrap { opacity: 1; pointer-events: all; }
    .form-section.disabled #testModeBar { opacity: 1; pointer-events: all; }
    .form-section.disabled #testModeBar * { pointer-events: all; }

    .form-row {
      display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
    }
    .form-group { display: flex; flex-direction: column; gap: 5px; }
    .form-group label {
      font-size: 11px; font-weight: 700; color: var(--muted);
      text-transform: uppercase; letter-spacing: .5px;
    }
    .form-group .required { color: var(--expense); }

    .form-group input[type="text"],
    .form-group input[type="number"],
    .form-group select {
      padding: 9px 12px; border: 1.5px solid var(--border);
      border-radius: var(--radius); font-size: 14px;
      background: var(--surface); color: var(--text);
      transition: border-color .15s;
    }
    .form-group input:focus,
    .form-group select:focus { outline: none; border-color: var(--accent); }

    .fg-type   { flex: 2; min-width: 200px; }
    .fg-name   { flex: 3; min-width: 200px; }
    .fg-amount { width: 130px; }
    .fg-submit { min-width: 150px; }

    /* ── toggle group ────────────────────────────────────────────────────── */
    .toggle-group {
      display: flex; border: 1.5px solid var(--border); border-radius: var(--radius);
      overflow: hidden;
    }
    .toggle-btn {
      flex: 1; padding: 9px 12px; border-radius: 0; font-size: 13px;
      background: var(--surface); color: var(--muted); border: none;
      transition: background .15s, color .15s;
    }
    .toggle-btn.active {
      background: var(--accent); color: #fff;
    }
    .toggle-btn:first-child { border-right: 1.5px solid var(--border); }
    .toggle-btn.active + .toggle-btn,
    .toggle-btn.active { border-color: var(--accent); }

    /* ── table ───────────────────────────────────────────────────────────── */
    .table-wrapper { overflow-x: auto; }

    table {
      width: 100%; border-collapse: collapse;
      font-size: 13px;
    }
    thead th {
      text-align: left; padding: 8px 10px;
      font-size: 11px; font-weight: 700; color: var(--muted);
      text-transform: uppercase; letter-spacing: .5px;
      border-bottom: 2px solid var(--border);
      white-space: nowrap;
    }
    tbody tr {
      border-bottom: 1px solid #f1f3f5;
      transition: background .1s;
    }
    tbody tr:hover { background: #f8f9fb; }
    tbody tr.row-return { background: #fff5f5; }
    tbody tr.row-return:hover { background: #fee2e2; }

    td { padding: 9px 10px; vertical-align: middle; }

    .td-time  { white-space: nowrap; color: var(--muted); font-size: 12px; width: 60px; }
    .td-emp   { white-space: nowrap; color: var(--muted); }
    .td-desc  { max-width: 280px; word-break: break-word; }
    .td-type  { white-space: nowrap; font-size: 12px; width: 110px; }
    .td-num   { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .td-actions { width: 70px; white-space: nowrap; }

    .text-cash    { color: var(--cash);    font-weight: 600; }
    .text-card    { color: var(--card);    font-weight: 600; }
    .text-expense { color: var(--expense); font-weight: 600; }
    .text-return  { color: var(--return);  font-weight: 600; }
    .text-muted   { color: var(--muted); }
    .text-center  { text-align: center; }

    /* tfoot */
    tfoot tr { border-top: 2px solid var(--border); }
    tfoot td { padding: 10px; font-size: 13px; }
    .tfoot-label { text-align: right; color: var(--muted); font-weight: 600; }
    .tfoot-total { text-align: right; font-weight: 700; font-size: 15px; }

    /* ── responsive ──────────────────────────────────────────────────────── */
    @media (max-width: 700px) {
      header { padding: 0 12px; }
      .header-inner { height: auto; padding: 10px 0; gap: 8px; }
      .header-actions { width: 100%; }

      main { padding: 12px 10px 40px; }
      .card { padding: 14px; }

      .form-row { flex-direction: column; }
      .fg-type, .fg-name, .fg-amount, .fg-submit { width: 100%; flex: none; min-width: 0; }

      .modal-wide .form-row { grid-template-columns: 1fr; }

      .td-emp, .td-type { display: none; }
      thead th.th-emp, thead th.th-type { display: none; }
    }

    @media (max-width: 480px) {
      .td-time { display: none; }
      thead th.th-time { display: none; }
    }

    /* ── bulk delete bar ─────────────────────────────────────────────────── */
    .bulk-bar {
      display: none; align-items: center; gap: 12px;
      background: #1e293b; color: #fff;
      padding: 10px 16px; border-radius: var(--radius);
      margin-bottom: 10px; font-size: 13px;
    }
    .bulk-bar.visible { display: flex; }
    .bulk-bar .count { font-weight: 700; color: #fbbf24; }
    .td-check { width: 36px; text-align: center; }
    .td-check input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
    tr.row-selected { background: #fef3c7 !important; }

    /* ── report modal ────────────────────────────────────────────────────── */
    .modal-report {
      max-width: 780px; width: 100%;
      max-height: 90vh; display: flex; flex-direction: column;
    }
    .modal-report .report-scroll {
      overflow-y: auto; flex: 1; min-height: 0;
    }
    .report-controls {
      display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
      margin-bottom: 16px;
    }
    .report-controls input[type="date"] {
      padding: 7px 10px; border: 1.5px solid var(--border);
      border-radius: var(--radius); font-size: 13px;
      background: var(--surface); color: var(--text);
    }
    .report-controls input[type="date"]:focus { outline: none; border-color: var(--accent); }
    .report-sep { color: var(--muted); font-size: 13px; }

    .report-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
    .report-quick button {
      font-size: 12px; padding: 5px 10px;
      background: #f1f5f9; color: var(--text); border: 1px solid var(--border);
      border-radius: 20px;
    }
    .report-quick button:hover { background: #e2e8f0; }

    #reportResults { margin-top: 16px; }

    .report-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
    .report-table th {
      text-align: left; padding: 7px 10px;
      font-size: 11px; font-weight: 700; color: var(--muted);
      text-transform: uppercase; letter-spacing: .4px;
      border-bottom: 2px solid var(--border);
    }
    .report-table th.num { text-align: right; }
    .report-table td { padding: 8px 10px; border-bottom: 1px solid #f1f3f5; }
    .report-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
    .report-table tr.group-repair { background: #f0fdf4; }
    .report-table tr.margin-row {
      background: #dcfce7; font-weight: 700;
    }
    .report-table tr.margin-row.negative { background: #fef2f2; }
    .report-table tr.total-row {
      background: #f8fafc; font-weight: 700;
      border-top: 2px solid var(--border);
    }
    .report-table .count-badge {
      display: inline-block; background: #e5e7eb;
      border-radius: 10px; padding: 1px 7px; font-size: 11px; color: var(--muted);
      margin-left: 6px;
    }
    .report-empty { text-align: center; padding: 32px; color: var(--muted); }
    .report-period {
      font-size: 12px; color: var(--muted); margin-bottom: 12px;
    }

    /* ── tasks button alert ──────────────────────────────────────────────── */
    @keyframes tasks-blink {
      0%, 100% { background: rgba(220,38,38,.15); color: #fca5a5; border-color: rgba(220,38,38,.5); }
      50%       { background: #dc2626;             color: #fff;    border-color: #dc2626; }
    }
    .tasks-btn.tasks-alert {
      animation: tasks-blink 1.2s ease-in-out infinite;
    }

    /* ── tasks modal ─────────────────────────────────────────────────────── */
    .modal-tasks { max-width: 520px; }

    .tasks-header {
      display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
    }
    .tasks-header h2 { margin-bottom: 0; }
    .tasks-count {
      font-size: 12px; font-weight: 700; color: #fff;
      background: var(--expense); border-radius: 20px;
      padding: 2px 8px; line-height: 1.6;
    }

    .tasks-add {
      display: flex; gap: 8px; margin-bottom: 16px; margin-top: 4px;
    }
    .tasks-add input {
      flex: 1; padding: 9px 12px;
      border: 1.5px solid var(--border); border-radius: var(--radius);
      font-size: 14px; background: var(--surface); color: var(--text);
    }
    .tasks-add input:focus { outline: none; border-color: var(--accent); }

    .tasks-list {
      list-style: none; display: flex; flex-direction: column; gap: 8px;
      max-height: 380px; overflow-y: auto; padding-right: 4px;
    }
    .tasks-empty {
      text-align: center; padding: 28px; color: var(--muted); font-size: 13px;
    }

    .task-item {
      display: flex; align-items: flex-start; gap: 12px;
      background: #f8f9fb; border: 1px solid var(--border);
      border-radius: var(--radius); padding: 10px 12px;
      transition: opacity .3s, transform .3s;
    }
    .task-item.task-done-anim {
      opacity: 0; transform: translateX(20px);
    }

    .task-check { position: relative; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
    .task-check input { opacity: 0; width: 0; height: 0; position: absolute; }
    .task-checkmark {
      display: block; width: 20px; height: 20px;
      border: 2px solid var(--border); border-radius: 4px;
      background: var(--surface); cursor: pointer;
      transition: background .15s, border-color .15s;
    }
    .task-check input:checked ~ .task-checkmark {
      background: var(--cash); border-color: var(--cash);
    }
    .task-check input:checked ~ .task-checkmark::after {
      content: '✓'; display: block;
      text-align: center; line-height: 16px;
      color: #fff; font-size: 13px; font-weight: 700;
    }
    .task-check:hover .task-checkmark { border-color: var(--cash); }

    .task-body { flex: 1; min-width: 0; }
    .task-text { font-size: 14px; word-break: break-word; line-height: 1.4; }
    .task-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }

    /* ── search bar ──────────────────────────────────────────────────────────── */
    .search-bar {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 12px; flex-wrap: wrap;
    }
    .search-input-wrap {
      display: flex; align-items: center;
      flex: 1; min-width: 180px; max-width: 560px;
      border: 1.5px solid var(--border); border-radius: var(--radius);
      background: var(--surface); overflow: hidden;
      transition: border-color .15s;
    }
    .search-input-wrap:focus-within { border-color: var(--accent); }
    .search-icon { padding: 0 8px 0 10px; color: var(--muted); font-size: 14px; flex-shrink: 0; }
    #searchInput {
      flex: 1; border: none; outline: none; padding: 9px 4px;
      font-size: 14px; background: transparent; color: var(--text);
    }
    .search-clear {
      padding: 0 10px; background: transparent; color: var(--muted);
      font-size: 13px; border: none; cursor: pointer; flex-shrink: 0; border-radius: 0;
    }
    .search-clear:hover { color: var(--expense); background: #fef2f2; }
    .search-hint { font-size: 12px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
    #searchResults {
      margin-bottom: 14px;
      border: 1.5px solid var(--accent); border-radius: var(--radius); overflow: hidden;
    }
    #searchResults .table-wrapper { max-height: 420px; overflow-y: auto; }
    .search-results-header {
      background: #eff6ff; padding: 8px 14px;
      font-size: 12px; font-weight: 600; color: #1e40af;
      border-bottom: 1px solid #bfdbfe;
    }
    .search-empty { text-align: center; padding: 24px; color: var(--muted); font-size: 13px; }
    mark { background: #fef08a; color: inherit; border-radius: 2px; padding: 0 1px; }
    .desc-hint { font-size: 12px; color: var(--muted); margin-top: 3px; }
    .desc-hint a { color: var(--accent); text-decoration: none; }
    .desc-hint a:hover { text-decoration: underline; }

    /* ── goods modal ─────────────────────────────────────────────────────────── */
    .modal-goods { max-width: 1020px; width: 100%; }
    .goods-add-form {
      background: #f8fafc; border: 1px solid var(--border);
      border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px;
    }
    .goods-add-form input, .goods-add-form select {
      padding: 8px 10px; border: 1.5px solid var(--border);
      border-radius: var(--radius); font-size: 13px;
      background: var(--surface); color: var(--text); width: 100%;
      transition: border-color .15s;
    }
    .goods-add-form input:focus, .goods-add-form select:focus {
      outline: none; border-color: var(--accent);
    }
    .goods-filter {
      display: flex; gap: 6px; align-items: center; margin-bottom: 10px;
    }
    .goods-filter button {
      font-size: 12px; padding: 5px 14px; border-radius: 20px;
      background: #f1f5f9; color: var(--text);
      border: 1.5px solid var(--border);
    }
    .goods-filter button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .goods-count {
      margin-left: 4px; font-size: 12px; color: var(--muted);
    }
    .goods-table-wrap { max-height: 380px; overflow-y: auto; }
    .goods-status-avail {
      display: inline-block; padding: 2px 9px; border-radius: 12px;
      font-size: 11px; font-weight: 700; background: #dcfce7; color: #166534;
    }
    .goods-status-sold {
      display: inline-block; padding: 2px 9px; border-radius: 12px;
      font-size: 11px; font-weight: 700; background: #f3f4f6; color: #6b7280;
    }
    .goods-row-sold td { opacity: .45; }
    @media (max-width: 700px) {
      .modal-goods { padding: 16px 12px; }
    }

    /* ── branch login screen ─────────────────────────────────────────────── */
    .branch-login-overlay {
      display: none; position: fixed; inset: 0; z-index: 9500;
      background: linear-gradient(rgba(10,12,30,.72), rgba(10,12,30,.72)),
                  url('/static/nano-banana_20260613_050153_828bd0f6.jpg') center/cover no-repeat;
      background-color: #0f1120;
      align-items: center; justify-content: center;
    }
    .branch-login-overlay.active { display: flex; }
    .branch-login-box {
      width: 100%; max-width: 420px; padding: 40px 32px;
      text-align: center;
    }
    .branch-login-logo {
      display: flex; align-items: center; justify-content: center; gap: 12px;
      margin-bottom: 8px;
    }
    .branch-login-logo span {
      font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.4px;
    }
    .branch-login-sub {
      font-size: 14px; color: #64748b; margin-bottom: 32px;
    }
    .branch-cards {
      display: flex; gap: 16px; justify-content: center;
    }
    .branch-card {
      flex: 1; max-width: 160px;
      background: #1e2235; border: 1.5px solid #2d3354;
      border-radius: 14px; padding: 28px 16px;
      cursor: pointer; transition: border-color .2s, background .2s, transform .1s;
      display: flex; flex-direction: column; align-items: center; gap: 10px;
    }
    .branch-card:hover {
      border-color: var(--accent); background: #252a45; transform: translateY(-2px);
    }
    .branch-card-icon { font-size: 36px; }
    .branch-card-name { font-size: 16px; font-weight: 700; color: #e2e8f0; }
    .bl-back {
      background: none; border: none; color: #64748b; font-size: 13px;
      cursor: pointer; padding: 0; margin-bottom: 4px;
    }
    .bl-back:hover { color: #94a3b8; }
    .bl-input {
      width: 100%; padding: 13px 16px; font-size: 16px;
      background: #1e2235; border: 1.5px solid #2d3354; border-radius: 10px;
      color: #fff; outline: none; transition: border-color .2s;
    }
    .bl-input:focus { border-color: var(--accent); }
    .bl-submit {
      width: 100%; margin-top: 14px; padding: 13px;
      background: var(--accent); color: #fff; border: none; border-radius: 10px;
      font-size: 16px; font-weight: 700; cursor: pointer; transition: opacity .2s;
    }
    .bl-submit:hover { opacity: .88; }
    .bl-submit:disabled { opacity: .5; cursor: default; }