/* Housing Court Filer — Manage Firms.
   Ported from the approved firms screen (assets/review-additions.css plus the shared
   .table-footer/.drawer-overlay/.edit-drawer/.hcf-table base rules of assets/styles.css).
   Loaded only while /firms is rendered and every rule is prefixed with .firms-page so no
   other module's styling changes. */

.firms-page{
  --navy:#213d66;--navy-dark:#193354;
  --gold:#e4b64f;--gold-dark:#d4a73d;
  --line:#e1e6ed;--ink:#172941;--muted:var(--hcf-navy);
  --green:#13815f;--green-soft:#e7f5ef;
  --shadow-sm:0 3px 12px rgba(27,48,79,.08);
  color:var(--hcf-text);
}
/* Held at one-class weight (:where) so the shared buttons in components.css keep their own colours. */
.firms-page :where(a){color:inherit;text-decoration:none}
.firms-page :where(button){cursor:pointer;font:inherit;color:inherit}
.firms-page input,.firms-page select{padding:8px 11px;outline:none}
.firms-page input[type=radio],.firms-page input[type=checkbox]{width:auto;min-height:0;padding:0;border-radius:0;accent-color:var(--navy)}
.firms-page input:focus,.firms-page select:focus{border-color:#7897c0}
.firms-page .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.firms-page .icon{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.firms-page .input-with-icon{display:flex;border:1px solid var(--hcf-line);border-radius:8px;overflow:visible;background:#fff}
.firms-page .input-with-icon .icon{margin:14px 0 0 14px}
.firms-page .input-with-icon input{border:0;border-radius:0;box-shadow:none!important}
.firms-page .input-with-icon:focus-within{border-color:#7897c0;box-shadow:0 0 0 3px rgba(60,105,165,.12)}
.firms-page .input-with-icon>input::placeholder{color:var(--hcf-text-meta)}
.firms-page .switch{display:inline-flex;align-items:center;margin-left:9px}
.firms-page .switch input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px}
.firms-page .switch span{display:inline-block;width:47px;height:25px;background:#e2eaf4;border:1px solid #bac8d8;border-radius:999px;position:relative;transition:.18s}
.firms-page .switch span:after{content:"";position:absolute;width:19px;height:19px;background:#6e8bb4;border-radius:50%;top:2px;left:3px;transition:.18s}
.firms-page .switch input:checked+span{background:#dcf3e9;border-color:#96d2b7}
.firms-page .switch input:checked+span:after{left:23px;background:var(--green)}
.firms-page .firm-enter-form{display:inline-flex;margin-left:auto}
.firms-page .firm-enter-form .firm-enter{margin-left:0}
.firms-page .firm-table-enter-form{margin-left:6px;vertical-align:middle}

/* ------------------------------------------------------------ owner-review note */
.firms-page .review-note{background:#fff8df;border-left:4px solid var(--gold);padding:11px 14px;border-radius:8px;margin-bottom:16px;color:var(--hcf-text-warning)}
.firms-page .review-note strong{color:var(--hcf-text-meta)}

/* ------------------------------------------------------------ workspace */
.firms-page .firm-workspace{padding:0 0 22px}
.firms-page .firm-workspace>:not(header){margin-inline:22px}
.firms-page .firm-head,.firms-page .firm-tools,.firms-page .firm-card header,.firms-page .firm-card footer{display:flex;align-items:center}
.firms-page .firm-head{gap:14px}
.firms-page .firm-head h1{margin:0}
.firms-page .firm-tools{margin-left:auto;gap:10px}
.firms-page .firm-search{min-width:340px}
.firms-page .firm-tabs{margin-top:20px}

/* ------------------------------------------------------------ view toggle */
.firms-page .view-toggle{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.firms-page .view-toggle button{border:0;background:#fff;padding:9px 12px;color:var(--hcf-text-meta)}
.firms-page .view-toggle button.active{background:var(--navy);color:var(--hcf-text-inverse)}

/* ------------------------------------------------------------ card grid */
.firms-page .firm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:20px 0}
.firms-page .firm-card{overflow:hidden}
.firms-page .firm-card header{gap:8px}
.firms-page .firm-card header strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.firms-page .firm-enter{margin-left:auto}
.firms-page .firm-card dl{margin:0;padding:13px 14px}
.firms-page .firm-card dl div{display:grid;grid-template-columns:95px minmax(0,1fr);gap:8px}
.firms-page .firm-card dt{font-weight:var(--hcf-weight-bold)}
.firms-page .firm-card dd{margin:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--hcf-text-meta)}
.firms-page .firm-card footer{border-top:1px solid var(--line);padding:12px 14px;justify-content:flex-end}
.firms-page .firm-empty{padding:34px;text-align:center;color:var(--hcf-text-meta)}

.firms-page .firm-card-clickable{cursor:pointer;position:relative;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.firms-page .firm-card-clickable:hover{transform:translateY(-2px);border-color:#b9c8da;box-shadow:0 14px 30px rgba(30,53,83,.14)}
.firms-page .firm-card-clickable .firm-enter::after{content:"";position:absolute;inset:0;z-index:1}
.firms-page .firm-card-clickable header button{position:relative;z-index:2}
.firms-page .firm-card-clickable .firm-enter:focus-visible::after{outline:3px solid var(--gold);outline-offset:3px}

/* Whole-row activation for the table view, mirroring the card view above (wired by firms.js —
   clicking anywhere on the row opens the firm, clicking its own controls behaves normally). */
.firms-page .firm-row-clickable{cursor:pointer}
.firms-page .firm-row-clickable:hover td{background:#eef4fb}
.firms-page .firm-row-clickable .firm-enter:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ------------------------------------------------------------ live provisioning */
/* Shown while the page polls the platform API; the card flips to its active state on the poll
   that reports Status=Active, so no manual refresh is needed. */
.firms-page .firm-live-region:empty{display:none}
.firms-page .firm-activated{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:11px 14px;border:1px solid #bfe4d3;border-left:4px solid var(--green);border-radius:8px;background:var(--green-soft);color:var(--hcf-text-success)}
.firms-page .firm-activated p{margin:0;font-weight:var(--hcf-weight-bold)}
.firms-page .firm-activated-mark{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--green);color:var(--hcf-text-inverse);font-size:var(--hcf-text-caption);flex:none}
.firms-page .firm-activated button{margin-left:auto}
.firms-page .firm-provisioning{display:grid;gap:7px;padding:0 14px 13px}
.firms-page .firm-provisioning-head{display:flex;align-items:center;gap:8px;color:var(--hcf-text-meta);font-size:var(--hcf-text-column);font-weight:var(--hcf-weight-label)}
.firms-page .firm-provisioning-step{margin-left:auto;color:var(--hcf-text-meta)}
.firms-page .firm-progress-mini{width:120px;height:6px;margin-top:6px}
.firms-page .firm-spinner{width:13px;height:13px;flex:none;border:2px solid #cdd8e6;border-top-color:var(--navy);border-radius:50%;animation:firm-spin .9s linear infinite}
.firms-page .provision-live{display:flex;align-items:center;gap:8px;margin:0;color:var(--hcf-text-meta);font-size:var(--hcf-text-small);font-weight:var(--hcf-weight-bold)}
.firms-page .provision-live-done{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--green);color:var(--hcf-text-inverse);font-size:var(--hcf-text-caption);flex:none}
.firms-page .provision-live-failed{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#b42318;color:var(--hcf-text-inverse);font-size:var(--hcf-text-caption);font-weight:var(--hcf-weight-label);flex:none}
@keyframes firm-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.firms-page .firm-spinner{animation-duration:2.4s}.firms-page .firm-progress span{transition:none}}

/* ------------------------------------------------------------ status chips */
.firms-page .status-chip{display:inline-flex;align-items:center;border-radius:7px;padding:3px 8px;font-size:var(--hcf-text-column);font-weight:var(--hcf-weight-label);white-space:nowrap;margin-left:auto}
.firms-page .status-chip.green{background:#1f9664;color:var(--hcf-text-inverse)}
.firms-page .status-chip.amber{background:#fff0d0;color:var(--hcf-text-warning)}
.firms-page .status-chip.red{background:#fbeaea;color:var(--hcf-text-danger)}
.firms-page .status-chip.gray{background:#eef1f5;color:var(--hcf-text-meta)}

/* ------------------------------------------------------------ table view */
.firms-page .firm-table-wrap{overflow:auto;margin-top:18px}
.firms-page .hcf-table{width:100%;border-collapse:collapse;margin:0}
.firms-page .hcf-table th,.firms-page .hcf-table td{padding:10px 12px;border-bottom:1px solid #edf0f3;text-align:left;vertical-align:top}
.firms-page .hcf-table th{background:#fafafa}
.firms-page .hcf-table tr:hover td{background:#fbfcfe}
.firms-page .hcf-table td small{display:block;color:var(--hcf-text-meta);margin-top:3px}

/* ------------------------------------------------------------ footer / pager */
.firms-page .table-footer{display:flex;justify-content:space-between;padding:10px 13px;color:var(--hcf-text-meta);font-size:var(--hcf-text-small)}
.firms-page .table-footer div{display:flex;gap:3px}
.firms-page .table-footer button{border:1px solid var(--line);background:#fff;min-width:28px;height:28px}
.firms-page .table-footer button.active{background:var(--navy);color:var(--hcf-text-inverse)}

/* ------------------------------------------------------------ drawer overlay */
.firms-page .drawer-overlay{z-index:300}
.firms-page .edit-drawer{width:min(800px,95vw);height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;position:relative}
.firms-page .edit-drawer>header{gap:12px}
.firms-page .edit-drawer>header button{margin-left:auto}
.firms-page .drawer-body{padding:22px 24px;overflow:auto;display:grid;align-content:start;gap:20px}
.firms-page .drawer-body label{display:grid;gap:6px}
.firms-page .drawer-body>section:not([hidden]){display:grid;gap:14px}
.firms-page .drawer-body h3{margin:0}
.firms-page .drawer-body h3 b{color:var(--hcf-text-danger)}
.firms-page .firm-form-actions{padding:14px 20px;border-top:1px solid var(--hcf-line);display:flex;align-items:center;justify-content:flex-end;gap:9px}
.firms-page .drawer-actions{display:flex;gap:8px;margin-left:auto}
.firms-page .drawer-actions button{white-space:nowrap}

/* ------------------------------------------------------------ firm form wizard */
.firms-page .firm-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.firms-page .firm-step{display:flex;gap:8px;align-items:center;color:var(--hcf-text-meta);font-size:var(--hcf-text-small);font-weight:var(--hcf-weight-bold);border:0;background:none;padding:0}
.firms-page .firm-step span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#e9edf2}
.firms-page .firm-step.active{color:var(--hcf-text-meta)}
.firms-page .firm-step.active span,.firms-page .firm-step.complete span{background:var(--navy);color:var(--hcf-text-inverse)}
.firms-page .firm-progress{height:9px;background:#e7eaf0;border-radius:99px;overflow:hidden}
.firms-page .firm-progress span{display:block;height:100%;background:var(--navy);width:33%;transition:width .2s}
.firms-page .firm-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;align-items:start}
.firms-page .firm-form-grid label{display:block}
.firms-page .firm-form-grid label b{color:var(--hcf-text-danger)}
/* Every control fills its label cell so the two columns line up edge to edge. */
.firms-page .firm-form-grid input:not([type=radio]):not([type=checkbox]),.firms-page .firm-form-grid select,.firms-page .firm-form-grid textarea{width:100%;box-sizing:border-box;font-size:var(--hcf-text-table);font-weight:var(--hcf-weight-bold)}
.firms-page .firm-form-grid label>input,.firms-page .firm-form-grid label>select,.firms-page .firm-form-grid label>textarea,.firms-page .firm-form-grid label>.input-with-icon{margin-top:6px}
.firms-page .firm-form-grid input[readonly]{color:var(--hcf-text-meta);cursor:default}
.firms-page .firm-form-grid .input-with-icon{align-items:center}
.firms-page .firm-form-grid .input-with-icon .icon{margin:0 0 0 14px}
.firms-page .firm-form-grid .validation-message{display:block;margin-top:6px;color:var(--hcf-text-danger);font-size:var(--hcf-text-caption);font-weight:var(--hcf-weight-bold);letter-spacing:normal}
.firms-page .firm-form-grid .full{grid-column:1/-1}
.firms-page .subscription-choice{border:1px solid var(--line);border-radius:10px;padding:15px 16px;background:#fff;display:flex!important;gap:10px;align-items:center;transition:border-color .15s ease,background .15s ease}
.firms-page .subscription-choice:hover{border-color:#b9c8da}
.firms-page .subscription-choice:has(:checked){border-color:var(--navy);background:#eef4fd}
/* Toggle rows keep the label and the switch on one line, boxed like the choices above. */
.firms-page .firm-form-grid label:has(>.switch){display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe}
.firms-page .firm-form-grid label>.switch{margin-left:0}
.firms-page .provision-state{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.firms-page .provision-state span{background:#eef2f7;border-radius:8px;padding:10px 8px;text-align:center;font-size:var(--hcf-text-label);font-weight:var(--hcf-weight-label)}
.firms-page .provision-state span.done{background:var(--green-soft);color:var(--hcf-text-success)}

/* ------------------------------------------------------------ serverless database warm-up */
.firm-loading-page{position:relative;isolation:isolate;min-height:100dvh;padding:clamp(24px,5vw,64px) 20px;display:grid;place-items:center;align-content:center;gap:22px;overflow:hidden;background:linear-gradient(145deg,#f8fafc 0%,#eef3f8 55%,#f9f5ea 100%)}
.firm-loading-page::before{content:"";position:absolute;z-index:-2;inset:0;background-image:linear-gradient(rgba(33,61,102,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(33,61,102,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 78%)}
.firm-loading-ambient{position:absolute;z-index:-1;width:min(48vw,620px);aspect-ratio:1;border-radius:50%;filter:blur(2px);pointer-events:none}
.firm-loading-ambient-one{top:-28%;right:-15%;background:radial-gradient(circle,rgba(33,61,102,.12),transparent 68%)}
.firm-loading-ambient-two{bottom:-38%;left:-18%;background:radial-gradient(circle,rgba(228,182,79,.17),transparent 68%)}
.firm-loading-card{width:min(100%,620px);padding:clamp(28px,5vw,48px);text-align:center}
.firm-loading-brand{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:34px}
.firm-loading-brand img{display:block;width:178px;max-width:48%;height:auto}
.firm-loading-brand>span{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid #dce4ee;border-radius:999px;background:#f7f9fc;color:var(--hcf-text-meta);font-size:var(--hcf-text-caption);font-weight:var(--hcf-weight-label);letter-spacing:var(--hcf-tracking-caps);white-space:nowrap}
.firm-loading-brand i{width:7px;height:7px;border-radius:50%;background:#1a8c68;box-shadow:0 0 0 4px rgba(26,140,104,.11)}
.firm-loading-indicator{position:relative;width:112px;height:112px;margin:2px auto 28px;display:grid;place-items:center}
.firm-loading-ring{position:absolute;inset:0;border:2px solid rgba(33,61,102,.13);border-top-color:var(--navy);border-radius:50%;animation:firm-loading-spin 2s linear infinite}
.firm-loading-ring.ring-two{inset:10px;border-color:rgba(228,182,79,.18);border-bottom-color:var(--hcf-gold-dark);animation-direction:reverse;animation-duration:1.45s}
.firm-loading-core{width:68px;height:68px;display:grid;place-items:center;border-radius:22px;color:var(--hcf-text-inverse);background:linear-gradient(145deg,var(--hcf-navy),var(--hcf-navy-deep));box-shadow:0 14px 28px rgba(25,51,84,.22)}
.firm-loading-core svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.firm-loading-copy{max-width:490px;margin:0 auto}
.firm-loading-eyebrow{display:block;margin-bottom:9px;color:var(--hcf-text-meta);font-size:var(--hcf-text-caption);font-weight:var(--hcf-weight-label);letter-spacing:var(--hcf-tracking-caps);text-transform:uppercase}
.firm-loading-copy h1{margin:0}
.firm-loading-copy p{margin:12px 0 0;color:var(--hcf-text-meta);font-size:var(--hcf-text-body);line-height:1.6}
.firm-loading-status{margin:30px 0 0;padding:15px 17px;display:flex;align-items:center;gap:13px;border:1px solid #e1e7ef;border-radius:14px;background:#f8fafc;text-align:left}
.firm-loading-status>div{min-width:0;display:grid;gap:3px}
.firm-loading-status strong{color:var(--hcf-text);font-size:var(--hcf-text-table)}
.firm-loading-status div>span{color:var(--hcf-text-meta);font-size:var(--hcf-text-label);line-height:1.35}
.firm-loading-spinner{width:25px;height:25px;flex:none;border:3px solid #d9e1eb;border-top-color:var(--navy);border-radius:50%;animation:firm-loading-spin .85s linear infinite}
.firm-loading-guidance{margin:16px 0 0;color:var(--hcf-text-meta);font-size:var(--hcf-text-column)}
.firm-loading-security{margin:30px -6px -12px;padding-top:20px;display:flex;align-items:center;justify-content:center;gap:8px;border-top:1px solid #edf0f4;color:var(--hcf-text-meta);font-size:var(--hcf-text-caption)}
.firm-loading-security>span{width:12px;height:14px;border:1.5px solid #8393a7;border-radius:3px;position:relative}
.firm-loading-security>span::before{content:"";position:absolute;left:2px;right:2px;bottom:11px;height:6px;border:1.5px solid #8393a7;border-bottom:0;border-radius:6px 6px 0 0}
.firm-loading-error-icon{width:64px;height:64px;margin:0 auto 22px;display:grid;place-items:center;border:1px solid #edc993;border-radius:20px;color:var(--hcf-text-warning);background:#fff7e9;font-size:var(--hcf-text-page-title);font-weight:var(--hcf-weight-bold)}
.firm-loading-card.has-error .firm-loading-copy p{color:var(--hcf-text-warning)}
.firm-loading-trace{width:fit-content;max-width:100%;margin:22px auto 0;padding:9px 12px;border-radius:8px;background:#f5f7fa;color:var(--hcf-text-meta);font-size:var(--hcf-text-caption);overflow-wrap:anywhere}
.firm-loading-trace code{color:var(--hcf-text)}
.firm-loading-actions{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:28px}
.firm-loading-actions form{margin:0}
.firm-loading-actions button[disabled]{opacity:.6;cursor:not-allowed}
.firm-loading-footnote{margin:0;color:var(--hcf-text-meta);font-size:var(--hcf-text-caption);letter-spacing:normal}
@keyframes firm-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.firm-loading-ring,.firm-loading-spinner{animation-duration:3s}.firm-loading-ambient{display:none}}

@media(max-width:1100px){
  .firms-page .firm-grid{grid-template-columns:repeat(2,1fr)}
  .firms-page .firm-search{min-width:220px}
}
@media(max-width:900px){
  .firms-page .firm-head{align-items:flex-start;flex-direction:column}
  .firms-page .firm-tools{margin-left:0;width:100%;flex-wrap:wrap}
  .firms-page .firm-search{flex:1}
  .firms-page .firm-grid{grid-template-columns:1fr}
  .firms-page .firm-form-grid{grid-template-columns:1fr}
  .firms-page .firm-form-grid .full{grid-column:auto}
}
@media(max-width:560px){
  .firms-page .firm-tools>*{width:100%}
  .firms-page .firm-steps{font-size:var(--hcf-text-caption)}
  .firms-page .drawer-actions{display:none}
  .firm-loading-actions{align-items:stretch;flex-direction:column}
  .firm-loading-actions form,.firm-loading-actions button{width:100%}
  .firm-loading-page{padding:18px 12px}
  .firm-loading-card{padding:24px 20px}
  .firm-loading-brand{margin-bottom:28px;align-items:flex-start}
  .firm-loading-brand img{width:148px}
  .firm-loading-brand>span{font-size:var(--hcf-text-caption)}
  .firm-loading-security{align-items:flex-start;text-align:left}
}