/*

 * RJMMP LLC Admin Interface Styles

 * Centralized CSS for admin pages

 */



/* ==================== Global Styles ==================== */

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



body {

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  background: #e9ecef;

  min-height: 100vh;

  padding: 0;

  margin: 0;

}



/* ==================== Header Styles ==================== */

.header-container {

  background: linear-gradient(135deg, #195176 0%, #2c5f7f 100%);

  box-shadow: 0 4px 20px rgba(0,0,0,0.2);

  padding: 20px 0;

  margin-bottom: 20px;

}



.header-content {

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 30px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 20px;

}



.logo-section {

  flex: 1;

  min-width: 250px;

}



.logo-section img {

  max-width: 50%;

  height: auto;

  display: block;

}



.header-actions {

  display: flex;

  align-items: center;

  gap: 15px;

}



.reset-password-link {

  color: white;

  text-decoration: none;

  font-size: 0.9rem;

  font-weight: 600;

  padding: 8px 16px;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 6px;

  transition: all 0.2s;

}



.reset-password-link:hover {

  background: rgba(255, 255, 255, 0.2);

  transform: translateY(-1px);

}



.datasource-info {

  background: rgba(255, 255, 255, 0.95);

  padding: 12px 20px;

  margin: 10px 30px 0 30px;

  border-radius: 8px;

  font-size: 0.85rem;

  color: #195176;

  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

}



.datasource-info strong {

  color: #195176;

  margin-right: 10px;

}



/* ==================== Navigation Menu ==================== */

.modern-nav {

  background: #fff;

  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  margin-bottom: 20px;

  position: sticky;

  top: 0;

  z-index: 999;

}



.nav-container {

  max-width: 1400px;

  margin: 0 auto;

  padding: 0;

}



.main-menu {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-start;

}



.main-menu > li {

  position: relative;

}



.main-menu > li > a,

.main-menu > li > span {

  display: block;

  padding: 15px 20px;

  color: #195176;

  text-decoration: none;

  font-weight: 600;

  font-size: 0.9rem;

  transition: all 0.2s;

  cursor: pointer;

  white-space: nowrap;

}



.main-menu > li > a:hover,

.main-menu > li > span:hover {

  background: #195176;

  color: white;

}



.main-menu > li.home-icon > a {

  padding: 10px 20px;

}



.main-menu > li.home-icon img {

  vertical-align: middle;

}



/* Dropdown Menus */

.main-menu li ul {

  display: none;

  position: absolute;

  top: 100%;

  left: 0;

  background: white;

  box-shadow: 0 4px 12px rgba(0,0,0,0.15);

  list-style: none;

  margin: 0;

  padding: 0;

  min-width: 200px;

  z-index: 1000;

}



.main-menu li:hover > ul {

  display: block;

}



.main-menu li ul li {

  position: relative;

}



.main-menu li ul li a {

  display: block;

  padding: 12px 20px;

  color: #333;

  text-decoration: none;

  font-size: 0.85rem;

  transition: all 0.2s;

  white-space: nowrap;

}



.main-menu li ul li a:hover {

  background: #f8f9fa;

  color: #195176;

  padding-left: 25px;

}



/* Nested Dropdowns */

.main-menu li ul li ul {

  top: 0;

  left: 100%;

  display: none;

}



.main-menu li ul li:hover > ul {

  display: block;

}



/* Mobile Menu Toggle */

.mobile-menu-toggle {

  display: none;

  background: #195176;

  color: white;

  border: none;

  padding: 15px 20px;

  font-size: 1rem;

  font-weight: 600;

  cursor: pointer;

  width: 100%;

  text-align: left;

}



.mobile-menu-toggle:hover {

  background: #13405d;

}



/* AllWebMenus compatibility - hide old menus */

#awmAnchor-menu,

#awmAnchor-MenuVert,

[id^="awmULLI"] {

  display: none !important;

}



/* ==================== Page Layout ==================== */

.page-container {

  max-width: 1600px;

  margin: 0 auto;

  padding: 20px;

}



/* .page-header and .header styles consolidated in Balance-Specific section below */



/* ==================== Filter Section ==================== */

.filter-section {

  background: white;

  border-radius: 8px;

  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  padding: 15px;

  margin-bottom: 20px;

}



.filter-form {

  display: flex;

  gap: 15px;

  align-items: flex-end;

  flex-wrap: wrap;

}



.form-group {

  flex: 1;

  min-width: 200px;

}



.form-group label {

  display: block;

  margin-bottom: 8px;

  font-weight: 600;

  color: #333;

  font-size: 0.9rem;

}



.form-group input[type="date"],

.form-group input[type="text"],

.form-group input[type="email"],

.form-group input[type="password"],

.form-group select {

  width: 100%;

  padding: 10px 15px;

  border: 2px solid #dee2e6;

  border-radius: 8px;

  font-size: 1rem;

  transition: all 0.2s;

}



.form-group input[type="date"]:focus,

.form-group input[type="text"]:focus,

.form-group input[type="email"]:focus,

.form-group input[type="password"]:focus,

.form-group select:focus {

  outline: none;

  border-color: #195176;

  box-shadow: 0 0 0 3px rgba(25, 81, 118, 0.1);

}



/* Inline table form inputs */

.table-input {

  width: 100%;

  padding: 8px;

  border: 2px solid #dee2e6;

  border-radius: 6px;

  font-size: 0.95rem;

  transition: all 0.2s;

}



.table-input:focus {

  outline: none;

  border-color: #195176;

  box-shadow: 0 0 0 3px rgba(25, 81, 118, 0.1);

}



.table-input-right {

  text-align: right;

}



/* ==================== Buttons ==================== */

.btn-submit,

.btn-primary {

  padding: 10px 30px;

  background: linear-gradient(135deg, #195176 0%, #2c5f7f 100%);

  color: white;

  border: none;

  border-radius: 8px;

  font-size: 1rem;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s;

  box-shadow: 0 2px 8px rgba(25, 81, 118, 0.3);

}



.btn-submit:hover,

.btn-primary:hover {

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(25, 81, 118, 0.4);

}



.btn-submit:active,

.btn-primary:active {

  transform: translateY(0);

}



/* ==================== Tables ==================== */

.activity-table-container,

.data-table-container {

  background: white;

  border-radius: 8px;

  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  overflow: hidden;

  margin-bottom: 30px;

}



.activity-table,

.data-table {

  width: 100%;

  border-collapse: collapse;

}



.activity-table thead,

.data-table thead {

  background: linear-gradient(135deg, #195176 0%, #2c5f7f 100%);

  color: white;

}



.activity-table th,

.data-table th {

  padding: 15px 12px;

  text-align: left;

  font-weight: 600;

  font-size: 0.9rem;

  white-space: nowrap;

  color: #FEBE10;

}



.activity-table tbody tr,

.data-table tbody tr {

  border-bottom: 1px solid #e9ecef;

  transition: background-color 0.2s;

}



.activity-table tbody tr:hover,

.data-table tbody tr:hover {

  background-color: #fff9e6;

}



.activity-table tbody tr:nth-child(even),

.data-table tbody tr:nth-child(even) {

  background-color: #f8f9fa;

}



.activity-table tbody tr:nth-child(even):hover,

.data-table tbody tr:nth-child(even):hover {

  background-color: #fff9e6;

}



.activity-table td,

.data-table td {

  padding: 12px;

  font-size: 0.85rem;

  vertical-align: top;

}



.date-cell {

  white-space: nowrap;

}



.date-cell .date {

  font-weight: 600;

  color: #195176;

  display: block;

}



.date-cell .time {

  color: #6c757d;

  font-size: 0.8rem;

  display: block;

  margin-top: 2px;

}



.activity-table a,

.data-table a {

  color: #195176;

  text-decoration: none;

  font-weight: 600;

  transition: color 0.2s;

}



.activity-table a:hover,

.data-table a:hover {

  color: #2c5f7f;

  text-decoration: underline;

}



/* Table cell alignment utilities */

.activity-table td.right,

.activity-table th.right,

.data-table td.right,

.data-table th.right {

  text-align: right;

}



.activity-table td.center,

.activity-table th.center,

.data-table td.center,

.data-table th.center {

  text-align: center;

}



/* ==================== Messages & Alerts ==================== */

.record-count {

  text-align: right;

  padding: 10px;

  color: #6c757d;

  font-size: 0.9rem;

  background: white;

  border-radius: 8px;

  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  margin-bottom: 20px;

}



.record-count strong {

  color: #195176;

  font-size: 1.1rem;

}



.unauthorized-message {

  text-align: center;

  padding: 60px 20px;

  background: white;

  margin: 40px auto;

  max-width: 600px;

  border-radius: 8px;

  box-shadow: 0 20px 60px rgba(0,0,0,0.3);

  color: #dc3545;

  font-size: 1.1rem;

  line-height: 1.6;

}



/* ==================== Responsive Design ==================== */

@media (max-width: 1200px) {

  .activity-table,

  .data-table {

    font-size: 0.8rem;

  }



  .activity-table th,

  .activity-table td,

  .data-table th,

  .data-table td {

    padding: 10px 8px;

  }



  /* Response detail layout */

  .response-detail-layout {

    flex-direction: column;

  }



  .response-table-section {

    flex: none;

    width: 100%;

  }

}



@media (max-width: 768px) {

  .mobile-menu-toggle {

    display: block;

  }



  .main-menu {

    display: none;

    flex-direction: column;

    width: 100%;

  }



  .main-menu.active {

    display: flex;

  }



  .main-menu > li {

    width: 100%;

    border-bottom: 1px solid #e9ecef;

  }



  .main-menu > li > a,

  .main-menu > li > span {

    padding: 15px 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

  }



  /* Add arrow indicator for items with submenus */

  .main-menu > li > a::after,

  .main-menu > li > span::after {

    content: '';

  }



  .main-menu li ul {

    position: static;

    box-shadow: none;

    background: #f8f9fa;

    display: none;

    min-width: 100%;

  }



  .main-menu li.active > ul {

    display: block;

  }



  .main-menu li ul li {

    border-bottom: 1px solid #e9ecef;

  }



  .main-menu li ul li:last-child {

    border-bottom: none;

  }



  .main-menu li ul li a {

    padding: 12px 20px 12px 40px;

  }



  .main-menu li ul li ul {

    background: #eef1f4;

  }



  .main-menu li ul li ul li a {

    padding-left: 60px;

  }



  /* Disable hover dropdowns on mobile - use click instead */

  .main-menu li:hover > ul {

    display: none;

  }



  .main-menu li.active > ul {

    display: block;

  }



  .header-content {

    flex-direction: column;

    text-align: center;

  }



  .logo-section {

    width: 100%;

  }



  .header-actions {

    width: 100%;

    justify-content: center;

  }



  .datasource-info {

    margin: 10px 15px 0 15px;

    padding: 10px 15px;

    font-size: 0.75rem;

  }



  .page-header h1 {

    font-size: 1.8rem;

  }



  .filter-form {

    flex-direction: column;

  }



  .form-group {

    width: 100%;

  }



  .btn-submit,

  .btn-primary {

    width: 100%;

  }



  /* Make table scrollable on mobile */

  .activity-table-container,

  .data-table-container {

    overflow-x: auto;

  }



  .activity-table,

  .data-table {

    min-width: 800px;

  }



  /* Balance-specific responsive */

  body {

    padding: 10px;

  }



  .header h1 {

    font-size: 1.75rem;

  }



  .action-bar {

    flex-direction: column;

    align-items: stretch;

  }



  .action-links {

    flex-direction: column;

  }



  .summary-cards {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 480px) {

  .page-container {

    padding: 10px;

  }



  .page-header,

  .filter-section,

  .activity-table-container,

  .data-table-container {

    border-radius: 8px;

    padding: 15px;

  }

}



/* ==================== Balance-Specific Styles ==================== */



/* Legacy class names - map to standard classes */

.container {

  width: 100%;

  max-width: 1600px;

  margin: 0 auto;

  padding: 20px;

}



/* .header is an alias for .page-header for backwards compatibility */

.header,

.page-header {

  background: white;

  border-radius: 8px;

  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  padding: 20px;

  margin-bottom: 20px;

  text-align: center;

}



.header h1,

.page-header h1 {

  color: #195176;

  margin: 0;

  font-size: 2.5rem;

  font-weight: 700;

}



.controls {

  background: white;

  border-radius: 8px;

  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  padding: 25px;

  margin-bottom: 30px;

}



.btn {

  padding: 10px 20px;

  border: none;

  border-radius: 6px;

  font-size: 1rem;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s;

  text-decoration: none;

  display: inline-block;

}



.btn-success {

  background: #28a745;

  color: white;

}



.btn-success:hover {

  background: #218838;

  transform: translateY(-1px);

  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);

}



.btn-secondary {

  background: #6c757d;

  color: white;

  padding: 8px 16px;

  font-size: 0.875rem;

}



.btn-secondary:hover {

  background: #5a6268;

}



.action-bar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20px 30px;

  background: white;

  border-bottom: 1px solid #dee2e6;

  flex-wrap: wrap;

  gap: 15px;

}



.action-links {

  display: flex;

  gap: 10px;

}



.summary-cards {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 30px;

  padding: 15px 15px;

  background: #f8f9fa;

  border-bottom: 2px solid #dee2e6;

}



.summary-card {

  background: white;

  padding: 15px;

  border-radius: 8px;

  box-shadow: 0 2px 8px rgba(0,0,0,0.08);

  justify-items: end;

}



.summary-card h3 {

  font-size: 0.875rem;

  color: #6c757d;

  margin-bottom: 8px;

  font-weight: 600;

  text-transform: uppercase;

}



.summary-card .amount {

  font-size: 1.75rem;

  font-weight: 700;

  color: #195176;

}



.summary-card .amount.positive {

  color: #28a745;

}



.summary-card .amount.negative {

  color: #dc3545;

}



.amount-negative {

  color: #dc3545;

  font-weight: 600;

}



.amount-positive {

  color: #28a745;

  font-weight: 600;

}



.action-icon {

  display: inline-block;

  padding: 4px 10px;

  margin: 0 2px;

  background: #6c757d;

  color: white;

  border-radius: 4px;

  text-decoration: none;

  font-size: 0.75rem;

  transition: all 0.2s;

}



.action-icon:hover {

  background: #495057;

  transform: translateY(-1px);

}



.action-icon.edit {

  background: #007bff;

}



.action-icon.edit:hover {

  background: #0056b3;

}



.action-icon.delete {

  background: #dc3545;

}



.action-icon.delete:hover {

  background: #c82333;

}



.action-icon.duplicate {

  background: #17a2b8;

}



.action-icon.duplicate:hover {

  background: #117a8b;

}



.cleared-badge {

  background: #28a745;

  color: white;

  padding: 4px 12px;

  border-radius: 8px;

  font-size: 0.75rem;

  font-weight: 600;

}



.no-data {

  text-align: center;

  padding: 60px 20px;

  color: #6c757d;

  font-size: 1.1rem;

}



.unauthorized {

  text-align: center;

  padding: 60px 20px;

  color: #dc3545;

  font-size: 1.1rem;

}



input[type="checkbox"] {

  width: 18px;

  height: 18px;

  cursor: pointer;

}



/* ==================== Modal Styles ==================== */

.modal-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.7);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 10000;

  animation: fadeIn 0.2s ease;

}



