/* =====================================================
   Base Layout & Theme Styles (Refined)
   ===================================================== */

/* Define CSS Variables */
:root,
body[data-theme="teal_scribe"] {
  --primary-color: #0296ce;
  --primary-light: #e6f7f7;
  --secondary-color: #003e67;

  --success-color: #003e67;
  --info-color: #0dcaf0;
  --warning-color: #ffc107;
  --danger-color: #dc3545;

  --dark-color: #1e1e2d;
  --light-color: #f8f9fc;
  --gray-bg: #f5f7fb;

  --sidebar-bg: #f2fdfa;
  --topnav-bg: #ffffff;
  --content-bg: var(--gray-bg);

  --text-color: #3a3a3a;
  --muted-color: #6c757d;
  --border-color: rgba(42, 179, 175, 0.15);
  --border-radius: 8px;

  --sidebar-width: 280px;
  --sidebar-collapsed-width: 75px;
  --top-nav-height: 60px;

  --transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 3px 8px rgba(42, 179, 175, 0.05);
  --shadow-md: 0 5px 15px rgba(42, 179, 175, 0.08);
}

body[data-theme="blue_scribe"] {
    --primary-color: #007bff;
    --primary-light: #e3f2fd;
    --secondary-color: #0056b3;
  
    --success-color: #198754;
    --info-color: #0dcaf0;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
  
    --dark-color: #1e1e2d;
    --light-color: #f8f9fc;
    --gray-bg: #f5f7fb;
  
    --sidebar-bg: #eaf4ff;
    --topnav-bg: #ffffff;
    --content-bg: var(--gray-bg);
  
    --text-color: #2c2c2c;
    --muted-color: #6c757d;
    --border-color: rgba(0, 123, 255, 0.15);
  
    --border-radius: 8px;
    --shadow-sm: 0 3px 8px rgba(0, 123, 255, 0.08);
    --shadow-md: 0 5px 15px rgba(0, 123, 255, 0.12);
  }  

  body[data-theme="purple_scribe"] {
    --primary-color: #6f42c1;
    --primary-light: #f3e8fd;
    --secondary-color: #5e35b1;
  
    --success-color: #198754;
    --info-color: #0dcaf0;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
  
    --dark-color: #1e1e2d;
    --light-color: #f8f9fc;
    --gray-bg: #f5f7fb;
  
    --sidebar-bg: #f8f2fd;
    --topnav-bg: #ffffff;
    --content-bg: var(--gray-bg);
  
    --text-color: #3c2c4e;
    --muted-color: #6c757d;
    --border-color: rgba(111, 66, 193, 0.15);
  
    --border-radius: 8px;
    --shadow-sm: 0 3px 8px rgba(111, 66, 193, 0.08);
    --shadow-md: 0 5px 15px rgba(111, 66, 193, 0.12);
  }  

  body[data-theme="midnight"] {
    --primary-color: #4a4a4a;  
    --primary-light: #e6e6e6;     
    --secondary-color: #6a6a6a;   
  
    --success-color: #6c6c6c;     
    --info-color: #8a8a8a;
    --warning-color: #a0a0a0;
    --danger-color: #7a7a7a;
  
    --dark-color: #2a2a2a;      
    --light-color: #f4f4f4;     
    --gray-bg: #f0f0f0;              
  
    --sidebar-bg: #f2f2f2;
    --topnav-bg: #fafafa;
    --content-bg: #f7f7f7;
  
    --text-color: #2d2d2d;
    --muted-color: #888888;
    --border-color: rgba(0, 0, 0, 0.07);
  
    --border-radius: 8px;
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  }  
  
  
  body[data-theme="sunset"] {
    --primary-color: #ff7043;
    --primary-light: #fff3e0;
    --secondary-color: #e64a19;
  
    --success-color: #43a047;
    --info-color: #29b6f6;
    --warning-color: #ffa000;
    --danger-color: #e53935;
  
    --dark-color: #3e2723;
    --light-color: #fffaf0;
    --gray-bg: #fff8f0;
  
    --sidebar-bg: #fff8e1;
    --topnav-bg: #fffde7;
    --content-bg: #fffaf0;
  
    --text-color: #4e342e;
    --muted-color: #8d6e63;
    --border-color: rgba(255, 112, 67, 0.15);
  
    --border-radius: 8px;
    --shadow-sm: 0 3px 8px rgba(255, 112, 67, 0.08);
    --shadow-md: 0 5px 15px rgba(255, 112, 67, 0.12);
  }
  

