/* Phase 27 — Engines, Inc. brand alignment theme
   Scoped CSS-only override layer loaded after appreview.css.
   No form logic, field names, IDs, routing, storage, or completion tracking are changed. */

:root{
  --ei-navy:#2b2b2e;
  --ei-navy-2:#17171a;
  --ei-charcoal:#27313b;
  --ei-red:#f4c02a;
  --ei-red-dark:#c99f1d;
  --ei-slate:#52616f;
  --ei-border:#d7dde3;
  --ei-border-strong:#b8c2cc;
  --ei-bg:#f3f5f7;
  --ei-panel:#ffffff;
  --ei-panel-soft:#f8fafb;
  --ei-head:#eef2f5;
  --ei-text:#111827;
  --ei-muted:#66727f;
  --ei-shadow:0 2px 8px rgba(15,37,56,.08);
  --ei-shadow-soft:0 1px 3px rgba(15,37,56,.08);

  --site-border:var(--ei-border);
  --site-muted:var(--ei-muted);
  --site-bg:var(--ei-panel);
  --site-panel:var(--ei-panel-soft);
  --site-head:var(--ei-head);
  --site-accent:var(--ei-red);
  --site-text:var(--ei-text);
  --site-shadow:var(--ei-shadow-soft);
  --site-radius:10px;
  --site-radius-sm:6px;
}

html,body{
  background:var(--ei-bg) !important;
  color:var(--ei-text) !important;
  font-family:Arial, Helvetica, sans-serif !important;
}

body::before{
  content:"";
  display:block;
  height:8px;
  background:linear-gradient(90deg,var(--ei-navy) 0%,var(--ei-navy) 72%,var(--ei-red) 72%,var(--ei-red) 100%);
}

.page-wrap,
.page-shell,
.launch-wrap{
  padding-top:24px !important;
}

/* Carbon fiber weave — Source: https://stackoverflow.com/a/34556311
   Posted by Harry, modified by community. Retrieved 2026-07-11, CC BY-SA 3.0 */
.form-header,
.dashboard-header{
  background-color:rgb(32,32,32) !important;
  background-image:
    linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1)),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(to bottom, rgb(8,8,8), rgb(32,32,32)) !important;
  background-size: 100% 100%, 10px 10px, 10px 10px, 10px 5px !important;
  background-position: 0px 0px, 0px 0px, 5px 5px, 0px 0px !important;
  color:#fff !important;
  border:1px solid var(--ei-navy-2) !important;
  border-radius:12px !important;
  padding:18px 20px !important;
  margin-bottom:18px !important;
  box-shadow:var(--ei-shadow) !important;
}

.form-header .page-title,
.page-title,
h1{
  color:inherit !important;
}

.form-header .page-title{
  font-size:28px !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
}

.form-header .form-meta,
.form-header__subtitle,
.form-header__meta,
.dashboard-header p{
  color:rgba(255,255,255,.82) !important;
}

.dashboard-header .action-link.secondary{
  background:rgba(255,255,255,.96) !important;
  border-color:rgba(255,255,255,.82) !important;
  color:var(--ei-navy) !important;
}
.dashboard-header .action-link.secondary:hover{
  background:#fff !important;
  border-color:var(--ei-red) !important;
}
.dashboard-header .active-user{
  background:rgba(255,255,255,.96) !important;
  border-color:rgba(255,255,255,.82) !important;
  color:var(--ei-navy) !important;
}

.status-note{
  background:#fff !important;
  border-left:4px solid var(--ei-red) !important;
  border-radius:8px !important;
  padding:10px 12px !important;
  box-shadow:var(--ei-shadow-soft) !important;
}

.form-layout,
.layout,
.layout-grid,
.page-shell{
  gap:22px !important;
}

/* Carbon fiber weave — Source: https://stackoverflow.com/a/34556311
   Posted by Harry, modified by community. Retrieved 2026-07-11, CC BY-SA 3.0 */
.form-nav,
.section-nav,
.side-nav,
.sidebar,
.website-nav{
  background-color:rgb(32,32,32) !important;
  background-image:
    linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1)),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(to bottom, rgb(8,8,8), rgb(32,32,32)) !important;
  background-size: 100% 100%, 10px 10px, 10px 10px, 10px 5px !important;
  background-position: 0px 0px, 0px 0px, 5px 5px, 0px 0px !important;
  border-color:var(--ei-navy-2) !important;
  color:#fff !important;
  box-shadow:var(--ei-shadow) !important;
}

