/* ==========================================================
   ROCK YOUR TIME®
   Dashboard Renaissance
   Version 2.0
========================================================== */


/* ==========================================================
   PAGE
========================================================== */

.dashboard-page{

    width:100%;

    max-width:1700px;

    margin:auto;

    padding:40px 32px 120px;

}


/* ==========================================================
   GRID
========================================================== */

.dashboard-grid{

    display:grid;

    grid-template-columns:

        minmax(0,2.2fr)

        minmax(0,420px);

    gap:32px;

    align-items:start;

    margin-top:32px;

}

.dashboard-main{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:32px;

}

.dashboard-sidebar{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:24px;

}


/* ==========================================================
   HERO
========================================================== */

.dashboard-hero{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    margin-bottom:36px;

}

.hero-left{

    flex:1;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(17,91,128,.08);

    color:var(--ryt-primary);

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

    margin-bottom:18px;

}

.hero-title{

    font-size:3.25rem;

    font-weight:800;

    line-height:1.05;

    color:var(--ryt-primary);

    margin-bottom:18px;

}

.hero-subtitle{

    font-size:1.1rem;

    line-height:1.8;

    max-width:720px;

    color:var(--ryt-text-light);

}


/* ==========================================================
   PORTFOLIO HEALTH
========================================================== */

.hero-score-card{

    width:250px;

    padding:34px;

    border-radius:28px;

    background:

        linear-gradient(
            145deg,
            #0D5B8C,
            #0F7DAF
        );

    color:white;

    box-shadow:

        0 24px 60px rgba(0,0,0,.16);

}

.score-label{

    text-transform:uppercase;

    font-size:.82rem;

    letter-spacing:.08em;

    opacity:.75;

}

.score-value{

    font-size:4rem;

    font-weight:800;

    margin:14px 0;

}

.score-caption{

    opacity:.85;

}


/* ==========================================================
   LIVE RADAR
========================================================== */

.radar-hero{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    padding:48px;

    background:

        linear-gradient(
            140deg,
            #0D5B8C,
            #0A7DB2,
            #1FA8B8
        );

    color:white;

    box-shadow:

        0 24px 70px rgba(0,0,0,.18);

}

.radar-background{

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top right,

            rgba(255,255,255,.18),

            transparent 45%

        );

    pointer-events:none;

}

.radar-content{

    position:relative;

    z-index:2;

}

.radar-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:40px;

}

.radar-header h2{

    font-size:2.3rem;

    font-weight:700;

    margin:12px 0;

    color:white;

}

.radar-header p{

    max-width:700px;

    line-height:1.8;

    color:rgba(255,255,255,.90);

}

.radar-live{

    display:flex;

    align-items:center;

    gap:12px;

    background:rgba(255,255,255,.14);

    border:1px solid rgba(255,255,255,.25);

    backdrop-filter:blur(14px);

    border-radius:999px;

    padding:12px 22px;

    font-weight:700;

    letter-spacing:.08em;

}

.live-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#35E66B;

    animation:livePulse 2s infinite;

}


/* ==========================================================
   FEATURED OPPORTUNITY
========================================================== */

.featured-opportunity{

    display:grid;

    grid-template-columns:

        1.5fr

        1fr;

    gap:40px;

    padding:38px;

    margin-top:32px;

    border-radius:30px;

    background:white;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:

        0 18px 45px rgba(0,0,0,.08);

}

.featured-opportunity-link{
    display:block;
    color:inherit;
    text-decoration:none;
}

.featured-opportunity-link:hover{
    color:inherit;
}

.featured-opportunity-link:focus-visible{
    outline:3px solid var(--ryt-primary, #2563eb);
    outline-offset:4px;
    border-radius:30px;
}

.featured-badge{

    display:inline-flex;

    align-items:center;

    padding:8px 18px;

    background:#FFF6D6;

    color:#A46A00;

    border-radius:999px;

    font-weight:700;

    margin-bottom:18px;

}

.featured-left h2{

    font-size:2.5rem;

    color:var(--ryt-primary);

    margin-bottom:16px;

}

.featured-left p{

    color:var(--ryt-text-light);

    line-height:1.8;

}

.featured-right{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:18px;

}

.featured-stat{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 22px;

    border-radius:18px;

    background:#F8FBFD;

}

.featured-stat span{

    color:var(--ryt-text-light);

}

.featured-stat strong{

    font-size:1.25rem;

    color:var(--ryt-primary);

}

/* ==========================================================
   SECTION HEADERS
========================================================== */

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:24px;

    margin-bottom:30px;

}