/* --- Base HTML/Body --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: auto; min-height: 100%; margin: 0; padding: 0; font-family: 'Inter', sans-serif; background-color: var(--content-bg); color: var(--text-color); font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

/* --- Sidebar Styles --- */
.sidebar {
    width: var(--sidebar-width); flex-shrink: 0; background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color); box-shadow: var(--shadow-sm);
    transition: width 0.3s ease; z-index: 1030; display: flex; flex-direction: column;
    height: 100vh; position: fixed; left: 0; top: 0;
}
.sidebar-header {
    padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--border-color);
    flex-shrink: 0; text-align: center; height: var(--top-nav-height);
    display: flex; align-items: center; justify-content: center;
}
.sidebar .logo { height: auto; max-width: 150px; max-height: 95px; transition: opacity 0.3s ease, transform 0.3s ease; transform: scale(1); }
.sidebar-nav-container {
    flex-grow: 1; overflow-y: auto; padding: 1rem 0.75rem;
    scrollbar-width: thin; scrollbar-color: rgba(42, 179, 175, 0.2) transparent;
    max-height: calc(100vh - var(--top-nav-height) - 60px);
}
/* Hide the brand label on small screens */
@media (max-width: 576px) {
    .sidebar-brand-label {
      display: none;
    }
  }
  
  /* Hide the brand label when sidebar is collapsed */
  body.sidebar-collapsed .sidebar-brand-label {
    display: none;
  }  

/* Sidebar Links */
.sidebar .nav-pills .nav-link {
    color: var(--text-color);
    padding: 0.8rem 1rem; /* Increased vertical padding slightly */
    border-radius: var(--border-radius); margin-bottom: 0.3rem;
    font-weight: 500;
    font-size: 0.93rem; /* Slightly larger font size */
    transition: background-color 0.2s ease-out, color 0.2s ease-out, transform 0.15s ease-out;
    display: flex; align-items: center; gap: 0.9rem;
    white-space: nowrap; overflow: hidden; border: 1px solid transparent;
    text-decoration: none; /* Ensure no default underline */
}
/* --- UPDATED: Icon Default Color --- */
.sidebar .nav-pills .nav-link i.fa-fw {
    width: 20px; text-align: center; font-size: 1rem;
    color: var(--primary-color); /* MAKE ICON TEAL BY DEFAULT */
    transition: color 0.2s ease-out; flex-shrink: 0; margin-left: 2px;
}
.sidebar .nav-pills .nav-link span { transition: opacity 0.2s ease; opacity: 1; }
.sidebar .nav-pills .nav-link.active {
    background-color: var(--primary-color); color: white;
    box-shadow: 0 3px 9px rgba(42, 179, 175, 0.3);
}
.sidebar .nav-pills .nav-link.active i.fa-fw { color: white; } /* Icon becomes white when active */
.sidebar .nav-pills .nav-link:hover:not(.active) {
    background-color: var(--primary-light); color: var(--primary-color);
    transform: translateX(3px);
    text-decoration: none; /* --- ADDED: Remove underline on hover --- */
}
.sidebar .nav-pills .nav-link:hover:not(.active) i.fa-fw { color: var(--primary-color); /* Stays primary on hover */ }
/* --- ADDED: Ensure span doesn't get underline from general hover rule --- */
.sidebar .nav-pills .nav-link:hover span { text-decoration: none; }


/* Sidebar Footer */
.sidebar-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.sidebar-footer .collapse-toggle-button { /* Style the collapse toggle */
    color: var(--muted-color); font-weight: 500; font-size: 0.85rem; background: none; border: none;
    width: 100%; text-align: left; padding: 0.6rem 1rem; display: flex; align-items: center;
    gap: 0.8rem; border-radius: var(--border-radius); white-space: nowrap; overflow: hidden;
    margin-bottom: 0.5rem; text-decoration: none; /* Remove underline */
}
.sidebar-footer .collapse-toggle-button:hover { background-color: var(--primary-light); color: var(--primary-color); text-decoration: none; /* Remove underline */ }
.sidebar-footer .collapse-toggle-button i.fa-fw { width: 20px; text-align: center; font-size: 0.9rem; flex-shrink: 0; }
.sidebar-footer .collapse .nav-link { /* Links inside collapse */
    color: var(--muted-color); padding: 0.6rem 1rem 0.6rem 2.7rem; /* Indent */
    border-radius: var(--border-radius); margin-bottom: 0.25rem; font-weight: 500; font-size: 0.85rem;
    display: flex; align-items: center; gap: 0.8rem; white-space: nowrap; overflow: hidden;
    text-decoration: none; /* Remove underline */
}
.sidebar-footer .collapse .nav-link:hover { background-color: var(--primary-light); color: var(--primary-color); text-decoration: none; /* Remove underline */ }
.sidebar-footer .collapse .nav-link i.fa-fw {
    width: 20px; text-align: center; font-size: 0.9rem;
    color: var(--primary-color); /* --- UPDATED: Use primary color for footer icons too --- */
    flex-shrink: 0; margin-left: -1.9rem;
}
.sidebar-footer .collapse .nav-link:hover i.fa-fw { color: var(--primary-color); } /* Keep primary on hover */

