/* =========================================================================
   Pledge Agent System Tracker — the policy sheet (2026-10-09)
   Written business and delivered business share this sheet. It was a single
   column of nine unlabelled-group fields in a 460px panel; it is grouped,
   two-up where the fields are short, and carries the same header band as the
   lead record so the app reads as one thing.
   ========================================================================= */

.policy-modal-panel.pm2{
  max-width:720px; padding:0; overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line2); border-radius:16px;
  max-height:calc(100dvh - 40px);
}

/* ---- header ---- */
.pm2-head{
  flex:none; display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:17px 22px 15px; border-bottom:1px solid var(--line); background:var(--panel2);
}
.pm2 h3#policy-modal-title{
  margin:0; font-size:19px; font-weight:800; letter-spacing:-.01em;
  color:var(--text); text-wrap:balance;
}
.pm2-sub{ margin-top:3px; font-size:12.5px; color:var(--muted); line-height:1.5; text-wrap:balance; }
.pm2-x{
  flex:none; appearance:none; cursor:pointer; font:inherit; font-size:15px; line-height:1;
  width:32px; height:32px; border-radius:9px;
  border:1px solid var(--line2); background:var(--panel); color:var(--muted);
}
.pm2-x:hover{ background:var(--panel3); color:var(--text) }

/* ---- body ---- */
.pm2-body{ flex:1 1 auto; overflow-y:auto; padding:16px 22px 20px; }
.pm2-sec{
  margin:16px 0 9px; font-size:10px; font-weight:800; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--muted2);
}
.pm2-sec:first-child{ margin-top:2px }
.pm2-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:11px 14px; }
.pm2-wide{ grid-column:1 / -1 }
.pm2 .field{ margin:0; min-width:0 }
.pm2 .field label{
  display:block; font-size:11.5px; font-weight:700; color:var(--text);
  margin:0 0 5px; letter-spacing:.1px;
}
.pm2 .field input,
.pm2 .field select{
  width:100%; height:40px; padding:0 11px; border-radius:9px;
  border:1.5px solid var(--line); background:var(--panel); color:var(--text);
  font:inherit; font-size:14px;
}
.pm2 .field input:focus,
.pm2 .field select:focus{
  outline:none; border-color:#1E9A52; box-shadow:0 0 0 3px rgba(30,154,82,.14);
}
.pm2 .field input:disabled,
.pm2 .field select:disabled{ background:var(--panel3); color:var(--muted2); cursor:default }
.pm2 .policy-modal-hint{
  margin-top:5px; font-size:11.5px; color:var(--muted); line-height:1.5; text-wrap:pretty;
}

