/* Goumzy site-wide stylesheet - simple, modern base theme */
:root{
  --bg:#f7f9fb;
  --surface:#ffffff;
  --primary:#0d6efd; /* bootstrap primary blue */
  --muted:#6c757d;
  --text:#212529;
  --accent:#6f42c1;
  --success:#198754;
  --danger:#dc3545;
  --radius:8px;
  --max-width:1100px;
}

html,body{
  /* height:100%; */
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background:var(--bg);
  color:var(--text);
}

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:1rem;
}

/* Admin header */
header.admin-header{
  background:linear-gradient(90deg, rgba(13,110,253,0.12), rgba(6,182,212,0.06));
  border-bottom:1px solid rgba(0,0,0,0.04);
  padding:1rem 0.6rem;
}

header.admin-header h1{
  margin:0;
  font-size:1.25rem;
  color:cornflowerblue;
}

/* Portfolio header navigation */
header.portfolio-header {
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 1rem 0;
}

header.portfolio-header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem;
}

header.portfolio-header nav .logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

header.portfolio-header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

header.portfolio-header nav ul li {
    margin-left: 1.5rem;
}

header.portfolio-header nav ul li a {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
}

header.portfolio-header nav ul li a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    header.portfolio-header nav {
        flex-direction: column;
    }

    header.portfolio-header nav ul {
        margin-top: 1rem;
    }

    header.portfolio-header nav ul li {
        margin: 0 0.8rem;
    }
}

main[role="main"]{
  padding:1.25rem 0.6rem;
}

footer{

/* Header navigation */
.header-nav{float:right;display:flex;gap:0.5rem;align-items:center}
.header-nav a, .header-nav button{color:#222;text-decoration:none;padding:0.3rem 0.6rem;border-radius:6px}
.header-nav a:hover, .header-nav button:hover{background:rgba(255,255,255,0.06)}
.header-nav form{margin:0}
.header-nav .nav-link{color:var(--text)}
  padding:1rem 0.6rem;
  color:var(--muted);
  font-size:0.875rem;
}

/* Cards */
.card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(12,20,30,0.06);
  padding:1rem;
}

.card-body{padding:1rem}

