:root{--green:#176b5b;--green2:#0f5548;--mint:#eaf6f3;--bg:#f4f7f6;--card:#fff;--text:#20302c;--muted:#6c7a76;--border:#dbe4e1;--red:#b42318;--yellow:#8a5b00;--shadow:0 8px 24px rgba(25,70,60,.08)}
    *{box-sizing:border-box} html{overflow-x:hidden} body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;width:100%}
    button,input,select{font:inherit} .hidden{display:none!important}
    .topbar{position:sticky;top:0;z-index:30;background:var(--green2);color:#fff;padding:12px 18px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 12px rgba(0,0,0,.12)}
    .topbar-logo-wrap{background:transparent;border-radius:9px;padding:5px 7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:none}
    .topbar-logo{height:24px;width:auto;display:block}
    .brand{font-weight:850}.brand small{display:block;font-weight:500;opacity:.8;font-size:11px}.spacer{flex:1}.user-chip{font-size:12px;opacity:.95;display:flex;flex-direction:column;line-height:1.15;max-width:220px}
.user-chip strong{font-size:12px;color:#fff}
.user-chip small{font-size:10px;color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-identity{line-height:1.25}
.user-identity strong{display:block;font-size:12px;color:var(--text)}
.user-identity a{display:block;font-size:11px;color:var(--green);text-decoration:none;word-break:break-all}
.user-identity a:hover{text-decoration:underline}
.user-identity .user-id{display:block;font-size:9px;color:var(--muted);margin-top:2px}.btn{border:0;border-radius:9px;padding:10px 13px;font-weight:750;cursor:pointer}.btn-primary{background:var(--green);color:white}.btn-light{background:white;color:var(--green2)}.btn-ghost{background:transparent;color:inherit;border:1px solid currentColor}.btn-danger{background:#fff0ef;color:var(--red);border:1px solid #efc8c4}
    .wrap{max-width:1550px;margin:18px auto;padding:0 16px}.card{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
    .login{max-width:420px;margin:10vh auto;padding:26px}.login h1{margin:0 0 5px}.sub{color:var(--muted);font-size:13px;margin-bottom:20px}.field{margin-bottom:14px}.field label{display:block;font-size:12px;font-weight:800;margin-bottom:6px}.field input,.field select,.toolbar select,.toolbar input{width:100%;border:1px solid #c9d5d1;border-radius:9px;padding:10px 11px;background:white;outline:none}.field input:focus,.field select:focus,.toolbar select:focus,.toolbar input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(23,107,91,.1)}
    .toolbar{padding:14px;display:grid;grid-template-columns:minmax(280px,380px) 190px 110px auto auto auto;gap:10px;align-items:end;margin-bottom:12px}.toolbar .tfield label{display:block;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:5px}
    .btn-compact{padding:8px 11px;font-size:12.5px}
    #themeSelect option{color:var(--text);background:#fff}
    .toolbar-actions{padding:12px 14px;margin-bottom:12px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
    .action-group{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
    .action-group+.action-group{padding-left:14px;border-left:1px solid var(--border)}
    .action-label{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-right:2px}
    .status{font-size:12px;color:var(--muted);padding:0 4px 10px}.status.ok{color:var(--green)}.status.err{color:var(--red)}
    .summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}.kpi{padding:14px}.kpi span{display:block;font-size:11px;color:var(--muted);font-weight:800}.kpi strong{display:block;font-size:20px;margin-top:3px}
    .table-card{overflow:hidden}.table-head{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}.table-head h2{font-size:15px;margin:0}.table-head small{color:var(--muted)}
    .scroll{overflow:auto;max-height:68vh}.calendar{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:11px}.calendar th,.calendar td{border-right:1px solid var(--border);border-bottom:1px solid var(--border);height:34px;padding:3px;text-align:center;background:white}.calendar thead th{position:sticky;top:0;z-index:10;background:#f0f7f5;font-weight:850}.calendar .item-col{position:sticky;left:0;z-index:12;text-align:left;min-width:230px;max-width:230px;padding-left:9px}.calendar thead .item-col{z-index:20}.calendar .unit-col{position:sticky;left:230px;z-index:12;min-width:65px;background:white}.calendar thead .unit-col{z-index:20;background:#f0f7f5}.calendar .price-col{position:sticky;left:295px;z-index:12;min-width:78px;background:white;font-weight:700}.calendar thead .price-col{z-index:20;background:#f0f7f5}.calendar .total-col{position:sticky;right:0;z-index:12;min-width:90px;background:#f8fbfa;font-weight:800}.calendar thead .total-col{z-index:20;background:#dff0eb}.qty{width:38px;height:26px;border:1px solid transparent;background:transparent;text-align:center;border-radius:5px;padding:2px}.qty:hover{border-color:#ccd9d5;background:#fff}.qty:focus{border-color:var(--green);outline:none;background:#fff;box-shadow:0 0 0 2px rgba(23,107,91,.1)}.qty.nonzero{background:#eaf6f3;color:var(--green2);font-weight:800}.section-row td{background:#edf3f1!important;font-weight:850;text-align:left!important;padding-left:10px!important;height:30px}.section-row .item-col{background:#edf3f1!important}
    .tabs{display:flex;gap:8px;margin:0 0 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{background:white;border:1px solid var(--border);color:var(--text);flex-shrink:0;white-space:nowrap}.tab.active{background:var(--green);color:#fff;border-color:var(--green)}
    .panel{padding:16px}.panel h3{margin:0 0 12px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.list{border:1px solid var(--border);border-radius:10px;overflow:hidden}.row{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:10px;border-bottom:1px solid var(--border);align-items:center}.row:last-child{border:0}.row small{color:var(--muted)}
    .badge{display:inline-block;padding:3px 7px;border-radius:999px;background:var(--mint);color:var(--green2);font-size:10px;font-weight:800}.toast{position:fixed;right:18px;bottom:18px;z-index:60;background:#20302c;color:#fff;padding:11px 14px;border-radius:9px;box-shadow:var(--shadow);font-size:12px}.note{font-size:12px;color:var(--muted);line-height:1.5}
    @media(max-width:850px){.toolbar{grid-template-columns:1fr 1fr}.toolbar .btn{width:100%}.summary{grid-template-columns:1fr 1fr}.topbar{flex-wrap:wrap}.calendar .item-col{min-width:175px;max-width:175px}.calendar .unit-col{left:175px}.calendar .price-col{left:240px}.grid2{grid-template-columns:1fr}.action-group{flex:1 1 100%}.action-group+.action-group{padding-left:0;border-left:0;padding-top:10px;border-top:1px solid var(--border)}.action-group .btn{flex:1 1 auto}}
    @media(max-width:480px){
      .wrap{padding:0 10px;margin:12px auto}
      .login{margin:6vh auto;padding:20px;max-width:100%}
      .toolbar{grid-template-columns:1fr;padding:12px}
      .summary{grid-template-columns:1fr 1fr;gap:8px}
      .kpi{padding:10px}.kpi strong{font-size:16px}
      .table-head{flex-wrap:wrap}
      .calendar .item-col{min-width:130px;max-width:130px}
      .calendar .unit-col{left:130px;min-width:48px}
      .calendar .price-col{left:178px;min-width:62px}
      .qty{width:34px;height:34px;font-size:14px}
      .row{grid-template-columns:1fr;text-align:left}
      .btn{padding:11px 13px}
      .toolbar-actions{padding:10px}
      .action-group{gap:8px}
      .action-group .btn{flex:1 1 calc(50% - 4px)}
    }
    #auditTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

#auditTable th,
#auditTable td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

#auditTable th {
  background: #f7faf9;
  font-weight: 700;
  color: #1f2937;
}

#auditTable tbody tr:hover {
  background: #f8fbfa;
}

.cycle-history-panel{margin:16px 0;padding:16px;border:1px solid #cce7de;border-radius:14px;background:#f8fcfa}
.cycle-history-panel .section-card-head{margin-bottom:10px}
.audit-charge-history-head{margin:20px 0 10px}
.audit-charge-history-head h3{margin:0 0 4px}
#cycleHistoryTable{width:100%;border-collapse:collapse}
#cycleHistoryTable th,#cycleHistoryTable td{
  padding:10px 12px;border-bottom:1px solid var(--border);
  text-align:left;vertical-align:middle;white-space:nowrap
}
#cycleHistoryTable th{background:#f7faf9;font-weight:700;color:#1f2937}
#cycleHistoryTable tbody tr:hover{background:#f8fbfa}
.cycle-history-action{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800}
.cycle-history-closed{background:#e8f7ee;color:#176b3a}
.cycle-history-unlocked{background:#fff4d8;color:#8a5a00}
.cycle-confirm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}
.cycle-confirm-stat{padding:11px;border:1px solid var(--border);border-radius:11px;background:#f8fbfa}
.cycle-confirm-stat span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800}
.cycle-confirm-stat strong{display:block;margin-top:3px;color:var(--ink);font-size:15px}
.cycle-confirm-total{grid-column:1/-1;background:#eaf6f3;border-color:#cce7de}
.cycle-unlock-reason{width:100%;min-height:88px;resize:vertical;border:1px solid #c9d5d1;border-radius:10px;padding:10px 11px;font:inherit}
.cycle-unlock-reason:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(23,107,91,.1)}

.audit-action {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.audit-created {
  background: #e8f7ee;
  color: #176b3a;
}

.audit-updated {
  background: #fff4d8;
  color: #8a5a00;
}

.audit-deleted {
  background: #fdeaea;
  color: #a12626;
}


    .security-card{padding:18px;margin-bottom:14px}.security-card h3{margin:0 0 5px}.security-card .note{margin-top:0}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.settings-grid .card{padding:18px}.captcha-wrap{display:flex;justify-content:center;margin:10px 0 6px;min-height:65px}.link-btn{background:none;border:0;color:var(--green);font-weight:750;cursor:pointer;padding:6px 0;text-decoration:underline;text-underline-offset:2px}.login-actions{text-align:right;margin-top:3px}.success-note{color:var(--green);font-size:12px;line-height:1.5}.error-note{color:var(--red);font-size:12px;line-height:1.5}@media(max-width:850px){.settings-grid{grid-template-columns:1fr}}
  .system-footer{margin:22px auto 8px;text-align:center;color:var(--muted);font-size:11px;line-height:1.7}
.system-footer a{color:var(--green2);text-decoration:none;font-weight:700}
.system-footer a:hover{text-decoration:underline}

    .mobile-view-toggle{display:flex;gap:8px;margin-bottom:12px}
    .view-toggle-btn{background:#fff;border:1px solid var(--border);color:var(--text)}
    .view-toggle-btn.active{background:var(--green);color:#fff;border-color:var(--green)}
    .mobile-daily-card{padding:14px}
    .daily-top-grid{display:grid;grid-template-columns:1fr 220px;gap:12px;align-items:end}
    .daily-date-nav{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
    .daily-date-display{font-weight:850;text-align:center;padding:11px;border:1px solid var(--border);border-radius:9px;background:#fff}
    .daily-today-wrap{text-align:center;margin-top:8px}
    .daily-summary-bar{position:sticky;bottom:0;z-index:15;margin-top:12px;padding:12px 14px;border-top:1px solid var(--border);background:rgba(255,255,255,.97);display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
    .daily-category{margin-top:14px}
    .daily-category h4{margin:0;padding:10px 12px;background:#edf3f1;border:1px solid var(--border);border-bottom:0;border-radius:10px 10px 0 0;font-size:13px}
    .daily-item{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--border);border-bottom:0;background:#fff}
    .daily-item:last-child{border-bottom:1px solid var(--border);border-radius:0 0 10px 10px}
    .daily-item-info strong{display:block;font-size:14px}
    .daily-item-info small{display:block;color:var(--muted);margin-top:4px}
    .daily-stepper{display:grid;grid-template-columns:40px 48px 40px;gap:6px;align-items:center}
    .daily-stepper button{height:40px;border:1px solid var(--border);border-radius:9px;background:#fff;font-size:20px;font-weight:800;cursor:pointer}
    .daily-stepper input{width:48px;height:40px;text-align:center;border:1px solid var(--border);border-radius:9px;font-weight:850;background:#fff}

    .daily-search-wrap{
      position:relative;
      display:flex;
      align-items:center;
      margin-top:12px;
      width:100%;
    }
    .daily-search{
      width:100%;
      min-height:42px;
      padding:9px 36px;
      border:1px solid var(--border);
      border-radius:10px;
      background:#fff;
      color:var(--text);
      font:inherit;
      outline:none;
    }
    .daily-search:focus{
      border-color:var(--green);
      box-shadow:0 0 0 2px rgba(23,107,91,.08);
    }
    .daily-search-icon{
      position:absolute;
      left:12px;
      color:#71807b;
      font-size:16px;
      pointer-events:none;
    }
    .daily-search-clear{
      position:absolute;
      right:7px;
      width:28px;
      height:28px;
      border:0;
      border-radius:7px;
      background:transparent;
      color:#71807b;
      font-size:20px;
      cursor:pointer;
    }
    .daily-search-clear:hover{
      background:#edf3f1;
      color:var(--green2);
    }
    .daily-search-status{
      margin-top:8px;
      padding:7px 10px;
      border-radius:8px;
      background:#f2f7f5;
      color:#53635e;
      font-size:11px;
      font-weight:700;
    }
    .daily-existing-entry{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      width:100%;
      padding:7px 8px;
      border:0;
      border-radius:7px;
      background:transparent;
      text-align:left;
      color:inherit;
      font:inherit;
      cursor:pointer;
    }
    .daily-existing-entry:hover{
      background:rgba(255,255,255,.65);
    }
    .daily-existing-entry:focus-visible{
      outline:2px solid var(--green);
      outline-offset:2px;
    }
    .daily-existing-entry .daily-existing-name{font-weight:700}
    .daily-existing-entry .daily-existing-qty{
      white-space:nowrap;
      font-weight:800;
      color:var(--green2);
    }
    .daily-search-hidden{display:none!important}
    .daily-item.daily-jump-highlight{
      animation:dailyJumpFlash 1.25s ease;
      box-shadow:0 0 0 3px rgba(23,107,91,.16);
    }
    @keyframes dailyJumpFlash{
      0%{background:#eaf6f2}
      100%{background:#fff}
    }

    .daily-existing{padding:12px 14px;background:var(--mint);border:1px solid var(--border);border-radius:10px;margin-top:12px}
    .daily-existing strong{display:block;margin-bottom:6px}
    .daily-existing-list{font-size:12px;color:var(--text);line-height:1.6}
    @media(max-width:850px){
      .daily-top-grid{grid-template-columns:1fr}
    }
    @media(max-width:700px){
      #chargesTab .toolbar{grid-template-columns:1fr}
      #chargesTab .toolbar .tfield:nth-child(2),
      #chargesTab .toolbar .tfield:nth-child(3),
      #chargesTab .toolbar #backupDataBtn,
      #chargesTab .toolbar #cycleLockBtn,
      #chargesTab .toolbar #reloadBtn{display:none}
      .mobile-view-toggle{display:flex}
      #dailyEntryView{display:block}
      .daily-item{grid-template-columns:1fr auto}
      .daily-item-info strong{font-size:15px}
      .daily-stepper{grid-template-columns:42px 50px 42px}
      .daily-stepper button{height:44px}
      .daily-stepper input{height:44px}
      .daily-summary-bar{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
    }
    @media(min-width:701px){
      .mobile-view-toggle{display:flex}
      #dailyEntryView.hidden-desktop{display:none}
    }


    .recurring-date-cell{
      background:#eef1f2;
      text-align:center;
      color:#7b878d;
      font-weight:800;
      cursor:not-allowed;
      user-select:none;
    }
    .recurring-date-cell .recurring-start-tick{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:22px;
      height:22px;
      border-radius:50%;
      background:#dce9e5;
      color:#176b57;
      font-size:15px;
      line-height:1;
    }
    .recurring-date-cell .subscription-start-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:20px;
      height:20px;
      padding:0 4px;
      border-radius:5px;
      background:#ffffff;
      border:1px solid #8b989d;
      color:#4d5b60;
      font-size:11px;
      font-weight:900;
      line-height:1;
      margin-right:3px;
    }
    .recurring-date-cell .subscription-stop-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:20px;
      height:20px;
      border-radius:5px;
      background:#ffffff;
      border:1px solid #8b989d;
      color:#4d5b60;
      font-size:12px;
      font-weight:900;
      line-height:1;
      margin-left:3px;
    }
    .recurring-total{
      background:#f4f8f7;
      font-weight:800;
    }
    .recurring-prorate-note{
      display:block;
      margin-top:2px;
      font-size:10px;
      line-height:1.15;
      font-weight:700;
      color:#6f7f7a;
      white-space:nowrap;
    }

    .calendar-tools{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      padding:10px 12px 2px;
    }
    .calendar-search-wrap{
      position:relative;
      display:flex;
      align-items:center;
      width:min(360px,100%);
    }
    .calendar-search{
      width:100%;
      min-height:36px;
      padding:8px 34px 8px 34px;
      border:1px solid var(--border);
      border-radius:8px;
      background:#fff;
      color:var(--text);
      font:inherit;
      outline:none;
    }
    .calendar-search:focus{
      border-color:var(--green);
      box-shadow:0 0 0 2px rgba(23,107,91,.08);
    }
    .calendar-search-icon{
      position:absolute;
      left:11px;
      color:#71807b;
      font-size:16px;
      pointer-events:none;
    }
    .calendar-clear-btn{
      position:absolute;
      right:6px;
      width:27px;
      height:27px;
      border:0;
      border-radius:6px;
      background:transparent;
      color:#71807b;
      font-size:19px;
      line-height:1;
      cursor:pointer;
    }
    .calendar-clear-btn:hover{
      background:#edf3f1;
      color:var(--green2);
    }
    .calendar-category-actions{
      display:flex;
      align-items:center;
      gap:7px;
      flex-wrap:wrap;
    }
    .calendar-filter-status{
      margin:6px 12px 0;
      padding:7px 10px;
      border-radius:7px;
      background:#f2f7f5;
      color:#53635e;
      font-size:11px;
      font-weight:700;
    }
    .section-row{
      cursor:pointer;
      user-select:none;
    }
    .calendar-category-toggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:18px;
      height:18px;
      margin-right:5px;
      border:0;
      padding:0;
      background:transparent;
      color:#355b52;
      font-size:13px;
      font-weight:900;
      vertical-align:middle;
      cursor:pointer;
    }
    .section-row:hover td{
      background:#e4eeeb!important;
    }
    .calendar-no-results td{
      padding:18px!important;
      color:#64748b;
      text-align:center!important;
      background:#fff!important;
      font-weight:700;
    }
    @media(max-width:650px){
      .calendar-tools{align-items:stretch}
      .calendar-search-wrap{width:100%}
      .calendar-category-actions{width:100%}
      .calendar-category-actions .btn{flex:1}
    }

    .recurring-legend{
      display:flex;
      flex-wrap:wrap;
      gap:8px 14px;
      align-items:center;
      margin:8px 0 10px;
      padding:8px 10px;
      border:1px solid #dce5e2;
      border-radius:8px;
      background:#f8fbfa;
      color:#53635e;
      font-size:11px;
      font-weight:700;
    }
    .recurring-legend-item{
      display:inline-flex;
      align-items:center;
      gap:5px;
      white-space:nowrap;
    }
    .recurring-legend-symbol{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:20px;
      height:20px;
      padding:0 4px;
      border-radius:5px;
      background:#fff;
      border:1px solid #8b989d;
      color:#4d5b60;
      font-size:11px;
      font-weight:900;
      line-height:1;
    }
    .recurring-legend-symbol.tick{
      border-radius:50%;
      background:#dce9e5;
      border-color:#dce9e5;
      color:#176b57;
      font-size:14px;
    }
    .recurring-legend-symbol.grey{
      width:24px;
      min-width:24px;
      background:#eef1f2;
      border-color:#d7dfe1;
    }


    /* Master Calendar readability: subtle banded rows + row hover */
    #calendarTable tbody tr:not(.section-row):nth-child(even) > td:not(.recurring-date-cell){
      background:#f8fbfc;
    }

    #calendarTable tbody tr:not(.section-row):hover > td:not(.recurring-date-cell){
      background:#eef6f7;
    }

    #calendarTable tbody tr:not(.section-row):hover > td.recurring-date-cell{
      background:#e5eaec;
    }

    #calendarTable tbody tr:not(.section-row):hover > td.item-col,
    #calendarTable tbody tr:not(.section-row):hover > td.unit-col,
    #calendarTable tbody tr:not(.section-row):hover > td.price-col,
    #calendarTable tbody tr:not(.section-row):hover > td.total-col{
      box-shadow: inset 0 1px 0 rgba(54, 102, 92, 0.08),
                  inset 0 -1px 0 rgba(54, 102, 92, 0.08);
    }

    #calendarTable tbody tr:not(.section-row):hover input.qty{
      background:#ffffff;
    }


    /* Highlight today's date when it appears in the displayed billing cycle */
    #calendarTable th.today-column{
      background:#dff1eb;
      box-shadow: inset 2px 0 0 #8fb9aa, inset -2px 0 0 #8fb9aa;
      font-weight:900;
    }

    #calendarTable td.today-column:not(.recurring-date-cell){
      background:#f1f8f5;
      box-shadow: inset 2px 0 0 rgba(143,185,170,.55),
                  inset -2px 0 0 rgba(143,185,170,.55);
    }

    #calendarTable td.today-column.recurring-date-cell{
      background:#e4eeea;
      box-shadow: inset 2px 0 0 rgba(143,185,170,.55),
                  inset -2px 0 0 rgba(143,185,170,.55);
    }

    #calendarTable tbody tr:not(.section-row):hover > td.today-column:not(.recurring-date-cell){
      background:#e7f3ef;
    }


/* =========================================================
   v38 — Professional UI Polish
   Visual/UX improvements only. Billing calculations unchanged.
   ========================================================= */
:root{
  --surface:#ffffff;
  --surface-soft:#f7faf9;
  --surface-mint:#f0f8f5;
  --ink:#18332d;
  --muted2:#72817d;
  --shadow-soft:0 10px 30px rgba(21,72,61,.08);
  --shadow-card:0 5px 18px rgba(20,63,55,.07);
  --radius-lg:18px;
  --radius-md:13px;
}
body{
  background:
    radial-gradient(circle at 90% 4%, rgba(63,160,132,.08), transparent 24rem),
    #f5f8f7;
  color:var(--ink);
}
.card{
  border-radius:var(--radius-lg);
  border:1px solid rgba(19,85,72,.10);
  box-shadow:var(--shadow-card);
}
.btn{
  border-radius:10px;
  font-weight:750;
  transition:transform .14s ease, box-shadow .14s ease, opacity .14s ease, background .14s ease;
}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn-primary{box-shadow:0 6px 16px rgba(20,110,89,.16)}
input,select,textarea{
  border-radius:10px!important;
  min-height:42px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:rgba(32,132,106,.65)!important;
  box-shadow:0 0 0 4px rgba(50,151,123,.10);
}
.topbar{
  padding:10px 18px;
  min-height:66px;
  background:linear-gradient(120deg,var(--green2),var(--green));
  box-shadow:0 8px 30px rgba(18,74,62,.16);
}
.topbar .brand{letter-spacing:-.2px}
.topbar .brand small{opacity:.75}
.topbar select{min-height:36px!important}
.app-account{position:relative}
.account-trigger{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#fff;
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 9px 6px 7px;
  border-radius:12px;
  cursor:pointer;
  min-width:174px;
  text-align:left;
}
.account-trigger:hover{background:rgba(255,255,255,.16)}
.account-avatar,.staff-avatar{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  flex:0 0 auto;
  font-size:12px;font-weight:900;
}
.account-avatar{background:#fff;color:var(--green2)}
.account-trigger-copy{min-width:0;flex:1}
.account-trigger-name{display:block;font-size:12px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-trigger-role{display:block;font-size:10px;opacity:.75;margin-top:1px}
.account-chevron{font-size:12px;opacity:.75}
.account-menu{
  position:absolute;right:0;top:calc(100% + 8px);width:285px;
  background:#fff;color:var(--ink);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 20px 50px rgba(10,49,41,.20);
  padding:10px;z-index:100;
}
.account-menu.hidden{display:none}
.account-menu-profile{padding:9px 10px 12px;border-bottom:1px solid var(--border);margin-bottom:7px}
.account-menu-profile .user-chip{color:var(--ink);display:block}
.account-menu-profile .badge{margin-top:7px}
.account-menu-action{
  width:100%;border:0;background:transparent;text-align:left;
  border-radius:9px;padding:9px 10px;cursor:pointer;color:var(--ink);font-weight:700
}
.account-menu-action:hover{background:var(--surface-mint)}
.account-menu-action.danger{color:var(--red)}

.wrap{
  max-width:1540px;
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:22px;
  align-items:start;
}
.tabs{
  grid-column:1;
  position:sticky;
  top:84px;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:12px;
  border:1px solid rgba(19,85,72,.09);
  border-radius:16px;
  background:rgba(255,255,255,.90);
  box-shadow:var(--shadow-card);
  backdrop-filter:blur(10px);
  align-self:start;
  z-index:12;
}
.tabs .tab{
  width:100%;
  justify-content:flex-start;
  text-align:left;
  background:transparent;
  color:#4b625c;
  border:0;
  padding:10px 11px;
  box-shadow:none;
}
.tabs .tab:hover{background:#f1f7f5;color:var(--green2)}
.tabs .tab.active{
  background:linear-gradient(100deg,#e8f6f1,#f4fbf8);
  color:var(--green2);
  box-shadow:inset 3px 0 0 var(--green);
}
.nav-group-label{
  color:#8a9995;font-size:9px;font-weight:900;letter-spacing:.11em;
  padding:11px 10px 4px;text-transform:uppercase
}
.wrap > section{grid-column:2;min-width:0}
.page-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin:2px 2px 16px;
}
.page-heading-copy h1{font-size:24px;letter-spacing:-.5px;margin:0 0 4px;color:var(--ink)}
.page-heading-copy p{margin:0;color:var(--muted2);font-size:13px;line-height:1.5}
.page-heading-kicker{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green);margin-bottom:5px
}
.panel>h3,.table-head h2{letter-spacing:-.25px;color:var(--ink)}
.note,.status{color:var(--muted2)}

.summary{gap:12px}
.kpi{
  position:relative;overflow:hidden;
  min-height:100px;padding:17px 18px!important;
}
.kpi:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#b6dcd1
}
.kpi span{font-size:11px!important;letter-spacing:.02em;color:#647b75!important;font-weight:800!important}
.kpi strong{font-size:22px!important;letter-spacing:-.5px}
.kpi.kpi-grand{
  background:linear-gradient(135deg,#ecf8f4,#fff);
  border-color:rgba(25,126,101,.22);
}
.kpi.kpi-grand:before{background:var(--green)}
.kpi.kpi-grand strong{font-size:27px!important;color:var(--green2)}
.toolbar{
  border-color:rgba(19,85,72,.12);
}
.toolbar-actions{
  background:rgba(255,255,255,.72);
}
#cycleStatus.badge{padding:7px 10px;font-weight:900}
.badge{
  border-radius:999px!important;
  letter-spacing:.02em;
  font-size:10px!important;
  font-weight:850!important;
}
.status-badge-success{background:#e9f8f0!important;color:#18744d!important}
.status-badge-warning{background:#fff6df!important;color:#946200!important}
.status-badge-danger{background:#fff0ef!important;color:#b33b35!important}
.status-badge-info{background:#ebf4ff!important;color:#245f9e!important}

.list .row{
  border-radius:13px;
  margin-bottom:7px;
  border:1px solid rgba(19,85,72,.09);
  background:#fff;
}
.staff-card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:12px!important;
  padding:13px!important;
}
.staff-profile{display:flex;gap:11px;align-items:center;min-width:0}
.staff-avatar{background:linear-gradient(135deg,#dff3ec,#f3faf8);color:var(--green2);border:1px solid #cfe7df}
.staff-profile-main{min-width:0}
.staff-name{font-weight:900;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.staff-email{font-size:11px;color:var(--muted2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.staff-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px;font-size:10px;color:#667b75}
.staff-meta-dot{opacity:.45}
.staff-actions{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  padding-top:10px;
  border-top:1px solid #edf3f1;
}
.staff-actions .btn-loading{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.staff-actions .btn-loading::before{
  content:"";
  width:12px;
  height:12px;
  flex:0 0 12px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:staff-action-spin .7s linear infinite;
}
@keyframes staff-action-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .staff-actions .btn-loading::before{animation:none}
}
.btn-subtle{background:#f6f9f8!important;color:#36554d!important;border:1px solid #dde9e5!important}
.btn-subtle:hover{background:#edf6f2!important}
.staff-empty,.polished-empty{
  text-align:center;padding:30px 18px!important;background:linear-gradient(180deg,#fff,#f9fbfa)!important
}
.empty-icon{
  width:44px;height:44px;border-radius:14px;background:#edf7f3;
  display:grid;place-items:center;margin:0 auto 10px;font-size:20px
}
.empty-title{font-weight:900;margin-bottom:4px;color:var(--ink)}
.empty-copy{color:var(--muted2);font-size:12px;line-height:1.5}

.daily-item-row.has-quantity{
  background:#f0faf6!important;
  border-color:#bfe6d9!important;
}
.daily-summary-bar{
  box-shadow:0 -7px 24px rgba(17,75,63,.10);
  border-top:1px solid rgba(31,117,94,.10);
}
.daily-save-flash{color:#197a57!important;font-weight:800}
.table-card{overflow:hidden}
.calendar-tools{background:#fbfdfc}
.calendar tbody tr:hover td{background-color:#f5faf8}
.calendar .today-col{box-shadow:inset 2px 0 0 rgba(29,125,99,.30),inset -2px 0 0 rgba(29,125,99,.30)}

.loading-skeleton{
  position:relative;overflow:hidden;background:#eef3f1!important;color:transparent!important;
  min-height:48px;border-radius:11px
}
.loading-skeleton:after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:skeletonSweep 1.3s infinite;
}
@keyframes skeletonSweep{100%{transform:translateX(100%)}}

.app-modal-backdrop{
  position:fixed;inset:0;background:rgba(9,35,30,.48);
  display:grid;place-items:center;padding:18px;z-index:9999;
  backdrop-filter:blur(3px);
}
.app-modal-backdrop.hidden{display:none}
.app-modal{
  width:min(520px,100%);
  background:#fff;border:1px solid rgba(19,85,72,.10);
  border-radius:18px;box-shadow:0 28px 80px rgba(5,33,27,.28);
  overflow:hidden;animation:modalIn .15s ease-out;
}
@keyframes modalIn{from{transform:translateY(8px) scale(.985);opacity:.5}to{transform:none;opacity:1}}
.app-modal-head{padding:19px 20px 10px}
.app-modal-title{font-size:18px;font-weight:900;letter-spacing:-.3px;margin:0;color:var(--ink)}
.app-modal-body{padding:4px 20px 18px;color:#5e726d;font-size:13px;line-height:1.6}
.app-modal-message{white-space:pre-line;margin-bottom:13px}
.app-modal-input{width:100%;font-size:14px}
.app-modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:13px 20px;background:#f8faf9;border-top:1px solid var(--border)}
.app-modal-danger .app-modal-title{color:#a93631}
.app-modal-danger .app-modal-head{background:#fff8f7}
.app-modal-select-grid{display:grid;gap:12px}
.app-modal-field label{display:block;font-size:11px;font-weight:850;color:#49645d;margin-bottom:5px}

.toast{
  border-radius:12px!important;
  box-shadow:0 15px 40px rgba(5,35,29,.22)!important;
}

@media(max-width:1050px){
  .wrap{grid-template-columns:190px minmax(0,1fr);gap:16px}
}
@media(max-width:850px){
  .wrap{display:block}
  .tabs{
    position:sticky;top:76px;
    flex-direction:row;
    overflow-x:auto;
    border-radius:12px;
    padding:7px;
    margin-bottom:14px;
    -webkit-overflow-scrolling:touch;
  }
  .tabs .tab{width:auto;min-width:max-content;padding:8px 10px}
  .nav-group-label{display:none}
  .page-heading{margin-top:10px}
  .page-heading-copy h1{font-size:21px}
  .account-trigger{min-width:0}
  .account-trigger-copy{display:none}
  .account-menu{position:fixed;right:12px;top:70px;width:min(310px,calc(100vw - 24px))}
  .staff-card{grid-template-columns:1fr!important}
  .staff-actions{justify-content:flex-start}
}
@media(max-width:560px){
  .topbar{padding:9px 11px}
  .topbar-logo{height:21px}
  .topbar .brand{font-size:13px}
  #themeSelect{display:none}
  .page-heading-copy p{font-size:12px}
  .summary{grid-template-columns:1fr 1fr!important}
  .kpi{min-height:90px}
  .kpi strong{font-size:18px!important}
  .kpi.kpi-grand strong{font-size:21px!important}
}


/* =========================================================
   v39 — Monthly Charges & Daily Entry UX Upgrade
   Billing/data logic unchanged.
   ========================================================= */
#chargesTab .mobile-view-toggle{
  display:inline-flex;
  padding:4px;
  gap:4px;
  background:#eaf2ef;
  border:1px solid rgba(19,85,72,.10);
  border-radius:12px;
  margin-bottom:14px;
}
#chargesTab .view-toggle-btn{
  border:0!important;
  background:transparent;
  color:#587069;
  box-shadow:none;
  padding:8px 14px;
}
#chargesTab .view-toggle-btn.active{
  background:#fff;
  color:var(--green2);
  box-shadow:0 3px 10px rgba(20,70,59,.10);
}
#chargesTab > .toolbar{
  display:grid;
  grid-template-columns:minmax(210px,1.2fr) minmax(220px,1fr) minmax(120px,.55fr) auto auto auto;
  align-items:end;
  gap:12px;
  padding:15px;
  background:linear-gradient(180deg,#fff,#fbfdfc);
}
#chargesTab > .toolbar .tfield{margin:0}
#chargesTab > .toolbar .tfield label{
  display:block;
  font-size:10px;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:#71847f;
  margin-bottom:6px;
}
#chargesTab > .toolbar #cycleStatus{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:90px;
  border:1px solid rgba(19,85,72,.08);
}
#chargesTab > .toolbar-actions{
  border-radius:14px;
  margin-top:10px;
}
#chargesTab > #saveStatus{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:10px 2px 0;
  min-height:20px;
}
#chargesTab .summary{margin-top:12px}

.mobile-daily-card{
  overflow:visible;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.daily-control-card{
  background:linear-gradient(135deg,#fff,#f6fbf9);
  border:1px solid rgba(19,85,72,.11);
  border-radius:16px;
  box-shadow:var(--shadow-card);
  padding:14px;
  margin-bottom:12px;
}
.daily-top-grid{grid-template-columns:minmax(220px,1fr) minmax(260px,.8fr)!important}
.daily-date-display{
  min-height:44px;
  display:grid;
  place-items:center;
  color:var(--ink);
  font-size:13px;
  background:#fff;
}
.daily-date-nav .btn{min-width:44px;font-size:20px}
.daily-today-wrap{margin-top:6px!important}
.daily-search-wrap{margin-top:0!important;margin-bottom:10px!important}
.daily-search{background:#fff!important}
.daily-existing{
  background:linear-gradient(135deg,#eff9f5,#f9fcfb)!important;
  border-color:#cce8df!important;
  border-radius:14px!important;
  margin:10px 0 12px!important;
}
.daily-existing > strong{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.055em;
  color:#54746b;
}
.daily-existing-list{display:flex;gap:6px;flex-wrap:wrap}
.daily-existing-entry{
  background:#fff!important;
  border:1px solid #cfe6df!important;
  border-radius:999px!important;
  padding:6px 9px!important;
}
.daily-category{
  background:#fff;
  border:1px solid rgba(19,85,72,.10);
  border-radius:15px;
  overflow:hidden;
  margin-top:11px!important;
  box-shadow:0 3px 12px rgba(20,63,55,.045);
}
.daily-category h4{
  border:0!important;
  border-radius:0!important;
  padding:10px 13px!important;
  background:#f3f7f5!important;
  color:#36574e;
  font-size:11px!important;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.daily-item{
  border:0!important;
  border-top:1px solid #edf2f0!important;
  padding:12px 13px!important;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.daily-item.has-quantity{
  background:linear-gradient(90deg,#effaf6,#fbfefd)!important;
  box-shadow:inset 4px 0 0 #4aa98c;
}
.daily-item-info strong{font-size:14px!important;color:var(--ink)}
.daily-item-info small{color:#788984!important}
.daily-stepper{
  grid-template-columns:42px 54px 42px!important;
  gap:5px!important;
  padding:3px;
  background:#f4f7f6;
  border:1px solid #e1ebe7;
  border-radius:12px;
}
.daily-stepper button{
  width:42px;
  height:42px!important;
  border:0!important;
  background:#fff!important;
  border-radius:9px!important;
  color:var(--green2);
  box-shadow:0 1px 4px rgba(20,63,55,.08);
}
.daily-stepper button:hover:not(:disabled){background:#edf8f4!important}
.daily-stepper input{
  width:54px!important;
  height:42px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:15px;
  color:var(--ink);
}
.daily-stepper button:disabled,.daily-stepper input:disabled{opacity:.45;cursor:not-allowed}
.daily-summary-bar{
  border:1px solid rgba(19,85,72,.12)!important;
  border-radius:15px 15px 0 0;
  background:rgba(255,255,255,.97)!important;
  backdrop-filter:blur(12px);
  padding:12px 15px!important;
}
.daily-summary-bar #dailyEntryTotal{
  color:var(--green2);
  font-size:21px;
  letter-spacing:-.4px;
}
#dailySaveStatus{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:18px;
  margin-top:2px;
}
#dailySaveStatus.saving:before{
  content:'';
  width:10px;height:10px;
  border:2px solid #bdd6cf;
  border-top-color:var(--green);
  border-radius:50%;
  animation:dailySpin .65s linear infinite;
}
#dailySaveStatus.saved{color:#18744d!important;font-weight:850}
#dailySaveStatus.saved:before{content:'✓';font-weight:950}
#dailySaveStatus.error{color:#b33b35!important;font-weight:750}
#dailySaveStatus.locked{color:#946200!important;font-weight:750}

/* v51 — Daily Entry read-only recurring rows + floating save feedback */
.daily-item.daily-readonly{
  background:#f2f5f4!important;
  border-color:#d7e1de!important;
}
.daily-item.daily-readonly .daily-item-info strong{color:#526560}
.daily-item.daily-readonly .daily-item-info small{color:#778783}
.daily-readonly-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:7px 10px;border-radius:9px;
  border:1px solid #d3dedb;background:#e8eeec;color:#5c6d68;
  font-size:11px;font-weight:850;text-align:center;white-space:nowrap;
}
.daily-save-toast{
  position:fixed;top:78px;left:50%;transform:translateX(-50%) translateY(-8px);
  z-index:220;max-width:min(92vw,520px);padding:10px 14px;border-radius:12px;
  box-shadow:0 12px 30px rgba(20,67,57,.18);font-size:12px;font-weight:850;
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
}
.daily-save-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.daily-save-toast.saved{background:#e8f7ef;color:#166534;border:1px solid #b9e4c9}
.daily-save-toast.error{background:#fff0ef;color:#a12626;border:1px solid #efc8c4}
@media(max-width:850px){.daily-save-toast{top:70px}}
@keyframes dailySpin{to{transform:rotate(360deg)}}
.daily-no-resident{
  padding:34px 18px;
  text-align:center;
  background:#fff;
  border:1px dashed #cbdcd7;
  border-radius:15px;
  color:#6d817b;
}
.daily-no-resident strong{display:block;color:var(--ink);margin-bottom:4px}

@media(max-width:1180px){
  #chargesTab > .toolbar{grid-template-columns:1fr 1fr 150px;}
  #chargesTab > .toolbar > button{width:100%}
}
@media(max-width:850px){
  #chargesTab > .toolbar{grid-template-columns:1fr 1fr;}
  #chargesTab > .toolbar .tfield:nth-child(3){grid-column:1/-1}
  .daily-control-card{
    position:sticky;
    top:132px;
    z-index:11;
    box-shadow:0 9px 24px rgba(17,75,63,.12);
  }
}
@media(max-width:620px){
  #chargesTab .mobile-view-toggle{width:100%;display:grid;grid-template-columns:1fr 1fr}
  #chargesTab > .toolbar{grid-template-columns:1fr;}
  #chargesTab > .toolbar .tfield:nth-child(3){grid-column:auto}
  .daily-top-grid{grid-template-columns:1fr!important}
  .daily-control-card{top:126px;padding:11px}
  .daily-category{border-radius:13px}
  .daily-item{grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important}
  .daily-stepper{grid-template-columns:40px 48px 40px!important}
  .daily-stepper button{width:40px}
  .daily-stepper input{width:48px!important}
  .daily-summary-bar{margin-left:-1px;margin-right:-1px}
}


/* =========================================================
   v40 — Login + Theme UI refinement
   ========================================================= */
#loginView.wrap{
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  max-width:none;
  padding:34px 18px 24px;
  gap:22px;
}
#loginView .login{
  width:min(420px,100%);
  margin:0!important;
  padding:28px 26px!important;
  border-radius:20px;
  box-shadow:0 18px 50px rgba(16,65,55,.12);
  background:rgba(255,255,255,.96);
}
#loginView .login img{height:52px!important;margin-bottom:12px!important}
#loginView .login h1{font-size:26px;letter-spacing:-.45px;line-height:1.12}
#loginView .login .sub{margin-bottom:22px;color:#71817d}
#loginView .login .field{margin-bottom:13px}
#loginView .login input{min-height:45px}
#loginView .remember-device-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:2px 0 13px;
  color:#314640;
  cursor:pointer;
}
#loginView .remember-device-option input{
  min-height:0;
  width:17px;
  height:17px;
  margin:2px 0 0;
  flex:0 0 auto;
  accent-color:var(--green2);
}
#loginView .remember-device-option span{display:flex;flex-direction:column;gap:3px;line-height:1.25}
#loginView .remember-device-option strong{font-size:13px}
#loginView .remember-device-option small{font-size:11px;color:#71817d;font-weight:500}
#loginView .login #loginBtn{min-height:44px;margin-top:2px}
#loginView .captcha-wrap{margin:12px 0 9px}
#loginView .login-actions{text-align:center;margin-top:7px}
#loginView .system-footer{
  width:min(720px,100%);
  text-align:center;
  margin:0!important;
  color:#74827e;
  font-size:11px;
  line-height:1.7;
}
#loginView .system-footer a{color:var(--green2);font-weight:750}
@media(max-width:560px){
  #loginView.wrap{justify-content:flex-start;padding-top:26px;gap:17px}
  #loginView .login{padding:22px 18px!important;border-radius:17px}
  #loginView .login h1{font-size:23px}
}

.theme-picker{position:relative}
.theme-trigger{
  min-height:38px;
  display:flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.10);
  color:#fff;
  border-radius:11px;
  padding:7px 10px;
  font-size:11px;font-weight:800;
  cursor:pointer;
}
.theme-trigger:hover{background:rgba(255,255,255,.16)}
.theme-dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px rgba(255,255,255,.45)}
.theme-menu{
  position:absolute;right:0;top:calc(100% + 8px);
  width:210px;
  background:#fff;color:var(--ink);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 18px 45px rgba(10,49,41,.20);
  padding:8px;z-index:130;
}
.theme-menu.hidden{display:none}
.theme-menu-title{padding:6px 8px 8px;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#81908c}
.theme-option{
  width:100%;display:flex;align-items:center;gap:9px;
  border:0;background:transparent;border-radius:9px;
  padding:9px 10px;text-align:left;cursor:pointer;color:var(--ink);font-weight:750
}
.theme-option:hover{background:#f3f7f5}
.theme-option.active{background:var(--mint);color:var(--green2)}
.theme-swatch{width:14px;height:14px;border-radius:50%;flex:0 0 auto;border:1px solid rgba(0,0,0,.08)}
.theme-check{margin-left:auto;color:var(--green);font-weight:900;opacity:0}
.theme-option.active .theme-check{opacity:1}
@media(max-width:850px){
  .theme-menu{position:fixed;right:12px;top:70px;width:min(260px,calc(100vw - 24px))}
  .theme-trigger-label{display:none}
}


/* v41 — login visibility safety fix
   The polished #loginView.wrap rule in v40 was more specific than .hidden,
   so the login screen could remain visible after a successful sign-in. */
#loginView.wrap.hidden{
  display:none!important;
}


/* =========================================================
   v43 — Management & Admin UX Polish
   Database/billing logic unchanged.
   ========================================================= */
.management-grid{
  display:grid;
  grid-template-columns:minmax(300px,.8fr) minmax(420px,1.35fr);
  gap:16px;
  align-items:start;
}
.management-form-card{position:sticky;top:84px}
.section-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:12px;flex-wrap:wrap
}
.section-card-head h3{margin:0}
.section-card-head .note{margin:3px 0 0}
.list-search{
  position:relative;min-width:220px;flex:0 1 320px
}
.list-search input{width:100%;padding-right:34px}
.list-search .search-mark{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  color:#8a9995;pointer-events:none
}
.management-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:24px;padding:0 8px;border-radius:999px;
  background:#edf7f3;color:var(--green2);font-size:10px;font-weight:900
}
.entity-list .row{
  grid-template-columns:minmax(0,1fr) auto auto!important;
  padding:12px 13px
}
.entity-main{min-width:0}
.entity-title{font-weight:900;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entity-sub{font-size:11px;color:var(--muted2);margin-top:3px}
.entity-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.entity-list .badge{justify-self:end}
.entity-row-hidden{display:none!important}

.admin-table-wrap{
  overflow:auto;
  margin-top:14px;
  border:1px solid rgba(19,85,72,.10);
  border-radius:14px;
  background:#fff;
}
.admin-table-wrap table{margin:0;min-width:820px}
.admin-table-wrap thead th{
  position:sticky;top:0;z-index:2;
  background:#f3f7f5;
  color:#45635b;
  font-size:10px;
  letter-spacing:.045em;
  text-transform:uppercase;
  border-bottom:1px solid #dfeae6
}
.admin-table-wrap tbody tr:hover td{background:#f8fbfa}
.admin-toolbar{
  background:linear-gradient(180deg,#fff,#f8fbfa)!important;
  border-radius:14px!important;
  padding:13px!important
}
.admin-toolbar .tfield label{
  font-size:10px!important;font-weight:900!important;
  letter-spacing:.05em;text-transform:uppercase;color:#71847f
}
.admin-status{
  display:flex;align-items:center;gap:7px;
  min-height:24px;margin-top:9px;font-size:11px;color:var(--muted2)
}
.admin-status:empty{display:none}
.security-summary{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px
}
.security-summary-card{
  border:1px solid rgba(19,85,72,.10);border-radius:13px;
  padding:12px 13px;background:#fbfdfc
}
.security-summary-card span{
  display:block;font-size:9px;font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;color:#81908c;margin-bottom:4px
}
.security-summary-card strong{font-size:16px;color:var(--ink)}
.backup-create-card{
  background:linear-gradient(135deg,#f0f9f6,#fff)!important;
  border-color:#cce7de!important
}
.backup-list .row{grid-template-columns:minmax(0,1fr) auto!important}
.settings-grid .security-card{
  padding:20px!important;
  border-radius:16px!important
}
.settings-grid .security-card h3{margin-bottom:5px}
.settings-grid .security-card .note{line-height:1.55}
.settings-grid .security-card button{min-width:150px}
.settings-section-icon{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;background:#edf7f3;color:var(--green2);
  font-weight:900;margin-bottom:10px
}
.audit-action-badge{
  display:inline-flex;padding:4px 7px;border-radius:999px;
  background:#eef5f3;color:#47645c;font-size:9px;font-weight:900
}

@media(max-width:1000px){
  .management-grid{grid-template-columns:1fr}
  .management-form-card{position:static}
}
@media(max-width:650px){
  .section-card-head{align-items:stretch}
  .list-search{min-width:0;flex:1 1 100%}
  .entity-list .row{grid-template-columns:minmax(0,1fr) auto!important}
  .entity-list .row .badge{grid-column:2}
  .entity-actions{grid-column:1/-1;justify-content:flex-start}
  .security-summary{grid-template-columns:1fr}
  .settings-grid .security-card{padding:16px!important}
  .cycle-confirm-grid{grid-template-columns:1fr}
  .cycle-confirm-total{grid-column:auto}
}


/* v44 — compact admin load buttons */
#loadAuditBtn,
#loadLoginActivityBtn{
  width:auto!important;
  min-width:max-content!important;
  white-space:nowrap!important;
  justify-self:start;
  padding-left:18px!important;
  padding-right:18px!important;
  line-height:1.2;
}

#loadAuditBtn{
  min-width:165px!important;
}

#loadLoginActivityBtn{
  min-width:170px!important;
}


/* =========================================================
   v46 — Final Mobile & Accessibility Polish
   No billing/database logic changes.
   ========================================================= */

/* Clear keyboard focus across the app */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid rgba(32,132,106,.28)!important;
  outline-offset:2px;
}

/* Prevent long labels/emails from breaking layouts */
.user-chip,
.entity-title,
.entity-sub,
.staff-email,
.note,
.status,
td,
th{
  overflow-wrap:anywhere;
}

/* Mobile navigation behaves more like a native tab strip */
@media(max-width:850px){
  .tabs{
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tabs .tab{
    scroll-snap-align:start;
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }

  /* Keep touch targets comfortably tappable */
  .btn,
  button,
  select,
  input[type="button"],
  input[type="submit"]{
    min-height:44px;
  }

  .btn-compact{
    min-height:40px!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
  }

  /* Cleaner page spacing on smaller screens */
  .wrap{padding-left:10px!important;padding-right:10px!important}
  .page-heading{margin-bottom:12px}
  .page-heading-copy h1{line-height:1.15}
  .page-heading-copy p{max-width:680px}

  /* Cards should not feel cramped on mobile */
  .card.panel,
  .security-card{
    padding:14px!important;
  }

  /* Management action rows stack naturally */
  .entity-list .row,
  .staff-card{
    gap:10px!important;
  }
  .entity-actions,
  .staff-actions{
    width:100%;
  }
  .entity-actions .btn,
  .staff-actions .btn{
    flex:1 1 auto;
  }

  /* Tables remain readable with clear horizontal affordance */
  .admin-table-wrap{
    position:relative;
    -webkit-overflow-scrolling:touch;
  }
  .admin-table-wrap:before{
    content:"Swipe horizontally to view full table";
    position:sticky;
    left:0;
    display:block;
    width:max-content;
    max-width:calc(100vw - 48px);
    margin:8px 10px 4px;
    padding:5px 8px;
    border-radius:999px;
    background:#edf7f3;
    color:#55736b;
    font-size:9px;
    font-weight:800;
    letter-spacing:.02em;
    z-index:3;
  }
  .admin-table-wrap table{
    font-size:11px;
  }
  .admin-table-wrap th,
  .admin-table-wrap td{
    padding:8px!important;
  }

  /* Make top controls wrap cleanly instead of squeezing */
  .topbar{
    gap:8px;
  }
  .topbar .right{
    gap:6px!important;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  #activeBranchChip{
    max-width:170px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .theme-picker{order:2}
  .app-account{order:3}

  /* Forms: primary actions easier to reach */
  .management-form-card .btn-primary,
  .settings-grid .security-card .btn-primary{
    width:100%;
  }

  /* Daily Entry quantity controls stay comfortable */
  .daily-stepper button{
    touch-action:manipulation;
  }
}

@media(max-width:560px){
  body{font-size:13px}

  .topbar{
    min-height:62px;
    align-items:center;
  }
  .topbar .brand small{display:none}
  .topbar .right{
    width:auto;
    margin-left:auto;
  }
  #activeBranchChip{
    max-width:128px;
    font-size:9px!important;
  }

  /* Theme and account controls: compact but still tappable */
  .theme-picker-button,
  .account-trigger{
    min-height:42px!important;
  }
  .theme-picker-button{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  /* Search boxes fit naturally */
  .list-search{
    width:100%;
    min-width:0!important;
  }

  /* Summary cards remain readable */
  .summary{
    gap:8px!important;
  }
  .kpi{
    padding:13px!important;
  }
  .kpi span{
    font-size:9px!important;
  }

  /* Dialogs feel better on phone */
  .app-modal-backdrop{
    align-items:end;
    padding:10px;
  }
  .app-modal{
    width:100%;
    max-height:90vh;
    border-radius:18px 18px 10px 10px;
  }
  .app-modal-body{
    overflow:auto;
    max-height:60vh;
  }
  .app-modal-actions{
    position:sticky;
    bottom:0;
  }
  .app-modal-actions .btn{
    flex:1;
  }

  /* Avoid tiny footer/support text */
  .login-footer{
    font-size:10px!important;
    line-height:1.6!important;
    padding-left:10px;
    padding-right:10px;
  }
}

/* Respect operating-system reduced-motion preference */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}


/* =========================================================
   v47 — Smooth Sign-in / Sign-out Transitions
   Authentication logic unchanged.
   ========================================================= */
.auth-transition{
  position:fixed;
  inset:0;
  z-index:12000;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 35%, rgba(64,165,135,.12), transparent 22rem),
    #f5f8f7;
  opacity:1;
  transition:opacity .24s ease;
}
.auth-transition.hidden{
  display:none;
}
.auth-transition.fade-out{
  opacity:0;
  pointer-events:none;
}
.auth-transition-card{
  width:min(360px,92vw);
  text-align:center;
  padding:30px 24px;
}
.auth-transition-mark{
  width:58px;
  height:58px;
  margin:0 auto 17px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#e1f5ee,#f8fcfa);
  border:1px solid #cee8df;
  box-shadow:0 10px 28px rgba(18,88,71,.10);
  color:var(--green2);
  font-weight:950;
  font-size:18px;
}
.auth-transition-spinner{
  width:34px;
  height:34px;
  margin:0 auto 18px;
  border:3px solid #dbe9e4;
  border-top-color:var(--green);
  border-radius:50%;
  animation:authSpin .72s linear infinite;
}
.auth-transition-title{
  margin:0;
  font-size:20px;
  line-height:1.25;
  letter-spacing:-.35px;
  color:var(--ink);
}
.auth-transition-message{
  margin:7px 0 0;
  color:var(--muted2);
  font-size:12px;
  line-height:1.55;
}
.auth-transition-check{
  width:38px;
  height:38px;
  margin:0 auto 18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e7f7ef;
  color:#18865d;
  font-size:20px;
  font-weight:950;
}
@keyframes authSpin{to{transform:rotate(360deg)}}

@media(max-width:560px){
  .auth-transition-card{padding:24px 18px}
  .auth-transition-title{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  .auth-transition-spinner{animation:none}
}


/* =========================================================
   v48 — Unified Installable App
   One responsive app for desktop + phone.
   ========================================================= */
.mobile-nav-trigger{
  display:none;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:44px;
  min-height:42px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.10);
  color:#fff;
  border-radius:11px;
  font-weight:850;
  cursor:pointer;
}
.mobile-nav-trigger:hover{background:rgba(255,255,255,.16)}
.mobile-nav-trigger-icon{
  width:18px;height:14px;position:relative;display:block;
  border-top:2px solid currentColor;border-bottom:2px solid currentColor;
}
.mobile-nav-trigger-icon:after{
  content:"";position:absolute;left:0;right:0;top:5px;border-top:2px solid currentColor;
}

.mobile-nav-backdrop{
  position:fixed;inset:0;z-index:8998;
  background:rgba(8,32,27,.46);
  backdrop-filter:blur(2px);
  opacity:1;
  transition:opacity .18s ease;
}
.mobile-nav-backdrop.hidden{display:none}
.mobile-nav-drawer{
  position:fixed;
  left:0;top:0;bottom:0;
  width:min(330px,88vw);
  z-index:8999;
  background:#fff;
  box-shadow:18px 0 55px rgba(5,32,27,.24);
  transform:translateX(0);
  transition:transform .22s ease;
  display:flex;
  flex-direction:column;
}
.mobile-nav-drawer.hidden{
  display:flex;
  transform:translateX(-105%);
  pointer-events:none;
}
.mobile-nav-head{
  padding:18px 16px 14px;
  background:linear-gradient(135deg,var(--green2),var(--green));
  color:#fff;
}
.mobile-nav-head-row{
  display:flex;align-items:center;gap:10px;
}
.mobile-nav-logo{
  width:34px;height:34px;object-fit:contain;
  border-radius:9px;background:rgba(255,255,255,.10);
  padding:4px;
}
.mobile-nav-brand{
  min-width:0;flex:1;
}
.mobile-nav-brand strong{
  display:block;font-size:15px;line-height:1.2;
}
.mobile-nav-brand small{
  display:block;opacity:.75;margin-top:2px;font-size:10px;
}
.mobile-nav-close{
  width:38px;height:38px;border:0;border-radius:10px;
  background:rgba(255,255,255,.12);color:#fff;
  font-size:24px;cursor:pointer;
}
.mobile-nav-profile{
  margin-top:13px;
  padding-top:11px;
  border-top:1px solid rgba(255,255,255,.15);
  font-size:11px;
  opacity:.92;
}
.mobile-nav-list{
  padding:11px;
  overflow:auto;
  flex:1;
}
.mobile-nav-group{
  font-size:9px;font-weight:950;letter-spacing:.10em;
  text-transform:uppercase;color:#8a9995;
  padding:11px 10px 5px;
}
.mobile-nav-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:0;
  background:transparent;
  color:#3f5952;
  border-radius:11px;
  padding:11px 12px;
  margin:2px 0;
  min-height:46px;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}
.mobile-nav-item:hover{background:#f0f7f4}
.mobile-nav-item.active{
  background:#e9f6f1;
  color:var(--green2);
  box-shadow:inset 3px 0 0 var(--green);
}
.mobile-nav-item-arrow{opacity:.42}
.mobile-nav-foot{
  padding:12px 14px 16px;
  border-top:1px solid var(--border);
  color:#84928e;
  font-size:9px;
  line-height:1.5;
}
.install-app-action.hidden{display:none!important}


/* =========================================================
   Modern Super Admin branch switcher
   Replaces the browser-native select menu with app-matched UI.
   ========================================================= */
.branch-switcher{
  position:relative;
  flex:0 0 auto;
}
.branch-switcher-trigger{
  min-height:38px;
  max-width:220px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.10);
  color:#fff;
  border-radius:11px;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,transform .14s ease;
}
.branch-switcher-trigger:hover{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.30);
}
.branch-switcher-trigger:active{transform:translateY(1px)}
.branch-switcher-icon{
  width:22px;
  height:22px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:rgba(255,255,255,.12);
  font-size:12px;
}
.branch-switcher-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.branch-switcher-chevron{
  margin-left:auto;
  opacity:.75;
  transition:transform .14s ease;
}
.branch-switcher-trigger[aria-expanded="true"] .branch-switcher-chevron{
  transform:rotate(180deg);
}
.branch-switcher-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:240px;
  padding:8px;
  background:#fff;
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 18px 45px rgba(10,49,41,.20);
  z-index:150;
}
.branch-switcher-menu.hidden{display:none}
.branch-switcher-menu-title{
  padding:6px 8px 8px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#81908c;
}
.branch-switcher-option{
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  border:0;
  background:transparent;
  border-radius:9px;
  padding:9px 10px;
  text-align:left;
  cursor:pointer;
  color:var(--ink);
  font:inherit;
  font-size:12px;
  font-weight:750;
}
.branch-switcher-option:hover{
  background:#f3f7f5;
}
.branch-switcher-option.active{
  background:var(--mint);
  color:var(--green2);
}
.branch-switcher-option-mark{
  width:22px;
  height:22px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#edf7f3;
  color:var(--green2);
  font-size:10px;
  font-weight:900;
}
.branch-switcher-option-name{
  min-width:0;
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.branch-switcher-check{
  margin-left:auto;
  color:var(--green);
  font-weight:950;
  opacity:0;
}
.branch-switcher-option.active .branch-switcher-check{opacity:1}

@media(max-width:850px){
  .branch-switcher-trigger{max-width:165px}
  .branch-switcher-menu{
    position:fixed;
    right:12px;
    top:70px;
    width:min(280px,calc(100vw - 24px));
  }
}
@media(max-width:560px){
  .branch-switcher-trigger{
    max-width:132px;
    padding:7px 9px;
  }
  .branch-switcher-icon{display:none}
}

@media(max-width:850px){
  /* Main navigation becomes a drawer instead of a long horizontal strip. */
  .wrap > .tabs{display:none!important}
  .mobile-nav-trigger{display:inline-flex}
  .wrap{
    display:block!important;
    max-width:100%!important;
  }
  .wrap > section{width:100%;min-width:0}

  /* Let the top bar stay compact when installed as a phone app. */
  .topbar{
    position:sticky;
    top:0;
    z-index:8000;
  }
  .topbar .brand{
    max-width:150px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .topbar .spacer{min-width:0}

}

@media(max-width:560px){
  .mobile-nav-trigger .mobile-nav-trigger-label{display:none}
  .mobile-nav-trigger{padding:7px 11px}
  .topbar .brand{max-width:112px}
  #activeBranchChip{display:none!important}

  /* Installed mobile app: preserve app-like safe spacing. */
  @media(display-mode:standalone){
    body{padding-bottom:env(safe-area-inset-bottom)}
    .topbar{padding-top:max(9px,env(safe-area-inset-top))}
  }
}


/* =========================================================
   v49 — One-time Mobile Install Prompt
   ========================================================= */
.install-prompt-benefits{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.install-prompt-benefit{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:9px 10px;
  border:1px solid #e1ece8;
  border-radius:11px;
  background:#f8fbfa;
  color:#506a63;
  font-size:12px;
}
.install-prompt-benefit span:first-child{
  width:22px;height:22px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:7px;
  background:#e8f6f1;
  color:var(--green2);
  font-weight:900;
}


/* =========================================================
   v50 — What's New release notice
   ========================================================= */
.whats-new-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.whats-new-item{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:9px 10px;
  border:1px solid #e1ece8;
  border-radius:11px;
  background:#f8fbfa;
  color:#506a63;
  font-size:12px;
  line-height:1.45;
}
.whats-new-item span:first-child{
  width:22px;height:22px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:7px;
  background:#e8f6f1;
  color:var(--green2);
  font-weight:900;
}
.whats-new-version{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
  padding:5px 8px;
  border-radius:999px;
  background:#e9f6f1;
  color:var(--green2);
  font-size:10px;
  font-weight:900;
  letter-spacing:.02em;
}