:root {
   /* Primary application colors - adapted from construe's look */
   --primary-text-color: #333;
   /* Darker text for readability */
   --secondary-text-color: #007bff; /* Accent for links/buttons */
   --main-bg-color: #f4f6f8;
   /* General page background, similar to original base */
   --card-bg-color: #ffffff;
   /* Background for sections/containers */
   --border-color: #ddd; /* Light border for elements */
   --shadow-color: rgba(0, 0, 0, 0.1);
   /* Subtle shadow */

   /* Navigation Specific Colors (from original hooter base) */
   --nav-primary-color: #3b3f58;
   /* Dark blue/grey for top navigation */
   --nav-secondary-color: #d39d3a;
   /* Gold accent for nav items */
   --nav-text-color: #fff;
   /* White text for top navigation */
   --nav-height: 60px;
   /* Nav height */
}

body {
   font-family: 'Inter', sans-serif;
   /* Using Inter as per instructions, or fallback to sans-serif */
   margin: 0;
   color: var(--primary-text-color);
   /* Use general primary text color */
   background-color: var(--main-bg-color);
   /* Use general background color */
   line-height: 1.3;
   /* Improve readability */
}


/* Main Content Container - For consistent padding, background, and shadow on main content blocks */
.app-container {
   padding: 20px;
   background-color: var(--card-bg-color);
   border-radius: 8px;
   box-shadow: 0 2px 4px var(--shadow-color);
   margin: 20px auto;
   /* Center the container with auto margins */
   max-width: 1200px;
   /* Max width for large screens */
   width: 95%;
   /* Responsive width */
}

.logo-in-page {
   width:75px;
}

.logo-in-header {
   width:66px;
   margin-right: 0.5em;
}

/* Top Navigation (from original hooter base) */
.top-nav {
   background-color: var(--nav-primary-color);
   color: var(--nav-text-color);
   height: var(--nav-height);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 1em;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 100;
}

.top-nav-left .logo-link {
   display: flex;
   align-items: center;
   text-decoration: none;
}

.top-nav-left .logo {
   height: 30px;
}

.top-nav-middle {
   display: none; /* Initially hide on mobile */
}

.top-nav-middle .nav-links {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
}

.top-nav-middle .nav-links .nav-item {
   margin-left: 1em;
}

.top-nav-middle .nav-links .nav-item > a {
   color: var(--nav-text-color);
   text-decoration: none;
   display: flex;
   align-items: center;
}

.top-nav-right {
   display: flex;
   align-items: center;
}

.top-nav-right .help-link {
   color: var(--nav-text-color);
   text-decoration: none;
   margin-right: 1em;
}

.top-nav-right .menu-toggle {
   background: none;
   border: none;
   color: var(--nav-text-color);
   font-size: 1.5em;
   cursor: pointer;
   display: block;
   /* Show on mobile */
   padding: 0.5em;
   margin-left: 1em;
}

.main-content {
   padding: 1em;
   margin-top: var(--nav-height);
}

.nav-user-email {
   color: var(--nav-secondary-color);
   padding: 0 1em;
}

/* Mobile Navigation */
.mobile-nav-overlay {
   position: fixed;
   top: 0; /* Full viewport overlay */
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
   z-index: 102;
   display: none;
   /* Hidden by default */
   align-items: center;
   justify-content: center;
   flex-direction: column;
   /* Stack links and close button */
}

.mobile-nav-overlay.open {
   display: flex;
}

.mobile-nav {
   width: 80%;
   /* Adjust width of the visible menu */
   max-width: 300px;
   background-color: var(--nav-primary-color);
   padding: 2em;
   border-radius: 8px;
}

.mobile-nav .mobile-nav-links {
   list-style: none;
   padding: 0;
   margin-bottom: 2em;
   /* Space for close button */
   text-align: left;
   /* Align links to the left */
}

.mobile-nav .mobile-nav-links li {
   margin-bottom: 0.5em;
}

.mobile-nav .mobile-nav-links li > a {
   color: var(--nav-text-color);
   text-decoration: none;
   font-size: 1.1em;
   display: block;
   /* Make links full width for easier tapping */
   padding: 0.75em 0;
}