/* ---- type of policy ---- */
.pm2-types{ display:flex; flex-wrap:wrap; gap:7px; }
.pm2-type{
  appearance:none; cursor:pointer; font:inherit; font-size:13px; font-weight:700;
  height:38px; padding:0 18px; border-radius:9px;
  border:1.5px solid var(--line2); background:var(--panel); color:var(--text);
  transition:background .14s, border-color .14s, color .14s;
}
.pm2-type:hover{ border-color:#1E9A52; background:rgba(30,154,82,.07) }
.pm2-type.on{ background:#17834A; border-color:#17834A; color:#fff }
.pm2-type.on:hover{ background:#136C3C; border-color:#136C3C }
.pm2-type:focus-visible{ outline:2px solid #1E9A52; outline-offset:2px }

/* ---- footer ---- */
.pm2 .policy-modal-actions{
  flex:none; margin:0; padding:14px 22px 16px;
  border-top:1px solid var(--line); background:var(--panel2);
}
.pm2 .policy-estimate{ margin-top:14px }

/* ===================================================================== dark */
html[data-theme="dark"] .policy-modal-panel.pm2{ background:#0E2F20 }
html[data-theme="dark"] .pm2-head,
html[data-theme="dark"] .pm2 .policy-modal-actions{ background:rgba(255,255,255,.03) }
html[data-theme="dark"] .pm2 .field input,
html[data-theme="dark"] .pm2 .field select{ background:rgba(255,255,255,.04) }
html[data-theme="dark"] .pm2 .field input:focus,
html[data-theme="dark"] .pm2 .field select:focus{
  border-color:#3FC178; box-shadow:0 0 0 3px rgba(63,193,120,.15);
}
html[data-theme="dark"] .pm2-type{ background:rgba(255,255,255,.04) }
html[data-theme="dark"] .pm2-type:hover{ border-color:#3FC178; background:rgba(63,193,120,.12) }
html[data-theme="dark"] .pm2-type.on{ background:#1E9A52; border-color:#1E9A52 }
html[data-theme="dark"] .pm2-type.on:hover{ background:#23AC5C; border-color:#23AC5C }

/* ===================================================================== mobile */
@media (max-width:760px){
  .policy-modal-overlay{ padding:0; align-items:flex-end }
  .policy-modal-panel.pm2{
    max-width:none; border-radius:16px 16px 0 0; max-height:94dvh;
  }
  .pm2-head{ padding:15px 16px 13px }
  .pm2-body{ padding:14px 16px 18px }
  .pm2 .policy-modal-actions{ padding:12px 16px 16px }
  .pm2-grid{ grid-template-columns:minmax(0,1fr) }
  .pm2 .field input,
  .pm2 .field select{ font-size:16px; height:44px }   /* 16px stops iOS zooming on focus */
  .pm2-type{ flex:1 1 auto; height:42px }
}

/* =========================================================================
   Licensing — one card per licence
   It was a seven-column grid of bare text boxes that no phone could show. The
   inputs are the same; they are laid out as a labelled form in a card, and the
   expiry date — the only thing on this tab that can hurt an agent — leads.
   ========================================================================= */
.lic-grid-wrap{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:12px;
}
.lic-card{
  position:relative; padding:14px 15px 15px; border-radius:13px;
  background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--line2);
}
.lic-card.is-ok{   border-left-color:#1E9A52 }
.lic-card.is-soon{ border-left-color:#E8B10A }
.lic-card.is-gone{ border-left-color:#B5402B }

.lic-top{ display:flex; align-items:center; gap:10px; margin-bottom:12px }
.lic-state{
  flex:none; font-size:20px; font-weight:800; letter-spacing:.5px; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.lic-state-q{ color:var(--muted2); font-weight:700 }
.lic-chip{
  display:inline-flex; align-items:center; height:22px; padding:0 10px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.2px; white-space:nowrap;
  background:var(--panel3); color:var(--muted); border:1px solid var(--line);
}
.lic-ok{   background:rgba(30,154,82,.13);  color:#136C3C; border-color:rgba(30,154,82,.4) }
.lic-soon{ background:rgba(232,177,10,.16); color:#8A5A05; border-color:rgba(232,177,10,.45) }
.lic-gone{ background:rgba(181,64,43,.13);  color:#A8341F; border-color:rgba(181,64,43,.42) }
.lic-x{
  margin-left:auto; flex:none; appearance:none; cursor:pointer; font:inherit; font-size:12px;
  width:26px; height:26px; border-radius:7px; color:var(--muted2);
  border:1px solid var(--line); background:var(--panel);
}
.lic-x:hover{ color:#A8341F; border-color:rgba(181,64,43,.45); background:rgba(181,64,43,.07) }

.lic-sec{
  margin:13px 0 8px; font-size:9.5px; font-weight:800; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--muted2);
  border-top:1px solid var(--line); padding-top:11px;
}
.lic-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:9px 10px }
.lic-wide{ grid-column:1 / -1 }
.lic-f{ min-width:0 }
.lic-f label{
  display:block; font-size:10px; font-weight:800; letter-spacing:.7px;
  text-transform:uppercase; color:var(--muted2); margin-bottom:4px;
}
.lic-f input{
  width:100%; height:36px; padding:0 10px; border-radius:8px;
  border:1.5px solid var(--line); background:var(--panel2); color:var(--text);
  font:inherit; font-size:13.5px;
}
.lic-f input:focus{ outline:none; border-color:#1E9A52; background:var(--panel); box-shadow:0 0 0 3px rgba(30,154,82,.13) }
.lic-k{ display:block; font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--muted2) }
.lic-v{ display:block; margin-top:2px; font-size:13.5px; font-weight:600; color:var(--text); overflow-wrap:anywhere }

html[data-theme="dark"] .lic-card{ background:rgba(255,255,255,.03) }
html[data-theme="dark"] .lic-f input{ background:rgba(255,255,255,.04) }
html[data-theme="dark"] .lic-f input:focus{ border-color:#3FC178; box-shadow:0 0 0 3px rgba(63,193,120,.15) }
html[data-theme="dark"] .lic-ok{   background:rgba(63,193,120,.16); color:#9FD8B5; border-color:rgba(63,193,120,.42) }
html[data-theme="dark"] .lic-soon{ background:rgba(248,194,30,.16);  color:#F3D083; border-color:rgba(248,194,30,.44) }
html[data-theme="dark"] .lic-gone{ background:rgba(240,120,95,.16);  color:#F0A08C; border-color:rgba(240,120,95,.44) }

@media (max-width:760px){
  .lic-grid-wrap{ grid-template-columns:minmax(0,1fr) }
  .lic-f input{ font-size:16px; height:42px }   /* 16px stops iOS zooming on focus */
}