/* Base Variables, uniform across all my pages */
:root{
    --brand:  #1D4ED8;  /* Royal Blue */
    --accent: #F59E0B;  /* Gold */
    --bg:     #ffffffb6;  /* light background */
    --ink:    #0B1020;  /* dark*/
    --white:  #ffffff;
    --dim: lightgray;
    --hhover:  color-mix(in oklab, var(--ink) 10%, transparent);
    --ff: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans","Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body{
    margin:0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--ff);
    line-height:1.55;
}

/* Force DARK when JS sets <html data-theme="dark"> */
:root[data-theme="dark"]{
  --bg:     #0B1020;                      /* dark surface */
  --ink:    #E8ECF4;                      /* light ink */
  --white:  #0F152A;                      /* dark card surface */
  --dim:    #4b5563;                      /* muted on dark */
  --hhover: color-mix(in oklab, var(--ink) 20%, transparent);
}

/* system mode */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:     #0B1020;
    --ink:    #E8ECF4;
    --white:  #0F152A;
    --dim:    #4b5563;
    --hhover: color-mix(in oklab, var(--ink) 20%, transparent);
  }
}

/* Force LIGHT when JS sets <html data-theme="light"> */
:root[data-theme="light"]{
  /* you can keep the same as :root or tweak slightly */
  --bg:     #ffffffb6;
  --ink:    #0B1020;
  --white:  #ffffff;
  --dim:    lightgray;
  --hhover: color-mix(in oklab, var(--ink) 10%, transparent);
}

/* On darkmode for index page, flip the global variables */
html:has(#themeToggle:checked){
    --bg:#0B1020;
    --ink:#F3F4F6;
    --dim:var(--bg);
}


/* Style for the light mode - dark mode toggler */
.theme-toggle-container{
    position: fixed;
    right: 1.5rem;
    bottom: 2rem;  /* stick to bottom */
    z-index: 10000;
    /* respecting iPhone safe area */
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-right: env(safe-area-inset-right, 0);
}

.theme-toggle{
    position:absolute;
    inline-size:1px; 
    block-size:1px;
    margin:-1px; 
    padding:0; 
    border:0;
    overflow:hidden; 
    clip:rect(0 0 0 0); 
    white-space:nowrap;  /* visually hidden */
}

.theme-switch{
    display:inline-flex; 
    align-items:center; 
    gap:.6rem;
    cursor:pointer; 
    user-select:none; 
    color: var(--brand);
    font-weight:600;
}

/* Toggle button pill and knob animation, before click and after click */
.switch{
    position:relative;
    inline-size:56px; 
    block-size:32px;
    border-radius:999px;
    background: var(--dim);
    transition: background .25s ease;
}
.switch::after{
    content:"";
    position:absolute; 
    top:4px; 
    left:4px;
    inline-size:24px; 
    block-size:24px;
    border-radius:50%;
    background:#fff;
    transition: transform .25s ease;
}

/* changing the state and transition of the switch button when checked */
.theme-toggle:checked + .theme-switch .switch{
    background: var(--brand);
}
.theme-toggle:checked + .theme-switch .switch::after{
    transform: translateX(24px);
}


/* Mobile first styles */
/* Header styles */
.header{
    border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
    background: var(--dim) !important;
    position: sticky;
    top:0;
    z-index: 999;  /* stay on top */
    background-color: var(--hhover);
}

/* general style for all containers */
.container{
    max-width: 1200px;
    padding-left: 16px;
    padding-right: 16px;
}

/* styling the header container to use flexbox for layout */
.header .container{
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    gap:1rem;
}

/* styling the header logo image */
.header .logo img{
    height: 70px;
    width: auto;
}

/* Hiding the mobile navigation toggle button */
.mobile-nav-toggle{
  background: none;
  display: block;  /* hidden by default */
  border: none;
  cursor: pointer;
}
.menu-nav {
    display: none;  /* hide desktop menu */
}

 /* styling the navigation menu list */
.menu-nav ul{
    list-style: none;
    margin:0;
    padding:0;
    flex-direction: column;  /*  menu items vertically */
    gap: 1rem;
    
}
.menu-nav a{
    display: block;  /* make links block-level for easier tapping */
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    border-radius: 4px;
    transition: background .25s ease, color .25s ease;
}