.section-header h2{

    font-size:2rem;

    font-weight:700;

    color:var(--ryt-primary);

    margin-top:8px;

}

.dashboard-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--ryt-primary);

    font-weight:700;

    text-decoration:none;

    transition:.25s;

}

.dashboard-link:hover{

    transform:translateX(6px);

    text-decoration:none;

}


/* ==========================================================
   OWNERSHIP STRATEGY
========================================================== */

.strategy-card{

    background:white;

    border-radius:32px;

    padding:40px;

    border:1px solid rgba(15,91,128,.08);

    box-shadow:

        0 18px 45px rgba(0,0,0,.08);

}

.strategy-total{

    text-align:right;

    font-size:2rem;

    font-weight:800;

    color:var(--ryt-primary);

}

.strategy-total small{

    display:block;

    margin-top:6px;

    font-size:.9rem;

    color:var(--ryt-text-light);

    font-weight:500;

}


/* ==========================================================
   POINT ALLOCATION
========================================================== */

.allocation-wrapper{

    margin:36px 0 44px;

}

.allocation-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    min-width:0;

    margin-bottom:14px;

}

.allocation-title{

    font-size:1rem;

    font-weight:700;

    color:var(--ryt-primary);

}

.allocation-value{

    font-size:clamp(1.25rem,2vw,2rem);

    font-weight:800;

    color:var(--ryt-primary);

    min-width:0;

    max-width:72%;

    text-align:right;

    white-space:nowrap;

}

.allocation-value.financial{

    color:#0AA58A;

}


/* ==========================================================
   PREMIUM SLIDER
========================================================== */

.allocation-slider{

    width:100%;

    margin:22px 0;

    appearance:none;

    -webkit-appearance:none;

    background:transparent;

}

.allocation-slider:focus{

    outline:none;

}

.allocation-save-status{

    margin:10px 0 0;

    color:var(--ryt-text-light);

    font-size:.85rem;

}

.allocation-slider::-webkit-slider-runnable-track{

    height:12px;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            #0D5B8C,
            #19A5C7
        );

}

.allocation-slider::-moz-range-track{

    height:12px;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            #0D5B8C,
            #19A5C7
        );

}

.allocation-slider::-webkit-slider-thumb{

    -webkit-appearance:none;

    appearance:none;

    width:34px;

    height:34px;

    border-radius:50%;

    margin-top:-11px;

    border:5px solid white;

    background:#F7B733;

    cursor:pointer;

    box-shadow:

        0 10px 22px rgba(0,0,0,.25);

    transition:.25s;

}

.allocation-slider::-webkit-slider-thumb:hover{

    transform:scale(1.12);

}

.allocation-slider::-moz-range-thumb{

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    background:#F7B733;

    cursor:pointer;

}


/* ==========================================================
   STRATEGY METRICS
========================================================== */

.strategy-metrics{

    display:grid;

    grid-template-columns:

        repeat(4,minmax(180px,1fr));

    gap:22px;

    margin-top:36px;

}

.metric-card{

    padding:24px;

    border-radius:22px;

    background:#F8FBFD;

    transition:.25s;

}

.metric-card:hover{

    transform:translateY(-4px);

    box-shadow:

        0 16px 36px rgba(0,0,0,.08);

}

.metric-card span{

    display:block;

    color:var(--ryt-text-light);

    font-size:.9rem;

    text-transform:uppercase;

    letter-spacing:.04em;

    margin-bottom:10px;

}

.metric-card strong{

    display:block;

    font-size:2rem;

    font-weight:800;

    color:var(--ryt-primary);

}

.metric-card.success{

    background:

        linear-gradient(
            145deg,
            #0AA58A,
            #19C4A4
        );

}

.metric-card.success span,

.metric-card.success strong{

    color:white;

}


/* ==========================================================
   RYT INSIGHT
========================================================== */

.strategy-insight{

    display:flex;

    gap:22px;

    margin-top:42px;

    padding:28px;

    border-radius:24px;

    background:

        linear-gradient(
            135deg,
            #EEF7FD,
            #FFFFFF
        );

    border-left:6px solid #0D5B8C;

}

.insight-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:2rem;

    background:white;

    box-shadow:

        0 10px 24px rgba(0,0,0,.08);

}

.insight-title{

    font-size:1.15rem;

    font-weight:700;

    color:var(--ryt-primary);

    margin-bottom:10px;

}

.insight-content p{

    color:var(--ryt-text-light);

    line-height:1.8;

    margin:0;

}


/* ==========================================================
   PORTFOLIO
========================================================== */

