:root { --green: #1e9e4a; --red: #c0392b; --bg: #f5f6f8; --card: #fff; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: #1c1c1c;
       font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; }
nav { display: flex; flex-wrap: wrap; gap: .25rem; background: #123c2b; padding: .5rem; }
nav a { color: #fff; text-decoration: none; padding: .5rem .75rem; border-radius: 6px; }
nav a:hover { background: rgba(255,255,255,.15); }
nav a.left { margin-inline-start: auto; }
main { padding: 1rem; max-width: 1200px; margin: 0 auto; }
.card { background: var(--card); border-radius: 10px; padding: 1rem;
        box-shadow: 0 1px 3px rgba(0,0,0,.12); margin-bottom: 1rem; }
.banner-alert { background: #fdecea; color: var(--red); padding: .75rem 1rem;
                border: 1px solid var(--red); margin: .5rem; border-radius: 8px; }
.error { color: var(--red); }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border: 1px solid #ddd; padding: .4rem .6rem; text-align: center; }
th { background: #eef2ef; position: sticky; top: 0; }
td.paid { background: var(--green); color: #fff; }
td.partial { background: #f0c419; }
td.paid a, td.partial a { color: inherit; text-decoration: none; }
td a { display: block; }
.table-scroll { overflow-x: auto; }
label { display: block; margin: .5rem 0; }
input, select, button { font: inherit; padding: .45rem .6rem; border-radius: 6px;
                        border: 1px solid #bbb; width: 100%; }
button { background: var(--green); color: #fff; border: 0; cursor: pointer; }
button.danger { background: var(--red); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
         gap: 1rem; }
.stat h2 { margin: .2rem 0; font-size: 1.8rem; }
.login-page { display: grid; place-items: center; min-height: 100vh; }
.login-card { width: min(90vw, 360px); }
@media (max-width: 700px) {
  main { padding: .5rem; }
  th, td { padding: .3rem .4rem; font-size: .85rem; }
}

.hint { color: #5a6b62; font-size: .88rem; margin: .25rem 0 .75rem; }

/* ============ Payment grid — modern tiled heatmap ============ */
:root {
  --line: #eef1ef;
  --ink: #14261d;
  --paid: #33b06a; --paid-fg: #ffffff;
  --partial: #bfe3a2; --partial-fg: #2f5d24;
  --unpaid: #ffd645; --unpaid-fg: #6b5200;
  --idle: #f1f4f2; --idle-fg: #c4cec7;
}

.grid-toolbar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
                margin-bottom: .6rem; }
.grid-toolbar .search { flex: 1 1 240px; max-width: 340px; position: relative; }
.grid-toolbar .search input { padding-inline-start: 2rem; border-radius: 9px; border: 1px solid #d7ddd9; }
.grid-toolbar .search::before { content: "🔍"; position: absolute; inset-inline-start: .6rem;
                                top: 50%; transform: translateY(-50%); opacity: .45; font-size: .8rem; }
.grid-count { color: #71807a; font-size: .82rem; font-variant-numeric: tabular-nums; }

.legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 .7rem;
          font-size: .8rem; color: #556; }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend i { width: .95rem; height: .95rem; border-radius: 4px; display: inline-block;
            font-style: normal; text-align: center; line-height: .95rem; font-size: .62rem; }
.legend .l-paid { background: var(--paid); color: #fff; }
.legend .l-partial { background: var(--partial); color: var(--partial-fg); }
.legend .l-unpaid { background: var(--unpaid); color: var(--unpaid-fg); }
.legend .l-idle { background: var(--idle); }

.grid-scroll { overflow: auto; max-height: calc(100vh - 220px);
               border: 1px solid #e4e9e6; border-radius: 14px; background: #fff;
               box-shadow: 0 6px 20px -12px rgba(20,40,30,.35); }

.pay-grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%;
            font-variant-numeric: tabular-nums; }
.pay-grid th, .pay-grid td { border: 0; }

/* Header — light, quiet, sticky */
.pay-grid thead th { position: sticky; top: 0; z-index: 3; background: #fbfcfb;
                     color: #4a5a51; font-weight: 600; }
.pay-grid thead .yr-row th { font-size: .68rem; font-weight: 600; letter-spacing: .08em;
                             color: #9aa8a0; padding: .3rem .3rem .15rem; text-transform: uppercase; }
.pay-grid thead .mo-row th { top: 1.35rem; font-size: .72rem; padding: .1rem .3rem .35rem;
                             border-bottom: 1px solid var(--line); }
.pay-grid .mo { width: 2.6rem; min-width: 2.6rem; text-align: center; }
.pay-grid thead .col-now { color: var(--paid); font-weight: 700; }

/* Frozen customer column with a soft depth shadow */
.pay-grid .col-name { position: sticky; inset-inline-start: 0; z-index: 2; background: #fff;
                      text-align: start; min-width: 11rem; max-width: 11rem;
                      box-shadow: 8px 0 10px -8px rgba(20,40,30,.18); }
.pay-grid thead .col-name { z-index: 5; background: #fbfcfb; vertical-align: bottom;
                            padding-bottom: .4rem; }
.pay-grid tbody .col-name { padding: .1rem .6rem; }
.pay-grid .cust { display: flex; flex-direction: column; line-height: 1.1; }
.pay-grid .cust a { color: var(--ink); font-weight: 600; font-size: .84rem; text-decoration: none;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9.5rem; }
.pay-grid .cust a:hover { text-decoration: underline; }
.pay-grid .cust small { color: #93a099; font-size: .68rem; }

.pay-grid tbody tr:hover .col-name { background: #f5faf7; }
.pay-grid tbody tr:nth-child(even) .col-name { background: #fcfdfc; }

/* Cells become rounded heatmap chips separated by white gaps */
.pay-grid td { padding: 0; }
.cell-btn { display: block; width: 100%; min-height: 1.15rem; margin: 2px; padding: .12rem;
            border: 0; border-radius: 5px; background: var(--idle); color: var(--idle-fg);
            font: inherit; font-size: .72rem; line-height: 1; cursor: pointer;
            transition: transform .07s ease, box-shadow .07s ease; }
.cell-btn:hover { transform: scale(1.14); box-shadow: 0 2px 6px rgba(20,40,30,.28); position: relative; z-index: 1; }
.pay-grid td.paid .cell-btn { background: var(--paid); color: var(--paid-fg); font-weight: 700; }
.pay-grid td.partial .cell-btn { background: var(--partial); color: var(--partial-fg); font-weight: 700; }
.pay-grid td.owed .cell-btn { background: var(--unpaid); color: var(--unpaid-fg); font-weight: 700; }
.pay-grid td.none .cell-btn { background: var(--idle); }
.pay-grid td.col-now .cell-btn { box-shadow: inset 0 0 0 1.5px rgba(51,176,106,.55); }

/* Inline payment dialog */
dialog#pay-dialog { border: 0; border-radius: 14px; padding: 1.35rem;
                    width: min(92vw, 380px); box-shadow: 0 12px 40px rgba(0,0,0,.28); }
dialog#pay-dialog::backdrop { background: rgba(10,25,18,.45); backdrop-filter: blur(2px); }
dialog#pay-dialog h3 { margin: 0 0 .25rem; color: var(--ink); }
.dialog-close { display: flex; justify-content: flex-start; margin: 0 0 .25rem; }
.dialog-close button { width: auto; background: transparent; color: #889; border: 0;
                       font-size: 1.15rem; padding: .1rem .4rem; cursor: pointer; }
@media (max-width: 700px) {
  .grid-scroll { max-height: calc(100vh - 200px); }
  .pay-grid .col-name { min-width: 9rem; max-width: 9rem; }
  .pay-grid .cust a { max-width: 8rem; }
}

.tag-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem;
            border-radius: 999px; font-size: .78rem; color: #fff; margin: .15rem; }
.tag-remove { width: auto; background: transparent; border: 0; color: inherit; opacity: .85;
              font-size: .78rem; line-height: 1; padding: 0; margin: 0; cursor: pointer; }
.tag-remove:hover { opacity: 1; }

.acct-badge { display: inline-block; background: #eaf3ee; color: #167a43; font-size: .72rem;
              padding: .1rem .45rem; border-radius: 999px; margin-inline-start: .4rem;
              font-variant-numeric: tabular-nums; }