/* =============================================
   PAGES
   Styles scoped to a specific page that aren't reusable elsewhere.
   Includes: login, register, reset password, dashboard-specific overrides.
   If it only makes sense on one particular page, it belongs here.
   ============================================= */
#settings-page { background-color: rgba(230, 230, 230, 0.3); }
#settings-page::before { content: ""; position: fixed; inset: 0; background: url(/static/img/dev-4.0_bkgrd.jpg); transform: rotateX(180deg);
   background-color: lightgray; background-position: top; background-size: cover; background-blend-mode: luminosity; }

/* Auth page headings & text */
#login-container h1, #signup-container h1, #reset-container h1 { font-size: 2.0rem; }
#login-container p, #signup-container p { font-size: 1.4rem; margin-top: 10px; margin-bottom: 0; }

/* Forgot password & reset links */
#forgot-password, #switch-to-login-from-reset { margin-top: 5px; color: var(--secondp); cursor: pointer; text-decoration: none; }

/* Login form layout */
#login-form { display: flex; flex-direction: column; }
#login-form div { display: flex; margin-bottom: 10px; width: 100%; }
#login-form label { display: inline-block; width: 100px; text-align: right; margin-right: 10px; }
#login-form input { display: inline-block; width: 100%; box-sizing: border-box; }
#login-form button, #signup-form button { display: block; width: auto; box-sizing: border-box; }

/* Auth container */
.auth-container { padding: 20px 45px; border: 1px solid rgba(186, 186, 186, 0.02); border-radius: 12px; }
.auth-container h1 { font-family: var(--head); font-weight: 400; font-size: 2.0rem; }

/* Auth form actions */
.btn-wrap { margin-bottom: 40px; text-align: right; }
.switch-form { display: inline-block; color: var(--purp700); cursor: pointer; text-decoration: none; }

/* Projects */
.projects-empty-state { display:flex; align-items:center; justify-content:center; min-height:60vh; }
.projects-empty-inner { text-align:center; max-width:400px; }
.projects-empty-graphic { margin:30px auto 10px; opacity:0.85; }
.projects-empty-label { font-family:var(--head); font-size:1.8rem; font-weight:700; color:var(--secondm); margin:8px 0 4px; }

/* ── CREATE PROJECT PAGE (/projects/create) ──────────────────────────────── */
.create-project { min-height: calc(100vh - 130px); display: flex; flex-direction: column; }

/* Sticky header bar — breadcrumb + action buttons */
.create-project__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 16px; border-bottom: 1px solid var(--purp200); margin-bottom: 0; position: sticky; top: 0; backdrop-filter: blur(6px); z-index: 10; }
.create-project__breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--head); font-size: 1.4rem; }
.create-project__back-link { color: var(--neut300); text-decoration: none; }
.create-project__back-link:hover { color: var(--purp500); }
.create-project__breadcrumb-sep { color: var(--neut200); }
.create-project__breadcrumb-current { color: var(--neut400); font-weight: 700; }
.create-project__step-label { color: var(--neut200); font-size: 1.2rem; margin-left: 4px; }
.create-project__header-actions { display: flex; gap: 8px; }

/* Scrollable body below the header */
.create-project__body { flex: 1; padding: 0; }

/* Horizontal divider between sections */
.create-project__divider { border: none; border-top: 1px solid var(--purp200); margin: 0; }

/* Two-column section layout: left label, right fields */
.create-project__section { display: grid; grid-template-columns: 220px 1fr; gap: 40px; padding: 32px 0; align-items: start; }
.create-project__section-title { font-family: var(--head); font-size: 1.4rem; font-weight: 700; color: var(--neut400); margin: 0 0 6px; }
.create-project__section-desc { font-size: 1.2rem; line-height: 1.6; margin: 0; }
.create-project__section-fields { max-width: 520px; }

/* Field labels */
.create-project__label { display: block; font-size: 1.3rem; font-weight: 600; color: var(--neut400); margin-bottom: 6px; }
.create-project__hint { display: inline-block; font-size: 1.1rem; font-weight: 400; color: var(--neut300); margin-left: 6px; }

/* Multi-select */
.create-project__multiselect { height: 120px; }

