/* =========================
   AIE – Global Styles (clean)
   ========================= */

/* --- Theme tokens --- */
:root{
  --aie-bg: #ffffff;
  --aie-fg: #0b1324;
  --aie-accent: #3d5afe;     /* AIE blue */
  --aie-muted: #64748b;      /* slate-ish */
  --aie-border: #e5e7eb;

  /* Portal sizing knobs */
  --portal-gap: 24px;        /* equal gap horizontally & vertically */
  --panel-w: 640px;          /* fixed panel/card width */
  --panel-h: 320px;          /* fixed panel/card height */
  --portal-col-gap: 10px;
  --portal-row-gap: 10px;
}

/* --- Base layout --- */
html, body { height: 100%; }
body{
  font-family: Arial, sans-serif;
  background: #f7f8fa;
  color: var(--aie-fg);
  margin: 0;

  /* App shell: header (auto), page content (flex), footer (auto) */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Default center container (used by the homepage buttons, etc.) */
.container{
  flex: 1;                        /* fills remaining height by default */
  display: flex;
  flex-direction: column;
  justify-content: center;        /* vertically center by default */
  align-items: center;
  text-align: center;
  padding: 24px 16px;
}

/* Basic button shared everywhere */
.btn{
  display: inline-block;
  background: #3a57e8;
  color: #fff;
  padding: 18px 40px;
  margin: 10px;
  border-radius: 8px;
  font-size: 18px;
  text-decoration: none;
  transition: background .25s;
}
.btn:hover{ background:#2d45c6; }


/* =========================
   Header (brandbar)
   ========================= */
.brandbar{
  background: var(--aie-bg);
  border-bottom: 2px solid var(--aie-accent);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: none;
}

.brandbar__inner{
  max-width: 1120px;
  margin: 0 auto;
  height: 90px;                 /* room for title + meta */
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;

  flex-wrap: wrap;               /* allow meta to wrap below title */
  align-content: center;
}

.brandbar__logo{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--aie-fg);
}
.brandbar__logo img{ height: 46px; width: auto; }

.brandbar__title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1;
  color: var(--aie-fg);
}

.brandbar__meta{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  color: var(--aie-muted);
  font-size: 13px;
  flex-basis: 100%;
  margin-left: 58px;             /* indent under logo */
  margin-top: -30px;             /* pull closer to title */
}