.mobile-nav .mobile-nav-links li.has-mobile-submenu > a {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.mobile-nav .mobile-nav-links li.has-mobile-submenu > a::after {
   content: '\\f078';
   /* Font Awesome caret-down icon */
   font-family: 'Font Awesome 6 Free';
   font-weight: 900;
   margin-left: 0.5em;
}

.mobile-nav .mobile-submenu {
   list-style: none;
   padding-left: 1em;
   margin-top: 0.5em;
   display: none;
   /* Initially hidden */
}

.mobile-nav .mobile-submenu.open {
   display: block;
}

.mobile-nav .mobile-submenu li a {
   color: var(--nav-secondary-color);
   text-decoration: none;
   font-size: 1em;
   display: block;
   padding: 0.5em 0;
}

.mobile-nav .close-mobile-nav {
   background: none;
   border: none;
   color: var(--nav-text-color);
   font-size: 1.5em;
   cursor: pointer;
   align-self: flex-end; /* Position close button top-right of mobile nav */
   margin-top: -1em;
   /* Adjust position */
   margin-right: -1em;
}

.our_emphasis {
   color: #49177c;
   font-weight: bold;
   font-size: 1.05em;
}

/* Desktop Styles */
@media (min-width: 801px) {
   .top-nav-middle {
      display: flex;
      /* Show on desktop */
   }

   .top-nav-right .menu-toggle {
      display: none;
      /* Hide on desktop */
   }

   .mobile-nav-overlay {
      display: none !important;
      /* Ensure it's hidden on desktop */
   }

   /* Basic desktop submenu styling */
   .nav-item.has-submenu {
      position: relative;
   }

   .nav-item.has-submenu:hover > .submenu {
      display: block;
   }

   .submenu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: var(--nav-primary-color);
      border: 1px solid #555;
      border-top: none;
      list-style: none;
      padding: 0;
      margin: 0;
      min-width: 150px;
      z-index: 10;
   }

   .submenu.submenu-right {
      left: auto;
      right: 0;
   }

   .submenu li a {
      color: var(--nav-text-color);
      padding: 0.35em 1em;
      text-decoration: none;
      display: block;
   }

   .submenu li a:hover {
      background-color: #555;
   }

   .top-nav.hidden {
      top: -60px;
      /* Adjust this value to be the negative of your top-nav height */
   }
}

/* Dashboard Styles */

.dashboard-title {
   color: var(--primary-text-color);
   font-size: 2em;
   font-weight: bold;
   margin-bottom: 1em;
   padding-top: 1em;
}

.dashboard-sections {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   justify-content: flex-start;
}

.dashboard-section {
   background-color: var(--card-bg-color);
   border-radius: 8px;
   box-shadow: 0 4px 6px var(--shadow-color);
   padding: 20px;
   width: calc(30% - 20px);
   min-width: 250px;
   margin-bottom: 20px;
}

.section-header {
   display: flex;
   align-items: center;
   margin-bottom: 1em;
   color: var(--primary-text-color);
}

.section-header img {
   margin-right: 10px;
   width: 24px;
   height: 24px;
}

.section-content {
   display: flex;
   flex-direction: column;
}

.dashboard-link {
   color: var(--secondary-text-color);
   text-decoration: none;
   margin-bottom: 0.5em;
   display: block;
   transition: color 0.2s;
}

.dashboard-link:hover {
   color: #0056b3;
   text-decoration: underline;
}

.dashboard-link-inline {
   color: var(--secondary-text-color);
   text-decoration: none;
   margin-bottom: 0.5em;
   display: inline;
   transition: color 0.2s;
}

.dashboard-link-inline:hover {
   color: #0056b3;
   text-decoration: underline;
}

.section-icon {
   width: 24px;
   height: 24px;
   margin-right: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
   .dashboard-sections {
      flex-direction: column;
   }

   .dashboard-section {
      width: 100%;
   }
}

/* General button styling - serve as the base for all button-like elements */

