*{
   margin:0;
   padding:0;
   box-sizing:border-box;
   font-family:Arial,Helvetica,sans-serif;
}

body{
   background:#ececec;
   padding:20px;
   transition:0.3s;
}

.container{
   max-width:1600px;
   margin:auto;
}

header{
   display:grid;
   grid-template-columns: 70px 1fr 70px;
   gap:15px;
   margin-bottom:20px;
}

footer{
   text-align: center;
}

.logo, .title, #darkModeBtn, header button{
   background:white;
   border:4px solid black;
   border-radius:15px;
   display:flex;
   align-items:center;
   justify-content:center;
   height:70px;
   font-size:30px;
   font-weight:bold;
}

main{
   display:grid;
   grid-template-columns:300px 1fr 320px;
   gap:20px;
}

.leftPanel, .calendarSection, .rightPanel, .main02Section{
   background:white;
   border:4px solid black;
   padding:15px;
   min-height:700px;
}

.leftPanel{
   display:flex;
   flex-direction:column;
   gap:15px;
}

#balance{
   color:green;
   font-size:40px;
   filter: blur(4px);
}

.stats{
   margin-top:auto;
}

.income{
   color:green;
   font-weight:bold;
}

.expense{
   color:red;
   font-weight:bold;
}

#monthSelect{
   padding:10px;
   font-size:18px;
}

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

#monthTitle{
   text-align:center;
   margin-bottom:20px;
}

#calendar{
   display:grid;
   grid-template-columns:repeat(7,1fr);
   gap:10px;
}

.day{
    position:relative;
    height:80px;
    border:3px solid black;
    cursor:pointer;
    transition:.2s;
    background:white;
}

.day:hover{
   background:#ddd;
}

.dayNumber{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:24px;
    font-weight:bold;
}

.dayTotal{
    position:absolute;
    bottom:5px;
    left:0;
    width:100%;
    text-align:center;
    font-size:13px;
    font-weight:bold;
}

.dayTotal.income{
    color:green;
}

.dayTotal.expense{
    color:red;
}

.day.selected{
   background:yellow;
}

.currentDay {
    border: 5px solid #2ecbfb;
}

.incomeDay{
    background:#b9f6ca;
}

.expenseDay{
    background:#ffb3b3;
}

.mixedDay{
    background:#83a8ff;
}

textarea{
   height:150px;
   resize:none;
}

.rightPanel{
   display:flex;
   flex-direction:column;
   gap:12px;
}

input, textarea, select{
   padding:10px;
   font-size:18px;
}

button{
   padding:12px;
   cursor:pointer;
   font-size:18px;
}

.transaction{
   background:#f6f6f6;
   padding:15px;
   border-radius:12px;
   margin-bottom:15px;
   box-shadow:0 3px 8px rgba(0,0,0,.15);
}

.transaction h3{
   margin-bottom:5px;
}

.transaction strong{
   font-size:22px;
}

.transaction button{
   margin-top:10px;
   /*margin-right:8px;*/
   margin-right:1%;
   padding:8px 12px;
   font-size:15px;
}

.incomeItem{
   border-left:8px solid green;
}

.expenseItem{
   border-left:8px solid red;
}

.calendarHeader{
   display:grid;
   grid-template-columns:60px 1fr 60px;
   align-items:center;
   gap:10px;
   margin-bottom:15px;
}

.calendarHeader button{
   font-size:24px;
   /*height:45px;*/
}

.weekdays{
   display:grid;
   grid-template-columns:repeat(7,1fr);
   gap:10px;
   margin-bottom:10px;
}

.weekdays div{
   text-align:center;
   font-weight:bold;
   font-size:18px;
}

