/* =========================================================
IRON TAIL PORTAL STYLES
This file styles the login page, customer dashboard, and worker dashboard.
Safe edits:
- Colors are in :root
- Card spacing is in .portal-card
- File/project layouts are in .portal-grid and .project-card
========================================================= */
:root {
  --iron-dark: #111315;
  --iron-steel: #2f3438;
  --iron-orange: #c46a28;
  --iron-orange-bright: #e37b2f;
  --iron-light: #f4f1ec;
  --iron-muted: #aeb4b9;
  --success: #3fa66b;
  --warning: #d89a32;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    linear-gradient(115deg, rgba(17,19,21,.95), rgba(17,19,21,.84)),
    url("images/banner.jpg") center center / cover fixed no-repeat;
  color: #f4f1ec;
  font-family: Arial, Helvetica, sans-serif;
}

a { color: var(--iron-orange-bright); }

.portal-shell {
  min-height: 100vh;
  padding: 34px 18px;
}

.portal-header {
  max-width: 1180px;
  margin: 0 auto 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.portal-brand {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
}

.portal-brand b { color: var(--iron-orange-bright); }

.portal-nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.portal-nav a,
.portal-nav button {
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  background: rgba(255,255,255,.04);
  padding: 10px 14px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  cursor: pointer;
}

.portal-nav a:hover,
.portal-nav button:hover {
  border-color: var(--iron-orange-bright);
  background: rgba(227,123,47,.16);
}

.portal-container {
  max-width: 1180px;
  margin: 0 auto;
}

.portal-card {
  background: rgba(244,241,236,.96);
  color: #1d2023;
  border-top: 5px solid var(--iron-orange);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  padding: 28px;
  margin-bottom: 22px;
}

.portal-card h1,
.portal-card h2,
.portal-card h3 {
  margin-top: 0;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.portal-muted { color: #5f666d; }

.login-card {
  max-width: 520px;
  margin: 70px auto 0;
}

.form-row {
  margin-bottom: 16px;
}

label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}

input,
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #c9c9c9;
  font-size: 15px;
  border-radius: 2px;
}

textarea { min-height: 110px; }

.btn-portal {
  display: inline-block;
  background: var(--iron-orange);
  color: #fff;
  border: 2px solid var(--iron-orange);
  padding: 12px 18px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}

.btn-portal:hover {
  background: var(--iron-orange-bright);
  border-color: var(--iron-orange-bright);
}

.btn-secondary {
  background: transparent;
  color: #1d2023;
  border-color: #1d2023;
}

.alert {
  display: none;
  padding: 12px;
  margin-top: 14px;
  background: #fff0e5;
  border-left: 4px solid var(--iron-orange);
}

.portal-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 22px;
}

.project-card,
.file-card,
.milestone-card {
  background: #fff;
  border: 1px solid #dedede;
  padding: 18px;
  margin-bottom: 14px;
}

.status-pill {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
  color: #fff;
  background: var(--warning);
}

.status-pill.good { background: var(--success); }

.progress-track {
  height: 14px;
  background: #dedede;
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 4px;
}

.progress-bar {
  height: 100%;
  width: 55%;
  background: var(--iron-orange);
}

.file-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.file-list li {
  background: #fff;
  color: #1d2023;
  border: 1px solid #dedede;
  padding: 12px;
  margin-bottom: 10px;
}

.file-meta {
  display: block;
  color: #6a7076;
  font-size: 12px;
  margin-top: 4px;
}

.worker-only {
  border-left: 5px solid var(--iron-orange-bright);
}

@media (max-width: 800px) {
  .portal-header,
  .portal-grid {
    display: block;
  }

  .portal-nav {
    margin-top: 16px;
  }
}