/*-------*/
/* Pages */
/*-------*/
@import url('styles/pages/register.css');
@import url('styles/pages/emailRegister.css');
@import url('styles/pages/confirmEmail.css');
@import url('styles/pages/login.css');
@import url('styles/pages/register.css');
@import url('styles/pages/home.css');
@import url('styles/pages/household.css');
@import url('styles/pages/budget.css');
@import url('styles/pages/tasks.css');
@import url('styles/pages/styles.css');

/*------------*/
/* Components */
/*------------*/
@import url('styles/components/tsCard.css');
@import url('styles/components/tsModal.css');
@import url('styles/components/tsSelect.css');
@import url('styles/components/sidebarNav.css');
@import url('styles/components/landingPage.css');
@import url('styles/components/dashboard.css');
@import url('styles/components/dashboardCalendar.css');

/* household */
@import url('styles/components/householdStyles/householdCard.css');
@import url('styles/components/householdStyles/userHouseholdCard.css');
@import url('styles/components/householdStyles/userHouseholdFormModal.css');
@import url('styles/components/householdStyles/userProfileCard.css');
@import url('styles/components/householdStyles/pendingInvitationCard.css');
@import url('styles/components/householdStyles/manageUserHouseholdModal.css');
@import url('styles/components/householdStyles/householdFormModal.css');

/* budget */
@import url('styles/components/budgetStyles/budgetToolbar.css');
@import url('styles/components/budgetStyles/incomeCard.css');
@import url('styles/components/budgetStyles/incomeModal.css');
@import url('styles/components/budgetStyles/incomeDetailsModal.css');
@import url('styles/components/budgetStyles/investmentCard.css');
@import url('styles/components/budgetStyles/investmentModal.css');
@import url('styles/components/budgetStyles/investmentDetailsModal.css');
@import url('styles/components/budgetStyles/creditCard.css');
@import url('styles/components/budgetStyles/creditForm.css');
@import url('styles/components/budgetStyles/creditDetailsModal.css');
@import url('styles/components/budgetStyles/expenseCard.css');
@import url('styles/components/budgetStyles/expenseModal.css');
@import url('styles/components/budgetStyles/budgetModal.css');
@import url('styles/components/budgetStyles/budgetCategoriesModal.css');

/* tasks */
@import url('styles/components/taskStyles/taskManagerToolbar.css');
@import url('styles/components/taskStyles/taskItemModal.css');
@import url('styles/components/taskStyles/taskItemCategory.css');

