:root {
    --bg: #f4f7fb;
    --card: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --line: #dbe3ef;
    --primary: #123c69;
    --primary-dark: #0c2b4d;
    --accent: #2f80ed;
    --danger: #b91c1c;
    --success-bg: #ecfdf5;
    --success-text: #065f46;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--text);
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    padding: 24px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.topbar h1 { margin: 0 0 4px; font-size: 28px; }
.topbar p { margin: 0; opacity: .85; }
.topbar nav { display: flex; gap: 12px; flex-wrap: wrap; }
.topbar nav a {
    color: #fff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    padding: 10px 12px;
    border-radius: 8px;
}
.container { width: min(1320px, calc(100% - 32px)); margin: 24px auto; }
.footer { text-align: center; color: var(--muted); padding: 28px; }
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.panel-head h2 { margin: 0 0 6px; }
.panel-head p { margin: 0; color: var(--muted); }
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
    margin-bottom: 20px;
}
.success-card { background: var(--success-bg); color: var(--success-text); }
.button, button {
    display: inline-block;
    border: none;
    background: var(--primary);
    color: #fff;
    padding: 10px 14px;
    border-radius: 9px;
    font-weight: 700;
    cursor: pointer;
}
.button:hover, button:hover { background: var(--primary-dark); text-decoration: none; }
.button.secondary { background: #e6eef8; color: var(--primary); }
.button.secondary:hover { background: #d8e7f7; }
.search-box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.search-box input { flex: 1; }
input, select, textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 11px;
    font-size: 15px;
    background: #fff;
}
label { font-weight: 700; display: grid; gap: 6px; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 18px;
}
.full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 12px; align-items: center; }
.inline-form { display: grid; grid-template-columns: 1fr 160px auto; gap: 10px; align-items: end; }
.table-card { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td {
    border-bottom: 1px solid var(--line);
    padding: 12px 10px;
    text-align: left;
    vertical-align: top;
}
th { background: #f8fafc; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: #475569; }
tr:hover td { background: #f9fbff; }
.actions { white-space: nowrap; }
.empty, .muted { color: var(--muted); }
.badge {
    display: inline-block;
    background: #eef2ff;
    border: 1px solid #dbe2ff;
    color: #3730a3;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.settings-card h3 { margin-top: 0; }
.notice {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 18px;
}
.danger-link { color: var(--danger); margin-left: auto; }
@media (max-width: 900px) {
    .topbar, .panel-head { flex-direction: column; align-items: flex-start; }
    .form-grid { grid-template-columns: 1fr; }
    .inline-form { grid-template-columns: 1fr; }
}

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(460px, 100%); }
.login-card h1 { margin-top: 0; }
.form-stack { display: grid; gap: 16px; }
.checkbox-label { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.checkbox-label input { width: auto; }
code { background: rgba(15, 23, 42, .08); padding: 2px 5px; border-radius: 5px; }
.status-tabs { display:flex; gap:10px; flex-wrap:wrap; margin: 0 0 18px; }
.tab { background:#fff; border:1px solid var(--line); padding:10px 14px; border-radius:999px; font-weight:700; }
.tab.active { background: var(--primary); color:#fff; }
.tab span { background:rgba(0,0,0,.08); border-radius:999px; padding:2px 7px; margin-left:4px; }
.button-row { display:flex; gap:10px; flex-wrap:wrap; }
.workflow { display:grid; grid-template-columns: repeat(9, minmax(100px,1fr)); gap:8px; margin-bottom:20px; overflow-x:auto; }
.workflow-step { background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; font-size:13px; min-height:58px; display:flex; align-items:center; justify-content:center; text-align:center; }
.workflow-step.current { border-color: var(--accent); box-shadow:0 0 0 3px rgba(47,128,237,.14); font-weight:700; }
.workflow-step.done { background: var(--success-bg); color: var(--success-text); border-color:#b7e4c7; }
.two-col { grid-template-columns: repeat(2, minmax(0,1fr)); }
.warning { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; padding:12px; border-radius:10px; }
.badge-soft { background:#eaf2ff; color:#1d4ed8; }
.mini-fieldset { border:1px solid var(--line); border-radius:10px; padding:12px; margin:10px 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.mini-fieldset legend { font-weight:700; padding:0 6px; }
.detail-table th { width: 260px; text-align:left; vertical-align:top; color:var(--muted); }
.detail-table td, .detail-table th { border-bottom:1px solid var(--line); padding:10px; }
.public-wrap { width:min(980px, calc(100% - 32px)); margin:24px auto; }
code { background:#f1f5f9; padding:2px 5px; border-radius:5px; }
@media (max-width: 900px) { .two-col { grid-template-columns:1fr; } .workflow { grid-template-columns: repeat(9, 140px); } .mini-fieldset { grid-template-columns:1fr; } }

.success { background: var(--success-bg); border: 1px solid #b7e4c7; color: var(--success-text); padding: 12px 14px; border-radius: 10px; margin-bottom: 18px; }
.danger { background: #fff1f2; border: 1px solid #fecdd3; color: #991b1b; padding: 12px 14px; border-radius: 10px; margin-bottom: 18px; }
.stats-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 18px 0; }
.stats-grid article { background:#f8fafc; border:1px solid var(--line); border-radius:12px; padding:14px; }
.stats-grid strong { display:block; font-size:24px; }
.stats-grid span { color:var(--muted); }
.checkline { display:flex; flex-direction:row; align-items:center; gap:8px; font-weight:700; }
.checkline input { width:auto; }


.public-brand{text-align:center;margin-bottom:18px}
.public-brand img{max-width:180px;max-height:90px;object-fit:contain;margin-bottom:8px}
.public-brand h1{margin:0 0 6px}
.form-hint{display:block;font-size:.9rem;color:#5d6b7a;margin-top:6px}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.52);display:flex;align-items:center;justify-content:center;z-index:9999;padding:18px}
.modal-backdrop[hidden]{display:none}
.modal-box{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(15,23,42,.25);padding:22px;max-width:460px;width:100%}
.modal-box h3{margin-top:0}
.modal-box label{display:block;margin:14px 0}
.modal-box input{width:100%}
.warning{background:#fff8e6;border:1px solid #ffd47a;color:#694900;padding:12px;border-radius:12px}
.success-card{background:#effaf1;border:1px solid #bfe8c7;color:#145c25}

.dbs-guidance{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:14px;margin:16px 0}
.dbs-guidance h3,.dbs-guidance h4,.dbs-guidance h5{margin-top:0}
.dbs-guidance ul{padding-left:20px;margin-bottom:0}
.table-wrap{overflow-x:auto}

/* Guided applicant progress carousel */
.workflow-linear{
    display:flex;
    align-items:stretch;
    gap:0;
    margin:0 0 20px;
    overflow-x:auto;
    padding:10px 4px 16px;
}
.workflow-node{
    position:relative;
    min-width:150px;
    flex:1 0 150px;
    background:#fff;
    color:var(--text);
    border:1px solid var(--line);
    border-radius:0;
    padding:14px 12px;
    display:grid;
    gap:7px;
    justify-items:center;
    align-content:center;
    box-shadow:none;
}
.workflow-node:first-child{border-top-left-radius:16px;border-bottom-left-radius:16px}
.workflow-node:last-child{border-top-right-radius:16px;border-bottom-right-radius:16px}
.workflow-node:not(:last-child)::after{
    content:"";
    position:absolute;
    right:-9px;
    top:50%;
    width:18px;
    height:18px;
    background:inherit;
    border-top:1px solid var(--line);
    border-right:1px solid var(--line);
    transform:translateY(-50%) rotate(45deg);
    z-index:2;
}
.workflow-node.done{background:var(--success-bg);color:var(--success-text);border-color:#b7e4c7}
.workflow-node.current,.workflow-node.selected{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
    box-shadow:0 8px 26px rgba(18,60,105,.20);
    z-index:3;
}
.workflow-node.current::after,.workflow-node.selected::after{border-color:var(--primary)}
.workflow-node:hover{
    background:#f8fafc;
    color:var(--text);
    border-color:#b8c7dc;
    text-decoration:none;
}
.workflow-node:hover::after{
    border-color:#b8c7dc;
}
.workflow-node.done:hover{
    background:var(--success-bg);
    color:var(--success-text);
    border-color:#9bd6b2;
}
.workflow-node.current:hover,.workflow-node.selected:hover{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}

.node-number{
    width:30px;
    height:30px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background:rgba(15,23,42,.08);
    font-weight:800;
}
.workflow-node.current .node-number,.workflow-node.selected .node-number{background:rgba(255,255,255,.18)}
.node-label{font-size:13px;line-height:1.25;font-weight:800;text-align:center}
.stage-carousel{padding:0;overflow:hidden}
.carousel-head{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start;
    padding:22px 24px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,#fff,#f8fafc);
}
.carousel-head h3{margin:2px 0 8px;font-size:24px}
.eyebrow{margin:0;color:var(--accent);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.carousel-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.carousel-controls button:disabled{opacity:.45;cursor:not-allowed}
.stage-counter{padding:12px 24px;border-bottom:1px solid var(--line);font-weight:800;color:var(--muted);background:#fff}
.stage-slides{padding:24px}
.stage-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:22px;
    box-shadow:0 10px 30px rgba(15,23,42,.06);
    margin:0;
}
.stage-card h3{margin-top:0;font-size:22px}
.stage-card[hidden]{display:none!important}
.active-stage-card{animation:stageFade .18s ease-out}
.audit-card{margin-top:20px}
@keyframes stageFade{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:900px){
    .workflow-node{min-width:135px;flex-basis:135px;padding:12px 8px}
    .carousel-head{flex-direction:column;padding:18px}
    .stage-slides{padding:16px}
    .stage-card{padding:18px}
    .carousel-controls{width:100%;justify-content:stretch}
    .carousel-controls button{flex:1}
}

/* Mobile-first polish for applicant/admin pages */
img{max-width:100%;height:auto}
.tracker-filters{align-items:end;flex-wrap:wrap}
.tracker-filters .filter-field{min-width:220px;flex:1}
.tracker-filters .search-field{flex:2 1 280px}
.stage-filter-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 16px;margin-bottom:4px;-webkit-overflow-scrolling:touch}
.stage-chip{white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 12px;font-weight:800;font-size:13px;color:var(--primary)}
.stage-chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.stage-chip span{display:inline-block;margin-left:5px;background:rgba(15,23,42,.08);padding:1px 7px;border-radius:999px}
.stage-chip.active span{background:rgba(255,255,255,.2)}

@media (max-width:700px){
    body{font-size:16px}
    .topbar{padding:18px 16px;gap:16px}
    .topbar h1{font-size:22px}
    .topbar nav{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .topbar nav a{text-align:center;padding:11px 8px}
    .container,.public-wrap{width:100%;margin:0;padding:14px}
    .card{border-radius:14px;padding:16px;margin-bottom:14px}
    .panel-head{gap:12px;margin-bottom:14px}
    .panel-head .button-row,.button-row,.form-actions{width:100%;display:grid;grid-template-columns:1fr;gap:8px}
    .button,button{width:100%;text-align:center;min-height:44px}
    input,select,textarea{font-size:16px;min-height:44px}
    .search-box,.tracker-filters{display:grid;grid-template-columns:1fr;gap:12px;padding:12px}
    .tracker-filters .filter-field,.tracker-filters .search-field{min-width:0;width:100%}
    .status-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .tab{text-align:center;padding:11px 8px}
    .stage-filter-strip{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
    .public-brand img{max-width:150px;max-height:80px}
    .public-brand h1{font-size:22px}
    .form-grid,.two-col,.mini-fieldset{grid-template-columns:1fr!important;gap:14px}
    .full{grid-column:auto}
    .workflow-linear{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
    .workflow-node{min-width:126px;flex-basis:126px;padding:11px 7px}
    .node-number{width:28px;height:28px}
    .node-label{font-size:12px}
    .carousel-head{padding:16px}
    .carousel-head h3{font-size:21px}
    .stage-counter{padding:11px 16px}
    .stage-slides{padding:14px}
    .stage-card{padding:16px;border-radius:14px}
    .stage-card h3{font-size:20px}
    .modal-box{max-height:calc(100vh - 32px);overflow:auto;padding:18px}
    .dbs-guidance{padding:12px}
    .table-wrap{margin-left:-8px;margin-right:-8px}
    .detail-table th,.detail-table td{display:block;width:100%;padding:8px 4px}
    .detail-table th{border-bottom:0;padding-bottom:2px}
    .detail-table td{padding-top:2px}
}

@media (max-width:760px){
    .responsive-card-table{background:transparent;border:0;box-shadow:none;padding:0;overflow:visible}
    .responsive-card-table table,.responsive-card-table thead,.responsive-card-table tbody,.responsive-card-table th,.responsive-card-table td,.responsive-card-table tr{display:block;width:100%}
    .responsive-card-table thead{display:none}
    .responsive-card-table tr{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:12px;box-shadow:0 8px 20px rgba(15,23,42,.04)}
    .responsive-card-table td{border:0;padding:8px 0;display:grid;grid-template-columns:118px 1fr;gap:10px;align-items:start}
    .responsive-card-table td::before{content:attr(data-label);font-weight:800;color:var(--muted);font-size:13px}
    .responsive-card-table td.actions{display:flex;gap:12px;justify-content:flex-start;white-space:normal}
    .responsive-card-table td.actions::before{display:none}
}

.stage-subpanel {
    border: 1px solid #d9e3f0;
    border-radius: 16px;
    padding: 1rem;
    background: #f8fbff;
    margin: .5rem 0;
}
.stage-subpanel h4 {
    margin: 0 0 .75rem;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0;
}
.summary-grid > div {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.85rem;
}
@media (max-width: 700px) {
    .summary-grid { grid-template-columns: 1fr; }
}


/* Secure in-browser document viewer */
.secure-view-card { padding: 1rem; }
.security-note {
    background: #f4f8ff;
    border: 1px solid #cfe0ff;
    border-radius: 12px;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    color: #17365d;
}
.secure-doc-frame-wrap {
    width: 100%;
    height: min(78vh, 900px);
    border: 1px solid #d7dde8;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.secure-doc-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}
.notice.warning {
    background: #fff7e6;
    border: 1px solid #ffd591;
    color: #5c3b00;
    border-radius: 12px;
    padding: 1rem;
}
@media (max-width: 760px) {
    .secure-doc-frame-wrap { height: 72vh; border-radius: 10px; }
    .secure-view-card { padding: .75rem; }
}

/* Secure document preview fallback improvements */
.viewer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin: .75rem 0 1rem;
}
.viewer-actions .form-hint {
    flex: 1 1 260px;
    margin: 0;
}
.secure-image-wrap {
    width: 100%;
    min-height: 50vh;
    max-height: 82vh;
    overflow: auto;
    border: 1px solid #d7dde8;
    border-radius: 14px;
    background: #f8fafc;
    text-align: center;
    padding: 1rem;
}
.secure-doc-image {
    max-width: 100%;
    height: auto;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15,23,42,.12);
}
.pdf-help { margin-top: .75rem; }
@media (max-width: 760px) {
    .viewer-actions { display: grid; grid-template-columns: 1fr; }
    .viewer-actions .button { width: 100%; text-align: center; }
    .secure-image-wrap { max-height: 74vh; padding: .5rem; border-radius: 10px; }
}

.checkbox-line{display:flex;gap:.6rem;align-items:flex-start;padding:.75rem;background:#f8fbfc;border:1px solid #d8e5ec;border-radius:12px}.checkbox-line input{width:auto;margin-top:.15rem}.success-box a{font-weight:700}
.no-email-stage-toggle {
    margin: .75rem 0;
    padding: .75rem .9rem;
    border: 1px solid #dbe7f3;
    border-radius: 12px;
    background: #f8fbff;
    color: #23344d;
    font-weight: 600;
}
.button.small { padding: .45rem .65rem; font-size: .9rem; }
.stage-subpanel select { width: 100%; }

.email-suppress-option { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; padding: 10px 12px; color: #7c2d12; align-items: flex-start; }
.email-suppress-option input { margin-top: 3px; flex: 0 0 auto; }
.email-suppress-option small { display:block; margin-top:2px; color:#9a3412; font-weight:400; }

/* Stage 4 manual pay override */
.manual-pay-toggle-panel {
    background: #f8fbff;
    border: 1px solid #dbe7f3;
}
.manual-pay-panel {
    display: grid;
    gap: 1rem;
}
.check-row {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-weight: 700;
}
.check-row input[type="checkbox"] {
    width: auto;
    flex: 0 0 auto;
    margin-top: .2rem;
}

/* Platform contract library and tenant assignment */
.tenant-contract-control { margin-top:.7rem; min-width:260px; }
.tenant-contract-control summary { color:var(--primary); cursor:pointer; font-weight:800; }
.tenant-contract-control[open] { background:#f8fbff; border:1px solid #dbe7f3; border-radius:12px; padding:.8rem; }
.tenant-contract-control .checkline { background:#fff; border:1px solid #e2e8f0; border-radius:9px; padding:.55rem .65rem; }
.tenant-contract-control small { color:var(--muted); }
@media (max-width:760px) {
    .tenant-contract-control { min-width:220px; }
    .tenant-contract-control button { width:100%; }
}