/* ============================================================
   Aggregate Pro – Contractor Panel  |  apc-style.css
   Mobile-first, earthy/industrial palette
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --apc-orange:   #E8601C;
  --apc-orange-d: #C04E12;
  --apc-stone:    #2B2B2B;
  --apc-slate:    #4A4A4A;
  --apc-dust:     #F5F1EC;
  --apc-sand:     #EDE8E1;
  --apc-green:    #2E7D56;
  --apc-red:      #C0392B;
  --apc-yellow:   #F0A500;
  --apc-white:    #FFFFFF;
  --apc-radius:   12px;
  --apc-shadow:   0 2px 12px rgba(0,0,0,.12);
  --apc-font:     'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Reset ──────────────────────────────────────────────── */
#apc-root *, #apc-root *::before, #apc-root *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Wrap ───────────────────────────────────────────────── */
#apc-root {
  font-family: var(--apc-font);
  background: var(--apc-dust);
  min-height: 100vh;
  color: var(--apc-stone);
}

/* ── Card ───────────────────────────────────────────────── */
.apc-card {
  background: var(--apc-white);
  border-radius: var(--apc-radius);
  box-shadow: var(--apc-shadow);
  padding: 24px 20px;
  margin: 16px;
}
.apc-center-card { text-align: center; padding: 40px 24px; }

/* ── Auth / Logo ────────────────────────────────────────── */
.apc-auth-card { max-width: 420px; margin: 40px auto; }
.apc-logo-area  { text-align: center; margin-bottom: 28px; }
.apc-logo-icon  { font-size: 48px; }
.apc-brand      { font-size: 26px; font-weight: 800; color: var(--apc-orange); letter-spacing: -0.5px; }
.apc-tagline    { font-size: 13px; color: var(--apc-slate); margin-top: 2px; }

/* ── Inputs ─────────────────────────────────────────────── */
.apc-label { display: block; font-size: 13px; font-weight: 600; color: var(--apc-slate); margin-bottom: 6px; }
.apc-input {
  width: 100%; padding: 12px 14px; border: 1.5px solid #DDD;
  border-radius: 8px; font-size: 15px; font-family: inherit;
  outline: none; transition: border-color .2s;
}
.apc-input:focus { border-color: var(--apc-orange); }
.apc-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234A4A4A'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
.apc-textarea { resize: vertical; }
.apc-input-file { padding: 8px; }
.apc-otp-input  { text-align: center; letter-spacing: 12px; font-size: 22px; font-weight: 700; }
.apc-input-row  { display: flex; gap: 8px; align-items: center; }
.apc-prefix     { background: var(--apc-sand); border: 1.5px solid #DDD; border-radius: 8px; padding: 12px 10px; font-size: 15px; font-weight: 600; white-space: nowrap; }

.apc-field { margin-bottom: 16px; }
.apc-field-full { grid-column: 1 / -1; }
.apc-form-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 520px) { .apc-form-grid { grid-template-columns: 1fr; } }

/* ── Chips (category selector) ───────────────────────────── */
.apc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.apc-chip  { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1.5px solid #DDD; border-radius: 20px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all .2s; user-select: none; }
.apc-chip:has(input:checked) { background: var(--apc-orange); border-color: var(--apc-orange); color: #fff; }
.apc-chip input { display: none; }

/* ── Buttons ─────────────────────────────────────────────── */
.apc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px; border: none; border-radius: 8px;
  font-size: 15px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: background .2s, transform .1s;
}
.apc-btn:active { transform: scale(.97); }
.apc-btn-primary   { background: var(--apc-orange);  color: #fff; width: 100%; margin-top: 12px; }
.apc-btn-primary:hover { background: var(--apc-orange-d); }
.apc-btn-secondary { background: var(--apc-sand); color: var(--apc-stone); }
.apc-btn-ghost     { background: transparent; color: var(--apc-slate); width: 100%; margin-top: 8px; font-size: 14px; }
.apc-btn-block     { width: 100%; margin-top: 20px; }
.apc-btn-sm        { padding: 10px 14px; font-size: 13px; white-space: nowrap; }

.apc-location-row { display: flex; gap: 8px; }
.apc-location-row .apc-input { flex: 1; }

/* ── Messages ────────────────────────────────────────────── */
.apc-msg { margin-top: 12px; font-size: 13px; text-align: center; min-height: 20px; }
.apc-msg.success { color: var(--apc-green); }
.apc-msg.error   { color: var(--apc-red); }
.apc-hint        { font-size: 12px; color: #999; margin-top: 4px; }

/* ── Top Bar ─────────────────────────────────────────────── */
.apc-topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--apc-stone); color: #fff;
  padding: 14px 16px; position: sticky; top: 0; z-index: 100;
}
.apc-topbar-left  { display: flex; align-items: center; gap: 12px; }
.apc-avatar       { font-size: 32px; }
.apc-topbar-name  { font-weight: 700; font-size: 15px; }
.apc-topbar-loc   { font-size: 12px; opacity: .65; }
.apc-topbar-right { display: flex; align-items: center; gap: 10px; }

/* ── Availability toggle ─────────────────────────────────── */
.apc-toggle-wrap  { position: relative; cursor: pointer; }
.apc-toggle-wrap input { display: none; }
.apc-toggle-track {
  display: block; width: 46px; height: 26px;
  background: #555; border-radius: 13px; transition: background .25s;
}
.apc-toggle-wrap input:checked + .apc-toggle-track { background: var(--apc-green); }
.apc-toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; background: #fff;
  border-radius: 50%; transition: left .25s;
}
.apc-toggle-wrap input:checked ~ .apc-toggle-track .apc-toggle-thumb { left: 23px; }
.apc-avail-label { font-size: 12px; color: #fff; font-weight: 600; white-space: nowrap; }

/* ── Notification button ─────────────────────────────────── */
.apc-notif-btn { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; position: relative; padding: 0 4px; }
.apc-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--apc-orange); color: #fff; font-size: 10px;
  font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ── Tabs ───────────────────────────────────────────────── */
