/* FOP UI kit — component-level styles (imports base tokens) */
@import url('./colors_and_type.css');

*,*::before,*::after{box-sizing:border-box;}
html,body,#root{margin:0;padding:0;height:100%;}
body{background:var(--bg-2);color:var(--fg-1);font-family:var(--font-body);}

/* ============ SHELL ============ */
.fop-shell{
  display:grid;
  grid-template-columns:220px 1fr;
  grid-template-rows:56px 1fr;
  grid-template-areas:"header header" "nav main";
  height:100vh;
}
.fop-topbar{
  grid-area:header;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
  background:var(--af-navy);
  color:#fff;
  border-bottom:3px solid var(--af-red);
}
.fop-topbar .brand{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-display);
  letter-spacing:.02em;text-transform:uppercase;
  font-size:15px;color:#fff;
}
.fop-topbar .brand img{height:28px;width:auto;}
.fop-topbar .brand .wordmark{
  font-weight:700;font-size:20px;letter-spacing:.14em;
  padding-right:12px;border-right:1px solid rgba(255,255,255,.2);
}
.fop-topbar .brand .tenant{
  font-family:var(--font-body);
  font-weight:500;font-size:12px;letter-spacing:.06em;
  color:rgba(255,255,255,.7);text-transform:none;
}
.fop-topbar .brand img{height:28px;width:auto;}
.fop-topbar .right{display:flex;gap:12px;align-items:center;color:rgba(255,255,255,.7);font-size:13px;}
.fop-topbar .right .phase{font-family:var(--font-display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;font-size:12px;padding:4px 10px;background:rgba(229,30,37,.25);border:1px solid rgba(229,30,37,.5);}
.fop-topbar .right .who{color:#fff;}
.fop-topbar button{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff;padding:5px 12px;font-size:12px;cursor:pointer;font-family:var(--font-body);font-weight:600;border-radius:3px;}
.fop-topbar button:hover{background:rgba(255,255,255,.08);}

/* ============ NAV ============ */
.fop-nav{
  grid-area:nav;
  background:var(--af-navy);
  overflow-y:auto;
  padding:12px 0 24px;
  border-right:1px solid rgba(255,255,255,.05);
}
.fop-nav-group{margin-bottom:14px;}
.fop-nav-group-label{padding:12px 16px 6px;font-family:var(--font-display);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.5);}
.fop-nav a{display:flex;align-items:center;gap:10px;padding:8px 16px;color:rgba(255,255,255,.88);text-decoration:none;font-family:var(--font-body);font-weight:500;font-size:13px;border-left:3px solid transparent;transition:background .12s,color .12s,border-color .12s;}
.fop-nav a:hover{background:rgba(255,255,255,.05);color:#fff;}
.fop-nav a.active{background:rgba(229,30,37,.14);border-left-color:var(--af-red);color:#fff;}
.fop-nav a .icon{width:16px;text-align:center;opacity:.75;flex-shrink:0;}

.fop-main{grid-area:main;overflow-y:auto;padding:24px 32px;background:var(--bg-2);}

/* ============ PRIMITIVES ============ */
.fop-panel{background:var(--bg-1);border:1px solid var(--border-1);border-radius:6px;overflow:hidden;}
.fop-panel.accent{border-top:3px solid var(--af-red);}
.fop-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-1);background:var(--bg-2);}
.fop-panel-title{font-family:var(--font-display);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--af-red);}
.fop-panel-body{padding:16px;}
.fop-panel-list > *{padding:12px 16px;border-bottom:1px solid var(--border-1);}
.fop-panel-list > *:last-child{border-bottom:none;}

