/* =============================================
   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(--neut200); margin-left: 6px; }

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

/* Chip inputs */
.create-project__chips { width: 100%; box-sizing: border-box; border: 1px solid #e5e5e5; border-radius: 4px; }
.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; }