@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/* https://preview.themeforest.net/item/ekash-personal-finance-management-admin-dashboard-nextjs-template/full_screen_preview/50078315?_ga=2.252662798.681830671.1731552450-1932140288.1731552450 */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* Root Setting */
/* Global Setting */
/* Tile */
/* Page Header */
/* Forms */
/* Tile Widths */
/* Top Menu */
/* Left Nav */
/* Cash Flow Page */
/* Expense Report Page */
/* Bank Detail Page */
/* Main Content */
/* Other Table Format */
/* Messages */
/* Login */
/* shorts */
/* switch */
/* Flex */
/* Budget App */
/* Containers */
/* Border */
/* Margin */
/* Row */
/* Home Page */
/* Asset Page */
/* Loan/Debt Page */
/* Cash Page */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Root Setting --------------------------------------------------- */
:root {
    --header-height-lg: 60px;
    --header-height-sm: 50px;

    /* colors */
    --blue: rgb(49,140,231); /* Blue de France */
    --blue-10: rgba(49,140,231, 0.1);
    --blue-50: rgba(49,140,231, 0.50);
    --red: rgb(220,20,60); /* Crimson */
    --red-10: rgba(220,20,60, 0.1);
    --red-50: rgba(220,20,60, 0.50);
    --orange: rgb(255,191,0); /* Amber */
    --orange-10: rgba(255,191,0, 0.1);
    --orange-50: rgba(255,191,0, 0.50);
    --purple: rgb(153,102,204); /* Amethyst */
    --purple-10: rgba(153,102,204, 0.1);
    --purple-50: rgba(153,102,204, 0.50);
    --green: rgb(50,205,50); /* lime Green */
    --green-10: rgba(50,205,50, 0.1);
    --green-50: rgba(50,205,50, 0.50);
    --green01: rgb(62,156,53);
    --green02: rgb(3,103,4);
    --dark-gray-025: rgba(152,152,152, .25);
    --dark-gray-050: rgba(152,152,152, .5);
    --dark-gray-100: #989898;
    --white: rgb(255,255,255);
    --white-25: rgb(255,255,255, 0.25);
    --white-50: rgb(255,255,255, 0.50);
    --white-75: rgb(255,255,255, 0.75);

    /* background colors */
    --bg-color-body: hsl(210, 50%, 98%);
    --bg-color-header: var(--blue);
    --bg-color-dropdown: #318CE7;
    --bg-color-container: white;
    --bg-color-title: var(--white-75);
    --bg-color-tile: hsl(0, 0%, 100%);
    
    /* box shadows */
    --shadow-tile: 0 1px 2px rgba(0,0,0,0.25);
    --box-shadow-cards: 0 1px 3px rgba(0,0,0,0.25);
    --box-shadow-cards-open: 0 2px 4px rgba(50,205,50,0.25);
    --box-shadow-cards-close: 0 2px 4px rgba(220,20,60,0.25);
    --box-shadow-titles: 0 1px 3px rgba(0,0,0,0.25);
    --box-shadow-containers: 0 3px 6px rgba(0,0,0,0.25);
    --box-shadow-tile-item: 0 3px 6px rgba(0,0,0,0.25);


    --bg-color-button: rgba(49,140,231, 0.25);

    /* borders */
    --border-radius-05-all: 5px;
    --border-radius-05-top: 5px 5px 0 0;
    --border-radius-05-bottom: 0 0 5px 5px;

    --border-color-main: rgba(0, 0, 0, 0.1);
    --border-color-negative: #dc143c;
    --border-color-positive: #32cd32;
    --border-color-budget: #318CE7;
    --border-color-pending: orange;

    --border-color-open: #32cd32;
    --border-color-close: #dc143c;

    /* fonts */
    /*  
    https://clamp-generator.netlify.app/
    https://websquadron.co.uk/font-clamp-generator/ 
        min: 400 max: 950px
    */
    --main-font: "Rubik", sans-serif;

    --fs-060: clamp(0.60rem, 0.60000rem + 0.000vw, 0.60rem);
    --fs-065: clamp(0.62rem, 0.61103rem + 0.035vw, 0.65rem);
    --fs-070: clamp(0.65rem, 0.63514rem + 0.058vw, 0.70rem);
    --fs-075: clamp(0.67rem, 0.64643rem + 0.092vw, 0.75rem);
    --fs-080: clamp(0.70rem, 0.67053rem + 0.115vw, 0.80rem);
    --fs-085: clamp(0.72rem, 0.68156rem + 0.150vw, 0.85rem);
    --fs-090: clamp(0.75rem, 0.70567rem + 0.173vw, 0.90rem);
    --fs-100: clamp(0.80rem, 0.65786rem + 0.552vw, 1.00rem); /* 1.00rem */
    --fs-tile-title: var(--fs-100);
    --fs-title-lg: var(--fs-100);
    --fs-title: var(--fs-100);
    --fs-head: var(--fs-080);
    --fs-row: var(--fs-075);

    --fw-300: 300;
    --fw-500: 500;
    --fw-600: 600;

    --fs-color-main: white;
    --fs-color-title-sub: var(--dark-gray-100);
    --fs-color-hover-links: #32cd32;

    /* width */
    --w-400: 400px;
    --w-600: 600px;
    --width-sub-body-med: clamp(400px, 60vw, 1000px);
    --width-sub-body-lg: clamp(400px, 75vw, 1500px);
    --width-sub-body-full: clamp(400px, 75vw, 100vw);

    --tile-width: clamp(25rem, 90.909vw + 2.273rem, 56.25rem); /* 400px / 900px */
    --tile-width-400: 400px; /* 400px / 425px*/
    --tile-width-800: clamp(25.625rem, 28.058vw + 18.435rem, 50rem); /* 400px / 425px*/
    --tile-width-wide: 100%;
    --width-full: 100%;
    --width-wide: calc(100% - 30px);

    /* margin */
     --margin-top: clamp(0.625rem, -0.20825rem + 3.333vw, 3.125rem); /* 5px min 50px max */
}

