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

:root{
  --ink:        #ffffff;
  --steel:      #1c2733;
  --paper:      #f5f6f4;
  --line:       #2c3a48;
  --accent:     #D1EBF5;
  --accent-ink: #C0E4F1;
  --ok:         #1f7a4d;
  --warn:       #b3821b;
  --danger:     #b3261e;
  --radius:     2px;
  font-size: 16px;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--paper);
  color: var(--steel);
  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(--steel);
}

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

a{ color: var(--steel); }

.wrap{  margin: 20px 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;
}

/* ---------------- Top header (logo left, user/logout right) ---------------- */
:root{ --sidebar-w: 264px; --topbar-h: 80px; }

.logo img{ display:block; width:auto; }

.app-topbar{
  position:fixed; top:0; left:0; right:0; height: var(--topbar-h); z-index:70;
  background: var(--ink); border-bottom: 1px solid var(--accent);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 0 1.5rem;
}
.app-topbar-left{ display:flex; align-items:center; gap:1rem; min-width:0; }
.app-topbar-right{ display:flex; align-items:center; gap:1rem; flex-shrink:0; }

.user-chip{ color: var(--steel); font-size:.85rem; display:flex; align-items:baseline; gap:.5em; max-width:40vw; }
.user-chip-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-chip em{ font-style:normal; color: var(--steel); text-transform:uppercase; font-size:.7rem; flex-shrink:0; }

/* ---------------- Sidebar (left-hand app nav) ---------------- */
.sidebar{
  position: fixed; top: var(--topbar-h); left:0; bottom:0; width: var(--sidebar-w);
  background: var(--ink); border-right: 1px solid var(--accent);
  display:flex; flex-direction:column; z-index: 60;
  overflow-y:auto;
}

.sidebar-nav{ flex:1; padding: .8rem .7rem; overflow-y:auto; }
.nav-tree, .nav-submenu{ list-style:none; margin:0; padding:0; }
.nav-tree > li{ margin-bottom:.15rem; }

.nav-link{
  display:flex; align-items:center; gap:.7rem; width:100%;
  padding:.65em .8em; border-radius: var(--radius);
  text-decoration:none; font-size:.9rem; font-weight:500;
  background:transparent; border:none; text-align:left; cursor:pointer; font-family:inherit;
}
.nav-link:hover{ background: rgba(255,255,255,.06); color: var(--steel); }
.nav-icon{ display:flex; flex-shrink:0; width:18px; height:18px; }
.nav-icon-svg{ width:18px; height:18px; }
.nav-label{ flex:1; }