.mobile-nav-toggle img{
    width: 75px;
    height: 50px;
}

.mobile-nav-toggle[aria-expanded="true"] + .menu-nav {
    display: block;  /* show mobile menu when expanded */
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    margin-top: 8px;
    padding: 1rem;
    z-index: 1000;
    /* adding some transition for a smooth animation from right to left */
    transition: all 0.3s ease;
    animation: slideIn 0.3s ease forwards;
}
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* styling the menu links on hover and focus */
.menu-nav a:hover,
.menu-nav a:focus{
    color: var(--brand);
}

.menu-nav a[aria-current="page"]{
    color: var(--brand);
    font-weight: 700;
}

 /* styling the last button of the menu links(dashboard button) */
.menu-nav ul li:last-child a{
    background: var(--brand);
    color: var(--white);
    padding:0.8rem;
    border-radius: 15px;
}
.menu-nav ul li:last-child a:hover{
    background: var(--accent);
}

/* style for the hero section on the homepage */
.hero{
    position: relative;
    min-height: 85vh;
    display: grid;
    align-items: center;
    text-align: center;
    color: #fff;     
    background-image: url("../assets/banner/nf3.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
}
.hero::before{
    content:"";
    position:absolute; inset:0;
    /* Dark overlay on hero image to increase text visibility */
    background: rgba(0,0,0,0.45);
    z-index:-1;  
}

/* gentle top-bottom gradient on top of the dark layer */
.hero::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.5));
    z-index:-1;
}
.hero .container{
    color: lightgray;
    padding-top: 2rem;
    margin-inline: auto;
}
.hero h1{
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero p{
    font-size: 1.25rem;
    margin-bottom: 2rem;
}
.author-link{
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

/* styling the buttons in the hero section */
.hero-buttons{
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.normal-button, .button-outline{
    background-color: var(--accent);
    color: lightgray;
    text-decoration: none;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    transition: background .25s ease, color .25s ease;
}
.button-outline{
    background: transparent;
    border: 2px solid var(--accent);
}

/* styling the hover behavior of the hero section buttons */
.normal-button:hover, .normal-button:focus{
    background-color: var(--brand);
    color: var(--white);
}
.button-outline:hover, .button-outline:focus{
    background-color: var(--accent);
    color: var(--white);
    transition: background .25s ease, color .25s ease;
}

 /* styling the about section */

.about{
    padding: 4rem 0;
    background-color: color-mix(in oklab, var(--ink) 5%, transparent);
}
.about .container{
    margin-inline: auto;
    text-align: center;
}

.about .about-wrapper{
    display: flex;
    flex-direction: column;  /* show about section vertically */
    text-align: center;  
    gap: 2rem; 
}
/* styling the about section image */
.about .about-wrapper img{
    flex:1;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-width: 100%;
    height: auto;
}
.about .container h1{
    color: var(--brand);
    margin-bottom: 0px !important;
}
.about .container .about-wrapper p{
    max-width: 600px;
    margin-inline: auto;
    margin-top: 1.5rem;
    font-size: 1.1rem;
    text-align: left;
   
}
.about .container .about-wrapper .about-description-two{
    margin-bottom: 2.5rem;
}
.about .container .about-wrapper .about-content a{
    background-color: var(--brand);
    contain: inherit;
    border-radius: 15px;
    color: var(--white);
    margin-right: 0px;
}

/* styling the features section */
.features{
    padding-right: 2rem;
}
.features .container{
    margin-inline: auto;
    text-align: center;
    margin-bottom: 2rem;
}
.features .container h1{
    color: var(--brand);
}
.features .container .features-description{
    margin-bottom: 5rem;
    font-size: 1.1rem;
}
.features .container ul{
    display: flex;
    flex-direction: column;
    gap: 2rem; 
    list-style-type: none;
}
.features .container ul li{
    flex:1;
    padding: 1rem;
    border: 2px solid var(--accent);
    border-radius: 20px;
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* adding a hover effect for each list of the features */
.features .container ul li:hover{
    border-color: var(--brand);
    box-shadow: 0 10px 8px rgba(0,0,0,0.1);
    transition: border-color .25s ease-in-out, box-shadow .25s ease;
}
.features .container ul li h3{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* styling the testimonials section */
.testimonials{
    padding: 4rem 0;
    background-color: color-mix(in oklab, var(--ink) 5%, transparent);
}
.testimonials .container{
    margin-inline: auto;
    text-align: center;
}
.testimonials .container h1{
    margin-bottom: 4rem;
    margin-top: 2rem;
    color: var(--brand);
    font-size: 1.5rem;  /* smaller heading on small screens */
}

/* styling the slider list */
.testimonial-slider{
    overflow: hidden;
    padding-bottom: 1rem;
}
.slider-list{
    gap: 8px;  /* smaller gap on small screens */
    display:flex;
    flex-wrap: nowrap;
    margin:0;
    padding:0;
    list-style:none;

    /* animation */
    will-change: transform;
    transform: translate3d(0,0,0); 
    transition: transform 600ms cubic-bezier(.22,.61,.36,1);

    /* stop manual X scroll */
    overflow: hidden; 
    scroll-snap-type: none; 
    touch-action: pan-y;      /* prevent horizontal swipe scrolling */
}

.slider-item{
    flex: 0 0 calc(100%);  /* single item view on small screens */
    box-sizing: border-box;
    border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
    border-radius: 12px;
    background: color-mix(in oklab, var(--bg) 90%, transparent);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

/* styling the slide figure items */

.slider-item figure {
  border-radius: 12px;
  text-align: center;
  align-content: center;
}
.slider-item figure .figure-img { 
    box-shadow: 10px 0px 10px  rgba(0,0,0,0.2);
    background-color: transparent;
    margin-bottom: 1rem;
}
.slider-item blockquote { 
    margin: 6px 0; 
    color: var(--ink);
    font-style: italic; 
    font-size: 1rem;
    margin-bottom: 1.5rem; 
}
.slider-item .intake { 
    display: block; 
    color: var(--brand);
    font-size: 0.9rem; 
}

/* styling the contact section */
.contact{
  padding: 2rem 2rem;
  color:#fff;
  background-image:
    linear-gradient(rgba(11, 15, 26, 0.6), rgba(13, 16, 18, 0.957)),
    url("../assets/banner/nf1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  max-height: 200px;
  padding-bottom: 7rem;
}

.contact .container h1{
    text-align: center;
    color: var(--white);
    margin-bottom: 1rem;
}
.contact .container p{
    text-align: center;
    margin-bottom: 1rem;
    color: var(--white);
}
.contact .container ul{
    list-style: none;
    padding:0;
    margin:0;
    text-align: center;
}
.contact .container ul li{
    margin-bottom: 0.5rem;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}
.contact .container ul li a{
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    margin-top: 0.6rem;
}

/* mobile styles for the footer */
.footer{
    padding: 2rem 0;
    background-color: color-mix(in oklab, var(--ink) 10%, transparent);
}
.footer .container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
footer .container .footer-content{
    margin-inline: auto;
    text-align: center;
    display: flex;

}
.footer .footer-logo img{
    height: auto;
    width: 250px;
}
.footer nav ul{
    list-style: none;
    padding:0;
    margin:0;
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 0.3rem;
    margin-bottom: 2rem;
}

.footer nav ul li a{
    text-decoration: none;
    color: var(--ink);
}

.footer nav ul li a:hover{
    color: var(--accent);
    translate: transformY(-2px);
}
.footer-seperator{
    border-top: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
    margin-bottom: 1.5rem;
    display: none;
}


/* Styling the dasboard page using mobile first approach */

/* styling the dashboard layout */
.dashboard-layout{
    display: flex;
    min-height: 100vh;
    background-color: var(--bg);
    overflow-x: hidden;
}
.dashboard-layout .sidebar{
    min-width: 100px;
    background-color: color-mix(in oklab, var(--brand) 20%, transparent);
    padding-left: 1rem;
    border-right: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
    padding-top: 1.25rem;
    display: none;  /* hide sidebar on small screens */
}
.dashboard-layout .sidebar img{
    height: auto;
    margin-bottom: 1.5rem;
    width: 250px;
    max-width: 100%;
    display: block;
}
.dashboard-layout .sidebar ul{
    list-style: none;
    padding:0;
}
.dashboard-layout .sidebar ul li{
    margin-bottom: 1rem;
    margin-left:1rem;
    cursor: pointer;
}
.dashboard-layout .sidebar ul li button{
    color: var(--ink);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    transition: background-color 0.3s;
    font-size: medium;
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: left;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-layout .sidebar ul li button:hover{
    background-color: color-mix(in oklab, var(--brand) 50%, transparent);
}

.nav-breaker{
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* styling the main content area header */
.dashboard-layout main{
    flex: 1;
    min-width: 0; 
    display: flex;
    flex-direction: column;
}
main .main-topbar{
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
    background-color: color-mix(in oklab, var(--brand) 20%, transparent)!important;
    position: sticky;
    top:0;
    z-index: 999;  /* stay on top */
    background-color: var(--hhover);
    gap: 0.5rem;
    padding-top: 0.5rem;
    padding-right:0.5rem;
    padding-left:1rem;
    width: 100%;
    box-sizing: border-box;
}
main .main-topbar h1{
    font-size: 1rem;
    color: var(--brand) !important;
    margin: 0 !important;
}
.topbar-actions{
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2rem;
    
}
.dashboard-nav-toggle{
    display: block;
}

.btn-back{
    background: var(--brand);
    color: var(--white);
    border: none;
    padding: .5rem .75rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: .95rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.btn-back:hover{
    background: var(--accent);
    color: var(--white);
}
.label-mobile{ 
    display: none; 
}

.notify-btn{
    background: none;
    border: none;
    position: relative;
    cursor: pointer;
    color: var(--ink);
}

/* styling the dropdown using details tag */
.details-dropdown{
    position: relative;
}
.details-dropdown summary{
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: medium;
    color: var(--ink);
    padding: 0.5rem 1rem;
    transition: background-color 0.3s;
}
.details-dropdown summary:hover{
    background-color: color-mix(in oklab, var(--brand) 50%, transparent);
}
.details-dropdown[open] summary{
    background-color: color-mix(in oklab, var(--brand) 50%, transparent);
}

/*styling the statistics section */
#panel-stats {
    margin-block: 1.25rem;
    padding-block: 0.5rem;
}
#panel-stats > h2 {
    margin: 0;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: var(--ink);
}

.stat-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* each Card */
.stat-card {
    background: var(--dim);
    border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    padding: 1rem;
    display: grid;
    align-content: start;
    gap: 0.5rem;
    height: 120px;
}
.stat-card h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: color-mix(in oklab, var(--ink) 70%, transparent);
}
.stat-value {
    margin: 0;
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 700;
    color: var(--ink);
}
.stat-note {
    margin: 0;
    font-size: 0.875rem;
    color: color-mix(in oklab, var(--ink) 55%, transparent);
}

/* Styling the financial health meter for progress */
meter {
    width: 100%;
    height: 2rem;
    border: none;
    background: transparent;
}
meter::-webkit-meter-bar {
    background: color-mix(in oklab, var(--ink) 10%, transparent);
    border-radius: 10px;
}
meter::-webkit-meter-optimum-value {
    background: linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--brand) 85%, white));
    border-radius: 10px;
}
meter::-webkit-meter-suboptimum-value {
    background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 85%, white));
    border-radius: 10px;
}
meter::-webkit-meter-even-less-good-value {
    background: linear-gradient(90deg, #DC2626, #EF4444);
    border-radius: 10px;
}
meter::-moz-meter-bar {
    background: linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--brand) 85%, white));
    border-radius: 10px;
}

 /* styling the budget progress section */