/* #endregion ------- Root Setting End   --------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Global Setting ------------------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    width: 100vw;
    padding-top: var(--header-height-lg);
    font-family: var(--main-font);
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--bg-color-body);
}

li {
    text-decoration: none;
    color: black;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: black;
}

table {
    border-collapse: collapse;
}

/* #endregion ------- Global Setting End --------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Tile ----------------------------------------------------------- */
.tile--page-header {
    /* border-bottom: solid 1px var(--border-color-main); */
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    background-color: var(--bg-color-tile);
}

@media screen and (max-width: 991px) {
    .tile--page-header {
        margin-bottom: 20px;
    }
}

.tile__group {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    background-color: var(--bg-color-tile);
    margin: 15px 30px 15px 15px;
}

@media screen and (max-width: 991px) {
    .tile__group {
        margin: 3px;
    }
}

.tile {
    padding: 15px;
    width: 100%;
}

.tile--form {
    padding: 15px;
    background-color: #fff;
    /* border: 1px solid #e0e0e0; */
    border-radius: 6px;
    margin-bottom: 15px;
}

.tile--form form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}

.tile--form form label {
    font-size: 0.8rem;
    color: var(--dark-gray-100);
}

.tile--form form input, select {
    border: 1px solid var(--dark-gray-100);
    border-radius: 3px;
    color: var(--dark-gray-100);
    padding: 0.5rem;
}

.tile--form form button.button--submit {
    grid-column: span 2;
    justify-self: start;
    width: 100%;
    border-radius: 3px;
    border: 1px solid var(--dark-gray-100);
    background-color: var(--green-50);
    padding: 0.5rem;
    font-weight: 600;
}

.tile_subtile {
    border: 1px solid var(--border-color-main);
    padding: 15px;
    width: 100%;
    background-color: var(--bg-color-tile);
    box-shadow: 1px 1px 3px 0 var(--border-color-main);
    margin-bottom: 15px;
}

.budget-divider {
    border-top: 1px dotted var(--border-color-main);
    margin: 15px 0;
}

.title {
    border-bottom: 1px solid var(--border-color-main);
    margin-bottom: 10px;
}

.tile__title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: var(--fs-tile-title);
    font-weight: 500;
    margin-bottom: 15px;
}

.tile__subtitle {
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 0.8em;
}

.tile__title-sub {
    color: var(--fs-color-title-sub);
    text-transform: lowercase;
}

.tile__title-lg {
    display: flex;
    justify-content: space-between;
    width: 100%;
    text-transform: uppercase;
    font-size: var(--fs-title);
}

