/* ==========================================================================
   Dashboard (premium SaaS shell) + Login
   ========================================================================== */

.dash {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: calc(100vh - var(--demo-bar-h));
  font-size: var(--fs-dash);
}

/* ---------- Sidebar ---------- */
.dash-sidebar {
  position: sticky;
  top: var(--demo-bar-h);
  height: calc(100vh - var(--demo-bar-h));
  display: flex; flex-direction: column;
  padding: var(--sp-4) var(--sp-3);
  border-right: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  overflow-y: auto;
  z-index: 40;
}
.dash-sidebar .brand { padding: var(--sp-2) var(--sp-3) var(--sp-5); }
.dash-sidebar .brand .brand-text { white-space: normal; }
.side-group { margin-bottom: var(--sp-4); }
.side-group > span { display: block; padding: 0 var(--sp-3) var(--sp-2); font-size: .7rem; font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.side-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .8rem;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-weight: var(--fw-medium);
  text-decoration: none !important;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.side-link svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.side-link:hover { background: var(--surface-muted); color: var(--text); }
.side-link[aria-current="page"] {
  color: var(--text);
  background: linear-gradient(90deg, rgba(var(--brand-primary-rgb), .16), rgba(var(--brand-secondary-rgb), .08));
  box-shadow: inset 3px 0 0 var(--brand-primary);
}
.side-link[aria-current="page"] svg { color: var(--brand-primary); opacity: 1; }
.side-link .count { margin-left: auto; min-width: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--brand-primary); color: #fff; font-size: .7rem; font-weight: var(--fw-bold); text-align: center; line-height: 20px; }
.side-foot { margin-top: auto; padding: var(--sp-3); border-radius: var(--r-md); background: var(--gradient-brand-soft); border: 1px solid var(--border); font-size: var(--fs-caption); color: var(--text-2); }
.side-foot strong { display: block; color: var(--text); margin-bottom: 2px; }

/* ---------- Main ---------- */
.dash-main { display: flex; flex-direction: column; min-width: 0; }
.dash-topbar {
  position: sticky; top: var(--demo-bar-h);
  z-index: 30;
  display: flex; align-items: center; gap: var(--sp-3);
  height: 64px;
  padding: 0 var(--sp-6);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.dash-topbar .dash-search { flex: 1; max-width: 420px; }
.dash-topbar .dash-search .input { min-height: 40px; border-radius: var(--r-pill); background: var(--surface-muted); border-color: transparent; }
.dash-menu-btn { display: none; }
.notif-dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--bg-elev); }
.profile-btn { display: inline-flex; align-items: center; gap: .55rem; padding: 4px 10px 4px 4px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--bg-elev); }
.profile-btn .avatar { --av: 30px; }
.profile-btn span { font-weight: var(--fw-semibold); font-size: var(--fs-small); }

.dash-content { padding: var(--sp-6); display: grid; gap: var(--sp-6); align-content: start; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.page-head h1 { font-size: 1.6rem; margin: 0; }
.page-head p { margin: .2rem 0 0; color: var(--text-3); }

.panel { border-radius: var(--r-lg); min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.panel-head h2, .panel-head h3 { font-size: 1rem; margin: 0; }
.panel-body { padding: var(--sp-5); }
.panel-body.flush { padding: 0; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4); }
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-5); }
.col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-12 { grid-column: 1 / -1; }

/* Toolbar */
.toolbar { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.toolbar .input-group { flex: 1; min-width: 200px; max-width: 360px; }
.toolbar .select { width: auto; min-width: 150px; }
.toolbar .input, .toolbar .select { min-height: 40px; }

/* Lists */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: var(--sp-3); padding: .7rem var(--sp-5); border-bottom: 1px solid var(--border); }
.list li:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .grow strong { display: block; color: var(--text); font-weight: var(--fw-semibold); }
.list .grow small { color: var(--text-3); }
.activity-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(var(--brand-primary-rgb), .12); color: var(--brand-primary); }
.activity-ico svg { width: 16px; height: 16px; }
.activity-ico.t-create { background: var(--success-bg); color: var(--success); }
.activity-ico.t-delete { background: var(--danger-bg); color: var(--danger); }
.activity-ico.t-update { background: var(--info-bg); color: var(--info); }

/* Quick actions */
.quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.quick-actions button { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-elev); font-weight: var(--fw-semibold); font-size: var(--fs-small); text-align: left; transition: transform var(--dur), box-shadow var(--dur); }
.quick-actions button:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.quick-actions .icon-3d { --size: 34px; }

