/* Main Colors for Smart Spender*/
:root{
  --green:#1c6b4c;     
  --mint:#cfe3d6;       
  --bg:#faf7f2;        
  --ink:#1a1a1a;            
  --muted:#6b6b6b;         
  --radius:14px;              
    --light_green: #32c610;   

}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background: var(--bg);
  
  
  
  
  /* Background pattern $ */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 100 100'%3E%3Ctext x='50' y='60' text-anchor='middle' fill='%23eae3d9' font-size='64'%3E%24%3C/text%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* Layout helpers */
.container{ width:min(1100px, 92%); margin-inline:auto; }

/* ===== Top bar ===== */
.topbar{
  background:#7fbf9f;  
  padding:10px 14px;
  display:flex; align-items:center; gap:12px;
}
.menu-btn{
  font-size:22px; line-height:1;
  background:transparent; border:0; color:#0e3b2a; cursor:pointer;
}
.search{ flex:1; display:flex; }
.search input{
  width:100%; border:0; padding:9px 12px; border-radius:999px;
  background:#dcefe5; outline:2px solid transparent;
}
.icons{ display:flex; gap:10px; }
.icon{ font-size:20px; }

/* ===== Hero ===== */
.hero{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items:center;
  gap:40px;
  padding:48px 0 24px;
}

