/* These are styles used across the entire dashboard: */
/* Google fonts */
/* layout grid */
/* sidebar */
/* header */
/* footer */
/* buttons */
/* inputs */
/* typography */
/* spacing */
/* colors */
/* global utility classes */
/* animations */
/* responsive breakpoints */




/* Creator Life colors */
/* c-deep-pink: Deep Pink (#ff4081) */
/* c-soft-pink: Soft Blush Pink (#ffb3c6) */
/* c-pastel-purple: Pastel Lavender Purple (#e1dbff) */
/* c-afternoon-skyblue: Afternoon Sky-Blue (#87ceeb) */
/* c-bright-skyblue: Bright Sky-Blue (#00bfff) */
/* login page button and title blue: (#00bfff) */



/* ---------------------------------------------------------
   GLOBAL FONTS - CALM COOL COLLECTED
--------------------------------------------------------- */
/* Local Google fonts */
@font-face { 
    font-family: 'OrbitronLocal'; 
    src: url('../resources/fonts/Orbitron-Bold.ttf') format('truetype'); 
    font-weight: 700; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'OrbitronLocal'; 
    src: url('../resources/fonts/Orbitron-Black.ttf') format('truetype'); 
    font-weight: 900; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'ZenDotsLocal'; 
    src: url('../resources/fonts/ZenDots-Regular.ttf') format('truetype'); 
    font-weight: 400;
    font-style: normal;
}

@font-face { 
    font-family: 'CondimentLocal'; 
    src: url('../resources/fonts/Condiment-Regular.ttf') format('truetype'); 
    font-weight: 400;
    font-style: normal;
}

@font-face { 
    font-family: 'ComfortaaLocal'; 
    src: url('../resources/fonts/Comfortaa-Bold.ttf') format('truetype'); 
    font-weight: 700; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'ComfortaaLocal'; 
    src: url('../resources/fonts/Comfortaa-Medium.ttf') format('truetype'); 
    font-weight: 500; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'ComfortaaLocal'; 
    src: url('../resources/fonts/Comfortaa-Light.ttf') format('truetype'); 
    font-weight: 300; 
    font-style: normal; 
} 





.dashboard-image.music-producer {
    background-image: url('https://images.unsplash.com/photo-1567882788933-8b2899358a8f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80');
}

.dashboard-image.influencer-travel {
    background-image: url('https://images.unsplash.com/photo-1523461811963-7f1023caeddd?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80');
}


/* Add more dashboard images */


/* Keyframe Core Engines */ 
@keyframes fadeInPage { 
    from { opacity: 0; transform: translateY(15px); } 
    to { opacity: 1; transform: translateY(0); } 
} 

@keyframes floatLogo { 
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
        box-shadow: 0 10px 30px rgba(0, 191, 255, 0.2), 0 10px 30px rgba(255, 64, 129, 0.1); 
    } 
    50% { 
        transform: translateY(-10px) rotate(2deg); 
        box-shadow: 0 20px 40px rgba(0, 191, 255, 0.35), 0 15px 35px rgba(255, 64, 129, 0.25); 
    } 
} 

/* The Core Bobbing Engine: Noticeably alternates card positions up and down slowly by 12px */ 
@keyframes bobCard { 
    0%, 100% { transform: translateY(0px); } 
    50% { transform: translateY(-12px); } 
}



 
/* BELOW IS THE CODE THAT WAS RESTRUCTURED */

/* --------------------------------------------- */
/*  SHARED BACKGROUND: #00bfff                   */
/* --------------------------------------------- */
.btn-primary,
.install-btn,
.demo-button {
    background: #00bfff;
}

/* --------------------------------------------- */
/*  SHARED BACKGROUND: #ff4081 (HOVER)           */
/* --------------------------------------------- */
.install-btn:hover,
.demo-button:hover,
.btn-primary:hover {
    background: #ff4081;
}

/* --------------------------------------------- */
/*  SHARED BACKGROUND: GLASS WHITE               */
/* --------------------------------------------- */
.hub-card {
    background: rgba(255, 255, 255, 0.7);
}

.hub-card:hover {
    background: rgba(255, 255, 255, 0.95);
}

/* --------------------------------------------- */
/*  SHARED BACKGROUND: TRANSPARENT               */
/* --------------------------------------------- */
.xn-nav,
.xolo-btn,
.music-start-btn {
    background: transparent !important;
}

/* --------------------------------------------- */
/*  SHARED TEXT COLOR: WHITE                     */
/* --------------------------------------------- */
.btn-primary,
.install-btn,
.demo-button {
    color: white;
}

/* --------------------------------------------- */
/*  SHARED TEXT COLOR: BRIGHT SKY-BLUE           */
/* --------------------------------------------- */
h1,
.dashboard-list h2,
.c-bright-skyblue h3 {
    color: #00bfff;
}