/* Forms */
.form-label{display:block;margin-bottom:0.25rem;font-weight:600;color:var(--muted);}
.form-control{
  display:block;width:100%;padding:0.5rem 0.65rem;border:1px solid rgba(0,0,0,0.09);border-radius:6px;background:#fff;color:var(--text);box-sizing:border-box;
}
.btn{display:inline-block;padding:0.5rem 0.9rem;border-radius:6px;border:0;cursor:pointer;text-decoration:none}
.btn-primary{background:var(--primary);color:#fff}
.btn-outline{background:transparent;border:1px solid rgba(0,0,0,0.08);color:var(--text);text-decoration:none}
.btn-outline:hover{background:rgba(0,0,0,0.02)}

/* Validation */
.text-danger{color:var(--danger);font-size:0.9rem}

/* Alert messages */
.alert{padding:0.6rem 0.75rem;border-radius:6px;margin-bottom:0.75rem;border:1px solid rgba(0,0,0,0.06)}
.alert-info{background:linear-gradient(90deg, rgba(13,110,253,0.04), rgba(111,66,193,0.02));color:var(--primary);border-color:rgba(13,110,253,0.12)}
.alert-success{background:linear-gradient(90deg, rgba(25,135,84,0.04), rgba(111,66,193,0.02));color:var(--success);border-color:rgba(25,135,84,0.12)}
.alert-danger{background:linear-gradient(90deg, rgba(220,53,69,0.04), rgba(111,66,193,0.02));color:var(--danger);border-color:rgba(220,53,69,0.12)}

/* Alert close button */
.alert-close{background:transparent;border:0;color:inherit;font-size:1.1rem;line-height:1;cursor:pointer;position:relative;float:right;padding:0 0.25rem}
.alert .alert-close{margin-left:0.5rem}

/* Table / grid styles */
.table-responsive{overflow-x:auto;width:100%;}
.table{width:100%;border-collapse:collapse;margin:0 0 0.5rem 0}
.table thead{background:linear-gradient(90deg, rgba(13,110,253,0.06), rgba(6,182,212,0.03));border-bottom:1px solid rgba(0,0,0,0.06)}
.table tbody tr:nth-child(odd){background:rgba(12,20,30,0.02)}
.table tbody tr:nth-child(even){background:transparent}
.table th,.table td{padding:0.6rem 0.75rem;border-bottom:1px solid rgba(0,0,0,0.04);text-align:left;vertical-align:middle}
.table th{font-weight:700;color:cornflowerblue;font-size:0.95rem}
.table td{font-size:0.95rem}
.table tr:last-child td{border-bottom:0}
.table .actions{white-space:nowrap}

/* Override Bootstrap's cell-level backgrounds to allow row-level stripes to show */
.table>:not(caption)>*>*{background-color:transparent !important}

/* Dashboard menu - simple tree with left icon */
.menu{display:block;margin:0;padding:0}
.menu-group{background:transparent;border-radius:6px;padding:0;margin:0.25rem 0}
.menu-group .menu-toggle{display:flex;align-items:center;gap:0.6rem;cursor:pointer;padding:0.35rem 0.25rem;border-radius:6px;border:0;background:transparent}
.menu-group .menu-toggle:hover{background:rgba(0,0,0,0.03)}
.menu-toggle .chev{width:1.05rem;display:inline-block;text-align:center;color:var(--muted);font-size:1rem;transition:transform 160ms ease,color 160ms}
.menu-toggle .menu-label{font-weight:600;color:var(--text);display:inline-block}
/* Root parent appearance */
.menu-root > .menu-toggle{padding:0.55rem 0.25rem;font-size:1.12rem;font-weight:800;color:var(--primary)}
.menu-root > .menu-toggle .chev{color:var(--primary)}
.menu-root{border-left:3px solid rgba(13,110,253,0.10);padding-left:0.5rem}
/* Nested parents slightly smaller */
.menu-group.nested > .menu-toggle{font-size:0.98rem;font-weight:700;color:rgba(0,0,0,0.85)}

/* Submenu layout: children align under the parent's label */
.menu-group .submenu{padding-left:1.65rem;margin-top:0.25rem;overflow:hidden;max-height:1000px;transition:max-height 220ms ease,padding 220ms ease}
.menu-group .submenu ul{margin:0;padding:0}
.menu-group .submenu li{margin:0.2rem 0; list-style:none}
.menu-group .submenu a{display:block;padding:0.18rem 0;color:var(--muted);text-decoration:none;padding-left:calc(1.05rem + 0.6rem)}
.menu-group .submenu a:hover{text-decoration:underline;color:var(--primary)}
.menu-group.collapsed > .submenu{max-height:0;padding-top:0;margin-top:0}
.menu-group .chev.collapsed{transform:rotate(-90deg);color:var(--muted)}
.menu-group .chev{transform:rotate(0deg)}
.menu-group .menu-toggle[aria-expanded="false"] .chev{transform:rotate(-90deg)}

/* remove dot markers and rely on clean indent */
.menu-group .submenu li::before{display:none}

@media (max-width:576px){
  .table thead{display:none}
  .table, .table tbody{display:block;width:100%}
  .table tr{display:grid;grid-template-columns:1fr auto auto;gap:0.5rem;align-items:center;margin-bottom:0.3rem;border:1px solid rgba(0,0,0,0.06);border-radius:4px;padding:0.4rem 0.5rem}
  .table td{border:0;padding:0;display:block;text-align:left}
  .table td:nth-child(2), .table td:nth-child(3){text-align:right;font-weight:600}
  .table td::before{display:none}
  .table .d-none{display:block}
  
  /* Clickable row styles */
  .clickable-row{transition:background-color 0.15s ease}
  .clickable-row:hover{background-color:#f0f8ff !important}
  
  /* Summary table specific styles */
  #summary-container .table tbody tr:first-child{background:#d4edda !important;font-weight:bold;margin-bottom:0.5rem;padding:0.5rem}
  #summary-container .table tbody tr:last-child{background:#d4edda !important;font-weight:bold;margin-top:0.4rem;padding:0.5rem}
  
  /* Section header rows with colspan */
  .table tbody tr:has(td[colspan]){grid-template-columns:1fr;padding:0.4rem 0.5rem;background:#f8f9fa !important;font-weight:600;margin-top:0.4rem;margin-bottom:0.2rem}
  .table tbody tr:has(td[colspan]) td{text-align:left !important;font-size:0.9rem;grid-column:1/-1}
  
  /* Total Expenditure row - same as data rows but with gray background */
  .table tbody tr[style*="f8f9fa"]:not(:has(td[colspan])){background:#f8f9fa !important;font-weight:bold}
  
  /* Category rows - compact with indent */
  .table tbody tr:not([style*="background"]) td:first-child{padding-left:0.75rem;font-size:0.9rem}
  
  /* Remove table borders */
  .table-bordered{border:none}
  .table-bordered td, .table-bordered th{border:none}
  
  /* Adjust column widths for better fit */
  .table tr{grid-template-columns:minmax(100px,1fr) auto auto}
  .table td:nth-child(2){min-width:60px}
  .table td:nth-child(3){min-width:55px}
}

/* Utility */
.mb-3{margin-bottom:1rem}
.mb-2{margin-bottom:0.5rem}
.d-grid{display:grid}
.row{display:flex;gap:0.75rem}
.col-6{flex:1}

@media (max-width:576px){
  .row{flex-direction:column}
}

/* Small-screen improvements for touch targets and spacing */
@media (max-width:576px){
  .d-grid .btn { width:100%; padding:0.75rem; font-size:1rem; }
  .mb-3{margin-bottom:1.25rem}
  header h1{font-size:1rem}
  .form-control{padding:0.75rem 0.85rem}
}

/* Focus styles for accessibility */
.btn:focus,
.form-control:focus{outline:3px solid rgba(13,110,253,0.18); outline-offset:2px}

/* Scroll to Top Button */
.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, background 0.3s ease, transform 0.2s ease;
  z-index: 1000;
}

.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
}

.scroll-to-top:hover {
  background: #0056b3;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.scroll-to-top:active {
  transform: translateY(-1px);
}

.scroll-to-top svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 576px) {
  .scroll-to-top {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 45px;
    height: 45px;
  }
}

/* Return Transaction Styles */
.transaction-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.transaction-modal .modal-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  margin: 2rem auto;
  position: relative;
}

