/* Zain Dev — minimal flat theme: white, one accent, no effects. */
:root{
  --bg:#ffffff;
  --bg-soft:#f6f7f9;
  --card:#ffffff;
  --card-border:#e5e7eb;
  --text:#111827;
  --text-dim:#6b7280;
  --accent:#2563eb;
  --danger:#dc2626;
  --warning:#b45309;
  --success:#15803d;
}
body{ background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; min-height:100vh; }
a{ text-decoration:none; color:inherit; }
h1,h2,h3,h4,h5,h6{ letter-spacing:-0.01em; }

.navbar-zd{ background:#fff; border-bottom:1px solid var(--card-border); padding:.75rem 0; }
.brand{ font-weight:700; font-size:1.2rem; color:var(--text); }
.nav-link-zd{ color:var(--text-dim); padding:.4rem .75rem; }
.nav-link-zd:hover,.nav-link-zd.active{ color:var(--text); }

.btn-gradient{ background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:6px; font-weight:500; }
.btn-gradient:hover{ background:#1d4ed8; border-color:#1d4ed8; color:#fff; }
.btn-outline-zd{ background:#fff; color:var(--text); border:1px solid var(--card-border); border-radius:6px; font-weight:500; }
.btn-outline-zd:hover{ background:var(--bg-soft); color:var(--text); }

.hero{ padding:4rem 0 3rem; }
.hero h1{ font-size:2.6rem; font-weight:700; }
.hero .highlight{ color:var(--accent); }
.hero p.lead{ color:var(--text-dim); font-size:1.1rem; max-width:560px; }
.badge-pill{ display:inline-block; color:var(--text-dim); font-size:.85rem; margin-bottom:1rem; }
.hero-cta-line{ font-weight:600; }
.pulse-dot{ display:none; }

.card-zd,.card-flat,.stat-card,.auth-card,.auth-card-v2{ background:var(--card); border:1px solid var(--card-border); border-radius:8px; padding:1.5rem; }
.stat-value{ font-size:1.8rem; font-weight:700; }
.stat-label{ color:var(--text-dim); font-size:.85rem; }
.icon-tile{ font-size:1.4rem; margin-bottom:.5rem; }

.form-control,.form-select{ border:1px solid var(--card-border); border-radius:6px; }
.form-control:focus,.form-select:focus{ border-color:var(--accent); box-shadow:none; }

.auth-wrap{ min-height:80vh; display:flex; align-items:center; justify-content:center; }
.auth-card{ max-width:440px; width:100%; padding:2rem; }
.auth-card-v2{ max-width:480px; width:100%; padding:2rem; }
.auth-split{ min-height:calc(100vh - 140px); display:flex; align-items:stretch; }
.auth-split .brand-pane{ flex:1 1 42%; background:var(--bg-soft); border-radius:8px; padding:2.5rem; display:flex; flex-direction:column; justify-content:space-between; margin-right:2rem; }
.auth-split .form-pane{ flex:1 1 58%; display:flex; align-items:center; justify-content:center; padding:2rem 0; }
.auth-step-pill{ display:inline-block; font-size:.78rem; font-weight:600; color:var(--accent); margin-bottom:1rem; }
.mini-feature{ display:flex; align-items:flex-start; gap:.75rem; margin-bottom:1.2rem; }
.mini-feature h6{ margin-bottom:.15rem; font-size:.92rem; }
.mini-feature p{ margin:0; font-size:.82rem; color:var(--text-dim); }
.google-btn{ display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%; padding:.6rem; border:1px solid var(--card-border); border-radius:6px; background:#fff; color:var(--text); font-weight:500; }
.google-btn:hover{ background:var(--bg-soft); }
.divider-row{ display:flex; align-items:center; gap:.85rem; margin:1.1rem 0; }
.divider-row hr{ flex:1; border-color:var(--card-border); margin:0; }
.divider-row span{ color:var(--text-dim); font-size:.78rem; }

.status-badge{ display:inline-block; padding:.15rem .6rem; border-radius:4px; font-size:.78rem; font-weight:600; background:var(--bg-soft); border:1px solid var(--card-border); }
.status-new{ color:var(--accent); }
.status-in_progress{ color:var(--warning); }
.status-waiting{ color:var(--text-dim); }
.status-resolved{ color:var(--success); }
.status-closed{ color:var(--text-dim); }
.priority-urgent{ color:var(--danger); }
.priority-high{ color:var(--warning); }
.priority-medium{ color:var(--accent); }
.priority-low{ color:var(--text-dim); }

.table-zd{ color:var(--text); }
.table-zd th{ color:var(--text-dim); font-weight:600; font-size:.8rem; text-transform:uppercase; border-bottom:1px solid var(--card-border); }
.table-zd td{ border-bottom:1px solid var(--card-border); vertical-align:middle; padding:.75rem .5rem; }
.table-zd tr:last-child td{ border-bottom:none; }

.workflow-track{ display:flex; align-items:center; margin:1.5rem 0; }
.workflow-step{ flex:1; text-align:center; position:relative; }
.workflow-step .dot{ width:30px; height:30px; border-radius:50%; background:#fff; border:2px solid var(--card-border); display:flex; align-items:center; justify-content:center; margin:0 auto .5rem; font-size:.8rem; font-weight:600; color:var(--text-dim); position:relative; z-index:2; }
.workflow-step.done .dot{ background:var(--accent); border-color:var(--accent); color:#fff; }
.workflow-step.current .dot{ border-color:var(--accent); color:var(--accent); background:#fff; }
.workflow-step .label{ font-size:.78rem; color:var(--text-dim); }
.workflow-step.done .label,.workflow-step.current .label{ color:var(--text); font-weight:600; }
.workflow-line{ position:absolute; top:15px; left:-50%; right:50%; height:2px; background:var(--card-border); z-index:1; }
.workflow-step:first-child .workflow-line{ display:none; }
.workflow-step.done .workflow-line{ background:var(--accent); }

.progress-zd{ height:6px; border-radius:99px; background:var(--bg-soft); overflow:hidden; }
.progress-zd .bar{ height:100%; background:var(--accent); }

.attachment-chip{ display:inline-block; padding:.3rem .7rem; margin:.2rem .2rem 0 0; border:1px solid var(--card-border); border-radius:6px; font-size:.85rem; background:#fff; }
.attachment-chip:hover{ background:var(--bg-soft); }

.alert{ border:1px solid var(--card-border); border-radius:6px; }

.company-pick-card{ border:1px solid var(--card-border); background:#fff; border-radius:8px; padding:1rem 1.2rem; cursor:pointer; display:flex; align-items:flex-start; gap:.85rem; }
.company-pick-card:hover{ border-color:var(--accent); }
.company-pick-card input[type="radio"]{ appearance:none; -webkit-appearance:none; margin:.15rem 0 0 0; flex:0 0 20px; width:20px; height:20px; border-radius:50%; border:2px solid var(--card-border); background:transparent; position:relative; cursor:pointer; }
.company-pick-card input[type="radio"]:checked{ border-color:var(--accent); }
.company-pick-card input[type="radio"]:checked::after{ content:""; position:absolute; top:50%; left:50%; width:10px; height:10px; border-radius:50%; background:var(--accent); transform:translate(-50%,-50%); }
.company-pick-card .pick-label{ line-height:1.4; }
.company-pick-card.selected{ border-color:var(--accent); background:var(--bg-soft); }

footer.footer-zd{ border-top:1px solid var(--card-border); padding:1.5rem 0; color:var(--text-dim); margin-top:4rem; font-size:.9rem; }