/* --------------------------------------------- */
/*  SHARED TEXT COLOR: BLACK                     */
/* --------------------------------------------- */
.navbar-brand,
.xn-btn-sm {
    color: black;
}

/* --------------------------------------------- */
/*  SHARED TEXT COLOR: SKY BLUE (#00bfff)        */
/* --------------------------------------------- */
.xolo-btn,
.music-start-btn {
    color: #00bfff;
}

/* --------------------------------------------- */
/*  SHARED TEXT COLOR: SIGNATURE COLORS          */
/* --------------------------------------------- */
.c-deep-pink h3 { color: #ff4081; }
.c-soft-pink h3 { color: #ffb3c6; }
.c-pastel-purple h3 { color: #a192f5; }
.c-afternoon-skyblue h3 { color: #5bc4e6; }

/* --------------------------------------------- */
/*  SHARED BORDER-COLOR: WHITE                   */
/* --------------------------------------------- */
.demo-button { border: 2px solid white; }
.main-logo { border: 4px solid #ffffff; }
.hub-card { border: 3px solid #ffffff; }

/* --------------------------------------------- */
/*  SHARED BORDER-COLOR: SIGNATURES              */
/* --------------------------------------------- */
.c-deep-pink { border-color: rgba(255, 64, 129, 0.3); }
.c-deep-pink:hover { border-color: #ff4081; }

.c-soft-pink { border-color: rgba(255, 179, 198, 0.4); }
.c-soft-pink:hover { border-color: #ffb3c6; }

.c-pastel-purple { border-color: rgba(225, 219, 255, 0.8); }
.c-pastel-purple:hover { border-color: #702963; } 

.c-afternoon-skyblue { border-color: rgba(191, 239, 255, 0.8); }
.c-afternoon-skyblue:hover { border-color: #bfefff; }

.c-bright-skyblue { border-color: rgba(0, 191, 255, 0.3); }
.c-bright-skyblue:hover { border-color: #00bfff; }

/* --------------------------------------------- */
/*  SHARED BORDER RADIUS                         */
/* --------------------------------------------- */
.btn-primary { border-radius: 12px; }
.install-btn { border-radius: 10px; }
.demo-button { border-radius: 8px; }
.thick-border { border-radius: 20px; }
.hub-card { border-radius: 28px; }
.main-logo { border-radius: 50%; } /* round */

/* --------------------------------------------- */
/*  SHARED FONT FAMILY: COMFORTAA                */
/* --------------------------------------------- */
body,
.btn-primary,
.install-btn,
.demo-button,
.demo-note,
h4,
.demo-label,
.hub-card p,
.subtitle {
    font-family: "ComfortaaLocal", sans-serif;
}

/* --------------------------------------------- */
/*  SHARED FONT FAMILY: ORBITRON                 */
/* --------------------------------------------- */
h1,
.dashboard-list h2,
.hub-card h3,
.uv-subheader {
    font-family: 'OrbitronLocal', sans-serif;
}

/* --------------------------------------------- */
/*  SHARED FONT FAMILY: ZENDOTS                  */
/* --------------------------------------------- */
h2,
h3 {
    font-family: 'ZenDotsLocal', sans-serif;
}

/* --------------------------------------------- */
/*  SHARED FONT FAMILY: CONDIMENT                */
/* --------------------------------------------- */
.dashboard-list a,
.slogan-1 {
    font-family: "Condiment", cursive;
}

/* --------------------------------------------- */
/*  SHARED TRANSITIONS                           */
/* --------------------------------------------- */
.btn-primary { transition: 0.25s ease; }
.install-btn,
.demo-button { transition: 0.2s ease; }

.hub-card {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                border-color 0.4s ease,
                box-shadow 0.4s ease;
}

.hub-card::before { transition: opacity 0.3s ease; }

.fade-out,
.fade-in {
    transition: opacity 0.3s ease;
}

/* --------------------------------------------- */
/*  SHARED SHADOWS                               */
/* --------------------------------------------- */
.main-logo {
    box-shadow: 0 10px 30px rgba(0, 191, 255, 0.25),
                0 15px 40px rgba(255, 64, 129, 0.15);
}

.hub-card:hover {
    box-shadow: 0 15px 35px rgba(0, 191, 255, 0.12),
                0 10px 20px rgba(255, 64, 129, 0.08);
}

.c-deep-pink:hover { box-shadow: 0 15px 35px rgba(255, 64, 129, 0.15); }
.c-soft-pink:hover { box-shadow: 0 15px 35px rgba(255, 179, 198, 0.2); }
.c-pastel-purple:hover { box-shadow: 0 15px 35px rgba(175, 160, 255, 0.2); }
.c-afternoon-skyblue:hover { box-shadow: 0 15px 35px rgba(191, 239, 255, 0.25); }
.c-bright-skyblue:hover { box-shadow: 0 15px 35px rgba(0, 191, 255, 0.15); }

/* --------------------------------------------- */
/*  SHARED ANIMATIONS                            */
/* --------------------------------------------- */
.main-logo { animation: floatLogo 5s ease-in-out infinite; }
.hub-card { animation: bobCard 6s ease-in-out infinite; }

/* --------------------------------------------- */
/*  SHARED FONT-WEIGHT: 500                      */
/* --------------------------------------------- */
body,
.btn-primary,
.demo-note,
h4,
.demo-label,
.hub-card p,
.xolo-btn,
.music-start-btn {
    font-weight: 500;
}

/* --------------------------------------------- */
/*  SHARED FONT-SIZE: clamp(1rem, 2vw, 2rem)     */
/* --------------------------------------------- */
body,
.btn-primary,
.demo-button,
.demo-note,
h4,
.demo-label,
.hub-card p,
.xolo-btn,
.music-start-btn {
    font-size: clamp(1rem, 2vw, 2rem);
}

/* --------------------------------------------- */
/*  INDIVIDUAL SELECTOR BLOCKS                   */
/* --------------------------------------------- */

/* GLOBAL PAGE COLOR */
body { 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 40px 20px; 
    background: linear-gradient(135deg, #eefcff 0%, #fff0f6 35%, #f6f0ff 65%, #f0f7ff 100%); 
    color: #2c2738; 
    animation: fadeInPage 0.8s ease-out; 
    overflow-x: hidden; 
}

/* GLOBAL BUTTONS */
.btn-primary {
    border: none;
    padding: 12px 22px;
    cursor: pointer;
}

.btn-primary:hover {
    transform: translateY(-2px);
}

.install-btn {
    margin-top: 12px;
    border: none;
    padding: 10px 18px;
    cursor: pointer;
}

.install-btn:hover {
    /* background handled in shared section */
}

.thick-border {
    border: 35px solid #00bfff;
}

.demo-section {
    text-align: center;
    margin-top: 25px;
}

.demo-button {
    padding: 10px 18px;
    font-weight: 500;
    cursor: pointer;
}

.demo-button:hover,
.btn-primary:hover {
    /* background handled in shared section */
}

.demo-note {
    opacity: 0.6;
    margin-top: 8px;
}

/* LOGO */
.main-logo { 
    width: 180px; 
    height: 180px; 
}

/* HEADINGS */
h1,
.dashboard-list h2 { 
    text-shadow: 2px 2px 0px #ffffff, 4px 4px 0px rgba(255, 64, 129, 0.15); 
    font-size: clamp(2rem, 4vw, 3.5rem); 
    margin: 20px 0 5px 0; 
    font-weight: 900; 
    letter-spacing: 2px; 
}

h2 {
    font-weight: 400;
    letter-spacing: 1px;
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
}

h3 {
    font-weight: 400;
    font-size: clamp(1.4rem, 2.7vw, 2.2rem);
}

h4,
.demo-label,
.hub-card p {
    font-weight: 500;
}

/* DASHBOARD LIST LINKS */
.dashboard-list a {
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 3rem);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
    font-weight: 500;
}

/* GRID */
.hub-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 25px; 
    margin-top: 30px; 
    padding: 15px 0; 
}

/* CARDS */
.hub-card { 
    padding: 35px 25px; 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    text-align: center; 
    text-decoration: none; 
    color: inherit; 
    position: relative; 
    overflow: hidden; 
    box-shadow: 0 10px 25px rgba(0, 191, 255, 0.05); 
}

.hub-grid a:nth-child(1) { animation-delay: 0s; } 
.hub-grid a:nth-child(2) { animation-delay: 0.8s; } 
.hub-grid a:nth-child(3) { animation-delay: 1.6s; } 
.hub-grid a:nth-child(4) { animation-delay: 2.4s; } 
.hub-grid a:nth-child(5) { animation-delay: 3.2s; }

.hub-card::before { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.04) 0%, rgba(108, 92, 231, 0.04) 50%, rgba(255, 64, 129, 0.04) 100%); 
    opacity: 0; 
    z-index: 1; 
}

.hub-card:hover { 
    animation-play-state: paused; 
    transform: translateY(-8px) scale(1.02); 
}

.hub-card:hover::before { opacity: 1; }

.card-content { position: relative; z-index: 2; }

.hub-icon { 
    font-size: 46px; 
    margin-bottom: 12px; 
    display: inline-block; 
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05)); 
}

.hub-card h3 { 
    margin: 0 0 10px 0; 
    font-size: 18px; 
    font-weight: 900; 
    letter-spacing: 1px; 
}

/* COLOR SIGNATURE CLASSES */
.c-deep-pink { /* border + color handled in shared */ }
.c-soft-pink { /* border + color handled in shared */ }
.c-pastel-purple { /* border + color handled in shared */ }
.c-afternoon-skyblue { /* border + color handled in shared */ }
.c-bright-skyblue { /* border + color handled in shared */ }

/* HEADER AREA */
.brand-header { 
    text-align: center; 
    margin-bottom: 40px; 
}

.xn-btn-sm {
    border-color: #ff4081;
}

.xn-btn-sm:hover {
    background-color: black;
    color: white;
}

/* SLOGAN + SUBTITLE */
.slogan-1 {
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 3rem);
    text-transform: lowercase;
}

.subtitle {
    font-weight: 300;
    font-size: clamp(1.5rem, 3vw, 3rem);
    text-align: center;
}

/* STATUS ORACLE */
.fade-out {
    opacity: 0;
}

.fade-in {
    opacity: 1;
}

/* MUSIC CHECK + BUTTONS */
.music-check {
    text-align: center;
    margin-bottom: 30px;
}

.music-start-btn:hover {
    background-color: pink;
    color: yellow;
}

.xolo-btn,
.music-start-btn {
    border: none !important;
    padding: 12px 20px;
    cursor: pointer;
}

/* SUBHEADER */
.uv-subheader {
    font-size: 1rem;
    margin-top: 6px;
    opacity: 0.85;
    text-align: center;
}

/* DASHBOARD LIST */
.dashboard-list {
    margin: 180px 0;
    text-align: center;
}

.dashboard-list ul {
    list-style: none;
    padding: 0;
}

.dashboard-list li {
    margin: 8px 0;
    font-size: 1.1rem;
}

.dashboard-list a:hover {
    opacity: 0.6;
}

/* DASHBOARD CARD */
.dashboard-card {
    margin: 30px 0;
    text-align: center;
}

.dashboard-image {
    width: 100%;
    height: 140px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    margin-bottom: 10px;
    opacity: 0.9;
}


/* CASHFLOW - BUDGET TRACKER */
/* ---------------------------------------------------------
   TRACKER MODULE — MERGED INTO DASHBOARD.CSS
   Clean, conflict-free, modular
--------------------------------------------------------- */

/* --- Dashboard Grid (3-block cards) --- */
.tracker-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    margin-bottom: 35px;
}

/* --- Tracker Cards (non-floating version) --- */
.tracker-card {
    background: rgba(255, 255, 255, 0.85);
    padding: 28px 24px;
    border-radius: 22px;
    border: 2px solid #ffffff;
    text-align: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tracker-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0, 191, 255, 0.12);
}

.tracker-card h3 {
    font-family: 'OrbitronLocal', sans-serif;
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 900;
    color: #00bfff;
}

.tracker-card p {
    font-size: 22px;
    font-weight: 600;
    color: #444;
}

/* --- Form Grid --- */
.tracker-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.tracker-form-grid label {
    display: flex;
    flex-direction: column;
    font-family: "ComfortaaLocal", sans-serif;
    font-weight: 500;
    font-size: clamp(1rem, 2vw, 1.4rem);
    color: #333;
}

.tracker-form-grid input,
.tracker-form-grid select {
    margin-top: 6px;
    padding: 12px;
    border-radius: 12px;
    border: 2px solid #e6e6e6;
    background: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    transition: border-color 0.25s ease;
}

.tracker-form-grid input:focus,
.tracker-form-grid select:focus {
    border-color: #00bfff;
}

/* --- Tables --- */
.tracker-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.tracker-table th,
.tracker-table td {
    padding: 14px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.tracker-table th {
    background: rgba(255, 255, 255, 0.7);
    font-family: 'OrbitronLocal', sans-serif;
    color: #00bfff;
    font-size: 14px;
}

.tracker-action-btn {
    background: #ffb3c6;
    border: none;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
}

.tracker-action-btn:hover {
    background: #ffa3d1;
}

/* --- Footer --- */
.tracker-footer {
    margin-top: 50px;
    padding: 20px 0;
    text-align: center;
    color: #777;
    font-size: 14px;
    border-top: 2px dashed #ffd6f7;
}

.tracker-footer .footer-title {
    font-family: 'OrbitronLocal', sans-serif;
    font-size: 18px;
    color: #00bfff;
}

.tracker-footer .footer-copy {
    font-size: 13px;
    color: #999;
}

/* --- Global Page Layout (safe version) --- */
.tracker-page {
    font-family: 'Segoe UI', system-ui, sans-serif;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
    background: linear-gradient(135deg, #eefcff 0%, #fff0f6 35%, #f6f0ff 65%, #f0f7ff 100%);
    color: #2c2738;
}

.tracker-month-select {
    background: var(--c-soft-pink);
    padding: 12px;
    border-radius: 12px;
    border: none;
    font-size: 16px;
    width: 100%;
    max-width: 300px;
}