.brand{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.logo{ font-size:38px; color:var(--green); }
.name{ font-size:34px; letter-spacing:.2px; color:#174d38; }

.eyebrow{
  margin:.25rem 0 .5rem;
  color:var(--muted);
  font-size:.95rem;
}
.welcome{ font-size:1.4rem; margin:.25rem 0 1rem; }
.lead{
  line-height:1.5; max-width:52ch;
}
.highlight{ color: #7fbf9f; font-weight: bold; }

.dots{ display:flex; gap:8px; margin-top:18px; }
.dots span{
  width:10px; height:10px; border-radius:50%;
  background:#9fcab3;
}
.dots span:first-child{ background:var(--green); }

/* Login phone */
.phone{
  justify-self:center;
  width:min(270px, 292%);
  border:3px solid #222;
  border-radius:36px;
  background:white;
  padding:18px 14px 24px;
  position:relative;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.notch{
  position:absolute; left:50%; transform:translateX(-50%);
  top:10px; width:70px; height:8px; background:#222; border-radius:12px;
}
.screen{
  margin-top:22px;
  background:var(--mint);
  border-radius:22px;
  padding:22px 18px;
}
.screen h2{ margin:0 0 8px; font-size:1.05rem; }
.screen label{
  display:block; font-size:.9rem; margin-top:10px;
}
.screen input{
  width:100%;
  padding:10px 12px; margin-top:6px;
  border:1.5px solid #a8c6b7; border-radius:10px; outline:none;
}
.btn{
  margin-top:14px;
  width:100%; padding:12px;
  background:var(--green); color:white; border:0; border-radius:10px;
  font-weight:600; cursor:pointer;
}
.btn:active{ transform:translateY(1px); }
.muted{ color:#2f4f40; font-size:.9rem; text-align:center; }
.muted a{ color:#0f3d2b; text-decoration:underline; }


/* ===== Responsive ===== */
@media (max-width: 860px){
  .hero{ grid-template-columns:1fr; padding-top:28px; }
  .phone{ order:2; }
}

/* Sign up page */
.signup-header{
  padding:20px 30px;
}

.signup-main{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:60px 20px;
  min-height:80vh;
}

.signup-main h1{
  font-size:1.6rem;
  color:var(--green);
  margin-bottom:40px;
}

.signup-form{
  display:flex;
  flex-direction:column;
  gap:22px;
  width:min(350px, 90%);
}

.signup-form label{
  font-size:.95rem;
  text-align:left;
  margin-bottom:4px;
}

.signup-form input{
  padding:14px 12px;
  border:2px solid #000;
  border-radius:12px;
  box-shadow:4px 3px 9px #000;
  font-size:1rem;
}

.signup-form input:focus{
  border-color:var(--green);
  outline:none;
  box-shadow:4px 4px 0px var(--green);
}

.signup-form .btn{
  margin-top:20px;
}

.signup-form .qbtn{
  margin-top:14px;
  width:100%; padding:12px;
  background:var(--light_green); color:white; border:0; border-radius:10px;
  font-weight:600; cursor:pointer;
}

.signup-form .qbtn:hover{
    margin-top:14px;
    width:100%; padding:12px;
    background:var(--green); color:white; border:0; border-radius:10px;
    font-weight:600; cursor:pointer;
}

/* Summary Page */

.topnav{
  background: var(--green);
  color: #fff;
}

.topnav-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.topnav-links{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.95rem;
}

.topnav a{
  color: #eaf4ef;
  text-decoration: none;
  font-weight: 500;
}

.topnav a:hover{
  text-decoration: underline;
}

.topnav a.active{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* main summary area */
.summary-page{
  padding: 30px 0 50px;
}

.summary-page h1{
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: var(--green);
}

.summary-page section{
  background: #ffffff;
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.summary-page section h2{
  margin-top: 0;
  font-size: 1.2rem;
  color: #174d38;
}

/* link at bottom */
.summary-page p a{
  color: var(--green);
  font-weight: 500;
}

/* table styling */
.summary-table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 0.95rem;
}

.summary-table th,
.summary-table td{
  padding: 8px 10px;
  border: 1px solid #ddd;
  text-align: left;
}

.summary-table th{
  background: var(--mint);
  color: #174d38;
  font-weight: 600;
}

.summary-table tr:nth-child(even){
  background: #f5f5f5;
}

.summary-table tr:hover{
  background: #e8f3ec;
}

/* make nav stack nicely on small screens */
@media (max-width: 720px){
  .topnav-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .topnav-links{
    gap: 10px;
  }

  .summary-page{
    padding: 20px 0 40px;
  }
}

/* ===== Budget Overview page ===== */

.budget-page{
  padding: 40px 0 60px;
  text-align: center;
}

.budget-logo{
  height: 52px;
  width: auto;
  margin-bottom: 18px;
}

.budget-title{
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 28px;
}

/* reuse .highlight color already defined */

.chart-wrapper{
  max-width: 500px;
  margin: 0 auto 32px;
}

/* summary card */
.budget-summary{
  max-width: 420px;
  margin: 0 auto 24px;
  background: #ffffff;
  padding: 18px 20px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.budget-summary h3{
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--green);
}

.budget-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.budget-table td{
  padding: 6px 4px;
}

.budget-table td:first-child{
  text-align: left;
  font-weight: 500;
}

.budget-table td:last-child{
  text-align: right;
}

/* notes card */
.notes{
  max-width: 520px;
  margin: 0 auto 30px;
  background: rgba(255,255,255,0.9);
  padding: 16px 20px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  text-align: left;
  font-size: 0.95rem;
}

.notes p{
  margin-top: 0;
  margin-bottom: 8px;
  font-weight: 600;
}

.notes ul{
  margin: 0;
  padding-left: 20px;
}

/* nav links at bottom */
.nav-links{
  margin-top: 24px;
  font-size: 0.95rem;
}

.nav-links a{
  color: var(--green);
  text-decoration: none;
  font-weight: 500;
}

.nav-links a:hover{
  text-decoration: underline;
}

.nav-separator{
  margin: 0 8px;
  color: var(--muted);
}

/* responsive tweaks */
@media (max-width: 600px){
  .budget-page{
    padding: 24px 0 40px;
  }
  .budget-title{
    font-size: 1.3rem;
  }
}

.error-message{
  color: #d32f2f;
  font-size: 0.9rem;
  margin: 0 0 10px;
  text-align: center;
}

/* ===== Dashboard page (SS_dashboard.php) ===== */

.dashboard-page{
  padding: 30px 0 50px;
}

.dashboard-page h1{
  font-size: 1.8rem;
  color: var(--green);
  margin-bottom: 16px;
}

.dashboard-section{
  background: #ffffff;
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.dashboard-section h2{
  margin-top: 0;
  font-size: 1.2rem;
  color: #174d38;
}

.plan-list{
  list-style: none;
  padding-left: 0;
  margin: 10px 0 0;
}

.plan-list li{
  margin-bottom: 16px;
}

.plan-btn{
  display: inline-block;
  margin-bottom: 6px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 0;
  background: var(--green);
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

.plan-btn:hover{
  filter: brightness(1.05);
}