@keyframes fadeIn {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}



.modal-container {

  position: relative;

  width: 90%;

  max-width: 600px;

  height: 80vh;

  max-height: 600px;

  background: white;

  border-radius: 8px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

  overflow: hidden;

  animation: slideUp 0.3s ease;

}



@keyframes slideUp {

  from {

    transform: translateY(50px);

    opacity: 0;

  }

  to {

    transform: translateY(0);

    opacity: 1;

  }

}



.modal-close {

  position: absolute;

  top: 15px;

  right: 15px;

  width: 40px;

  height: 40px;

  background: rgba(255, 255, 255, 0.9);

  border: none;

  border-radius: 50%;

  font-size: 28px;

  line-height: 1;

  cursor: pointer;

  z-index: 10001;

  color: #195176;

  font-weight: 300;

  transition: all 0.2s;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

  display: flex;

  align-items: center;

  justify-content: center;

}



.modal-close:hover {

  background: #dc3545;

  color: white;

  transform: rotate(90deg);

}



.modal-iframe {

  width: 100%;

  height: 100%;

  border: none;

  border-radius: 8px;

}



/* Form Containers for Modals */

.form-container {

  background: white;

  border-radius: 8px;

  box-shadow: 0 20px 60px rgba(0,0,0,0.3);

  overflow: hidden;

  max-width: 600px;

  width: 100%;

  margin: 0 auto;

}