/* 1. Base reset for <button> and <a> with construe-btn class.
This is the MOST specific base reset and MUST come first.
*/
button.construe-btn, a.construe-btn {
   /* Browser appearance resets */
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border: none;
   text-decoration: none;    /* Remove default link underline */
   font-family: inherit;
   font-size: inherit;
   cursor: pointer;
   /* Our desired consistent styling */
   display: inline-block;
   padding: 8px 15px;
   margin: 5px;
   border-radius: 5px;
   font-weight: bold;
   text-align: center;
   vertical-align: middle;
   line-height: normal;
   height: auto; /* Allow height to adjust based on content and padding */
   transition: background-color 0.3s ease, box-shadow 0.2s ease, transform 0.2s ease;
   box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* 2. Generic .construe-btn styling - This rule can be removed as its properties
      are now covered by button.construe-btn, a.construe-btn */
/* .construe-btn {
   transition: background-color 0.3s ease, box-shadow 0.2s ease;
   box-shadow: 0 1px 2px rgba(0,0,0,0.1);
} */

/* 3. Hover styles for general construe-buttons */
button.construe-btn:hover, a.construe-btn:hover {
    box-shadow: 0 6px 8px rgba(0,0,0,0.8);
    transform: translateY(-2px); /* Lifts the button slightly */
    /* Individual background-color changes from specific classes will apply */
}


/* 4. Specific button colors (MUST APPEAR *AFTER* THE ABOVE RULES to win the cascade) */

.add-btn, .save-btn {
   background-color: #28a745;
   color: white; /* Ensure text color is set here */
}
.add-btn:hover, .save-btn:hover {
   background-color: #218838;
   box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Apply hover shadow here too */
}

.warning-btn {
   background-color: #e8e71c;
   color: brown; /* Ensure text color is set here */
}
.warning-btn:hover {
   background-color: #c0bf18;
   box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Apply hover shadow here too */
}


.download-btn {
   background-color: #007bff;
   color: white;
   /* Ensure text color is set here */
}
.download-btn:hover {
   background-color: #0056b3;
   box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.search-btn, .cancel-btn {
   background-color: #6c757d; /* Gray */
   color: white;
}
.search-btn:hover, a.search-btn:hover, button.cancel-btn:hover, a.cancel-btn:hover { /* Added a.search-btn:hover to combine */
   background-color: #5a6268;
   box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.clear-filter-btn, .delete-btn {
   background-color: #dc3545; /* Red */
   color: white;
}
.clear-filter-btn:hover, a.clear-filter-btn:hover, button.delete-btn:hover, a.delete-btn:hover { /* Added a.clear-filter-btn:hover to combine */
   background-color: #c82333;
   box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Action buttons within tables or lists - inherit base .construe-btn styling */
a.action-btn { /* Make this specific to <a> tags */
   padding: 3px 3px;
   margin: 2px;
   font-size: 0.9em;
   white-space: nowrap;
   text-decoration: none; /* remove underline */
   border-radius: 5px;
   /* The background-color and text color are set by edit-btn/delete-btn */
   /* display: flex;
   !* Make the anchor a flex container *!*/
   /* align-items: center;
   !* Vertically center children (the image) *!*/
    /* justify-content: center;
   Optionally, horizontally center children */
}

/*a.action-btn img {*/
/* width: 17px;*/
/* height: auto;*/
/* !* To maintain aspect ratio *!*/
/* display: block;*/
/* !* Can sometimes help with sizing and alignment *!*/
/*}*/

a.edit-btn { /* Make this specific to <a> tags */
   background-color: #ffc107;
   color: white;
}
a.edit-btn:hover {
   background-color: #e0a800;
   box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Disabled state - MUST target button.disabled-btn, a.disabled-btn to be specific enough */
button.disabled-btn, a.disabled-btn {
   background-color: #e9ecef;
   color: #6c757d;
   cursor: not-allowed;
   opacity: 0.7;
   box-shadow: none; /* No shadow for disabled state */
}
/* End of button-related CSS.
*/

/* Utility classes */

.small-text {
  font-size: 70%;
}

.shift-left {
   text-align: left;
   margin-left: 22px;
   padding-left: 0;
}

.highlight-color {
   color: #962296;
   font-weight: bold;
}

.highlight-red {
  background-color: #ff0000; /* Red */
}

.dark-shadow {
   color: var(--nav-secondary-color);
   margin-left: 5px;
   font-weight: bolder;
   text-shadow: 3px 3px 5px #333;
}

.red-shadow {
   color: red;
   margin-left: 5px;
   font-weight: bolder;
   text-shadow: 3px 3px 5px #333;
}

/* Utility for small icons - Added to fix the large icon issue */
img.icon-small {
    width: 12px !important;
    height: auto !important;
    vertical-align: middle;
    margin-right: 5px;
}

img.icon-middle {
    width: 20px !important;
    height: auto !important;
    vertical-align: middle;
    margin-right: 5px;
}

img.icon-big {
    width: 30px !important;
    height: auto !important;
    vertical-align: middle;
    margin-right: 5px;
}

img.icon-bigger {
    width: 45px !important;
    height: auto !important;
    vertical-align: middle;
    margin-right: 5px;
}

/* Data Table Styles (Consolidated and adjusted for construe look) */
.data-table {
   width: 100%;
   border-collapse: separate;
   /* Allows border-radius on rows/cells and spacing */
   border-spacing: 0 10px;
   /* Space between rows */
   margin-top: 20px;
   border-radius: 0;
   /* Ensures the overall table corners are square */
   box-shadow: none;
   /* Ensures no overall table shadow */
   color: var(--primary-text-color);
}

.data-table thead {
    background-color: transparent;
    /* Make the overall thead background transparent */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    overflow: visible;
    /* Revert to default, no clipping needed for square header */
}

.data-table thead th {
   background-color: #007bff;
   /* Apply blue background directly to each th */
   color: #ffffff;
   padding: 7px 20px; /* size of box around the heading title */
   text-align: left;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   border: none; /* Remove borders between th cells */
   white-space: nowrap;
   /* Prevents header text from wrapping */
   border-radius: 18px;
   /* Apply rounding to each header cell */
   margin-right: 5px;
   /* Optional: Add a small gap between header cells for a distinct "pill" look */
   vertical-align: middle;
}


.data-table tbody tr {
   background-color: var(--card-bg-color); /* White/light background for rows */
   border: 1px solid var(--border-color);
   border-radius: 8px; /* Rounded corners for each row-card (this is desired) */
   box-shadow: 0 2px 4px var(--shadow-color);
   /* Subtle shadow for each row-card (this is desired) */
   transition: all 0.2s ease-in-out;
   /* Set default cursor for the row itself */
   cursor: default; /* [cite: 277] */
}

.data-table tbody td {
   padding: 12px 20px;
   border-bottom: none;
   border-right: none;
   border-left: none;
   color: var(--primary-text-color);
   vertical-align: middle;
}

/* Ensure first/last cells in a row handle border-radius correctly */
.data-table tbody tr td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.data-table tbody tr td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Changed for construe aesthetic: both even and odd rows are light */
.data-table tbody tr:nth-child(even),
.data-table tbody tr:nth-child(odd) {
   background-color: var(--card-bg-color);
}

/* Hover Effect remains, but cursor is changed */
.data-table tbody tr:hover {
   background-color: #e9ecef;
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0,0,0,0.2);
   /* REMOVED: cursor: pointer; from here */
   cursor: default; /*  Explicitly set to default on hover as well */
}

.data-table tbody tr:last-child td {
   border-bottom: none;
}

.data-table caption {
   font-size: 1.2em;
   font-weight: bold;
   margin-bottom: 10px;
   color: var(--primary-text-color);
   text-align: center;
}

/* Styling for a tighter, more compact data table */
.tighter-table {
    max-width: 600px;
    /* Optional: Further reduce padding if needed for extreme tightness */
    /*
    .tighter-table thead th,
    .tighter-table tbody td {
        padding: 8px 10px;
    // Example: smaller padding
    }
    */
}
.tighter-table-centered {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    /* Optional: Further reduce padding if needed for extreme tightness */
    /*
    .tighter-table thead th,
    .tighter-table tbody td {
        padding: 8px 10px;
    // Example: smaller padding
    }
    */
}

/* Style for the 'Paid' status when True (green) */
.data-table tbody td.status-paid-true { /* Added `td` to make it more specific */
    color: #28a745;
    /* Green color, consistent with add/save buttons */
    font-size: 1.22em;
    /* To make it slightly larger, matching original inline style */
    font-weight: bold;
}

/* Style for the 'Paid' status when False (red) */
.data-table tbody td.status-paid-false { /* Added `td` to make it more specific */
    color: #dc3545;
    /* Red color, consistent with delete/clear buttons */
    font-size: 1.22em;
    /* To make it slightly larger, matching original inline style */
    font-weight: bold;
}

/* NEW/MODIFIED RULE FOR THE DELETE LINK CURSOR */
.data-table tbody tr td .delete-link {
    cursor: pointer; /* Ensure the link itself always has a pointer */
}

.data-table tbody tr td .delete-link:hover {
    cursor: pointer; /* Keep pointer on hover */
    opacity: 0.8; /* Optional: Add a subtle visual hover effect to the icon */
}

/* --- REVISED MEDIA QUERY FOR GENERIC TABLE RESPONSIVENESS --- */
@media screen and (max-width: 768px) {
   .data-table {
      width: 95%;
      font-size: 0.9em;
      /* Ensure default table display for proper alignment on smaller screens */
      display: table;
      /* Revert to default table display */
      overflow-x: auto;
      /* Keep horizontal scroll for narrow screens */
      white-space: normal;
      /* Allow text to wrap if not nowrap elsewhere */
   }
   /* Ensure thead and tbody also revert to table-specific displays */
   .data-table thead {
       display: table-header-group;
   }
   .data-table tbody {
       display: table-row-group;
   }
   .data-table tr {
       display: table-row;
   }
   .data-table th,
   .data-table td {
       display: table-cell;
   }
}

/* Form Styling */
.construe-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.construe-form input[type="text"],
.construe-form input[type="email"],
.construe-form input[type="password"],
.construe-form input[type="file"],
.construe-form select,
.construe-form textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
}
.construe-form textarea {
    resize: vertical;
}

.error-messages {
    border: 1px solid #f5c6cb;
    background-color: #f8d7da;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    color: #721c24;
}
.error-messages ul {
    list-style-type: disc;
    margin-left: 20px;
    padding: 0;
}
.error-messages li {
    margin-bottom: 5px;
}

.form-section {
   margin-bottom: 20px;
   padding: 15px;
   border: 1px solid var(--border-color);
   border-radius: 5px;
   background-color: var(--card-bg-color);
}

.form-section p {
   margin-bottom: 5px;
}

/* Fallback/Alias for construe-container - prefer .app-container */
.construe-container {
   padding: 20px;
   background-color: var(--card-bg-color);
   border-radius: 8px;
   box-shadow: 0 2px 4px var(--shadow-color);
}

/* Styling for top action sections (e.g., Add/Download buttons) */
.construe-actions-top {
    margin-bottom: 20px;
}

/* Utility class for content indentation */
.content-indent-left {
    margin-left: 20px;
}

/* Utility class for centered red text */
.text-centered-red {
    color: red;
    text-align: center;
}

.section-heading-group h1 {
    margin-bottom: 0px; /* Adjust this value to control space below the h1 */
}

.section-heading-group h3 {
    margin-top: 0;
    /* Remove default top margin from h3 */
    margin-bottom: 15px;
    /* Control space below the h3 if needed */
}

.text-center-cell {
    text-align: center;
}

/* To specifically override the left alignment in table headers */
.data-table thead th.text-center-cell {
    text-align: center;
}

/* Utility class to allow text wrapping within a cell */
.wrap-text-cell {
    white-space: normal !important;
    /* Forces text to wrap, overrides nowrap */
    vertical-align: middle;
    word-wrap: break-word;
}

.wrap-text-cell-center {
    white-space: normal !important;
    /* Forces text to wrap, overrides nowrap */
    vertical-align: middle;
    word-wrap: break-word;
    text-align: center;
}

.truncate-text-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Add bottom margin to specific list items */
.bottom-space {
    margin-bottom: 0.5em;
}