.apc-tabs {
  display: flex; background: var(--apc-white);
  border-bottom: 2px solid var(--apc-sand);
  position: sticky; top: 66px; z-index: 99;
}
.apc-tab {
  flex: 1; padding: 14px 8px; background: none; border: none; border-bottom: 3px solid transparent;
  font-size: 13px; font-weight: 600; color: var(--apc-slate); cursor: pointer;
  margin-bottom: -2px; transition: color .2s, border-color .2s;
}
.apc-tab-active, .apc-tab:hover { color: var(--apc-orange); border-bottom-color: var(--apc-orange); }

/* ── Project Cards ───────────────────────────────────────── */
.apc-project-list { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.apc-project-card {
  background: var(--apc-white); border-radius: var(--apc-radius);
  box-shadow: var(--apc-shadow); padding: 16px;
  border-left: 4px solid var(--apc-orange);
}
.apc-project-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.apc-project-title  { font-weight: 700; font-size: 15px; }
.apc-project-dist   { font-size: 12px; font-weight: 600; color: var(--apc-orange); white-space: nowrap; }
.apc-project-meta   { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.apc-tag {
  background: var(--apc-sand); color: var(--apc-stone);
  font-size: 11px; font-weight: 700; padding: 4px 10px;
  border-radius: 20px; text-transform: uppercase; letter-spacing: .5px;
}
.apc-tag.cat    { background: #FEE4D0; color: var(--apc-orange-d); }
.apc-tag.status { background: #D4EDD9; color: var(--apc-green); }
.apc-project-loc { font-size: 13px; color: #888; margin-bottom: 12px; }
.apc-btn-apply  { background: var(--apc-orange); color: #fff; border: none; border-radius: 8px; padding: 10px 20px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .2s; }
.apc-btn-apply:hover { background: var(--apc-orange-d); }
.apc-btn-apply:disabled { background: #bbb; cursor: not-allowed; }

/* ── Notification list ───────────────────────────────────── */
.apc-notif-list { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.apc-notif-item {
  background: var(--apc-white); border-radius: 10px;
  padding: 14px 16px; box-shadow: 0 1px 4px rgba(0,0,0,.08);
  border-left: 3px solid var(--apc-sand);
  cursor: pointer; transition: border-color .2s;
}
.apc-notif-item.unread { border-left-color: var(--apc-orange); background: #FFF8F5; }
.apc-notif-title  { font-weight: 700; font-size: 14px; }
.apc-notif-body   { font-size: 13px; color: var(--apc-slate); margin-top: 4px; }
.apc-notif-time   { font-size: 11px; color: #aaa; margin-top: 6px; }

/* ── Status icon (pending screen) ───────────────────────── */
.apc-status-icon { font-size: 56px; margin-bottom: 16px; }

/* ── Modal ───────────────────────────────────────────────── */
.apc-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 999;
}
.apc-modal {
  background: var(--apc-white); border-radius: 16px 16px 0 0;
  padding: 24px 20px 32px; width: 100%; max-width: 540px;
  animation: apc-slide-up .3s ease;
}
@keyframes apc-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.apc-modal-title  { font-size: 18px; font-weight: 800; margin-bottom: 16px; }
.apc-modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.apc-modal-actions .apc-btn { flex: 1; margin-top: 0; }

/* ── Loading / Empty ─────────────────────────────────────── */
.apc-loading { text-align: center; color: #aaa; padding: 40px 20px; font-size: 14px; }
.apc-empty-state { text-align: center; padding: 40px 20px; color: #999; }
.apc-empty-state .apc-empty-icon { font-size: 40px; margin-bottom: 12px; }

/* ── Email/Password auth additions ───────────────────────── */
.apc-pw-wrap        { position: relative; }
.apc-pw-wrap .apc-input { padding-right: 42px; }
.apc-pw-toggle      {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 16px; padding: 0;
  color: var(--apc-slate); line-height: 1;
}
.apc-auth-links     { display: flex; justify-content: flex-end; margin: 6px 0 2px; }
.apc-link-btn       { background: none; border: none; color: var(--apc-orange); cursor: pointer; font-size: 13px; font-weight: 600; padding: 0; text-decoration: underline; }
.apc-auth-switch    { text-align: center; margin-top: 16px; font-size: 13px; color: var(--apc-slate); }
.apc-auth-switch .apc-link-btn { font-size: 13px; }
.apc-panel-sub-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.apc-reg-header     { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.apc-back-btn       { background: var(--apc-sand); border: none; border-radius: 8px; padding: 6px 12px; font-size: 18px; cursor: pointer; line-height: 1; }