.form-header {

  background: linear-gradient(135deg, #195176 0%, #2c5f7f 100%);

  color: white;

  padding: 30px;

  text-align: center;

}



.form-header h1 {

  font-size: 1.75rem;

  font-weight: 600;

  margin: 0;

}



.form-body {

  padding: 30px;

}



.form-group input[type="text"].amount {

  text-align: right;

  font-family: monospace;

}



.form-textarea,

.form-group textarea {

  width: 100%;

  padding: 10px 12px;

  border: 1px solid #ced4da;

  border-radius: 4px;

  font-size: 14px;

  font-family: inherit;

  resize: vertical;

  min-height: 100px;

  box-sizing: border-box;

}



.form-textarea:focus,

.form-group textarea:focus {

  outline: none;

  border-color: #195176;

  box-shadow: 0 0 0 3px rgba(25, 81, 118, 0.1);

}



.form-actions {

  display: flex;

  gap: 10px;

  justify-content: flex-end;

  margin-top: 25px;

}



.btn-cancel {

  background: #6c757d;

  color: white;

}



.btn-cancel:hover {

  background: #5a6268;

}



.btn-danger {

  background: #dc3545;

  color: white;

}



.btn-danger:hover {

  background: #c82333;

  transform: translateY(-1px);

  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);

}