.brandbar__userwrap{ display:flex; align-items:center; gap:8px; line-height:1.2; }
.brandbar__user{ color: var(--aie-fg); font-size:13px; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brandbar__link{ color: var(--aie-accent); font-size:13px; font-weight:600; text-decoration:none; }
.brandbar__link:hover{ text-decoration:underline; }

.brandbar__powered{ color: var(--aie-muted); opacity:.9; }
.brandbar__powered strong{ color:var(--aie-accent); font-style:italic; font-weight:700; }


/* =========================
   Background video (home + portal)
   ========================= */
#bgVideo,
.bg-video{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
#bgVideo{ opacity:.75; filter: brightness(.9) contrast(1.05); transition: opacity 1.5s ease-in-out; }
.bg-video{ filter: contrast(1.1) brightness(1.1); }

.video-overlay{
  position: fixed;
  inset: 0;
  background: radial-gradient(100% 100% at 80% 10%, rgba(255,255,255,.35), rgba(255,255,255,.9) 60%);
  pointer-events: none;
  z-index: -1;
}


/* =========================
   Quickbar (cards under header)
   ========================= */
.quickbar{
  position: sticky;
  top: 64px;                            /* sits under header */
  z-index: 40;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--aie-border);
}
@media (max-width: 640px){ .quickbar{ top:56px; } }

.quickbar__inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 16px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.qcard{
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 14px;
  background:#fff;
  border: 1px solid var(--aie-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--aie-fg);
  white-space: nowrap;
  box-shadow: 0 6px 12px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.qcard:hover{ transform: translateY(-1px); box-shadow: 0 10px 18px rgba(0,0,0,.10); }
.qcard__title{ font-weight:800; font-size:14px; }
.qcard__cta{ color:var(--aie-accent); font-weight:700; font-size:13px; }

.qcard[aria-current="page"]{
  outline: 2px solid var(--aie-accent);
  outline-offset: -2px;
}

/* Top-right action area above the page content */
.portal-top-actions{
  max-width: 1120px;
  margin: 6px auto 0;
  padding: 0 16px;
  display: flex;
  justify-content: flex-end;   /* push link to the right */
}
.portal-top-actions .backlink{
  font-size: 14px;
  color: var(--aie-accent);
  font-weight: 600;
  text-decoration: none;
}
.portal-top-actions .backlink:hover{ text-decoration: underline; }


/* =========================
   Subcontractor Portal (grid panels)
   ========================= */

/* IMPORTANT:
   The portal markup uses: <main class="portal-main container">.
   The generic ".container" above makes content flex:1 (full-height) for the
   homepage; we *override* that here so the footer is visible. */
.portal-main.container{
  flex: 0 0 auto;                      /* stop taking all remaining height */
  max-width: calc((var(--panel-w) * 2.5) + var(--portal-gap) + 36px); /* + padding */
  margin: 0 auto;
  padding: 10px 10px 10px;             /* reduced top space, room above footer */
  display: block;                      /* not a flex wrapper here */
}

/* 2×2 centered grid, equal gaps horizontally & vertically, fixed panel sizes */
.panels-grid-2col{
  display: grid;
  grid-template-columns: repeat(2, minmax(var(--panel-w), 1fr)));
  column-gap: var(--portal-col-gap);
  row-gap: var(--portal-row-gap);
  justify-content: center;
  align-items: start;
}

/* Panel card (fixed size so rows align; tables scroll inside if needed) */
.panel{
  width: 110%;
  min-width: var(--panel-w);
  max-width: var(--panel-w);
  height: var(--panel-h);
  margin: 0;                           /* kill stray margins to keep rows even */
  display: flex;
  flex-direction: column;
  background:#fff;
  border: 1px solid var(--aie-border);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  overflow: hidden;
}

.panel__header{
  padding: 10px 16px;
  min-height: 52px;                    /* consistent title bands */
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}
.panel__header h2{
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}
.panel__tools{ display:flex; gap:8px; align-items:center; }

.table-filter{
  border: 1px solid var(--aie-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  min-width: 220px;
  background: #fff;
}

/* Table area inside panel */
.panel .tablewrap{
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  background: #f6f7fb; /* match header row color */
}

/* Tables */
.table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
    background: #fff;
}

.table thead th{
  text-align:left;
  background:#f6f7fb;
  border-bottom:1px solid var(--aie-border);
  padding:10px 12px;
  font-weight:800;
  white-space:nowrap;
}
.table tbody td{
  border-bottom:1px solid #eef0f4;
  padding:10px 12px;
  white-space:nowrap;                  /* prevent wrapping */
  overflow:hidden;
  text-overflow:ellipsis;
}
.table tbody tr:hover{ background:#fafbff; }

/* Keep grid perfectly centered on very wide screens */
@media (min-width: 1600px){
  .panels-grid-2col{
    grid-template-columns: repeat(2, var(--panel-w));
    justify-content: center;
  }
}


/* =========================
   Auth card (login)
   ========================= */
.auth-card{
  max-width: 520px;
  width: 100%;
  margin: 32px auto;
  padding: 28px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  text-align: left;
}
.auth-card h1{ margin:0 0 14px; white-space:nowrap; }
.field{ margin:14px 0; }
.field label{ display:block; font-size:14px; margin-bottom:6px; color:#555; }
.field input{
  width:100%;
  padding:10px 12px;
  border:1px solid #cfd7df;
  border-radius:8px;
  font-size:16px;
}
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.btn-primary{
  background:#3d5afe; color:#fff; border:none;
  padding:12px 16px; border-radius:8px; font-size:16px; cursor:pointer;
}
.btn-primary:hover{ filter: brightness(.95); }
.btn-link{ background:none; border:none; color:#3d5afe; cursor:pointer; font-size:14px; padding:0; }
.msg{ margin:10px 0 18px; color:#333; }
.footnote{ color:#666; font-size:12px; margin-top:8px; }


/* =========================
   Footer
   ========================= */
.footer{
  background:#ffffffcc;
  border-top: 2px solid var(--aie-accent);
  padding: 16px 0;
  text-align: center;
  font-size: 13px;
  color: var(--aie-muted);

  /* Always visible: sits after main content; sticks to bottom when short */
  position: relative;
  z-index: 20;
  margin-top: auto;                    /* push to bottom if page is short */
}
.footer__inner{ max-width:1120px; margin:0 auto; padding:0 16px; }
.footer strong{ color:var(--aie-accent); font-style:italic; font-weight:700; }

.footer a {
  color: #8fb3ff;
  text-decoration: none;
}

.footer a:hover {
  color: #b3ccff;
  text-decoration: underline;
}

/* 1. Expand the main container to fit 3 panels wide */
.portal-main.container {
  flex: 0 0 auto;
  /* (Panel width 640px * 3) + gaps + padding */
  max-width: 2000px; 
  width: 95%;
  margin: 0 auto;
  display: block;
}

/* 2. Create the 3-column grid */
.panels-grid-3col {
  display: grid;
  /* This creates 3 equal columns */
  grid-template-columns: repeat(3, 1fr); 
  column-gap: var(--portal-col-gap);
  row-gap: var(--portal-row-gap);
  justify-items: center; /* Centers boxes horizontally */
  align-items: start;
}

/* 3. Adjust the Panel width to ensure they fit side-by-side */
.panel {
  /* Removing the 110% width from your current file to prevent overlap */
  width: 100%; 
  min-width: 300px; /* Allows shrinking on smaller screens */
  max-width: var(--panel-w); /* 640px from your variables */
  height: var(--panel-h);
  background: #fff;
  border: 1px solid var(--aie-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.refresh-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  transition: transform 0.4s ease;
}
.refresh-btn:hover {
  transform: rotate(180deg);
}



/* =========================
   Responsive tweaks
   ========================= */
@media (max-width: 640px){
  .brandbar__inner{ height:72px; padding:0 16px; }
  .brandbar__logo img{ height:34px; }
  .brandbar__title{ font-size:19px; }
  .brandbar__meta{ margin-left:46px; font-size:12px; }
}
@media (max-width: 520px){
  .brandbar__title{ display:none; }
  .brandbar__meta{ margin-left:36px; }
  .brandbar__user{ display:none; }
}