.nav-item.active > .nav-link{ background: var(--accent); color:#1a0d00; font-weight:600; }
.nav-item.active > .nav-link .nav-icon{ color:#1a0d00; }

.nav-parent > .nav-link-toggle .nav-chevron{
  width:8px; height:8px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease; flex-shrink:0;
}
.nav-parent.open > .nav-link-toggle .nav-chevron{ transform: rotate(-135deg); }
.nav-parent.active > .nav-link-toggle{ color: var(--steel); }
.nav-parent.active > .nav-link-toggle .nav-icon{ color: var(--steel); }

.nav-submenu{
  max-height:0; overflow:hidden; transition: max-height .2s ease;
  padding-left: 1.9rem; border-left:1px solid rgba(255,255,255,.08); margin-left:1.5rem;
}
.nav-parent.open > .nav-submenu{ max-height: 480px; }
.nav-submenu .nav-link{ font-size:.85rem; padding:.5em .8em; }
.nav-submenu .nav-item.active > .nav-link{ background: var(--accent); color:#1a0d00; }

/* Nested submenus (submenu-of-a-submenu) indent further automatically,
   since .nav-submenu rules apply at any depth. */
.nav-submenu .nav-submenu{ padding-left:1.4rem; margin-left:1.1rem; }

/* Hamburger toggle — only shown once the sidebar goes off-canvas (see breakpoint below) */
.sidebar-toggle{
  display:none; appearance:none; background:transparent; border: 1px solid var(--accent-ink); cursor:pointer;
  width:38px; height:38px; flex-shrink:0; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.sidebar-toggle span{ display:block; width:20px; height:2px; background: var(--accent-ink); transition: transform .2s ease, opacity .2s ease; }
body.sidebar-open .sidebar-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.sidebar-open .sidebar-toggle span:nth-child(2){ opacity:0; }
body.sidebar-open .sidebar-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(16,22,28,.55); z-index:55;
}
.sidebar-backdrop.open{ display:block; }

/* Content offset for the fixed header + sidebar */
body.has-sidebar .portal-main{ margin-left: var(--sidebar-w); padding-top: var(--topbar-h); }

@media (max-width: 880px){
  .sidebar-toggle{ display:flex; }

  .sidebar{
    transform: translateX(-100%); transition: transform .22s ease; width: min(var(--sidebar-w), 84vw);
  }
  .sidebar.open{ transform: translateX(0); box-shadow: 4px 0 18px rgba(0,0,0,.25); }

  body.has-sidebar .portal-main{ margin-left:0; }
  body.sidebar-open{ overflow:hidden; }
}

@media (max-width: 480px){
  .user-chip em{ display:none; }
  .user-chip{ max-width:32vw; }
}

/* ---------------- 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-ink); color:#1a0d00; }
.btn-accent:hover{ background:#9BC4D2; }
.btn-ghost{ background:transparent; color: var(--accent-ink); 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); background:#263C44; 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], input[type=search], 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(--steel);
}
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(--accent); color:#000; 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(--steel); 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; flex-wrap:wrap; }
.actions-cell form{ display:inline; }
.link-btn{ background:none; border:none; padding:0; color: var(--steel); text-decoration:underline; cursor:pointer; font-size:.85rem; font-family:inherit; }

/* ---------------- Responsive tables ---------------- */
/* Below the breakpoint, data tables shed their grid shape and re-render
   as a stack of labelled cards — one per row — instead of relying on
   horizontal scrolling. Add class="responsive-table" to table.data and
   a matching data-label="Column Name" on each <td> to opt a table in. */
@media (max-width: 760px){
  .table-wrap{ overflow-x: visible; }
  table.data.responsive-table{ border:none; }
  table.data.responsive-table thead{ display:none; }
  table.data.responsive-table, table.data.responsive-table tbody,
  table.data.responsive-table tr, table.data.responsive-table td{
    display:block; width:100%;
  }
  table.data.responsive-table tr{
    background:#fff; border:1px solid #dcdfe2; border-radius: var(--radius);
    margin-bottom:.9rem; padding:.2rem 1rem;
  }
  table.data.responsive-table tr:last-child{ margin-bottom:0; }
  table.data.responsive-table td{
    display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
    text-align:right; white-space:normal; border-bottom:1px solid #eceff1; padding:.6em 0;
  }
  table.data.responsive-table td:last-child{ border-bottom:none; }
  table.data.responsive-table td::before{
    content: attr(data-label); text-align:left; flex-shrink:0; margin-right:auto;
    font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#8993a0;
  }
  table.data.responsive-table td:not([data-label])::before{ content:none; }
  table.data.responsive-table td.actions-cell{ justify-content:flex-start; }
  table.data.responsive-table td[colspan]{ text-align:center; }
  table.data.responsive-table td[colspan]::before{ content:none; }
}

@media (max-width: 760px){
  /* Two-column layouts (shift assign + history, profile forms, etc.) stack
     on mobile even when a page sets a fixed column ratio inline. */
  .module-grid{ grid-template-columns:1fr !important; }
}

@media (max-width: 640px){
  .filter-bar{ gap:.8rem; }
  .filter-bar .field{ min-width:0; flex:1 1 140px; }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  h1{ font-size:1.7rem; }
  .plate, .auth-card{ padding:1.2rem; }
}