/* /HBMODB_Files/css/hbmo-login-picard.css
   Tighten + HBMO color mapping for Picard LCARS theme (login page)
   Drop-in replacement for your current hbmo-login-picard.css
*/

:root{
  /* School colors */
  --hbmo-green:#215732;
  --hbmo-gold:#FFCD00;

  /* --- Token remap (Picard theme expects these) --- */
  --color-background:#000000;

  /* Main big corner panels */
  --color-disabled: var(--hbmo-green);     /* big blocks = green (outer) */

  /* Inner rails / highlight lines */
  --color-primary:  var(--hbmo-gold);      /* inner lines = gold */

  /* Text */
  --color-text: rgba(255,255,255,.86);
  --color-text-dark:#0a0a0a;
  --color-link: rgba(255,255,255,.80);

  /* Accents */
  --color-primary-text:#b9c7d6;
  --color-supplement-01:#2b2f38;           /* grid tint base */
  --color-success:#3bb273;
  --color-success-dark:#1f6b45;

  /* Alerts */
  --color-danger:#b53127;
  --color-danger-bright:#ff6a5f;
  --color-red-alert:#ff3b30;

  /* Geometry */
  --gap:16px;
  --gap75:12px;
  --gap50:8px;
  --gap25:4px;

  --radius100:14px;
  --border-width:1px;

  --transition:320ms;
  --transition-duration-slow:1400ms;
}