#panel-stats > section[aria-labelledby="budget-title"] {
  margin-top: 1.25rem;
}
#budget-title {
    margin: 0;
    margin-bottom: 0.75rem;
    margin-top: 2rem;
    font-weight: 600;
    color: var(--brand);
    text-transform: uppercase;
}


/* ===== Budget list (mobile: 1 column) ===== */
.budget-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/*  Budget item card */
.budget-item {
    background: var(--white);
    border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    padding: 0.875rem;
    display: grid;
    gap: 0.5rem;
}
.budget-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}
.budget-head h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}
.budget-amount {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--brand);
}
.budget-cap {
    color: color-mix(in oklab, var(--ink) 55%, transparent);
}

/* Budget meters (progress by percentage)*/
.budget-item meter {
    width: 100%;
    height: 0.65rem;
    border-radius: 10px;
}
.budget-item meter::-webkit-meter-bar {
    background: color-mix(in oklab, var(--ink) 10%, transparent);
    border-radius: 10px;
}
.budget-item meter::-webkit-meter-optimum-value {
    background: linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--brand) 85%, white));
    border-radius: 10px;
}
.budget-item meter::-webkit-meter-suboptimum-value {
    background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 85%, white));
    border-radius: 10px;
}
.budget-item meter::-webkit-meter-even-less-good-value {
    background: linear-gradient(90deg, #DC2626, #EF4444);
    border-radius: 10px;
}
.budget-note {
    margin: 0;
    font-size: 0.85rem;
    color: color-mix(in oklab, var(--ink) 55%, transparent);
}

/* Focus styles for better experience on mobile and hover on desktop */
.stat-card:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.budget-item:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .stat-card:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
    transition: box-shadow 180ms ease, transform 180ms ease;
  }
  .budget-item:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
    transition: box-shadow 180ms ease, transform 180ms ease;
  }
}


