/*
|--------------------------------------------------------------------------
| BEDEEL DESIGN SYSTEM V1
|--------------------------------------------------------------------------
| Shared visual tokens for Auth, App and Onboarding.
| Public Home header remains visually frozen and does not consume this file yet.
|--------------------------------------------------------------------------
*/

:root {
    color-scheme: dark;

    --bd-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --bd-bg: #0b0d10;
    --bd-bg-elevated: #11151a;
    --bd-bg-soft: #171c22;
    --bd-surface: #12161b;
    --bd-surface-2: #181d23;
    --bd-surface-3: #20262d;

    --bd-text: #f7f8fa;
    --bd-text-muted: #a6adb7;
    --bd-text-soft: #7d8793;

    --bd-border: rgba(255, 255, 255, 0.09);
    --bd-border-strong: rgba(255, 255, 255, 0.16);

    --bd-brand: #ff6b5f;
    --bd-brand-hover: #ff7a70;
    --bd-brand-soft: rgba(255, 107, 95, 0.14);

    --bd-success: #2fcf8f;
    --bd-warning: #f2b84b;
    --bd-danger: #ff5f69;
    --bd-info: #5ca8ff;

    --bd-radius-xs: 6px;
    --bd-radius-sm: 10px;
    --bd-radius-md: 14px;
    --bd-radius-lg: 18px;
    --bd-radius-xl: 24px;
    --bd-radius-pill: 999px;

    --bd-space-1: 4px;
    --bd-space-2: 8px;
    --bd-space-3: 12px;
    --bd-space-4: 16px;
    --bd-space-5: 20px;
    --bd-space-6: 24px;
    --bd-space-7: 32px;
    --bd-space-8: 40px;
    --bd-space-9: 48px;
    --bd-space-10: 64px;

    --bd-font-xs: 12px;
    --bd-font-sm: 13px;
    --bd-font-md: 14px;
    --bd-font-lg: 16px;
    --bd-font-xl: 20px;
    --bd-font-2xl: 24px;
    --bd-font-3xl: 32px;
    --bd-font-4xl: 40px;

    --bd-line-tight: 1.15;
    --bd-line-normal: 1.45;
    --bd-line-relaxed: 1.65;

    --bd-weight-regular: 400;
    --bd-weight-medium: 500;
    --bd-weight-semibold: 600;
    --bd-weight-bold: 700;
    --bd-weight-black: 800;

    --bd-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.18);
    --bd-shadow-md: 0 18px 50px rgba(0, 0, 0, 0.28);
    --bd-shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.36);

    --bd-control-h-sm: 34px;
    --bd-control-h-md: 40px;
    --bd-control-h-lg: 46px;

    --bd-shell-max: 1680px;
    --bd-content-max: 1440px;
    --bd-content-readable: 920px;

    --bd-header-h: 64px;
    --bd-sidebar-w: 248px;
    --bd-sidebar-w-compact: 84px;

    --bd-z-header: 100;
    --bd-z-sidebar: 90;
    --bd-z-popover: 300;
    --bd-z-modal: 500;
    --bd-z-toast: 700;

    --bd-transition-fast: 120ms ease;
    --bd-transition: 180ms ease;
    --bd-transition-slow: 260ms ease;
}

html[data-theme="light"],
html.light,
body.light {
    color-scheme: light;

    --bd-bg: #f5f7f9;
    --bd-bg-elevated: #ffffff;
    --bd-bg-soft: #eef1f4;
    --bd-surface: #ffffff;
    --bd-surface-2: #f7f8fa;
    --bd-surface-3: #edf0f3;

    --bd-text: #12161b;
    --bd-text-muted: #606975;
    --bd-text-soft: #838c98;

    --bd-border: rgba(18, 22, 27, 0.09);
    --bd-border-strong: rgba(18, 22, 27, 0.16);

    --bd-brand-soft: rgba(255, 107, 95, 0.10);

    --bd-shadow-sm: 0 8px 24px rgba(18, 22, 27, 0.07);
    --bd-shadow-md: 0 18px 50px rgba(18, 22, 27, 0.10);
    --bd-shadow-lg: 0 28px 80px rgba(18, 22, 27, 0.14);
}

.bd-ds-surface {
    background: var(--bd-surface);
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-lg);
}

.bd-ds-card {
    background: var(--bd-surface);
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-lg);
    box-shadow: var(--bd-shadow-sm);
}

.bd-ds-muted {
    color: var(--bd-text-muted);
}

.bd-ds-stack {
    display: flex;
    flex-direction: column;
    gap: var(--bd-space-4);
}

.bd-ds-row {
    display: flex;
    align-items: center;
    gap: var(--bd-space-3);
}

.bd-ds-grid {
    display: grid;
    gap: var(--bd-space-4);
}