.fop-btn{font-family:var(--font-body);font-weight:600;font-size:13px;padding:9px 16px;border-radius:3px;cursor:pointer;border:1px solid var(--border-1);background:var(--bg-1);color:var(--fg-1);}
.fop-btn.primary{background:var(--af-red);color:#fff;border-color:var(--af-red);}
.fop-btn.primary:hover{background:var(--af-red-dark);border-color:var(--af-red-dark);}
.fop-btn.ghost{background:transparent;border-color:transparent;color:var(--fg-2);}
.fop-btn.ghost:hover{background:var(--bg-2);color:var(--fg-1);}
.fop-btn:disabled{opacity:.45;cursor:not-allowed;}

.fop-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-family:var(--font-display);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;border-radius:2px;border:1px solid var(--border-1);background:var(--af-parchment);color:var(--fg-2);}
.fop-badge.red{background:rgba(229,30,37,.12);color:var(--af-red);border-color:rgba(229,30,37,.3);}
.fop-badge.sky{background:rgba(65,182,230,.14);color:#1f7ba1;border-color:rgba(65,182,230,.35);}
.fop-badge.gold{background:rgba(255,199,44,.18);color:#7a5a00;border-color:rgba(255,199,44,.45);}
.fop-badge.royal{background:rgba(0,71,187,.12);color:var(--af-royal);border-color:rgba(0,71,187,.3);}
.fop-badge.filled.red{background:var(--af-red);color:#fff;border-color:transparent;}
.fop-badge.filled.navy{background:var(--af-navy);color:#fff;border-color:transparent;}

input,select,textarea{font-family:var(--font-body);font-size:14px;padding:9px 12px;background:var(--bg-1);color:var(--fg-1);border:1px solid var(--border-1);border-radius:3px;outline:none;}
input:focus,select:focus,textarea:focus{border-color:var(--af-red);box-shadow:0 0 0 2px rgba(229,30,37,.18);}

/* ============ STATS ============ */
.fop-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--bg-1);border:1px solid var(--border-1);border-radius:6px;overflow:hidden;}
.fop-stat{padding:16px 18px;border-right:1px solid var(--border-1);display:flex;flex-direction:column;gap:4px;}
.fop-stat:last-child{border-right:none;}
.fop-stat .num{font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1;letter-spacing:.02em;color:var(--fg-1);}
.fop-stat .num.sky{color:var(--af-sky);}
.fop-stat .num.amb{color:var(--af-gold);}
.fop-stat .num.red{color:var(--af-red);}
.fop-stat .num.blu{color:var(--af-royal);}
.fop-stat .lbl{font-family:var(--font-display);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-2);}
.fop-stat .sub{font-size:11px;color:var(--fg-3);}

/* ============ HERO ============ */
.fop-hero{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;padding:24px;background:var(--bg-1);border:1px solid var(--border-1);border-top:3px solid var(--af-red);border-radius:6px;}
.fop-hero .eye{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.18em;color:var(--af-red);text-transform:uppercase;margin-bottom:4px;}
.fop-hero h1{font-family:var(--font-display);font-weight:700;font-size:36px;letter-spacing:.03em;text-transform:uppercase;line-height:1.05;color:var(--fg-1);margin:0;}
.fop-hero .sub{color:var(--fg-2);font-size:13px;margin-top:6px;max-width:640px;}
.fop-hero .countdown{text-align:right;font-family:var(--font-display);min-width:180px;}
.fop-hero .countdown .num{display:block;font-size:56px;font-weight:700;line-height:1;color:var(--af-red);letter-spacing:.02em;}
.fop-hero .countdown .lbl{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--fg-2);margin-top:4px;}

/* ============ HOME GRID ============ */
.fop-home-grid{display:grid;grid-template-columns:1fr 320px;gap:16px;}
.fop-stack > * + *{margin-top:16px;}

.fop-attn{display:grid;grid-template-columns:8px 1fr auto;gap:12px;align-items:center;cursor:pointer;}
.fop-attn:hover{background:var(--bg-2);}
.fop-dot{width:8px;height:8px;border-radius:50%;background:var(--fg-3);}
.fop-dot.red{background:var(--af-red);}.fop-dot.amb{background:var(--af-gold);}.fop-dot.sky{background:var(--af-sky);}
.fop-attn-title{font-weight:600;color:var(--fg-1);font-size:13px;}
.fop-attn-meta{font-size:11px;color:var(--fg-2);margin-top:2px;}
.fop-attn-arrow{color:var(--fg-3);font-family:var(--font-display);font-size:13px;}