/* styling the income reporting section */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 1px, 1px);
    white-space: nowrap;
    border: 0;
}

/* panel spacing */
#panel-add-income, #panel-add-expense {
    display: block;
    padding: 1rem;
    text-align: center;
}

/* form styling */
#income-form, #expense-form {
    display: grid;
    gap: 1rem;
    max-width: 720px;
    width: 100%;
    margin: 1rem auto;
    padding: 2rem;
    box-sizing: border-box;
    background: var(--white);
    border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
    border-radius: 14px;
    text-align: left;
}

/* form field group style */
.field {
    display: grid;
    gap: 0.375rem;
}

/* styling the form labels */
.field label {
    font-weight: 600;
    color: var(--ink);
}

/* inputs */
.field input[type="text"],
.field input[type="number"],
.field input[type="date"], select {
    appearance: none;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
    border-radius: 10px;
    background: var(--white);
    color: var(--ink);
    font-family: var(--ff);
    font-size: 1rem;
    line-height: 1.2;
}

/* focus */
.field input:focus {
    outline: 2px solid color-mix(in oklab, var(--brand) 70%, white);
    outline-offset: 2px;
    border-color: var(--brand);
}

/* hint + errors message styling */
.hint {
    color: color-mix(in oklab, var(--ink) 55%, transparent);
    font-size: 0.875rem;
}
.error {
    color: #B91C1C;
    font-size: 0.875rem;
}