/* Pipeline summary */
.pipe-summary { display: grid; gap: .7rem; }
.pipe-row { display: grid; grid-template-columns: 110px 1fr auto; gap: var(--sp-3); align-items: center; font-size: var(--fs-small); }
.pipe-row .progress { height: 10px; }

/* ---------- Kanban ---------- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: var(--sp-4); overflow-x: auto; padding: var(--sp-5); scroll-snap-type: x proximity; }
.kanban-col { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-muted); border: 1px dashed transparent; min-height: 240px; scroll-snap-align: start; transition: border-color var(--dur), background var(--dur); }
.kanban-col.is-over { border-color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), .07); }
.kanban-col header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 0 var(--sp-1); }
.kanban-col header strong { font-size: var(--fs-small); }
.kanban-col header small { color: var(--text-3); font-variant-numeric: tabular-nums; }
.kanban-card { padding: var(--sp-3); border-radius: var(--r-sm); background: var(--bg-elev); border: 1px solid var(--border); box-shadow: var(--shadow-1); cursor: grab; display: grid; gap: .4rem; transition: transform var(--dur-fast), box-shadow var(--dur); }
.kanban-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.kanban-card.is-dragging { opacity: .5; transform: rotate(2deg); }
.kanban-card strong { font-size: var(--fs-small); color: var(--text); }
.kanban-card small { color: var(--text-3); }
.kanban-card .row-between { font-size: var(--fs-caption); }
.kanban-card .select { min-height: 30px; padding: .15rem 1.8rem .15rem .5rem; font-size: .78rem; }

/* ---------- Notifications ---------- */
.notif-item { display: flex; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); align-items: flex-start; }
.notif-item.unread { background: rgba(var(--brand-primary-rgb), .05); }
.notif-item.unread .notif-title::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-primary); margin-left: .5rem; vertical-align: middle; }
.notif-item .grow { flex: 1; min-width: 0; }
.notif-title { font-weight: var(--fw-semibold); color: var(--text); }
.notif-item p { margin: .1rem 0; font-size: var(--fs-small); }
.notif-pop { width: min(360px, calc(100vw - 2rem)); padding: 0; }
.notif-pop .notif-item { padding: var(--sp-3) var(--sp-4); }
.notif-pop header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.notif-pop .notif-scroll { max-height: 340px; overflow-y: auto; }

/* ---------- Settings ---------- */
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.settings-nav { display: grid; gap: 2px; position: sticky; top: calc(var(--demo-bar-h) + 80px); }
.settings-nav button { text-align: left; padding: .6rem .8rem; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); font-weight: var(--fw-medium); }
.settings-nav button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.settings-section { display: grid; gap: var(--sp-5); }
.danger-zone { border: 1px solid rgba(220, 38, 38, .35); }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.setting-row:last-child { border-bottom: 0; }
.setting-row p { margin: 0; font-size: var(--fs-small); color: var(--text-3); }
.setting-row strong { color: var(--text); }

/* ---------- Detail view ---------- */
.detail-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.detail-head .media-tile, .detail-head .media-img { width: 72px; aspect-ratio: 1; border-radius: var(--r-md); }
.detail-head h3 { margin: 0; }
.timeline { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: 0; }
.timeline li { position: relative; padding: 0 0 var(--sp-4) var(--sp-6); font-size: var(--fs-small); color: var(--text-3); }
.timeline li::before { content: ""; position: absolute; left: 5px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.timeline li::after { content: ""; position: absolute; left: 9.5px; top: 18px; bottom: 0; width: 1px; background: var(--border-strong); }
.timeline li:last-child::after { display: none; }
.timeline li.done { color: var(--text); }
.timeline li.done::before { background: var(--success); box-shadow: 0 0 0 4px var(--success-bg); }
.timeline li.current::before { background: var(--brand-primary); box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), .2); }
.timeline li.cancelled::before { background: var(--danger); }

/* ---------- Login ---------- */
.login-wrap { min-height: calc(100vh - var(--demo-bar-h)); display: grid; grid-template-columns: 1fr 1fr; }
.login-art { position: relative; display: flex; flex-direction: column; justify-content: center; padding: var(--sp-12); overflow: hidden; }
.login-art .scene { height: 360px; }
.login-panel { display: grid; place-items: center; padding: var(--sp-8) var(--gutter); }
.login-card { width: min(420px, 100%); padding: var(--sp-8); border-radius: var(--r-xl); }
.login-card h1 { font-size: 1.6rem; }
.demo-cred { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--info-bg); font-size: var(--fs-small); margin-bottom: var(--sp-5); }
.demo-cred code { font-family: var(--font-mono); font-weight: 700; color: var(--text); }

.sidebar-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(5, 10, 22, .45); }