.tile__title-lg-no-sp {
    display: flex;
    width: 100%;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.tile__row--head-sticky {
    font-size: var(--fs-head);
    padding: 3px 5px;
}

.tile__row {
    position: relative;
    display: flex;
}

.tile__row--spaced-between {
    display: flex;
    justify-content: space-between;
}

.tile__row--center {
    display: flex;
    justify-content: center;
}

.tile__row--right {
    display: flex;
    justify-content: right;
}

.tile__row--middle {
    display: flex;
    align-items: center;
}

.tile__row--column {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.tile__row--wrap {
    display: flex;
    flex-wrap: wrap;
}

.tile__row--head {
    font-size: var(--fs-head);
    padding: 7px 5px;
    margin: 2px 0px;
}

.tile__row--head-short {
    font-size: var(--fs-head);
    padding: 1px 5px;
    margin: 1px 0px;
}

.tile__row--head-med {
    font-size: var(--fs-head);
    padding: 7px 5px;
    margin: 2px 0px;
}

.tile__row--row-xshort {
    font-size: var(--fs-row);
    padding: 2px 5px;
    margin: 2px 0px;
}

.tile__row--row-short {
    font-size: var(--fs-row);
    padding: 5px 5px;
    margin: 2px 0px;
}

.tile__row--row-med {
    font-size: var(--fs-row);
    padding: 10px 5px;
    margin: 2px 0px;
}

.tile__row--row-tall {
    font-size: var(--fs-row);
    padding: 15px 5px;
    margin: 2px 0px;
}

.tile__row--foot {
    font-size: var(--fs-080);
    font-weight: var(--fw-500);
    padding: 3px 5px 0px 5px;
}

.tile__row--divider-top {
    border-top: 1px solid lightgray;
}

.tile__row--divider-bottom {
    border-bottom: 1px solid lightgray;
}

.tile__row--blue-10 {
    background-color: var(--blue-10);
}

.tile__row--blue-50 {
    background-color: var(--blue-50);
}

.tile__row--orange-10 {
    background-color: var(--orange-10);
}

.tile__row--orange-50 {
    background-color: var(--orange-50);
}

.tile__row--purple-10 {
    background-color: var(--purple-10);
}

.tile__row--purple-50 {
    background-color: var(--purple-50);
}

.tile__row-link {
    text-decoration: none; /* Remove underline for the link */
    color: inherit; /* Inherit text color */
    display: block; /* Make the link act as a block element */
}

.tile__row-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.tile__cell {
    width: 10%;
    background-color: salmon;
}

.tile__cell--spacer-narrow {
    padding: 0px 5px 0px 2px;
}

.tile__cell--spacer {
    padding: 0px 25px 0px 10px;
}

.tile__cell--align-left {
    text-align: left;
}

.tile__cell--align-right {
    text-align: right;
}

.tile__cell--w22 {
    width: 22%;
}

.tile__cell--w25 {
    width: 25%;
}

.tile__cell--w30 {
    width: 30%;
    padding: 0px 3px;
}

.tile__cell--grow {
    flex-grow: 1;
}

.tile__cell--amount {
    color: red;
}

/* still being used. need to remove eventually*/
.tile__body {
    font-size: var(--fs-080);
    padding: 0px 5px;
}

.tile__icon {
    position: absolute;
    display: flex;
    top: 2px;
    right: 5px;
}

.tile__icon--edit {
    background: none;
    border: none;
    cursor: pointer;
    font-size: small;
    padding-right: 5px;
    color: var(--blue);
}

.tile__icon--open-close {
    background: none;
    border: none;
    cursor: pointer;
    padding-right: 10px;
    color: var(--blue);
}


/* #endregion ------- Tile End ------------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Page Header ---------------------------------------------------- */

.page-header--title {
    font-size: var(--fs-title-lg, 1.25rem);
    font-weight: var(--fw-600);
    margin: 0;
    color: var(--dark-gray-100);
}

.page-header-link {
    display: inline-block;
    color: #2e2e2e;
    background-color: transparent;
    padding: 4px 8px;
    font-size: 0.75rem;
    /* font-weight: 500; */
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.page-header-link:hover {
    background-color: #f0f0f0;
    color: #000;
    border-color: #ccc;
}

.modal-action-link i {
    margin-right: 2px;
}

.modal-action-link {
    display: inline-block;
    color: #2e2e2e;
    background-color: transparent;
    padding: 4px 8px;
    font-size: 0.8rem;
    /* font-weight: 500; */
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.modal-action-link:hover {
    background-color: #f0f0f0;
    color: #000;
    border-color: #ccc;
}

.cash-action-link i {
    margin-right: 4px;
}

    /* Action Button */
.asset-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.asset-action-link {
    display: inline-block;
    padding: 3px 6px;
    font-size: var(--fs-075);
    text-decoration: none;
    border: 1px solid;
}

.asset-action--edit {
    color: var(--orange);
    border-color: var(--orange);
    background-color: var(--orange-10);
}

.asset-action--add {
    color: var(--green);
    border-color: var(--green);
    background-color: var(--green-10);
}



/* #endregion ------- Page Header ---------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Forms ---------------------------------------------------------- */
.form--budget {
    display: flex;
    flex-direction: column;
}

.form__select {
    border: 1px solid var(--dark-gray-100);
    border-radius: 3px;
    padding: 7px;
    color: var(--dark-gray-100);
    margin-bottom: 10px;
    font-size: var(--fs-070);
}

.form__option {
    border: 1px solid var(--dark-gray-100);
    border-radius: 3px;
    padding: 7px;
    margin-bottom: 10px;
    font-size: var(--fs-070);
}

.form__input {
    border: 1px solid var(--dark-gray-100);
    border-radius: 3px;
    padding: 7px;
    color: var(--dark-gray-100);
    margin-bottom: 10px;
    font-size: var(--fs-070);
    width: 100%;
}

.form__input--half-width {
    width: 49%;
}


.form__input--submit {
    border: 1px solid var(--dark-gray-100);
    border-radius: 3px;
    background-color: var(--green-50);
    width: 100%;
    padding: 7px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: var(--fs-080);
}

.form__input--delete {
    border: 1px solid var(--dark-gray-100);
    border-radius: 3px;
    background-color: var(--red-50);
    width: 100%;
    padding: 7px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: var(--fs-080);
}

.form__input--cancel {
    border: 1px solid var(--dark-gray-100);
    border-radius: 3px;
    background-color: var(--bg-color-button);
    width: 100%;
    padding: 7px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: var(--fs-080);
}

.form--in-report {
    display: flex;
    flex-direction: column;
    font-size: var(--fs-070);
    color: var(--dark-gray-100);
    padding: 5px 10px;
    margin-bottom: 10px;
}

.form--in-budget {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: var(--fs-070);
    color: var(--dark-gray-100);
    padding: 5px 10px;
    margin-bottom: 10px;
}

.form__label {
    display: flex;
}

.form__label--half-width {
    width: 49%;
}

/* #endregion ------- Forms ---------------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Tile Widths ---------------------------------------------------- */

.width-wide {
    width: calc(100% - 15px);
}

.width-full {
    width: 100%;
}

.tile-width-400 {
    width: 400px;
}

@media screen and (max-width: 991px) {
    .width-wide {
        width: 100%;
    }
}

/* #endregion Tile Widths End -------------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Top Menu ------------------------------------------------------- */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 2px 8px hsla(220, 68%, 12%, .1);
    z-index: 1000;
    height: var(--header-height-lg);
    background-color: var(--bg-color-header);
}

.nav {
    height: var(--header-height-lg);
    color: var(--fs-color-main);
}

.nav__data {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__logo {
    display: inline-flex;
    align-items: center;
    column-gap: .25rem;
    transition: color .3s;
    color: var(--fs-color-main);
}

.nav__logo i {
    font-size: 1.25rem;
}

.nav__logo:hover {
    color: var(--fs-color-hover-links);
}

.nav__toggle {
    position: relative;
    width: 32px;
    height: 32px;
}

.nav__toggle-menu,
.nav__toggle-close {
    font-size: 2rem;
    position: absolute;
    display: grid;
    place-items: center;
    inset: 0;
    cursor: pointer;
    transition: opacity .1s, transform .4s;
}

.nav__toggle-close {
    opacity: 0;
}

@media screen and (max-width: 991.98px) {
    .nav {
        height: var(--header-height-sm);
    }

    .nav__menu {
        position: absolute;
        left: 0;
        top: 3.5rem;
        width: 100%;
        height: calc(100vh - 3.5rem);
        overflow: auto;
        padding-block: 1.5rem 4rem;
        background-color: var(--bg-color-dropdown);
        pointer-events: none;
        opacity: 0;
        transition: top .4s, opacity .3s;
    }
    
    .nav__menu::-webkit-scrollbar{
        width: 1rem;
    }

    .nav__menu::-webkit-scrollbar-thumb {
        background-color: hsl(220, 12%, 70%);
    }

    .nav__data {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-left: 1rem;
        padding-right: 0.5rem;
    }    

}

.nav__link {
    padding: .5rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color .3s;
    font-size: 1rem;
    color: var(--fs-color-main);
}

.nav__link:hover {
    color: var(--fs-color-hover-links);
}

.show-menu {
    opacity: 1;
    top: 3.5rem;
    pointer-events: initial;
}

.show-icon .nav__toggle-menu{
    opacity: 0;
    transform: rotate(90deg);
}

.show-icon .nav__toggle-close {
    opacity: 1;
    transform: rotate(90deg);
}

.dropdown__button {
    cursor: pointer;
}

.dropdown__button:hover {
    color: #31e78c;
}

.dropdown_arrow {
    font-size: 1.5rem;
    font-weight: bold;
    transition: transform .4s;
}

.dropdown__content,
.dropdown__group,
.dropdown__list {
    display: grid;
}

.dropdown__container {
    background-color: var(--bg-color-dropdown);
    height: 0;
    overflow: hidden;
    transition: height .4s;
}

.dropdown__content {
    row-gap: 1.75rem;
}

.dropdown__group {
    padding-left: 2.5rem;
    row-gap: .5rem;
}

.dropdown__group:first-child {
    margin-top: 1.25rem;
}

.dropdown__group:last-child {
    margin-bottom: 1.25rem;
}

.dropdown__icon {
    width: 28px;
    height: 28px;
    background-color: white;
    border-radius: 50%;
    display: flex; /* Enables centering */
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #318CE7;
}

.dropdown__list {
    row-gap: .25rem;
}

.dropdown__link {
    color: var(--fs-color-main);
    transition: color .3s;
    font-size: 1rem;
}

.dropdown__link:hover {
    color: var(--fs-color-hover-links)
}

.show-dropdown .dropdown__arrow {
    transform: rotate(180deg);
}

@media screen and (max-width: 300px) {
    .dropdown__group {
        padding-left: 1.5rem;
    }
    
}

@media screen and (min-width: 992px) {
    .nav {
        height: var(--header-height-lg);
        display: flex;
        justify-content: space-between;
    }

    .nav__toggle {
        display: none;
    }

    .nav__list {
        display: flex;
        column-gap: 3rem;
        height: 100%;
    }

    .nav li {
        display: flex;
    }

    .nav__link {
        padding: 0;
    }

    .nav__link:hover{
        background-color: initial;
    }

    .dropdown__button {
        column-gap: .25rem;
        pointer-events: none;
    }

    .dropdown__container {
        height: max-content;
        position:absolute;
        left: 0;
        right: 0;
        top: var(--header-height-lg);
        background-color: var(--bg-color-dropdown);
        box-shadow: 0 6px 8px hsla(220, 68%, 12%, .05);
        pointer-events: none;
        opacity: 0;
        transition: top .4s, opacity .3s;
    }

    .dropdown__content {
        grid-template-columns: repeat(4, max-content);
        column-gap: 6rem;
        max-width: 1120px;
        margin-inline: auto;
    }

    .dropdown__group {
        padding: 4rem 0;
        align-content: baseline;
        row-gap: 1.25rem;
    }

    .dropdown__group:first-child,
    .dropdown__group:last-child {
        margin: 0;
    }
    .dropdown__list {
        row-gap: .75rem;
    }

    .dropdown__icon {
        width: 60px;
        height: 60px;
        background-color: white;
        border-radius: 50%;
        display: flex; /* or grid */
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
    }

    .dropdown__icon i {
        font-size: 1.8rem;
        line-height: 1;
        display: inline-block;
        color: #318CE7;
    }

    .dropdown__link:hover {
        color: var(--fs-color-hover-links);
    }

    .dropdown__item{
        cursor: pointer;
        color: #318CE7;
    }

    /* rotate dropdown */
    .dropdown__item:hover .dropdown__arrow{
        transform: rotate(180deg);
        color: var(--fs-color-hover-links);
    }

    /* show dropdown menu */
    .dropdown__item:hover > .dropdown__container {
        top: var(--header-height-lg);
        opacity: 1;
        pointer-events: initial;
        cursor: initial;
    }

        .quickentry__shortcut {
        display: none;
    }

}

.quickentry__shortcut a {
    color: var(--fs-color-main);
}

.quickentry__shortcut:hover a {
    color: var(--fs-color-hover-links);
}

.nav__logo-img {
    height: 60px; /* Scales the 1024px image down */
    width: auto;  /* Maintains aspect ratio */
    margin-right: 0.25rem;
    vertical-align: middle;
    display: inline-block;
}

/* #endregion Top Menu end ------------------------------------------------------------------ */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Left Nav ------------------------------------------------------- */

/* .left-nav__collapsible {
    padding-bottom: 8px;
} */

.left-nav__collapsible summary {
    list-style: none; /* Remove default triangle */
}

.left-nav__collapsible summary::-webkit-details-marker {
    display: none; /* Chrome/Safari */
}

.collapse-icon {
    margin-left: 6px;
    font-size: 0.8em;
    transition: all 0.2s ease;
}

/* Rotate the arrow when collapsed */
.left-nav__collapsible:not([open]) .collapse-icon {
    content: ''; /* Font Awesome swap via class */
    font-family: "Font Awesome 5 Free"; /* or 6 if you're using latest */
    font-weight: 900;
}

.left-nav__collapsible:not([open]) .collapse-icon::before {
    content: "\f067"; /* fa-plus */
}

.left-nav__collapsible[open] .collapse-icon::before {
    content: "\f068"; /* fa-minus */
}

.left-nav__row-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0px 5px 0px;
}

.left-nav__row-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 5px 5px 15px;
    font-size: 0.8em;
}

.left-nav__row-data:hover {
    background-color: rgba(0, 0, 0, 0.05);
}



.left-nav__group-account-type {
    padding: 0px 0px 20px 0px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.left-nav__title--net-worth {
    padding-bottom: 10px;
    margin-bottom: 10px;
    display: flex;
    width: 100%;
    font-size: var(--fs-tile-title);
    font-weight: 500;
    text-transform: uppercase;
}

.left-nav__title {
    display: flex;
    width: 100%;
    font-size: var(--fs-tile-title);
    font-weight: 500;
}

.left-nav__group-account {
    display: flex;
    flex-direction: column;
    font-size: var(--fs-head);
    width: 100%;
}

.left-nav__each-account {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0px 0px 10px;
    width: 100%;
}

.left-nav__each-account:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* #endregion Left Nav End ----------------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Cash Flow Page ------------------------------------------------- */

.cashflow__body {
    display: flex;
    flex-direction: column;
    margin-top: var(--margin-top);
    font-size: var(--fs-sm);
    width: var(--width-sub-body-lg);
    height: 100%;
}

.cashflow__container {
    box-shadow: var(--box-shadow-containers);
    width: 100%;
    }

.cashflow__title {
    display: flex;
    width: 100%;
    /* background-color: var(--bg-color-title); */
    font-weight: var(--fw-500);
    font-size: var(--fs-lg);
    border-bottom: 1px solid lightgray;
    border-radius: var(--border-radius-05-top);
    padding: 5px;
    margin-bottom: 10px;
}

.cashflow-option__container {
    width: 100%;
    padding: 10px;
}

.cashflow-option__container form{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.cashflow-tbl__container {
    width: 100%;
    background-color: var(--bg-color-container);
    padding: 5px 0;
    margin-bottom: 5px;
    overflow-x: auto;
}

.cashflow-tbl__table {
    min-width: 1500px;
}

.cashflow-tbl__head {
    display: flex;
    min-width: 1500px;
    border-bottom: 1px solid lightgray;
    font-weight: var(--fw-500);
}

.cashflow-tbl__body {
    min-width: 1500px;
    font-size: var(--fs-sm);
    padding-top: 25px;
}

.cashflow-tbl__body-container {
    display: flex;
    width: 100%;
}

.cashflow-tbl__body-categories {
    padding-left: 5px;
    width: 350px;
    /* border: 1px solid red; */
}

.cashflow-tbl__body-amounts {
    text-align: right;
    width: 180px;
    /* border: 1px solid red; */
    padding: 2px;
}

.cashflow-tbl__body-total {
    text-align: right;
    width: 200px;
    /* background-color: salmon; */
    padding-right: 10px;
}

.sticky-column {
    position: sticky;
    left: 0;
    background-color: #fff; /* Ensure background color to cover the content behind */
    z-index: 1; /* Ensure it stays above other content */
}

/* #endregion Cash Flow Page End ----------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Expense Report Page -------------------------------------------- */


.tile__body.exp-filter {
    width: 100%;
    padding: 10px 10px 10px 5px;
}

.tile__body.exp-filter form {
    display: flex;
    width: 100%;

    & select {
        margin-right: 10px;
        width: 15%;
        padding: 3px;
        border: 1px solid var(--secondary-border-color);
        outline: none;
    }

    & button {
        width: 15%;
        border: 1px solid var(--secondary-border-color);
        background-color: var(--bg-color-button);
    }
}


.tile__body.exp-table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.expense-report-tbl__row {
    display: flex;
}

.expense-report-tbl__row.head {
    font-size: var(--fs-sm);
    font-weight: var(--fw-500);
    border-bottom: 1px solid lightgray;
    margin-bottom: 15px;
}

.expense-report-tbl__row.total {
    font-size: var(--fs-sm);
    font-weight: var(--fw-500);
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    margin-bottom: 15px;
}

.expense-report-tbl__row.net {
    font-size: var(--fs-sm);
    font-weight: var(--fw-500);
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    margin-top: 15px;
}

.expense-report-tbl__cell {
    font-size: var(--fs-xs);
}

.expense-report-tbl__cell.category {
    width: 33%;
    padding-left: 5px;
}

.expense-report-tbl__cell.posted {
    width: 21%;
    text-align: right;
}

.expense-report-tbl__cell.budget {
    width: 21%;
    text-align: right;
}

.expense-report-tbl__cell.diff {
    width: 24%;
    text-align: right;
    padding-right: 5px;
}

/* #endregion Expense Report Page End ------------------------------------------------ */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Bank Detail Page ----------------------------------------------- */

.AccountDetailBalanceChart {
    width: 100% !important;
    height: 200px !important;
}

/* #endregion Bank Detail Page End --------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Main Content --------------------------------------------------- */


.font-header {
    padding: 4px 10px;
    font-weight: 600;
    align-self: flex-start;
}

.sub-content {
    padding: 15px 15px 25px 15px;
    align-self: flex-start;
}

.home-content {
    padding: 5px 10px;
}

.home-sub-content {
    padding: 15px 15px 25px 15px;
}

/* #endregion Main Content End ------------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Other Table Format --------------------------------------------- */

.amount-net-01 {
    font-weight: var(--fw-500);
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}


.amount-net-02 {
    font-weight: var(--fw-500);
    border-top: 2px solid lightgray;
    border-bottom: 2px solid lightgray;
}

.amount-total {
    font-weight: var(--fw-500);
}


.amt {
    text-align: right;
}

.amt-red {
    color: red;
    text-align: right;
}

.ttl {
    font-weight: bold;
    padding: 2px 1px;
    border-top: 2px solid lightgray;
    border-bottom: 2px solid lightgray;
}

/* #endregion Other Table Format End ------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Messages ------------------------------------------------------- */
.messages {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.message-success {
    color: #155724;
    /* border: 1px solid #155724;
    border-radius: 3px; */
    padding: 5px 10px;
    margin: 10px 0;
    font-size: var(--fs-085);
    text-align: center;
    max-width: 100%;
}

.no-account-message {
    padding: 30px;
    margin: 20px auto;
    text-align: center;
    background-color: var(--blue-10);
    color: var(--dark-gray-100);
    border: 1px solid var(--border-color-main);
    border-radius: 6px;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.no-account-message .subtext {
    font-size: 0.9em;
    color: var(--dark-gray-050);
    margin-top: 10px;
}

.message-container {
    margin-bottom: 1rem;
}

.message {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: var(--fs-085);
}

.message--success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message--warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.message--error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.form-errors {
    background-color: #ffe6e6;
    border: 1px solid #cc0000;
    padding: 10px;
    margin-bottom: 1rem;
    border-radius: 5px;
    color: #990000;
}

/* #endregion Messages End ----------------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Login ---------------------------------------------------------- */

.login__body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    padding-top: 350px;
    /* background-color: #03a9f4;  */
}

.login__wrapper {
    position: relative;
    top: 0;
    left: 0;
    min-width: 400px;
    height: 500px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--box-shadow-containers);
    margin: 20px;
    border: 1px solid lightgray;
}

.login__wrapper .form {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 50px;
    transition: 0.5s;
}

.login__wrapper .form form {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.login__wrapper .form form h3 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 20px;
    font-weight: 500;
}

.login__wrapper .form form input {
    width: 100%;
    margin-bottom: 20px;
    padding: 10px;
    outline: none;
    border: 1px solid lightgray;
}

.login__wrapper .form form input[type="submit"] {
    border: 1px solid lightgray;
    color: black;
    max-width: 100px;
    cursor: pointer;
}

.login__wrapper .form form .forgot {
    color: #333;

}

@media (max-width: 575.98px) {

    .login__wrapper {
        min-width: 400px;
        height: 500px;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
    }

}

@media (min-width: 992px) {

    .login__wrapper {
        min-width: 400px;
        height: 500px;
        top: 0;
        box-shadow: var(--box-shadow-containers);
        display: flex;
        justify-content: center;
        align-items: center;
    }

}

     /* Login Page 1 */

.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
}

.login-box {
    background: #fff;
    border: 1px solid #ddd;
    padding: 0px 40px 30px 40px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
}

.back_button {
    display: flex;
    justify-content: flex-end;  /* Aligns content to the right */
    margin-top: 10px;        /* Optional spacing */
}

.back-button-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: white;
    color: #226bbd;
    text-decoration: none;
    border-radius: 4px;
    /* font-weight: 500; */
}

.text_header {
    text-align: center;
    margin-bottom: 20px;
    font-weight: 500;
}

.text_forgot {
    font-size: 0.7em;
}

.text_register {
    text-align: center;
    font-size: 0.7em;
    margin-top: 10px;
}

.text_sub_register {
    font-weight: 500;
}

.form-row {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.form-row label {
    /* font-weight: 500; */
    font-size: 0.7em;
    margin-bottom: 5px;
}

.form-row input {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.checkbox-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.login-btn {
    width: 100%;
    padding: 10px;
    background: #318CE7;
    color: white;
    border: none;
    border-radius: 4px;
    /* font-weight: 600; */
    cursor: pointer;
    transition: background 0.2s;
}

.login-btn:hover {
    background: #226bbd;
}

.divider {
    text-align: center;
    margin: 20px 0;
    font-size: 0.9rem;
    color: #777;
}

.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #ccc;
    padding: 8px;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
    /* font-weight: 500; */
    background: #f9f9f9;
    transition: background 0.2s;
}

.google-btn:hover {
    background: #efefef;
}

.google_logo-img {
    height: 20px;
    width: auto;
    display: inline-block;
}

.text_google {
    font-size: 0.8em;
}

.login_logo-wrapper {
    text-align: center;
    /* margin-bottom: 20px; */
}

.kuarta_login_logo-img {
    height: 120px;
    width: auto;
    display: inline-block;
}


   /* Login Page 2 */
.social-confirm-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
}

.social-confirm-box {
    background: white;
    border: 1px solid #ccc;
    padding: 30px 40px;
    max-width: 450px;
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.btn-confirm {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #226bbd;
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-confirm:hover {
    background-color: #1a5697;
}

     /* Register */
.auth-box {
    max-width: 420px;
    margin: 50px auto;
    background: white;
    padding: 30px 40px;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.auth-header h2 {
    margin-bottom: 8px;
}

.auth-header p {
    font-size: 0.9rem;
    margin-bottom: 25px;
}

.form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.form-field label {
    margin-bottom: 6px;
    font-weight: 500;
}

.form-field input {
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.password-help {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 15px;
}

.btn-primary {
    width: 100%;
    padding: 10px;
    background-color: #226bbd;
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #1a5697;
}

.social-login {
    text-align: center;
}


/* #endregion Login End -------------------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Short ---------------------------------------------------------- */

.custom_01 {
    font-size: var(--fs-075);
    font-weight: var(--fw-500);
    color: var(--blue);
}

.custom_01 a {
    font-size: var(--fs-075);
    font-weight: var(--fw-500);
    color: var(--blue);
}

.custom_02 {
    font-size: var(--fs-075);
    font-weight: var(--fw-500);
}

.custom_03 {
    font-size: var(--fs-060);
}

.legend-01 {
    font-size: var(--fs-060);
    padding: 0px 3px;
    margin: 0px 2px;
}

/* #endregion Short End -------------------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Switch and Toggles --------------------------------------------- */
/* The switch - the box around the slider */
.switch-small {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 12px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
}

.switch__input {
opacity: 0;
width: 0;
height: 0;
}

.switch-small__slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--red);
transition: .4s;
}    

.switch__slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--red);
transition: .4s;
}

.switch-small__slider:before {
    position: absolute;
    content: "";
    height: 8px;
    width: 8px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    }
    

.switch__slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .4s;
}

.switch__input:checked + .switch__slider {
background-color: var(--green);
}

.switch__input:checked + .switch-small__slider {
background-color: var(--green);
}
    

.switch__input:focus + .switch__slider {
box-shadow: 0 0 1px var(--green);
}

.switch__input:focus + .switch-small__slider {
box-shadow: 0 0 1px var(--green);
}    

.switch__input:checked + .switch__slider:before {
transform: translateX(13px);
}

.switch__input:checked + .switch-small__slider:before {
transform: translateX(9px);
}    

/* Rounded sliders */
.switch-round {
border-radius: 34px;
}

.switch-round:before {
border-radius: 50%;
}


/* #endregion --- Switch and Toggles ------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Flex ----------------------------------------------------------- */

.flex-spread {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}


.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* #endregion Flex End --------------------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Budget App ----------------------------------------------------- */
.tile__row--closed {
    background-color: #f9f9f9;
    opacity: 0.8;
}

.toggle-button {
    background-color: transparent;
    border: none;
    color: #555;
    cursor: pointer;
    font-size: 0.7em;
    margin-bottom: 10px;
}

.toggle-button:hover {
    text-decoration: underline;
}

/* #endregion Budget App End --------------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Containers ----------------------------------------------------- */

.container {
    display: flex;
}

.left-nav__container {
    max-width: 300px;
    width: 100%;
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;

    /* Fix this section in place */
    position: fixed;
    left: 0;   /* or 'fixed' if you want it to float */
    top: 60px;

    height: 100vh;       /* full viewport height */
    overflow-y: auto;    /* vertical scroll if needed */
    border-right: 1px solid var(--border-color-main);
    background-color: white; /* optional: needed if content scrolls under */
    z-index: 1;          /* ensure it's on top of background */
}

.main__container {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    /* margin-top: var(--margin-top); */
    font-size: var(--fs-100);
    margin-left: 300px;   /* Offset for fixed sidebar */
    width: calc(100% - 300px); /* Take the remaining width */
}

@media screen and (max-width: 991px) {
    .left-nav__container {
        display: none;
    }

    .main__container {
        padding: 0;
        width: 100%;
        margin-left: 0;
    }
}

/* #endregion Containers End --------------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Borders -------------------------------------------------------- */

.border {
    border: 1px solid var(--border-color-main);
    border-radius: 5px;
}

/* #endregion Border End ------------------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Margin --------------------------------------------------------- */

.full-margin {
    margin: 15px;
}

@media screen and (max-width: 991px) {
    .full-margin {
        margin: 0;
        margin-bottom: 15px;
    }
}

.margin-full {
    margin: 15px;
}

@media screen and (max-width: 991px) {
    .margin-full {
        margin: 0;
        margin-bottom: 15px;
    }
}

/* #endregion Margin End ------------------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Row ------------------------------------------------------------ */

.row {
    font-size: 1em;
    border-bottom: 1px solid var(--border-color-main);
    padding: 15px 5px 15px 5px;
}

.row--head {
    font-weight: 500;
    border-bottom: 1px solid var(--border-color-main);
    padding: 0px 5px 10px 5px;
    font-size: 1.1rem;
}

.row--date {
    font-size: 0.9rem;
    padding: 10px 15px 2px 15px;
}

.row--posted {
    font-size: 0.8rem;
    padding: 10px 15px;
    margin: 2px 5px;
    background-color: var(--blue-10);
}

.row--pending {
    font-size: 0.8rem;
    padding: 10px 15px;
    margin: 2px 5px;
    background-color: var(--orange-10);
}

.row--budget {
    font-size: 0.8rem;
    padding: 10px 15px;
    margin: 2px 5px;
    background-color: var(--purple-10);
}

.row-group {
    display: flex;
}

.row-group.column {
    display: flex;
    flex-direction: column;
}

.row--clickable {
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}
.row--clickable:hover {
    background-color: #f2f2f2;
    cursor: pointer;
}

/* #endregion Row End ---------------------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Home Page ------------------------------------------------------ */

.chart-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.chart-label-left {
    color: #333;
}

.chart-label-right {
    text-align: right;
    color: #444;
    font-family: 'Poppins', sans-serif;
}

.chart-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid #eee;
}