/* --- Collapsed Sidebar Styles --- */
body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .sidebar .logo { opacity: 0; transform: scale(0.8); pointer-events: none; }
body.sidebar-collapsed .sidebar .nav-link span,
body.sidebar-collapsed .sidebar-footer .collapse-toggle-button span,
body.sidebar-collapsed .sidebar-footer .collapse .nav-link span { opacity: 0; width: 0; }
body.sidebar-collapsed .sidebar .nav-link,
body.sidebar-collapsed .sidebar-footer .collapse-toggle-button,
body.sidebar-collapsed .sidebar-footer .collapse .nav-link {
    justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; gap: 0;
}
body.sidebar-collapsed .sidebar .nav-link i.fa-fw,
body.sidebar-collapsed .sidebar-footer .collapse-toggle-button i.fa-fw,
body.sidebar-collapsed .sidebar-footer .collapse .nav-link i.fa-fw { margin-left: 0; }
body.sidebar-collapsed .sidebar-footer .collapse .nav-link { padding-left: 0.5rem; }

/* --- Main Content Area Styles --- */
.main-content-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  background-color: var(--content-bg);
}
body.sidebar-collapsed .main-content-wrapper {
  margin-left: var(--sidebar-collapsed-width);
}

.content-area {
  flex: 1 0 auto;
  padding: 1.5rem;
  overflow-y: auto;
  min-height: 0; /* 🔑 Required inside flex column */
}

 /* Top Navigation Bar */
 .top-nav {
     height: var(--top-nav-height); background-color: var(--topnav-bg); border-bottom: 1px solid var(--border-color);
     padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between;
     flex-shrink: 0; box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 1020;
 }
 .top-nav .left-controls { display: flex; align-items: center; gap: 1rem; }
 .top-nav #toggle-sidebar-btn { background: none; border: none; font-size: 1.2rem; color: var(--muted-color); cursor: pointer; padding: 0.5rem; line-height: 1; }
 .top-nav #toggle-sidebar-btn:hover { color: var(--primary-color); }
 .top-nav h1 { font-size: 1.3rem; font-weight: 600; margin-bottom: 0; color: var(--dark-color); line-height: 1; }

 .top-nav .right-controls { display: flex; align-items: center; gap: 1rem; }
 .wallet-tools { display: flex; align-items: center; gap: 0.75rem; }
 .wallet-balance { font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 15px; font-size: 0.9rem; line-height: 1.2; }
 .wallet-balance.low-balance { background-color: var(--danger-color); color: white; }
 .wallet-balance.medium-balance { background-color: var(--warning-color); color: var(--dark-color); }
 .wallet-balance.high-balance { background-color: var(--success-color); color: white; }
 .wallet-icon { color: var(--muted-color); font-size: 1.1rem; text-decoration: none; transition: color 0.2s ease; }
 .wallet-icon:hover { color: var(--primary-color); }
 .user-profile-btn { background: none; border: none; padding: 0; border-radius: 50%; line-height: 0; }
 .profile-picture { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; cursor: pointer; border: 2px solid var(--border-color); transition: border-color 0.2s ease; }
 .user-profile-btn:hover .profile-picture { border-color: var(--primary-color); }

