/* ============================================================
 *  NOSCO PORTAL THEME — YunoHost 12 Custom CSS
 *  Atlantic Design Language
 *
 *  Apply via: YunoHost Admin → Domains → nosco.one → Features
 *             → Custom CSS stylesheet
 *
 *  Version: 3.5 — July 2026
 *  Changes from 3.0:
 *  - Randomized background selection (not sequential)
 *  - Login background ONLY on login page (not throughout portal)
 *  - Theme switcher replaces logout button (WCAG AA compliant)
 *  - Theme preference stored in persistent cookie (default: light)
 *  - Proper paths: /yunohost/sso/customassets/login-backgrounds/
 *  - Login page: floating card container + slightly narrowed, centered
 *    login button (was full-width via .btn-block)
 *  - Logout button vertically centered in header, natural width
 *  - Removed global 100% width on .btn-primary (stretched header/search
 *    buttons)
 *  ============================================================ */

/* === SELF-HOSTED FONTS (from /usr/share/yunohost/admin/fonts) === */

/* Registered for approved, mapped glyphs only; no external icon library. */
@font-face {
    font-family: 'Nosco One Icons';
    font-weight: 400;
    font-style: normal;
    font-display: block;
    src: url('/yunohost/admin/fonts/nosco-one-icons-regular.woff2') format('woff2');
}

/* Locally bundled Dashicons-compatible glyphs. Use only with aria-hidden="true"
 * and an adjacent accessible label; do not replace the custom SVG theme toggle. */
.nosco-icon {
    display: inline-block;
    font-family: 'Nosco One Icons' !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    line-height: 1;
    speak: never;
    text-transform: none;
}
.nosco-icon::before { display: block; }
.nosco-icon--appearance::before { content: "\f100"; }
.nosco-icon--comments::before { content: "\f101"; }
.nosco-icon--home::before { content: "\f102"; }
.nosco-icon--settings::before { content: "\f108"; }
.nosco-icon--users::before { content: "\f110"; }
.nosco-icon--add::before { content: "\f132"; }
.nosco-icon--arrow-right::before { content: "\f139"; }
.nosco-icon--arrow-left::before { content: "\f141"; }
.nosco-icon--arrow-up::before { content: "\f142"; }
.nosco-icon--arrow-down::before { content: "\f140"; }
.nosco-icon--search::before { content: "\f179"; }
.nosco-icon--lock::before { content: "\f160"; }
.nosco-icon--unlock::before { content: "\f528"; }
.nosco-icon--info::before { content: "\f348"; }
.nosco-icon--warning::before { content: "\f534"; }
.nosco-icon--menu::before { content: "\f333"; }
.nosco-icon--email::before { content: "\f465"; }
.nosco-icon--calendar::before { content: "\f145"; }
.nosco-icon--clock::before { content: "\f469"; }
.nosco-icon--document::before { content: "\f497"; }
.nosco-icon--download::before { content: "\f316"; }
.nosco-icon--upload::before { content: "\f317"; }
.nosco-icon--external::before { content: "\f504"; }
.nosco-icon--visible::before { content: "\f177"; }
.nosco-icon--hidden::before { content: "\f530"; }