.fop-ready-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border-1);}
.fop-ready-cell{background:var(--bg-1);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.fop-ready-area{font-weight:600;font-size:13px;color:var(--fg-1);}
.fop-ready-note{font-size:11px;color:var(--fg-2);margin-top:2px;}

/* ============ CHECK-IN ============ */
.ci-grid{display:grid;grid-template-columns:1fr 460px;gap:16px;align-items:start;}
.ci-statusbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;background:var(--bg-1);border:1px solid var(--border-1);border-top:3px solid var(--af-red);border-radius:6px;}
.ci-statusbar-main,.ci-statusbar-right{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.ci-day-badge{font-family:var(--font-display);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-1);}
.ci-stat{display:inline-flex;align-items:center;gap:6px;background:var(--bg-2);border:1px solid var(--border-1);padding:4px 10px;font-size:12px;}
.ci-stat .dot{width:8px;height:8px;border-radius:50%;background:var(--fg-3);display:inline-block;}
.ci-stat .dot.sky{background:var(--af-sky);}.ci-stat .dot.amber{background:var(--af-gold);}

.ci-search{position:relative;margin-bottom:12px;}
.ci-search input{width:100%;font-family:var(--font-body);font-size:18px;font-weight:500;padding:14px 40px 14px 16px;border:2px solid var(--border-2);border-radius:3px;}
.ci-search input:focus{border-color:var(--af-red);box-shadow:0 0 0 3px rgba(229,30,37,.18);}
.ci-search .icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--fg-3);pointer-events:none;}
.ci-results{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow-y:auto;}
.ci-result{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:10px 12px;background:var(--bg-1);border:1px solid var(--border-1);cursor:pointer;text-align:left;width:100%;font:inherit;}
.ci-result:hover{border-color:var(--af-red);background:rgba(229,30,37,.035);}
.ci-result[data-selected="true"]{border-color:var(--af-red);border-left-width:3px;padding-left:10px;}
.ci-avatar{width:42px;height:42px;background:var(--af-navy);color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;}
.ci-name{font-weight:600;color:var(--fg-1);font-size:14px;}
.ci-sub{font-size:11px;color:var(--fg-2);margin-top:2px;}
.ci-id{font-family:var(--font-display);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-2);}

.ci-sel{background:var(--bg-1);border:1px solid var(--border-1);border-top:3px solid var(--af-red);border-radius:6px;overflow:hidden;}
.ci-sel-empty{background:var(--bg-1);border:1px dashed var(--border-1);border-radius:6px;padding:64px 32px;text-align:center;color:var(--fg-2);}
.ci-sel-empty h3{color:var(--fg-3);margin:0 0 8px;}
.ci-sel-hd{padding:20px;display:flex;align-items:flex-start;gap:16px;border-bottom:1px solid var(--border-1);}
.ci-sel-avatar{width:64px;height:64px;background:var(--af-red);color:#fff;font-family:var(--font-display);font-weight:700;font-size:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ci-sel-name{font-family:var(--font-display);font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--fg-1);line-height:1;}
.ci-sel-sub{font-size:13px;color:var(--fg-2);margin-top:6px;}
.ci-sel-body{padding:14px 20px;display:flex;flex-direction:column;}
.ci-info{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--border-1);font-size:13px;}
.ci-info:last-child{border-bottom:none;}
.ci-info-lbl{color:var(--fg-2);font-weight:500;}
.ci-info-val{color:var(--fg-1);font-weight:600;text-align:right;}
.ci-actions{padding:16px 20px;border-top:1px solid var(--border-1);background:var(--bg-2);display:flex;gap:12px;}
.ci-actions .fop-btn.primary{flex:1;padding:14px;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:14px;}

