/* ==============================================================
   Akasa Aerospace — Employee Portal
   Shares the blueprint / plate visual language of the public site.
============================================================== */

:root{
  --ink:        #10161c;
  --steel:      #1c2733;
  --paper:      #f5f6f4;
  --line:       #2c3a48;
  --accent:     #ff6a1a;
  --accent-ink: #7a2e00;
  --ok:         #1f7a4d;
  --warn:       #b3821b;
  --danger:     #b3261e;
  --radius:     2px;
  font-size: 16px;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  line-height: 1.5;
}

h1,h2,h3,h4{
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0 0 .4em;
  color: var(--ink);
}

h1{ font-size: 2.2rem; }
h2{ font-size: 1.5rem; }
h3{ font-size: 1.15rem; }

a{ color: var(--accent-ink); }

.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }

.blueprint-bg{
  position: fixed; inset:0; z-index:-1;
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(28,39,51,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,39,51,.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ---------------- Nav ---------------- */
.portal-nav{
  background: var(--ink);
  border-bottom: 3px solid var(--accent);
}
.portal-nav-inner{
  display:flex; align-items:center; gap:2rem;
  min-height: 64px; flex-wrap: wrap; padding-top:.5rem; padding-bottom:.5rem;
}
.brand{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:1.3rem; color:#fff; text-decoration:none; }
.brand span{ color: var(--accent); }
.portal-nav-links{ display:flex; gap:1.3rem; flex:1; flex-wrap:wrap; }
.portal-nav-links a{ color:#c9d2da; text-decoration:none; font-size:.92rem; font-weight:500; }
.portal-nav-links a:hover{ color:#fff; }
.portal-nav-user{ display:flex; align-items:center; gap:.8rem; }
.user-chip{ color:#fff; font-size:.85rem; }
.user-chip em{ font-style:normal; color: var(--accent); margin-left:.4em; text-transform:uppercase; font-size:.7rem; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:.4em; justify-content:center;
  padding:.6em 1.2em; border-radius: var(--radius); border:1px solid var(--ink);
  background: var(--ink); color:#fff; font-weight:600; font-size:.92rem;
  text-decoration:none; cursor:pointer;
}
.btn:hover{ background: var(--steel); }
.btn-accent{ background: var(--accent); border-color: var(--accent); color:#1a0d00; }
.btn-accent:hover{ background:#ff7f3a; }
.btn-ghost{ background:transparent; color:#fff; border-color:#48586a; }
.btn-ghost:hover{ background:rgba(255,255,255,.08); }
.btn-sm{ padding:.4em .9em; font-size:.82rem; }
.btn-danger{ background: var(--danger); border-color: var(--danger); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------------- Cards / plates ---------------- */
.plate{
  background:#fff; border:1px solid #dcdfe2; border-radius: var(--radius);
  position:relative; padding:1.5rem;
}
.plate .corner{ position:absolute; width:10px; height:10px; border-color: var(--ink); border-style:solid; }
.corner.tl{ top:-1px; left:-1px; border-width:2px 0 0 2px; }
.corner.tr{ top:-1px; right:-1px; border-width:2px 2px 0 0; }
.corner.bl{ bottom:-1px; left:-1px; border-width:0 0 2px 2px; }
.corner.br{ bottom:-1px; right:-1px; border-width:0 2px 2px 0; }

.module-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; margin:1.5rem 0; }
.module-card{ text-decoration:none; color:inherit; transition: transform .15s ease; }
.module-card:hover{ transform: translateY(-3px); }
.module-card h3{ margin-bottom:.3em; }
.module-card p{ color:#586472; font-size:.92rem; margin:0; }
.module-tag{ display:inline-block; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--accent-ink); background:#fff1e6; padding:.2em .6em; border-radius:2px; margin-bottom:.8em; }

/* ---------------- Auth pages ---------------- */
.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; }
.auth-card{ width:100%; max-width:440px; background:#fff; border:1px solid #dcdfe2; padding:2.4rem; position:relative; }
.auth-card h1{ font-size:1.7rem; margin-bottom:.15em; }
.auth-sub{ color:#586472; font-size:.92rem; margin-bottom:1.6rem; }
.auth-links{ margin-top:1.4rem; font-size:.88rem; text-align:center; color:#586472; }

/* ---------------- Forms ---------------- */
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.35em; color: var(--steel); }
.field .hint{ font-size:.78rem; color:#8993a0; margin-top:.3em; }
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=time], input[type=tel], select, textarea{
  width:100%; padding:.65em .8em; border:1px solid #c7ccd1; border-radius: var(--radius);
  font-family:inherit; font-size:.95rem; background:#fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color: var(--accent); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
.form-actions{ display:flex; gap:.8rem; margin-top:1.5rem; }

/* ---------------- Tables ---------------- */
.table-wrap{ overflow-x:auto; background:#fff; border:1px solid #dcdfe2; }
table.data{ width:100%; border-collapse:collapse; font-size:.92rem; }
table.data th, table.data td{ padding:.7em .9em; border-bottom:1px solid #eceff1; text-align:left; white-space:nowrap; }
table.data thead th{ background: var(--ink); color:#fff; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
table.data tbody tr:hover{ background:#fafbfb; }
.pill{ display:inline-block; padding:.15em .6em; border-radius:20px; font-size:.75rem; font-weight:600; }
.pill-ok{ background:#e5f5ec; color: var(--ok); }
.pill-warn{ background:#fdf3e0; color: var(--warn); }
.pill-danger{ background:#fbe9e8; color: var(--danger); }
.pill-muted{ background:#eef0f2; color:#586472; }
.text-danger{ color: var(--danger); }
.text-ok{ color: var(--ok); }
.mono{ font-family:'IBM Plex Mono', monospace; }

/* ---------------- Filter bar ---------------- */
.filter-bar{ display:flex; gap:1rem; align-items:end; flex-wrap:wrap; margin-bottom:1.2rem; }
.filter-bar .field{ margin-bottom:0; min-width:160px; }

/* ---------------- Section head ---------------- */
.section-head{ display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:1rem; margin-bottom:1.4rem; }
.section-head p{ color:#586472; margin:.3em 0 0; }
.eyebrow{ text-transform:uppercase; font-size:.75rem; letter-spacing:.08em; color: var(--accent-ink); font-weight:600; margin-bottom:.3em; }

/* ---------------- Alerts ---------------- */
.alert{ padding:.9em 1.1em; border-radius: var(--radius); margin:1.2rem 0; font-size:.92rem; border:1px solid transparent; }
.alert-success{ background:#e5f5ec; border-color:#bfe6cf; color:#155c37; }
.alert-error{ background:#fbe9e8; border-color:#f2c1bd; color:#7a1f19; }
.alert-info{ background:#eaf1fb; border-color:#c6d9f5; color:#1c3f73; }

/* ---------------- Modal ---------------- */
.modal-backdrop{ position:fixed; inset:0; background:rgba(16,22,28,.55); display:none; align-items:center; justify-content:center; padding:1.5rem; z-index:50; }
.modal-backdrop.open{ display:flex; }
.modal{ background:#fff; width:100%; max-width:640px; max-height:90vh; overflow-y:auto; padding:2rem; position:relative; }
.modal-close{ position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.4rem; cursor:pointer; color:#586472; }

/* ---------------- Misc ---------------- */
.badge-count{ display:inline-flex; align-items:center; justify-content:center; min-width:1.6em; height:1.6em; border-radius:50%; background: var(--accent); color:#1a0d00; font-weight:700; font-size:.8rem; }
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin-bottom:1.6rem; }
.stat-plate{ background:#fff; border:1px solid #dcdfe2; padding:1.1rem 1.3rem; }
.stat-plate .num{ font-family:'Big Shoulders Display',sans-serif; font-size:1.9rem; font-weight:800; line-height:1; }
.stat-plate .lbl{ font-size:.78rem; color:#8993a0; text-transform:uppercase; letter-spacing:.05em; margin-top:.3em; }

.portal-footer{ padding:2rem 0 3rem; color:#8993a0; font-size:.82rem; text-align:center; }

.actions-cell{ display:flex; gap:.4rem; }
.actions-cell form{ display:inline; }
.link-btn{ background:none; border:none; padding:0; color: var(--accent-ink); text-decoration:underline; cursor:pointer; font-size:.85rem; font-family:inherit; }