@font-face {
    font-family: 'Nunito';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/yunohost/admin/fonts/nunito-regular.woff2') format('woff2'),
    url('/yunohost/admin/fonts/Nunito-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Nunito';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('/yunohost/admin/fonts/nunito-semibold.woff2') format('woff2'),
    url('/yunohost/admin/fonts/Nunito-SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'Nunito';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('/yunohost/admin/fonts/nunito-bold.woff2') format('woff2'),
    url('/yunohost/admin/fonts/Nunito-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Nunito';
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url('/yunohost/admin/fonts/nunito-extrabold.woff2') format('woff2'),
    url('/yunohost/admin/fonts/Nunito-ExtraBold.woff') format('woff');
}
@font-face {
    font-family: 'Outfit';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('/yunohost/admin/fonts/outfit-light.woff2') format('woff2'),
    url('/yunohost/admin/fonts/outfit-light.ttf') format('truetype');
}
@font-face {
    font-family: 'Outfit';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/yunohost/admin/fonts/outfit-regular.woff2') format('woff2'),
    url('/yunohost/admin/fonts/outfit-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Outfit';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('/yunohost/admin/fonts/outfit-medium.woff2') format('woff2'),
    url('/yunohost/admin/fonts/outfit-medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Outfit';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('/yunohost/admin/fonts/outfit-semibold.woff2') format('woff2'),
    url('/yunohost/admin/fonts/outfit-semibold.ttf') format('truetype');
}
@font-face {
    font-family: 'Outfit';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('/yunohost/admin/fonts/outfit-bold.woff2') format('woff2'),
    url('/yunohost/admin/fonts/outfit-bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Outfit';
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url('/yunohost/admin/fonts/outfit-extrabold.woff2') format('woff2'),
    url('/yunohost/admin/fonts/outfit-extrabold.ttf') format('truetype');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/yunohost/admin/fonts/plus-jakarta-sans-regular.woff2') format('woff2'),
    url('/yunohost/admin/fonts/PlusJakartaSans-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('/yunohost/admin/fonts/plus-jakarta-sans-medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('/yunohost/admin/fonts/plus-jakarta-sans-semibold.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('/yunohost/admin/fonts/plus-jakarta-sans-bold.woff2') format('woff2');
}

/* === DESIGN TOKENS === */
:root {
    --nosco-boreal-0: #0F1A22;
    --nosco-boreal-1: #1A2832;
    --nosco-boreal-2: #243440;
    --nosco-boreal-3: #2E4050;
    --nosco-shore-0: #FDFBF7;
    --nosco-shore-1: #F8F6F2;
    --nosco-shore-2: #F0EBE5;
    --nosco-shore-3: #E0D8D0;
    --nosco-atlantic-0: #1A3548;
    --nosco-atlantic-1: #2B577D;
    --nosco-atlantic-2: #4A7A9C;
    --nosco-atlantic-3: #6A9ABC;
    --nosco-warmth-0: #C97B4A;
    --nosco-warmth-1: #D4885C;
    --nosco-warmth-2: #E49A6E;
    --nosco-warmth-3: #EAA853;
    --nosco-granite-0: #2A3640;
    --nosco-granite-1: #3C4A56;
    --nosco-granite-2: #4E5C68;
    --nosco-granite-3: #5C6A76;

    --nosco-font-display: 'Nunito', system-ui, sans-serif;
    --nosco-font-ui: 'Outfit', system-ui, sans-serif;
    --nosco-font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

    --nosco-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --nosco-duration: 200ms;
}

/* === OVERRIDE DAISYUI THEME COLORS (to match Atlantic) === */
:root,
[data-theme="light"],
[data-theme="system"] {
    --p: 43 87 125;
    --pf: 26 53 72;
    --pc: 255 255 255;
    --s: 201 123 74;
    --sf: 180 100 50;
    --sc: 255 255 255;
    --a: 74 122 156;
    --ac: 255 255 255;
    --n: 26 40 48;
    --nf: 15 26 34;
    --nc: 248 246 242;
    --b1: 248 246 242;
    --b2: 240 235 229;
    --b3: 224 216 208;
    --bc: 15 26 34;
    --in: 74 122 156;
    --su: 80 150 100;
    --wa: 201 123 74;
    --er: 180 60 60;
    --rounded-box: 0.75rem;
    --rounded-btn: 0.5rem;
    --rounded-badge: 0.5rem;
}

/* ============================================================
 *  1. GLOBAL TYPOGRAPHY & BACKGROUND
 *  ============================================================ */

body,
#app,
.portal-page {
    font-family: var(--nosco-font-body) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--nosco-shore-1) !important;
    color: var(--nosco-granite-0) !important;
}

h1, h2, h3, .title, .card-title {
    font-family: var(--nosco-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: var(--nosco-atlantic-1) !important;
}

button,
.btn,
.nav-link,
.form-label,
.alert,
.badge {
    font-family: var(--nosco-font-ui) !important;
}

/* ============================================================
 *  2. LOGIN PAGE — Atlantic card, centered
 *  ============================================================ */

.ynh-login-page,
body.login,
[class*="login-page"] {
    background: var(--nosco-shore-1) !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Always-on background (login + portal) — html covers SSO pages, #app covers portal */
html {
  background-color: transparent !important;
  background-image: var(--login-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
body {
  background-color: transparent !important;
}
#app {
  background-color: transparent !important;
  background-image: var(--login-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.ynh-login-page .card,
body.login .card,
[class*="login-page"] .card {
    position: relative;
    z-index: 1;
}


/* ============================================================
 *  LOGIN BACKGROUNDS — AVIF > WebP > PNG fallback
 *  Light images for light mode, dark images for dark mode
 *  Random selection on page load via JavaScript
 *  
 *  CSS variables in :root are accessed by JavaScript for random selection
 *  Background images applied only on login page via :root selector
 *  ============================================================ */

/* All background variables defined in :root for JavaScript access */
:root {
    /* Light mode backgrounds */
    --login-bg-light-1: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/light/nosco-sunlit-river-bend.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/light/nosco-sunlit-river-bend.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/light/nosco-sunlit-river-bend.png') type('image/png'));
    --login-bg-light-2: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/light/nosco-sunrise-inlet.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/light/nosco-sunrise-inlet.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/light/nosco-sunrise-inlet.png') type('image/png'));
    --login-bg-light-3: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/light/nosco-pale-sunrise-wash.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/light/nosco-pale-sunrise-wash.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/light/nosco-pale-sunrise-wash.png') type('image/png'));
    --login-bg-light-4: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/light/nosco-pale-dunes-sunrise.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/light/nosco-pale-dunes-sunrise.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/light/nosco-pale-dunes-sunrise.png') type('image/png'));
    --login-bg-light-5: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/light/nosco-ivory-dune-sunrise.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/light/nosco-ivory-dune-sunrise.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/light/nosco-ivory-dune-sunrise.png') type('image/png'));
    --login-bg-light-6: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/light/nosco-glowing-river-sunrise.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/light/nosco-glowing-river-sunrise.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/light/nosco-glowing-river-sunrise.png') type('image/png'));
    --login-bg-light-7: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/light/nosco-mirror-lake-dawn.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/light/nosco-mirror-lake-dawn.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/light/nosco-mirror-lake-dawn.png') type('image/png'));
    --login-bg-light-8: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/light/nosco-layered-dawn-estuary.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/light/nosco-layered-dawn-estuary.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/light/nosco-layered-dawn-estuary.png') type('image/png'));
    --login-bg-light-9: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/light/nosco-dawn-lake-shore.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/light/nosco-dawn-lake-shore.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/light/nosco-dawn-lake-shore.png') type('image/png'));
    --login-bg-light-10: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/light/nosco-crystal-harbor-dawn.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/light/nosco-crystal-harbor-dawn.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/light/nosco-crystal-harbor-dawn.png') type('image/png'));
    --login-bg-light-11: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/light/nosco-sunlit-fjord-inlet.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/light/nosco-sunlit-fjord-inlet.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/light/nosco-sunlit-fjord-inlet.png') type('image/png'));
    --login-bg-light-12: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/light/nosco-sunlit-coast-harbor.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/light/nosco-sunlit-coast-harbor.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/light/nosco-sunlit-coast-harbor.png') type('image/png'));
    --login-bg-light-13: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/light/nosco-white-atrium-mist.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/light/nosco-white-atrium-mist.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/light/nosco-white-atrium-mist.png') type('image/png'));
    --login-bg-light-14: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/light/nosco-silver-reflection-bay.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/light/nosco-silver-reflection-bay.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/light/nosco-silver-reflection-bay.png') type('image/png'));
    --login-bg-light-15: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/light/nosco-geometric-tide-flats.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/light/nosco-geometric-tide-flats.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/light/nosco-geometric-tide-flats.png') type('image/png'));
    --login-bg-light-16: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/light/nosco-amber-tidal-headland.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/light/nosco-amber-tidal-headland.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/light/nosco-amber-tidal-headland.png') type('image/png'));
    --login-bg-light-17: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/light/nosco-halo-lake-reflection.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/light/nosco-halo-lake-reflection.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/light/nosco-halo-lake-reflection.png') type('image/png'));
    /* Dark mode backgrounds */
    --login-bg-dark-1: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-twilight-lake-glow.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-twilight-lake-glow.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-twilight-lake-glow.png') type('image/png'));
    --login-bg-dark-2: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-moonlit-lighthouse-coast.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-moonlit-lighthouse-coast.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-moonlit-lighthouse-coast.png') type('image/png'));
    --login-bg-dark-3: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-midnight-path-archipelago.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-midnight-path-archipelago.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-midnight-path-archipelago.png') type('image/png'));
    --login-bg-dark-4: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-starlit-coast-dunes.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-starlit-coast-dunes.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-starlit-coast-dunes.png') type('image/png'));
    --login-bg-dark-5: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-monolith-night-lagoon.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-monolith-night-lagoon.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-monolith-night-lagoon.png') type('image/png'));
    --login-bg-dark-6: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-moonlit-river-valley.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-moonlit-river-valley.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-moonlit-river-valley.png') type('image/png'));
    --login-bg-dark-7: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-stone-shore-lighthouse.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-stone-shore-lighthouse.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-stone-shore-lighthouse.png') type('image/png'));
    --login-bg-dark-8: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-slate-lagoon-lighthouse.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-slate-lagoon-lighthouse.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-slate-lagoon-lighthouse.png') type('image/png'));
    --login-bg-dark-9: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-slate-harbor-mist.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-slate-harbor-mist.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-slate-harbor-mist.png') type('image/png'));
    --login-bg-dark-10: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-shadow-dune-coast.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-shadow-dune-coast.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-shadow-dune-coast.png') type('image/png'));
    --login-bg-dark-11: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-midnight-ember-shore.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-midnight-ember-shore.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-midnight-ember-shore.png') type('image/png'));
    --login-bg-dark-12: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-velvet-dusk-dunes.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-velvet-dusk-dunes.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-velvet-dusk-dunes.png') type('image/png'));
    --login-bg-dark-13: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-storm-ember-valley.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-storm-ember-valley.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-storm-ember-valley.png') type('image/png'));
    --login-bg-dark-14: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-obsidian-tide-cavern.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-obsidian-tide-cavern.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-obsidian-tide-cavern.png') type('image/png'));
    --login-bg-dark-15: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-deep-space-vortex.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-deep-space-vortex.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-deep-space-vortex.png') type('image/png'));
    --login-bg-dark-16: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-marble-tide-blue.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-marble-tide-blue.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-marble-tide-blue.png') type('image/png'));
    --login-bg-dark-17: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-beacon-night-fjord.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-beacon-night-fjord.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-beacon-night-fjord.png') type('image/png'));
    --login-bg-dark-18: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-mist-layer-lake.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-mist-layer-lake.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-mist-layer-lake.png') type('image/png'));
    --login-bg-dark-19: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-seaglass-constellation-lighthouse.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-seaglass-constellation-lighthouse.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-seaglass-constellation-lighthouse.png') type('image/png'));
    --login-bg-dark-20: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-aurora-basin.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-aurora-basin.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-aurora-basin.png') type('image/png'));
    --login-bg-dark-21: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-aurora-cove.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-aurora-cove.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-aurora-cove.png') type('image/png'));
    --login-bg-dark-22: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-aurora-curtain-basin.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-aurora-curtain-basin.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-aurora-curtain-basin.png') type('image/png'));
    --login-bg-dark-23: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-amber-dune-twilight.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-amber-dune-twilight.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-amber-dune-twilight.png') type('image/png'));
    --login-bg-dark-24: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-coral-dusk-reef.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-coral-dusk-reef.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-coral-dusk-reef.png') type('image/png'));
    --login-bg-dark-25: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-luminous-cove-dusk.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-luminous-cove-dusk.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-luminous-cove-dusk.png') type('image/png'));
    --login-bg-dark-26: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-lightning-river-canyon.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-lightning-river-canyon.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-lightning-river-canyon.png') type('image/png'));
    --login-bg-dark-27: image-set(url('/yunohost/sso/customassets/login-backgrounds/AVIF/dark/nosco-celestial-mechanism-sea.avif') type('image/avif'), url('/yunohost/sso/customassets/login-backgrounds/WEBP/dark/nosco-celestial-mechanism-sea.webp') type('image/webp'), url('/yunohost/sso/customassets/login-backgrounds/PNG/dark/nosco-celestial-mechanism-sea.png') type('image/png'));
}

/* Default: first light background */
:root {
    --login-bg: var(--login-bg-light-1);
}

[data-theme="dark"] {
    --login-bg: var(--login-bg-dark-1);
}

/* === LOGIN CARD STYLES === */
.card.bg-base-100,
.login-card,
[class*="login-card"] {
    background: var(--nosco-shore-0) !important;
    border: 1px solid var(--nosco-shore-3) !important;
    border-radius: 1rem !important;
    box-shadow: 0 8px 32px rgba(15, 26, 34, 0.06) !important;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 2rem !important;
}

@media (prefers-color-scheme: dark) {
    .card.bg-base-100,
    .login-card,
    [class*="login-card"] {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    }
}

.login-card h2,
.login-card .card-title {
    font-family: var(--nosco-font-display) !important;
    font-weight: 700 !important;
    color: var(--nosco-atlantic-1) !important;
    margin-bottom: 1.5rem !important;
}

/* === FORMS === */
input[type="text"],
input[type="password"],
input[type="email"],
.form-control {
    border-radius: 0.5rem !important;
    border: 1px solid var(--nosco-shore-3) !important;
    font-family: var(--nosco-font-body) !important;
    font-size: 1rem;
    padding: 0.75rem 1rem !important;
    height: auto;
    background: var(--nosco-shore-0);
    transition: border-color var(--nosco-duration) var(--nosco-ease),
    box-shadow var(--nosco-duration) var(--nosco-ease);
    margin-bottom: 1rem;
}

input:focus,
.form-control:focus {
    border-color: var(--nosco-atlantic-2) !important;
    box-shadow: 0 0 0 3px rgba(74, 122, 156, 0.12) !important;
    outline: none !important;
}

/* === BUTTONS === */
/* NOTE: no global `width: 100%` here — it stretched the header logout
   button and join-group buttons. Full width on the login page comes from
   YButton's own `.btn-block`, which we refine further below. */
button[type="submit"],
.btn-primary,
input[type="submit"] {
    background-color: var(--nosco-atlantic-1) !important;
    border-color: var(--nosco-atlantic-1) !important;
    border-radius: 0.5rem !important;
    font-family: var(--nosco-font-ui) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem;
    color: #FFFFFF !important;
    transition: all var(--nosco-duration) var(--nosco-ease) !important;
    box-shadow: none !important;
}

button[type="submit"]:hover,
.btn-primary:hover {
    background-color: var(--nosco-atlantic-0) !important;
    border-color: var(--nosco-atlantic-0) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 16px rgba(43, 87, 125, 0.25) !important;
}

/* === LOGIN PAGE — floating card + refined submit button === */
/* The portal login page renders WITHOUT the layout (no header/footer):
   a bare <main> straight under #__nuxt. Give it the same Atlantic card
   treatment as the admin login so the form doesn't float unframed on the
   background image. */
#__nuxt > main {
    background: var(--nosco-shore-0) !important;
    border: 1px solid var(--nosco-shore-3) !important;
    border-radius: 1rem !important;
    box-shadow: 0 8px 32px rgba(15, 26, 34, 0.12) !important;
    padding: 2.5rem 2rem !important;
}

[data-theme="dark"] #__nuxt > main {
    background: var(--nosco-boreal-1) !important;
    border-color: var(--nosco-boreal-3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

/* The login YButton carries .btn-block (full container width). Pull it in
   slightly and center it — full-width felt too heavy on the narrow card. */
#__nuxt > main .btn.btn-primary.btn-block,
#__nuxt > main button[type="submit"].btn-primary {
    width: 85% !important;
    display: flex !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* === FORGOT PASSWORD / LINKS === */
.login-card a:not(.btn) {
    color: var(--nosco-atlantic-2) !important;
    text-decoration: none;
    font-weight: 500;
    display: block;
    text-align: center;
    margin-top: 0.75rem;
}

.login-card a:not(.btn):hover {
    color: var(--nosco-atlantic-1) !important;
    text-decoration: underline;
}

/* ============================================================
 *  3. APP TILE GRID (logged‑in portal)
 *  ============================================================ */

.app-tile,
[class*="app-tile"],
.card.hoverable {
    border-radius: 0.75rem !important;
    border: 1px solid var(--nosco-shore-3) !important;
    background: var(--nosco-shore-0) !important;
    transition: all var(--nosco-duration) var(--nosco-ease) !important;
}

.app-tile:hover,
[class*="app-tile"]:hover {
    border-color: var(--nosco-atlantic-2) !important;
    box-shadow: 0 4px 16px rgba(43, 87, 125, 0.1) !important;
    transform: translateY(-2px);
}

.app-tile .label,
.app-tile .app-name,
[class*="app-tile"] p {
    font-family: var(--nosco-font-ui) !important;
    font-weight: 500 !important;
    color: var(--nosco-granite-0) !important;
}

/* ============================================================
 *  4. NAVIGATION & HEADER
 *  ============================================================ */

.navbar,
[class*="navbar"],
header {
    background: var(--nosco-shore-1) !important;
    border: 1px solid var(--nosco-shore-3) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(15, 26, 34, 0.04) !important;
}

.dropdown-content,
[class*="dropdown"] .menu {
    background: var(--nosco-shore-0) !important;
    border: 1px solid var(--nosco-shore-3) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 8px 24px rgba(15, 26, 34, 0.08) !important;
}

/* ============================================================
 *  5. THEME SWITCHER (replaces logout button)
 *  ============================================================ */

.theme-switcher {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 99999;
}

.theme-switcher button {
    background: var(--nosco-shore-0) !important;
    color: var(--nosco-boreal-0) !important;
    border: 2px solid var(--nosco-atlantic-2) !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    font-family: var(--nosco-font-ui) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    cursor: pointer;
    transition: all var(--nosco-duration) var(--nosco-ease) !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

.theme-switcher button:hover {
    border-color: var(--nosco-atlantic-2) !important;
    box-shadow: 0 4px 16px rgba(74, 122, 156, 0.15) !important;
}

.theme-switcher:hover button,
.theme-switcher:focus-within button {
    transform: scale(1.05);
}

[data-theme="dark"] .theme-switcher button {
    background: var(--nosco-boreal-1) !important;
    border-color: var(--nosco-boreal-3) !important;
    color: var(--nosco-shore-1) !important;
}

[data-theme="dark"] .theme-switcher button:hover {
    border-color: var(--nosco-atlantic-3) !important;
    box-shadow: 0 4px 16px rgba(106, 154, 188, 0.2) !important;
}

/* === ACCESSIBILITY (WCAG AA) === */
.theme-switcher button:focus,
.theme-switcher button:focus-visible {
    outline: 3px solid var(--nosco-atlantic-2) !important;
    outline-offset: 2px !important;
}

[data-theme="dark"] .theme-switcher button:focus,
[data-theme="dark"] .theme-switcher button:focus-visible {
    outline: 3px solid var(--nosco-atlantic-3) !important;
    outline-offset: 2px !important;
}

/* HIDE ORIGINAL LOGOUT BUTTON — admin only, portal uses different structure */
/* Admin logout button selectors (not used in portal) */
/* .btn-primary[aria-label*="log out"],
.btn-primary[aria-label*="Log out"],
button[data-v-d578822b=""][class*="btn-primary"],
.logout-button,
.logout-btn,
#logout-btn,
#logout {
    visibility: hidden;
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
} */

/* ============================================================
 *  6. HIDE YUNOHOST BRANDING
 *  ============================================================ */

footer a[href*="yunohost.org"],
.footer a[href*="yunohost.org"],
[class*="yunohost-logo"],
.footer-yunohost,
[class*="powered-by"] {
    display: none !important;
}
/* Hide Documentation and Support footer links, keep Edit profile + Administration */
footer a[href*="user_guide"],
footer a[href*="help"] {
    display: none !important;
}
/* Footer background for readability */
footer {
    background: var(--nosco-shore-1) !important;
    border-top: 1px solid var(--nosco-shore-3) !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
}
footer a {
    color: var(--nosco-atlantic-1) !important;
    font-weight: 500 !important;
}
footer a:hover {
    color: var(--nosco-atlantic-0) !important;
}

img[src*="logo_dark"],
img[src*="logo_light"],
img[alt="YunoHost logo"] {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

[class*="logo"]:not(:has(img:not([alt="YunoHost logo"])))::before {
    content: "Nosco";
    font-family: var(--nosco-font-display) !important;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--nosco-atlantic-1);
    letter-spacing: -0.02em;
}

/* ============================================================
 *  7. BUTTONS & FORMS (WCAG AA/AAA)
 *  ============================================================ */

.btn-primary {
    color: #FFFFFF !important;
}
.btn-danger {
    color: #FFFFFF !important;
}

/* ============================================================
 *  8. SCROLLBAR
 *  ============================================================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--nosco-shore-3);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--nosco-granite-3);
}

/* ============================================================
 *  9. TOASTS / ALERTS
 *  ============================================================ */

.alert {
    border-radius: 0.75rem !important;
    font-family: var(--nosco-font-ui) !important;
}
.alert-success {
    background-color: rgba(80, 150, 100, 0.1) !important;
    border-color: rgba(80, 150, 100, 0.3) !important;
}
.alert-error {
    background-color: rgba(180, 60, 60, 0.1) !important;
    border-color: rgba(180, 60, 60, 0.3) !important;
}

/* ============================================================
 *  10. SUBTLE PAPER TEXTURE
 *  ============================================================ */

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.015;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: multiply;
}

#app {
    position: relative;
    z-index: 1;
}

/* ============================================================
 *  11. DARK MODE (data-theme toggle + system preference)
 *  ============================================================ */

[data-theme="dark"] body,
[data-theme="dark"] #app,
[data-theme="dark"] .portal-page {
    background-color: var(--nosco-boreal-0) !important;
    color: var(--nosco-shore-1) !important;
}

[data-theme="dark"] .card.bg-base-100,
[data-theme="dark"] .login-card,
[data-theme="dark"] [class*="login-card"],
[data-theme="dark"] .modal-content {
    background: var(--nosco-boreal-1) !important;
    border-color: var(--nosco-boreal-3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .navbar,
[data-theme="dark"] [class*="navbar"],
[data-theme="dark"] header {
    background: var(--nosco-boreal-1) !important;
    border-color: var(--nosco-boreal-3) !important;
}

[data-theme="dark"] .app-tile,
[data-theme="dark"] [class*="app-tile"],
[data-theme="dark"] .card.hoverable {
    background: var(--nosco-boreal-1) !important;
    border-color: var(--nosco-boreal-3) !important;
}
[data-theme="dark"] .app-tile .label,
[data-theme="dark"] .app-tile .app-name,
[data-theme="dark"] [class*="app-tile"] p {
    color: var(--nosco-shore-2) !important;
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] .form-control,
[data-theme="dark"] textarea {
    background: var(--nosco-boreal-2) !important;
    border-color: var(--nosco-boreal-3) !important;
    color: var(--nosco-shore-1) !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--nosco-atlantic-3) !important;
    box-shadow: 0 0 0 3px rgba(106, 154, 188, 0.15) !important;
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] .title, [data-theme="dark"] .card-title {
    color: var(--nosco-atlantic-3) !important;
}

[data-theme="dark"] .dropdown-content,
[data-theme="dark"] [class*="dropdown"] .menu {
    background: var(--nosco-boreal-1) !important;
    border-color: var(--nosco-boreal-3) !important;
}

[data-theme="dark"] .login-card a:not(.btn) {
    color: var(--nosco-atlantic-3) !important;
}
[data-theme="dark"] .login-card a:not(.btn):hover {
    color: var(--nosco-shore-1) !important;
}

[data-theme="dark"] [class*="logo"]:not(:has(img:not([alt="YunoHost logo"])))::before {
    color: var(--nosco-shore-1) !important;
}

[data-theme="dark"] body::before {
    mix-blend-mode: screen;
    opacity: 0.03;
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-danger {
    color: #FFFFFF !important;
}

[data-theme="dark"] .ynh-login-page,
[data-theme="dark"] body.login,
[data-theme="dark"] [class*="login-page"] {
    background: var(--nosco-boreal-0) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--nosco-boreal-3);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--nosco-shore-3);
}

/* System preference fallback (when no data-theme set) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        background-color: var(--nosco-boreal-0) !important;
        color: var(--nosco-shore-1) !important;
    }

    .card.bg-base-100,
    .login-card,
    .modal-content,
    .navbar,
    header {
        background: var(--nosco-boreal-1) !important;
        border-color: var(--nosco-boreal-3) !important;
    }

    #__nuxt > main {
        background: var(--nosco-boreal-1) !important;
        border-color: var(--nosco-boreal-3) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
    }

    .app-tile,
    [class*="app-tile"],
    .card.hoverable {
        background: var(--nosco-boreal-1) !important;
        border-color: var(--nosco-boreal-3) !important;
    }
    .app-tile .label,
    .app-tile .app-name,
    [class*="app-tile"] p {
        color: var(--nosco-shore-2) !important;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    .form-control,
    textarea {
        background: var(--nosco-boreal-2) !important;
        border-color: var(--nosco-boreal-3) !important;
        color: var(--nosco-shore-1) !important;
    }
    input:focus,
    .form-control:focus,
    textarea:focus {
        border-color: var(--nosco-atlantic-3) !important;
        box-shadow: 0 0 0 3px rgba(106, 154, 188, 0.15) !important;
    }

    h1, h2, h3, .title, .card-title {
        color: var(--nosco-atlantic-3) !important;
    }

    .dropdown-content,
    [class*="dropdown"] .menu {
        background: var(--nosco-boreal-1) !important;
        border-color: var(--nosco-boreal-3) !important;
    }

    .login-card a:not(.btn) {
        color: var(--nosco-atlantic-3) !important;
    }
    .login-card a:not(.btn):hover {
        color: var(--nosco-shore-1) !important;
    }

    [class*="logo"]:not(:has(img:not([alt="YunoHost logo"])))::before {
        color: var(--nosco-shore-1) !important;
    }

    body::before {
        mix-blend-mode: screen;
        opacity: 0.03;
    }

    .btn-primary,
    .btn-danger {
        color: #FFFFFF !important;
    }
}

/* ============================================================
 *  12. EDIT PROFILE CARDS + FOOTER
 *  ============================================================ */

/* Edit profile form cards — light mode */
form.flex.flex-col,
form.p-8 {
    background: var(--nosco-shore-0) !important;
    border: 1px solid var(--nosco-shore-3) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 2px 8px rgba(15, 26, 34, 0.04) !important;
}
form.flex.flex-col legend,
form.p-8 legend {
    color: var(--nosco-atlantic-1) !important;
    font-family: var(--nosco-font-display) !important;
    font-weight: 700 !important;
}
form.flex.flex-col label span,
form.p-8 label span {
    color: var(--nosco-granite-1) !important;
    font-family: var(--nosco-font-ui) !important;
}
form.flex.flex-col .input,
form.p-8 .input,
form.flex.flex-col .select,
form.p-8 .select {
    background: var(--nosco-shore-0) !important;
    border-color: var(--nosco-shore-3) !important;
    color: var(--nosco-granite-0) !important;
    border-radius: 0.5rem !important;
}
form.flex.flex-col .input:focus,
form.p-8 .input:focus,
form.flex.flex-col .select:focus,
form.p-8 .select:focus {
    border-color: var(--nosco-atlantic-2) !important;
    box-shadow: 0 0 0 3px rgba(74, 122, 156, 0.12) !important;
}
form.flex.flex-col .btn-success,
form.p-8 .btn-success {
    background-color: var(--nosco-atlantic-1) !important;
    border-color: var(--nosco-atlantic-1) !important;
    color: #FFFFFF !important;
    border-radius: 0.5rem !important;
    font-family: var(--nosco-font-ui) !important;
    font-weight: 600 !important;
}
form.flex.flex-col .btn-success:hover,
form.p-8 .btn-success:hover {
    background-color: var(--nosco-atlantic-0) !important;
}

/* Dark mode — edit profile cards */
[data-theme="dark"] form.flex.flex-col,
[data-theme="dark"] form.p-8 {
    background: var(--nosco-boreal-1) !important;
    border-color: var(--nosco-boreal-3) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}
[data-theme="dark"] form.flex.flex-col legend,
[data-theme="dark"] form.p-8 legend {
    color: var(--nosco-atlantic-3) !important;
}
[data-theme="dark"] form.flex.flex-col label span,
[data-theme="dark"] form.p-8 label span {
    color: var(--nosco-shore-2) !important;
}
[data-theme="dark"] form.flex.flex-col .input,
[data-theme="dark"] form.p-8 .input,
[data-theme="dark"] form.flex.flex-col .select,
[data-theme="dark"] form.p-8 .select {
    background: var(--nosco-boreal-2) !important;
    border-color: var(--nosco-boreal-3) !important;
    color: var(--nosco-shore-0) !important;
}
[data-theme="dark"] form.flex.flex-col .input:focus,
[data-theme="dark"] form.p-8 .input:focus,
[data-theme="dark"] form.flex.flex-col .select:focus,
[data-theme="dark"] form.p-8 .select:focus {
    border-color: var(--nosco-atlantic-3) !important;
    box-shadow: 0 0 0 3px rgba(106, 154, 188, 0.15) !important;
}
[data-theme="dark"] form.flex.flex-col .btn-success,
[data-theme="dark"] form.p-8 .btn-success {
    background-color: var(--nosco-atlantic-2) !important;
    border-color: var(--nosco-atlantic-2) !important;
}
[data-theme="dark"] form.flex.flex-col .btn-success:hover,
[data-theme="dark"] form.p-8 .btn-success:hover {
    background-color: var(--nosco-atlantic-3) !important;
}

/* Dark mode — footer */
[data-theme="dark"] footer {
    background: var(--nosco-boreal-1) !important;
    border-color: var(--nosco-boreal-3) !important;
}
[data-theme="dark"] footer a {
    color: var(--nosco-atlantic-3) !important;
}
[data-theme="dark"] footer a:hover {
    color: var(--nosco-shore-0) !important;
}

/* Dark mode — header */
[data-theme="dark"] header {
    background: var(--nosco-boreal-1) !important;
    border-color: var(--nosco-boreal-3) !important;
}
[data-theme="dark"] header .text-2xl,
[data-theme="dark"] header .profile span {
    color: var(--nosco-shore-0) !important;
}
[data-theme="dark"] header .opacity-50 {
    color: var(--nosco-shore-2) !important;
}
[data-theme="dark"] header .profile-link {
    color: var(--nosco-atlantic-3) !important;
}
[data-theme="dark"] header .btn-primary {
    background-color: var(--nosco-atlantic-2) !important;
    border-color: var(--nosco-atlantic-2) !important;
}
[data-theme="dark"] header .btn-primary:hover {
    background-color: var(--nosco-atlantic-3) !important;
}
/* Logout button — vertically centered in the header, natural width.
   (No more global 100% width on .btn-primary, so it hugs its content;
   align-self keeps it centered against the taller profile text block.) */
header .btn.btn-primary {
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    min-height: 2.5rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
/* Ensure the header row itself keeps children vertically centered */
header .flex.flex-row.items-center {
    align-items: center !important;
}