/* Form Header Variants */

.form-header.delete {

  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);

}



.form-header.success {

  background: linear-gradient(135deg, #28a745 0%, #218838 100%);

}



/* Delete Warning */

.delete-warning {

  background: #fff3cd;

  border: 2px solid #ffc107;

  border-radius: 8px;

  padding: 15px;

  margin-bottom: 20px;

  color: #856404;

}



.delete-warning strong {

  display: block;

  margin-bottom: 8px;

  font-size: 1.1rem;

}



/* Form Help Text */

.help-text {

  font-size: 0.85rem;

  color: #6c757d;

  margin-top: 4px;

}



.required-indicator {

  color: #dc3545;

  margin-left: 4px;

}



/* Message Container for Popups */

.message-container {

  background: white;

  border-radius: 8px;

  box-shadow: 0 20px 60px rgba(0,0,0,0.3);

  overflow: hidden;

  max-width: 500px;

  width: 100%;

  text-align: center;

}



.message-header {

  background: linear-gradient(135deg, #28a745 0%, #218838 100%);

  color: white;

  padding: 30px;

}



.message-header.error {

  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);

}



.message-header h1 {

  font-size: 1.5rem;

  font-weight: 600;

  margin: 0;

}



.message-body {

  padding: 30px;

}



.message-body p {

  font-size: 1.1rem;

  color: #495057;

  line-height: 1.6;

}



.checkmark,

.error-icon {

  font-size: 3rem;

  margin-bottom: 15px;

}



/* Popup Body Centering */

body.popup-centered {

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 100vh;

  background: #e9ecef;

  padding: 20px;

}



/* ==================== UptimeRobot Specific Styles ==================== */

.status-badge {

  padding: 4px 12px;

  border-radius: 12px;

  font-size: 0.75rem;

  font-weight: 600;

}



.status-badge.status-up {

  background-color: #28a745;

  color: white;

}



.status-badge.status-down {

  background-color: #dc3545;

  color: white;

}



.status-badge.status-paused,

.status-badge.status-warning {

  background-color: #ffc107;

  color: #212529;

}



.event-up {

  background-color: #d4edda;

}



.event-down {

  background-color: #f8d7da;

}



.event-paused {

  background-color: #fff3cd;

}



.weekday-highlight {

  background-color: #e8f5e9;

}



.monospace {

  font-family: monospace;

}



.duration-cell {

  font-family: monospace;

  font-size: 0.85rem;

}



.url-cell {

  font-size: 0.8rem;

}



.events-cell {

  padding: 0 !important;

}



.event-type {

  width: 60px;

}



.event-datetime {

  width: 150px;

}



.time-muted {

  color: #6c757d;

  margin-left: 5px;

}



.nested-table {

  width: 100%;

  border-collapse: collapse;

}



.nested-table td {

  padding: 6px 8px;

  border-bottom: 1px solid #e9ecef;

  font-size: 0.85rem;

}



.nested-table tr:last-child td {

  border-bottom: none;

}



.section-title {

  margin-bottom: 15px;

  color: #195176;

  font-size: 1.1rem;

}



.checkbox-group {

  min-width: auto !important;

  flex: none !important;

  display: flex;

  align-items: center;

  gap: 8px;

  padding-bottom: 10px;

}



.checkbox-group label {

  margin: 0 !important;

}



/* Popup Container Styles */

.popup-container {

  background: white;

  border-radius: 8px;

  box-shadow: 0 20px 60px rgba(0,0,0,0.3);

  padding: 30px;

  max-width: 600px;

  width: 100%;

}



.popup-header {

  text-align: center;

  margin-bottom: 20px;

  padding-bottom: 15px;

  border-bottom: 2px solid #e9ecef;

}



.popup-header h2 {

  color: #195176;

  margin: 0 0 5px 0;

  font-size: 1.5rem;

}



.popup-header .subtitle {

  color: #6c757d;

  margin: 0;

  font-size: 0.9rem;

}



.popup-actions {

  margin-top: 20px;

  text-align: center;

}



.popup-wide {

  max-width: 1400px;

  width: 95%;

}



.date-range {

  color: #6c757d;

  font-size: 0.9rem;

  margin-top: 5px;

}



.response-detail-layout {

  display: flex;

  gap: 20px;

  margin-top: 20px;

}



.response-table-section {

  flex: 0 0 350px;

}



.response-chart-section {

  flex: 1;

  display: flex;

  justify-content: center;

  align-items: flex-start;

}



.table-scroll {

  max-height: 600px;

  overflow-y: auto;

}



.table-footer {

  padding: 10px;

  background: #f8f9fa;

  border: 1px solid #dee2e6;

  border-top: none;

  font-size: 0.9rem;

  color: #6c757d;

}



/* ==================== Email Scheduler Styles ==================== */

.scheduler-section {

  background: white;

  border-radius: 8px;

  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  margin-bottom: 20px;

  overflow: hidden;

}



.scheduler-section .section-header {

  background: linear-gradient(135deg, #195176 0%, #2c5f7f 100%);

  color: #FEBE10;

  padding: 15px 25px;

}



.scheduler-section .section-header h2 {

  margin: 0;

  font-size: 1.25rem;

  font-weight: 600;

}



.scheduler-section .controls {

  margin: 0;

  border-radius: 0;

  box-shadow: none;

  border-bottom: 1px solid #dee2e6;

}



.inactive-row {

  background-color: #f0f0f0 !important;

  opacity: 0.7;

}



.inactive-row:hover {

  background-color: #e8e8e8 !important;

}



/* BalanceByType Specific */

.type-header {

  background: #195176 !important;

  color: white !important;

  font-size: 1.1rem;

  font-weight: 700;

  padding: 15px 12px !important;

}



.type-total {

  background: #e9ecef !important;

  font-weight: 700;

  font-size: 0.95rem;

}



.report-total {

  background: #195176 !important;

  color: white !important;

  font-weight: 700;

  font-size: 1rem;

}



.type-summary {

  background: #f8f9fa;

  padding: 15px;

  border-radius: 8px;

  margin-bottom: 15px;

  border-left: 4px solid #195176;

}



.type-summary h3 {

  font-size: 1.1rem;

  color: #195176;

  margin-bottom: 8px;

}



.type-summary .total {

  font-size: 1.5rem;

  font-weight: 700;

  color: #28a745;

}



.type-summary .total.negative {

  color: #dc3545;

}



/* ==================== Job Request Styles ==================== */

.group-header {

  background: linear-gradient(135deg, #195176 0%, #2c5f7f 100%);

}



.group-header td {

  padding: 10px 15px !important;

}



.completed-row {

  background-color: #f8f9fa;

  opacity: 0.85;

}



.completed-row:hover {

  background-color: #f0f0f0;

  opacity: 1;

}



.request-text {

  max-width: 400px;

  white-space: pre-wrap;

  word-wrap: break-word;

}



.line-item-row {

  background-color: #fff8e1 !important;

}



.line-item-row:hover {

  background-color: #fff3cd !important;

}



.line-item-details {

  display: flex;

  gap: 15px;

  padding: 5px 10px;

  font-size: 0.85rem;

  color: #666;

}



.line-item-details .qty {

  font-weight: 600;

  color: #195176;

  min-width: 40px;

}



.line-item-details .desc {

  flex: 1;

}



.line-item-details .cost {

  font-weight: 600;

  color: #28a745;

}



.action-buttons {

  display: flex;

  gap: 8px;

  justify-content: center;

  flex-wrap: wrap;

}



.form-compact {

  max-width: 400px;

}



.form-compact .form-header h1 {

  font-size: 1.25rem;

}



/* ==================== Login & Password Reset Pages ==================== */

body.login-page {

  font-family: 'Times New Roman', Times, serif;

  background-color: #195176;

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 20px;

}



.login-container,

.reset-container {

  background: white;

  border-radius: 8px;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);

  padding: 50px;

  width: 100%;

  max-width: 450px;

  text-align: center;

}



.login-container .logo,

.reset-container .logo {

  margin-bottom: 30px;

}



.login-container .logo img,

.reset-container .logo img {

  max-width: 100%;

  height: auto;

  max-height: 80px;

}



.login-container h1,

.reset-container h1 {

  color: #195176;

  font-size: 24px;

  margin-bottom: 10px;

  font-weight: 600;

}



.login-container .subtitle,

.reset-container .subtitle {

  color: #666;

  font-size: 14px;

  margin-bottom: 30px;

  line-height: 1.6;

}



.login-container .form-group,

.reset-container .form-group {

  margin-bottom: 20px;

  text-align: left;

}



.login-container label,

.reset-container label {

  display: block;

  color: #333;

  margin-bottom: 8px;

  font-size: 14px;

  font-weight: 500;

}



.login-container label .required,

.reset-container label .required {

  color: #dc3545;

  margin-left: 4px;

}



.login-container input[type="text"],

.login-container input[type="email"],

.login-container input[type="password"],

.reset-container input[type="text"],

.reset-container input[type="email"],

.reset-container input[type="password"] {

  width: 100%;

  padding: 14px 16px;

  border: 2px solid #e0e0e0;

  border-radius: 6px;

  font-size: 16px;

  transition: border-color 0.3s, box-shadow 0.3s;

  font-family: 'Times New Roman', Times, serif;

}



.login-container input[type="text"]:focus,

.login-container input[type="email"]:focus,

.login-container input[type="password"]:focus,

.reset-container input[type="text"]:focus,

.reset-container input[type="email"]:focus,

.reset-container input[type="password"]:focus {

  outline: none;

  border-color: #195176;

  box-shadow: 0 0 0 3px rgba(25, 81, 118, 0.1);

}



.login-container .submit-btn,

.reset-container .submit-btn {

  width: 100%;

  padding: 14px 24px;

  background: linear-gradient(135deg, #195176 0%, #0d3a54 100%);

  color: white;

  border: none;

  border-radius: 6px;

  font-size: 16px;

  font-weight: 600;

  cursor: pointer;

  transition: transform 0.2s, box-shadow 0.3s;

  margin-top: 10px;

}



.login-container .submit-btn:hover,

.reset-container .submit-btn:hover {

  transform: translateY(-2px);

  box-shadow: 0 5px 15px rgba(25, 81, 118, 0.3);

}



.login-container .submit-btn:active,

.reset-container .submit-btn:active {

  transform: translateY(0);

}



.feedback-message {

  background-color: #fff3cd;

  border: 1px solid #ffc107;

  border-left: 4px solid #ffc107;

  color: #856404;

  padding: 15px;

  border-radius: 4px;

  margin-bottom: 25px;

  text-align: left;

  font-size: 14px;

}



.feedback-message.success {

  background-color: #d4edda;

  border-color: #28a745;

  color: #155724;

}



.feedback-message.error {

  background-color: #fee;

  border-color: #dc3545;

  color: #c00;

}



.back-to-login {

  margin-top: 25px;

  text-align: center;

}



.back-to-login a {

  color: #195176;

  text-decoration: none;

  font-size: 14px;

  font-weight: 500;

}



.back-to-login a:hover {

  text-decoration: underline;

}



.reset-container .help-text {

  font-size: 12px;

  color: #6c757d;

  margin-top: 5px;

}



/* Login page responsive */

@media (max-width: 600px) {

  .login-container,

  .reset-container {

    padding: 30px 20px;

  }



  .login-container h1,

  .reset-container h1 {

    font-size: 20px;

  }



  .login-container .logo img,

  .reset-container .logo img {

    max-height: 60px;

  }

}