.bd-ds-button {
    min-height: var(--bd-control-h-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bd-space-2);
    padding: 0 var(--bd-space-4);
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-sm);
    background: var(--bd-surface-2);
    color: var(--bd-text);
    font: var(--bd-weight-semibold) var(--bd-font-sm)/1 var(--bd-font-sans);
    text-decoration: none;
    cursor: pointer;
    transition:
        background var(--bd-transition),
        border-color var(--bd-transition),
        transform var(--bd-transition-fast);
}

.bd-ds-button:hover {
    background: var(--bd-surface-3);
    border-color: var(--bd-border-strong);
}

.bd-ds-button:active {
    transform: translateY(1px);
}

.bd-ds-button--primary {
    background: var(--bd-brand);
    border-color: var(--bd-brand);
    color: #ffffff;
}

.bd-ds-button--primary:hover {
    background: var(--bd-brand-hover);
    border-color: var(--bd-brand-hover);
}

.bd-ds-input {
    width: 100%;
    min-height: var(--bd-control-h-md);
    padding: 0 var(--bd-space-3);
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-sm);
    background: var(--bd-surface-2);
    color: var(--bd-text);
    font: var(--bd-weight-regular) var(--bd-font-md)/var(--bd-line-normal) var(--bd-font-sans);
    outline: none;
    transition:
        border-color var(--bd-transition),
        box-shadow var(--bd-transition);
}

.bd-ds-input:focus {
    border-color: var(--bd-brand);
    box-shadow: 0 0 0 3px var(--bd-brand-soft);
}

.bd-ds-container {
    width: min(100%, var(--bd-content-max));
    margin-inline: auto;
    padding-inline: var(--bd-space-5);
}