/* LOGIN: force Picard font stack (assumes @font-face is loaded somewhere globally) */
:root{
  --hbmo-picard-font: "Picard 25th Century", "Antonio", "Orbitron", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
body.login-page{
  font-family: var(--hbmo-picard-font) !important;
}
.login-box section::before,
.login-box section::after{
  font-family: var(--hbmo-picard-font) !important;
}


/* ===== Page centering + prevent giant empty field ===== */
html,body{height:100%;}
body.login-page{
  background:#000 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* ============================================================
   LCARS / PICARD TYPOGRAPHY (login page only)
   - Uses the “Picard / 25th Century” font if available
   - Falls back gracefully if the font isn’t installed/loaded
   ============================================================ */

body.login-page,
body.login-page *{
  font-family:
    "LCARS",
    "Federation",
    "Federation Wide",
    "Okuda",
    "Antonio",
    "Rajdhani",
    "Orbitron",
    system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* LCARS-style label rhythm */
body.login-page{
  letter-spacing: .02em;
}

/* Headings + plates get the “LCARS” spacing */
body.login-page .login-box section::before,
body.login-page .login-box section::after,
body.login-page .login-logo::before,
body.login-page .btn,
body.login-page .hbmo-login-form button.btn-primary{
  text-transform: uppercase !important;
  font-weight: 800 !important;
  letter-spacing: .12 !important;
}

/* Inputs slightly tighter (readability) */
body.login-page .hbmo-login-form input{
  letter-spacing: .06em !important;
  font-weight: 700 !important;
}


/* ===== Box sizing / overall scale ===== */
.login-box{
  width:min(980px, 96vw) !important;
  height:min(450px) !important;
  max-width:none !important;
  padding: calc(var(--gap) * 2) var(--gap) !important;
  position:relative;
}

/* Pull the big LCARS panels in tighter so they don't dominate the page */
.login-box::before{
  /* panel lines */
  inset: 18% calc(var(--gap) * 1.75) !important;
  border-radius: calc(var(--radius100) * 2) !important;
}

.login-box::after{
  /* main panels */
  border-radius: calc(var(--radius100) * 4) !important;
}

/* ===== Section layout: keep it centered and compact ===== */
.login-box section{
  background:#000 !important;
  border-radius: calc(var(--radius100) * 2) !important;
  padding: calc(var(--gap) * 2) calc(var(--gap) * 2) !important;
  gap: calc(var(--gap) * 2) !important;
  align-items:center !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.65);
}

/* ===== Top title: stop the “giant clipped” behavior on desktop ===== */
.login-box section::before{
  content:"AUTHORIZED ACCESS ONLY" !important;
  width: 520px !important;
  height: 32px !important;
  top: 8px !important;
  translate: -50% 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.62) !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
  outline: none !important;
  animation: none !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

/* ===== Bottom footer grid: smaller + centered ===== */
.login-box section::after{
  content:"SYSTEM READY: AWAITING CREDENTIALS" !important;
  width: 520px !important;
  height: 34px !important;
  bottom: 10px !important;
  translate: -50% 0 !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  opacity: 1 !important;
  animation: none !important;
  border-radius: calc(var(--radius100) * 2) !important;
}

/* ===== Logo block ===== */
.login-logo{
  width: 240px !important;
  padding-right: 0 !important;
}
.loginpage-logo{
  width: 210px !important;
  height:auto !important;
}

/* Left little “Login-74205A” tag: keep, but align nicely */
.login-logo::before{
  content:"■ LOGIN-74205A" !important;
  width: 75px !important;
  inset: auto auto 34px -240px !important;
  border-top: 2px solid #000 !important;
  border-bottom: 2px solid #000 !important;
  opacity: .95;
}

/* ===== Card: keep to a known width so it matches mock ===== */
.login-box .card{
  max-width: 560px !important;
}

/* Inputs: flatter + console-like */
.hbmo-login-form input{
  height: 32px !important;
  border-radius: 999px !important;
  background: #6f6f6f !important;
  color:#000 !important;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.22) !important;
}

/* Login button: more LCARS (less pill) */
.hbmo-login-form button.btn-primary{
  height: 32px !important;
  border-radius: 8px !important;
  background: #b9c7d6 !important;
  color:#000 !important;
  letter-spacing: .12em !important;
}

/* U:/P: tags (your inline blocks) */
.hbmo-login-form .hbmo-tag{
  width: 14px;
  text-align:center;
  font-weight: 900;
  letter-spacing: .12em;
  color: rgba(255,255,255,.70);
}

/* ===== Forgot password panel: tighter + LCARS box ===== */
.hbmo-forgot{ margin-top: 14px !important; }
.hbmo-forgot .box-header{
  background: var(--color-danger) !important;
  color: var(--hbmo-gold) !important;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 900;
}
.hbmo-forgot .box-body{
  border-color: rgba(255,205,0,.65) !important;
  border-width: 2px !important;
  border-radius: 0 0 var(--radius100) var(--radius100) !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 12px !important;
  letter-spacing: .08em;
  line-height: 1.35;
}
.hbmo-forgot .btn-box-tool{
  color: var(--hbmo-gold) !important;
  font-weight: 900;
}

/* Mobile: reduce the heavy pseudo panels */
@media (max-width: 991px){
  .login-box{ padding: var(--gap) !important; }
  .login-box::before{ inset: 22% var(--gap) !important; }
  .login-box section::before,
  .login-box section::after{ width: min(92vw, 520px) !important; }
  .login-logo::before{ display:none !important; }
}

/* ===== Tighten pass (v2 → v2a) ===== */

/* 1) Raise "AUTHORIZED ACCESS ONLY" a bit */
.login-box section::before{
  top: -35px !important;          /* was: 8px */
}

/* 2) Lower the "SYSTEM READY: AWAITING CREDENTIALS" pill a bit */
.login-box section::after{
  bottom: -40px !important;      /* was: 10px */
}

/* 3) Align LEFT edge of the green main panel with the "LOGIN-74205A" tag */
.login-box{
  --hbmo-left-edge: -60px;        /* single knob: adjust 18–32px if needed */
}

/* Pull the big LCARS panels in so their left edge becomes consistent */
.login-box::after{
  inset: 0 var(--hbmo-left-edge) !important;              /* was inset:0 */
}
.login-box::before{
  inset: 18% calc(var(--hbmo-left-edge) + 24px) !important;/* keeps inner lines aligned */
}

/* Move the LOGIN-74205A tag so its LEFT edge matches that same edge */
.login-logo{ position: relative !important; }
.login-logo::before{
  width: 220px !important;
  inset: auto auto 14px var(--hbmo-left-edge) !important; /* was: ... -240px */
  transform: translateX(-100%) !important;                /* puts it just outside the panel edge */
}
/* ============================================================
   HBMO LOGIN — LCARS “EDGE CONTROLS” (clean + labeled)
   Put this block at the VERY BOTTOM of hbmo-login-picard.css
   ============================================================ */

/* ------------------------------------------------------------
   0) QUICK MAP (what is what?)
   ------------------------------------------------------------

   GREEN BOX  = .login-box::after
     - The big rounded green LCARS outer panels (left & right).

   YELLOW BOX = .login-box::before
     - The inner “rails/lines” frame that sits inside the green.

   CENTER BOX = .login-box section
     - The black content area that holds logo + inputs.

   TOP LABEL  = .login-box section::before
     - "AUTHORIZED ACCESS ONLY"

   BOTTOM LABEL = .login-box section::after
     - "SYSTEM READY: AWAITING CREDENTIALS"

   LOGIN74205A BOX = .login-logo::before
     - The small tag plate on the left side that reads LOGIN-74205A
*/

/* ------------------------------------------------------------
   1) MASTER KNOBS (adjust THESE first)
   ------------------------------------------------------------ */
.login-box{
  /* GREEN BOX edges (outer panels) */
  --hbmo-green-top:    -30px;   /* move GREEN BOX down/up */
  --hbmo-green-right:  -50px;  /* move GREEN BOX inward from the right */
  --hbmo-green-bottom: 50px;   /* move GREEN BOX up/down from bottom */
  --hbmo-green-left:   -100px;  /* move GREEN BOX inward from the left */

  /* YELLOW BOX edges (inner lines/rails) */
  --hbmo-yellow-top:    2%;                         /* vertical placement of inner rails */
  --hbmo-yellow-right:  calc(var(--hbmo-green-right) + 16px);
  --hbmo-yellow-bottom: 18%;
  --hbmo-yellow-left:   calc(var(--hbmo-green-left) + 75px);

  /* LOGIN74205A tag position */
  --hbmo-tag-bottom: -34px;   /* raise/lower the LOGIN74205A tag */
  --hbmo-tag-width:  65px;  /* width of the tag plate */
  

  /* TOP + BOTTOM labels (text plates) */
  --hbmo-toplabel-top:   -61px;  /* raise/lower AUTHORIZED ACCESS ONLY */
  --hbmo-bottomlabel-bottom: -65px; /* raise/lower SYSTEM READY... */
}

/* ------------------------------------------------------------
   2) GREEN BOX (outer LCARS panels)
   This is the big green rounded LCARS shape.
   ------------------------------------------------------------ */
.login-box::after{
  inset: var(--hbmo-green-top)
         var(--hbmo-green-right)
         var(--hbmo-green-bottom)
         var(--hbmo-green-left) !important;
  /* border-radius is already set earlier in your file */
}

/* ------------------------------------------------------------
   3) YELLOW BOX (inner rails/lines frame)
   This is the inner “gold rails” panel.
   ------------------------------------------------------------ */
.login-box::before{
  inset: var(--hbmo-yellow-top)
         var(--hbmo-yellow-right)
         var(--hbmo-yellow-bottom)
         var(--hbmo-yellow-left) !important;
}

/* ------------------------------------------------------------
   4) CENTER BOX (content area)
   This is the black area holding logo + login form.
   ------------------------------------------------------------ */
.login-box section{
  /* If you want the center box to sit tighter/looser within the LCARS,
     adjust padding + gap here. */
  padding: calc(var(--gap) * 4) calc(var(--gap) * 2.5) !important;
  gap: calc(var(--gap) * 2) !important;
  background: #000 !important;
}

/* ------------------------------------------------------------
   5) TOP LABEL (“AUTHORIZED ACCESS ONLY”)
   This is the label above the center box.
   ------------------------------------------------------------ */
.login-box section::before{
  top: var(--hbmo-toplabel-top) !important;
}

/* ------------------------------------------------------------
   6) BOTTOM LABEL (“SYSTEM READY: AWAITING CREDENTIALS”)
   This is the rounded rectangle below the center box.
   ------------------------------------------------------------ */
.login-box section::after{
  bottom: var(--hbmo-bottomlabel-bottom) !important;
}

/* ------------------------------------------------------------
   7) LOGIN74205A BOX (the small tag plate)
   This aligns to the GREEN BOX left edge and sits just outside it.
   ------------------------------------------------------------ */
.login-logo{
  position: relative !important;
}

.login-logo::before{
  width: var(--hbmo-tag-width) !important;

  /* Anchor to the GREEN BOX left edge */
  left: var(--hbmo-green-left) !important;

  /* Vertical position */
  bottom: var(--hbmo-tag-bottom) !important;

  /* Keep your existing look */
  border-top: 3px solid #000 !important;
  border-bottom: 3px solid #000 !important;
  opacity: .95 !important;

  /* Pull it OUTSIDE the green panel edge */
  transform: translateX(-75%) !important;

  /* Ensure inset doesn't override left/bottom unintentionally */
  inset: auto auto var(--hbmo-tag-bottom) var(--hbmo-green-left) !important;
}