.form-nav h3,
.section-nav__title,
.side-nav h3,
.sidebar h3,
.website-nav h3{
  color:#fff !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
}

.form-nav .nav-subtitle,
.section-nav .nav-subtitle,
.sidebar .nav-subtitle{
  color:rgba(255,255,255,.72) !important;
}

.site-nav-divider{
  background:rgba(255,255,255,.18) !important;
}

.site-page-link,
.section-index a,
.section-nav__link,
.section-nav-link,
.section-menu a{
  color:rgba(255,255,255,.88) !important;
  border-color:transparent !important;
}

.site-page-link:hover,
.section-index a:hover,
.section-nav__link:hover,
.section-nav-link:hover,
.section-menu a:hover{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.20) !important;
  color:#fff !important;
}

.site-page-link.active,
.section-index a.active,
.section-nav__link.active,
.site-page-link[aria-current="page"]{
  background:#fff !important;
  border-color:#fff !important;
  color:var(--ei-navy) !important;
  font-weight:700 !important;
}

.site-page-link.pending{
  color:rgba(255,255,255,.40) !important;
}

.app-page-progress{
  color:rgba(255,255,255,.70) !important;
}

.app-page-progress-track{
  height:4px !important;
  background:rgba(255,255,255,.20) !important;
}

.app-page-progress-fill{
  background:var(--ei-red) !important;
}

.site-page-link.active + .app-page-progress .app-page-progress-label{
  color:#fff !important;
}

.site-page-link.active + .app-page-progress .app-page-progress-fill{
  background:var(--ei-red) !important;
}

.main-panel,
.main-content,
.form-main,
.form-shell{
  display:grid !important;
  gap:16px !important;
}

.form-section,
.form-footer,
.container,
.subsection,
.data-log-wrap,
.mini-table-wrap,
.info-callout,
.launch-card{
  background:var(--ei-panel) !important;
  border-color:var(--ei-border) !important;
  border-radius:12px !important;
  box-shadow:var(--ei-shadow-soft) !important;
}

.form-section{
  overflow:hidden !important;
}

.section-head,
.section-header,
.subsection-title{
  background:linear-gradient(180deg,#f9fbfc 0%,var(--ei-head) 100%) !important;
  border-bottom-color:var(--ei-border) !important;
}

.section-head h2,
.section-header h2,
.section-title,
.launch-card h2{
  color:var(--ei-navy) !important;
  font-weight:700 !important;
}

.section-head h2::before,
.section-header h2::before,
.section-title::before{
  content:"";
  display:inline-block;
  width:4px;
  height:18px;
  margin-right:9px;
  border-radius:999px;
  background:var(--ei-red);
  vertical-align:-3px;
}

.section-body{
  background:#fff !important;
}

.field-label,
.item-label,
.row-label{
  color:var(--ei-charcoal) !important;
  font-weight:700 !important;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="tel"],
select,
textarea,
.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  border-color:var(--ei-border-strong) !important;
  border-radius:7px !important;
  background:#fff !important;
  color:var(--ei-text) !important;
  box-shadow:inset 0 1px 2px rgba(15,37,56,.04) !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus{
  border-color:var(--ei-red) !important;
  outline:2px solid rgba(178,31,36,.16) !important;
  outline-offset:1px !important;
}

.field input[readonly],
input[readonly],
textarea[readonly]{
  background:#eef2f5 !important;
  color:#4b5563 !important;
}

.choice-group,
.inline-radio-group,
.checkbox-card,
.signature-box,
.component-block{
  border-color:var(--ei-border) !important;
  background:var(--ei-panel-soft) !important;
}

.component-head{
  border-bottom:1px solid var(--ei-border) !important;
  padding-bottom:8px !important;
}

.component-title{
  color:var(--ei-navy) !important;
}

button,
.toggle-btn,
.action-btn,
.section-toggle,
.nav-link,
.action-link,
.nav-buttons button,
.page-nav button,
.global-page-actions button{
  border-radius:7px !important;
  font-weight:700 !important;
  border-color:var(--ei-border-strong) !important;
  color:var(--ei-charcoal) !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(15,37,56,.06) !important;
  transition:background 120ms ease, border-color 120ms ease, transform 120ms ease !important;
}

button:hover,
.toggle-btn:hover,
.action-btn:hover,
.section-toggle:hover,
.nav-link:hover,
.action-link:hover,
.nav-buttons button:hover,
.page-nav button:hover,
.global-page-actions button:hover{
  border-color:var(--ei-red) !important;
  transform:translateY(-1px) !important;
}

/* Carbon fiber weave — Source: https://stackoverflow.com/a/34556311
   Posted by Harry, modified by community. Retrieved 2026-07-11, CC BY-SA 3.0 */
.action-btn.primary,
.nav-link.primary,
.action-link.primary,
.nav-buttons button.primary,
.page-nav button.primary,
.global-page-actions button.primary,
button.primary{
  background-color:rgb(32,32,32) !important;
  background-image:
    linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1)),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(to bottom, rgb(8,8,8), rgb(32,32,32)) !important;
  background-size: 100% 100%, 10px 10px, 10px 10px, 10px 5px !important;
  background-position: 0px 0px, 0px 0px, 5px 5px, 0px 0px !important;
  border-color:var(--ei-red-dark) !important;
  color:#fff !important;
}