/* Flash Messages */
.flash-messages-container { position: fixed; top: calc(var(--top-nav-height) + 1rem); right: 1.5rem; z-index: 1055; width: auto; max-width: 450px; }
.flash-messages-container .alert { box-shadow: var(--shadow-md); border-left: 4px solid; font-size: 0.9rem; }
.flash-messages-container .alert-success { border-left-color: var(--success-color); }
.flash-messages-container .alert-danger { border-left-color: var(--danger-color); }
.flash-messages-container .alert-warning { border-left-color: var(--warning-color); }
.flash-messages-container .alert-info { border-left-color: var(--info-color); }
.flash-messages-container .alert-secondary { border-left-color: var(--muted-color); }

/* General Helpers & Typography */
h1, h2, h3, h4, h5, h6 { color: var(--dark-color); letter-spacing: -0.2px; font-weight: 600; margin-bottom: 0.75rem;}
h1 { font-size: 1.8rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.3rem; } h4 { font-size: 1.15rem; } h5 { font-size: 1rem; } h6 { font-size: 0.9rem; }

/* --- UPDATED: General link hover --- */
a { color: var(--primary-color); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--secondary-color); text-decoration: none; /* REMOVED default underline for general links */ }

.btn { border-radius: var(--border-radius); padding: 0.5rem 1.2rem; font-weight: 500; transition: all 0.2s ease; font-size: 0.9rem; }
.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); color: white; }
.btn-primary:hover { background-color: var(--secondary-color); border-color: var(--secondary-color); color: white; }
.btn-secondary { background-color: #e9ecef; border-color: #e9ecef; color: var(--dark-color); }
.btn-secondary:hover { background-color: #ced4da; border-color: #ced4da; }
.btn-outline-danger { color: var(--danger-color); border-color: var(--danger-color); }
.btn-outline-danger:hover { background-color: var(--danger-color); color: white; }

/* Scrollbar (Webkit) */
::-webkit-scrollbar { width: 7px; height: 7px; background-color: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: rgba(42, 179, 175, 0.3); border-radius: 10px; border: 1px solid transparent; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(42, 179, 175, 0.5); }

/* Focus states */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; box-shadow: 0 0 0 3px var(--primary-light); }
a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible), textarea:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; }

/* === Model Dropdown === */
#modelDropdown {
  padding: 6px 10px;
  font-size: 16px;
  border: none;
  background: transparent;
  color: var(--text-color);
}

#modelDropdown i {
  font-size: 18px;
  color: var(--primary-color);
}

.dropdown-menu .dropdown-item.model-choice.active {
  background-color: var(--primary-light);
  font-weight: bold;
  color: var(--primary-color);
}

.dropdown-menu .dropdown-item.model-choice:hover {
  background-color: var(--primary-light);
  color: var(--primary-color);
}

@media (max-width: 767.98px) {
  .top-nav h1 {
    display: none;
  }
}


#theme-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .theme-modal-content {
    background: var(--content-bg);
    color: var(--text-color);
    border-radius: 10px;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    box-shadow: var(--shadow-md);
    position: relative;
  }
  #close-theme-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-color);
  }

/* Start with hidden sidebar */
body.sidebar-mobile-hidden .sidebar {
  left: calc(-1 * var(--sidebar-width));
}

/* When shown, apply a new class */
body.sidebar-mobile-visible .sidebar {
  left: 0;
}

.footer {
  flex-shrink: 0;
  background-color: var(--topnav-bg);
  color: var(--muted-color);
  font-size: 0.85rem;
  border-top: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  padding: 1rem 0;
}
  