@media (max-width: 900px) {
    :root {
        --bd-header-h: 58px;
        --bd-sidebar-w: 0px;
    }

    .bd-ds-container {
        padding-inline: var(--bd-space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* ==========================================================================
   BEDEEL_STICKY_HEADER_RIGHT_RAIL_V1C
   Current authenticated shell:
   - real global header selector is .bdx-header
   - Home commercial right rail is .bd59-right-rail
   ========================================================================== */

/* Authenticated app global header: stays visible on every internal screen. */
body.np3-body .bdx-header{
    position:sticky!important;
    top:0!important;
    z-index:1400!important;
    width:100%!important;
    isolation:isolate!important;
}

/* Desktop/laptop Home: keep Bedeel AI + Discover + Trends visible. */
@media (min-width:981px){
    body.np20-home-page .bd59-layout{
        overflow:visible!important;
        align-items:start!important;
    }

    body.np20-home-page .bd59-right-rail{
        position:sticky!important;
        top:76px!important;
        align-self:start!important;
        height:max-content!important;
        max-height:calc(100vh - 88px)!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
        overscroll-behavior:contain!important;
        scrollbar-width:thin!important;
        z-index:40!important;
    }

    body.np20-home-page .bd59-right-rail > *{
        width:100%!important;
        margin-left:0!important;
        margin-right:0!important;
    }
}

/* Preserve current responsive stack. */
@media (max-width:980px){
    body.np20-home-page .bd59-right-rail{
        position:static!important;
        top:auto!important;
        max-height:none!important;
        overflow:visible!important;
    }
}

/* Header remains available on mobile/native, but rail does not float. */
@media (max-width:760px){
    body.np3-body .bdx-header{
        position:sticky!important;
        top:0!important;
        z-index:1400!important;
    }
}

/* ==========================================================================
   BEDEEL_SOCIAL_LAYOUT_UNIFIED_V1
   One geometry system for authenticated web + web-mobile.
   Goals:
   - same horizontal rhythm on every internal screen
   - centered content like modern social networks
   - predictable desktop feed + right rail proportions
   - tablet collapses cleanly
   - mobile uses full usable width with consistent gutters
   ========================================================================== */

:root{
    --bd-social-canvas-max:1360px;
    --bd-social-module-max:1240px;
    --bd-social-feed-max:820px;
    --bd-social-rail:300px;
    --bd-social-gap:20px;
    --bd-social-gutter-desktop:24px;
    --bd-social-gutter-tablet:16px;
    --bd-social-gutter-mobile:10px;
}

/* --------------------------------------------------------------------------
   GLOBAL AUTHENTICATED APP CANVAS
   All internal modules share one centered horizontal system.
   -------------------------------------------------------------------------- */

body.np3-body .np3-main{
    width:100%!important;
    min-width:0!important;
    padding-left:var(--bd-social-gutter-desktop)!important;
    padding-right:var(--bd-social-gutter-desktop)!important;
    box-sizing:border-box!important;
}

body.np3-body .np3-main > *{
    width:100%!important;
    max-width:var(--bd-social-module-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
}

/* Home is the social surface and uses a wider two-column canvas. */
body.np20-home-page .np3-main > .bd59-layout,
body.np20-home-page .bd59-layout{
    width:100%!important;
    max-width:var(--bd-social-canvas-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    grid-template-columns:minmax(0,1fr) var(--bd-social-rail)!important;
    column-gap:var(--bd-social-gap)!important;
    row-gap:var(--bd-social-gap)!important;
    align-items:start!important;
    justify-content:center!important;
}

/* Left social column uses the full available lane. */
body.np20-home-page .bd59-feed-column{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
}

/* Hero / discovery / composer align to the exact same lane. */
body.np20-home-page .bd-v3-hero,
body.np20-home-page .bd59-quick-grid,
body.np20-home-page .bd59-composer,
body.np20-home-page .bd59-discovery-bar,
body.np20-home-page .bd59-feed-header{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
}

/* Feed cards get a readable social-network width and stay centered. */
body.np20-home-page .bd59-feed{
    width:100%!important;
    max-width:var(--bd-social-feed-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
}

body.np20-home-page .bd59-post,
body.np20-home-page .bd59-empty{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
}

/* Right rail has one canonical width and aligns with the top of the content. */
body.np20-home-page .bd59-right-rail{
    width:var(--bd-social-rail)!important;
    min-width:var(--bd-social-rail)!important;
    max-width:var(--bd-social-rail)!important;
    gap:12px!important;
    box-sizing:border-box!important;
}

/* --------------------------------------------------------------------------
   LARGE DESKTOP
   Keep content centered instead of stretching infinitely on ultrawide screens.
   -------------------------------------------------------------------------- */

@media (min-width:1600px){
    body.np3-body .np3-main{
        padding-left:32px!important;
        padding-right:32px!important;
    }
}

/* --------------------------------------------------------------------------
   LAPTOP / TABLET WEB
   Reduce gutters and rail before collapsing to one column.
   -------------------------------------------------------------------------- */

@media (max-width:1260px){
    body.np3-body .np3-main{
        padding-left:var(--bd-social-gutter-tablet)!important;
        padding-right:var(--bd-social-gutter-tablet)!important;
    }

    body.np20-home-page .bd59-layout{
        grid-template-columns:minmax(0,1fr) 280px!important;
        gap:16px!important;
    }

    body.np20-home-page .bd59-right-rail{
        width:280px!important;
        min-width:280px!important;
        max-width:280px!important;
    }
}

@media (max-width:1040px){
    body.np20-home-page .bd59-layout{
        grid-template-columns:1fr!important;
        max-width:920px!important;
    }

    body.np20-home-page .bd59-right-rail{
        position:static!important;
        width:100%!important;
        min-width:0!important;
        max-width:none!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        max-height:none!important;
        overflow:visible!important;
    }

    body.np20-home-page .bd59-ai-panel{
        grid-column:1/-1!important;
    }

    body.np20-home-page .bd59-feed{
        max-width:820px!important;
    }
}

/* --------------------------------------------------------------------------
   WEB MOBILE + NATIVE
   Same mobile geometry regardless of browser/PWA/native surface.
   -------------------------------------------------------------------------- */

@media (max-width:760px){
    body.np3-body .np3-main,
    html[data-bedeel-surface="mobile"] body.np3-body .np3-main,
    html[data-bedeel-surface="native"] body.np3-body .np3-main{
        width:100%!important;
        max-width:none!important;
        min-width:0!important;
        margin:0!important;
        padding-left:var(--bd-social-gutter-mobile)!important;
        padding-right:var(--bd-social-gutter-mobile)!important;
        box-sizing:border-box!important;
    }

    body.np3-body .np3-main > *,
    html[data-bedeel-surface="mobile"] body.np3-body .np3-main > *,
    html[data-bedeel-surface="native"] body.np3-body .np3-main > *{
        width:100%!important;
        max-width:none!important;
        margin-left:0!important;
        margin-right:0!important;
        box-sizing:border-box!important;
    }

    body.np20-home-page .bd59-layout,
    html[data-bedeel-surface="mobile"] body.np20-home-page .bd59-layout,
    html[data-bedeel-surface="native"] body.np20-home-page .bd59-layout{
        display:block!important;
        width:100%!important;
        max-width:none!important;
        margin:0!important;
    }

    body.np20-home-page .bd59-feed-column,
    body.np20-home-page .bd59-feed,
    body.np20-home-page .bd59-post,
    body.np20-home-page .bd59-composer,
    body.np20-home-page .bd59-feed-header,
    body.np20-home-page .bd-v3-hero,
    body.np20-home-page .bd59-quick-grid{
        width:100%!important;
        max-width:none!important;
        margin-left:0!important;
        margin-right:0!important;
        box-sizing:border-box!important;
    }

    /* Mobile social feeds should not reserve desktop rail space. */
    body.np20-home-page .bd59-right-rail,
    html[data-bedeel-surface="mobile"] body.np20-home-page .bd59-right-rail,
    html[data-bedeel-surface="native"] body.np20-home-page .bd59-right-rail{
        display:none!important;
    }
}

/* Very small phones: preserve usable width without visual edge collisions. */
@media (max-width:420px){
    :root{
        --bd-social-gutter-mobile:8px;
    }
}