.portfolio-section{

    margin-top:10px;

}

.portfolio-grid{

    display:grid;

    grid-template-columns:

        repeat(3,minmax(220px,1fr));

    gap:24px;

}

.summary-card{

    padding:28px;

    border-radius:24px;

    background:white;

    border:1px solid rgba(15,91,128,.08);

    box-shadow:

        0 14px 34px rgba(0,0,0,.06);

    transition:.25s;

}

.summary-card:hover{

    transform:translateY(-6px);

    box-shadow:

        0 24px 48px rgba(0,0,0,.10);

}

.summary-card .owner-label{

    color:var(--ryt-text-light);

    text-transform:uppercase;

    font-size:.82rem;

    letter-spacing:.05em;

    margin-bottom:14px;

}

.summary-card h2{

    margin:0;

    font-size:2rem;

    color:var(--ryt-primary);

    font-weight:800;

}

/* ==========================================================
   SIDEBAR
========================================================== */

.sidebar-card{

    background:white;

    border-radius:28px;

    padding:30px;

    border:1px solid rgba(15,91,128,.08);

    box-shadow:
        0 16px 40px rgba(0,0,0,.07);

}

.sidebar-card h3{

    margin-top:10px;

    margin-bottom:26px;

    color:var(--ryt-primary);

}


/* ==========================================================
   ALERTS
========================================================== */

.alert-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.alert-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:18px;

    border-radius:18px;

    background:#F8FBFD;

    transition:.25s;

}

.alert-item:hover{

    transform:translateY(-3px);

    box-shadow:
        0 14px 28px rgba(0,0,0,.08);

}

.alert-icon{

    width:46px;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14px;

    background:linear-gradient(
        145deg,
        #0D5B8C,
        #17A7C8
    );

    color:white;

    font-size:1.2rem;

    flex-shrink:0;

}

.alert-item strong{

    display:block;

    color:var(--ryt-primary);

    margin-bottom:6px;

}

.alert-item p{

    margin:0;

    color:var(--ryt-text-light);

    line-height:1.6;

    font-size:.95rem;

}


/* ==========================================================
   QUICK ACTIONS
========================================================== */

.quick-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:18px;

}

.quick-action{

    width:100%;

    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:12px;

    text-decoration:none;

    min-height:150px;

    padding:24px 16px;

    border-radius:20px;

    background:#F8FBFD;

    transition:.25s;

    color:var(--ryt-primary);

    font-weight:700;

    text-align:center;

    overflow-wrap:normal;

    word-break:normal;

    line-height:1.25;

    cursor:pointer;

    box-sizing:border-box;

}

.quick-action:hover{

    text-decoration:none;

    background:white;

    transform:translateY(-5px);

    box-shadow:
        0 18px 34px rgba(0,0,0,.08);

}

.quick-action span{

    min-width:0;

}

.quick-action .quick-action-icon{

    font-size:1.65rem;

    line-height:1;

}

.quick-action .quick-action-label{

    font-size:clamp(1rem,1.3vw,1.25rem);

    overflow-wrap:break-word;

    text-wrap:balance;

}

.quick-action small{

    color:var(--ryt-text-light);

}

.quick-action.disabled{

    opacity:.45;

    cursor:default;

}

.quick-action:focus-visible{

    outline:3px solid #19A5C7;

    outline-offset:3px;

}


/* ==========================================================
   GLASS EFFECTS
========================================================== */

.strategy-card,

.summary-card,

.sidebar-card,

.featured-opportunity{

    backdrop-filter:blur(12px);

}


/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes livePulse{

    0%{

        transform:scale(1);

        box-shadow:
            0 0 0 0 rgba(53,230,107,.60);

    }

    70%{

        transform:scale(1.12);

        box-shadow:
            0 0 0 14px rgba(53,230,107,0);

    }

    100%{

        transform:scale(1);

        box-shadow:
            0 0 0 0 rgba(53,230,107,0);

    }

}

.summary-card,
.metric-card,
.sidebar-card,
.featured-opportunity{

    transition:
        transform .28s,
        box-shadow .28s;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1400px){

    .dashboard-grid{

        grid-template-columns:1fr;

    }

    .dashboard-sidebar{

        display:grid;

        grid-template-columns:repeat(2,1fr);

        gap:24px;

    }

}