/* Transaction table container */
.main02Section table{
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Table header */
.main02Section thead {
  background-color: #1f2937;
  color: white;
}

.main02Section th {
  padding: 14px 16px;
  text-align: left;
  font-weight: 600;
}

/* Table rows */
.main02Section td {
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
}

/* Alternating rows */
.main02Section tbody tr:nth-child(even) {
  background-color: #f9fafb;
}

/* Hover effect */
.main02Section tbody tr:hover {
  background-color: #eff6ff;
}

/* Amount column */
.main02Section td:nth-child(2) {
  font-weight: 600;
  color: #111827;
}

/* Date column */
.main02Section td:first-child {
  color: #6b7280;
  white-space: nowrap;
}

/* Responsive scrolling */
.table-container {
  overflow-x: auto;
}


.loginFormPage{
   width: 100%;
   background:white;
   border:4px solid black;
   padding:15px;
   min-height:700px;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.loginFormPage h1{
   padding-bottom: 10px;
   margin: 10px;
}

.form-row {
   display: grid;
   grid-template-columns: 100px 250px;
   align-items: center;
   gap: 10px;
   margin-bottom: 10px;
}

.form-row label {
   text-align: right;
}

.form-row input[type="text"],
.form-row input[type="password"] {
   width: 100%;
   box-sizing: border-box;
}
.form-row input[type="submit"] {
   width: 100%;
   grid-column: 1 / 3;
   background-color: #1ec0ff;
   border-radius: 80px;
}





/* ///////////  DARK MODE  \\\\\\\\\\\\\ */

.dark{
   background:#181818;
   color:white;
}

.dark .leftPanel, .dark .rightPanel, .dark .calendarSection, .dark .logo, .dark .title, .dark button, .dark textarea, .dark select, .dark input, .dark nav, .dark #darkModeBtn, .dark .main02Section, .dark .loginFormPage{
   background:#2b2b2b;
   color:white;
   border-color:#666;
}

.dark ::placeholder{
   color:#b8b8b8;
}

.dark .transaction {
   background-color: #161515;
}

/* 1. Base rule for plain dark days (Score: 5) */
.dark .day:not(.incomeDay):not(.expenseDay):not(.mixedDay){
    background: #333;
    color: white;
}

.dark .incomeDay{
    background:#145a32;
    color:white;
}

.dark .expenseDay{
    background:#7b241c;
    color:white;
}

.dark .mixedDay{
    background:#002e9a;
    color:white;
}

/* 2. Hover rule made more specific (Score: 6) */
.dark .day:not(.incomeDay):not(.expenseDay):not(.mixedDay):hover{
   background: #444;
}

/* 3. Selected rule made more specific (Score: 6) */
.dark .day:not(.incomeDay):not(.expenseDay):not(.mixedDay).selected, .dark .day.selected{
   background: #a79c00;
   color: black; /* Added to keep text readable on yellow background */
}

.dark .currentDay {
    border: 5px solid #00a7d8;
}

.dark .main02Section table{
  background-color: #2b2b2b;
}

/* Table header */
.dark .main02Section thead {
  background-color: #1f2937;
  color: white;
}

.dark .main02Section td {
  border-bottom: 1px solid #e5e7eb;
  color: #fff;
}

.dark .main02Section tbody tr:nth-child(even) {
  background-color: #232323;
}

/* Hover effect */
.dark .main02Section tbody tr:hover {
  background-color: #000;
}

/* Amount column */
.dark .main02Section td:nth-child(2) {
  color: #111827;
}

/* Date column */
.dark .main02Section td:first-child {
  color: #fff;
}

.dark .form-row input[type="submit"]{
  background-color: #001554;
  border-radius: 80px;
}







.blank{
   background:transparent;
   border:none;
}

/* ===========================
   MOBILE APP MODE
=========================== */
.mobileNav{
   display:none;
}

.floatingAdd{
   display:none;
}



/* ===========================
   MOBILE PHONE WINDOW 700px
=========================== */
@media(max-width:700px){

   body{
      padding:10px;
      padding-bottom:80px;
   }

   /* Header */
   header{
      grid-template-columns:1fr 70px;
      height:70px;
   }

   #test001{
      display:none;
   }

   .title{
      font-size:22px;
   }

   /* Main becomes app pages */
   main{
      display:block;
   }

   .leftPanel, .calendarSection, .rightPanel, .main02{
      min-height:auto;
      border-radius:20px;
      margin-bottom:20px;
   }

   /* Calendar */
   #calendar{
      gap:3px;
   }

   /* Mobile Calendar Cells */
   .day{
      height:60px;
      border-width:2px;
   }

   .dayNumber{
      top:45%;
      left:50%;
      transform:translate(-50%,-50%);
      font-size:16px;
   }

   .dayTotal{
      bottom:3px;
      font-size:10px;
   }

   .weekdays{
      gap:3px;
      font-size:12px;
   }

   /* Inputs */
   input, textarea, select, button{
      font-size:16px;
   }

   /* Hide panels initially */
   .leftPanel, .calendarSection, .rightPanel, .main02{
      display:none;
   }

   .leftPanel.active, .calendarSection.active, .rightPanel.active, .main02.active{
      display:flex;
   }

   /* Main transaction area */
   .main02 {
      width: 100%;
      overflow-x: auto;
   }

   .main02Section {
      width: 100%;
   }

   #main02Table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      font-size: 10px;
   }

   #main02Table th,
   #main02Table td {
      padding: 8px;
      word-wrap: break-word;
      overflow-wrap: break-word;
   }

   /* Bottom navigation */
   .mobileNav{
      position:fixed;
      bottom:0;
      left:0;
      right:0;
      height:70px;
      background:white;
      color:black;
      border-top:3px solid black;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      z-index:100;
   }

   .mobileNav button{
      border:none;
      background:none;
      display:flex;
      flex-direction:column;
      font-size:13px;
      align-items:center;
      justify-content:center;
   }

   /* Floating button */
   .floatingAdd{
      display:flex;
      position:fixed;
      right:20px;
      bottom:90px;
      width:60px;
      height:60px;
      border-radius:50%;
      background:#111;
      color:white;
      font-size:35px;
      align-items:center;
      justify-content:center;
      border:none;
      z-index:101;
   }

   .transaction{
      border-radius:16px;
      padding:18px;
   }

   .transaction button{
      width:48%;
   }

   #balance{
      font-size:34px;
   }
}