/* KosBumul 4.7 — dark working surfaces, controls and dialogs.
   Load after cryptox.css. Screen-only so the existing print sheet remains useful.
   QRIS images deliberately retain their white scan background. */

@media screen {
  :root {
    --control-border: #70706b;
    --input-bg: #101010;
    --green-light: #16231c;
    --red-light: #2c191b;
    --amber: #edbd81;
    --amber-light: #282117;
    --accent-readable: #ff956e;
  }

  input, select, textarea, dialog { color-scheme: dark; }
  input, select, textarea { accent-color: var(--accent); }
  input::placeholder, textarea::placeholder { color: #9e9e98; opacity: 1; }
  select option, select optgroup { background: #171717; color: var(--ink); }
  ::selection { background: #ff956e; color: #17100d; }
  [hidden] { display: none !important; }

  .field input, .field select, .field textarea,
  .toolbar select, .month-field, .search-box {
    background: var(--input-bg);
    border: 1px solid var(--control-border);
    color: var(--ink);
    border-radius: 8px;
    box-shadow: none;
  }

  .field input, .field select, .field textarea {
    font-size: 16px;
    min-height: 48px;
    max-width: 100%;
    padding: 12px 14px;
    transition: border-color .16s ease;
  }

  .field label { color: #deded9; font-size: 13px; font-weight: 550; }
  .field small, .field-help { color: var(--muted); font-size: 12px; line-height: 1.75; }
  .field textarea { line-height: 1.7; }
  .field input[readonly], .field textarea[readonly] {
    background: #1d1d1b;
    border-color: var(--line);
    color: #d4d4ce;
    font-weight: 500;
  }

  .field input:disabled, .field select:disabled, .field textarea:disabled {
    background: #20201e;
    color: #aaa9a4;
    border-color: var(--line);
    cursor: not-allowed;
  }

  .field input[aria-invalid="true"], .field select[aria-invalid="true"],
  .field textarea[aria-invalid="true"] { border-color: var(--red); }
  .field input:user-invalid, .field select:user-invalid,
  .field textarea:user-invalid { border-color: var(--red); }

  .field input:focus-visible, .field select:focus-visible,
  .field textarea:focus-visible, .toolbar select:focus-visible,
  .month-field:focus-within, .search-box:focus-within {
    outline: 2px solid var(--accent-readable);
    outline-offset: 3px;
    border-color: var(--accent-readable);
  }

  .month-field input, .search-box input {
    color: var(--ink);
    background: transparent;
    border: 0;
  }
  .month-field input:focus-visible, .search-box input:focus-visible { outline: none; }
  .search-box svg, .month-field > svg { color: var(--muted); }
  .month-field { border-color: #52524f; }

  /* Short status text remains readable without turning every surface into a badge. */
  .announcement {
    background: #181512;
    border-color: var(--line);
    border-left: 2px solid var(--accent);
    border-radius: 8px;
    color: #d7d0c9;
    padding: 18px 20px;
  }
  .announcement > span { color: var(--accent-readable); }
  .announcement strong { font-size: 13px; color: var(--ink); }
  .announcement p { font-size: 13px; line-height: 1.8; }

  .form-note, .resident-confirm, .deadline-preview {
    background: #1c1c1a;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #c3c3bc;
    box-shadow: none;
  }
  .form-note { font-size: 12px; line-height: 1.8; }
  .form-note strong { color: var(--ink); font-weight: 600; }
  .notice {
    background: var(--amber-light);
    color: var(--amber);
    border-color: #51412c;
    border-radius: 8px;
    font-size: 13px;
  }
  .form-error {
    color: var(--red);
    background: var(--red-light);
    border-color: #66383e;
    border-radius: 8px;
    font-size: 13px;
  }
  .context-note, .bottom-note, .room-label { color: var(--muted); }

  .deadline-card { background: #1b1916; border-color: #454035; border-radius: 12px; }
  .deadline-icon { background: #2a251e; color: #e4bd96; border: 1px solid #4f4233; border-radius: 9px; }
  .deadline-leading .eyebrow { color: #c1b4a3; }
  .deadline-leading p:last-child, .deadline-status p { color: #b2aaa0; }
  .deadline-link { background: transparent; border-color: #716050; }
  .deadline-card.late { background: #231d16; border-color: #5b4830; }
  .deadline-card.late .deadline-icon { background: #34271a; color: var(--amber); }
  .deadline-card.late .deadline-leading .eyebrow,
  .deadline-card.late .deadline-leading p:last-child,
  .deadline-card.late .deadline-status p { color: #dec2a0; }
  .deadline-card.complete { background: #18211a; border-color: #3c5040; }
  .deadline-card.complete .deadline-icon { background: #223327; border-color: #425b48; color: var(--green); }

  .badge {
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
  }
  .badge.paid { background: var(--green-light); color: var(--green); border-color: #304a3a; }
  .badge.unpaid { background: var(--amber-light); color: var(--amber); border-color: #51412c; }
  .badge.neutral { background: #242422; color: #c5c5be; border-color: #3b3b36; }
  .badge.danger { background: var(--red-light); color: var(--red); border-color: #66383e; }

  .btn.danger { color: var(--red); border-color: #754349; background: transparent; }
  .btn.danger:hover:not(:disabled) { color: #ffb5b5; background: #331d20; border-color: #b36b74; }
  .btn.primary.danger { background: #ff9696; color: #261013; border-color: #ff9696; }
  .btn.primary.danger:hover:not(:disabled) { background: #ffb1b1; color: #261013; border-color: #ffb1b1; }
  .btn:disabled { opacity: .5; box-shadow: none; }
  .btn[aria-busy="true"] { cursor: progress; }
  .btn:focus-visible, .text-button:focus-visible, .filter-pill:focus-visible,
  .role-switch button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent-readable);
    outline-offset: 4px;
  }

  /* Status filters are a small tab strip, not another row of floating cards. */
  .list-controls { margin-block: 28px 22px; }
  .filter-pills {
    width: fit-content;
    max-width: 100%;
    padding: 4px;
    gap: 4px;
    border: 1px solid var(--line);
    background: #111110;
    border-radius: 9px;
  }
  .filter-pill {
    min-height: 44px;
    background: transparent;
    color: #b6b6af;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
  }
  .filter-pill:hover { background: #272725; color: var(--ink); }
  .filter-pill[aria-pressed="true"] {
    color: var(--ink);
    background: #34342f;
    border-color: #5f5f56;
    box-shadow: none;
  }
  .pill-count { border-radius: 4px; background: #262624; color: #bababa; font-weight: 500; }
  .filter-pill[aria-pressed="true"] .pill-count { background: var(--accent); color: var(--accent-text); }
  .toolbar { margin-top: 20px; }
  .count, .pagination p, .pagination span { color: var(--muted); font-size: 12px; }

  /* Clean ledger: subtle row dividers, calm hover, and no clipped amounts. */
  .table-panel { background: var(--panel); box-shadow: none; }
  .table-wrap { scrollbar-color: #62625b #151514; overscroll-behavior-x: contain; }
  table { color: var(--ink); }
  th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #1b1b19;
    color: #b6b6ae;
    border-color: var(--line);
    font-size: 10px;
    letter-spacing: .07em;
    font-weight: 500;
    padding-block: 14px;
  }
  td { border-color: rgba(255,255,255,.09); color: #deded8; font-size: 13px; padding-block: 19px; }
  tbody tr:hover { background: #1d1d1a; }
  .transaction-cell strong, .person strong { color: var(--ink); font-weight: 500; }
  .transaction-cell small, .person small { color: var(--muted); }
  .tx-icon { border-radius: 7px; background: #17271d; color: var(--green); }
  .tx-icon.out { background: #28221d; color: #cdb399; }
  .amount { font-variant-numeric: tabular-nums; font-weight: 550; letter-spacing: -.015em; }
  .income-text { color: var(--green); }
  .expense-text { color: #edede7; }
  .voided td, .voided .transaction-cell strong, .voided .amount { color: var(--muted); }
  .helper-detail { color: var(--muted); }
  .helper-detail summary { color: #c2c2b9; text-underline-offset: 4px; }
  .helper-detail summary:hover { color: var(--accent-readable); }
  .helper-detail[open] { padding-bottom: 4px; }
  .empty { color: var(--muted); padding-block: 56px; }
  .empty svg { color: #b0ada3; }
  .empty strong { color: var(--ink); font-size: 18px; font-weight: 500; }
  .empty p { font-size: 13px; }

  /* Residents and settings use the same quiet, square-edged surface language. */
  .occupancy-stats article {
    background: var(--panel);
    border-color: var(--line);
    border-radius: 12px;
    box-shadow: none;
  }
  .occupancy-stats strong { color: var(--ink); font-weight: 500; }
  .occupancy-stats p { color: var(--muted); font-size: 12px; }
  .occupancy-icon { background: #17271d; color: var(--green); border-radius: 9px; }
  .occupancy-icon.future { background: #282019; color: #efba8e; }
  .occupancy-icon.exited { background: #252523; color: #b1b1a9; }
  .resident-card {
    background: var(--panel);
    border-color: var(--line);
    border-radius: 12px;
    box-shadow: none;
    padding: 25px;
    transition: border-color .16s ease;
  }
  .resident-card.exited { background: #111110; }
  .resident-card:hover { border-color: #55554e; box-shadow: none; }
  .resident-card:focus-within { border-color: #77766a; }
  .resident-top .avatar, .resident-confirm .avatar, .person .avatar {
    background: #2a2822;
    color: #e7dac8;
    border: 1px solid #414035;
    border-radius: 9px;
    font-weight: 500;
  }
  .resident-card h2 { font-size: 23px; font-weight: 500; letter-spacing: -.025em; }
  .stay-period { border-color: var(--line); }
  .stay-period dt { color: var(--muted); font-size: 11px; }
  .stay-period dd { color: #deded7; font-size: 13px; }
  .resident-actions .btn { border-radius: 7px; }
  .resident-confirm { padding: 17px; }
  .resident-confirm strong { color: var(--ink); }

  .payment-info {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 26px;
    box-shadow: none;
  }
  .payment-info-icon, .settings-icon {
    color: var(--accent-readable);
    background: #2b1d16;
    border: 1px solid #4a3021;
    border-radius: 9px;
  }
  .payment-info .eyebrow { color: var(--accent-readable); font-size: 10px; letter-spacing: .11em; }
  .payment-info h2 { font-size: 21px; font-weight: 500; }
  .payment-info p, .settings-card > p, .settings-heading p { font-size: 13px; color: var(--muted); line-height: 1.8; }
  .payment-info p strong { color: #deded7; font-weight: 550; }
  .settings-card { background: var(--panel); border-color: var(--line); border-radius: 12px; padding: 28px; box-shadow: none; }
  .settings-card .table-wrap { margin-inline: -28px; }
  .settings-card h2 { font-weight: 500; }
  .settings-list dt { color: var(--muted); font-size: 10px; letter-spacing: .09em; }
  .settings-list dd { color: #e4e4de; font-size: 14px; }
  .settings-list dd small { color: var(--muted); font-size: 12px; }
  .date-setting { background: #1b1b19; border-color: var(--line); border-radius: 8px; }
  .date-setting span { color: var(--muted); }
  .field .date-setting input { font-size: 24px; }
  .deadline-preview .eyebrow { color: var(--accent-readable); }
  .preview-dates span { color: var(--muted); }
  .preview-dates strong { color: var(--ink); }

  /* The native dialog retains focus trapping and keyboard dismissal. */
  dialog {
    color: var(--ink);
    background: #151514;
    border: 1px solid #4e4e48;
    border-radius: 14px;
    box-shadow: 0 24px 96px #0009;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #64645c #151514;
    max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  dialog::backdrop { background: rgba(0,0,0,.78); }
  .modal-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #1a1a18;
    border-color: var(--line);
    padding: 25px 28px 23px;
  }
  .modal-head h2 { color: var(--ink); font-size: 25px; font-weight: 500; letter-spacing: -.03em; }
  .modal-head p { color: var(--muted); font-size: 13px; }
  .modal-head .btn { flex-shrink: 0; }
  .modal-form { min-width: 0; padding: 25px 28px 28px; }
  .modal-actions { border-color: var(--line); padding-top: 22px; }
  .modal-actions .btn { min-width: 100px; }

  .qris-payment-amount { background: #20201c; border: 1px solid #3c3b32; border-radius: 10px; padding: 24px; }
  .qris-payment-amount span { color: #bdbdb4; }
  .qris-payment-amount strong { color: var(--ink); font-weight: 550; letter-spacing: -.025em; }
  .qris-merchant { color: var(--muted); font-size: 13px; }
  .qris-merchant strong { color: var(--ink); font-size: 15px; font-weight: 550; }
  .qris-image { background: #fff; border: 10px solid #fff; border-radius: 6px; color-scheme: light; }
  .qris-preview { background: #101010; border-color: #626257; border-radius: 8px; }
  .qris-preview > p { color: var(--muted); }
  .qris-steps { color: #c4c4bc; font-size: 13px; }
  .qris-steps strong { color: var(--ink); }
  .qris-actions { gap: 9px; }
  .field input[type="file"] { background: #111110; font-size: 13px; }
  .field input[type="file"]::file-selector-button {
    background: #2a2a26;
    color: var(--ink);
    border-color: #707066;
    border-radius: 5px;
  }
  .field input[type="file"]::file-selector-button:hover { background: #383830; }
  #wa-preview { background: #101010; color: #d8d8d0; font-size: 16px; font-weight: 400; line-height: 1.8; }
  #wa-status { margin: 16px 0; color: var(--green); font-size: 13px; line-height: 1.7; }
  #wa-status:empty { margin: 0; }
  #wa-open { margin-top: 8px; }
  #qris-display > [role="status"] { color: var(--muted); padding-block: 22px; }

  .captcha-panel { border-color: var(--line); }
  #captcha-status { color: var(--muted); }
  #captcha-status[data-status="verified"] { color: var(--green); }
  #captcha-status[data-status="error"], #captcha-status[data-status="expired"] { color: var(--red); }
  .toast { background: #242421; color: var(--ink); border: 1px solid #636359; box-shadow: 0 12px 36px #0006; border-radius: 9px; }
  .skip-link { background: var(--accent); color: var(--accent-text); }
}

@media screen and (max-width: 767px) {
  .filter-pills { width: 100%; }
  .filter-pill { min-height: 48px; font-size: 12px; }
  .search-box input, .month-field input, .toolbar select { font-size: 16px; }
  .toolbar { gap: 12px; }
  .dues-table th, .transaction-table th, .recent-table th { position: static; }
  .dues-table td, .transaction-table td, .recent-table td { color: #deded8; }
  .dues-table td:first-child, .transaction-table td:first-child,
  .recent-table td:first-child { border-bottom-color: var(--line); }
  .dues-table .income-text, .transaction-table .income-text,
  .recent-table .income-text { color: var(--green); }
  .dues-table .voided td, .transaction-table .voided td,
  .recent-table .voided td { color: var(--muted); }
  .dues-table td:before, .transaction-table td:before,
  .recent-table td:before { color: var(--muted); }
  .resident-card, .settings-card { padding: 23px; }
  .settings-card .table-wrap { margin-inline: -23px; }
  .payment-info { padding: 22px; }
  .modal-head { padding: 23px 21px 21px; }
  .modal-head h2 { font-size: 23px; }
  .modal-form { padding: 23px 21px max(24px, env(safe-area-inset-bottom, 0px)); }
  .field-row { gap: 0; }
  .date-setting { gap: 10px; }
  .modal-actions .btn { min-height: 48px; }
  .field input[type="file"] { font-size: 16px; }
  .field input[type="file"]::file-selector-button { min-height: 44px; }
  .qris-image { border-width: 7px; }
  .qris-preview { padding: 10px; }
}

@media screen and (prefers-reduced-motion: reduce) {
  .resident-card, .field input, .field select, .field textarea { transition: none; }
}