/* Chip inputs */
.create-project__chips { width: 100%; box-sizing: border-box; border: 1px solid #e5e5e5; border-radius: 4px; padding:10px; background-color: #fff; }
.create-project__chips .feed-chip-text-input { min-width: 140px; }

/* Disabled button */
.create-project__header-actions .uk-button:disabled { opacity: 0.45; cursor: not-allowed; }


/* ── GLOBAL OVERVIEW DASHBOARD ───────────────────────────────────────────────
   All classes prefixed db- (dashboard) to avoid collisions with ob- classes.
   Add these to pages.css (they're dashboard-page-specific).
   ─────────────────────────────────────────────────────────────────────────── */

/* Page wrapper */
.db-wrap{ display:flex; flex-direction:column; gap:1.5rem; }

/* Section label row */
.db-section:first-of-type{ display:flex; flex-direction:column; gap:0.75rem; margin: 40px 0 0 0; }
.db-section{ display:flex; flex-direction:column; gap:0.75rem; margin: 0 0 0 0; }
.db-section__label{ font-size: 1.8rem; margin: 40px 0 0 0; font-family: var(--head); font-weight: 400; color: var(--neut300); text-transform: uppercase; }

/* ── PROJECT STRIP ─────────────────────────────────────────────────────────── */
/* .db-project-strip{ display:flex; flex-direction:row; gap:1.25rem; overflow-x:auto; padding-bottom:0.5rem; } */
.db-project-strip--loading{ pointer-events:none; }
/* UIkit ships uk-child-width-1-1 only as @s/@m/@l/@xl variants, not unsuffixed —
   this fills the gap so cards stack full-width below the @s breakpoint (640px). */
@media (max-width: 639px) {
  .db-project-strip.uk-grid > * { width:100%; }
}

/* Grid cell — the actual uk-grid child. Deliberately has no padding/border/
   background of its own: UIkit sets padding-left on this element for the
   grid gutter (via .uk-grid-large > *), and if .db-project-card's own
   padding shorthand lived here too it would clobber that gutter value and
   shift the whole row left (was causing the card overlap). Keep all visual
   styling on the inner .db-project-card instead. */
.db-project-cell{ display:block; height:100%; cursor:pointer; text-decoration:none; }
.db-project-cell:hover{ text-decoration:none; }

/* Individual project card */
.db-project-card{ display:flex; flex-direction:column; gap:0.5rem; height:100%; min-height: 100px; box-sizing:border-box; background:rgba(253,253,253,0.5); border:1px solid rgba(255,255,255,0.5); border-radius:12px; padding:1.25rem 1.5rem; /* min-width:200px; max-width:240px; flex-shrink:0; */ text-decoration:none; color:var(--neut300); transition:border-color 0.15s, box-shadow 0.15s; cursor:pointer; }
.db-project-card:hover{ border-color:var(--purp300); box-shadow:0 2px 12px rgba(89,71,178,0.12); text-decoration:none; color:var(--neut400); }

/* Add project card variant */
.db-project-card--add{ align-items:center; justify-content:center; border-style:dashed; border-color:var(--purp200); background:transparent; color:var(--purp400); gap:0.4rem; }
.db-project-card--add:hover{ border-color:var(--purp400); color:var(--purp600); }
.db-project-card__add-icon{ display:flex; }
.db-project-card__add-label{ font-size:1.2rem; font-weight:600; text-align:center; }

/* Skeleton loading card */
.db-project-card--skeleton{ pointer-events:none; gap:0.75rem; }
.db-skel{ background:var(--purp200); border-radius:4px; animation:db-pulse 1.4s ease-in-out infinite; }
.db-skel--title{ height:14px; width:70%; }
.db-skel--meta{ height:11px; width:50%; }
.db-skel--count{ height:24px; width:40%; }
@keyframes db-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }

