/* Color Palette */
:root {
    --primary-color: #5b96a4;
    --primary-color-dark: #487b86;
    --primary-color-light: #8dbec9;
  
    --secondary-color: #a4695b;
    --secondary-color-dark: #835246;
    --secondary-color-light: #c79185;
  
    --navbar-bg: #2c3e50; /* Darker blue-gray */
    --navbar-text: #ffffff;
  
    --body-bg: #f3f7f9; /* Light grayish blue */
    --container-bg: #ffffff;
    --card-bg: #ffffff; /* Explicitly for cards */
    --table-header-bg: #f8f9fa; /* Light gray for table headers */
    --code-bg: #f8f9fa; /* Background for code/monospace */
    --input-border-color: #ced4da; /* Standard border color */
    --border-color: #ddd; /* General border color */
    --light-border-color: #eee; /* Lighter border for dividers */
  
    --text-color: #212529; /* Dark gray */
    --text-muted: #6c757d; /* Muted gray */
    --text-heading: #333; /* Slightly darker gray for headings */
    --link-color: var(--primary-color);
    --link-hover-color: var(--primary-color-dark);
    --secondary-link-hover-color: var(--secondary-color-dark);
  
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-hover: rgba(0, 0, 0, 0.15); /* Slightly darker shadow for hover */
  
    /* Semantic Colors (Keep distinct for clarity) */
    --success-color-text: #155724;
    --success-bg: #d4edda;
    --success-border: #c3e6cb;
    --danger-color-text: #721c24;
    --danger-bg: #f8d7da;
    --danger-border: #f5c6cb;
    --warning-color-text: #856404; /* Darker yellow for text */
    --warning-bg: #fff3cd;
    --warning-border: #ffeeba;
    --info-color-text: #0c5460; /* Darker cyan for text */
    --info-bg: #d1ecf1;
    --info-border: #bee5eb;
  
    /* Status/Role Specific Colors (Keep distinct) */
    --status-active-color: #28a745; /* Green */
    --status-inactive-color: #dc3545; /* Red */
    --status-suspended-color: var(--text-muted); /* Gray */
    --status-revoked-color: var(--status-inactive-color); /* Red */
    --status-expired-color: var(--warning-color-text); /* Orange/Yellow Text */
    --role-admin-color: #007bff; /* Blue */
    --role-basic-color: var(--text-muted); /* Gray */
  
    /* Button Specific Colors */
    --btn-primary-bg: var(--primary-color);
    --btn-primary-hover-bg: var(--primary-color-light);
    --btn-secondary-bg: var(--secondary-color);
    --btn-secondary-hover-bg: var(--secondary-color-light);
    --btn-danger-bg: #d9534f;
    --btn-danger-hover-bg: #ffbab8;
    --btn-warning-bg: #f0ad4e;
    --btn-warning-hover-bg: #ffe2ba;
    --btn-info-bg: #17a2b8;
    --btn-info-hover-bg: #b7f5ff;
    --btn-success-bg: var(--status-active-color);
    --btn-success-hover-bg: #c2ffcf;
  }
  
  /* Global Box Sizing & Base Styles */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    overflow-x: hidden;
    height: 100%;
    margin: 0;
  }
  
  body {
    font-family: 'Montserrat', sans-serif; /* Keep Montserrat */
    background-color: var(--body-bg);
    color: var(--text-color);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    overflow-x: hidden;
  }
  
  a {
    color: var(--link-color);
    text-decoration: none;
  }
  
  a:hover {
    color: var(--link-hover-color);
  }
  
  a.btn-secondary:hover {
      color: var(--secondary-link-hover-color);
  }
  
  a.btn-warning:hover {
      color: var(--btn-warning-bg);
  }
  
  main {
    flex: 1; /* Allow main content to grow */
  }
  
  /* === Layout & Components === */
  
  /* Navbar */
  .navbar {
    background-color: var(--navbar-bg);
    color: var(--navbar-text);
    padding: 10px 20px;
    box-shadow: 0 2px 5px var(--shadow);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .navbar .container, .navbar .container-fluid {
      background: none;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
  }
  .navbar a {
    color: var(--navbar-text);
    margin-right: 15px;
  }
  .navbar a:hover {
    color: var(--primary-color-light);
  }
  .navbar-brand img {
    height: 50px;
  }
  .navbar-nav {
    display: flex;
    flex-direction: column; /* Mobile first */
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }
  .navbar-nav .nav-link {
    padding: 0.5rem 0.5rem;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    display: block;
  }
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-item.active .nav-link {
    color: var(--navbar-text);
  }
  .navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
  }
  .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
  .navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
    width: 100%;
    display: none; /* Hidden by default */
  }
  #navbar-toggle-cbox { /* Hide the actual checkbox */
    display: none;
  }
  #navbar-toggle-cbox:checked ~ .navbar-collapse { /* Show menu when checkbox is checked */
    display: block;
  }
  label.navbar-toggler {
    cursor: pointer;
  }
  @media (min-width: 768px) { /* Desktop Navbar */
    .navbar .container-fluid { /* Add this rule */
      flex-wrap: nowrap; /* Prevent wrapping on desktop */
    }
    .navbar-toggler { display: none; }
    #navbar-toggle-cbox:checked ~ .navbar-collapse,
    .navbar-collapse { display: flex !important; flex-basis: auto; flex-grow: 1; }
    .navbar-nav { 
      flex-direction: row; 
      align-items: center; /* Add this */
    }
    .navbar-nav .nav-link { padding-top: 0; padding-bottom: 0; }
    .ml-auto { margin-left: auto !important; }
  }
  
  /* Footer */
  footer {
    background-color: var(--navbar-bg);
    color: var(--navbar-text);
    text-align: center;
    padding: 1rem;
  }
  footer p {
    margin: 0;
  }
  
  /* Container */
  .container,
  .container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }
  .container { /* Default container */
    background-color: var(--container-bg);
    border-radius: 8px;
    box-shadow: 0 3px 8px var(--shadow);
    margin: 20px auto;
    padding: 20px;
    max-width: 1140px;
  }
  @media (min-width: 576px) { .container { max-width: 540px; } }
  @media (min-width: 768px) { .container { max-width: 720px; } }
  @media (min-width: 992px) { .container { max-width: 960px; } }
  @media (min-width: 1200px) { .container { max-width: 1140px; } }
  
  /* Specific Container Overrides */
  main.container.my-5 { background: none; box-shadow: none; }
  .mb-5.container { max-width: 1200px; margin: 40px auto; padding: 30px; border-radius: 5px; box-shadow: 0 2px 10px var(--shadow); background-color: var(--container-bg); }
  .container-no-card-style { background: none; box-shadow: none; padding-top: 0; margin-top: 0; }
  .mock-admin-container { max-width: 1400px; margin: 20px auto; padding: 20px; background: var(--container-bg); border-radius: 5px; box-shadow: 0 2px 5px var(--shadow); }
  .dashboard-container { max-width: 1200px; margin: 40px auto; padding: 0 20px; }
  .dashboard-header { margin-bottom: 30px; } /* Ensured margin */
  .admin-container { /* From admin/index.php */
      max-width: 1200px;
      margin: 40px auto;
      padding: 0 20px;
  }
  
  /* Buttons */
  .btn {
    display: inline-block;
    padding: 10px 15px;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    border: none;
    color: var(--navbar-text); /* White text */
    text-align: center;
    text-decoration: none;
    margin-right: 5px;
    background-color: var(--btn-primary-bg); /* Default to primary */
  }
  .btn:hover {
    background-color: var(--btn-primary-hover-bg); /* Default hover */
  }
  .btn-primary { background-color: var(--btn-primary-bg); }
  .btn-primary:hover { background-color: var(--btn-primary-hover-bg); }
  .btn-secondary { background-color: var(--btn-secondary-bg); }
  .btn-secondary:hover { background-color: var(--btn-secondary-hover-bg); }
  .btn-success { background-color: var(--btn-success-bg); }
  .btn-success:hover { background-color: var(--btn-success-hover-bg); }
  .btn-danger { background-color: var(--btn-danger-bg); }
  .btn-danger:hover { background-color: var(--btn-danger-hover-bg); }
  .btn-warning { background-color: var(--btn-warning-bg); color: var(--text-color); } /* Dark text */
  .btn-warning:hover { background-color: var(--btn-warning-hover-bg); }
  .btn-info { background-color: var(--btn-info-bg); }
  .btn-info:hover { background-color: var(--btn-info-hover-bg); }
  .copy-button { background-color: var(--secondary-color); margin-left: 10px; }
  .copy-button:hover { background-color: var(--secondary-color-dark); }
  
  /* Header Nav (Admin Pages) */
  .header-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
  .header-nav h1 { margin: 0; color: var(--text-heading); padding: 0; }
  @media (max-width: 767.98px) { .header-nav { flex-direction: column; align-items: flex-start; } .header-nav h1 { margin-bottom: 15px; } .header-nav > div { display: flex; flex-direction: column; width: 100%; gap: 10px; } .header-nav > div .btn { width: 100%; margin-right: 0; text-align: center; } }
  
  /* Tables */
  table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
  th, td { padding: 10px; text-align: left; border-bottom: 1px solid var(--border-color); vertical-align: top; }
  th { background-color: var(--table-header-bg); font-weight: bold; color: var(--text-heading); }
  .table-responsive-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; }
  /* Target common class names for table action cells */
  td.table-actions-container, 
  td.actions-container, 
  td.actions { 
      display: flex; 
      gap: 5px; 
      align-items: center; 
  }
  /* Ensure consistent button sizing in table actions for both a and button elements */
  td.table-actions-container a.btn,
  td.table-actions-container button.btn,
  td.actions-container a.btn,
  td.actions-container button.btn,
  td.actions a.btn,
  td.actions button.btn {
      padding: 8px 12px; /* Consistent smaller padding */
      font-size: 14px; /* Consistent smaller font size */
      vertical-align: middle;
      line-height: 1.5; /* Ensure consistent line height */
  }
  /* Ensure forms within these cells align correctly */
  td.table-actions-container form.d-inline,
  td.actions-container form.d-inline,
  td.actions form.d-inline {
      vertical-align: middle; /* Align form with buttons */
      margin: 0; /* Remove potential form margins */
  }
  .description-col { max-width: 400px; word-wrap: break-word; } /* Added from templates.php */
  
  /* Forms */
  .form-group { margin-bottom: 1rem; }
  label { display: block; margin-bottom: .5rem; font-weight: bold; color: var(--text-heading); }
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select { display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; color: var(--text-color); background-color: var(--container-bg); background-clip: padding-box; border: 1px solid var(--input-border-color); border-radius: .25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
  textarea { min-height: 100px; font-family: monospace; }
  select { height: auto; }
  .form-hint { font-size: 0.85em; color: var(--text-muted); margin-top: 5px; }
  .form-actions { margin-top: 30px; display: flex; gap: 10px; }
  .form-check { display: block; position: relative; padding-left: 1.25rem; margin-bottom: 1rem; }
  .form-check input[type="checkbox"] { position: absolute; margin-left: -1.25rem; margin-top: 0.3rem; }
  .form-check label { margin-bottom: 0; font-weight: normal; color: var(--text-color); }
  .checkbox-group { margin-top: 10px; }
  .checkbox-item { margin-bottom: 10px; }
  .checkbox-item label { font-weight: normal; margin-left: 8px; }
  .input-number-small { max-width: 150px; }
  .form-section { /* Added from keys/create.php */
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--light-border-color);
  }
  .form-section h2 {
      color: var(--text-heading);
      margin-top: 0;
      font-size: 1.2em;
      padding-bottom: 10px;
      margin-bottom: 15px;
      border-bottom: none; /* Remove double border */
  }
  .permissions-container { /* Added from keys/create.php */
      display: flex;
      gap: 20px;
  }
  .permissions-section { /* Added from keys/create.php */
      flex: 1;
  }
  
  /* Messages & Alerts */
  .message, .alert { padding: 15px; margin-bottom: 20px; border-radius: 4px; border: 1px solid transparent; }
  .success, .alert-success { background-color: var(--success-bg); color: var(--success-color-text); border-color: var(--success-border); }
  .error, .alert-danger { background-color: var(--danger-bg); color: var(--danger-color-text); border-color: var(--danger-border); }
  .alert-warning { background-color: var(--warning-bg); color: var(--warning-color-text); border-color: var(--warning-border); }
  .alert-info { background-color: var(--info-bg); color: var(--info-color-text); border-color: var(--info-border); }
  
  /* Status & Role Indicators */
  .status-active { color: var(--status-active-color); font-weight: bold; }
  .status-inactive { color: var(--status-inactive-color); font-weight: bold; }
  .status-suspended { color: var(--status-suspended-color); font-weight: bold; }
  .status-revoked { color: var(--status-revoked-color); font-weight: bold; }
  .status-expired { color: var(--status-expired-color); font-weight: bold; }
  .role-admin { color: var(--role-admin-color); font-weight: bold; }
  .role-basic { color: var(--role-basic-color); }
  .default-badge { background-color: var(--status-active-color); color: white; padding: 2px 5px; border-radius: 3px; font-size: 0.8em; }
  
  /* Code & Monospace */
  code, .key-identifier, .feature-slug, .token-value, .key-display, .usage-example { font-family: monospace; background-color: var(--code-bg); padding: 2px 5px; border-radius: 3px; border: 1px solid var(--border-color); font-size: 0.9em; word-break: break-all; }
  .key-display, .usage-example { padding: 15px; margin-bottom: 20px; overflow-x: auto; }
  pre.bg-light { background-color: var(--code-bg) !important; padding: 1rem; border-radius: .25rem; }
  .app-slug { /* Added from apps/edit.php */
      font-family: monospace;
      background-color: var(--code-bg);
      padding: 2px 5px;
      border-radius: 3px;
      border: 1px solid var(--border-color);
  }
  .feature-slug { /* From apps/view.php - ensure consistency */
      font-family: monospace;
      font-size: 0.9em;
      color: var(--text-muted);
      background-color: var(--code-bg);
      padding: 2px 5px;
      border-radius: 3px;
      border: 1px solid var(--border-color);
  }
  
  /* Cards */
  .app-card, .user-card, .info-card, .permission-card { 
      background: var(--card-bg); 
      border-radius: 5px; 
      box-shadow: 0 2px 10px var(--shadow); 
      padding: 20px; 
      display: flex; /* Added for flex layout */
      flex-direction: column; /* Added for flex layout */
  }
  .app-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px var(--shadow-hover); }
  .info-card { background: var(--code-bg); box-shadow: 0 1px 3px var(--shadow); } /* Lighter background for info */
  .permission-card { background: var(--code-bg); }
  .app-card h2, .user-card h3, .info-card h2, .permission-card h2 { margin-top: 0; color: var(--text-heading); font-size: 1.2em; margin-bottom: 15px; }
  .info-card h2, .section h2, .bulk-actions h3 { border-bottom: 1px solid var(--light-border-color); padding-bottom: 10px; }
  .app-description, .user-card p, .app-card p, .permission-card p { color: var(--text-muted); margin-bottom: 20px; font-size: 0.9em; }
  .app-header { display: flex; align-items: center; margin-bottom: 15px; }
  .app-icon { width: 50px; height: 50px; background-color: var(--body-bg); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px; font-size: 24px; }
  .app-title h2 { margin: 0; font-size: 1.2em; color: var(--text-heading); }
  .app-features { margin-bottom: 20px; }
  .feature-list { list-style: none; padding: 0; margin: 0; }
  .feature-list li { padding: 5px 0; font-size: 0.9em; color: var(--text-muted); }
  .feature-list li:before { content: "✓"; color: var(--status-active-color); margin-right: 8px; }
  .app-actions, .user-card .actions, .app-card .actions { 
      text-align: right; 
      margin-top: auto; /* Changed from margin-top: 15px to push to bottom */
      padding-top: 15px; /* Add padding to ensure space above */
  }
  .no-apps { text-align: center; padding: 50px; background: var(--card-bg); border-radius: 5px; box-shadow: 0 2px 10px var(--shadow); }
  .no-apps h2 { color: var(--text-heading); margin-bottom: 20px; }
  .no-apps p { color: var(--text-muted); margin-bottom: 30px; }
  .access-card { padding: 2rem; margin: 2rem auto; max-width: 500px; }
  .access-card h2 { text-align: center; margin-bottom: 1.5rem; }
  .access-card label { color: var(--text-muted); }
  .access-card .form-control:focus { border-color: var(--primary-color-light); box-shadow: 0 0 0 0.2rem rgba(91, 150, 164, .25); } /* Hardcoded RGB for primary */
  .access-card .form-check label { color: var(--text-muted); }
  .access-card .btn { width: 100%; padding: 0.75rem; font-size: 1rem; }
  .access-card .welcome-message { text-align: center; margin-bottom: 1.5rem; font-size: 1.1rem; color: var(--text-heading); }
  .access-card .welcome-message strong { font-weight: bold; }
  .feature-card { background: var(--code-bg); border-radius: 5px; padding: 15px; margin-bottom: 15px; box-shadow: 0 1px 3px var(--shadow); }
  .feature-card h3 { margin-top: 0; color: var(--text-heading); font-size: 1.1em; }
  .feature-card .feature-description { margin-top: 10px; color: var(--text-muted); }
  .features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; }
  .user-list, .app-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; margin-top: 20px; }
  .apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; margin-bottom: 30px; } /* Adjusted gap */
  .feature-count { display: inline-block; padding: 2px 8px; background-color: var(--code-bg); border-radius: 10px; font-size: 0.9em; color: var(--text-muted); border: 1px solid var(--border-color); }
  .admin-menu { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; } /* From admin/index.php */
  .admin-menu-item { 
      flex: 1; 
      min-width: 200px; 
      background: var(--card-bg); 
      border-radius: 5px; 
      box-shadow: 0 2px 10px var(--shadow); 
      padding: 20px; 
      text-align: center; 
      transition: transform 0.2s, box-shadow 0.2s; 
      display: flex; /* Added for flex layout */
      flex-direction: column; /* Added for flex layout */
  }
  .admin-menu-item:hover { transform: translateY(-5px); box-shadow: 0 5px 15px var(--shadow-hover); }
  .admin-menu-item h2 { margin-top: 0; color: var(--text-heading); font-size: 1.2em; }
  .admin-menu-item p { color: var(--text-muted); margin-bottom: 20px; }
  .admin-menu-item a.btn {
      margin-top: auto; /* Added to push button to bottom */
      padding-top: 15px; /* Add padding to ensure space above */
      width: fit-content; /* Prevent button stretching full width */
      align-self: center; /* Center button horizontally */
  }
  
  /* Hero Section */
  .hero-section { padding: 4rem 1rem; margin-bottom: 2rem; background-color: var(--body-bg); background-image: url('/img/hero-bg-3.png'); background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; color: var(--text-color); text-align: start; }
  .hero-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.8); z-index: 1; }
  .hero-section .hero-content { position: relative; z-index: 2; max-width: 800px; margin-left: auto; margin-right: auto; }
  .hero-section h1 { font-size: 2.5rem; margin-bottom: 1rem; color: var(--text-color); }
  .hero-section p { font-size: 1.1rem; line-height: 1.6; margin-bottom: 0; }
  @media (max-width: 767.98px) { .hero-section { padding: 2.5rem 1rem; } .hero-section h1 { font-size: 2rem; } .hero-section p { font-size: 1rem; } }
  
  /* Misc & Utilities */
  .d-inline { display: inline; }
  .text-white { color: var(--navbar-text) !important; }
  .text-center { text-align: center !important; }
  .mb-1 { margin-bottom: 10px !important; }
  .mb-2 { margin-bottom: 20px !important; }
  .mt-1 { margin-top: 10px !important; }
  .mt-2 { margin-top: 20px !important; }
  .mt-20 { margin-top: 20px; }
  .mt-30 { margin-top: 30px; }
  .mt-40 { margin-top: 40px; }
  .forgot-password-link { text-align: center; margin-top: 1rem; }
  .action-bar { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--light-border-color); display: flex; justify-content: space-between; align-items: center; }
  .action-bar-logs-style { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--light-border-color); }
  .admin-back-link { margin-top: 40px; }
  .pagination { display: flex; justify-content: center; margin-top: 30px; }
  .pagination a, .pagination span { display: inline-block; padding: 8px 12px; margin: 0 5px; border-radius: 4px; background-color: var(--code-bg); color: var(--text-heading); text-decoration: none; border: 1px solid var(--border-color); }
  .pagination a:hover { background-color: #e9ecef; }
  .pagination .current { background-color: var(--primary-color); color: var(--navbar-text); border-color: var(--primary-color); }
  .pagination .disabled { color: var(--text-muted); cursor: not-allowed; }
  .method-get { color: var(--status-active-color); }
  .method-post { color: var(--role-admin-color); }
  .method-put { color: var(--warning-color-text); }
  .method-delete { color: var(--status-inactive-color); }
  .status-2xx { color: var(--status-active-color); }
  .status-3xx { color: var(--warning-color-text); }
  .status-4xx { color: var(--status-inactive-color); }
  .status-5xx { color: #6610f2; } /* Keep purple */
  .resource-path { font-family: monospace; font-size: 0.9em; word-break: break-all; }
  .info-item { margin-bottom: 10px; }
  .info-label { font-weight: bold; color: var(--text-muted); }
  .section { margin-top: 30px; }
  .empty-message { color: var(--text-muted); font-style: italic; }
  .bulk-actions { margin-bottom: 20px; padding: 15px; background-color: var(--code-bg); border-radius: 5px; border: 1px solid var(--border-color); }
  .bulk-actions h3 { margin-top: 0; margin-bottom: 10px; font-size: 1.1em; color: var(--text-heading); }
  .bulk-actions .actions { display: flex; gap: 10px; }
  
  /* Added from access-denied.php */
  .access-denied-container {
      max-width: 800px;
      margin: 40px auto;
      padding: 30px;
      background: var(--card-bg);
      border-radius: 5px;
      box-shadow: 0 2px 10px var(--shadow);
      text-align: center;
  }
  .access-denied-icon {
      font-size: 80px;
      color: var(--danger-color-text); /* Using danger text color */
      margin-bottom: 20px;
  }
  .access-denied-header h1 {
      color: var(--text-heading);
      margin-bottom: 20px;
  }
  .access-denied-message {
      color: var(--text-muted);
      margin-bottom: 30px;
      font-size: 18px;
  }
  .access-denied-actions .btn { /* Specificity for buttons in this container */
      margin: 0 10px;
  }
  
  /* Styling for welcome message in navbar */
  .navbar-text.welcome-message {
      color: rgba(255, 255, 255, 0.75); /* Match nav-link color */
      margin-right: 15px; /* Space before Logout link */
      font-size: 0.9em; /* Slightly smaller */
  }
  .navbar-text.welcome-message .username {
      font-weight: bold;
      color: var(--navbar-text); /* White text */
  }
  .navbar-text.welcome-message .role {
      font-style: italic;
  }
  
  /* Removed obsolete styles for .admin-header/.dashboard-header .user-info */
  
  /* .admin-container already defined */
  /* .admin-menu already defined */
  /* .admin-menu-item already defined */
  /* .admin-menu-item:hover already defined */
  /* .admin-menu-item h2 already defined */
  /* .admin-menu-item p already defined */
  
  /* Added from admin/apps/view.php */
  .app-info {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 30px;
  }
  /* .info-card already defined */
  /* .info-card h2 already defined */
  /* .info-item already defined */
  /* .info-label already defined */
  
  /* Added from admin/keys/view.php */
  .key-section {
      margin-bottom: 30px;
  }
  .key-section h2 {
      color: var(--text-heading);
      margin-top: 0;
      font-size: 1.2em;
      border-bottom: 1px solid var(--light-border-color);
      padding-bottom: 10px;
  }
  .key-info {
      display: grid;
      grid-template-columns: 150px 1fr;
      gap: 10px;
  }
  .key-info dt {
      font-weight: bold;
      color: var(--text-muted);
  }
  .key-info dd {
      margin: 0;
  }
  .key-display {
      font-family: monospace;
      padding: 15px;
      background-color: var(--code-bg);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      overflow-x: auto;
      word-break: break-all;
      margin-bottom: 20px;
  }
  .key-display, .token-display { /* Combined from keys/view.php and auth/tokens.php */
      font-family: monospace;
      padding: 15px;
      background-color: var(--code-bg);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      overflow-x: auto;
      word-break: break-all;
      margin-bottom: 20px;
  }
  .permissions-list {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  .app-item {
      margin-bottom: 20px;
  }
  .app-name {
      font-weight: bold;
      color: var(--text-heading);
      margin-bottom: 5px;
  }
  /* .feature-list already defined */
  /* .feature-item already defined */
  /* .feature-item:before already defined */
  
  /* Added from admin/logs/index.php */
  .empty-message {
      color: var(--text-muted);
      font-style: italic;
  }
  .filter-form {
      background-color: var(--code-bg);
      padding: 20px;
      border-radius: 5px;
      margin-bottom: 30px;
      border: 1px solid var(--border-color);
  }
  .filter-form h2 {
      margin-top: 0;
      margin-bottom: 15px;
      font-size: 1.2em;
      color: var(--text-heading);
  }
  .filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-bottom: 15px;
  }
  .filter-group {
      flex: 1;
      min-width: 200px;
  }
  .filter-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      color: var(--text-heading); /* Use heading color for better contrast */
      font-size: 0.9em;
  }
  .filter-group select,
  .filter-group input {
      width: 100%;
      padding: 8px;
      border: 1px solid var(--input-border-color); /* Use standard input border */
      border-radius: 4px;
      font-size: 14px;
      background-color: var(--container-bg); /* Match other inputs */
      color: var(--text-color);
  }
  .filter-actions {
      margin-top: 20px;
      display: flex;
      gap: 10px;
  }
  
  /* Added from admin/permissions/index.php */
  .permission-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      margin-bottom: 30px;
  }
  
  /* Added from admin/settings/index.php */
  .settings-section {
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border-color); /* Use variable */
  }
  .settings-section h2 {
      margin-top: 0;
      margin-bottom: 15px;
      font-size: 1.2em;
      color: var(--text-heading); /* Use variable */
  }
  .settings-section p {
      margin-top: 0;
      margin-bottom: 15px;
      color: var(--text-muted); /* Use variable */
  }
  .checkbox-group { /* Settings page specific checkbox style */
      margin-top: 10px;
  }
  .checkbox-group label {
      display: inline-flex;
      align-items: center;
      font-weight: normal;
      cursor: pointer;
      color: var(--text-color); /* Use variable */
  }
  .checkbox-group input[type="checkbox"] {
      margin-right: 10px;
  }
  
  /* Added from admin/users/edit.php */
  .password-section {
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid var(--border-color); /* Use variable */
  }
  .password-section h2 {
      margin-top: 0;
      font-size: 1.2em;
      color: var(--text-heading); /* Use variable */
      margin-bottom: 15px; /* Added margin */
  }
  
  /* Added from admin/users/view.php */
  .user-info {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 30px;
  }
  
  /* Added from auth/login.php */
  .login-container {
      max-width: 500px;
      margin: 40px auto;
      padding: 30px;
      background: var(--card-bg); /* Use variable */
      border-radius: 5px;
      box-shadow: 0 2px 10px var(--shadow); /* Use variable */
  }
  .login-header {
      text-align: center;
      margin-bottom: 30px;
  }
  .login-header h1 {
      color: var(--text-heading); /* Use variable */
      margin-bottom: 10px;
  }
  .login-header p {
      color: var(--text-muted); /* Use variable */
      margin: 0;
  }
  .login-container .btn { /* Scope button width */
      width: 100%;
      padding: 12px 20px; /* Keep specific padding */
  }
  .login-footer {
      text-align: center;
      margin-top: 20px;
      color: var(--text-muted); /* Use variable */
  }
  .login-footer a {
      color: var(--link-color); /* Use variable */
      text-decoration: none;
  }
  .login-footer a:hover {
      color: var(--link-hover-color); /* Use variable */
      text-decoration: underline;
  }
  
  /* Added from auth/tokens.php */
  .usage-section {
      margin-top: 30px;
  }
  .usage-section h2 {
      color: var(--text-heading);
      margin-top: 0;
      margin-bottom: 15px; /* Added margin */
  }
  
  /* Added from auth/reset-password.php */
  .reset-link {
      font-family: monospace;
      padding: 15px;
      background-color: var(--code-bg); /* Use variable */
      border: 1px solid var(--border-color); /* Use variable */
      border-radius: 4px;
      overflow-x: auto;
      word-break: break-all;
      margin-bottom: 20px;
  }
  
  /* Added from otr-uhaul/api-test/admin/backup.php */
  .action-section { 
      margin-bottom: 30px; 
      padding: 20px; 
      border: 1px solid var(--light-border-color); /* Use variable */
      border-radius: 4px; 
  }
  
  /* Added from otr-uhaul/api-test/admin/config.php */
  .setting-description { 
      font-size: 0.9em; 
      color: var(--text-muted); /* Use variable */
      margin-top: -0.25rem; 
      margin-bottom: 0.5rem; 
  }
  
  /* Added from otr-uhaul/api-test/admin/manage_related_data.php */
  .file-status { 
      font-weight: bold; 
  }
  .exists { 
      color: var(--status-active-color); /* Use variable */
  }
  .missing { 
      color: var(--warning-color-text); /* Use variable */
  }
  
  /* Added from otr-uhaul/api-test/admin/tokens.php */
  .filters label { 
      margin-right: 5px; 
  }
  .filters select { 
      padding: 5px; 
  }
  
  /* Added from otr-uhaul/api-test/admin/backup.php */
  .backup-list table { 
      width: 100%; 
      border-collapse: collapse; 
      margin-top: 10px; 
  }
  .backup-list th, .backup-list td { 
      padding: 8px; 
      border: 1px solid var(--border-color); /* Use variable */
      text-align: left; 
  }
  .backup-list th { 
      background-color: var(--table-header-bg); /* Use variable */
  }

/* Log Viewer Styles */
.log-viewer {
    background-color: #f8f9fa; /* Light background */
    border: 1px solid #dee2e6; /* Light border */
    padding: 15px;
    max-height: 400px; /* Limit height */
    overflow-y: auto; /* Enable vertical scrollbar */
    white-space: pre-wrap; /* Preserve whitespace and wrap lines */
    word-wrap: break-word; /* Break long words */
    font-family: monospace; /* Use a monospaced font */
    font-size: 0.9em;
    margin-bottom: 1em; /* Add some space below */
}