/* button */
.btn-primary {
    background: var(--brand);
    color: var(--white);
    border: none;
    border-radius: 10px;
    padding: 0.7rem 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}
.btn-primary:hover {
    background: color-mix(in oklab, var(--brand) 85%, white);
}

/* actions row */
.actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-start;
}

 /* styling the transactions section */
 #panel-transactions {
    padding: 2rem;
}

/* Cards for mobile */
.txns-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.txn-card {
  background: var(--white);
  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  border-radius: 12px;
  padding: 0.75rem;
  display: grid;
  gap: 6px;
}
.txn-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.txn-type {
  font-weight: 700;
  color: var(--brand);
  font-size: 0.9rem;
}
.txn-amount {
  font-weight: 800;
  color: var(--ink);
}
.txn-meta {
  display: flex;
  gap: 10px;
  font-size: 0.9rem;
  color: color-mix(in oklab, var(--ink) 60%, transparent);
}

/* Table (hidden on mobile) */
.txns-table-wrap {
  display: none;
  overflow-x: auto;
}
.txns-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  background: var(--white);
  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  border-radius: 12px;
}
.txns-table th,
.txns-table td {
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
  text-align: left;
  white-space: nowrap;
}
.txns-table thead {
  background: color-mix(in oklab, var(--ink) 5%, transparent);
  border-bottom: 2px solid color-mix(in oklab, var(--ink) 15%, transparent);
}
.txns-table thead th {
  font-weight: 700;
  color: color-mix(in oklab, var(--brand) 70%, transparent);
  text-transform: uppercase;
}
.txns-table tbody tr:hover {
  background: color-mix(in oklab, var(--accent) 5%, transparent);
}
.txns-table tbody tr:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.txns-table tbody tr:last-child td {
  border-bottom: none;
}

/* styling the action buttons in the transactions section */
.txn-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.txn-actions-td {
  white-space: nowrap;
}
.icon-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}
.icon-btn:hover {
  opacity: 0.85;
}