/* =====================================================
   Tablet & Mobile Base Styles (Screens <= 991.98px)
   ===================================================== */
   @media (max-width: 991.98px) {

    /* --- Base Adjustments --- */
    :root {
      /* Optional: Slightly reduce sidebar width if desired */
      /* --sidebar-width: 260px; */
      --border-radius: 6px; /* Reduce default border radius */
    }
  
    /* --- Body Layout for Mobile --- */
    body {
      display: block;       /* Switch from flex to block layout */
      overflow-y: auto;     /* Allow vertical scrolling if needed */
      height: auto;         /* Let content determine body height */
      min-height: 100%;     /* Ensure body fills at least the viewport height */
    }
  
    /* --- Sidebar Overlay Behavior --- */
    .sidebar {
      position: fixed;                    /* Position fixed to overlay content */
      left: calc(-1 * var(--sidebar-width)); /* Initially hidden off-screen */
      top: 0;
      height: 100vh;                      /* Full viewport height */
      z-index: 1040;                      /* Ensure sidebar is above overlay */
      background-color: var(--sidebar-bg);/* Ensure solid background */
      box-shadow: var(--shadow-md);       /* Add shadow for depth */
      transition: left 0.3s ease-in-out; /* Animate slide-in/out */
    }
  
    body.sidebar-mobile-visible .sidebar {
      left: 0; /* Slide sidebar into view */
    }
  
    /* Dimming Overlay when Sidebar is Visible */
    body.sidebar-mobile-visible::before {
      content: "";
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent background */
      z-index: 1039;                      /* Position below sidebar */
      display: block;
    }
  
    /* Prevent body scroll when sidebar is open */
    body.sidebar-mobile-visible {
        overflow: hidden;
    }
  
    /* --- Main Content Layout --- */
    .main-content-wrapper {
      margin-left: 0;           /* Remove sidebar margin */
      width: 100%;              /* Occupy full width */
      height: auto !important;  /* Let content dictate height (important might be needed to override base) */
      min-height: 95vh;        /* Ensure it fills viewport height */
      overflow-y: auto;         /* Enable vertical scrolling for content */
      overflow-x: hidden;       /* Prevent horizontal scrolling */
      transition: none;         /* Disable margin transition */
    }  
  
    /* --- Top Navigation Adjustments --- */
    .top-nav {
      position: sticky;         /* Keep top nav visible on scroll */
      top: 0;
      padding: 0 1.25rem;       /* Adjust horizontal padding */
    }
  
    .top-nav #toggle-sidebar-btn {
      display: block;           /* Ensure toggle button is always visible */
      font-size: 1.3rem;        /* Slightly larger tap target */
    }
  
    .top-nav h1 {
      font-size: 1.2rem;        /* Slightly smaller title */
    }
  
    .top-nav .left-controls,
    .top-nav .right-controls {
      gap: 0.75rem;             /* Reduce gap between controls */
    }
  
    /* --- Content Area Padding --- */
    .content-area {
      padding: 1.25rem;         /* Adjust content padding */
    }
  
    /* --- Flash Message Positioning --- */
    .flash-messages-container {
      top: calc(var(--top-nav-height) + 1rem);
      right: 1rem;
      left: auto;               /* Ensure it stays on the right */
      max-width: 320px;         /* Limit width */
      width: auto;
    }
  
    /* --- Theme Modal Sizing --- */
    .theme-modal-content {
      padding: 1.5rem;
      max-width: 90%;           /* Ensure modal fits screen */
    }
  
    /* --- Reset Desktop-Specific Styles --- */
  
    /* Disable visual effects of desktop 'collapsed' state */
    body.sidebar-collapsed .sidebar {
      width: var(--sidebar-width); /* Override collapsed width */
    }
    body.sidebar-collapsed .main-content-wrapper {
      margin-left: 0; /* Override collapsed margin */
    }
  
    /* Ensure elements hidden in desktop collapsed view are visible in mobile sidebar */
    .sidebar-header .logo,
    .sidebar-brand-label {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
      display: inline-block !important; /* Ensure label shows */
    }
  
    .sidebar .nav-link span,
    .sidebar-footer .collapse-toggle-button span,
    .sidebar-footer .collapse .nav-link span {
      opacity: 1; /* Ensure text is visible */
      width: auto;
    }
  
    /* Restore normal padding, alignment, and gaps for sidebar items */
    .sidebar .nav-link,
    .sidebar-footer .collapse-toggle-button,
    .sidebar-footer .collapse .nav-link {
      justify-content: flex-start;
      padding-left: 1rem;
      padding-right: 1rem;
      gap: 0.9rem;
    }
  
     /* Restore icon margins and positions */
     .sidebar .nav-link i.fa-fw,
     .sidebar-footer .collapse-toggle-button i.fa-fw {
       margin-left: 2px;
     }
     .sidebar-footer .collapse .nav-link {
       padding-left: 2.7rem; /* Restore footer link indentation */
     }
     .sidebar-footer .collapse .nav-link i.fa-fw {
       margin-left: -1.9rem; /* Restore footer icon position */
     }
  
  } /* End @media (max-width: 991.98px) */
  
  
  /* =====================================================
     Phone Specific Styles (Screens <= 767.98px)
     ===================================================== */
  @media (max-width: 767.98px) {
  
    /* --- Base Adjustments --- */
    :root {
      /* Optional: Further reduce sidebar width */
      /* --sidebar-width: 240px; */
      /* Optional: Reduce top nav height */
      /* --top-nav-height: 56px; */
      --border-radius: 5px; /* Reduce border radius further */
    }
  
    /* Sidebar behavior inherited from the 991.98px breakpoint */
  
    /* --- Top Navigation Adjustments --- */
    .top-nav {
      padding: 0 0.75rem; /* Further reduce padding */
      /* Apply height if --top-nav-height variable is changed */
      /* height: var(--top-nav-height); */
    }
  
    .top-nav h1 {
      font-size: 1.1rem; /* Smaller title */
    }
  
    .top-nav .left-controls {
      gap: 0.4rem; /* Tighter gap */
    }
     .top-nav .right-controls {
      gap: 0.5rem; /* Tighter gap */
    }
  
    /* --- Wallet Display Adjustments --- */
    .wallet-balance {
      padding: 0.2rem 0.5rem;
      font-size: 0.8rem; /* Smaller font */
      border-radius: 12px;
    }
    .wallet-icon {
      font-size: 1.1rem; /* Ensure icon remains easily tappable */
    }
    /* Optional: Hide balance text, show only icon/indicator color */
    /* .wallet-balance span { display: none; } */
    /* .wallet-tools { gap: 0.5rem; } */
  
    /* --- Profile Picture --- */
    .profile-picture {
      width: 34px;
      height: 34px;
      border-width: 1px;
    }
  
    /* --- Content Area Padding --- */
    .content-area {
      padding: 1rem; /* Less padding for small screens */
    }
  
    /* --- Typography --- */
    html, body {
      font-size: 13.5px; /* Slightly smaller base font */
    }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.15rem; }
    h4 { font-size: 1.05rem; }
  
    /* --- Buttons --- */
    .btn {
      padding: 0.45rem 0.9rem;
      font-size: 0.85rem;
    }
    .btn-sm {
      padding: 0.35rem 0.7rem;
      font-size: 0.75rem;
    }
  
    /* --- Flash Messages Positioning --- */
    .flash-messages-container {
      max-width: 92%;    /* Use more screen width */
      left: 4%;          /* Center slightly with equal side margins */
      right: 4%;
      top: calc(var(--top-nav-height) + 0.75rem);
      width: auto;
      font-size: 0.85rem;
    }
  
    /* --- Sidebar Item Adjustments --- */
    .sidebar .nav-pills .nav-link {
      padding: 0.7rem 0.8rem; /* Adjust padding */
      font-size: 0.9rem;      /* Adjust font */
      gap: 0.75rem;           /* Adjust gap */
    }
     .sidebar .nav-pills .nav-link i.fa-fw {
      font-size: 0.95rem;   /* Adjust icon size */
     }
     /* Optional: Hide brand label if sidebar becomes too narrow */
     /* .sidebar-brand-label { display: none !important; } */
     /* .sidebar-header { justify-content: center; } */
  
     /* --- Theme Modal Adjustments --- */
     .theme-modal-content {
       padding: 1.25rem;      /* Reduce padding */
       width: 94%;            /* Ensure it fits comfortably */
     }
     #close-theme-modal {
       top: 8px;              /* Adjust close button position */
       right: 12px;
       font-size: 22px;
     }
  
  } /* End @media (max-width: 767.98px) */
  
  /* Note: The theme modal (#theme-modal) visibility is typically controlled
     by JavaScript (adding/removing a class or changing inline 'display' style),
     not solely by these CSS rules. These styles apply when it *is* visible. */

/* Edit Profile Modal */
.edit-profile-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    overflow-y: auto;
    padding: 1.5rem;
}

.edit-profile-modal__dialog {
    width: min(420px, 100%);
    margin: 4rem auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
    padding: 1.5rem 1.25rem;
}

.edit-profile-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.edit-profile-modal__title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.edit-profile-form .form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark-color);
}

.edit-profile-form .form-control {
    font-size: 0.9rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
}

.edit-profile-form .btn-primary {
    padding: 0.65rem 1.1rem;
    border-radius: 8px;
    font-weight: 600;
}

.profile-picture-preview {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.profile-picture-preview__img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.profile-picture-preview__path {
    background: #f8fafc;
    border-color: rgba(148, 163, 184, 0.6);
}

@media (max-width: 576px) {
    .edit-profile-modal {
        padding: 1rem;
    }
    .edit-profile-modal__dialog {
        margin: 2.75rem auto;
        padding: 1.25rem;
        border-radius: 10px;
    }
}