.chart-header-label {
    font-weight: 600;
    color: #222;
}

.chart-header-values {
    text-align: right;
    font-size: 0.85rem;
    line-height: 1.3;
    color: #444;
}

.chart-header-values span {
    display: inline-block;
    margin-left: 0.25rem;
}

.chart-canvas {
    width: 100%;
    max-height: 50px;
    height: auto;
}

.chart-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.chart-nav-left,
.chart-nav-right {
    width: 25%;
    text-align: left;
}

.chart-nav-right {
    text-align: right;
}

.chart-nav-center {
    width: 50%;
    font-weight: 600;
    font-size: 1.1rem;
}

/* #endregion Home Page End ---------------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Asset Page ----------------------------------------------------- */


.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.align-middle {
    vertical-align: middle;
}

.no-data {
    text-align: center;
    font-style: italic;
}

.asset-subtext {
    font-size: 0.85em;
    color: var(--dark-gray-100); /* optional: soften text color */
}

.asset-status-closed {
    color: var(--red);
    font-size: 0.85em;
    font-weight: 500;
    font-style: italic;
    text-transform: uppercase;
}

    /* Transaction Table */
.asset-transactions {
    width: 100%;
    border-collapse: collapse;
}

.asset-transactions th,
.asset-transactions td {
    padding: 0.5em 1em;
    border-bottom: 1px solid #ddd;
}