:root {
    /* ----- */
    /* Fonts */
    /* ----- */
    --title-font: 'Title-Font', sans-serif;
    --primary-font: 'Primary-Font', sans-serif;
    --label-font: 'Label-Font', sans-serif;
    /* ---------------------------------------- */
    /*                Colors                    */
    /* ---------------------------------------- */
    /*     Blue       */
    --base-blue: var(--blue-6);
    --blue-1: hsl(from var(--base-blue) h s 95%);
    --blue-2: hsl(from var(--base-blue) h s 85%);
    --blue-3: hsl(from var(--base-blue) h s 75%);
    --blue-4: hsl(from var(--base-blue) h s 65%);
    --blue-5: hsl(from var(--base-blue) h s 55%);
    --blue-6: hsl(224.74 91% 45%);
    --blue-7: hsl(from var(--base-blue) h s 35%);
    --blue-8: hsl(from var(--base-blue) h s 25%);
    --blue-9: hsl(from var(--base-blue) h s 15%);
    --blue-10: hsl(from var(--base-blue) h s 5%);
    --dark-blue: var(--blue-8);
    --blue-shadow: hsl(from var(--base-blue) h s 15% / 25%);
    --blue-shadow-5: 0 2px 8px var(--blue-shadow), 0 5px 20px var(--blue-shadow);
    --blue-shadow-tabbed: 0 0 8px var(--blue-shadow), 0 0 20px var(--blue-shadow);
    /*     Gray       */
    --base-gray: hsl(0 0% 50%);
    --gray-1: hsl(from var(--base-gray) h s 95%);
    --gray-2: hsl(from var(--base-gray) h s 85%);
    --gray-3: hsl(from var(--base-gray) h s 75%);
    --gray-4: hsl(from var(--base-gray) h s 65%);
    --gray-5: hsl(from var(--base-gray) h s 55%);
    --gray-6: hsl(from var(--base-gray) h s 45%);
    --gray-7: hsl(from var(--base-gray) h s 35%);
    --gray-8: hsl(from var(--base-gray) h s 25%);
    --gray-9: hsl(from var(--base-gray) h s 15%);
    --gray-10: hsl(from var(--base-gray) h s 5%);
    /*     Green      */
    --base-green: var(--green-7);
    --green-1: hsl(from var(--base-green) h s 95%);
    --green-2: hsl(from var(--base-green) h s 85%);
    --green-3: hsl(from var(--base-green) h s 75%);
    --green-4: hsl(from var(--base-green) h s 65%);
    --green-5: hsl(from var(--base-green) h s 55%);
    --green-6: hsl(from var(--base-green) h s 45%);
    --green-7: hsl(112.86 100% 35%);
    --green-8: hsl(from var(--base-green) h s 25%);
    --green-9: hsl(from var(--base-green) h s 15%);
    --green-10: hsl(from var(--base-green) h s 5%);
    /*     Orange     */
    --base-orange: var(--orange-6);
    --orange-1: hsl(from var(--base-orange) h s 95%);
    --orange-2: hsl(from var(--base-orange) h s 85%);
    --orange-3: hsl(from var(--base-orange) h s 75%);
    --orange-4: hsl(from var(--base-orange) h s 65%);
    --orange-5: hsl(from var(--base-orange) h s 55%);
    --orange-6: hsl(14.96 100% 45%);
    --orange-7: hsl(from var(--base-orange) h s 35%);
    --orange-8: hsl(from var(--base-orange) h s 25%);
    --orange-9: hsl(from var(--base-orange) h s 15%);
    --orange-10: hsl(from var(--base-orange) h s 5%);
    /*     Purple     */
    --base-purple: var(--purple-6);
    --purple-1: hsl(from var(--base-purple) h s 95%);
    --purple-2: hsl(from var(--base-purple) h s 85%);
    --purple-3: hsl(from var(--base-purple) h s 75%);
    --purple-4: hsl(from var(--base-purple) h s 65%);
    --purple-5: hsl(from var(--base-purple) h s 55%);
    --purple-6: hsl(267.57 80% 45%);
    --purple-7: hsl(from var(--base-purple) h s 35%);
    --purple-8: hsl(from var(--base-purple) h s 25%);
    --purple-9: hsl(from var(--base-purple) h s 15%);
    --purple-10: hsl(from var(--base-purple) h s 5%);
    /*     Red     */
    --base-red: var(--red-6);
    --red-1: hsl(from var(--base-red) h s 95%);
    --red-2: hsl(from var(--base-red) h s 85%);
    --red-3: hsl(from var(--base-red) h s 75%);
    --red-4: hsl(from var(--base-red) h s 65%);
    --red-5: hsl(from var(--base-red) h s 55%);
    --red-6: hsl(354.19 100% 45%);
    --red-7: hsl(from var(--base-red) h s 35%);
    --red-8: hsl(from var(--base-red) h s 25%);
    --red-9: hsl(from var(--base-red) h s 15%);
    --red-10: hsl(from var(--base-red) h s 5%);
    /*     White       */
    --off-white: hsl(from var(--base-gray) h s 98%);
    --white: hsl(0 0 100%);
    --white-background: rgba(250,250,250,1); /*mud pallet background color*/
    /*     Yellow     */
    --base-yellow: var(--yellow-6);
    --yellow-1: hsl(from var(--base-yellow) h s 95%);
    --yellow-2: hsl(from var(--base-yellow) h s 85%);
    --yellow-3: hsl(from var(--base-yellow) h s 75%);
    --yellow-4: hsl(from var(--base-yellow) h s 65%);
    --yellow-5: hsl(from var(--base-yellow) h s 55%);
    --yellow-6: hsl(42.61 97% 45%);
    --yellow-7: hsl(from var(--base-yellow) h s 35%);
    --yellow-8: hsl(from var(--base-yellow) h s 25%);
    --yellow-9: hsl(from var(--base-yellow) h s 15%);
    --yellow-10: hsl(from var(--base-yellow) h s 5%);
    /* ------ */
    --border-color: var(--gray-1);
    --border-radius: .5rem;
    /* ------ */
    --section-background: rgba(32, 178, 170, 0.3);
    --section-background-green: rgb(32, 178, 170);
    --button-background-light: rgba(247, 247, 247, 0.75);
    --button-background: rgba(255, 255, 255, 0.3);
    --button-background-dark-gray: rgb(26, 26, 26);
    --button-background-green: rgb(32, 178, 170);
    --button-background-hover-green: rgb(0, 85, 143);
    --font-weight-med: 600;
    --green-gradient: linear-gradient( var(--green-8), var(--green-8), var(--green-7), var(--green-6), var(--green-5));
    --blue-gradient: linear-gradient( var(--blue-8), var(--blue-8), var(--blue-7), var(--blue-6), var(--blue-5));
}

