/* HardOut – shared styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ---- Theme: Dark ---- */
:root,[data-theme="dark"]{
  --bg:#111111;
  --surface:#191919;
  --surface-hover:#212121;
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.14);
  --text:#e8e8e8;
  --text-muted:#9a9a9a;
  --accent:#f0f0f0;
  --accent-dim:#b0b0b0;
  --error:#ef4444;
  --ok:#22c55e;
  --gold:#eab308;
  --shadow:0 1px 3px rgba(0,0,0,0.4),0 1px 2px rgba(0,0,0,0.3);
  --shadow-lg:0 4px 12px rgba(0,0,0,0.5);
  --overlay:rgba(0,0,0,0.6);
  --input-bg:#141414;
  --ring:rgba(255,255,255,0.15);
  color-scheme:dark;
}

/* ---- Theme: Light ---- */
[data-theme="light"]{
  --bg:#f7f7f7;
  --surface:#ffffff;
  --surface-hover:#f0f0f0;
  --border:rgba(0,0,0,0.08);
  --border-strong:rgba(0,0,0,0.14);
  --text:#1a1a1a;
  --text-muted:#6b6b6b;
  --accent:#171717;
  --accent-dim:#555555;
  --error:#dc2626;
  --ok:#16a34a;
  --gold:#ca8a04;
  --shadow:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg:0 4px 12px rgba(0,0,0,0.08);
  --overlay:rgba(0,0,0,0.3);
  --input-bg:#f2f2f2;
  --ring:rgba(0,0,0,0.08);
  color-scheme:light;
}

/* System preference when no explicit theme */
@media(prefers-color-scheme:light){
  :root:not([data-theme]){
    --bg:#f7f7f7;
    --surface:#ffffff;
    --surface-hover:#f0f0f0;
    --border:rgba(0,0,0,0.08);
    --border-strong:rgba(0,0,0,0.14);
    --text:#1a1a1a;
    --text-muted:#6b6b6b;
    --accent:#171717;
    --accent-dim:#555555;
    --error:#dc2626;
    --ok:#16a34a;
    --gold:#ca8a04;
    --shadow:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
    --shadow-lg:0 4px 12px rgba(0,0,0,0.08);
    --overlay:rgba(0,0,0,0.3);
    --input-bg:#f2f2f2;
    --ring:rgba(0,0,0,0.08);
    color-scheme:light;
  }
}

/* ---- Base ---- */
body{
  font-family:"Hanken Grotesk",sans-serif;
  font-feature-settings:"kern","ss01" 0;
  font-kerning:normal;
  font-weight:300;
  letter-spacing:0.01em;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  padding:2.5rem 2rem;
  transition:background .25s,color .25s;
}

/* ---- Buttons ---- */
.btn{
  padding:0.5rem 1rem;border:1px solid var(--border-strong);border-radius:6px;
  background:var(--surface);color:var(--text-muted);font-size:0.75rem;
  cursor:pointer;transition:all .15s;font-family:inherit;font-weight:400;
  letter-spacing:0.01em;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn:disabled{opacity:0.35;cursor:default;pointer-events:none}
.btn.active{border-color:var(--accent);color:var(--accent)}
.btn-primary{
  background:var(--accent);border-color:var(--accent);
  color:var(--bg);font-weight:500;
}
.btn-primary:hover{opacity:0.85}
.btn-danger{color:var(--error)}
.btn-danger:hover{border-color:var(--error);color:var(--error)}
.btn-sm{font-size:0.65rem;padding:4px 10px;border-radius:5px}

/* ---- Header ---- */
header{
  max-width:1100px;margin:0 auto 2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
header h1{font-size:1.25rem;font-weight:500;letter-spacing:-0.01em}
.header-actions{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap}
.user-bar{display:flex;align-items:center;gap:1rem}
.user-name{font-size:0.8rem;color:var(--text-muted)}

/* ---- Sections ---- */
.section{max-width:900px;margin:0 auto 2.5rem}
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.25rem;
}
.section-header h2{font-size:1rem;font-weight:500;letter-spacing:-0.01em}

/* ---- Badges ---- */
.badge{
  font-size:0.6rem;text-transform:uppercase;letter-spacing:0.06em;
  padding:3px 8px;font-weight:500;border-radius:4px;
}
.badge.active{background:rgba(34,197,94,0.12);color:var(--ok)}
.badge.archived{background:var(--ring);color:var(--text-muted)}
.badge.completed{background:var(--ring);color:var(--accent)}

/* ---- Modal ---- */
.modal-overlay{
  position:fixed;inset:0;background:var(--overlay);
  display:flex;align-items:flex-start;justify-content:center;
  z-index:9000;opacity:0;transition:opacity .2s;overflow-y:auto;padding:3rem 1rem;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.modal-overlay.active{opacity:1}
.modal-overlay.hidden{display:none}
.modal{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  width:90vw;max-width:520px;padding:1.75rem;position:relative;flex-shrink:0;
  box-shadow:var(--shadow-lg);
}
.modal h2{font-size:1rem;font-weight:500;margin-bottom:1.5rem;color:var(--text);letter-spacing:-0.01em}
.modal-actions{display:flex;gap:0.75rem;justify-content:flex-end;margin-top:1.5rem}

/* ---- Forms ---- */
.form-group{margin-bottom:1.1rem}
.form-group label{
  display:block;font-size:0.68rem;color:var(--text-muted);margin-bottom:0.4rem;
  text-transform:uppercase;letter-spacing:0.06em;font-weight:400;
}
.form-group input,.form-group textarea,.form-group select{
  width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:8px;
  padding:0.6rem 0.75rem;color:var(--text);font-size:0.8rem;font-family:inherit;
  transition:border-color .2s,box-shadow .2s;font-weight:300;
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  outline:none;border-color:var(--accent-dim);
  box-shadow:0 0 0 3px var(--ring);
}
.form-group textarea{resize:vertical;min-height:70px}
.form-row{display:flex;gap:0.75rem}
.form-row .form-group{flex:1}

/* ---- Cards ---- */
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.project-card{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:1.5rem;cursor:pointer;transition:border-color .2s,box-shadow .2s;
}
.project-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}
.project-card h3{font-size:0.9rem;font-weight:500;margin-bottom:0.35rem;letter-spacing:-0.01em}
.project-card .project-desc{font-size:0.75rem;color:var(--text-muted);margin-bottom:0.85rem;line-height:1.5}
.project-card .project-meta{font-size:0.7rem;color:var(--text-muted);display:flex;gap:1rem}
.project-card .project-actions{display:flex;gap:0.5rem;margin-top:0.85rem}

/* ---- Tables ---- */
.data-table{width:100%;border-collapse:collapse;font-size:0.8rem}
.data-table th{
  text-align:left;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--text-muted);font-weight:400;padding:0.5rem 0.6rem;
  border-bottom:1px solid var(--border);
}
.data-table td{padding:0.45rem 0.6rem;border-bottom:1px solid var(--border);vertical-align:middle}
.data-table input{
  background:var(--input-bg);border:1px solid transparent;border-radius:6px;
  padding:0.25rem 0.4rem;color:var(--text);font-size:0.8rem;
  width:100%;font-family:inherit;transition:border-color .2s;
}
.data-table input:hover{border-color:var(--border)}
.data-table input:focus{outline:none;border-color:var(--accent-dim)}