/* styling the search bar in the transactions section */
.txns-toolbar{ 
    display:block; 
    margin:0 0 1rem; 
}
#txns-search{
    display:flex; 
    flex-direction:column; 
    gap:.4rem; 
    margin-top:.5rem;
}
#txns-search input{
    width:100%; 
    padding:.5rem .75rem; 
    border:1px solid var(--accent);
    border-radius:.5rem; 
    font:inherit; 
    background:var(--white);
    color: var(--ink);
}

/* styling the settings panel */

.settings-header { 
    margin-bottom: 1rem; 
}
.settings-note { 
    color: color-mix(in oklab, var(--ink) 50%, transparent); 
}

.settings-form { 
    display: grid; 
    gap: 1rem; 
}
.settings-group { 
    border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); border-radius: 12px; 
    padding: 1rem; 
}
.settings-group > legend { 
    padding: 0 .25rem; color: var(--brand); 
    font-weight: 700; 
}

.settings-grid { 
    display: grid; 
    gap: .75rem; 
    grid-template-columns: 1fr; 
}
.field { 
    display: grid; 
    gap: .35rem; 
}
.field label { 
    font-weight: 600; 
}
.field input, .field select {
  padding: .55rem .75rem; 
  border: 1px solid color-mix(in oklab, var(--ink) 15%, transparent);
  border-radius: .5rem; 
  font: inherit; 
  background: var(--white);
}

.settings-actions { 
    display: flex; 
    gap: .75rem; 
    align-items: center; 
}
.btn-primary { 
    background: var(--brand); 
    color: var(--white); 
    border: none; 
    padding: .6rem .9rem; 
    border-radius: .6rem; 
    cursor: pointer; 
}
.btn-primary:hover { background: var(--accent); }

.settings-msg { 
    font-size: .9rem; 
    color: color-mix(in oklab, var(--ink) 60%, transparent); 
}

/* Import/Export cards */
#panel-import, #panel-export, #panel-settings {
    margin: 1rem auto;
    padding: 2rem;
    max-width: 720px;
    width: 100%;
    box-sizing: border-box;

}
.transfer-card {
    border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
    border-radius: 12px; 
    padding: 1rem; 
    background: var(--white); 
    max-width: 720px;
}
.radio-row { 
    display: grid; 
    gap: .35rem;
    margin: .5rem 0; 
}

.btn-secondary {
    background: color-mix(in oklab, var(--brand) 10%, transparent);
    color: var(--ink); 
    border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
    padding: .55rem .85rem; 
    border-radius: .6rem; 
    cursor: pointer;
}
.btn-secondary:hover { 
    background: color-mix(in oklab, var(--brand) 20%, transparent); 
}


 /* styling for the seven days spending graph */
.chart-card{
    background: var(--white);
    border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Title */
.chart-title{
    margin: 0 0 .75rem;
    color: var(--brand);
    font-size: 1.1rem;
    font-weight: 700;
}

/* SVG reset */
#chart{
    width: 100%;
    height: auto;
    display: block;
}

/* Axis + grid */
.chart-axis { 
    stroke: color-mix(in oklab, var(--ink) 35%, transparent); 
    stroke-width: 1; 
}
.chart-grid { 
    stroke: color-mix(in oklab, var(--ink) 12%, transparent); 
    stroke-width: 1; 
}

/* Bars */
.chart-bar {
    fill: color-mix(in oklab, var(--brand) 75%, white);
    transition: opacity .2s ease, transform .2s ease;
    rx: 6; /* rounded corners */
}
.chart-bar:hover { 
    opacity: .9; 
    transform: translateY(-2px); 
}

/* Labels */
.chart-xlab {
    fill: color-mix(in oklab, var(--ink) 60%, transparent);
    font: 500 12px/1 var(--ff);
    text-anchor: middle;
}
.chart-ylab {
    fill: color-mix(in oklab, var(--ink) 55%, transparent);
    font: 500 11px/1 var(--ff);
    text-anchor: end;
}
.chart-total {
    fill: var(--ink);
    font: 600 12px/1 var(--ff);
    text-anchor: middle;
}
.chart-card{
    max-width: 800px; 
    margin-inline: auto; 
    padding: .75rem; 
}