/* SEP Companion v3 — main.css */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Earthy academic palette */
  --soil:       #3D2B1F;
  --bark:       #5C3D2E;
  --leaf:       #2D6A4F;
  --leaf-lt:    #52B788;
  --leaf-pale:  #D8F3DC;
  --amber:      #D4820A;
  --amber-pale: #FEF3DC;
  --sun:        #F4A261;
  --red-earth:  #BC4749;
  --red-pale:   #FDECEA;
  --sky:        #1B4F72;
  --sky-pale:   #D6EAF8;
  --cream:      #FAF7F2;
  --paper:      #FFFFFF;
  --border:     #E8E0D5;
  --border-dk:  #C8B8A8;
  --text:       #2C1A0E;
  --text-2:     #6B5744;
  --text-3:     #A08878;
  --sidebar-w:  256px;
  --radius:     8px;
  --radius-lg:  12px;
  --shadow:     0 1px 3px rgba(61,43,31,0.08), 0 4px 16px rgba(61,43,31,0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'IBM Plex Sans', sans-serif; background: var(--cream); color: var(--text); display: flex; min-height: 100vh; font-size: 14px; line-height: 1.5; }

/* ── Sidebar ── */
.sidebar { width: var(--sidebar-w); background: var(--soil); display: flex; flex-direction: column; position: fixed; top:0; left:0; bottom:0; z-index:100; overflow-y:auto; }