.transaction-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #dee2e6;
}

.transaction-modal .modal-header h5 {
  margin: 0;
  font-size: 1.25rem;
}

.transaction-modal .modal-header .close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: #000;
  opacity: 0.5;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
}

.transaction-modal .modal-header .close:hover {
  opacity: 0.75;
}

.transaction-modal .modal-body {
  padding: 1.5rem;
}

.return-badge {
  background: var(--danger);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: bold;
}

.return-icon {
  color: var(--danger);
  font-size: 1.1em;
  margin-right: 0.25rem;
}

/* Return Transaction Table Styles */
.transaction-row.is-return {
  background-color: #ffebee !important;
}

.transaction-row.is-return:hover {
  background-color: #ffcdd2 !important;
}

/* Disabled button styling */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .transaction-modal .modal-content {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }
  
  .transaction-modal .modal-header,
  .transaction-modal .modal-body {
    padding: 1rem;
  }
  
  .transaction-details table {
    font-size: 0.85em;
  }
  
  .transaction-details table th,
  .transaction-details table td {
    padding: 0.35rem 0.15rem !important;
  }
}

/* ============================================
   NEW NAVIGATION STYLES
   ============================================ */

/* Main Header */
.main-header {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.main-header .navbar {
    padding: 0.5rem 1rem;
}

.main-header .navbar-brand {
    font-weight: bold;
    color: #007bff !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.main-header .nav-link {
    color: #495057;
    padding: 0.5rem 1rem;
}

.main-header .nav-link:hover {
    color: #007bff;
}

.main-header .navbar-toggler {
    border: none;
    padding: 0.5rem;
}

.main-header .navbar-toggler:focus {
    box-shadow: none;
}

/* Sub Navigation */
.sub-nav {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem 0;
    position: relative;
}

.sub-nav .container-fluid {
    position: relative;
}

.sub-nav .nav {
    flex-wrap: nowrap;
    display: flex;
}

.sub-nav .nav-item {
    flex-shrink: 0;
}

.sub-nav .nav-item.dropdown {
    position: relative;
}

.sub-nav .nav-link {
    color: #495057;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    margin-right: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.sub-nav .nav-link:hover {
    background: #e9ecef;
    color: #007bff;
}

.sub-nav .nav-link.active {
    background: #007bff;
    color: #fff;
}

.sub-nav .nav-link i {
    font-size: 1.1em;
}

/* Dropdown improvements */
.dropdown-menu {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.5rem 0;
    max-height: 80vh;
    overflow-y: auto;
    position: absolute;
    z-index: 1050;
}

.dropdown-header {
    color: #6c757d;
    font-weight: bold;
    font-size: 0.75em;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    letter-spacing: 0.5px;
}

.dropdown-item {
    padding: 0.5rem 1rem;
    color: #495057;
    transition: background-color 0.15s ease;
}

.dropdown-item:hover {
    background: #f8f9fa;
    color: #007bff;
}

.dropdown-item i {
    width: 20px;
    margin-right: 0.5rem;
    text-align: center;
}

.dropdown-divider {
    margin: 0.5rem 0;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    /* Reduce container padding on mobile */
    .container {
        padding: 0.5rem;
    }
    
    /* Add spacing after sticky headers */
    body {
        padding-top: 0;
    }
    
    .main-header .navbar {
        padding: 0.5rem;
    }
    
    .main-header .navbar-brand {
        font-size: 1.1rem;
    }
    
    .main-header .navbar-brand img {
        height: 24px !important;
    }
    
    /* Mobile menu styles - direct items, no accordions */
    .main-header .navbar-collapse {
        margin-top: 0.5rem;
    }
    
    .main-header .navbar-nav {
        width: 100%;
    }
    
    .main-header .nav-item {
        width: 100%;
        border-bottom: 1px solid #e9ecef;
    }
    
    .main-header .nav-link {
        display: flex;
        align-items: center;
        padding: 0.75rem 1rem;
        width: 100%;
        color: #495057;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .main-header .nav-link:hover,
    .main-header .nav-link:focus {
        background-color: #f8f9fa;
        color: #007bff;
    }
    
    .main-header .nav-link.active {
        background-color: #007bff;
        color: #fff !important;
        font-weight: 600;
    }
    
    .main-header .nav-link.active:hover {
        background-color: #0056b3;
        color: #fff !important;
    }
    
    .main-header .nav-link i {
        margin-right: 0.5rem;
        width: 20px;
        text-align: center;
    }
    
    /* User name text styling */
    .main-header .nav-link.text-muted {
        background-color: #f8f9fa;
        font-weight: 600;
        cursor: default;
    }
    
    .main-header .nav-link.text-muted:hover {
        background-color: #f8f9fa;
        color: #6c757d !important;
    }
    
    /* Logout button styling */
    .main-header form.d-inline {
        width: 100%;
        margin: 0;
    }
    
    .main-header .nav-link.btn.btn-link {
        border: none;
        text-decoration: none;
        background: transparent;
        border-radius: 0;
        padding: 0.75rem 1rem;
        color: #dc3545;
    }
    
    .main-header .nav-link.btn.btn-link:hover,
    .main-header .nav-link.btn.btn-link:focus {
        background-color: #f8f9fa;
        color: #bd2130;
    }
    
    /* Sub-nav mobile styles */
    .sub-nav {
        padding: 0.25rem 0.35rem;
        overflow-x: hidden;
        overflow-y: visible;
        background: #fff;
        border-bottom: 1px solid #dee2e6;
        display: block !important;
    }
    
    .sub-nav .container-fluid {
        padding: 0;
        width: 100%;
        display: block !important;
    }
    
    .sub-nav .nav,
    .sub-nav .nav-pills,
    .sub-nav .navbar-nav {
        flex-wrap: nowrap !important;
        display: flex !important;
        gap: 0.2rem;
        padding: 0;
        list-style: none;
        margin: 0;
        justify-content: space-between;
    }
    
    .sub-nav .nav-item {
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: 0;
        display: block !important;
        visibility: visible !important;
    }
    
    .sub-nav .nav-link .nav-text {
        display: none !important;
    }
    
    .sub-nav .nav-link {
        padding: 0.35rem 0.2rem !important;
        justify-content: center;
        width: 100%;
        border-radius: 3px;
        background: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        display: flex !important;
        align-items: center;
        visibility: visible !important;
    }
    
    .sub-nav .nav-link.active {
        background: #007bff !important;
        color: #fff !important;
        border-color: #007bff !important;
    }
    
    .sub-nav .nav-link i {
        font-size: 0.95em;
        margin: 0;
        display: inline-block !important;
        visibility: visible !important;
    }
    
    .sub-nav .dropdown-menu {
        font-size: 0.9rem;
        min-width: 200px;
        max-height: 60vh;
        overflow-y: auto;
        position: fixed !important;
        z-index: 1055;
    }
    
    /* Prevent body scroll when dropdown is open */
    body:has(.sub-nav .dropdown-menu.show) {
        overflow: hidden;
    }
    
    /* Main content area */
    main {
        min-height: calc(100vh - 200px);
        width: 100%;
    }
    
    /* Card improvements on mobile */
    .card {
        margin-bottom: 1rem;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        width: 100%;
    }
    
    .card h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    /* Better spacing for form elements */
    .form-control,
    .form-select {
        font-size: 1rem;
    }
}

@media (min-width: 769px) {
    .sub-nav .nav-link {
        white-space: nowrap;
    }
}

/* Keep existing admin-header for backward compatibility but hide when main-header is present */
body:has(.main-header) .admin-header {
    display: none;
}