/* ---- Filters ---- */
.filters{max-width:1100px;margin:0 auto 1.5rem;display:flex;gap:0.5rem;flex-wrap:wrap}
.filter-select{
  background:var(--surface);border:1px solid var(--border);border-radius:6px;
  color:var(--text-muted);font-size:0.7rem;padding:0.4rem 0.6rem;
  font-family:inherit;cursor:pointer;transition:border-color .15s;
}
.filter-select:focus{outline:none;border-color:var(--accent-dim)}

/* ---- Empty state ---- */
.empty{text-align:center;padding:3rem;color:var(--text-muted);font-size:0.85rem}

/* ---- Utility ---- */
.hidden{display:none!important}
.text-error{color:var(--error)}
.text-muted{color:var(--text-muted)}
.text-ok{color:var(--ok)}
.mt-1{margin-top:0.5rem}
.mt-2{margin-top:1rem}
.mb-1{margin-bottom:0.5rem}
.mb-2{margin-bottom:1rem}
.gap-sm{gap:0.5rem}

/* ---- Location cards (shared across location pages) ---- */
.loc-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;
  max-width:1100px;margin:0 auto;
}
.loc-card{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:1.5rem;transition:border-color .2s,box-shadow .2s;
}
.loc-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}
.loc-card h3{font-size:0.9rem;font-weight:500;margin-bottom:0.5rem}
.loc-card .loc-detail{font-size:0.75rem;color:var(--text-muted);margin-bottom:0.25rem}
.loc-card .loc-detail a{color:var(--accent-dim);text-decoration:none}
.loc-card .loc-detail a:hover{color:var(--accent);text-decoration:underline}
.loc-card .loc-actions{display:flex;gap:0.5rem;margin-top:0.85rem;flex-wrap:wrap}

/* ---- Image upload areas ---- */
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:0.5rem;margin-top:0.75rem}
.img-thumb{
  width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--border);border-radius:6px;
  cursor:pointer;transition:border-color .15s;
}
.img-thumb:hover{border-color:var(--accent-dim)}
.upload-zone{
  border:1px dashed var(--border-strong);border-radius:8px;
  padding:1.25rem;text-align:center;
  color:var(--text-muted);font-size:0.7rem;cursor:pointer;transition:border-color .15s,color .15s;
}
.upload-zone:hover{border-color:var(--accent-dim);color:var(--accent)}

/* ---- Stage badges ---- */
.stage-badge{
  display:inline-block;font-size:0.55rem;text-transform:uppercase;letter-spacing:0.06em;
  padding:3px 8px;font-weight:500;border-radius:4px;
}
.stage-scouting{background:var(--ring);color:var(--text-muted)}
.stage-recce{background:rgba(34,197,94,0.12);color:var(--ok)}
.stage-confirmed{background:rgba(234,179,8,0.12);color:var(--gold)}
.stage-tech_recce{background:var(--ring);color:var(--accent)}

/* ---- Lightbox ---- */
.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,0.92);
  display:flex;align-items:center;justify-content:center;
  z-index:9500;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.lightbox img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:4px}

/* ---- Sidebar body shift ---- */
.rap-body-shift{margin-left:220px;transition:margin-left .2s}

/* ---- Print ---- */
@media print{
  :root{
    --bg:#fff;--surface:#fff;--surface-hover:#f5f5f5;
    --border:rgba(0,0,0,0.1);--border-strong:rgba(0,0,0,0.15);
    --text:#111;--text-muted:#555;
    --accent:#111;--accent-dim:#333;--error:#c00;--ok:#070;
    --shadow:none;--shadow-lg:none;
  }
  body{padding:0.5cm;background:#fff;color:#111}
  .sidebar,.sidebar-toggle,.header-actions,.btn,.filters{display:none!important}
  .rap-body-shift{margin-left:0!important}
  .modal-overlay{display:none!important}
}

/* ---- Responsive ---- */
@media(max-width:700px){
  body{padding:1.25rem}
  header{flex-direction:column;align-items:flex-start}
  .loc-grid{grid-template-columns:1fr}
  .project-grid{grid-template-columns:1fr}
  .form-row{flex-direction:column;gap:0.5rem}
}