.action-btn.primary:hover,
.nav-link.primary:hover,
.action-link:hover,
.nav-buttons button.primary:hover,
.page-nav button.primary:hover,
.global-page-actions button.primary:hover,
button.primary:hover{
  background:var(--ei-red-dark) !important;
  border-color:var(--ei-red-dark) !important;
}

.action-btn.danger{
  color:var(--ei-red) !important;
  border-color:rgba(178,31,36,.35) !important;
}

.form-footer,
.footer-nav,
.page-nav,
.nav-buttons,
.global-page-actions{
  background:var(--ei-panel) !important;
}

.data-log-wrap,
.mini-table-wrap{
  overflow:auto !important;
}

table,
.data-log,
.form-table{
  border-collapse:separate !important;
  border-spacing:0 !important;
}

/* Carbon fiber weave — Source: https://stackoverflow.com/a/34556311
   Posted by Harry, modified by community. Retrieved 2026-07-11, CC BY-SA 3.0 */
.data-log thead th,
.form-table th,
table thead th{
  background-color:rgb(32,32,32) !important;
  background-image:
    linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1)),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(to bottom, rgb(8,8,8), rgb(32,32,32)) !important;
  background-size: 100% 100%, 10px 10px, 10px 10px, 10px 5px !important;
  background-position: 0px 0px, 0px 0px, 5px 5px, 0px 0px !important;
  color:#fff !important;
  border-color:var(--ei-navy-2) !important;
}

.data-log td,
.form-table td,
table td{
  border-color:var(--ei-border) !important;
}

.data-log tbody tr:nth-child(even),
.form-table tbody tr:nth-child(even),
table tbody tr:nth-child(even){
  background:#f8fafb !important;
}

.launch-grid{
  gap:20px !important;
}

.launch-card{
  border-top:4px solid var(--ei-red) !important;
}

@media print{
  body::before{display:none !important;}
  html,body{background:#fff !important;}
  .form-header{
    background:#fff !important;
    color:#000 !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 0 8px !important;
  }
  .form-nav,.section-nav,.side-nav,.sidebar,.website-nav,
  .toggle-btn,.action-btn,.nav-link,.action-link,
  .nav-buttons,.page-nav,.global-page-actions{
    display:none !important;
  }
  .form-section,.container,.subsection,.data-log-wrap,.mini-table-wrap,.info-callout{
    box-shadow:none !important;
    border-color:#bbb !important;
  }
  .section-head,.section-header,.subsection-title{
    background:#f2f2f2 !important;
  }
}

/* Phase 28 follow-up — keep active left-nav item clear of page progress bar. */
.site-page-link.active,
.section-index a.active,
.section-nav__link.active,
.site-page-link[aria-current="page"]{
  padding-bottom:10px !important;
  margin-bottom:4px !important;
}
.site-page-link.active + .app-page-progress,
.site-page-link[aria-current="page"] + .app-page-progress{
  margin-top:2px !important;
}