.ci-warn{margin:0 20px 16px;padding:10px 14px;background:rgba(255,199,44,.12);border:1px solid rgba(255,199,44,.45);border-left:4px solid var(--af-gold);font-size:12px;font-weight:600;color:#7a5a00;}
.ci-warn.red{background:rgba(229,30,37,.08);border-color:rgba(229,30,37,.4);border-left-color:var(--af-red);color:var(--af-red);}

/* ============ MODAL ============ */
.fop-modal-scrim{position:fixed;inset:0;z-index:1000;background:rgba(15,20,32,.55);display:flex;align-items:center;justify-content:center;padding:16px;}
.fop-modal{background:var(--bg-1);border-top:3px solid var(--af-red);border-radius:6px;max-width:420px;width:100%;padding:24px;box-shadow:var(--shadow-lg);}
.fop-modal h3{font-family:var(--font-display);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.05em;margin:0 0 12px;color:var(--fg-1);}
.fop-modal label{display:block;font-size:12px;font-weight:600;color:var(--fg-1);margin:16px 0 6px;}
.fop-modal input[type="password"]{width:100%;font-family:var(--font-mono);font-size:22px;font-weight:700;letter-spacing:.5em;text-align:center;padding:12px;border:2px solid var(--border-2);}
.fop-modal input[type="password"]:focus{border-color:var(--af-red);}
.fop-modal-err{color:var(--af-red);font-size:13px;font-weight:600;margin-top:6px;min-height:1.2em;}
.fop-modal-actions{display:flex;gap:12px;margin-top:20px;}
.fop-modal-actions .fop-btn{flex:1;padding:12px;}

/* ============ LOGIN ============ */
.fop-login{display:grid;place-items:center;min-height:100vh;padding:24px;background:var(--af-parchment) radial-gradient(ellipse at 20% 50%,rgba(229,30,37,.05) 0%,transparent 60%);}
.fop-login-card{max-width:440px;width:100%;padding:36px 36px 28px;border:1px solid var(--border-1);border-top:3px solid var(--af-red);border-radius:10px;background:var(--bg-1);text-align:center;box-shadow:var(--shadow-md);}
.fop-login-card img{height:120px;margin:0 auto 20px;display:block;}
.fop-login-card h1{font-family:var(--font-display);font-size:26px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px;font-weight:700;color:var(--fg-1);}
.fop-login-tagline{font-family:var(--font-display);font-size:11px;color:var(--fg-2);text-transform:uppercase;letter-spacing:.15em;margin-bottom:8px;font-weight:600;}
.fop-login-sub{font-size:13px;color:var(--fg-2);margin-bottom:24px;line-height:1.5;}
.fop-login-btn{width:100%;padding:12px;background:var(--af-red);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font-body);display:flex;align-items:center;justify-content:center;gap:10px;}
.fop-login-btn:hover{background:var(--af-red-dark);}
.fop-login-footer{margin-top:18px;font-size:11px;color:var(--fg-2);}

/* ============ KV ============ */
.fop-kv{display:grid;grid-template-columns:140px 1fr;gap:6px 16px;font-size:13px;}
.fop-kv dt{color:var(--fg-2);font-weight:500;}
.fop-kv dd{margin:0;color:var(--fg-1);font-family:var(--font-mono);font-size:12px;}

/* ============ TABLES ============ */
.fop-table{width:100%;border-collapse:collapse;font-size:13px;}
.fop-table th{text-align:left;padding:10px 14px;background:var(--bg-2);font-family:var(--font-display);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-2);border-bottom:1px solid var(--border-1);}
.fop-table td{padding:10px 14px;border-bottom:1px solid var(--border-1);color:var(--fg-1);vertical-align:middle;}
.fop-table tr:last-child td{border-bottom:none;}
.fop-table tr:hover td{background:var(--bg-2);}

/* ============ EYEBROW / SECTION ============ */
.fop-section-hd{display:flex;align-items:baseline;gap:14px;padding-bottom:10px;margin-bottom:16px;border-bottom:2px solid var(--af-red);}
.fop-section-num{font-family:var(--font-display);font-size:11px;color:var(--af-red);letter-spacing:.15em;font-weight:600;}
.fop-section-title{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-1);}

.fop-muted{color:var(--fg-2);}

@media (max-width:960px){
  .fop-home-grid{grid-template-columns:1fr;}
  .ci-grid{grid-template-columns:1fr;}
}