body {
    font-family: var(--primary-font);
    margin: 0;
}

.mud-drawer.mud-elevation-1 {
    border: none;
    box-shadow: none;
}

body.main-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-family: var(--primary-font);
}

/* --------------------- */
/* Mud Blazor Overwrites */
/* --------------------- */
.mud-typography-body1 {
    font-family: var(--primary-font) !important;
}

.mud-input-label.mud-input-label-outlined {
    font-family: var(--label-font) !important;
    background-color: var(--white);
}

.mud-button-label {
    font-family: var(--label-font) !important;
}

.mud-dialog-width-full {
    width: calc(100% - 16px) !important;
}

.app-container {
    display: flex;
    min-height: 100vh;
}

div.mud-main-content.main-content {
    padding: 0;
    padding-top: 0 !important;
    margin-left: 240px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1000px){
    div.mud-main-content.main-content {
        margin-left: 0;
    }
}

.main-content {
    flex: 1;
    transition: margin-left 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--label-font);
    outline: none;
}

@media (max-width: 768px) {
    .main-content,
    .main-content.with-sub-sidebar {
        margin-left: 0;
        padding: 1rem;
    }
}


/* ================== */
/*      Fonts         */
/* ================== */
@font-face {
    font-family: 'Title-Font';
    font-display: auto;
    src: url('./Assets/Fonts/DancingScript-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Primary-Font';
    font-display: auto;
    src: url('./Assets/Fonts/Poppins-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Label-Font';
    font-display: auto;
    src: url('./Assets/Fonts/FiraCode-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Primary-Font-One';
    font-display: auto;
    src: url('./Assets/Fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Secondary-Font-One';
    font-display: auto;
    src: url('./Assets/Fonts/Lato-Regular.ttf') format('truetype');
}

/* ---------------- */
/* Icon picker grid */
/* ---------------- */
.category-icon-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-icon-option {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid transparent;
    background-color: var(--mud-palette-background-grey);
    transition: border-color 0.15s, background-color 0.15s;
}

    .category-icon-option:hover {
        border-color: var(--base-blue);
        background-color: var(--mud-palette-action-hover);
    }

    .category-icon-option.selected {
        border-color: var(--base-blue);
        background-color: color-mix(in srgb, var(--base-blue) 15%, transparent);
    }

    .category-icon-option .material-symbols-outlined {
        font-size: 22px;
        color: var(--mud-palette-text-primary);
    }

/* ------------------ */
/* Live preview badge */
/* ------------------ */
.category-icon-preview {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .category-icon-preview .material-symbols-outlined {
        font-size: 22px;
        color: white;
    }