/* Card header: status dot + name */
.db-project-card__header{ display:flex; align-items:center; gap:0.5rem; }
.db-project-card__name{ font-family:var(--head); font-size:1.3rem; font-weight:700; color:var(--neut300); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Status dot */
.db-status-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.db-status--active{ background:var(--teal); }
.db-status--inactive{ background:var(--neut200); }
.db-status--default{ background:var(--neut200); }

/* Record count */
.db-project-card__count{ display:flex; align-items:baseline; gap:0.35rem; }
.db-project-card__count-num{ font-family:var(--head); font-size: 2.4rem; font-weight:700; color:var(--purp500); line-height:1; }
.db-project-card__count-label{ font-size:1.2rem; color:var(--purp800); font-weight: 400; }

/* Last activity meta */
.db-project-card__meta{ font-size:1.1rem; color:var(--neut300); margin-top:auto; }

/* Empty note (error/no projects state) */
.db-empty-note{ font-size:1.2rem; color:var(--neut200); padding:1.5rem 0; }
.db-empty-note a{ color:var(--purp500); text-decoration:none; }
.db-empty-note a:hover{ text-decoration:underline; }

/* ── TEAM PULSE ────────────────────────────────────────────────────────────── */
.db-team-card{ display:flex; flex-direction:column; }
.db-team-body{ height:auto!important; display:flex; flex-direction:column; gap:1rem; }
.db-team-loading{ display:flex; align-items:center; justify-content:center; padding:1.5rem 0; }
.db-team-stats{ display:flex; flex-direction:row; gap:2rem; }
.db-team-stat{ display:flex; flex-direction:column; gap:0.25rem; }
.db-team-stat__number{ font-family:var(--head); font-size:2.4rem; font-weight:700; color:var(--neut400); line-height:1; }
.db-team-stat__number--active{ color:var(--purp500); }
.db-team-stat__label, .db-coverage-stat__label { font-size:1.1rem; color:var(--neut300); }
.db-team-link{ font-size:1.2rem; font-weight:600; color:var(--purp500); text-decoration:none; margin-top:0.5rem; }
.db-team-link:hover{ color:var(--purp700); text-decoration:underline; }

/* ── QUICK ACTIONS ─────────────────────────────────────────────────────────── */
.db-actions-card{ display:flex; flex-direction:column; }
.db-actions-body{ height:auto!important; display:flex; flex-direction:row; gap:0.75rem; flex-wrap:wrap; align-items:flex-start; padding-top:0.25rem; }
.db-action-btn{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.6rem 1.1rem; border-radius:8px; background:var(--purp200); color:var(--purp700); font-size:1.2rem; font-weight:600; text-decoration:none; transition:background 0.15s, color 0.15s; }
.db-action-btn:hover{ background:var(--purp300); color:var(--purp800); text-decoration:none; }
.db-actions-body--tiles{ display:flex; flex-direction:row; gap:12px; flex-wrap:wrap; padding-top:0.5rem; }
.db-action-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; flex:1; min-width:80px; padding:1.4rem 1rem; border-radius:12px; background:var(--purp100,#f3f0ff); color:var(--purp500); text-decoration:none; transition:background 0.15s; }
.db-action-tile:hover{ background:var(--purp200); text-decoration:none; }
.db-action-tile__icon{ color:var(--purp400); }
.db-action-tile__label{ font-size:1.1rem; font-weight:600; color:var(--purp600); text-align:center; }
.filters-section-badge{ display:inline-flex; align-items:center; justify-content:center; background:var(--purp500); color:#fff; border-radius:10px; font-size:1rem; font-weight:700; min-width:18px; height:18px; padding:0 5px; margin-left:auto; margin-right:6px; }
.project-row--selected td{ background:rgba(89,71,178,0.05); }

/* ── COVERAGE CARD ──────────────────────────────────────────────────────────── */
.db-coverage-card{ display:flex; flex-direction:column; }
.db-coverage-body{ height:auto!important; display:flex; flex-direction:column; gap:1rem; }
.db-coverage-stat{ display:flex; flex-direction:column; gap:0.25rem; }
.db-coverage-stat__number{ font-family:var(--head); font-size:2.4rem; font-weight:700; color:var(--purp500); line-height:1; }
.db-coverage-loading{ display:flex; align-items:center; justify-content:center; padding:1.5rem 0; }

/* ── COVERAGE SETTINGS SUMMARY (read-only Languages/Sectors/Focus Areas) ───── */
.db-coverage-settings-card{ display:flex; flex-direction:column; }
.db-coverage-settings-body{ height:auto!important; display:flex; flex-direction:column; gap:0.5rem; min-height:2.4rem; justify-content:center; }
.db-coverage-settings-custom{ display:flex; flex-direction:column; }
.db-coverage-settings-custom-body{ height:auto!important; }
.db-coverage-settings-custom-msg{ font-size:1.3rem; color:var(--neut300); margin:0; }


/* ── COVERAGE ACTIVITY CHART ────────────────────────────────────────────────── */
.db-chart-wrap{ position:relative; height:240px; width:100%; }
.db-chart-wrap canvas{ position:absolute; top:0; left:0; width:100%!important; height:100%!important; }
.db-chart-card{ display:flex; flex-direction:column; }
.db-chart-body{ height:auto!important; display:flex; flex-direction:column; gap:0.75rem; }
.db-chart-loading{ display:flex; align-items:center; justify-content:center; padding:3rem 0; }
.db-chart-empty{ font-size:1.2rem; color:var(--neut200); text-align:center; padding:3rem 0; }
.db-chart-wrap{ width:100%; overflow:hidden; }
.db-chart-svg{ width:100%; display:block; }
.db-chart-bar{ fill:var(--purp400); transition:fill 0.15s; cursor:default; }
.db-chart-bar:hover{ fill:var(--purp600); }
.db-chart-label{ font-family:var(--body); font-size:9px; fill:var(--neut200); text-anchor:middle; }
.db-chart-axis{ stroke:var(--purp200); stroke-width:1; }
.db-chart-gridline{ stroke:var(--purp200); stroke-width:0.5; stroke-dasharray:3,3; }
.db-chart-peak{ font-family:var(--head); font-size:9px; fill:var(--purp600); text-anchor:middle; }