/* =============================================================================
   ACME Labs–inspired Theme
   Filename: acme.css
   Works with your existing PHP classes (no markup changes).
   ============================================================================= */

/* -------- Tokens -------- */
:root{
  /* PHP still injects --accent; keep a brand-appropriate fallback */
  --accent: #00994c;                /* ACME-ish green for buttons/borders */

  --acme-bg: #a9d3a5;               /* page green */
  --acme-panel: #cfe9cb;            /* light card */
  --ink-900: #111;                  /* headings black */
  --ink-700: #222;                  /* body */
  --ink-600: #333;
  --link-blue: #0047bb;             /* classic blue */
  --line: rgba(0,0,0,.16);

  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.08);
  --shadow-md: 0 6px 18px rgba(0,0,0,.12);
  --focus-neon: 0 0 0 3px rgba(0, 255, 128, .35),
                0 8px 22px rgba(0, 120, 70, .25);
}

/* -------- Base -------- */
*{ box-sizing: border-box }
html,body{ height:100% }

body.theme-body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  background: var(--acme-bg);
  color: var(--ink-700);
  line-height: 1.55;
  /* Subtle CRT grain */
  background-image:
    radial-gradient(transparent 60%, rgba(255,255,255,.05)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.015) 0, rgba(0,0,0,.015) 1px, transparent 1px, transparent 2px);
  background-blend-mode: multiply;
}