.sidebar-brand { padding: 1.25rem 1rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.brand-logo { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.brand-icon { width:32px; height:32px; background:var(--leaf); border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:'Lora',serif; font-size:14px; color:#fff; flex-shrink:0; }
.brand-name { font-family:'Lora',serif; font-size:15px; color:#fff; font-weight:600; }
.brand-sub  { font-size:10px; color:rgba(255,255,255,0.4); letter-spacing:0.05em; }

.sidebar-section { padding: 0.75rem 0.75rem 0.25rem; }
.sidebar-section-label { font-size:9px; color:rgba(255,255,255,0.3); text-transform:uppercase; letter-spacing:0.12em; font-weight:600; padding: 0 0.25rem; margin-bottom:4px; }

.nav-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius); color:rgba(255,255,255,0.55); text-decoration:none; font-size:13px; transition:all 0.15s; margin-bottom:1px; cursor:pointer; border:none; background:none; width:100%; text-align:left; font-family:'IBM Plex Sans',sans-serif; }
.nav-item:hover { background:rgba(255,255,255,0.07); color:rgba(255,255,255,0.85); }
.nav-item.active { background:var(--leaf); color:#fff; font-weight:500; }
.nav-item.locked { opacity:0.4; cursor:not-allowed; }
.nav-item.locked:hover { background:none; color:rgba(255,255,255,0.4); }

.nav-icon { width:18px; text-align:center; font-size:13px; flex-shrink:0; }
.nav-label { flex:1; }
.nav-badge { font-size:9px; padding:2px 6px; border-radius:20px; font-weight:600; }
.nav-badge-green  { background:var(--leaf); color:#fff; }
.nav-badge-amber  { background:var(--amber); color:#fff; }
.nav-badge-lock   { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.4); }

.phase-progress { padding: 4px 10px 8px; }
.phase-mini-bar { height:2px; background:rgba(255,255,255,0.1); border-radius:2px; margin-top:3px; }
.phase-mini-fill { height:2px; background:var(--leaf-lt); border-radius:2px; transition:width 0.4s; }

.sidebar-team { padding: 0.75rem; border-top: 1px solid rgba(255,255,255,0.08); margin-top:auto; }
.team-label { font-size:9px; color:rgba(255,255,255,0.3); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:6px; }
.team-member { display:flex; align-items:center; gap:7px; padding:3px 0; }
.tm-av { width:22px; height:22px; border-radius:50%; font-size:9px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.av1{background:#52B788;color:#fff;} .av2{background:#1B4F72;color:#fff;} .av3{background:#D4820A;color:#fff;} .av4{background:#BC4749;color:#fff;}
.tm-name { font-size:11px; color:rgba(255,255,255,0.5); }
.tm-you  { font-size:9px; color:var(--leaf-lt); margin-left:2px; }

.sidebar-user { padding:0.625rem 0.75rem; border-top:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; gap:8px; }
.user-name { font-size:12px; color:rgba(255,255,255,0.6); flex:1; }
.logout-btn { font-size:11px; color:rgba(255,255,255,0.3); background:none; border:none; cursor:pointer; padding:2px; }
.logout-btn:hover { color:rgba(255,255,255,0.7); }

/* ── Main content ── */
.main-content { margin-left:var(--sidebar-w); flex:1; min-width:0; }

.page-header { padding:1.5rem 2rem 1rem; border-bottom:1px solid var(--border); background:var(--paper); position:sticky; top:0; z-index:50; }
.page-header-inner { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.page-title { font-family:'Lora',serif; font-size:22px; font-weight:600; color:var(--text); }
.page-sub { font-size:12px; color:var(--text-2); margin-top:2px; }
.page-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }

.page-body { padding: 1.5rem 2rem; }

/* ── Phase header banner ── */
.phase-banner { background:linear-gradient(135deg, var(--leaf) 0%, #1B4532 100%); color:#fff; border-radius:var(--radius-lg); padding:1.25rem 1.5rem; margin-bottom:1.25rem; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.phase-banner-locked { background:linear-gradient(135deg, #5a4a3a 0%, #3d2b1f 100%); }
.phase-num { font-size:10px; font-weight:600; letter-spacing:0.1em; color:rgba(255,255,255,0.55); text-transform:uppercase; margin-bottom:4px; }
.phase-title { font-family:'Lora',serif; font-size:18px; font-weight:600; margin-bottom:4px; }
.phase-aim { font-size:12px; color:rgba(255,255,255,0.7); line-height:1.6; max-width:600px; }
.phase-progress-ring { flex-shrink:0; text-align:center; }
.phase-pct { font-family:'Lora',serif; font-size:28px; font-weight:600; color:#fff; line-height:1; }
.phase-pct-label { font-size:10px; color:rgba(255,255,255,0.55); margin-top:2px; }

/* ── Lock overlay ── */
.lock-overlay { background:var(--paper); border:2px dashed var(--border-dk); border-radius:var(--radius-lg); padding:2rem; text-align:center; margin-bottom:1rem; }
.lock-icon { font-size:32px; margin-bottom:0.75rem; }
.lock-title { font-family:'Lora',serif; font-size:16px; color:var(--text-2); margin-bottom:0.5rem; }
.lock-msg { font-size:13px; color:var(--text-3); line-height:1.6; margin-bottom:1rem; }
.lock-checklist { text-align:left; display:inline-block; }
.lock-check { font-size:12px; color:var(--text-2); padding:3px 0; display:flex; align-items:center; gap:6px; }
.lock-check.done { color:var(--leaf); }

/* ── Cards ── */
.card { background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem 1.5rem; margin-bottom:1rem; box-shadow:var(--shadow); }
.card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:0.75rem; }
.card-title { font-family:'Lora',serif; font-size:15px; font-weight:600; color:var(--text); }
.card-sub   { font-size:12px; color:var(--text-2); line-height:1.6; margin-top:2px; }
.card-tool-tag { font-size:10px; font-weight:600; padding:3px 8px; border-radius:20px; flex-shrink:0; }

/* ── Activity steps ── */
.activity-list { display:flex; flex-direction:column; gap:8px; }
.activity-item { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.activity-header { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; background:var(--paper); transition:background 0.15s; }
.activity-header:hover { background:var(--cream); }
.activity-num { width:22px; height:22px; border-radius:50%; background:var(--cream); border:1px solid var(--border); font-size:11px; font-weight:600; color:var(--text-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.activity-num.done { background:var(--leaf); border-color:var(--leaf); color:#fff; }
.activity-title { flex:1; font-size:13px; font-weight:500; color:var(--text); }
.activity-status { font-size:11px; color:var(--text-3); }
.activity-body { display:none; padding:0 14px 14px; border-top:1px solid var(--border); background:var(--cream); }
.activity-body.open { display:block; }

/* ── Tool cards within activities ── */
.tool-card { background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); margin-top:10px; overflow:hidden; }
.tool-header { padding:10px 14px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); background:var(--paper); }
.tool-icon { font-size:16px; }
.tool-name { font-size:13px; font-weight:600; color:var(--text); flex:1; }
.tool-purpose { font-size:11px; color:var(--text-3); margin-top:1px; }
.tool-body { padding:14px; }

/* ── FGD Question form ── */
.question-block { margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px dashed var(--border); }
.question-block:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.question-text { font-size:13px; font-weight:500; color:var(--text); margin-bottom:6px; }
.question-hint { font-size:11px; color:var(--text-3); margin-bottom:6px; font-style:italic; }

/* ── Forms ── */
.form-group { margin-bottom:0.75rem; }
.form-label { display:block; font-size:11px; font-weight:600; color:var(--text-2); margin-bottom:4px; text-transform:uppercase; letter-spacing:0.04em; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width:100%; padding:8px 11px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--cream); color:var(--text); font-family:'IBM Plex Sans',sans-serif;
  font-size:13px; transition:all 0.15s; resize:vertical;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--leaf); background:#fff; box-shadow:0 0 0 3px rgba(45,106,79,0.1); }

/* ── Buttons ── */
.btn { padding:7px 14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--paper); color:var(--text); font-size:12px; font-weight:500; cursor:pointer; transition:all 0.15s; font-family:'IBM Plex Sans',sans-serif; display:inline-flex; align-items:center; gap:6px; }
.btn:hover { background:var(--cream); border-color:var(--border-dk); }
.btn-primary { background:var(--leaf); border-color:var(--leaf); color:#fff; }
.btn-primary:hover { background:#1B5E40; border-color:#1B5E40; }
.btn-amber { background:var(--amber); border-color:var(--amber); color:#fff; }
.btn-amber:hover { background:#B56E08; }
.btn-danger { background:var(--red-pale); border-color:var(--red-earth); color:var(--red-earth); }
.btn-danger:hover { background:var(--red-earth); color:#fff; }
.btn-sm { padding:4px 10px; font-size:11px; }
.btn-lg { padding:10px 20px; font-size:14px; }

/* ── Badges ── */
.badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:600; }
.badge-green  { background:var(--leaf-pale); color:#1B5E40; }
.badge-amber  { background:var(--amber-pale); color:#7D4E00; }
.badge-gray   { background:#F0EDE8; color:var(--text-3); }
.badge-blue   { background:var(--sky-pale); color:var(--sky); }
.badge-red    { background:var(--red-pale); color:var(--red-earth); }

/* ── Tabs ── */
.tab-bar { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:1rem; border-bottom:1px solid var(--border); padding-bottom:-1px; }
.tab-btn { padding:7px 14px; border:1px solid transparent; border-bottom:none; border-radius:var(--radius) var(--radius) 0 0; background:transparent; color:var(--text-2); font-size:12px; font-weight:500; cursor:pointer; font-family:'IBM Plex Sans',sans-serif; transition:all 0.15s; margin-bottom:-1px; }
.tab-btn:hover { color:var(--text); background:var(--cream); }
.tab-btn.active { background:var(--paper); border-color:var(--border); border-bottom-color:var(--paper); color:var(--leaf); font-weight:600; }
.tab-pane { display:none; }
.tab-pane.active { display:block; }

/* ── Stats grid ── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:1.25rem; }
.stat-card { background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem 1.25rem; box-shadow:var(--shadow); }
.stat-val { font-family:'Lora',serif; font-size:28px; color:var(--leaf); line-height:1; }
.stat-of  { font-size:15px; color:var(--text-3); }
.stat-label { font-size:11px; color:var(--text-2); margin-top:3px; }
.stat-trend { font-size:10px; margin-top:4px; }
.stat-trend.up   { color:var(--leaf); }
.stat-trend.warn { color:var(--amber); }

/* ── Progress bar ── */
.progress-wrap { background:var(--border); border-radius:20px; height:6px; }
.progress-fill  { background:var(--leaf); border-radius:20px; height:6px; transition:width 0.4s; }
.progress-fill.amber { background:var(--amber); }

/* ── Phase progress cards ── */
.phases-overview { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:1.25rem; }
.phase-ov-card { background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); padding:0.75rem; border-top:3px solid var(--border); }
.phase-ov-card.active-phase { border-top-color:var(--amber); }
.phase-ov-card.done-phase   { border-top-color:var(--leaf); }
.phase-ov-num  { font-size:9px; color:var(--text-3); margin-bottom:2px; text-transform:uppercase; letter-spacing:0.06em; }
.phase-ov-name { font-size:11px; font-weight:600; color:var(--text); margin-bottom:6px; line-height:1.3; }
.phase-ov-pct  { font-family:'Lora',serif; font-size:18px; color:var(--leaf); line-height:1; margin-bottom:4px; }

/* ── Data table ── */
.data-table { width:100%; border-collapse:collapse; font-size:12px; }
.data-table th { background:var(--cream); border:1px solid var(--border); padding:7px 10px; font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-2); text-align:left; }
.data-table td { border:1px solid var(--border); padding:7px 10px; color:var(--text); }
.data-table tr:hover td { background:var(--cream); }
.data-table input[type=number] { width:46px; padding:3px; text-align:center; margin:0; }

/* ── Charts ── */
.charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:1rem; }
.chart-card { background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem 1.25rem; box-shadow:var(--shadow); }
.chart-title { font-size:11px; font-weight:600; color:var(--text-2); margin-bottom:0.75rem; text-transform:uppercase; letter-spacing:0.05em; }

/* ── Entry items ── */
.entry-item { background:var(--cream); border:1px solid var(--border); border-radius:var(--radius); padding:0.875rem 1rem; margin-bottom:6px; }
.entry-header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:4px; }
.entry-title  { font-size:13px; font-weight:500; color:var(--text); }
.entry-meta   { font-size:10px; color:var(--text-3); margin-top:2px; }
.entry-body   { font-size:12px; color:var(--text-2); margin-top:6px; line-height:1.6; }
.entry-actions { display:flex; gap:4px; flex-shrink:0; }

/* ── Modal ── */
.modal-overlay { position:fixed; inset:0; background:rgba(44,26,14,0.5); z-index:200; display:flex; align-items:center; justify-content:center; padding:1rem; backdrop-filter:blur(2px); }
.modal-overlay.hidden { display:none; }
.modal { background:var(--paper); border-radius:var(--radius-lg); padding:1.5rem; width:100%; max-width:560px; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(44,26,14,0.25); }
.modal-title { font-family:'Lora',serif; font-size:18px; margin-bottom:1rem; color:var(--text); }
.modal-footer { display:flex; gap:8px; justify-content:flex-end; margin-top:1rem; padding-top:0.75rem; border-top:1px solid var(--border); }


/* ── Upload zone ── */
.upload-zone { border:2px dashed var(--border-dk); border-radius:var(--radius); padding:1.5rem; text-align:center; background:var(--cream); cursor:pointer; transition:all 0.15s; }
.upload-zone:hover { border-color:var(--leaf); background:var(--leaf-pale); }
.upload-icon { font-size:24px; margin-bottom:6px; }
.upload-text { font-size:13px; color:var(--text-2); }
.upload-hint { font-size:11px; color:var(--text-3); margin-top:3px; }

/* ── Doc preview ── */
.doc-preview { background:var(--cream); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; font-size:12px; line-height:1.9; color:var(--text); white-space:pre-wrap; max-height:280px; overflow-y:auto; font-family:'IBM Plex Mono',monospace; }

/* ── Toast ── */
.toast { position:fixed; bottom:1.5rem; right:1.5rem; font-size:13px; padding:10px 18px; border-radius:var(--radius); z-index:300; opacity:0; transition:opacity 0.3s; pointer-events:none; font-weight:500; }
.toast.show { opacity:1; }
.toast.success { background:var(--leaf); color:#fff; }
.toast.error   { background:var(--red-earth); color:#fff; }
.toast.info    { background:var(--sky); color:#fff; }

/* ── Spinner ── */
.spinner { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite; }
.spinner-dark { border-color:rgba(0,0,0,0.15); border-top-color:var(--leaf); }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Login ── */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--soil); padding:1rem; }
.login-card { background:var(--paper); border-radius:var(--radius-lg); padding:2rem; width:100%; max-width:380px; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.login-logo { width:52px; height:52px; background:var(--leaf); border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:'Lora',serif; font-size:20px; color:#fff; margin:0 auto 1rem; }
.login-title { font-family:'Lora',serif; font-size:22px; text-align:center; margin-bottom:4px; color:var(--text); }
.login-sub   { font-size:12px; color:var(--text-2); text-align:center; margin-bottom:1.5rem; }
.login-err   { background:var(--red-pale); color:var(--red-earth); font-size:12px; padding:8px 12px; border-radius:var(--radius); margin-bottom:0.75rem; display:none; }

/* ── Sec heading ── */
.sec-heading { font-size:10px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:0.625rem; }

/* ── Force field ── */
.ff-driving     { background:var(--leaf-pale); border-left:3px solid var(--leaf); border-radius:var(--radius); padding:6px 10px; font-size:12px; color:#1B5E40; margin-bottom:4px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.ff-restraining { background:var(--red-pale);  border-left:3px solid var(--red-earth); border-radius:var(--radius); padding:6px 10px; font-size:12px; color:var(--red-earth); margin-bottom:4px; display:flex; justify-content:space-between; align-items:center; gap:8px; }

/* ── Seasonal ── */
.season-cell { border:1px solid var(--border); border-radius:3px; height:26px; cursor:pointer; background:var(--paper); transition:background 0.1s; }
.season-cell.on { background:var(--leaf); border-color:#1B5E40; }

/* ── Timeline ── */
.timeline-item { display:flex; gap:12px; margin-bottom:8px; }
.timeline-year { font-weight:600; font-size:12px; min-width:80px; color:var(--text); padding-top:4px; }
.timeline-body { flex:1; border-radius:var(--radius); padding:7px 12px; font-size:12px; }
.tl-positive      { background:var(--leaf-pale); color:#1B5E40; }
.tl-negative      { background:var(--amber-pale); color:#7D4E00; }
.tl-very-negative { background:var(--red-pale); color:var(--red-earth); }
.tl-neutral       { background:var(--cream); color:var(--text-2); border:1px solid var(--border); }

/* ── Mobile sidebar toggle button ── */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 150;
  width: 40px;
  height: 40px;
  background: var(--soil);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: background 0.15s;
}
.sidebar-toggle:hover { background: var(--bark); }
.sidebar-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.25s;
}
.sidebar-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sidebar-toggle.open span:nth-child(2) { opacity: 0; }
.sidebar-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Sidebar overlay (mobile backdrop) ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(44,26,14,0.55);
  z-index: 99;
  backdrop-filter: blur(2px);
}
.sidebar-overlay.show { display: block; }

/* ── Responsive ── */
@media (max-width:768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    z-index: 110;
  }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .stats-grid, .phases-overview { grid-template-columns: repeat(2,1fr); }
  .charts-grid { grid-template-columns: 1fr; }
  .page-body { padding: 1rem; padding-top: 3.5rem; }
  .page-header { padding-left: 3.5rem; }
  .sidebar-toggle { display: flex; }
  .info-grid, .quick-grid { grid-template-columns: 1fr 1fr; }
}