/* VisaOps — Smile for Miles palette
   DARK #3D0000 · MED #6B0000 · NAVY #1A2E4A · ALT #FFF8F0
   GREEN #C8E6C9 · RED #FFCDD2 · YELLOW #FFF9C4 · GREY #ECEFF1 */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
       background: #FFF8F0; color: #3D0000; font-size: 14px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.hidden { display: none !important; }
.tiny { font-size: 11.5px; color: #6b6b6b; }
.muted { color: #777; }
h1 { font-size: 21px; color: #6B0000; }
h3 { font-size: 15px; color: #1A2E4A; margin-bottom: 10px; }
h4 { font-size: 13px; color: #1A2E4A; margin: 16px 0 8px; }
a { color: #1A2E4A; }

/* ---------- top bar ---------- */
.topbar { background: #3D0000; color: #fff; padding: 12px 0; margin-bottom: 22px; }
.topbar .wrap { display: flex; align-items: center; gap: 24px; }
.logo { font-weight: bold; letter-spacing: .5px; }
.topbar nav { flex: 1; display: flex; gap: 4px; }
.topbar nav a { color: #f3d9d9; text-decoration: none; padding: 6px 14px; border-radius: 16px;
                font-size: 13px; font-weight: bold; }
.topbar nav a.on, .topbar nav a:hover { background: rgba(255,255,255,.14); color: #fff; }
.who { font-size: 12.5px; color: #f3d9d9; }
.who .role { background: #6B0000; padding: 2px 8px; border-radius: 10px; margin: 0 8px;
             font-size: 10.5px; text-transform: uppercase; }
.who .out { color: #f3d9d9; }

/* ---------- layout ---------- */
.bar { display: flex; justify-content: space-between; align-items: center;
       flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.lede { color: #555; margin-bottom: 16px; max-width: 780px; }
.card { background: #fff; border-radius: 10px; box-shadow: 0 1px 6px rgba(61,0,0,.10);
        padding: 20px; margin-bottom: 18px; }
.cols { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.col { flex: 1; min-width: 300px; }
.col.wide { flex: 1.5; min-width: 420px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 170px; }
.btnbox { display: flex; align-items: flex-end; flex: 0 0 auto !important; }
.checkline { display: flex; flex-direction: column; }

/* ---------- forms ---------- */
label { display: block; font-size: 11.5px; font-weight: bold; color: #1A2E4A; margin: 12px 0 4px; }
input, select, textarea { width: 100%; padding: 9px 10px; border: 1px solid #d3ccc4;
  border-radius: 6px; font-size: 13.5px; font-family: inherit; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid #1A2E4A33; border-color: #1A2E4A; }
textarea { resize: vertical; }
input.got { background: #F4FBF4; border-color: #b6d9b8; }
.chk { display: flex; align-items: center; gap: 6px; font-weight: normal; }
.chk input { width: auto; }

.btn { display: inline-block; padding: 10px 18px; background: #6B0000; color: #fff; border: 0;
       border-radius: 8px; font-size: 13.5px; font-weight: bold; cursor: pointer;
       text-decoration: none; margin-top: 12px; }
.btn:hover { background: #5a0000; }
.btn.ghost { background: #fff; color: #1A2E4A; border: 1.5px solid #1A2E4A; }
.btn.navy { background: #1A2E4A; }
.btn.big { width: 100%; padding: 13px; font-size: 15px; }
.btn.tinybtn { padding: 5px 11px; font-size: 11.5px; margin: 0; }
.btn:disabled { background: #aaa; cursor: wait; }
.btnrow { display: flex; gap: 10px; }

/* ---------- upload slots ---------- */
.slot { display: flex; gap: 8px; align-items: center; background: #FFF8F0;
        border: 1px solid #e8ded2; border-radius: 8px; padding: 7px 9px; margin-top: 7px; }
.slot select { flex: 0 0 180px; }
.slot input[type=file] { flex: 1; border: 0; background: transparent; padding: 4px; }
.slot .x { background: none; border: 0; color: #c62828; cursor: pointer; font-size: 15px; }

/* ---------- tables ---------- */
table.grid { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px;
             overflow: hidden; box-shadow: 0 1px 6px rgba(61,0,0,.10); }
table.grid th { background: #1A2E4A; color: #fff; text-align: left; padding: 9px 11px;
                font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; }
table.grid td { padding: 9px 11px; border-top: 1px solid #f0e9e0; font-size: 13px; }
table.grid tr:hover td { background: #FFF8F0; cursor: pointer; }
table.grid.small td, table.grid.small th { padding: 6px 9px; font-size: 12px; }
table.grid tr.off { opacity: .45; }
table.kv { width: 100%; }
table.kv td { padding: 5px 0; font-size: 13px; vertical-align: top; }
table.kv td:first-child { color: #888; width: 42%; font-size: 12px; }

/* ---------- status + flags ---------- */
.badge { background: #1A2E4A; color: #fff; border-radius: 12px; font-size: 11px;
         padding: 3px 10px; margin-left: 8px; vertical-align: middle; }
.badge.alt { background: #6B0000; }
.status { font-size: 11px; padding: 3px 9px; border-radius: 10px; background: #ECEFF1; white-space: nowrap; }
.sIntake { background: #ECEFF1; } .sDocsReceived { background: #FFF9C4; }
.sVerified { background: #C8E6C9; } .sFormReady { background: #C8E6C9; }
.sSubmitted { background: #BBDEFB; } .sAppointmentBooked { background: #BBDEFB; }
.sPassportBack { background: #D1C4E9; } .sDecision { background: #CFD8DC; }
.flag { font-size: 10.5px; font-weight: bold; padding: 2px 8px; border-radius: 9px; }
.flag.GREEN { background: #C8E6C9; color: #1b5e20; }
.flag.AMBER { background: #FFF9C4; color: #7a5900; }
.flag.RED   { background: #FFCDD2; color: #b71c1c; }

.pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pill { background: #fff; border: 1px solid #e8ded2; border-radius: 14px;
        padding: 4px 12px; font-size: 12px; }
.pill.total { background: #1A2E4A; color: #fff; border-color: #1A2E4A; }
.search { display: flex; gap: 8px; margin-bottom: 16px; max-width: 560px; align-items: center; }
.search input { margin: 0; } .search .btn { margin: 0; }

/* ---------- letter workshop ---------- */
.letterbox { background: #fff; border: 1px solid #d3ccc4; border-radius: 8px; padding: 16px;
             min-height: 420px; font-size: 13px; line-height: 1.6; white-space: pre-wrap;
             font-family: Arial, sans-serif; }
.letterbox:focus { outline: 2px solid #1A2E4A33; }
.flagbox { border-radius: 8px; padding: 13px; margin-top: 13px; }
.flagbox.GREEN { background: #C8E6C9; border: 2px solid #2e7d32; }
.flagbox.AMBER { background: #FFF9C4; border: 2px solid #f9a825; }
.flagbox.RED   { background: #FFCDD2; border: 2px solid #c62828; }
.issue { background: rgba(255,255,255,.72); border-radius: 6px; padding: 8px 10px;
         margin-top: 8px; font-size: 12.5px; line-height: 1.45; }
.issue b { color: #6B0000; }
.checkrow { border-top: 1px solid #f0e9e0; padding: 9px 0; font-size: 13px; }
.checkrow:first-of-type { border-top: 0; }
.warn-inline { color: #b71c1c; }

/* ---------- misc ---------- */
.spin { font-size: 13px; color: #6B0000; padding: 10px 0; font-weight: bold; }
.err { background: #FFCDD2; color: #b71c1c; padding: 10px 12px; border-radius: 7px;
       font-size: 13px; margin: 10px 0; font-weight: bold; }
.ok { background: #C8E6C9; color: #1b5e20; padding: 10px 12px; border-radius: 7px;
      font-size: 13px; margin: 10px 0; font-weight: bold; }
.warn { background: #FFF9C4; color: #7a5900; padding: 10px 12px; border-radius: 7px;
        font-size: 12.5px; margin: 10px 0; }
.flash { background: #C8E6C9; color: #1b5e20; padding: 11px 14px; border-radius: 8px;
         margin-bottom: 16px; font-size: 13px; font-weight: bold; }
.empty { background: #fff; border-radius: 10px; padding: 44px; text-align: center; color: #777; }
.docs { list-style: none; }
.docs li { padding: 6px 0; border-top: 1px solid #f0e9e0; font-size: 13px; }
.docs li:first-child { border-top: 0; }
.notes { background: #FFF8F0; border-radius: 7px; padding: 10px; font-size: 13px; line-height: 1.5; }
.fieldgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 4px 14px; }
.itin { margin-top: 18px; }
.countryrow { display: grid; grid-template-columns: 1.1fr 2fr 0.9fr 0.6fr auto;
              gap: 10px; align-items: center; border-top: 1px solid #f0e9e0; padding: 11px 0; }
.countryrow textarea { font-size: 12px; }
.fam { font-size: 10px; padding: 1px 7px; border-radius: 8px; margin-left: 6px; }
.fam.a { background: #C8E6C9; } .fam.b { background: #FFF9C4; }
.foot { text-align: center; color: #999; font-size: 11.5px; padding: 34px 20px; }

/* ---------- auth pages ---------- */
.auth-bg { display: flex; align-items: center; justify-content: center; min-height: 100vh;
           background: #3D0000; }
.auth-card { background: #fff; border-radius: 12px; padding: 34px; width: 100%; max-width: 400px;
             box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.brand { font-size: 21px; font-weight: bold; color: #6B0000; }
.brand-sub { font-size: 12px; color: #888; margin-bottom: 22px; }
.auth-card h1 { font-size: 17px; margin-bottom: 6px; }
.auth-card .btn { width: 100%; margin-top: 20px; padding: 12px; }

@media (max-width: 760px) {
  .cols { flex-direction: column; }
  .col, .col.wide { min-width: 100%; }
  .countryrow { grid-template-columns: 1fr; }
  .topbar .wrap { flex-wrap: wrap; gap: 10px; }
}

/* ---------- checklist-driven upload slots (upgrade 1) ---------- */
.slot { flex-wrap: wrap; }
.slot.req { border-left: 3px solid #6B0000; }
.slot .reqstar { color: #c62828; font-weight: bold; font-size: 15px; }
.slot .guide { flex-basis: 100%; font-size: 11px; color: #7a6a5a; padding: 2px 2px 0 4px; }
.chkgrid { width: 100%; border-collapse: collapse; }
.chkgrid td { padding: 4px 6px; border-top: 1px solid #f0e9e0; font-size: 12.5px; vertical-align: middle; }
.chkgrid input[type=text] { padding: 5px 7px; font-size: 12.5px; }
.chkgrid td.act { width: 1%; white-space: nowrap; }
.cfilter { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px; flex-wrap: wrap; }
.cfilter > div { flex: 0 0 210px; }