@media (max-width:1100px){

    .dashboard-page{

        padding:28px 20px 100px;

    }

    .dashboard-hero{

        flex-direction:column;

        align-items:flex-start;

    }

    .hero-score-card{

        width:100%;

    }

    .featured-opportunity{

        grid-template-columns:1fr;

    }

    .strategy-metrics{

        grid-template-columns:repeat(2,1fr);

    }

    .portfolio-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


@media (max-width:768px){

    .dashboard-page{

        padding:18px 14px 110px;

    }

    .hero-title{

        font-size:2.2rem;

    }

    .radar-hero{

        padding:30px;

    }

    .radar-header{

        flex-direction:column;

    }

    .section-header{

        flex-direction:column;

        gap:18px;

    }

    .strategy-card{

        padding:26px;

    }

    .strategy-total{

        text-align:left;

    }

    .strategy-metrics{

        grid-template-columns:1fr;

    }

    .portfolio-grid{

        grid-template-columns:1fr;

    }

    .dashboard-sidebar{

        grid-template-columns:1fr;

    }

    .quick-grid{

        grid-template-columns:1fr;

    }

    .allocation-value{

        font-size:clamp(1.1rem,6vw,1.5rem);

    }

}


@media (max-width:480px){

    .hero-title{

        font-size:1.9rem;

    }

    .featured-left h2{

        font-size:1.7rem;

    }

    .score-value{

        font-size:3rem;

    }

}

/* ==========================================================
   PORTFOLIO
========================================================== */

.page-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:24px;

    margin-bottom:32px;

    flex-wrap:wrap;

}

.section-label{

    font-size:.80rem;

    text-transform:uppercase;

    letter-spacing:.12em;

    color:#8A97A8;

    font-weight:700;

    margin-bottom:8px;

}

.page-header h1{

    font-size:2.3rem;

    font-weight:800;

    color:var(--ryt-primary);

    margin-bottom:10px;

}

.page-header p{

    color:#708090;

    max-width:650px;

}


/* ==========================================================
   SUMMARY GRID
========================================================== */

.summary-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap:22px;

    margin-bottom:42px;

}

.summary-card{

    background:white;

    border-radius:22px;

    padding:26px;

    box-shadow:

        0 10px 30px rgba(0,0,0,.05);

    transition:.25s;

}

.summary-card:hover{

    transform:translateY(-4px);

}

.summary-card span{

    display:block;

    font-size:.82rem;

    text-transform:uppercase;

    color:#8A97A8;

    letter-spacing:.08em;

}

.summary-card h2{

    margin-top:14px;

    font-size:2rem;

    color:var(--ryt-primary);

    font-weight:800;

}

.summary-card.success{

    background:

        linear-gradient(
            135deg,
            #12B886,
            #1DD1A1
        );

    color:white;

}

.summary-card.success span,

.summary-card.success h2{

    color:white;

}


/* ==========================================================
   OWNERSHIP GRID
========================================================== */

.ownership-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(360px,1fr)
        );

    gap:28px;

}

.ownership-card{

    background:white;

    border-radius:24px;

    padding:28px;

    box-shadow:

        0 14px 34px rgba(0,0,0,.05);

    transition:.25s;

}

.ownership-card:hover{

    transform:translateY(-6px);

}

.ownership-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:26px;

}

.ownership-header h3{

    margin:0;

    color:var(--ryt-primary);

    font-size:1.45rem;

    font-weight:800;

}

.ownership-header span{

    color:#7C8A9C;

}

.health-pill{

    width:62px;

    height:62px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        linear-gradient(
            135deg,
            #12B886,
            #1DD1A1
        );

    color:white;

    font-size:1.15rem;

    font-weight:800;

}

.ownership-stats{

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:20px;

}

.ownership-stats label{

    display:block;

    font-size:.76rem;

    text-transform:uppercase;

    color:#8A97A8;

}

.ownership-stats strong{

    display:block;

    margin-top:6px;

    font-size:1.15rem;

    color:var(--ryt-primary);

}

.ownership-financials{

    display:flex;

    justify-content:space-between;

    margin:26px 0;

}

.ownership-financials span{

    display:block;

    color:#8A97A8;

    font-size:.80rem;

}

.ownership-financials strong{

    font-size:1.3rem;

    color:var(--ryt-primary);

}

.ownership-actions{

    display:flex;

    gap:16px;

    margin-top:28px;

}

.ownership-actions a,

.ownership-actions button{

    flex:1;

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .page-header{

        align-items:flex-start;

    }

    .page-header h1{

        font-size:1.8rem;

    }

    .ownership-grid{

        grid-template-columns:1fr;

    }

    .ownership-stats{

        grid-template-columns:1fr;

    }

    .ownership-financials{

        flex-direction:column;

        gap:18px;

    }

    .ownership-actions{

        flex-direction:column;

    }

}