a{ color: var(--link-blue); text-decoration: underline }
a:hover{ color:#003899 }

ul{ margin: .5rem 0 1rem 1.2rem }
li{ margin: .25rem 0 }

/* -------- Header (retro centered masthead) -------- */
.site-header{
  background: transparent;
  color: var(--ink-900);
  padding: 18px 16px 8px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.site-title{
  font-weight: 900;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing:.4px;
  text-align:center;
}
.accent{ color: var(--ink-900) } /* keep stark black accent for retro */

.project-link{
  position:absolute; left:14px; top:14px;
  font-size: .95rem;
}
.project-link a{ color: #0b3d0b; text-decoration: underline }
.project-link a:hover{ color:#072f07 }

/* -------- Layout -------- */
.wrap{
  width:min(1100px, 96vw);
  margin: 8px auto 36px;
  display:grid; gap: 18px;
}
.logo{ display:flex; align-items:center; gap:10px }
.logo img{ height:58px; filter: grayscale(100%) contrast(120%) }

/* -------- Card -------- */
.card{
  background: var(--acme-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 22px 24px;
  box-shadow: var(--shadow-sm);
}
.card.glow{ box-shadow: var(--shadow-md) }

.meta{ display:flex; align-items:center; justify-content:space-between }
.company-name{ font-weight:900; color:var(--ink-900) }

.page-title{
  margin: 8px 0 16px;
  color: var(--ink-900);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-weight:900;
}

/* -------- Notices -------- */
.message{
  text-align:center; color:#064f2a; font-weight:800;
}
.estimate{ text-align:center; color: var(--ink-900); margin-top: 10px }

/* -------- Form Grid -------- */
.form-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.full{ grid-column:1/-1 }
.triple{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
@media (max-width: 900px){
  .form-grid{ grid-template-columns:1fr }
  .triple{ grid-template-columns:1fr }
}

.form-label{
  display:block; font-weight:900; color: var(--ink-900);
  margin: 4px 0 6px; letter-spacing:.2px;
}
.required-indicator{ color:#a01111; margin-left:6px }
.optional{ font-style: italic; font-size:.85rem; color:#2b4f2b; margin-left:8px }

/* -------- Fancy Inputs (retro-meets-modern) --------
   - Slightly “glass” bevel with inner highlight
   - Thin darker outer stroke to nod to old UI kits
   - Neon green focus glow
   - Hover lift + soft reflection
---------------------------------------------------- */
.input, .select, .textarea{
  width:100%;
  padding: 13px 14px;
  background: #f7fff6; /* very light green tint */
  color: var(--ink-900);
  border-radius: 12px;
  border: 1.5px solid rgba(0,0,0,.22);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 0 999px rgba(255,255,255, .0), /* for animated sheen */
    0 1px 0 rgba(255,255,255,.6),
    0 6px 16px rgba(0,0,0,.06);
  transition: box-shadow .18s ease, border-color .15s ease, transform .06s ease, background .18s ease;
}
.input:hover, .select:hover, .textarea:hover{
  transform: translateY(-1px);
  background: #fbfff9;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 22px rgba(0,0,0,.09);
}
.input:focus, .select:focus, .textarea:focus{
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    var(--focus-neon);
}
.textarea{ min-height: 128px; resize: vertical }
.input::placeholder, .textarea::placeholder{ color:#4d6a4d }

select.select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,.55) 50%),
    linear-gradient(135deg, rgba(0,0,0,.55) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px),
    100% 0;
  background-size: 6px 6px, 6px 6px, 2.6rem 100%;
  background-repeat: no-repeat;
}

/* Valid / Invalid states (optional hooks, add classes in JS if desired) */
.input.is-valid, .select.is-valid, .textarea.is-valid{
  border-color: #138a4a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 0 0 3px rgba(19,138,74,.18);
}
.input.is-invalid, .select.is-invalid, .textarea.is-invalid{
  border-color: #b12626;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 0 0 3px rgba(177,38,38,.18);
}

/* -------- Checkbox “chips” -------- */
.checkbox-group{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px }
.checkbox-group .chip{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; background:#edffe9;
  border:1px solid rgba(0,0,0,.22);
  border-radius: 999px; color:#0a2d0a; font-weight:800;
  box-shadow: 0 1px 0 rgba(255,255,255,.7), 0 6px 12px rgba(0,0,0,.06);
  cursor:pointer; transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.checkbox-group .chip:hover{
  transform: translateY(-1px);
  background: #f6fff3;
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}
.checkbox-group input{ accent-color: var(--accent) }

/* -------- Fieldset / dropdown group -------- */
.fieldset{
  border: 1px solid rgba(0,0,0,.22);
  border-radius: var(--radius-md);
  background: #e3f4df;
  padding: 14px 14px 10px;
}
.fieldset > legend{
  padding: 0 8px; color: var(--ink-900); font-weight:900; letter-spacing:.2px;
}
.dropdown-group{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px }
@media (max-width:900px){ .dropdown-group{ grid-template-columns:1fr } }

/* -------- Primary Button -------- */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; padding:14px 18px; border:0; cursor:pointer;
  border-radius: 999px; font-weight:900; letter-spacing:.3px;
  color:#021; background: linear-gradient(180deg, #61d290, #35bb71);
  box-shadow: 0 2px 0 rgba(255,255,255,.5) inset, 0 14px 28px rgba(0,0,0,.18);
  transition: filter .15s ease, transform .06s ease, box-shadow .15s ease;
}
.btn-primary:hover{ filter: brightness(1.02); box-shadow: 0 20px 36px rgba(0,0,0,.22) }
.btn-primary:active{ transform: translateY(1px) }

/* -------- Spinner -------- */
.spinner{
  display:none; position:fixed; inset:0; z-index:1000;
  background: rgba(169,211,165,.6);
  backdrop-filter: blur(1px);
}
.loader{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:70px; height:70px; border-radius:50%;
  border:7px solid rgba(255,255,255,.8); border-top:7px solid #0f7f49;
  animation: acspin 1.05s linear infinite;
}
@keyframes acspin{ to{ transform: translate(-50%,-50%) rotate(360deg) } }

/* -------- Response Panel -------- */
.response{ margin-top: 16px }
.response-card{
  background: #f4fff2;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: var(--radius-md);
  padding: 18px; color: var(--ink-900);
  box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 10px 22px rgba(0,0,0,.08);
}
.response h3, .response h4{ margin:.6em 0; color: var(--ink-900) }
.response a{ color: var(--link-blue) }

/* -------- Footer -------- */
footer .footer-content{
  background: transparent;
  border-top: 1px dashed rgba(0,0,0,.25);
  color: #0c2c0c;
  padding-top: 12px;
}
footer .footer-content a{ color: #082a60; text-decoration: underline }
.footer-note{ font-size:.83rem; color:#1f3a1f }

/* -------- Internal Mode -------- */
.internal-mode-warning{ color:#b12626; font-weight:900 }

/* -------- Login Card -------- */
.login-card{
  width:100%; max-width:420px;
  background: #e9f7e6;
  border: 1px solid rgba(0,0,0,.22);
  border-radius: var(--radius-lg);
  padding: 26px;
  margin: 24px auto;
  box-shadow: var(--shadow-md);
}
.brand{ display:flex; align-items:center; gap:10px; margin-bottom:8px }
.brand img{ height:42px; filter: grayscale(100%) contrast(120%) }
.brand-title{ font-weight:900; color: var(--ink-900) }
.login-title{ margin:8px 0 14px; font-weight:900; color: var(--ink-900) }
.error{ color:#b12626; font-weight:800 }

/* -------- Helpers -------- */
.hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden }
.small-grey{ font-size:12px; color:#123 }
.instructions{ font-size:12px; color:#173817; margin-bottom: 18px }