.asset-transactions tr.hover--asset:hover {
    background-color: #eef;
}

.header-row th {
    background: #f5f5f5;
    font-weight: bold;
}

.row-light {
    background: #fff;
}

.row-dark {
    background: #fafafa;
}

    /* Summary Toggle (details/summary) */
.transaction-summary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
    padding: 0.5em 0;
    font-size: 0.9em;
    width: 100%;
    border-top: 1px dotted var(--border-color-main, #ccc);
    list-style: none;
}

.transaction-summary .fa-chevron-up {
    display: none;
}

details[open] .transaction-summary .fa-chevron-down {
    display: none;
}

details[open] .transaction-summary .fa-chevron-up {
    display: inline-block;
}

    /* Hover Effects */
.hover--asset {
    transition: background-color 0.2s, box-shadow 0.2s;
}

.hover--asset:hover {
    background-color: var(--hover-bg, #f5f5f5); /* fallback if CSS var not defined */
    cursor: pointer;
}

.new-transaction-button {
    display: none;
}

    /* Modal Styles */
.asset-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1000;
}

.asset-modal__content {
    background: #fff;
    padding: 1.5em;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.asset-modal__content {
    background: #fff;
    padding: 1.5em;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    position: relative;
    animation: asset-slide-down 0.4s ease;
}

@keyframes asset-slide-down {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.asset-modal__close {
    position: absolute;
    top: 1em; right: 1em;
    font-size: 1.2em;
    text-decoration: none;
}

    /* Form Styling */
.form-row__inputs input,
.form-row__inputs select {
    padding: 0.3em 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-row__actions button,
.form-row__actions .button--secondary {
    padding: 0.3em 0.8em;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.button--secondary {
    background: transparent;
    border: 1px solid #ccc;
}

.asset-modal:target {
    display: flex;
    align-items: center;
    justify-content: center;
}


.asset-modal__close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    color: #aaa;
    text-decoration: none;
    cursor: pointer;
}

.asset-modal__close:hover {
    color: black;
}

.asset-modal__submit {
    background-color: #007bff;
    color: white;
    padding: 10px 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.asset-modal__submit:hover {
    background-color: #0056b3;
}

.asset-modal__message {
    margin-bottom: 1em;
    color: green;
}


/* #endregion Asset Page End --------------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Loan/Debt Page ------------------------------------------------- */

.loan-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loan-modal:target {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loan-modal__content {
    background: #fff;
    padding: 1.5em;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.loan-modal__close {
    position: absolute;
    top: 1em; right: 1em;
    font-size: 1.2em;
    text-decoration: none;
}

.loan-modal__submit {
background-color: #007bff;
color: white;
padding: 10px 18px;
border: none;
border-radius: 5px;
text-decoration: none;
cursor: pointer;
}

.loan-modal__submit:hover {
background-color: #0056b3;
}

.no-loan-message .subtext {
    font-size: 0.9em;
    color: var(--dark-gray-050);
    margin-top: 10px;
}

.loan-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.loan-action-link {
    display: inline-block;
    padding: 3px 6px;
    font-size: var(--fs-075);
    text-decoration: none;
    border: 1px solid;
}

.loan-action--add {
    color: var(--green);
    border-color: var(--green);
    background-color: var(--green-10);
}

/* Loan Tiles */
.tile__group--loan {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.tile--loan {
    padding: 15px;
    background-color: var(--bg-color-tile, #fff);
    border: 1px solid var(--border-color-main, #ccc);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}


.text-muted {
    color: var(--dark-gray-050);
}

.modal-cancel-button {
    margin-left: 10px;
    background-color: transparent;
    border: 1px solid var(--border-color-main, #ccc);
    color: var(--dark-gray-100);
    padding: 10px 18px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
}

.modal-cancel-button:hover {
    background-color: var(--blue-10);
}

.button--danger {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 5px;
    cursor: pointer;
}

.button--danger:hover {
    background-color: #b02a37;
}

.navigation-bar {
    margin-bottom: 1rem;
}

.btn-back {
    display: inline-block;
    padding: 8px 16px;
    font-size: 0.95rem;
    background-color: var(--blue-10, #f0f8ff);
    color: var(--dark-gray-100, #333);
    border: 1px solid var(--border-color-main, #ccc);
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.btn-back:hover {
    background-color: var(--blue-20, #e0f0ff);
}


.debt-detail__tile {
    background: #fff;
    border: 1px solid var(--border-color-main, #ccc);
    border-radius: 6px;
    padding: 1.5em;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.debt-detail__tile h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--dark-gray-100);
    margin-bottom: 1rem;
}

.debt-detail__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.debt-detail__table th,
.debt-detail__table td {
    padding: 0.75em 1em;
    border-bottom: 1px solid #ddd;
    text-align: right;
}

.debt-detail__table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

.debt-detail__table td:first-child,
.debt-detail__table th:first-child {
    text-align: left;
}

.paid {
    background-color: #e6f9e6; /* light green */
    color: #275d27; /* dark green text */
}

/* #endregion Loan/Debt Detail End --------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Cash Page ------------------------------------------------------ */


/* Modal base */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.modal:target {
    display: block;
}

/* Modal content */
.modal-content {
    background: white;
    width: 90%;
    max-width: 500px;
    margin: 100px auto;
    padding: 20px;
    border-radius: 6px;
    position: relative;
}

.close-button {
    position: absolute;
    top: 10px; right: 15px;
    text-decoration: none;
    font-size: 24px;
}

.cash-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

.cash-modal:target {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cash-modal__content {
    background-color: var(--bg-color-container);
    padding: 20px;
    border-radius: var(--border-radius-05-all);
    box-shadow: var(--box-shadow-containers);
    max-width: 400px;
    width: 90%;
    font-family: var(--main-font);
}

.cash-modal__content h2 {
    margin-bottom: 15px;
    font-size: var(--fs-title-lg);
    text-align: center;
}

.cash-export-form label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--fs-080);
    font-weight: var(--fw-500);
}

.cash-export-form input[type="date"],
.cash-export-form select {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border-radius: var(--border-radius-05-all);
    border: 1px solid var(--border-color-main);
    font-size: var(--fs-090);
}

.cash-export-form .button--submit {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: var(--blue);
    color: white;
    font-size: var(--fs-090);
    border: none;
    border-radius: var(--border-radius-05-all);
    cursor: pointer;
}

.cash-export-form .button--submit:hover {
    background-color: var(--blue-50);
}

.cash-modal__close {
    display: inline-block;
    margin-top: 10px;
    text-align: center;
    width: 100%;
    font-size: var(--fs-085);
    color: var(--red);
    text-decoration: underline;
}

.cash-modal.is-visible {
    display: block;
}

.cash-import-instructions {
    margin-top: 10px;
    font-size: var(--fs-080);
    color: var(--text-color-secondary);
}

.cash-import-instructions ul {
    padding-left: 20px;
    margin-top: 8px;
}

.cash-import-instructions li {
    margin-bottom: 4px;
}


.transaction-ellipsis {
    font-size: 1.25rem;
}

.transaction-row-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.transaction-row-link:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.danger-link {
    color: #d9534f;             
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

.danger-link:hover {
    color: #c9302c;
    text-decoration: underline;
}

.btn-inline {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
}

.btn-inline:hover {
    text-decoration: none;
}

.cash-edit-form .flex-column {
    margin-bottom: 12px;
}

.cash-edit-form label {
    font-weight: var(--fw-500);
    font-size: var(--fs-085);
    margin-bottom: 4px;
    display: block;
}

.cash-edit-form input,
.cash-edit-form select,
.cash-edit-form textarea {
    width: 100%;
    padding: 8px;
    border-radius: var(--border-radius-05-all);
    border: 1px solid var(--border-color-main);
    font-size: var(--fs-090);
}

.cash-edit-form .button--submit {
    margin-top: 10px;
}


/* #endregion ------ Cash Page ------------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
/* #region ---------- Investment Page ------------------------------------------------ */


.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.gap-md {
    gap: 1rem;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.col-span-full {
    grid-column: span 2;
}


/* #endregion ------ Investment Page ------------------------------------------------- */
/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */


.sticky-1st {
    position:sticky;
    top: var(--header-height-lg);
    z-index: 1;
}

.sticky-2nd {
    position:sticky;
    top: calc(var(--header-height-lg) + 23px);
    z-index: 2;
}

.horizontal-scroll {
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.horizontal-scroll-item {
    scroll-snap-align: start;
    width: 300px;
    font-size: var(--fs-row);
    padding: 15px 10px;
    margin: 2px 0px;
    background-color: var(--blue-10);
}


.nav__nav-icon {
    height: 22px; /* Scales the 1024px image down */
    width: auto;  /* Maintains aspect ratio */
    margin-right: 0.25rem;
    vertical-align: middle;
    display: inline-block;
}

.gap-sm > * + * {
    margin-left: 20px;
}

.gap-sm {
    gap: 8px;
}