/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,500,0,0');

:root {
  --primary: hsl(217, 91%, 60%);
  --secondary: hsl(220, 8%, 46%);

  --gray-50: hsl(210, 10%, 98%);
  --gray-100: hsl(210, 10%, 96%);
  --gray-200: hsl(210, 10%, 90%);
  --gray-300: hsl(210, 10%, 80%);
  --gray-400: hsl(210, 10%, 65%);
  --gray-500: hsl(210, 10%, 45%);
  --gray-600: hsl(210, 10%, 30%);
  --gray-700: hsl(210, 10%, 20%);
  --gray-800: hsl(210, 10%, 15%);
  --gray-900: hsl(210, 10%, 8%);

  --accent-green: hsl(150, 80%, 45%);
  --accent-purple: hsl(320, 80%, 75%);
  --accent-yellow: hsl(45, 100%, 70%);
  --accent-red: hsl(10, 90%, 60%);

  --bg: var(--gray-100);
  --panel: #fff;
  --text: var(--gray-700);
  --muted: var(--gray-600);
  --line: var(--gray-200);
  --sidebar-bg: var(--gray-50);
  --radius: 8px;
}


.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  font-size: 20px;
  line-height: 1;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Inter, sans-serif; background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }

.app-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
}

.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.brand { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; }
.search {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--gray-100);
  padding: 10px 12px;
  color: var(--text);
}

.nav-group { display: grid; grid-gap: 6px; gap: 6px; }
.nav-item {
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-item.active {
  background: var(--primary);
  color: white;
}
.nav-item:hover { border-color: var(--line); text-decoration: none; }

.sidebar-section-title { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; }
.project-item { display:flex; align-items:center; gap:8px; color: var(--muted); font-size: .875rem; }
.dot { width: 8px; height: 8px; border-radius: 999px; display:inline-block; }
.dot.green { background: var(--accent-green); }
.dot.purple { background: var(--accent-purple); }
.dot.yellow { background: var(--accent-yellow); }

.session-mini {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  background: #fff;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}
.session-mini-title { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.session-mini-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: var(--text);
}

.main {
  padding: 18px;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.main-scroll {
  flex: 1 1;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.header-row { display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap: wrap; }
.h1 { font-size: 2.5rem; font-weight: 700; margin: 0; color: #111827; }
.h3 { font-size: 1.5rem; font-weight: 600; margin: 0; color: #111827; }
h1,h2,h3 { color:#111827; }
.muted { color: var(--muted); }

.btn {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 10px 12px;
  background: var(--panel);
  color: var(--text);
}
.btn.primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.grid { display: grid; grid-gap: 14px; gap: 14px; }
.grid-2 { grid-template-columns: 2fr 1fr; }
.card {
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 14px;
}

table { width:100%; border-collapse: collapse; }
th, td { border-top: 1px solid var(--line); padding: 10px 8px; font-size: .875rem; }
thead th { border-top: none; text-align:left; color: var(--muted); }

.stat-number { font-size: 1.7rem; line-height: 1; color: #111827; }
.stat-number.total { color: #111827; }
.stat-number.done { color: var(--accent-green); }
.stat-number.progress { color: var(--primary); }
.stat-number.open { color: var(--gray-500); }

.badge {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .75rem;
  color: #fff;
  display: inline-block;
}
.badge.green { background: var(--accent-green); }
.badge.blue { background: var(--primary); }
.badge.gray { background: var(--gray-400); }

.tile-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-gap: 12px; gap: 12px; }
.tile {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 14px;
}
.tile.active { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, var(--panel)); }

.scope-step { margin-top: 14px; }
.scope-step-title { margin: 0 0 8px 0; color: #111827; font-size: 1rem; font-weight: 600; }
.scope-options { display: grid; grid-template-columns: 1fr; grid-gap: 10px; gap: 10px; }
.scope-option {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 14px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.scope-option:hover { border-color: var(--gray-300); }
.scope-option.active {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 8%, #fff);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 18%, transparent);
}
.scope-option-head { display: grid; grid-gap: 2px; gap: 2px; }
.scope-option-title { font-weight: 600; color: #111827; }
.scope-option-sub { color: var(--muted); font-size: .9rem; }
.scope-check {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-weight: 700;
}
.scope-option.active .scope-check {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.scope-cta-row {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
.scope-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  border-radius: 10px;
  padding: 11px 16px;
  font-weight: 600;
}
.scope-cta:hover { filter: brightness(0.96); }

.step-actions {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.navlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  padding: 10px 14px;
  font-weight: 600;
}

.step-actions .nav-next {
  margin-left: auto;
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.bottom-nav { display:none; }

@media (max-width: 1023px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: 14px 14px 84px; }
  .h1 { font-size: 1.875rem; }
  .grid-2 { grid-template-columns: 1fr; }
  .tile-grid { grid-template-columns: 1fr; }

  .bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    border-top: 1px solid var(--line);
    background: var(--panel);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    z-index: 60;
  }
  .bn-item {
    padding: 8px 2px;
    text-align: center;
    font-size: .72rem;
    color: var(--muted);
    display:flex; flex-direction:column; align-items:center; gap:4px;
  }
  .bn-item.active { color: var(--primary); font-weight: 600; }
}