/* ========================================
   Accessibility Utilities
   ======================================== */

/* Skip Link for Keyboard Navigation */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #4220ED;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 4px 0;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* Visually Hidden - Screen Reader Only */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus Visible for Keyboard Navigation */
*:focus-visible {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* Remove default focus outline for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

.alerts-details.one_column{
  grid-template-columns: repeat(1, 1fr)!important;
  /* display: none !important; */
}

/* Custom dropdown styling for filter and sort */
.custom-select.filter-dropdown,
.custom-select.sort-dropdown {
    width: auto;
    min-width: 48px;
}

.custom-select.filter-dropdown summary,
.custom-select.sort-dropdown summary {
    padding: 8px 12px;
    min-width: 48px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    background-color: #FBFBFF;
    cursor: pointer;
    transition: .3s;
}

.custom-select.filter-dropdown summary:hover,
.custom-select.sort-dropdown summary:hover {
    border-color: var(--color-dark-blue, #4220ED);
}

/* Custom monitoring status dropdown styling */
.custom-select.monitoring-status-dropdown {
    width: 100%;
    position: relative;
}

.custom-select.monitoring-status-dropdown summary {
    padding: 12px 16px;
    padding-right: 48px; /* Make room for the caret */
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background-color: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s ease;
    font-size: 14px;
    color: #111827;
}

.custom-select.monitoring-status-dropdown summary:hover,
.custom-select.monitoring-status-dropdown summary:focus {
    border-color: #3b82f6;
    outline: none;
}

.custom-select.monitoring-status-dropdown summary .selected-text {
    flex: 1;
    text-align: left;
}

.custom-select.monitoring-status-dropdown summary svg {
    position: absolute;
    right: 16px; /* Position caret 16px from the right edge */
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}

.custom-select.monitoring-status-dropdown[open] summary svg {
    transform: translateY(-50%) rotate(180deg);
}

.custom-select.filter-dropdown ul,
.custom-select.sort-dropdown ul,
.custom-select.monitoring-status-dropdown ul {
    min-width: 150px;
    background-color: #FBFBFF;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    z-index: 10;
}

/* Monitoring status dropdown specific styling */
.custom-select.monitoring-status-dropdown ul {
    width: 100%;
    min-width: auto;
    background-color: #ffffff;
    border: 2px solid #e5e7eb;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Position sort dropdown to the left when it's the last element */
.custom-select.sort-dropdown ul {
    left: auto;
    right: 0;
}

/* Ensure dropdown stays within viewport on smaller screens */
@media only screen and (max-width: 400px) {
    .custom-select.filter-dropdown ul,
    .custom-select.sort-dropdown ul {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        min-width: 200px;
        max-width: calc(100vw - 40px);
    }
}

.custom-select.filter-dropdown ul li,
.custom-select.sort-dropdown ul li,
.custom-select.monitoring-status-dropdown ul li {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #050828;
    transition: background-color 0.2s ease;
}

/* Monitoring status dropdown items */
.custom-select.monitoring-status-dropdown ul li {
    font-size: 14px;
    color: #111827;
    padding: 12px 16px;
}

.custom-select.filter-dropdown ul li:hover,
.custom-select.sort-dropdown ul li:hover,
.custom-select.monitoring-status-dropdown ul li:hover {
    background-color: #EEF0FF;
}

.custom-select.filter-dropdown ul li:first-child,
.custom-select.sort-dropdown ul li:first-child,
.custom-select.monitoring-status-dropdown ul li:first-child {
    border-radius: 8px 8px 0 0;
}

.custom-select.filter-dropdown ul li:last-child,
.custom-select.sort-dropdown ul li:last-child,
.custom-select.monitoring-status-dropdown ul li:last-child {
    border-radius: 0 0 8px 8px;
}

/* Mobile responsive adjustments */
@media only screen and (width < 768px) {
    .dashboard-table-filters {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .dashboard-search {
        order: 1;
        width: 100%;
    }
    
    .custom-select.filter-dropdown,
    .custom-select.sort-dropdown {
        order: 2;
        flex: 1;
    }
    
    .custom-select.filter-dropdown summary,
    .custom-select.sort-dropdown summary {
        width: 100%;
        justify-content: space-between;
        padding: 12px 16px;
        height: 44px;
    }
    
    .custom-select.filter-dropdown ul,
    .custom-select.sort-dropdown ul {
        width: 100%;
        min-width: auto;
    }
}

/* Global Search Dropdown Styles */
.global-search-container {
    position: relative;
    display: inline-block;
}

.global-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    margin-top: 4px;
}

.search-results-container {
    padding: 8px 0;
}

.search-results-section {
    margin-bottom: 8px;
}

.search-results-section:last-child {
    margin-bottom: 0;
}

.search-results-header {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #f3f4f6;
    background-color: #f9fafb;
}

.search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f3f4f6;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: #f8fafc;
}

.search-result-icon {
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-bin {
    font-size: 11px;
    color: #9ca3af;
    font-family: monospace;
}

.search-result-company {
    font-size: 11px;
    color: #3b82f6;
    margin-top: 2px;
    font-weight: 500;
}

.search-no-results {
    padding: 24px 16px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

/* Responsive adjustments for global search */
@media only screen and (max-width: 768px) {
    .global-search-dropdown {
        left: -50%;
        right: -50%;
        width: 300px;
        max-width: calc(100vw - 40px);
    }
    
    .search-result-item {
        padding: 10px 12px;
        gap: 10px;
    }
    
    .search-result-title {
        font-size: 13px;
    }
    
    .search-result-subtitle {
        font-size: 12px;
    }
}

/* Ensure search dropdown appears above other elements */
.dashboard-top-bar {
    z-index: 100;
}
/* U
ser Menu Dropdown Styles */
.user-menu-container {
    position: relative;
    display: inline-block;
}

.user-menu-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    transition: transform 0.2s ease;
}

.user-menu-button:hover .user-avatar-circle {
    transform: scale(1.05);
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 280px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow: hidden;
}

.user-dropdown-header {
    padding: 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-dropdown-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 18px;
    text-transform: uppercase;
}

.user-dropdown-info {
    flex: 1;
}

.user-dropdown-name {
    font-weight: 600;
    font-size: 16px;
    color: #111827;
    margin-bottom: 2px;
}

.user-dropdown-email {
    font-size: 14px;
    color: #6b7280;
}

.user-dropdown-menu {
    padding: 8px 0;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.user-dropdown-item:hover {
    background-color: #f3f4f6;
    color: #111827;
    text-decoration: none;
}

.user-dropdown-item.logout {
    color: #dc2626;
}

.user-dropdown-item.logout:hover {
    background-color: #fef2f2;
    color: #dc2626;
}

.user-dropdown-item svg {
    width: 16px;
    height: 16px;
    color: currentColor;
}

.user-dropdown-divider {
    height: 1px;
    background-color: #e5e7eb;
    margin: 8px 0;
}

/* Notification dropdown positioning fix */
.notification-container {
    position: relative;
    margin-right: 16px;
}

.dashboard-top-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}/*
 User Profile Page Styles */
.user-profile-page {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.user-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 32px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.user-details h1 {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.user-email {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 12px;
}

.user-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.super-admin-badge {
    background: #fef3c7;
    color: #92400e;
}

.admin-badge {
    background: #dbeafe;
    color: #1e40af;
}

.user-badge {
    background: #f3f4f6;
    color: #374151;
}

.confirmed-badge {
    background: #d1fae5;
    color: #065f46;
}

.unconfirmed-badge {
    background: #fee2e2;
    color: #991b1b;
}

.user-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.action-button {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.action-button.primary {
    background: #3b82f6;
    color: white;
}

.action-button.primary:hover {
    background: #2563eb;
    color: white;
    text-decoration: none;
}

.action-button.secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.action-button.secondary:hover {
    background: #e5e7eb;
    color: #374151 !important;
    text-decoration: none !important;
}

.action-button.danger {
    background: #dc2626;
    color: white;
}

.action-button.danger:hover {
    background: #b91c1c;
    color: white !important;
    text-decoration: none !important;
}

.user-profile-content {
    display: grid;
    gap: 24px;
}

.profile-section {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-section h2 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f3f4f6;
}

.details-grid {
    display: grid;
    gap: 16px;
}

.detail-row {
    display: grid;
    grid-template-columns: 200px 20px 1fr;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f9fafb;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

.detail-colon {
    color: #6b7280;
    font-weight: 600;
}

.detail-value {
    color: #111827;
    font-size: 14px;
}

@media (max-width: 768px) {
    .user-profile-header {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
    
    .user-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .detail-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    
    .detail-colon {
        display: none;
    }
    
    .detail-label {
        font-weight: 700;
        color: #111827;
    }
}
/* ========================================
   City Complaints Page Styles
   ======================================== */

/* Layout */
.dashboard-box.city-complaints-layout {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.city-complaints-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Dual Sidebar with Two Sections */
.complaints-sidebar {
  flex-shrink: 0;
  width: 280px;
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}

/* Sidebar Sections */
.sidebar-section {
  margin-bottom: 32px;
}

.sidebar-section:last-of-type {
  margin-bottom: 20px;
}

.sidebar-header {
  margin-bottom: 16px;
}

.sidebar-title {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

/* Clear Filters Link */
.sidebar-clear-link {
  display: block;
  text-align: center;
  padding: 12px 16px;
  color: #dc2626;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
  margin-top: 12px;
  border: 1px solid #fecaca;
  background: #fef2f2;
}

.sidebar-clear-link:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  text-decoration: none;
  color: #dc2626;
}

/* Descriptor Filter List */
.descriptor-filter-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 350px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Agency Filter List */
.agency-filter-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 350px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Custom scrollbar for filter lists */
.descriptor-filter-list::-webkit-scrollbar,
.agency-filter-list::-webkit-scrollbar {
  width: 6px;
}

.descriptor-filter-list::-webkit-scrollbar-track,
.agency-filter-list::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 3px;
}

.descriptor-filter-list::-webkit-scrollbar-thumb,
.agency-filter-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.descriptor-filter-list::-webkit-scrollbar-thumb:hover,
.agency-filter-list::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Descriptor Filter Items */
.descriptor-filter-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-decoration: none;
  color: #1f2937;
  transition: all 0.2s ease;
  cursor: pointer;
  min-height: 44px;
}

.descriptor-filter-item:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  text-decoration: none;
}

.descriptor-filter-item.active {
  background: #EEF0FF;
  border-color: #4220ED;
  border-width: 2px;
  padding: 11px 13px;
}

.descriptor-filter-item:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

.descriptor-filter-label {
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  order: 2;
}

.descriptor-filter-count {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  order: 1;
  min-width: 40px;
  text-align: left;
}

.descriptor-filter-item.active .descriptor-filter-label {
  font-weight: 600;
}

.descriptor-filter-item.active .descriptor-filter-count {
  color: #1f2937;
}

/* Agency Filter Items */
.agency-filter-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-decoration: none;
  color: #1f2937;
  transition: all 0.2s ease;
  cursor: pointer;
  min-height: 44px;
}

.agency-filter-item:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  text-decoration: none;
}

.agency-filter-item.active {
  background: #EEF0FF;
  border-color: #4220ED;
  border-width: 2px;
  padding: 11px 13px;
}

.agency-filter-item:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

.agency-filter-label {
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  order: 2;
}

.agency-filter-count {
  font-size: 16px;
  font-weight: 700;
  color: #6B7280;
  order: 3;
  min-width: 40px;
  text-align: right;
}

.agency-filter-item.active .agency-filter-label {
  font-weight: 600;
}

.agency-filter-item.active .agency-filter-count {
  color: #1f2937;
}

/* Main Content Area */
.city-complaints-content {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

.city-complaints-content * {
  box-sizing: border-box;
}

/* City Complaints Dashboard Table Head */
.city-complaints-content .dashboard-table-head {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* City Complaints Filter Form */
.city-complaints-content .dashboard-filters-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  max-width: 100%;
  box-sizing: border-box;
}

.city-complaints-content .filter-group {
  flex: 0 1 auto;
  min-width: 0;
}

.city-complaints-content .filter-select,
.city-complaints-content .filter-date,
.city-complaints-content .filter-search {
  max-width: 100%;
  box-sizing: border-box;
}

/* City Complaints Table Wrapper */
.city-complaints-content .table-scroll-wrapper,
.city-complaints-content .dashboard-table-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

/* City Complaints Table Styles */
.city-complaints-table {
  table-layout: fixed;
  width: 100%;
  min-width: 900px;
}

.city-complaints-table .checkbox-col {
  width: 50px;
}

.city-complaints-table .address-col {
  width: 200px;
}

.city-complaints-table .company-col {
  width: 120px;
}

.city-complaints-table .agency-col {
  width: 100px;
}

.city-complaints-table .complaint-type-col {
  width: 180px;
}

.city-complaints-table .descriptor-col {
  width: 180px;
}

.city-complaints-table .status-col {
  width: 130px;
}

.city-complaints-table .created-date-col {
  width: 110px;
}

.city-complaints-table .action-col {
  width: 80px;
  text-align: center;
}

/* Address and descriptor column truncation */
.city-complaints-table .address-col,
.city-complaints-table .descriptor-col,
.city-complaints-table .complaint-type-col {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* City Complaint Status Badge Styles */
.city-complaints-table .status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.city-complaints-table .status-badge.status-open,
.city-complaints-table .status-badge.status-pending {
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.city-complaints-table .status-badge.status-closed,
.city-complaints-table .status-badge.status-resolved {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.city-complaints-table .status-badge.status-in-progress {
  background-color: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.city-complaints-table .status-badge.status-unknown {
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

/* City Complaints Filter Form Styles */
.city-complaints-content .dashboard-filters-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.city-complaints-content .filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.city-complaints-content .date-range-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.city-complaints-content .date-separator {
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

.city-complaints-content .filter-select,
.city-complaints-content .filter-date,
.city-complaints-content .filter-search {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  color: #374151;
  background-color: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-width: 150px;
}

.city-complaints-content .filter-search {
  min-width: 200px;
}

.city-complaints-content .filter-date {
  min-width: 140px;
}

.city-complaints-content .filter-select:focus,
.city-complaints-content .filter-date:focus,
.city-complaints-content .filter-search:focus {
  outline: none;
  border-color: #4220ED;
  box-shadow: 0 0 0 3px rgba(66, 32, 237, 0.1);
}

.city-complaints-content .filter-submit-btn {
  padding: 8px 16px;
  background-color: #4220ED;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.city-complaints-content .filter-submit-btn:hover {
  background-color: #3614c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.city-complaints-content .filter-submit-btn:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

.city-complaints-content .filter-clear-btn {
  padding: 8px 16px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-block;
}

.city-complaints-content .filter-clear-btn:hover {
  background-color: #e5e7eb;
  border-color: #9ca3af;
  text-decoration: none;
}

.city-complaints-content .filter-clear-btn:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* City Complaints Empty State */
.city-complaints-content .empty-state {
  text-align: center;
  padding: 60px 20px;
  background: #f9fafb;
  border-radius: 8px;
  margin: 20px 0;
}

.city-complaints-content .empty-state-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.city-complaints-content .empty-state-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.city-complaints-content .empty-state-message {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 20px 0;
  line-height: 1.6;
}

.city-complaints-content .empty-state-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4220ED;
  color: #ffffff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.city-complaints-content .empty-state-btn:hover {
  background-color: #3614c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.city-complaints-content .empty-state-btn:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* Responsive Design for City Complaints */
@media (max-width: 1200px) {
  .city-complaints-layout {
    flex-direction: column;
    overflow-x: hidden;
  }
  
  .complaints-sidebar {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  .descriptor-filter-list,
  .agency-filter-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    max-height: none;
    overflow-y: visible;
  }
  
  .city-complaints-content {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
  
  .city-complaints-content .dashboard-filters-form {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  
  .city-complaints-content .filter-group,
  .city-complaints-content .date-range-group {
    width: 100%;
  }
  
  .city-complaints-content .filter-select,
  .city-complaints-content .filter-date,
  .city-complaints-content .filter-search {
    width: 100%;
    max-width: 100%;
  }
  
  .city-complaints-content .filter-submit-btn,
  .city-complaints-content .filter-clear-btn {
    width: 100%;
  }
  
  /* Make table scrollable horizontally on smaller screens */
  .city-complaints-content .table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .city-complaints-table {
    min-width: 800px;
  }
}

@media (max-width: 768px) {
  .city-complaints-layout {
    padding: 0;
    gap: 16px;
  }
  
  .complaints-sidebar {
    padding: 16px;
    margin: 0;
  }
  
  .descriptor-filter-list,
  .agency-filter-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
  }
  
  .descriptor-filter-item,
  .agency-filter-item {
    padding: 10px 12px;
    min-height: 44px;
  }
  
  .descriptor-filter-label,
  .agency-filter-label {
    font-size: 12px;
  }
  
  .descriptor-filter-count,
  .agency-filter-count {
    font-size: 14px;
  }
  
  .city-complaints-content {
    padding: 0;
    overflow-x: auto;
  }
  
  .city-complaints-content .dashboard-table-wrapper {
    overflow-x: auto;
  }
  
  .city-complaints-table {
    min-width: 900px;
  }
  
  .city-complaints-table .address-col {
    width: 180px;
  }
  
  .city-complaints-table .descriptor-col {
    width: 150px;
  }
}

@media (max-width: 480px) {
  .city-complaints-layout {
    gap: 12px;
  }
  
  .complaints-sidebar {
    padding: 12px;
  }
  
  .descriptor-filter-list,
  .agency-filter-list {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  
  .sidebar-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .city-complaints-content .date-range-group {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .city-complaints-content .date-separator {
    display: none;
  }
  
  .city-complaints-content .filter-select,
  .city-complaints-content .filter-date,
  .city-complaints-content .filter-search {
    font-size: 14px;
    padding: 10px 12px;
  }
  
  .city-complaints-table {
    min-width: 800px;
  }
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
  .descriptor-filter-item,
  .agency-filter-item,
  .city-complaints-content .filter-submit-btn,
  .city-complaints-content .filter-clear-btn,
  .city-complaints-content .empty-state-btn {
    transition: none;
  }
  
  .city-complaints-content .filter-submit-btn:hover,
  .city-complaints-content .empty-state-btn:hover {
    transform: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .descriptor-filter-item,
  .agency-filter-item {
    border-width: 2px;
  }
  
  .descriptor-filter-item.active,
  .agency-filter-item.active {
    border-width: 3px;
  }
  
  .city-complaints-table .status-badge {
    border-width: 2px;
  }
}

/* Focus visible for keyboard navigation */
.descriptor-filter-item:focus-visible,
.agency-filter-item:focus-visible,
.sidebar-clear-link:focus-visible,
.city-complaints-content .filter-submit-btn:focus-visible,
.city-complaints-content .filter-clear-btn:focus-visible,
.city-complaints-content .empty-state-btn:focus-visible {
  outline: 3px solid #4220ED;
  outline-offset: 2px;
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .descriptor-filter-item,
  .agency-filter-item {
    min-height: 48px;
    padding: 12px 14px;
  }
  
  .city-complaints-content .filter-submit-btn,
  .city-complaints-content .filter-clear-btn {
    min-height: 44px;
    padding: 10px 16px;
  }
}


/* ============================================
   Accessibility Enhancements
   ============================================ */

/* Skip to content link for keyboard navigation */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #0B0D23;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    z-index: 10000;
    font-weight: 600;
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid #4220ED;
    outline-offset: 2px;
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus visible styles for better keyboard navigation */
*:focus-visible {
    outline: 3px solid #4220ED;
    outline-offset: 2px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    * {
        border-width: 2px !important;
    }
}

/* ========================================
   Super Admin Companies Status Badges
   ======================================== */

/* Base status badge styling */
.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

/* Active subscription status */
.status-badge.status-active {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

/* Trialing subscription status */
.status-badge.status-trialing {
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* Canceled subscription status */
.status-badge.status-canceled {
  background-color: #fed7d7;
  color: #742a2a;
  border: 1px solid #fca5a5;
}

/* Past due subscription status */
.status-badge.status-past_due {
  background-color: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* No subscription status */
.status-badge.status-no-subscription {
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

/* Hover effect for status badges (optional, for interactive badges) */
.status-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Accessibility: High contrast mode support */
@media (prefers-contrast: high) {
  .status-badge {
    border-width: 2px;
    font-weight: 700;
  }
}

/* Accessibility: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .status-badge {
    transition: none;
  }
  
  .status-badge:hover {
    transform: none;
  }
}

/* ========================================
   Super Admin Companies Actions Dropdown
   ======================================== */

/* Dropdown container */
.dropdown-container {
  position: relative;
  display: inline-block;
}

/* Actions dropdown button */
.actions-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.actions-dropdown-btn:hover {
  background-color: #e9ecef;
  border-color: #ced4da;
}

.actions-dropdown-btn:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

.actions-dropdown-btn svg {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}

.actions-dropdown-btn.active svg {
  transform: rotate(180deg);
}

/* Dropdown menu */
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 999999;
  overflow: hidden;
  animation: dropdownFadeIn 0.15s ease;
}

.dropdown-menu.show {
  display: block;
}

/* Dropdown animation */
@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dropdown items */
.dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.dropdown-item:hover {
  background-color: #f8f9fa;
  color: #374151;
  text-decoration: none;
}

.dropdown-item:focus {
  outline: 2px solid #4220ED;
  outline-offset: -2px;
  background-color: #f8f9fa;
}

/* Dropdown item variants */
.dropdown-item.danger {
  color: #dc2626;
}

.dropdown-item.danger:hover {
  background-color: #fef2f2;
  color: #dc2626;
}

.dropdown-item.success {
  color: #16a34a;
}

.dropdown-item.success:hover {
  background-color: #f0fdf4;
  color: #16a34a;
}

/* Dropdown divider */
.dropdown-divider {
  height: 1px;
  background-color: #e5e7eb;
  margin: 4px 0;
}

/* Ensure dropdown stays within viewport */
.dropdown-container:last-child .dropdown-menu,
.action-col .dropdown-container .dropdown-menu {
  right: 0;
  left: auto;
}

/* Adjust dropdown position if near viewport edge */
@media (max-width: 768px) {
  .dropdown-menu {
    min-width: 160px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
  
  @keyframes dropdownFadeIn {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }
}

/* Accessibility: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .dropdown-menu {
    animation: none;
  }
  
  .actions-dropdown-btn svg {
    transition: none;
  }
}

/* Accessibility: High contrast mode support */
@media (prefers-contrast: high) {
  .actions-dropdown-btn {
    border-width: 2px;
  }
  
  .dropdown-menu {
    border-width: 2px;
  }
  
  .dropdown-item {
    border-bottom: 1px solid #dee2e6;
  }
  
  .dropdown-item:last-child {
    border-bottom: none;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .actions-dropdown-btn {
    min-height: 44px;
    padding: 10px 14px;
  }
  
  .dropdown-item {
    min-height: 44px;
    padding: 12px 16px;
  }
}

/* ========================================
   Super Admin Companies Search Styles
   ======================================== */

/* Dashboard search form */
.dashboard-search {
  position: relative;
  display: inline-block;
}

/* Search input field */
.dashboard-search .table-search {
  width: 270px;
  padding: 11px 11px 11px 35px;
  border: 1px solid #E9E9E9;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #050828;
  background-color: #FFFFFF;
  transition: all 0.2s ease;
  outline: none;
}

/* Search input placeholder */
.dashboard-search .table-search::placeholder {
  color: #9CA3AF;
  font-weight: 400;
}

/* Search input focus state */
.dashboard-search .table-search:focus {
  border-color: #4220ED;
  box-shadow: 0 0 0 3px rgba(66, 32, 237, 0.1);
}

/* Search icon positioning */
.dashboard-search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

/* Search results info */
.search-results-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 13px;
}

.search-results-info .search-count {
  font-weight: 600;
  color: #1f2937;
}

.search-results-info .search-term {
  color: #6b7280;
  font-style: italic;
}

.search-results-info .clear-search {
  margin-left: auto;
  padding: 4px 12px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  color: #dc2626;
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  transition: all 0.2s ease;
}

.search-results-info .clear-search:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  text-decoration: none;
}

/* Empty state for search results */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: #f9fafb;
  border-radius: 8px;
  margin: 0;
}

.empty-state-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.empty-state-message {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 20px 0;
  line-height: 1.6;
}

.empty-state-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4220ED;
  color: #ffffff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.empty-state-btn:hover {
  background-color: #3614c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: #ffffff;
}

.empty-state-btn:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* Responsive empty state styles */
@media (max-width: 768px) {
  .empty-state {
    padding: 40px 16px;
  }
  
  .empty-state-icon {
    font-size: 48px;
    margin-bottom: 12px;
  }
  
  .empty-state-title {
    font-size: 18px;
  }
  
  .empty-state-message {
    font-size: 13px;
    margin-bottom: 16px;
  }
  
  .empty-state-btn {
    width: 100%;
    max-width: 280px;
  }
}

@media (max-width: 480px) {
  .empty-state {
    padding: 32px 12px;
  }
  
  .empty-state-icon {
    font-size: 40px;
  }
  
  .empty-state-title {
    font-size: 16px;
  }
  
  .empty-state-message {
    font-size: 12px;
  }
}

/* Loading state */
#companies-table-container {
  transition: opacity 0.2s ease;
}

/* Responsive adjustments for search */
@media (max-width: 768px) {
  .dashboard-search .table-search {
    width: 100%;
    min-width: 200px;
  }
  
  .dashboard-table-filters {
    width: 100%;
  }
  
  .dashboard-search {
    width: 100%;
  }
}

/* Accessibility: High contrast mode support */
@media (prefers-contrast: high) {
  .dashboard-search .table-search {
    border-width: 2px;
  }
  
  .dashboard-search .table-search:focus {
    border-width: 3px;
  }
  
  .search-results-info {
    border-width: 2px;
  }
}

/* Accessibility: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .dashboard-search .table-search,
  .empty-state-btn,
  #companies-table-container {
    transition: none;
  }
  
  .empty-state-btn:hover {
    transform: none;
  }
}

/* Focus visible for keyboard navigation */
.dashboard-search .table-search:focus-visible {
  outline: 3px solid #4220ED;
  outline-offset: 2px;
}

.search-results-info .clear-search:focus-visible,
.empty-state-btn:focus-visible {
  outline: 3px solid #4220ED;
  outline-offset: 2px;
}

/* ========================================
   Super Admin Companies Table Styles
   ======================================== */

/* Companies table layout */
.companies-table {
  table-layout: fixed;
  width: 100%;
  min-width: 1000px;
}

/* Column widths */
.companies-table .checkbox-col {
  width: 50px;
}

.companies-table .company-name-col {
  width: 220px;
}

.companies-table .users-col {
  width: 80px;
  text-align: center;
}

.companies-table .properties-col {
  width: 120px;
  text-align: center;
}

.companies-table .subscription-col {
  width: 150px;
}

.companies-table .joined-col {
  width: 120px;
}

.companies-table .action-col {
  width: 100px;
  text-align: center;
}

/* Company info styling */
.company-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.company-info strong {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-info .company-id {
  font-size: 12px;
  color: #6b7280;
  font-weight: 400;
}

/* Table cell alignment */
.companies-table tbody td {
  vertical-align: middle;
}

/* Action column needs visible overflow for dropdown */
.companies-table .action-col {
  overflow: visible !important;
}

.companies-table tbody tr {
  position: relative;
}

/* Responsive table wrapper */
.table-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Allow dropdowns to overflow the table wrapper */
.dashboard-table-wrapper:has(.companies-table) .table-scroll-wrapper {
  overflow: visible;
}

@media only screen and (max-width: 1024px) {
  .dashboard-table-wrapper:has(.companies-table) .table-scroll-wrapper {
    overflow-x: auto !important;
    overflow-y: visible;
  }
}

/* Responsive adjustments for companies table */
@media (max-width: 1200px) {
  .companies-table {
    min-width: 900px;
  }
  
  .companies-table .company-name-col {
    width: 180px;
  }
  
  .companies-table .subscription-col {
    width: 130px;
  }
}

@media (max-width: 768px) {
  .companies-table {
    min-width: 800px;
  }
  
  .companies-table .company-name-col {
    width: 160px;
  }
  
  .companies-table .properties-col {
    width: 100px;
  }
  
  .companies-table .subscription-col {
    width: 120px;
  }
  
  .companies-table .joined-col {
    width: 100px;
  }
}

/* ========================================
   Super Admin Companies Responsive Design
   ======================================== */

/* ========================================
   Desktop Styles (>= 1280px)
   ======================================== */
@media only screen and (min-width: 1280px) {
  /* Optimal column widths for desktop */
  .companies-table {
    min-width: 1000px;
  }
  
  .companies-table .checkbox-col {
    width: 50px;
  }
  
  .companies-table .company-name-col {
    width: 250px;
  }
  
  .companies-table .users-col {
    width: 90px;
  }
  
  .companies-table .properties-col {
    width: 130px;
  }
  
  .companies-table .subscription-col {
    width: 180px;
  }
  
  .companies-table .joined-col {
    width: 120px;
  }
  
  .companies-table .action-col {
    width: 120px;
  }
  
  /* Ensure proper spacing */
  .companies-table th,
  .companies-table td {
    padding: 12px 16px;
  }
  
  /* Position dropdowns correctly on desktop */
  .companies-table .dropdown-menu {
    right: 0;
    left: auto;
    min-width: 180px;
  }
  
  /* Ensure dropdown stays within viewport */
  .companies-table .action-col .dropdown-container {
    position: relative;
  }
  
  /* Dashboard table filters layout */
  .dashboard-table-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
  }
  
  /* Search input optimal width */
  .dashboard-search .table-search {
    width: 300px;
  }
  
  /* Page header spacing */
  .super-admin-companies {
    padding: 24px 32px;
  }
  
  .page-header {
    margin-bottom: 32px;
  }
}

/* ========================================
   Tablet Styles (768px - 1279px)
   ======================================== */
@media only screen and (min-width: 768px) and (max-width: 1279px) {
  /* Adjust column widths proportionally */
  .companies-table {
    min-width: 900px;
  }
  
  .companies-table .checkbox-col {
    width: 45px;
  }
  
  .companies-table .company-name-col {
    width: 200px;
  }
  
  .companies-table .users-col {
    width: 75px;
  }
  
  .companies-table .properties-col {
    width: 110px;
  }
  
  .companies-table .subscription-col {
    width: 140px;
  }
  
  .companies-table .joined-col {
    width: 110px;
  }
  
  .companies-table .action-col {
    width: 100px;
  }
  
  /* Enable horizontal scroll if needed */
  .table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Adjust padding for tablet */
  .companies-table th,
  .companies-table td {
    padding: 10px 12px;
  }
  
  /* Stack filters on smaller tablets */
  @media only screen and (max-width: 1024px) {
    .dashboard-table-filters {
      flex-wrap: wrap;
      gap: 10px;
    }
    
    .dashboard-search {
      order: 1;
      flex: 1 1 100%;
    }
    
    .dashboard-search .table-search {
      width: 100%;
    }
  }
  
  /* Dropdown positioning for tablet */
  .companies-table .dropdown-menu {
    right: 0;
    left: auto;
    min-width: 160px;
  }
  
  /* Adjust page padding */
  .super-admin-companies {
    padding: 20px 24px;
  }
  
  /* Reduce header size */
  .page-header h1 {
    font-size: 2rem;
  }
  
  .page-header p {
    font-size: 1rem;
  }
  
  /* Adjust company info font sizes */
  .company-info strong {
    font-size: 13px;
  }
  
  .company-info .company-id {
    font-size: 11px;
  }
  
  /* Adjust status badge size */
  .status-badge {
    font-size: 10px;
    padding: 3px 10px;
  }
}

/* ========================================
   Mobile Styles (< 768px)
   ======================================== */
@media only screen and (max-width: 767px) {
  /* Enable horizontal scroll for table */
  .table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }
  
  /* Set minimum table width */
  .companies-table {
    min-width: 800px;
  }
  
  /* Adjust column widths for mobile */
  .companies-table .checkbox-col {
    width: 40px;
  }
  
  .companies-table .company-name-col {
    width: 180px;
  }
  
  .companies-table .users-col {
    width: 70px;
  }
  
  .companies-table .properties-col {
    width: 100px;
  }
  
  .companies-table .subscription-col {
    width: 120px;
  }
  
  .companies-table .joined-col {
    width: 100px;
  }
  
  .companies-table .action-col {
    width: 90px;
  }
  
  /* Reduce padding for mobile */
  .companies-table th,
  .companies-table td {
    padding: 8px 10px;
  }
  
  /* Stack search and filters vertically */
  .dashboard-table-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .dashboard-table-head > span {
    width: 100%;
  }
  
  .dashboard-table-filters {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }
  
  /* Make search full-width */
  .dashboard-search {
    width: 100%;
  }
  
  .dashboard-search .table-search {
    width: 100%;
    min-width: auto;
  }
  
  /* Make buttons full-width */
  .add-new-btn {
    width: 100%;
    justify-content: center;
  }
  
  /* Simplify pagination layout */
  .pagination {
    flex-direction: column;
    gap: 16px;
    align-items: stretch !important;
  }
  
  .pagination-indicator {
    text-align: center;
    order: 1;
  }
  
  .pagination-items {
    order: 2;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .pagination-item {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
  
  .pagination-btns {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
  
  .pagination-btn {
    flex: 1;
    justify-content: center;
    padding: 10px 12px;
    font-size: 13px;
  }
  
  /* Adjust page padding for mobile */
  .super-admin-companies {
    padding: 16px;
  }
  
  /* Reduce header size for mobile */
  .page-header {
    margin-bottom: 20px;
  }
  
  .page-header h1 {
    font-size: 1.75rem;
  }
  
  .page-header p {
    font-size: 0.9rem;
  }
  
  /* Adjust dashboard box padding */
  .dashboard-box {
    padding: 12px;
  }
  
  .dashboard-table-wrapper {
    padding: 12px;
  }
  
  /* Adjust company info for mobile */
  .company-info strong {
    font-size: 12px;
  }
  
  .company-info .company-id {
    font-size: 10px;
  }
  
  /* Adjust status badge for mobile */
  .status-badge {
    font-size: 9px;
    padding: 3px 8px;
    letter-spacing: 0.3px;
  }
  
  /* Adjust dropdown for mobile */
  .actions-dropdown-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .actions-dropdown-btn svg {
    width: 10px;
    height: 10px;
  }
  
  .dropdown-menu {
    min-width: 150px;
    font-size: 12px;
  }
  
  .dropdown-item {
    padding: 10px 14px;
    font-size: 12px;
  }
  
  /* Adjust search results info for mobile */
  .search-results-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    font-size: 12px;
  }
  
  .search-results-info .clear-search {
    align-self: flex-end;
  }
  
  /* Adjust empty state for mobile */
  .empty-state {
    padding: 40px 16px;
  }
  
  .empty-state-icon {
    font-size: 48px;
  }
  
  .empty-state-title {
    font-size: 18px;
  }
  
  .empty-state-message {
    font-size: 13px;
  }
  
  .empty-state-btn {
    width: 100%;
    padding: 12px 20px;
  }
}

/* ========================================
   Extra Small Mobile (< 480px)
   ======================================== */
@media only screen and (max-width: 479px) {
  /* Further reduce table minimum width */
  .companies-table {
    min-width: 700px;
  }
  
  /* Reduce column widths further */
  .companies-table .company-name-col {
    width: 160px;
  }
  
  .companies-table .subscription-col {
    width: 110px;
  }
  
  /* Reduce padding even more */
  .companies-table th,
  .companies-table td {
    padding: 6px 8px;
    font-size: 12px;
  }
  
  /* Adjust page padding */
  .super-admin-companies {
    padding: 12px;
  }
  
  /* Reduce header size */
  .page-header h1 {
    font-size: 1.5rem;
  }
  
  .page-header p {
    font-size: 0.85rem;
  }
  
  /* Adjust dashboard box */
  .dashboard-box {
    padding: 8px;
  }
  
  .dashboard-table-wrapper {
    padding: 8px;
  }
  
  /* Adjust table head title */
  .dashboard-table-head > span {
    font-size: 16px;
  }
  
  /* Adjust pagination for extra small screens */
  .pagination-item {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  
  .pagination-btn {
    padding: 8px 10px;
    font-size: 12px;
  }
  
  /* Hide pagination text on very small screens */
  .pagination-btn span {
    display: none;
  }
  
  .pagination-btn svg {
    margin: 0;
  }
}

/* ========================================
   Landscape Mobile Optimization
   ======================================== */
@media only screen and (max-width: 767px) and (orientation: landscape) {
  /* Optimize for landscape orientation */
  .page-header {
    margin-bottom: 16px;
  }
  
  .page-header h1 {
    font-size: 1.5rem;
    margin-bottom: 4px;
  }
  
  .page-header p {
    font-size: 0.85rem;
  }
  
  .dashboard-table-head {
    gap: 8px;
  }
  
  .companies-table th,
  .companies-table td {
    padding: 6px 8px;
  }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
  /* Hide interactive elements */
  .dashboard-table-filters,
  .checkbox-col,
  .action-col,
  .pagination,
  .actions-dropdown-btn,
  .dropdown-menu {
    display: none !important;
  }
  
  /* Optimize table for printing */
  .companies-table {
    width: 100%;
    min-width: auto;
  }
  
  .table-scroll-wrapper {
    overflow: visible;
  }
  
  /* Adjust colors for print */
  .status-badge {
    border: 1px solid #000;
    background: transparent !important;
  }
  
  /* Page breaks */
  .companies-table tr {
    page-break-inside: avoid;
  }
  
  .page-header {
    page-break-after: avoid;
  }
}

/* ========================================
   Accessibility: Touch Target Sizes
   ======================================== */
@media (hover: none) and (pointer: coarse) {
  /* Ensure minimum touch target size of 44x44px */
  .companies-table .checkbox-col label {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .actions-dropdown-btn {
    min-height: 44px;
    padding: 12px 14px;
  }
  
  .dropdown-item {
    min-height: 44px;
    padding: 12px 16px;
  }
  
  .pagination-item {
    min-width: 44px;
    min-height: 44px;
  }
  
  .pagination-btn {
    min-height: 44px;
  }
  
  /* Increase spacing for touch devices */
  .dashboard-table-filters {
    gap: 12px;
  }
}

/* ========================================
   Accessibility: Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .companies-table tr,
  .dropdown-menu,
  .actions-dropdown-btn,
  .pagination-item,
  .pagination-btn,
  .status-badge {
    transition: none !important;
    animation: none !important;
  }
  
  .dropdown-menu {
    animation: none;
  }
  
  .actions-dropdown-btn svg {
    transition: none;
  }
}

/* ========================================
   Accessibility: High Contrast Mode
   ======================================== */
@media (prefers-contrast: high) {
  .companies-table {
    border: 2px solid currentColor;
  }
  
  .companies-table th,
  .companies-table td {
    border: 1px solid currentColor;
  }
  
  .status-badge {
    border-width: 2px;
    font-weight: 700;
  }
  
  .actions-dropdown-btn {
    border-width: 2px;
  }
  
  .dropdown-menu {
    border-width: 2px;
  }
}

/* ========================================
   Dark Mode Support (Future Enhancement)
   ======================================== */
@media (prefers-color-scheme: dark) {
  /* Placeholder for dark mode styles */
  /* Can be implemented in future iterations */
}

/* ========================================
   Notification System
   ======================================== */

/* Notification Container */
#notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
  pointer-events: none;
}

/* Base Notification Styles */
.notification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
  pointer-events: auto;
  transform: translateX(calc(100% + 20px));
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  min-width: 300px;
  max-width: 400px;
  word-wrap: break-word;
}

/* Show state - slide in */
.notification.show {
  transform: translateX(0);
  opacity: 1;
}

/* Notification Message */
.notification-message {
  flex: 1;
  margin-right: 8px;
}

/* Close Button */
.notification-close {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
  opacity: 0.8;
}

.notification-close:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.2);
}

.notification-close:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Success Variant (Green) */
.notification-success {
  background-color: #27ae60;
  border-left: 4px solid #1e8449;
}

/* Error Variant (Red) */
.notification-error {
  background-color: #e74c3c;
  border-left: 4px solid #c0392b;
}

/* Info Variant (Blue) */
.notification-info {
  background-color: #3b82f6;
  border-left: 4px solid #2563eb;
}

/* Warning Variant (Orange) - Optional */
.notification-warning {
  background-color: #f39c12;
  border-left: 4px solid #d68910;
}

/* ========================================
   Notification Responsive Styles
   ======================================== */

/* Tablet and below */
@media (max-width: 768px) {
  #notification-container {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
  }
  
  .notification {
    min-width: auto;
    max-width: none;
    width: 100%;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .notification {
    padding: 12px 14px;
    font-size: 13px;
  }
  
  .notification-close {
    font-size: 20px;
    width: 20px;
    height: 20px;
  }
}

/* ========================================
   Notification Accessibility
   ======================================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .notification {
    transition: opacity 0.1s ease;
    transform: translateX(0);
  }
  
  .notification:not(.show) {
    opacity: 0;
  }
  
  .notification.show {
    opacity: 1;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .notification {
    border: 2px solid currentColor;
    box-shadow: none;
  }
  
  .notification-close {
    border: 1px solid currentColor;
  }
}

/* Dashboard Welcome Section with Company Info */
.dashboard-welcome-section {
  padding: 16px 0;
  margin-right: auto;
}

.welcome-title {
  font-size: 32px;
  font-weight: 700;
  color: #0E102B;
  margin: 0 0 12px 0;
  line-height: 1.2;
  font-family: 'DM Sans', sans-serif;
}

.company-contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 14px;
  color: #65666E;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #65666E;
  font-weight: 500;
}

.contact-item svg {
  color: #4220ED;
  flex-shrink: 0;
}

.breadcrumbs-with-contact {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: inherit;
}

/* Responsive design for welcome section */
@media only screen and (max-width: 1024px) {
  .welcome-title {
    font-size: 28px;
  }

  .company-contact-info {
    gap: 16px;
  }

  .contact-item {
    font-size: 13px;
  }
}

@media only screen and (max-width: 768px) {
  .welcome-title {
    font-size: 24px;
  }

  .company-contact-info {
    flex-direction: column;
    gap: 8px;
  }

  .contact-item {
    font-size: 12px;
  }

  .dashboard-welcome-section {
    padding: 12px 0;
  }
}
/* ============================================
   Enhanced Dashboard Styles
   ============================================ */

/* CSS Custom Properties */
:root {
    --dashboard-spacing-xs: 8px;
    --dashboard-spacing-sm: 12px;
    --dashboard-spacing-md: 16px;
    --dashboard-spacing-lg: 24px;
    --dashboard-spacing-xl: 32px;

    --dashboard-border-radius-sm: 8px;
    --dashboard-border-radius-md: 12px;
    --dashboard-border-radius-lg: 16px;

    /* Simplified color palette - use sparingly for status only */
    --dashboard-color-critical: #DC2626;
    --dashboard-color-warning: #F59E0B;
    --dashboard-color-info: #3B82F6;
    --dashboard-color-success: #10B981;

    /* Neutral colors for structure */
    --dashboard-border-color: #E5E7EB;
    --dashboard-bg-widget: #FFFFFF;
    --dashboard-bg-subtle: #F9FAFB;
    --dashboard-text-primary: #111827;
    --dashboard-text-secondary: #6B7280;
    --dashboard-text-tertiary: #9CA3AF;

    /* Refined shadows */
    --dashboard-shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
    --dashboard-shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
    --dashboard-shadow-hover: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);

    --dashboard-transition: all 0.2s ease;
}

/* ============================================
   Dashboard Enhanced Wrapper
   ============================================ */

.dashboard-enhanced {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--dashboard-spacing-lg);
    padding-bottom: var(--dashboard-spacing-md);
    border-bottom: 1px solid var(--dashboard-border-color);
}

.dashboard-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
    margin: 0;
}

.dashboard-filters {
    display: flex;
    align-items: center;
    gap: var(--dashboard-spacing-md);
}

.refresh-btn {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--dashboard-text-primary);
    color: #FFFFFF;
    border: none;
    border-radius: var(--dashboard-border-radius-sm);
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: var(--dashboard-transition);
}

.refresh-btn:hover {
    background-color: #374151;
    color: #FFFFFF !important;
    box-shadow: var(--dashboard-shadow-sm);
}

.refresh-btn.loading {
    opacity: 0.7;
    pointer-events: none;
    cursor: not-allowed;
}

.refresh-btn.loading svg {
    animation: spin 1s linear infinite;
}

.refresh-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Spinner element for loading state */
.refresh-btn .spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

.last-updated {
    font-size: 12px;
    color: var(--dashboard-text-secondary);
    font-weight: 500;
}

/* ============================================
   Dashboard Info Banner
   ============================================ */

.dashboard-info-banner {
    background-color: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: var(--dashboard-border-radius-md);
    padding: var(--dashboard-spacing-md) var(--dashboard-spacing-lg);
    margin-bottom: var(--dashboard-spacing-lg);
}

.dashboard-info-banner-content {
    display: flex;
    align-items: flex-start;
    gap: var(--dashboard-spacing-md);
}

.dashboard-info-banner-icon {
    flex-shrink: 0;
    color: var(--dashboard-color-info);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.dashboard-info-banner-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.6;
    color: var(--dashboard-text-secondary);
}

.dashboard-info-banner-text strong {
    font-weight: 600;
    color: var(--dashboard-text-primary);
}

.dashboard-info-link {
    color: var(--dashboard-color-info);
    text-decoration: underline;
    font-weight: 600;
    transition: var(--dashboard-transition);
}

.dashboard-info-link:hover {
    color: #2563EB;
    text-decoration: none;
}

.dashboard-info-link:focus {
    outline: 2px solid var(--dashboard-color-info);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Mobile responsiveness for info banner */
@media only screen and (max-width: 767px) {
    .dashboard-info-banner {
        padding: var(--dashboard-spacing-sm) var(--dashboard-spacing-md);
    }

    .dashboard-info-banner-content {
        gap: var(--dashboard-spacing-sm);
    }

    .dashboard-info-banner-icon {
        width: 20px;
        height: 20px;
    }

    .dashboard-info-banner-icon svg {
        width: 18px;
        height: 18px;
    }

    .dashboard-info-banner-text {
        font-size: 13px;
    }
}

/* ============================================
   Metrics Grid
   ============================================ */

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--dashboard-spacing-lg);
    margin-bottom: var(--dashboard-spacing-xl);
}

/* Tablet (768px - 1023px) - 3 columns */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .metrics-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--dashboard-spacing-md);
    }

    .metric-card {
        padding: 20px;
    }
}

/* Mobile (480px - 767px) - 2 columns */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--dashboard-spacing-sm);
    }

    .metric-card {
        padding: var(--dashboard-spacing-md);
    }
}

/* Small Mobile (< 480px) - 1 column */
@media only screen and (max-width: 479px) {
    .metrics-grid {
        grid-template-columns: 1fr;
        gap: var(--dashboard-spacing-sm);
    }

    .metric-card {
        padding: var(--dashboard-spacing-md);
    }
}

/* ============================================
   Customer View Metrics Grid (4 cards instead of 6)
   ============================================ */

.metrics-grid-customer {
    grid-template-columns: repeat(4, 1fr);
}

/* Tablet - 2 columns for customer view */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .metrics-grid-customer {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile - 2 columns for customer view */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .metrics-grid-customer {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small Mobile - 1 column for customer view */
@media only screen and (max-width: 479px) {
    .metrics-grid-customer {
        grid-template-columns: 1fr;
    }
}

/* Larger metric values for customer view */
.metrics-grid-customer .metric-value {
    font-size: 48px;
    font-weight: 700;
}

.metrics-grid-customer .metric-card {
    padding: 32px;
    min-height: 160px;
}

.metrics-grid-customer .metric-title {
    font-size: 15px;
    font-weight: 600;
}

/* ============================================
   Metric Cards
   ============================================ */

.metric-card {
    position: relative;
    padding: 24px;
    background-color: var(--dashboard-bg-widget);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-md);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-spacing-md);
    transition: var(--dashboard-transition);
    overflow: hidden;
    min-height: 140px;
}

.metric-card:hover {
    border-color: var(--dashboard-text-secondary);
    box-shadow: var(--dashboard-shadow-hover);
    transform: translateY(-2px);
}

/* Only use color for critical status indicators */
.metric-card-red .metric-value {
    color: var(--dashboard-color-critical);
}

.metric-card-yellow .metric-value {
    color: var(--dashboard-color-warning);
}

.metric-card-orange .metric-value {
    color: var(--dashboard-color-warning);
}

.metric-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dashboard-spacing-xs);
}

.metric-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.metric-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--dashboard-text-secondary);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-subtitle {
    font-size: 11px;
    font-weight: 400;
    color: var(--dashboard-text-tertiary);
    line-height: 1.3;
}

.metric-change {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.metric-change.up {
    color: var(--dashboard-color-success);
    background-color: #F0FDF4;
}

.metric-change.down {
    color: var(--dashboard-color-critical);
    background-color: #FEF2F2;
}

.metric-change.neutral {
    color: var(--dashboard-text-tertiary);
    background-color: var(--dashboard-bg-subtle);
}

.metric-value {
    font-size: 40px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
    line-height: 1.2;
    transition: opacity 150ms ease-out;
}

/* Fade transition for metric value updates */
.metric-value.updating {
    opacity: 0;
    transition: opacity 150ms ease-out;
}

.metric-value.updated {
    opacity: 1;
    transition: opacity 150ms ease-in;
}

/* Fade transition for metric change updates */
.metric-change.updating {
    opacity: 0;
    transition: opacity 150ms ease-out;
}

.metric-change.updated {
    opacity: 1;
    transition: opacity 150ms ease-in;
}

.metric-footer {
    font-size: 12px;
    color: var(--dashboard-text-tertiary);
}

.metric-comparison {
    opacity: 0.8;
}

/* ============================================
   Dashboard Grid Layout
   ============================================ */

.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    /* Desktop: 24px gap between columns */
}

.dashboard-column-left,
.dashboard-column-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Desktop: 24px gap between widgets */
}

/* Customer view - single column for cleaner layout */
.dashboard-grid-customer {
    grid-template-columns: 1fr;
    max-width: 1200px;
}

.dashboard-grid-customer .dashboard-column-left {
    gap: 32px;
}

.dashboard-grid-customer .dashboard-column-right {
    gap: 32px;
}

/* ============================================
   Widget Components
   ============================================ */

.widget {
    background-color: var(--dashboard-bg-widget);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-md);
    padding: 24px;
    box-shadow: var(--dashboard-shadow-sm);
    transition: var(--dashboard-transition);
    position: relative;
}

.widget:hover {
    box-shadow: var(--dashboard-shadow-hover);
}

.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--dashboard-spacing-md);
    padding-bottom: var(--dashboard-spacing-sm);
    border-bottom: 1px solid var(--dashboard-border-color);
    gap: var(--dashboard-spacing-sm);
}

.widget-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
    margin: 0;
    flex-shrink: 0;
}

.widget-controls {
    display: flex;
    align-items: center;
    gap: var(--dashboard-spacing-xs);
    flex-shrink: 0;
    /* Prevent controls from shrinking */
}

/* Widget header count badges and labels */
.alert-count,
.property-count,
.task-total,
.activity-count,
.hearing-count {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 6px;
    background-color: var(--dashboard-bg-subtle);
    color: var(--dashboard-text-secondary);
}

.widget-content {
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-spacing-sm);
}

.widget-empty {
    padding: var(--dashboard-spacing-xl);
    text-align: center;
    color: var(--dashboard-text-secondary);
    font-size: 14px;
}

.widget-empty svg {
    margin: 0 auto var(--dashboard-spacing-md);
    opacity: 0.3;
}

/* ============================================
   Trend Chart Widget
   ============================================ */

.trend-chart-widget {
    min-height: 400px;
}

.chart-container {
    position: relative;
    height: 350px;
    width: 100%;
    background-color: var(--dashboard-bg-subtle);
    border-radius: var(--dashboard-border-radius-sm);
    padding: var(--dashboard-spacing-sm);
}

.chart-canvas {
    max-height: 350px;
}

#trendChart {
    width: 100% !important;
    height: 350px !important;
}

/* Chart legend positioning and styling */
.trend-chart-widget .chart-container {
    padding-bottom: 20px;
    /* Add space for legend below chart */
}

/* Ensure legend has proper spacing */
.trend-chart-widget canvas {
    margin-bottom: 16px;
}

.time-period-filter {
    display: flex;
    align-items: center;
    gap: var(--dashboard-spacing-xs);
}

.time-period-filter label {
    font-size: 13px;
    font-weight: 500;
    color: var(--dashboard-text-secondary);
}

.time-period-filter select {
    padding: 8px 12px;
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-sm);
    font-size: 13px;
    color: var(--dashboard-text-primary);
    background-color: #FFFFFF;
    cursor: pointer;
    transition: var(--dashboard-transition);
}

.time-period-filter select:hover {
    border-color: var(--dashboard-text-secondary);
}

.time-period-filter select:focus {
    outline: none;
    border-color: var(--dashboard-color-info);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ============================================
   Priority Alerts Widget
   ============================================ */

.priority-alerts-widget .widget-content {
    gap: var(--dashboard-spacing-xs);
}

.alert-item {
    padding: var(--dashboard-spacing-sm);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-sm);
    background-color: #FFFFFF;
    transition: var(--dashboard-transition);
    cursor: pointer;
}

.alert-item:hover {
    box-shadow: var(--dashboard-shadow-sm);
    background-color: var(--dashboard-bg-subtle);
}

.alert-item.critical {
    border-left: 3px solid var(--dashboard-color-critical);
}

.alert-item.warning {
    border-left: 3px solid var(--dashboard-color-warning);
}

.alert-item.info {
    border-left: 3px solid var(--dashboard-color-info);
}

.alert-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--dashboard-spacing-xs);
    margin-bottom: 6px;
}

.alert-type {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.alert-item.critical .alert-type {
    color: var(--dashboard-color-critical);
}

.alert-item.warning .alert-type {
    color: var(--dashboard-color-warning);
}

.alert-item.info .alert-type {
    color: var(--dashboard-color-info);
}

.alert-date {
    font-size: 11px;
    color: var(--dashboard-text-tertiary);
    white-space: nowrap;
}

.alert-property {
    font-size: 14px;
    font-weight: 600;
    color: var(--dashboard-text-primary);
    margin-bottom: 4px;
}

.alert-description {
    font-size: 13px;
    color: var(--dashboard-text-secondary);
    line-height: 1.4;
}

.alert-action {
    margin-top: var(--dashboard-spacing-xs);
    padding: 6px 12px;
    background-color: transparent;
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--dashboard-text-primary);
    cursor: pointer;
    transition: var(--dashboard-transition);
    text-decoration: none;
    display: inline-block;
}

.alert-action:hover {
    background-color: var(--dashboard-text-primary);
    border-color: var(--dashboard-text-primary);
    color: #FFFFFF;
}

/* ============================================
   Property Performance Widget
   ============================================ */

.property-performance-widget .widget-content {
    gap: var(--dashboard-spacing-sm);
}

.property-card {
    padding: var(--dashboard-spacing-md);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-sm);
    background-color: #FFFFFF;
    transition: var(--dashboard-transition);
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--dashboard-spacing-sm);
}

.property-card:hover {
    box-shadow: var(--dashboard-shadow-hover);
    transform: translateY(-2px);
    background-color: var(--dashboard-bg-subtle);
}

/* Severity indicator - left border */
.property-card.property-severity-low {
    border-left: 4px solid var(--dashboard-color-success);
}

.property-card.property-severity-medium {
    border-left: 4px solid var(--dashboard-color-warning);
}

.property-card.property-severity-high {
    border-left: 4px solid var(--dashboard-color-critical);
}

/* Severity visual indicator element */
.property-severity-indicator {
    width: 4px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: var(--dashboard-border-radius-sm) 0 0 var(--dashboard-border-radius-sm);
}

.property-card.property-severity-low .property-severity-indicator {
    background-color: var(--dashboard-color-success);
}

.property-card.property-severity-medium .property-severity-indicator {
    background-color: var(--dashboard-color-warning);
}

.property-card.property-severity-high .property-severity-indicator {
    background-color: var(--dashboard-color-critical);
}

/* Property content wrapper */
.property-content {
    flex: 1;
    min-width: 0;
}

/* Property action arrow */
.property-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey, #595959);
    transition: var(--dashboard-transition);
}

.property-card:hover .property-action {
    color: var(--dashboard-color-info);
    transform: translateX(4px);
}

.property-address {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-dark-blue, #0E102B);
    margin-bottom: var(--dashboard-spacing-xs);
}

.property-metrics {
    display: flex;
    gap: var(--dashboard-spacing-md);
    flex-wrap: wrap;
}

.property-metric {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-grey, #595959);
}

.property-metric svg {
    flex-shrink: 0;
}

.property-metric-label {
    font-size: 11px;
    color: var(--color-grey, #595959);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.property-metric-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-dark-blue, #0E102B);
}

/* Color-code metric values based on severity */
.property-card.property-severity-high .property-metric {
    color: var(--dashboard-color-critical);
}

.property-card.property-severity-medium .property-metric {
    color: var(--dashboard-color-warning);
}

.property-card.property-severity-low .property-metric {
    color: var(--dashboard-color-success);
}

/* ============================================
   Task Summary Widget
   ============================================ */

.task-summary-widget .widget-content {
    gap: var(--dashboard-spacing-md);
}

.task-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dashboard-spacing-sm);
}

.task-stat {
    padding: var(--dashboard-spacing-md);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-sm);
    text-align: center;
    transition: var(--dashboard-transition);
    background-color: var(--dashboard-bg-subtle);
}

.task-stat:hover {
    box-shadow: var(--dashboard-shadow-sm);
}

.task-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
    margin-bottom: 4px;
}

.task-stat-label {
    font-size: 11px;
    color: var(--dashboard-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.task-stat.overdue {
    border-color: var(--dashboard-color-critical);
    background-color: #FEF2F2;
}

.task-stat.overdue .task-stat-value {
    color: var(--dashboard-color-critical);
}

.task-progress {
    margin-top: var(--dashboard-spacing-md);
}

.task-progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--dashboard-spacing-xs);
    font-size: 13px;
    color: var(--color-grey, #595959);
}

.task-progress-bar {
    height: 8px;
    background-color: #F3F4F6;
    border-radius: 4px;
    overflow: hidden;
}

.task-progress-fill {
    height: 100%;
    background-color: var(--dashboard-color-info);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.task-completion-time {
    margin-top: var(--dashboard-spacing-sm);
    padding: var(--dashboard-spacing-sm);
    background-color: var(--dashboard-bg-subtle);
    border-radius: var(--dashboard-border-radius-sm);
    font-size: 13px;
    color: var(--dashboard-text-secondary);
    text-align: center;
    border: 1px solid var(--dashboard-border-color);
}

.task-completion-time strong {
    color: var(--dashboard-text-primary);
    font-weight: 600;
}

/* ============================================
   Hearing Calendar Widget
   ============================================ */

.hearing-calendar-widget .widget-content {
    gap: var(--dashboard-spacing-xs);
}

.hearing-date-group {
    padding: var(--dashboard-spacing-sm);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-sm);
    background-color: #FFFFFF;
    transition: var(--dashboard-transition);
    cursor: pointer;
}

.hearing-date-group:hover {
    box-shadow: var(--dashboard-shadow-sm);
    background-color: var(--dashboard-bg-subtle);
}

.hearing-date-group.urgent-3 {
    border-left: 3px solid var(--dashboard-color-critical);
}

.hearing-date-group.urgent-7 {
    border-left: 3px solid var(--dashboard-color-warning);
}

.hearing-date-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dashboard-spacing-xs);
}

.hearing-date {
    font-size: 14px;
    font-weight: 600;
    color: var(--dashboard-text-primary);
}

.hearing-count-badge {
    padding: 4px 10px;
    background-color: var(--dashboard-bg-subtle);
    color: var(--dashboard-text-secondary);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.hearing-date-group.urgent-3 .hearing-count-badge {
    background-color: var(--dashboard-color-critical);
}

.hearing-date-group.urgent-7 .hearing-count-badge {
    background-color: var(--dashboard-color-warning);
}

/* ============================================
   Recent Activity Widget
   ============================================ */

.recent-activity-widget .widget-content {
    gap: 0;
}

.activity-item {
    padding: var(--dashboard-spacing-sm);
    border-bottom: 1px solid var(--dashboard-border-color);
    display: flex;
    gap: var(--dashboard-spacing-sm);
    align-items: flex-start;
    transition: var(--dashboard-transition);
    cursor: pointer;
    text-decoration: none;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-item:hover {
    background-color: var(--dashboard-bg-subtle);
}

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    background-color: var(--dashboard-bg-subtle);
    color: var(--dashboard-text-secondary);
}

.activity-icon.violation {
    background-color: #FEF2F2;
    color: var(--dashboard-color-critical);
}

.activity-icon.complaint {
    background-color: #FFFBEB;
    color: var(--dashboard-color-warning);
}

.activity-icon.hearing {
    background-color: #EFF6FF;
    color: var(--dashboard-color-info);
}

.activity-icon.task {
    background-color: #F0FDF4;
    color: var(--dashboard-color-success);
}

.activity-details {
    flex: 1;
    min-width: 0;
}

.activity-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dashboard-text-primary);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-property {
    font-size: 13px;
    color: var(--dashboard-text-secondary);
    margin-bottom: 2px;
}

.activity-timestamp {
    font-size: 11px;
    color: var(--dashboard-text-tertiary);
}

/* ============================================
   Financial Impact Widget
   ============================================ */

.financial-impact-widget .widget-content {
    gap: var(--dashboard-spacing-md);
}

.financial-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--dashboard-spacing-sm);
}

.financial-total {
    padding: var(--dashboard-spacing-lg);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-sm);
    text-align: center;
    transition: var(--dashboard-transition);
    background-color: var(--dashboard-bg-subtle);
}

.financial-total:hover {
    box-shadow: var(--dashboard-shadow-sm);
}

.financial-label {
    display: block;
    font-size: 12px;
    color: var(--dashboard-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-weight: 600;
}

.financial-amount {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
}

.financial-total.balance-due-high {
    border-color: var(--dashboard-color-critical);
    background-color: #FEF2F2;
}

.financial-total.balance-due-high .financial-amount {
    color: var(--dashboard-color-critical);
}

.financial-stat {
    padding: var(--dashboard-spacing-sm);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-sm);
    text-align: center;
}

.financial-stat-label {
    font-size: 11px;
    color: var(--color-grey, #595959);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.financial-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-dark-blue, #0E102B);
}

.financial-stat.balance-due {
    border-color: var(--dashboard-color-critical);
    background-color: rgba(255, 46, 46, 0.05);
}

.financial-stat.balance-due .financial-stat-value {
    color: var(--dashboard-color-critical);
}

.financial-breakdown {
    margin-top: var(--dashboard-spacing-md);
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dashboard-spacing-sm);
    background-color: var(--dashboard-bg-subtle);
    border-radius: var(--dashboard-border-radius-sm);
    margin-bottom: var(--dashboard-spacing-xs);
    transition: var(--dashboard-transition);
}

.breakdown-item:hover {
    background-color: #F3F4F6;
}

.breakdown-label {
    font-size: 13px;
    color: var(--dashboard-text-secondary);
    font-weight: 500;
}

.breakdown-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
}

.breakdown-value.success {
    color: var(--dashboard-color-success);
}

.breakdown-by-type {
    margin-top: var(--dashboard-spacing-md);
}

.breakdown-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dashboard-text-primary);
    margin-bottom: var(--dashboard-spacing-sm);
}

.breakdown-list {
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-spacing-sm);
}

.breakdown-type-item {
    padding: var(--dashboard-spacing-sm);
    background-color: var(--dashboard-bg-subtle);
    border-radius: var(--dashboard-border-radius-sm);
    transition: var(--dashboard-transition);
}

.breakdown-type-item:hover {
    background-color: #F3F4F6;
}

.breakdown-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--dashboard-spacing-xs);
}

.breakdown-type-label {
    font-size: 13px;
    color: var(--dashboard-text-secondary);
    font-weight: 500;
}

.breakdown-type-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
}

.breakdown-type-bar {
    height: 6px;
    background-color: #E5E7EB;
    border-radius: 3px;
    overflow: hidden;
}

.breakdown-type-fill {
    height: 100%;
    background-color: var(--dashboard-color-info);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.financial-breakdown-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-dark-blue, #0E102B);
    margin-bottom: var(--dashboard-spacing-xs);
}

.financial-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-spacing-xs);
}

.financial-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dashboard-spacing-xs);
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.03) 0%, #F9FAFB 100%);
    border-radius: var(--dashboard-border-radius-sm);
    font-size: 13px;
    border-left: 2px solid rgba(99, 102, 241, 0.1);
    transition: var(--dashboard-transition);
}

.financial-breakdown-item:hover {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.06) 0%, #F3F4F6 100%);
    border-left-color: #6366F1;
}

.financial-breakdown-label {
    color: var(--color-grey, #595959);
}

.financial-breakdown-value {
    font-weight: 600;
    color: var(--color-dark-blue, #0E102B);
}

.largest-outstanding {
    margin-top: var(--dashboard-spacing-md);
}

.largest-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-dark-blue, #0E102B);
    margin-bottom: var(--dashboard-spacing-sm);
}

.largest-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dashboard-spacing-md);
    background-color: #FEF2F2;
    border: 1px solid var(--dashboard-color-critical);
    border-radius: var(--dashboard-border-radius-sm);
    text-decoration: none;
    transition: var(--dashboard-transition);
}

.largest-item:hover {
    box-shadow: var(--dashboard-shadow-hover);
    transform: translateY(-2px);
}

.largest-content {
    flex: 1;
    min-width: 0;
}

.largest-property {
    font-size: 14px;
    font-weight: 600;
    color: var(--dashboard-text-primary);
    margin: 0 0 4px 0;
}

.largest-reference {
    font-size: 12px;
    color: var(--dashboard-text-secondary);
    margin: 0;
}

.largest-amount {
    flex-shrink: 0;
    margin-left: var(--dashboard-spacing-md);
}

.largest-amount span {
    font-size: 28px;
    font-weight: 700;
    color: var(--dashboard-color-critical);
}

.financial-largest {
    margin-top: var(--dashboard-spacing-md);
    padding: var(--dashboard-spacing-md);
    background-color: #FEF2F2;
    border: 1px solid var(--dashboard-color-critical);
    border-radius: var(--dashboard-border-radius-sm);
}

.financial-largest-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--dashboard-color-critical);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--dashboard-spacing-xs);
}

.financial-largest-amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--dashboard-color-critical);
    margin-bottom: 4px;
}

.financial-largest-property {
    font-size: 13px;
    color: var(--dashboard-text-secondary);
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

/* Tablet (768px - 1023px) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }

    .financial-summary {
        grid-template-columns: 1fr;
    }

    .task-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile (320px - 767px) */
@media only screen and (max-width: 767px) {
    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
        /* Changed from flex-start to stretch for full width */
        gap: var(--dashboard-spacing-md);
    }

    .dashboard-title {
        text-align: left;
        width: 100%;
    }

    .dashboard-filters {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: var(--dashboard-spacing-sm);
    }

    .time-period-filter {
        width: 100%;
    }

    .time-period-filter select {
        width: 100%;
    }

    .refresh-btn {
        width: 100%;
        justify-content: center;
        order: 2;
        /* Ensure refresh button comes after filters */
    }

    .last-updated {
        text-align: center;
        width: 100%;
        order: 3;
        /* Ensure timestamp comes last */
    }

    .metric-value {
        font-size: 32px;
    }

    .metric-title {
        font-size: 14px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        /* Mobile: 16px gap between widgets when stacked */
    }

    .dashboard-column-left,
    .dashboard-column-right {
        gap: 16px;
        /* Mobile: 16px gap between widgets in columns */
    }

    .widget {
        padding: 16px;
        /* Mobile: 16px padding */
    }

    .widget-title {
        font-size: 16px;
    }

    .chart-container {
        height: 250px;
    }

    .chart-canvas {
        max-height: 250px;
    }

    #trendChart {
        height: 250px !important;
    }

    .trend-chart-widget {
        min-height: 300px;
    }

    .financial-summary {
        grid-template-columns: 1fr;
    }

    .task-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .property-metrics {
        flex-direction: column;
        gap: var(--dashboard-spacing-xs);
    }
}

/* Extra small mobile (320px - 479px) */
@media only screen and (max-width: 479px) {
    .dashboard-title {
        font-size: 20px;
    }

    .metric-value {
        font-size: 28px;
    }
}

/* Desktop (1024px+) */
@media only screen and (min-width: 1024px) {
    .dashboard-enhanced {
        padding: 0;
    }

    .dashboard-grid {
        grid-template-columns: 2fr 1fr;
    }
}

/* Large desktop (1440px+) */
@media only screen and (min-width: 1440px) {
    .dashboard-enhanced {
        max-width: 1400px;
    }
}

/* ============================================
   Mobile-Specific Optimizations
   ============================================ */

/* Prevent text size adjustment on orientation change */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Handle device orientation changes smoothly */
@media screen and (orientation: portrait) {
    .dashboard-enhanced {
        transition: all 0.3s ease-in-out;
    }

    .chart-container,
    .chart-canvas,
    #trendChart {
        transition: height 0.3s ease-in-out;
    }
}

@media screen and (orientation: landscape) {
    .dashboard-enhanced {
        transition: all 0.3s ease-in-out;
    }

    .chart-container,
    .chart-canvas,
    #trendChart {
        transition: height 0.3s ease-in-out;
    }
}

/* Ensure layout updates quickly on orientation change */
@media only screen and (max-width: 767px) {
    /* Portrait orientation optimizations */
    @media (orientation: portrait) {
        .dashboard-grid {
            grid-template-columns: 1fr;
        }

        .metrics-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* Landscape orientation optimizations */
    @media (orientation: landscape) {
        .metrics-grid {
            grid-template-columns: repeat(3, 1fr);
        }

        .dashboard-grid {
            grid-template-columns: 1fr;
        }
    }
}

/* Optimize tap highlighting */
* {
    -webkit-tap-highlight-color: rgba(66, 32, 237, 0.1);
    -moz-tap-highlight-color: rgba(66, 32, 237, 0.1);
}

/* Improve touch scrolling on iOS */
.dashboard-enhanced,
.widget-content,
.activity-feed-list {
    -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal overflow on mobile */
.dashboard-enhanced {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}

/* Ensure all child elements respect container width */
.dashboard-enhanced * {
    max-width: 100%;
}

/* Prevent specific widgets from causing overflow */
.widget,
.metric-card,
.dashboard-header,
.metrics-grid,
.dashboard-grid,
.dashboard-column-left,
.dashboard-column-right {
    overflow-x: hidden;
}

/* Ensure tables and wide content wrap properly */
.widget-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Prevent text overflow */
.activity-title,
.alert-property,
.property-address,
.largest-property {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Ensure touch targets are large enough for mobile accessibility (44px minimum) */
button:not(.toggle-switch),
a.metric-card,
a.property-card,
a.alert-item,
a.activity-item,
a.hearing-date-group,
a.largest-item,
select,
input[type="button"],
input[type="submit"],
.refresh-btn,
.alert-action,
.chart-retry-btn {
    min-height: 44px;
    min-width: 44px;
}

/* Ensure adequate padding for touch targets on mobile */
@media only screen and (max-width: 767px) {
    .refresh-btn {
        padding: 12px 16px;
        min-height: 48px;
        /* Slightly larger on mobile */
    }

    .time-period-filter select {
        padding: 12px 16px;
        min-height: 48px;
    }

    .alert-action {
        padding: 10px 16px;
        min-height: 44px;
    }

    .metric-card {
        min-height: 140px;
        /* Ensure adequate touch area */
        padding: 20px;
    }

    .property-card,
    .alert-item,
    .hearing-date-group {
        padding: 16px;
        min-height: 60px;
    }

    .activity-item {
        padding: 14px 12px;
        min-height: 56px;
    }

    /* Ensure links within widgets have adequate touch targets */
    .dashboard-info-link {
        padding: 4px 8px;
        margin: -4px -8px;
        display: inline-block;
        min-height: 44px;
        line-height: 36px;
    }

    /* Ensure task stat cards have adequate touch area */
    .task-stat {
        min-height: 100px;
        padding: 16px;
    }

    /* Ensure financial stat cards have adequate touch area */
    .financial-total,
    .financial-stat {
        min-height: 110px;
        padding: 18px;
    }
}

/* Optimize font rendering on mobile */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================
   Browser Compatibility Enhancements
   ============================================ */

/* Smooth scrolling with vendor prefixes */
html {
    scroll-behavior: smooth;
    -webkit-scroll-behavior: smooth;
    -moz-scroll-behavior: smooth;
    -ms-scroll-behavior: smooth;
}

/* Flexbox gap fallback for older browsers */
@supports not (gap: 1rem) {
    .dashboard-filters>*+* {
        margin-left: var(--dashboard-spacing-md);
    }

    .metrics-grid>* {
        margin-bottom: var(--dashboard-spacing-lg);
    }
}

/* ============================================
   Animations and Transitions
   ============================================ */

/* Fade in animation for data updates */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
        -webkit-transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(10px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.4s ease-out;
}

/* Pulse animation for loading states */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@-webkit-keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Chart skeleton loader overlay */
.chart-skeleton-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            #f0f0f0 25%,
            #e0e0e0 50%,
            #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
    border-radius: var(--dashboard-border-radius-sm);
    z-index: 10;
    display: none;
}

.trend-chart-widget.loading .chart-skeleton-loader {
    display: block;
}

/* Chart error message */
.chart-error-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: var(--dashboard-spacing-lg);
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-sm);
    box-shadow: var(--dashboard-shadow-md);
    z-index: 20;
    max-width: 90%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.chart-error-message.visible {
    opacity: 1;
    visibility: visible;
}

.chart-error-message p {
    margin: 0 0 var(--dashboard-spacing-md) 0;
    color: var(--dashboard-color-critical);
    font-weight: 600;
    font-size: 14px;
}

.chart-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: var(--dashboard-text-primary);
    color: white;
    border: none;
    border-radius: var(--dashboard-border-radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--dashboard-transition);
}

.chart-retry-btn:hover {
    background-color: var(--dashboard-color-info);
    box-shadow: var(--dashboard-shadow-sm);
}

.chart-retry-btn:active {
    transform: translateY(0);
}

/* Smooth transitions for all interactive elements */
.metric-card,
.alert-item,
.property-card,
.hearing-date-group,
.activity-item,
.task-stat {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover lift effect */
.metric-card:hover,
.property-card:hover {
    transform: translateY(-4px);
}

/* Loading spinner */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

/* Slide in from right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-right {
    animation: slideInRight 0.4s ease-out;
}

/* Scale in animation */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.scale-in {
    animation: scaleIn 0.3s ease-out;
}

/* Stagger animation for list items */
.stagger-item {
    animation: fadeIn 0.4s ease-out backwards;
}

.stagger-item:nth-child(1) {
    animation-delay: 0.05s;
}

.stagger-item:nth-child(2) {
    animation-delay: 0.1s;
}

.stagger-item:nth-child(3) {
    animation-delay: 0.15s;
}

.stagger-item:nth-child(4) {
    animation-delay: 0.2s;
}

.stagger-item:nth-child(5) {
    animation-delay: 0.25s;
}

/* ============================================
   Accessibility Enhancements
   ============================================ */

/* Screen Reader Only Content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus visible styles for keyboard navigation */
.metric-card:focus-visible,
.alert-item:focus-visible,
.property-card:focus-visible,
.hearing-date-group:focus-visible,
.hearing-item:focus-visible,
.activity-item:focus-visible,
.task-status-item:focus-visible,
.hearing-date-item:focus-visible,
.largest-item:focus-visible,
.refresh-btn:focus-visible,
.period-filter:focus-visible,
.period-select:focus-visible,
.chart-retry-btn:focus-visible,
.dashboard-info-link:focus-visible,
.alert-action:focus-visible,
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 3px solid var(--dashboard-color-info);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(66, 32, 237, 0.1);
}

/* Remove default focus outline for mouse users */
.metric-card:focus:not(:focus-visible),
.alert-item:focus:not(:focus-visible),
.property-card:focus:not(:focus-visible),
.hearing-date-group:focus:not(:focus-visible),
.hearing-item:focus:not(:focus-visible),
.activity-item:focus:not(:focus-visible),
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}

/* Ensure all interactive elements are keyboard accessible */
.metric-card,
.alert-item,
.property-card,
.hearing-date-item,
.activity-item,
.task-status-item,
.largest-item {
    position: relative;
}

/* Skip to content link for keyboard navigation */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-dark-main, #0B0D23);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    z-index: 10000;
    font-weight: 600;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid var(--dashboard-color-info);
    outline-offset: 2px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Disable specific animations */
    .refresh-btn.loading svg,
    .loading-spinner,
    .chart-skeleton-loader,
    .skeleton {
        animation: none !important;
    }

    /* Disable transform transitions */
    .metric-card:hover,
    .property-card:hover,
    .alert-item:hover,
    .activity-item:hover,
    .hearing-item:hover {
        transform: none !important;
    }

    /* Keep opacity transitions but make them instant */
    .metric-value.updating,
    .metric-value.updated,
    .metric-change.updating,
    .metric-change.updated,
    .activity-time.updating,
    .activity-time.updated {
        transition: opacity 0.01ms !important;
    }

    /* Disable fade animations */
    .fade-in,
    .slide-in-right,
    .scale-in,
    .stagger-item {
        animation: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {

    .metric-card,
    .widget,
    .alert-item,
    .property-card {
        border-width: 2px;
    }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {

    .dashboard-filters,
    .refresh-btn,
    .alert-action,
    .widget-empty {
        display: none;
    }

    .dashboard-enhanced {
        max-width: 100%;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .metric-card,
    .widget {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ============================================
   Utility Classes
   ============================================ */

.text-critical {
    color: var(--dashboard-color-critical);
}

.text-warning {
    color: var(--dashboard-color-warning);
}

.text-success {
    color: var(--dashboard-color-success);
}

.text-info {
    color: var(--dashboard-color-info);
}

.bg-critical {
    background-color: rgba(255, 46, 46, 0.1);
}

.bg-warning {
    background-color: rgba(238, 200, 68, 0.1);
}

.bg-success {
    background-color: rgba(16, 185, 129, 0.1);
}

.bg-info {
    background-color: rgba(66, 32, 237, 0.1);
}

/* ============================================
   Dashboard Info Banner
   ============================================ */

.dashboard-info-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: #EEF2FF;
    border: 1px solid #C7D2FE;
    border-radius: var(--dashboard-border-radius-sm);
    margin-bottom: var(--dashboard-spacing-lg);
    color: #4338CA;
    font-size: 14px;
    line-height: 1.5;
}

.dashboard-info-banner svg {
    flex-shrink: 0;
    color: #6366F1;
}

.dashboard-info-banner strong {
    font-weight: 600;
}

.dashboard-info-link {
    color: #4338CA;
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s ease;
}

.dashboard-info-link:hover {
    color: #3730A3;
}

/* ============================================
   Activity Timestamp Transitions
   ============================================ */

.activity-time {
    transition: opacity 150ms ease-in-out;
}

/* Smooth fade transition when timestamp updates */
.activity-time.updating {
    opacity: 0.5;
}

.activity-time.updated {
    opacity: 1;
}

/* Ensure timestamp doesn't flicker during updates */
.activity-meta {
    min-height: 20px;
}


/* ============================================
   Enhanced Recent Activity Widget
   ============================================ */

.recent-activity-widget .widget-content {
    padding: 0;
}

.activity-list {
    display: flex;
    flex-direction: column;
}

.activity-item {
    padding: var(--dashboard-spacing-md);
    border-bottom: 1px solid var(--dashboard-border-color);
    display: flex;
    gap: var(--dashboard-spacing-sm);
    align-items: flex-start;
    transition: var(--dashboard-transition);
    cursor: pointer;
    text-decoration: none;
    position: relative;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-item:hover {
    background-color: #F9FAFB;
}

/* Activity severity indicators */
.activity-item.activity-severity-critical {
    border-left: 3px solid var(--dashboard-color-critical);
}

.activity-item.activity-severity-warning {
    border-left: 3px solid var(--dashboard-color-warning);
}

.activity-item.activity-severity-info {
    border-left: 3px solid var(--dashboard-color-info);
}

.activity-item.activity-severity-success {
    border-left: 3px solid var(--dashboard-color-success);
}

/* Activity icons */
.activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon.activity-type-dob_violation,
.activity-icon.activity-type-hm_violation,
.activity-icon.activity-type-dob_ecb_violation {
    background-color: rgba(255, 46, 46, 0.1);
    color: var(--dashboard-color-critical);
}

.activity-icon.activity-type-dob_complaint,
.activity-icon.activity-type-city_complaint {
    background-color: rgba(238, 200, 68, 0.1);
    color: var(--dashboard-color-warning);
}

.activity-icon.activity-type-oath_hearing {
    background-color: rgba(66, 32, 237, 0.1);
    color: var(--dashboard-color-info);
}

.activity-icon.activity-type-task_completed,
.activity-icon.activity-type-task_assigned {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--dashboard-color-success);
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--dashboard-spacing-xs);
    margin-bottom: 4px;
}

.activity-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark-blue, #0E102B);
    flex: 1;
}

.activity-time {
    font-size: 11px;
    color: var(--color-grey, #595959);
    white-space: nowrap;
    flex-shrink: 0;
}

.activity-property {
    font-size: 13px;
    color: var(--color-grey, #595959);
    margin-bottom: 2px;
}

.activity-description {
    font-size: 13px;
    color: var(--color-grey, #595959);
    line-height: 1.4;
}

.activity-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey, #595959);
    transition: var(--dashboard-transition);
    margin-top: 8px;
}

.activity-item:hover .activity-action {
    color: var(--dashboard-color-info);
    transform: translateX(4px);
}

/* ============================================
   Enhanced Priority Alerts Widget
   ============================================ */

.priority-alerts-widget .widget-content {
    padding: 0;
}

.alert-list {
    display: flex;
    flex-direction: column;
}

.alert-item {
    padding: var(--dashboard-spacing-md);
    border-bottom: 1px solid var(--dashboard-border-color);
    display: flex;
    gap: var(--dashboard-spacing-sm);
    align-items: flex-start;
    transition: var(--dashboard-transition);
    cursor: pointer;
    text-decoration: none;
    position: relative;
}

.alert-item:last-child {
    border-bottom: none;
}

.alert-item:hover {
    background-color: #F9FAFB;
}

/* Alert severity borders */
.alert-item.alert-severity-critical {
    border-left: 3px solid var(--dashboard-color-critical);
    background-color: rgba(255, 46, 46, 0.02);
}

.alert-item.alert-severity-warning {
    border-left: 3px solid var(--dashboard-color-warning);
    background-color: rgba(238, 200, 68, 0.02);
}

.alert-item.alert-severity-info {
    border-left: 3px solid var(--dashboard-color-info);
    background-color: rgba(66, 32, 237, 0.02);
}

/* Alert icons */
.alert-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alert-icon.alert-icon-critical {
    background-color: rgba(255, 46, 46, 0.1);
    color: var(--dashboard-color-critical);
}

.alert-icon.alert-icon-warning {
    background-color: rgba(238, 200, 68, 0.1);
    color: var(--dashboard-color-warning);
}

.alert-icon.alert-icon-info {
    background-color: rgba(66, 32, 237, 0.1);
    color: var(--dashboard-color-info);
}

.alert-content {
    flex: 1;
    min-width: 0;
}

.alert-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--dashboard-spacing-xs);
    margin-bottom: 6px;
}

.alert-type {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.alert-item.alert-severity-critical .alert-type {
    color: var(--dashboard-color-critical);
}

.alert-item.alert-severity-warning .alert-type {
    color: var(--dashboard-color-warning);
}

.alert-item.alert-severity-info .alert-type {
    color: var(--dashboard-color-info);
}

.alert-date {
    font-size: 11px;
    color: var(--color-grey, #595959);
    white-space: nowrap;
}

.alert-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark-blue, #0E102B);
    margin-bottom: 4px;
}

.alert-property {
    font-size: 13px;
    color: var(--color-grey, #595959);
}

.alert-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey, #595959);
    transition: var(--dashboard-transition);
    margin-top: 8px;
}

.alert-item:hover .alert-action {
    color: var(--dashboard-color-info);
    transform: translateX(4px);
}

/* ============================================
   Enhanced Upcoming Hearings Widget
   ============================================ */

.hearing-calendar-widget .widget-content {
    padding: 0;
}

.hearing-list {
    display: flex;
    flex-direction: column;
}

.hearing-item {
    padding: var(--dashboard-spacing-md);
    border-bottom: 1px solid var(--dashboard-border-color);
    display: flex;
    gap: var(--dashboard-spacing-md);
    align-items: center;
    transition: var(--dashboard-transition);
    cursor: pointer;
    text-decoration: none;
    position: relative;
}

.hearing-item:last-child {
    border-bottom: none;
}

.hearing-item:hover {
    background-color: #F9FAFB;
}

/* Enhanced hover for customer view */
.dashboard-grid-customer .hearing-item:hover {
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.05) 0%, #F9FAFB 100%);
    transform: translateX(2px);
}

/* Hearing urgency borders */
.hearing-item.hearing-urgency-critical {
    border-left: 3px solid var(--dashboard-color-critical);
    background-color: rgba(255, 46, 46, 0.02);
}

.hearing-item.hearing-urgency-warning {
    border-left: 3px solid var(--dashboard-color-warning);
    background-color: rgba(238, 200, 68, 0.02);
}

/* Hearing date badge */
.hearing-date-badge {
    width: 56px;
    height: 56px;
    border-radius: var(--dashboard-border-radius-sm);
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    color: var(--color-white, #FFF);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0px 2px 8px 0px rgba(99, 102, 241, 0.3);
}

.hearing-item.hearing-urgency-critical .hearing-date-badge {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    box-shadow: 0px 2px 8px 0px rgba(239, 68, 68, 0.3);
}

.hearing-item.hearing-urgency-warning .hearing-date-badge {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0px 2px 8px 0px rgba(245, 158, 11, 0.3);
}

.hearing-day {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.hearing-month {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.hearing-content {
    flex: 1;
    min-width: 0;
}

.hearing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--dashboard-spacing-xs);
    margin-bottom: 4px;
}

.hearing-date-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark-blue, #0E102B);
}

.urgency-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.urgency-badge.urgency-critical {
    background-color: rgba(255, 46, 46, 0.1);
    color: var(--dashboard-color-critical);
}

.urgency-badge.urgency-warning {
    background-color: rgba(238, 200, 68, 0.1);
    color: var(--dashboard-color-warning);
}

.hearing-count-label {
    font-size: 13px;
    color: var(--color-grey, #595959);
}

.hearing-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey, #595959);
    transition: var(--dashboard-transition);
}

.hearing-item:hover .hearing-action {
    color: var(--dashboard-color-info);
    transform: translateX(4px);
}

/* ============================================
   Enhanced Task Summary Widget
   ============================================ */

.task-summary-widget .overdue-alert {
    display: flex;
    align-items: center;
    gap: var(--dashboard-spacing-xs);
    padding: var(--dashboard-spacing-sm) var(--dashboard-spacing-md);
    background-color: rgba(255, 46, 46, 0.05);
    border: 1px solid rgba(255, 46, 46, 0.2);
    border-radius: var(--dashboard-border-radius-sm);
    margin-bottom: var(--dashboard-spacing-md);
    color: var(--dashboard-color-critical);
    text-decoration: none;
    transition: var(--dashboard-transition);
}

.task-summary-widget .overdue-alert:hover {
    background-color: rgba(255, 46, 46, 0.1);
    border-color: var(--dashboard-color-critical);
}

.task-summary-widget .overdue-alert svg {
    flex-shrink: 0;
}

.task-progress-bar {
    display: flex;
    height: 8px;
    background-color: #F3F4F6;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--dashboard-spacing-md);
}

.progress-segment {
    height: 100%;
    transition: width 0.5s ease;
}

.progress-segment.progress-pending {
    background-color: #9CA3AF;
}

.progress-segment.progress-in-progress {
    background-color: var(--dashboard-color-info);
}

.progress-segment.progress-resolved {
    background-color: var(--dashboard-color-success);
}

.progress-segment.progress-cancelled {
    background-color: #6B7280;
}

.task-status-list {
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-spacing-xs);
}

.task-status-item {
    display: flex;
    align-items: center;
    gap: var(--dashboard-spacing-sm);
    padding: var(--dashboard-spacing-sm);
    border-radius: var(--dashboard-border-radius-sm);
    text-decoration: none;
    transition: var(--dashboard-transition);
}

.task-status-item:hover {
    background-color: #F9FAFB;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-indicator.status-pending {
    background-color: #9CA3AF;
}

.status-indicator.status-in-progress {
    background-color: var(--dashboard-color-info);
}

.status-indicator.status-resolved {
    background-color: var(--dashboard-color-success);
}

.status-indicator.status-cancelled {
    background-color: #6B7280;
}

.status-label {
    flex: 1;
    font-size: 13px;
    color: var(--color-grey, #595959);
}

.status-count {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-dark-blue, #0E102B);
}

.task-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dashboard-spacing-md);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, #F9FAFB 100%);
    border-radius: var(--dashboard-border-radius-sm);
    margin-top: var(--dashboard-spacing-md);
    border-left: 3px solid rgba(59, 130, 246, 0.3);
    transition: var(--dashboard-transition);
}

.task-metric:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, #F3F4F6 100%);
    border-left-color: #3B82F6;
}

.metric-label {
    font-size: 13px;
    color: var(--color-grey, #595959);
    font-weight: 500;
}

.metric-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-dark-blue, #0E102B);
}

/* ============================================
   Mobile Responsiveness for Enhanced Widgets
   ============================================ */

@media only screen and (max-width: 767px) {

    .activity-item,
    .alert-item,
    .hearing-item {
        padding: var(--dashboard-spacing-sm);
    }

    .activity-icon,
    .alert-icon {
        width: 32px;
        height: 32px;
    }

    .hearing-date-badge {
        width: 48px;
        height: 48px;
    }

    .hearing-day {
        font-size: 18px;
    }

    .activity-header,
    .alert-header,
    .hearing-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .activity-time,
    .alert-date {
        margin-top: 2px;
    }
}
/* Dashboard Loading States and Animations */

/* Spinner Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Spinner Component */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.spinner-dark {
  border-color: rgba(0, 0, 0, 0.1);
  border-top-color: #4220ED;
}

/* Loading State for Refresh Button */
.refresh-btn.loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

.refresh-btn .spinner {
  margin-right: 8px;
}

/* Loading State for Widgets */
.widget-loading {
  position: relative;
  pointer-events: none;
}

.widget-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  z-index: 10;
}

/* Loading State for Trend Chart */
.trend-chart-widget.loading {
  position: relative;
}

.trend-chart-widget.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid rgba(66, 32, 237, 0.1);
  border-top-color: #4220ED;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 100;
}

.trend-chart-widget.loading canvas {
  opacity: 0.3;
}

/* Skeleton Loaders */
.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 0%,
    #f8f8f8 50%,
    #f0f0f0 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
  border-radius: 4px;
}

.skeleton-metric-card {
  height: 120px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.skeleton-widget {
  height: 300px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.skeleton-chart {
  height: 400px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.skeleton-text.title {
  height: 24px;
  width: 60%;
  margin-bottom: 16px;
}

.skeleton-text.short {
  width: 40%;
}

.skeleton-text.medium {
  width: 60%;
}

.skeleton-text.long {
  width: 80%;
}

/* Metric Card Loading State */
.metric-card.loading {
  position: relative;
  overflow: hidden;
}

.metric-card.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer 1.5s infinite;
}

/* Smooth Transitions for Data Updates */
.metric-value,
.metric-change,
.activity-item,
.alert-item,
.property-card {
  transition: all 0.3s ease;
}

.metric-value.updating {
  opacity: 0.5;
  transform: scale(0.98);
}

.metric-value.updated {
  animation: fadeIn 0.3s ease;
}

/* Activity Feed Loading */
.activity-feed-list.loading {
  position: relative;
  min-height: 200px;
}

.activity-feed-list.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border: 3px solid rgba(66, 32, 237, 0.1);
  border-top-color: #4220ED;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.activity-feed-list.loading .activity-item {
  opacity: 0.3;
}

/* Dashboard Notification Styles */
.dashboard-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  font-weight: 500;
  z-index: 9999;
  opacity: 0;
  transform: translateX(400px);
  transition: all 0.3s ease;
  max-width: 400px;
}

.dashboard-notification.show {
  opacity: 1;
  transform: translateX(0);
}

.dashboard-notification-success {
  background: #d1fae5;
  color: #065f46;
  border-left: 4px solid #10b981;
}

.dashboard-notification-error {
  background: #fee2e2;
  color: #991b1b;
  border-left: 4px solid #ef4444;
}

.dashboard-notification-info {
  background: #dbeafe;
  color: #1e40af;
  border-left: 4px solid #3b82f6;
}

/* Fade In Animation for Initial Load */
.dashboard-enhanced {
  animation: fadeIn 0.5s ease;
}

.metrics-grid {
  animation: slideUp 0.6s ease;
}

.dashboard-grid {
  animation: slideUp 0.7s ease;
}

/* Stagger Animation for Metric Cards */
.metric-card {
  animation: slideUp 0.5s ease;
  animation-fill-mode: both;
}

.metric-card:nth-child(1) { animation-delay: 0.1s; }
.metric-card:nth-child(2) { animation-delay: 0.15s; }
.metric-card:nth-child(3) { animation-delay: 0.2s; }
.metric-card:nth-child(4) { animation-delay: 0.25s; }
.metric-card:nth-child(5) { animation-delay: 0.3s; }
.metric-card:nth-child(6) { animation-delay: 0.35s; }

/* Widget Fade In */
.widget {
  animation: fadeIn 0.6s ease;
  animation-fill-mode: both;
}

/* Pulse Animation for Updated Elements */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.metric-value.pulse {
  animation: pulse 0.5s ease;
}

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.loading-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.loading-overlay .spinner {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

/* Chart Error Message */
.chart-error-message {
  display: none;
  padding: 24px;
  text-align: center;
  color: #991b1b;
  background: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  margin: 20px;
  animation: fadeIn 0.3s ease;
}

.chart-error-message.visible {
  display: block;
}

.chart-error-message p {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 500;
}

.chart-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: #dc2626;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chart-retry-btn:hover {
  background-color: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.chart-retry-btn:active {
  transform: translateY(0);
}

.chart-retry-btn svg {
  width: 16px;
  height: 16px;
}

/* Chart Skeleton Loader */
.chart-skeleton-loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
  border-radius: 8px;
  z-index: 10;
  display: none;
}

.trend-chart-widget.loading .chart-skeleton-loader {
  display: block;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Skeleton Loader Grid */
.skeleton-metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.skeleton-dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

/* Responsive Skeleton Loaders */
@media (max-width: 1024px) {
  .skeleton-metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .skeleton-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .skeleton-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .dashboard-notification {
    right: 10px;
    left: 10px;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .skeleton-metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* Smooth Height Transitions */
.collapsible-content {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* Hover Effects with Smooth Transitions */
.metric-card,
.alert-item,
.activity-item,
.property-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.metric-card:hover,
.alert-item:hover,
.activity-item:hover,
.property-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Loading State for Individual Widgets */
.widget-content.loading {
  position: relative;
  min-height: 100px;
}

.widget-content.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 2px solid rgba(66, 32, 237, 0.1);
  border-top-color: #4220ED;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 10;
}

.widget-content.loading > * {
  opacity: 0.3;
}

/* Fade Out Animation */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.fade-out {
  animation: fadeOut 0.3s ease forwards;
}

/* Scale In Animation */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-in {
  animation: scaleIn 0.3s ease;
}

/* Additional Widget Styles for Loading States */
.widget {
  position: relative;
  transition: opacity 0.3s ease;
}

.widget.loading {
  opacity: 0.6;
}

/* Chart Container Styles */
.chart-container {
  position: relative;
  min-height: 300px;
}

.chart-container canvas {
  transition: opacity 0.3s ease;
}

/* Empty State Styles */
.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  font-style: italic;
}

/* Activity Feed Transitions */
.activity-feed-list {
  transition: opacity 0.3s ease;
}

.activity-feed-list.fade-out {
  opacity: 0;
}

/* Metric Card Hover States */
.metric-card {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(66, 32, 237, 0.05),
    transparent
  );
  transition: left 0.5s ease;
}

.metric-card:hover::before {
  left: 100%;
}

/* Loading Spinner for Widgets */
.widget-loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(66, 32, 237, 0.2);
  border-top-color: #4220ED;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Refresh Button States */
.refresh-btn {
  position: relative;
  transition: all 0.2s ease;
}

.refresh-btn:hover:not(.loading) {
  color: #FFFFFF !important;
  transform: scale(1.05);
}

.refresh-btn:active:not(.loading) {
  transform: scale(0.95);
}

.refresh-btn svg {
  transition: transform 0.3s ease;
}

.refresh-btn:hover:not(.loading) svg {
  transform: rotate(180deg);
}

.refresh-btn.loading svg {
  animation: spin 1s linear infinite;
}

/* Priority Alerts Loading */
.priority-alerts-widget.loading .alert-item {
  opacity: 0.5;
  pointer-events: none;
}

/* Property Performance Loading */
.property-performance-widget.loading .property-card {
  opacity: 0.5;
  pointer-events: none;
}

/* Task Summary Loading */
.task-summary-widget.loading .task-status-item {
  opacity: 0.5;
}

/* Hearing Calendar Loading */
.hearing-calendar-widget.loading .hearing-date {
  opacity: 0.5;
}

/* Financial Impact Loading */
.financial-impact-widget.loading .financial-item {
  opacity: 0.5;
}

/* Smooth Scroll Behavior */
html {
  scroll-behavior: smooth;
}

/* Focus Visible for Accessibility */
*:focus-visible {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
:root {
    --bg-primary: #F8F9FC;
    --bg-secondary: #F6F8FA;

    --color-white: #FFF;
    --color-grey: #595959;
    --color-dark-main: #0B0D23;
    --color-black: #000;
    --color-almost-black: #000100;
    --color-blue: #2049C4;
    --color-dark-blue: #0E102B;
    --color-red: #AC3014;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
strike,
strong,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

address {
    display: unset;
    font-style: unset;
}

table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: top
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: ''
}

button {
    font-family: "Inter", serif;
    border: none;
    cursor: pointer;
}

ins {
    text-decoration: none
}

del,
s,
strike {
    text-decoration: line-through
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
    margin: 0
}

* {
    box-sizing: border-box;
}

img {
    border: none;
    vertical-align: top;
    max-width: 100%;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
}

svg {
    flex-shrink: 0;
    display: flex;
}

svg path {
    transition: .3s;
}

html {
    height: 100%;
    scrollbar-gutter: stable;
}

input {
    font-family: "Inter", serif;
}

input,
textarea,
button,
select,
label,
a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

:where(a, button, input, textarea):focus-visible {
    outline-color: var(--color-blue);
}

body {
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    color: var(--color-dark-blue, #0E102B);
    background-color: var(--bg-primary, #F8F9FC);
    -webkit-font-smoothing: antialiased;
    scrollbar-gutter: stable;
}

@media only screen and (width < 1024px) {
    body.freeze {
        overflow: hidden;
        touch-action: none;
        -ms-touch-action: none;
    }
}

.dm-sans {
    font-family: "DM Sans", sans-serif;
    letter-spacing: -0.3px;
}

.page-body {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    height: 100%;
}

.main {
    flex: 1;
}

.container {
    margin: 0 auto;
    max-width: 1406px;
    width: min(1406px, calc(100% - 34px));
}

.btn {
    position: relative;
    padding: 0 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    min-width: 80px;
    height: 34px;
    border-radius: 8px;
    background-color: var(--color-dark-main);
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    color: var(--color-white, #FFF);
    text-decoration: none;
    transition: .3s;
    overflow: hidden;
    z-index: 1;
}

.btn:hover {
    background-color: #2049C4;
}

.btn-delete {
    border: 1px solid var(--color-red);
    color: var(--color-red);
    background-color: #FFF;
    min-width: 63px;
}

.btn-delete:hover {
    background-color: var(--color-red);
    color: var(--color-white);
}

/* registration form */

.registration-box {
    padding: 16px 0 20px;
    display: flex;
    gap: 21px;
    min-height: 100dvh;
}

.registration-img {
    position: relative;
    max-width: 800px;
    border-radius: 16px;
    overflow: hidden;
    background: #06070D61;
}

.registration-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #06070D;
    opacity: 0.38;
}

.registration-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.registration-form-box {
    padding: 44px;
    border: 1px solid #EBEAEF;
    box-shadow: 0px 2px 9px 0px #2122300A;
    background-color: var(--color-white);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: min(585px, calc(50% - 10px));
    gap: 30px;
}

.dashboard-menu-head .logo {
    flex: 0 0 auto;
}

.dashboard-menu-head .logo img {
    height: 65px;
    width: auto;
    display: block;
}

.dashboard-mobilemenu-open .logo img {
    height: 65px;
    width: auto;
    display: block;
}

.logo {
    max-width: 180px;
}

.logo img {
    max-width: 100%;
    height: auto;
    display: block;
}

.registration-title-box {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.registration-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: var(--color-almost-black);
}

.registration-text {
    font-size: 12px;
    line-height: 16px;
    color: var(--color-black);
}

.sign-in-form {
    display: flex;
    flex-direction: column;
}

.sign-in-form-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sign-up-form-fields {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Input row for side-by-side fields */
.input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Full width inputs */
.input-wrapper.full-width {
    grid-column: 1 / -1;
}

@media only screen and (width < 600px) {
    .input-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.input-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.input-wrapper label {
    font-size: 12px;
    line-height: 16px;
    color: var(--color-grey);
}

.input-wrapper input {
    padding: 13px 15px;
    height: 48px;
    border: 1px solid #EBEAEF;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-grey);
}

.input-wrapper:has(.password-icon) input {
    padding-right: 47px;
}

/* Handle Rails field_with_errors wrapper without breaking layout */
.field_with_errors {
    display: contents;
}

.input-wrapper input::placeholder {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-grey);
}

.password-icon {
    position: absolute;
    right: 16px;
    bottom: 15px;
    cursor: pointer;
}

.password-icon::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 100%;
    height: 1px;
    background-color: var(--color-black);
    transition: .3s;
}

input[type='password']+.password-icon::before {
    width: 0;
}

.forgot-password {
    margin-top: 12px;
    align-self: flex-end;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-blue);
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: .3s;
}

.forgot-password:hover {
    text-decoration-color: inherit;
}

form .btn {
    margin-top: 20px;
    width: 100%;
    height: 48px;
    font-size: 14px;
    line-height: 20px;
}

@media only screen and (width < 1024px) {
    .registration-img {
        display: none;
    }

    .registration-form-box {
        width: 100%;
    }
}

@media only screen and (width < 768px) {
    .registration .container {
        width: 100%;
    }

    .registration-box {
        padding: 0;
    }

    .registration-form-box {
        padding: 30px 25px;
        border: none;
        border-radius: 0;
    }
}

/* social login */

.social-login-separator {
    position: relative;
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--color-grey);
    text-align: center;
}

.social-login-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: calc(50% - 12px - 9px);
    height: 1px;
    background-color: #EBEAEF;
}

.social-login-separator::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: calc(50% - 12px - 9px);
    height: 1px;
    background-color: #EBEAEF;
}

.social-login-btns {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-login-btn {
    padding: 13px 15px;
    width: 100%;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #EAEAEA;
    background-color: var(--color-white);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    transition: .3s;
}

.social-login-btn:hover {
    border-color: var(--color-dark-main);
}

.sign-up-now {
    font-size: 12px;
    line-height: 16px;
    color: var(--color-grey);
    text-align: center;
}

.sign-in-form+.sign-up-now {
    margin-top: -10px;
}

.sign-up-now> :is(a, button) {
    padding: 0;
    color: var(--color-dark-main);
    font-size: inherit;
    line-height: inherit;
    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    background-color: transparent;
    transition: .3s;
}

.sign-up-now> :is(a, button):hover {
    text-decoration-color: inherit;
}

.back-to-login {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.back-to-login>span {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-dark-main);
    transition: .3s;
}

.back-to-login:hover span {
    color: var(--color-blue);
}

.back-to-login:hover svg path {
    stroke: var(--color-blue);
}

.registration-form-separator {
    width: 100%;
    height: 1px;
    background-color: #EBEAEF;
}

.forgot-password-icon {
    margin-bottom: -18px;
    width: 56px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #EBEAEF;
    border-radius: 8px;
}

/* One time password */

.otp-container {
    display: flex;
    justify-content: space-between;
    gap: 13px;
}

.otp-input {
    padding: 14px;
    border: 1px solid #EBEAEF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% / 6);
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
    text-align: center;
    color: var(--color-almost-black);
}

.otp-input:not(:placeholder-shown) {
    border-color: var(--color-dark-main);
}

@media only screen and (width < 768px) {
    .otp-input {
        padding: 9px;
        font-size: 24px;
    }
}

/* terms */

.terms {
    margin-top: 75px;
    display: flex;
    align-content: end;
    justify-content: center;
    flex-wrap: wrap;
    flex-grow: 1;
    gap: 10px 12px;
}

.terms>a {
    position: relative;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: var(--color-grey);
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: .3s;
}

.terms>a:hover {
    text-decoration-color: inherit;
}

.terms>span {
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: var(--color-grey);
}

/* dashboard */

.dashboard-container {
    /* margin: 0 auto; */
    max-width: -webkit-fill-available;
}

.dashboard-wrapper {
    padding: 19px 16px 19px 0;
    display: flex;
    min-height: 100dvh;
}

.dashboard-aside {
    padding: 11px 24px 6px;
    width: 270px;
    position: sticky;
    top: 19px;
    max-height: calc(100dvh - 38px);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 40px;
    transition: .3s;
}

@media only screen and (width >=1024px) {
    .dashboard-aside.narrow {
        width: 86px;
    }

    .dashboard-aside.narrow .dashboard-menu-item span {
        display: none;
    }

    .dashboard-aside.narrow .dashboard-menu-head {
        justify-content: center;
    }

    .dashboard-aside.narrow .logo {
        display: none;
    }
}

.dashboard-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 29px;
}

.dashboard-menu-toggle {
    cursor: pointer;
}

.dashboard-menu-toggle:hover svg path {
    stroke: var(--color-almost-black);
}

.dashboard-menu-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.dashboard-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-menu-item {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-dark-blue);
    border-radius: 6px;
    transition: background-color .3s;
}

.dashboard-menu-item:is(.active, :hover) {
    background-color: #EEF0FF;
}

.dashboard-menu-item span {
    white-space: nowrap;
}

.dashboard-menu-separator {
    margin: 8px 0;
    border-bottom: 1px solid #ECECEC;
}

.dashboard-mobilemenu-open {
    display: none;
}

@media only screen and (width < 1024px) {
    .dashboard-wrapper {
        padding: 76px 25px 29px;
        display: flex;
        min-height: 100dvh;
    }

    .dashboard-mobilemenu-open {
        position: fixed;
        top: 18px;
        left: 25px;
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 15;
    }

    .dashboard-mobilemenu-open::before {
        content: '';
        position: absolute;
        left: -25px;
        top: 50%;
        transform: translateY(-50%);
        height: 76px;
        width: 100vw;
        background-color: var(--bg-primary);
        z-index: -1;
    }

    .dashboard-aside {
        position: fixed;
        top: 76px;
        left: 0;
        transform: translateX(-105%);
        background-color: var(--bg-primary);
        z-index: 10;
        height: calc(100dvh - 76px);
        padding-bottom: 25px;
        overflow-y: auto;
    }

    .dashboard-aside.active {
        transform: translateX(0);
    }

    .dashboard-menu-head {
        display: none;
    }

    .burger {
        border: 1px solid #EBEAEF;
        border-radius: 8px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .burger-box {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .burger span {
        height: 1.5px;
        width: 20px;
        border-radius: 5px;
        background-color: var(--color-dark-main);
        transition: .3s;
    }

    .burger span:last-child {
        align-self: start;
        width: 10px;
    }

    .burger:hover span:last-child {
        width: 20px;
    }

    .burger.active .burger-box {
        justify-content: center;
        align-items: center;
    }

    .burger.active span:nth-child(1) {
        position: absolute;
        transform: rotate(-45deg);
    }

    .burger.active span:nth-child(2) {
        position: absolute;
        transform: rotate(45deg);
    }

    .burger.active span:nth-child(3) {
        display: none;
    }
}

/* dashboard content */

.dashboard-content {
    padding: 18px 30px 35px 30px;
    background-color: var(--color-white);
    border-radius: 16px;
    box-shadow: 0px 1px 2px 0px #0000000D;
    flex-grow: 1;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.dashboard-top-bar {
    padding-bottom: 16px;
    border-bottom: 1px solid #F5F4F9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-content .settings-header {
    margin-block: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.breadcrumbs {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark-blue);
}

.dashboard-search {
    position: relative;
}

.dashboard-search input {
    padding: 11px 11px 11px 35px;
    width: 270px;
    border: 1px solid #E9E9E9;
    box-shadow: 0px 1px 2px 0px #0000000D;
    border-radius: 8px;
    font-size: 14px;
    line-height: 16px;
    color: var(--color-dark-blue);
}

.dashboard-search input::placeholder {
    color: #979797;
}

.dashboard-search svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.dashboard-top-btns {
    display: flex;
    align-items: center;
    gap: 40px;
}

.dashboard-top-btns button {
    padding: 0;
    position: relative;
    background-color: transparent;
}

.dashboard-top-btns button:not(:first-child)::before {
    content: '';
    position: absolute;
    right: calc(100% + 19px);
    height: 19px;
    width: 1px;
    background-color: #F5F4F9;
}

.dashboard-top-btns button:hover svg path {
    stroke: var(--color-blue);
}

@media only screen and (width < 1280px) {
    .dashboard-content {
        width: calc(100vw - 300px);
    }

    .dashboard-search input {
        width: 400px;
    }
}

@media only screen and (width < 1024px) {
    .dashboard-top-btns {
        position: fixed;
        top: 28px;
        right: 25px;
        gap: 24px;
        z-index: 15;
    }

    .dashboard-top-btns button:not(:first-child)::before {
        right: calc(100% + 11px);
    }
}

@media only screen and (width < 768px) {
    .dashboard-content {
        padding: 14px 14px 21px;
    }

    .dashboard-top-bar {
        gap: 50px;
    }

    .dashboard-search input {
        width: 100%;
    }
}

/* statistic */

.statistic {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    gap: 30px;
}

.admin-dashboard .statistic {
    grid-template-columns: repeat(4, minmax(200px, 1fr));
}

.statistic-item {
    position: relative;
    padding: 23px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid #E9E9E9;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.statistic-item:hover {
    border-color: #4220ED;
    box-shadow: 0 2px 8px rgba(66, 32, 237, 0.1);
}

.statistic-item.active {
    background: #EDEDED;
    border-color: #4220ED;
}

.statistic-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 19px;
    width: 9px;
    height: 29px;
    border-radius: 0 16px 16px 0;
    background-color: #4220ED;
}

.statistic-item.red::before {
    background-color: #FF2E2E;
}

.statistic-item.yellow::before {
    background-color: #EEC844;
}

.statistic-item.orange::before {
    background-color: #FF692E;
}

.statistic-item p {
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    color: #616875;
}

.statistic-item span {
    font-weight: 600;
    font-size: 24px;
    line-height: 24px;
    color: #050828;
}

@media only screen and (width < 1280px) {
    .statistic {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
        gap: 20px;
    }
}

@media only screen and (width < 768px) {
    .statistic {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
        gap: 16px;
    }

    .admin-dashboard .statistic {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-dashboard .statistic:not(:has(.statistic-item:nth-child(4))) .statistic-item:nth-child(3) {
        grid-column: span 2;
    }

    .statistic-item {
        padding: 15px 19px;
        gap: 6px;
    }

    .statistic-item::before {
        top: 10px;
    }

    .statistic-item p {
        font-size: 13px;
    }
}

/* dashboard table */

.dashboard-box {
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    max-width: 100%;
}

.dashboard-table-wrapper {
    padding: 19px 19px 13px;
    border: 1px solid #E9E9E9;
    border-radius: 14px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

.dashboard-table-head {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
}

.dashboard-table-head>span {
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    flex-grow: 1;
}



.search-results-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.search-count {
    color: #3b82f6;
    font-weight: 600;
}

.search-term {
    color: #64748b;
    font-style: italic;
}

.clear-search {
    background: #f1f5f9;
    color: #64748b;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s;
    margin-left: auto;
}

.clear-search:hover {
    background: #e2e8f0;
    color: #475569;
}

.dashboard-table-filters {
    display: flex;
    align-items: center;
    gap: 10px;
}

input.table-search {
    width: 270px;
    font-size: 12px;
}

.dashboard-table-filters button {
    border: 1px solid #EAEAEA;
    width: 48px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: #FBFBFF;
    border-radius: 8px;
    transition: .3s;
}

.dashboard-table-filters button:hover {
    border-color: var(--color-dark-blue);
}

@media only screen and (width < 1440px) {
    .dashboard-box {
        flex-direction: column-reverse;
    }
}

@media only screen and (width < 768px) {
    .dashboard-table-wrapper {
        padding: 19px 16px 13px;
    }

    .dashboard-table-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .dashboard-table-filters {
        width: 100%;
    }

    .dashboard-table-filters:has(.custom-select) {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-search {
        flex-grow: 1;
        width: 100%;
    }

    input.table-search {
        width: 100%;
    }
}

table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

th {
    padding: 8px;
    border-top: 1px solid #EBEAEF;
    border-bottom: 1px solid #EBEAEF;
    text-align: left;
    vertical-align: middle;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-grey);
}

th:first-child {
    padding-left: 0;
    width: 26px;
}

th:nth-child(2) {
    width: 76px;
}

th:last-child {
    width: 80px;
}

td {
    padding: 11px 8px 10px;
    border-bottom: 1px solid #EBEAEF;
    vertical-align: middle;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-dark-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

td:first-child {
    padding-left: 0;
}

td:last-child {
    padding-right: 1px;
}

label.label {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    cursor: pointer;
}

label.label i {
    border: 1px solid #EBEAEF;
    border-radius: 4px;
    width: 18px;
    height: 18px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: .3s;
    cursor: pointer;
}

label.label input:checked+i {
    background-color: #4220ED;
    border-color: #4220ED;
}

label.label svg {
    opacity: 0;
    transition: .3s;
}

label.label input:checked+i svg {
    opacity: 1;
}

label.label input {
    opacity: 0;
    width: 0;
    height: 0;
    z-index: -1;
    position: absolute;
}

label.label:hover i {
    border-color: #4220ED;
}

.table-action-btns {
    display: flex;
    gap: 10px;
}

.table-action-button {
    padding: 7px 12px;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    transition: .3s;
    text-decoration: none;
}

.table-action-button.download {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI4MjBfMTM0OSkiPgo8cGF0aCBkPSJNNiA5TDkgMTJNOSAxMkwxMiA5TTkgMTJWNk0xNi41IDlDMTYuNSAxMy4xNDIxIDEzLjE0MjEgMTYuNSA5IDE2LjVDNC44NTc4NiAxNi41IDEuNSAxMy4xNDIxIDEuNSA5QzEuNSA0Ljg1Nzg2IDQuODU3ODYgMS41IDkgMS41QzEzLjE0MjEgMS41IDE2LjUgNC44NTc4NiAxNi41IDlaIiBzdHJva2U9IiMwNTA4MjgiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yODIwXzEzNDkiPgo8cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==");
}

.table-action-button:not(.btn-delete):hover {
    border-color: var(--color-dark-blue);
}

.table-action-button.btn-delete {
    padding: 7px 12px;
    justify-content: center;
    min-width: 55px;
}

.table-scroll-wrapper {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 100%;
}

@media only screen and (width < 1280px) {
    tr:last-child td {
        border-bottom: none
    }

    .table-scroll-wrapper {
        padding-bottom: 11px;
        padding-right: 19px;
        width: calc(100% + 19px);
    }

    .table-scroll-wrapper .ps__rail-x {
        margin-left: 2px;
        background-color: #E2E2E2 !important;
        opacity: 1 !important;
        height: 11px !important;
        border-radius: 6px;
        transform: scale(.965);
        transform-origin: left;
    }

    .table-scroll-wrapper .ps__rail-x::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% + 4px);
        height: 100%;
        background-color: inherit;
        border-radius: 6px;
    }

    .table-scroll-wrapper .ps__thumb-x {
        background-color: var(--color-white) !important;
        border-radius: 4px;
        height: 7px !important;
        opacity: 1 !important;
    }
}

@media only screen and (width < 768px) {
    .table-scroll-wrapper {
        padding-right: 16px;
        width: calc(100% + 16px);
    }

    .table-scroll-wrapper .ps__rail-x {
        transform: scale(.93);
    }
}

/* table pagination */

.pagination {
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pagination-indicator {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #475467;
}

.pagination-items {
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 2;
}

.pagination-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #475467;
    cursor: pointer;
    transition: .3s;
}

.pagination-item.active {
    background-color: #F9FAFB;
    color: #1D2939;
    font-weight: 500;
    pointer-events: none;
}

.pagination-item:hover {
    background-color: #F9FAFB;
}

.pagination-btns {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pagination-btn {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid var(--color-dark-main);
    background-color: var(--color-dark-main);
    color: var(--color-white);
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    transition: .3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination-btn:not([disabled]):hover {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.pagination-btn[disabled] {
    border: 1px solid #EAEAEA;
    background-color: transparent;
    color: #050828;
    pointer-events: none;
}

.pagination-btn:hover {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

@media only screen and (width < 768px) {
    .pagination {
        flex-direction: column;
        gap: 12px;
    }

    .pagination-item {
        width: 30px;
        height: 44px;
    }

    .pagination-btns {
        margin-top: -51px;
        width: 100%;
        justify-content: space-between;
    }

    .pagination-btn span {
        display: none;
    }
}

/* Recent Alerts Table */

.recent-alerts th:nth-child(3) {
    width: 180px;
}

.recent-alerts th:nth-child(4) {
    width: 114px;
}

.recent-alerts th:nth-child(5) {
    width: 124px;
}

.recent-alerts th:nth-child(6) {
    width: 106px;
}

@media only screen and (width < 1280px) and (width >=1024px) {
    .recent-alerts th:nth-child(3) {
        width: 152px;
    }
}

@media only screen and (width < 1024px) {
    .table-scroll-wrapper table.recent-alerts {
        width: max(706px, 100%) !important;
    }
}

/* Alerts Table Column Widths */

.alerts-table .checkbox-col {
    width: 40px;
}

.alerts-table .bin-col {
    width: 70px;
}

.alerts-table .company-col {
    width: 100px;
}

.alerts-table .description-col {
    width: 180px;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alerts-table .issue-date-col {
    width: 90px;
}

.alerts-table .violation-number-col {
    width: 120px;
}

.alerts-table .violation-type-col {
    width: 110px;
}

.alerts-table .status-col {
    width: 100px;
}

.alerts-table .penalty-col {
    width: 90px;
    text-align: right;
}

.alerts-table .disposition-date-col {
    width: 100px;
}

.alerts-table .action-col {
    width: 70px;
    text-align: center;
}

/* Ensure proper alignment for penalty amounts */
.alerts-table td.penalty-col {
    padding-right: 12px;
}

/* Alerts table - responsive width without horizontal scroll */
.table-scroll-wrapper table.alerts-table {
    table-layout: auto;
    width: 100%;
}

/* real-time */

.real-time {
    padding: 19px;
    border: 1px solid #E9E9E9;
    border-radius: 19px;
    width: 330px;
    flex-shrink: 0;
}

.real-time-title {
    margin-bottom: 18px;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: var(--color-dark-blue);
}

.real-time-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.real-time-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-dark-blue);
}

.real-time-item:not(:last-child) {
    padding-bottom: 12px;
    border-bottom: 1px solid #F5F4F9;
}

.status {
    padding: 4px 12px;
    border-radius: 32px;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
}

.status.reported {
    background-color: #FFF0EA;
    color: #FF692E;
}

.status.resolved {
    background-color: #E7F8F0;
    color: #10A760;
}

.status.court {
    background-color: #FEF4E6;
    color: #E18308;
}

@media only screen and (width < 1440px) {
    .real-time {
        width: 100%;
    }
}

@media only screen and (width < 1024px) {
    .real-time {
        display: none;
    }
}

/* Properties Table */

.properties th:nth-child(3) {
    width: 250px;
}

.properties th:nth-child(4),
.properties th:nth-child(5) {
    width: 100px;
}

.properties th:nth-child(6) {
    width: 200px;
}

.properties th:nth-child(7) {
    width: 120px;
}

@media only screen and (width < 1440px) {
    .properties th:nth-child(3) {
        width: 180px;
    }

    .properties th:nth-child(4),
    .properties th:nth-child(5) {
        width: 85px;
    }

    .properties th:nth-child(6) {
        width: 170px;
    }

    .properties th:nth-child(7) {
        width: 100px;
    }
}

@media only screen and (width < 1024px) {
    .table-scroll-wrapper table.properties {
        width: max(850px, 100%) !important;
        min-width: 850px;
    }
}

/* custom select */

.custom-select {
    position: relative;
    width: 276px;
    z-index: 2;
}

.custom-select[open] {
    z-index: 12;
}

td:has(.custom-select[open]) {
    overflow: visible;
}

tr:last-child .custom-select ul {
    margin: 0 0 2px;
    top: auto;
    bottom: 100%;
}

.custom-select summary {
    padding: 9px 13px;
    background-color: #FBFBFF;
    border-radius: 8px;
    border: 1px solid #EAEAEA;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.custom-select summary span,
.custom-select ul li {
    color: #050828;
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    flex-grow: 1;
    list-style: none;
}

.custom-select summary svg:last-child {
    transition: .3s;
}

.custom-select[open] summary svg:last-child {
    transform: scale(-1);
}

.custom-select ul {
    position: absolute;
    margin-top: 2px;
    background-color: #FBFBFF;
    color: #050828;
    list-style: none;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #EAEAEA;
}

.custom-select ul li {
    padding: 10px;
    cursor: pointer;
}

.custom-select ul li:hover {
    background: #EEF0FF;
}

@media only screen and (width < 1280px) {
    .custom-select {
        width: 220px;
    }
}

@media only screen and (width < 768px) {
    .custom-select {
        width: 100%;
    }
}

/* status select */

.status-select {
    width: fit-content;
}

.status-select summary {
    border-radius: 32px;
    padding: 4px 12px;
    background-color: #FBFBFF;
    border: none;
    gap: 4px;
}

.status-select summary.green {
    background-color: #E7F8F0;
}

.status-select summary.green span {
    color: #10A760;
    font-size: 14px;
}

.status-select summary.green svg:last-child path {
    stroke: #10A760;
}

.status-select summary.orange {
    background-color: #FFF0EA;
}

.status-select summary.orange span {
    color: #FF692E;
    font-size: 14px;
}

.status-select summary.orange svg:last-child path {
    stroke: #FF692E;
}

.status-select ul {
    width: max-content;
    min-width: 120px;
    max-width: 300px;
}

.status-select ul li {
    padding: 6px 10px;
    font-size: 14px;
    cursor: pointer;
}

/* Alerts Table */

/* Alerts table column sizing */
.alerts-table {
    table-layout: auto;
    min-width: 900px;
    width: 100%;
}

.alerts-table .checkbox-col {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
}

.alerts-table .bin-col {
    width: 100px;
    min-width: 100px;
    max-width: 120px;
}

.alerts-table .company-col {
    width: 150px;
    min-width: 150px;
    max-width: 180px;
}

.alerts-table .description-col {
    width: 200px;
    min-width: 180px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
}

.alerts-table .issue-date-col {
    width: 120px;
    min-width: 120px;
    max-width: 140px;
}

.alerts-table .violation-number-col {
    width: 140px;
    min-width: 140px;
    max-width: 160px;
}

.alerts-table .violation-type-col {
    width: 140px;
    min-width: 140px;
    max-width: 160px;
}

.alerts-table .disposition-date-col {
    width: 140px;
    min-width: 140px;
    max-width: 160px;
    white-space: nowrap;
}

.alerts-table .action-col {
    width: 80px;
    min-width: 80px;
    max-width: 100px;
}

@media only screen and (width < 1440px) {
    .alerts-table .company-col {
        width: 130px;
        min-width: 130px;
        max-width: 150px;
    }

    .alerts-table .description-col {
        width: 160px;
        min-width: 140px;
        max-width: 160px;
    }

    .alerts-table .violation-number-col,
    .alerts-table .violation-type-col,
    .alerts-table .disposition-date-col {
        width: 120px;
        min-width: 120px;
        max-width: 140px;
    }
}

@media only screen and (width < 1024px) {
    .table-scroll-wrapper table.alerts-table {
        width: max(900px, 100%) !important;
        min-width: 900px;
    }
}

/* Description tooltip styles */
.description-tooltip {
    cursor: pointer;
    display: inline-block;
    width: 100%;
}

/* JavaScript tooltip */
.js-tooltip {
    position: fixed;
    background: white;
    color: #333;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 400px;
    min-width: 250px;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    z-index: 999999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.js-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.js-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #d1d5db;
}

/* popup alert */

.popup-alerts {
    padding: 30px 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.2);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 16;
}

.popup-alerts.active {
    display: flex;
}

.popup-alerts-box {
    padding: 19px 20px 30px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(684px, calc(100% - 50px));
    background-color: var(--color-white);
    box-shadow: 0px 4px 4px 1000px #00000040;
    border-radius: 16px;
    max-height: 80vh;
    overflow-y: auto;
}

.popup-alerts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.popup-alerts-head span {
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
}

.popup-alerts-close {
    position: relative;
    cursor: pointer;
    z-index: 1;
}

.popup-alerts-close::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    z-index: -1;
    transition: .3s;
}

.popup-alerts-close:hover::before {
    background-color: #EEF0FF;
}

.alerts-details {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid #E9E9E9;
    border-radius: 11px;
}

.alerts-details-col {
    display: flex;
    flex-direction: column;
}

.alerts-details-col:first-child {
    border-right: 1px solid #E9E9E9;
}

.alerts-details-row {
    padding: 9px 14px;
    display: grid;
    grid-template-columns: minmax(122px, auto) 4px minmax(122px, auto);
    gap: 10px;
}

.alerts-details-row:not(:last-child) {
    border-bottom: 1px solid #E9E9E9;
}

.alerts-details-row span {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

span.alerts-details-name {
    font-weight: 600;
}

.alerts-additional-details {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #F5F4F9;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Resolution Request Styles */
.alerts-resolution-request {
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

.resolution-request-header {
    margin-bottom: 20px;
    text-align: center;
}

.resolution-request-header h3 {
    margin: 0 0 8px 0;
    color: #2c3e50;
    font-size: 18px;
    font-weight: 600;
}

.resolution-request-header p {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
}

.resolution-request-content {
    position: relative;
}

.resolution-request-form {
    display: block;
}

.resolution-request-form .form-group {
    margin-bottom: 16px;
    position: relative;
}

.resolution-request-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #495057;
    font-size: 14px;
}

.priority-dropdown {
    width: 100%;
}

.priority-dropdown details {
    width: 100%;
}

.priority-dropdown summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: white;
    font-size: 14px;
    color: #495057;
    cursor: pointer;
    list-style: none;
}

.priority-dropdown summary::-webkit-details-marker {
    display: none;
}

.priority-dropdown summary:focus {
    outline: none;
    border-color: #4220ED;
    box-shadow: 0 0 0 2px rgba(66, 32, 237, 0.2);
}

.priority-dropdown summary:hover {
    border-color: #4220ED;
}

.priority-dropdown summary span {
    font-size: 14px;
    color: #495057;
}

.priority-dropdown summary svg {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.priority-dropdown[open] summary svg {
    transform: rotate(180deg);
}

.priority-dropdown ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 6px;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

.priority-dropdown ul li {
    padding: 8px 12px;
    font-size: 14px;
    color: #495057;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.priority-dropdown ul li:hover {
    background-color: #f8f9fa;
}

.priority-dropdown ul li:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.priority-dropdown ul li:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.resolution-description {
    width: 100%;
    min-height: 80px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: white;
    font-size: 14px;
    color: #495057;
    resize: vertical;
    font-family: inherit;
}

.resolution-description:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.resolution-description::placeholder {
    color: #adb5bd;
}

.form-actions {
    text-align: center;
    margin-top: 20px;
}

.request-resolution-btn,
.retry-request-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    margin-top: 0 !important;
}

.btn.btn-primary {
    background: #4220ED;
    color: white;
}

.btn.btn-primary:hover {
    background: #3614c7;
}

.btn.btn-primary:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
}

.btn.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn.btn-secondary:hover {
    background: #5a6268;
}

/* Success State */
.resolution-request-success {
    text-align: center;
    padding: 30px 20px;
}

.success-icon {
    width: 60px;
    height: 60px;
    background: #27ae60;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    margin: 0 auto 16px auto;
}

.resolution-request-success h4 {
    margin: 0 0 8px 0;
    color: #27ae60;
    font-size: 18px;
    font-weight: 600;
}

.resolution-request-success p {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
    line-height: 1.5;
}

/* Error State */
.resolution-request-error {
    text-align: center;
    padding: 30px 20px;
}

.error-icon {
    width: 60px;
    height: 60px;
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    margin: 0 auto 16px auto;
}

.resolution-request-error h4 {
    margin: 0 0 8px 0;
    color: #e74c3c;
    font-size: 18px;
    font-weight: 600;
}

.resolution-request-error p {
    margin: 0 0 16px 0;
    color: #6c757d;
    font-size: 14px;
    line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .alerts-resolution-request {
        margin-top: 20px;
        padding: 16px;
    }

    .resolution-request-header h3 {
        font-size: 16px;
    }

    .resolution-request-header p {
        font-size: 13px;
    }

    .resolution-priority-select,
    .resolution-description {
        font-size: 13px;
    }

    .request-resolution-btn,
    .retry-request-btn {
        padding: 8px 20px;
        font-size: 13px;
    }
}

/* Trial Info Popup Styles */
.trial-info-popup {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.trial-info-popup h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
}

.trial-info-popup p {
    margin: 4px 0;
    font-size: 14px;
    opacity: 0.95;
}

.trial-info-popup a {
    color: #ffffff;
    text-decoration: underline;
    font-weight: 600;
}

.trial-info-popup a:hover {
    opacity: 0.8;
}

/* Form Field Styles */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label {
    font-weight: 600;
    font-size: 14px;
    color: #374151;
}

.form-field input,
.form-field select {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.form-field input:focus,
.form-field select:focus {
    border-color: #3b82f6;
    outline: none;
}

.form-help {
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
}

.alerts-additional-details label {
    font-size: 12px;
    line-height: 16px;
    color: #433B3B;
}

.alerts-additional-details input {
    padding: 13px 15px;
    border-radius: 8px;
    border: 1px solid #EBEAEF;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-grey);
}

/* upload */

.alerts-upload-file {
    position: relative;
    margin-top: 19px;
    padding: 20px;
    width: 100%;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid #EBEAEF;
    border-radius: 8px;
    transition: .3s;
    cursor: pointer;
}

.alerts-upload-file:hover {
    border-color: var(--color-dark-blue);
}

.alerts-upload-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.alerts-upload-info.hide {
    display: none;
}

.alerts-upload-info span {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

.alerts-upload-info p,
.alerts-uploaded-file {
    font-size: 12px;
    line-height: 16px;
    color: var(--color-grey);
}

.alerts-uploaded-file {
    display: none;
}

.alerts-uploaded-error {
    display: none;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-red);
}

:is(.alerts-uploaded-error, .alerts-uploaded-file).active {
    display: inline-block;
}

.popup-alerts .btn {
    margin-top: 30px;
    align-self: flex-end;
    min-width: 137px;
    height: 40px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

.remove-file {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

.remove-file.active {
    display: flex;
}

.remove-file:hover svg path {
    stroke: var(--color-red);
}

.remove-file svg {
    height: 100%;
}

.alerts-upload-file.dragover {
    background: #EEF0FF;
}

/* Professional Property Modal */
.property-details-modal {
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.property-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 24px;
    border-radius: 12px 12px 0 0;
    margin: -20px -30px 24px -30px;
}

.property-title-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.property-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.property-status-badge {
    flex-shrink: 0;
}

.status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
}

.property-address-main {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    opacity: 0.95;
}

.property-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.info-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
}

.section-title {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #e2e8f0;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.info-value {
    font-size: 13px;
    color: #1e293b;
    font-weight: 600;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

.info-value.highlight {
    color: #3b82f6;
    font-weight: 700;
}

.monitoring-active {
    color: #059669;
}

.monitoring-inactive {
    color: #dc2626;
}

.description-section {
    grid-column: 1 / -1;
}

.description-content {
    background: white;
    padding: 16px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    color: #475569;
    line-height: 1.6;
}

.activity-summary {
    margin-bottom: 24px;
}

.activity-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.activity-item {
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    background: #f8fafc;
}

.activity-count {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 4px;
}

.activity-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.system-info {
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.system-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.system-label {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}

.system-value {
    font-size: 12px;
    color: #64748b;
}

@media (max-width: 768px) {
    .property-details-modal .property-header {
        margin: -19px -20px 20px -20px;
        padding: 20px;
    }

    .property-details-modal .property-title-section {
        flex-direction: column;
        gap: 12px;
    }

    .property-details-modal .property-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .property-details-modal .activity-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .property-details-modal .info-value {
        max-width: 50%;
    }
}

@media only screen and (width < 768px) {
    .popup-alerts-box {
        padding: 19px 20px;
    }

    .alerts-details {
        grid-template-columns: 1fr;
    }

    .alerts-details-col:first-child {
        border-bottom: 1px solid #E9E9E9;
        border-right: none;
    }

    .alerts-additional-details {
        margin-top: 16px;
        padding-top: 16px;
    }

    .alerts-upload-file {
        margin-top: 16px;
    }

    .popup-alerts .btn {
        margin-top: 16px;
    }
}

/* billing */

.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
}

.alert-success {
    background-color: #f0f9ff;
    border: 1px solid #7dd3fc;
    color: #0369a1;
}

.alert-error {
    background-color: #fef2f2;
    border: 1px solid #fca5a5;
    color: #dc2626;
}

.billing-info {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 19px 28px;
}

.billing-info-item {
    padding: 19px;
    border: 1px solid #E9E9E9;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.billing-info-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

.billing-info-table {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    border: 1px solid #E9E9E9;
    border-radius: 12px;
}

.billing-info-table.no-border {
    border: none;
}

.billing-info-table.no-border .billing-info-row {
    padding: 0;
}

.billing-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.billing-info-row span {
    font-size: 14px;
    line-height: 20px;
}

span.billing-info-name {
    font-weight: 600;
}

.billing-info-item .btn {
    justify-self: flex-end;
    min-width: 129px;
    height: 38px;
}

.billing-main-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.billing-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
}

.billing-section h2 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.billing-payments {
    max-width: 1200px;
    margin-top: 24px;
    font-family: 'DM Sans', sans-serif;
}

@media only screen and (width < 768px) {
    .billing-info {
        margin-top: 16px;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        ;
    }
}

/* Billing & Payments Page Styles */

.billing-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.details-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.detail-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 8px;
    align-items: center;
}

.detail-label {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.detail-colon {
    font-size: 14px;
    color: #6b7280;
}

.detail-value {
    font-size: 14px;
    color: #1a1a1a;
    font-weight: 500;
}

.action-button {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.action-button.primary {
    background: #1f2937;
    color: white;
}

.action-button.primary:hover {
    background: #374151;
    color: white !important;
    text-decoration: none !important;
}

.action-button.secondary {
    background: #1f2937;
    color: white;
}

.action-button.secondary:hover {
    background: #374151;
    color: white !important;
    text-decoration: none !important;
}

.action-button.danger {
    background: #ef4444;
    color: white;
}

.action-button.danger:hover {
    background: #dc2626;
    color: white !important;
    text-decoration: none !important;
}

.plan-actions {
    display: flex;
    flex-direction: column;
}



/* Plans Page Styles */
.plans-page {
    max-width: 1200px;
    padding: 40px 24px;
}

.plans-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    margin-top: 24px;
    margin-bottom: 48px;
}

.plan-card {
    position: relative;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.plan-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: #d1d5db;
}

.plan-card.featured {
    border-color: #2049c4;
    box-shadow: 0 4px 20px rgba(32, 73, 196, 0.15);
    transform: scale(1.05);
}

.plan-card.featured:hover {
    transform: scale(1.05) translateY(-8px);
    box-shadow: 0 24px 44px rgba(32, 73, 196, 0.25);
}

.plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #2049c4, #1e40af);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plan-header {
    text-align: center;
    margin-bottom: 24px;
}

.plan-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: #0f1419;
    margin-bottom: 16px;
}

.plan-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.plan-price .currency {
    font-size: 20px;
    font-weight: 600;
    color: #6b7280;
}

.plan-price .amount {
    font-size: 32px;
    font-weight: 700;
    color: #0f1419;
    line-height: 1;
}

.plan-price .period {
    font-size: 18px;
    font-weight: 500;
    color: #6b7280;
}

.plan-features {
    flex-grow: 1;
    margin-bottom: 32px;
}

.feature-highlight {
    text-align: center;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 24px;
    color: #374151;
    font-size: 16px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    padding: 12px 0;
    font-size: 16px;
    color: #374151;
    display: flex;
    align-items: center;
    position: relative;
}

.feature-list li:before {
    content: "✓";
    color: #10b981;
    font-weight: 700;
    font-size: 18px;
    margin-right: 12px;
    width: 20px;
}

.feature-list li:not(:last-child) {
    border-bottom: 1px solid #f3f4f6;
}

.plan-action {
    margin-top: auto;
}

.plan-button {
    display: block;
    width: 100%;
    padding: 16px 24px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    color: #374151;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.plan-button:hover {
    border-color: #d1d5db;
    background: #f9fafb;
    color: #111827;
}

.plan-button.primary {
    background: linear-gradient(135deg, #2049c4, #1e40af);
    border-color: #2049c4;
    color: white;
}

.plan-button.primary:hover {
    background: linear-gradient(135deg, #1e40af, #1d4ed8);
    border-color: #1e40af;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(32, 73, 196, 0.3);
}

.plan-button.current {
    background: #10b981;
    border-color: #10b981;
    color: white;
    cursor: default;
}

.plan-button.current:hover {
    background: #10b981;
    border-color: #10b981;
    transform: none;
    box-shadow: none;
}

.plans-footer {
    text-align: center;
    padding-top: 32px;
    border-top: 1px solid #e5e7eb;
}

.plans-footer p {
    color: #6b7280;
    margin-bottom: 8px;
}

.plans-footer a {
    color: #2049c4;
    text-decoration: none;
    font-weight: 500;
}

.plans-footer a:hover {
    text-decoration: underline;
}

@media only screen and (width < 768px) {
    .plans-page {
        padding: 24px 16px;
    }

    .plans-header h1 {
        font-size: 32px;
    }

    .plans-header p {
        font-size: 16px;
    }

    .plans-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .plan-card.featured {
        transform: none;
    }

    .plan-card.featured:hover {
        transform: translateY(-8px);
    }

    .plan-price .amount {
        font-size: 36px;
    }
}

/* User Profile Page Styles */
.user-profile-page {
    max-width: 1000px;
    margin-top: 24px;
}

.user-profile-header {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.user-avatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #2049c4, #1e40af);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    font-weight: 700;
    flex-shrink: 0;
}

.user-details h1 {
    font-size: 28px;
    font-weight: 700;
    color: #0f1419;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.user-email {
    color: #6b7280;
    font-size: 16px;
    margin: 0 0 12px 0;
}

.user-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge.admin-badge {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fbbf24;
}

.badge.user-badge {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

.badge.confirmed-badge {
    background: #dcfce7;
    color: #059669;
    border: 1px solid #10b981;
}

.badge.unconfirmed-badge {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #f87171;
}

.user-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 200px;
}

.user-actions .action-button {
    text-align: center;
    white-space: nowrap;
}

.user-profile-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.profile-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
}

.profile-section h2 {
    font-size: 20px;
    font-weight: 600;
    color: #0f1419;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
}

/* Mobile Responsiveness */
@media only screen and (width < 768px) {
    .user-profile-page {
        padding: 16px;
    }

    .user-profile-header {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 20px;
    }

    .user-info {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .user-avatar {
        width: 60px;
        height: 60px;
        font-size: 24px;
        align-self: center;
    }

    .user-details h1 {
        font-size: 24px;
    }

    .user-actions {
        flex-direction: row;
        min-width: auto;
        gap: 8px;
    }

    .user-actions .action-button {
        flex: 1;
        font-size: 13px;
        padding: 10px 12px;
    }

    .user-profile-content {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .profile-section {
        padding: 20px;
    }

    .user-badges {
        justify-content: center;
    }
}

@media only screen and (width < 480px) {
    .user-actions {
        flex-direction: column;
        gap: 12px;
    }

    .badge {
        font-size: 11px;
        padding: 3px 10px;
    }
}

/* User Edit Page Styles */
.user-edit-page {
    max-width: 800px;
    margin-top: 24px;
}

.user-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.user-edit-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: #0f1419;
    margin: 0;
}

.user-edit-actions {
    display: flex;
    gap: 12px;
}

.user-edit-content {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
}

/* Form Styles */
.user-form {
    width: 100%;
}

.form-errors {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

.form-errors h3 {
    color: #dc2626;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.form-errors ul {
    color: #dc2626;
    margin: 0;
    padding-left: 20px;
}

.form-errors li {
    margin-bottom: 4px;
}

.form-sections {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.form-section {
    padding: 24px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.form-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: #0f1419;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-row:last-child {
    margin-bottom: 0;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin: 0;
}

.form-input,
.form-select {
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #111827;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: #2049c4;
    box-shadow: 0 0 0 3px rgba(32, 73, 196, 0.1);
}

.form-input::placeholder {
    color: #9ca3af;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-checkbox {
    width: 16px;
    height: 16px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-checkbox:checked {
    background: #2049c4;
    border-color: #2049c4;
}

.checkbox-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.field-help {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

.form-actions {
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Mobile Responsiveness */
@media only screen and (width < 768px) {
    .user-edit-page {
        padding: 16px;
    }

    .user-edit-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .user-edit-actions {
        justify-content: center;
    }

    .user-edit-content {
        padding: 20px;
    }

    .form-section {
        padding: 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-actions {
        flex-direction: column-reverse;
    }

    .form-actions .action-button {
        width: 100%;
    }
}

.billing-history-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
}

.billing-history-section h2 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.billing-table-container {
    overflow-x: auto;
}

.billing-table {
    width: 100%;
    border-collapse: collapse;
}

.billing-table th {
    text-align: left;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

.billing-table td {
    padding: 16px 0;
    font-size: 14px;
    color: #1a1a1a;
    border-bottom: 1px solid #f3f4f6;
}

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

.download-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.download-link:hover {
    color: #1a1a1a;
}

.download-link svg {
    width: 16px;
    height: 16px;
}

.no-download {
    color: #9ca3af;
}

.no-billing-history {
    text-align: center;
    padding: 40px;
    color: #6b7280;
}

@media only screen and (width < 768px) {
    .billing-info-row {
        grid-template-columns: 1fr;
    }

    .billing-payments {
        padding: 16px;
    }

    .detail-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .detail-colon {
        display: none;
    }

    .detail-label {
        font-weight: 600;
    }
}

/* Billing Table */

.dashboard-table-wrapper:has(table.billing-history) .dashboard-table-head>span {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

table.billing-history tr:last-child td {
    border-bottom: none;
}

.billing-history th:nth-child(2) {
    width: 166px;
}

.billing-history th:nth-child(4) {
    width: 155px;
}

.table-action-button.download span:last-child {
    display: none;
}

@media only screen and (width < 768px) {
    .billing-history th:nth-child(2) {
        width: 110px;
    }

    .billing-history th:nth-child(3) {
        width: 66px;
    }

    .billing-history th:nth-child(4) {
        width: 73px;
    }

    .table-action-button.download span:first-child {
        display: none;
    }

    .table-action-button.download span:last-child {
        display: flex;
    }
}

/* profile settings */

.profile-info {
    margin-top: 29px;
    padding: 26px 30px;
    border: 1px solid #E9E9E9;
    border-radius: 16px;
}

.profile-info-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-picture {
    width: 75px;
    height: 75px;
    border-radius: 100%;
}

.profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-picture-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.profile-picture-actions>span {
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-grey);
}

.profile-picture-btns {
    display: flex;
    gap: 11px;
}

.profile-picture-btns>.btn {
    padding: 8px;
}

.profile-details-item {
    margin-top: 26px;
    padding: 25px 24px;
    border: 1px solid #E9E9E9;
    border-radius: 16px;
}

.profile-form-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.profile-form-fields input {
    color: var(--color-black);
}

.profile-form .btn {
    width: auto;
    height: 38px;
}

.profile-form .btn:disabled {
    background-color: #A7A8B0;
    cursor: default;
}

.profile-details-title {
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

.profile-notifications {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-notifications label {
    display: flex;
    gap: 16px;
}

.profile-notifications span {
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    align-self: center;
}

.profile-password-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.profile-password-fields+.profile-notifications {
    margin-top: 16px;
}

@media only screen and (width < 1280px) {
    .profile-password-fields {
        grid-template-columns: 1fr;
    }
}

@media only screen and (width < 768px) {
    .profile-info {
        margin-top: 14px;
        padding: 13px 14px;
    }

    .profile-info-head {
        gap: 13px;
    }

    .profile-picture {
        width: 61px;
        height: 61px;
    }

    .profile-picture-actions>span {
        font-size: 10px;
        line-height: 14px;
    }

    .profile-details-item {
        margin-top: 17px;
        padding: 15px;
    }

    .profile-form-fields {
        grid-template-columns: 1fr;
    }

}

/* infographics */

.infographics {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.infographics-item {
    padding: 20px 25px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 1px solid #E9E9E9;
    border-radius: 14px;
}

.infographics-item-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
}

@media only screen and (width < 1280px) {
    .infographics {
        grid-template-columns: 1fr;
    }
}

@media only screen and (width < 768px) {
    .infographics-item {
        padding: 10px 13px 6px 11px;
    }

    .infographics-item-title {
        font-size: 12px;
        line-height: 16px;
    }
}

/* Users table styling */
.users-table {
    table-layout: auto;
    max-width: 100%;
}

.users-table th:nth-child(2) {
    /* First Name */
    width: 150px;
    min-width: 120px;
    max-width: 200px;
}

.users-table th:nth-child(3) {
    /* Email */
    width: 250px;
    min-width: 200px;
    max-width: 300px;
}

.users-table th:nth-child(4) {
    /* Company (for super admin) */
    width: 180px;
    min-width: 150px;
    max-width: 220px;
}

.users-table th:nth-child(5) {
    /* Role */
    width: 120px;
    min-width: 100px;
    max-width: 150px;
}

.users-table th:nth-child(6) {
    /* Action */
    width: 120px;
    min-width: 100px;
    max-width: 150px;
}

/* For non-super admin users (no company column) */
.users-table th:nth-child(4):not([class*="company"]) {
    /* Role when no company column */
    width: 120px;
    min-width: 100px;
    max-width: 150px;
}

.users-table th:nth-child(5):not([class*="action"]) {
    /* Action when no company column */
    width: 120px;
    min-width: 100px;
    max-width: 150px;
}

@media only screen and (width < 1440px) {
    .users-table th:nth-child(2) {
        width: 130px;
        min-width: 110px;
        max-width: 160px;
    }

    .users-table th:nth-child(3) {
        width: 200px;
        min-width: 180px;
        max-width: 250px;
    }

    .users-table th:nth-child(4) {
        width: 150px;
        min-width: 130px;
        max-width: 180px;
    }
}

@media only screen and (width < 1024px) {
    .table-scroll-wrapper table.users-table {
        width: max(800px, 100%) !important;
        min-width: 800px;
    }
}

@media only screen and (width < 768px) {
    .users-table th:nth-child(2) {
        width: 120px;
        min-width: 100px;
        max-width: 140px;
    }

    .users-table th:nth-child(3) {
        width: 180px;
        min-width: 160px;
        max-width: 200px;
    }

    .table-scroll-wrapper table.users-table {
        width: max(750px, 100%) !important;
    }
}

/* task filters */

.task-page-header {
    margin-bottom: 20px;
}

.task-page-title {
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    color: #0E102B;
    margin: 0 0 8px 0;
}

.task-page-subtitle {
    color: #979797;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
}

.task-title-section {
    margin-bottom: 18px;
}

.task-header-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #0E102B;
}

.task-filters-section {
    margin-bottom: 18px;
    display: flex;
    justify-content: flex-end;
}

.task-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.task-filters .btn {
    width: auto !important;
    background-color: var(--color-dark-main) !important;
    min-width: 80px;
    flex-shrink: 0;
}

@media only screen and (width < 768px) {
    .task-filters-section {
        justify-content: flex-start;
    }

    .task-filters {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }
}

/* task empty state */

.task-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.task-empty-icon {
    margin-bottom: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.task-empty-icon svg {
    opacity: 0.3;
}

.task-empty-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 12px;
    color: #0E102B;
}

.task-empty-text {
    color: #979797;
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 24px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.task-empty-guide {
    background-color: #F8F9FC;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.task-empty-guide-title {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 24px;
    color: #0E102B;
    text-align: center;
}

.task-empty-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.task-empty-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.task-empty-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #2049C4;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.task-empty-step-content {
    flex: 1;
}

.task-empty-step-title {
    font-weight: 600;
    font-size: 16px;
    color: #0E102B;
    margin-bottom: 4px;
}

.task-empty-step-description {
    font-size: 14px;
    color: #979797;
    line-height: 20px;
}

.task-empty-action {
    text-align: center;
}

.task-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* task table styles */

.tasks-table {
    table-layout: fixed;
    width: 100%;
}

.tasks-table th:nth-child(1) {
    /* Task */
    width: 25%;
    min-width: 200px;
}

.tasks-table th:nth-child(2) {
    /* Source */
    width: 15%;
    min-width: 120px;
}

.tasks-table th:nth-child(3) {
    /* Property */
    width: 20%;
    min-width: 150px;
}

.tasks-table th:nth-child(4) {
    /* Priority */
    width: 10%;
    min-width: 80px;
}

.tasks-table th:nth-child(5) {
    /* Status */
    width: 10%;
    min-width: 80px;
}

.tasks-table th:nth-child(6) {
    /* Created */
    width: 10%;
    min-width: 100px;
}

.tasks-table th:nth-child(7) {
    /* Actions */
    width: 20% !important;
    min-width: 200px !important;
}

.tasks-table th:last-child {
    width: 20% !important;
    min-width: 200px !important;
}

.tasks-table td:nth-child(1) {
    /* Task column */
    white-space: normal;
    word-wrap: break-word;
    overflow: visible;
    text-overflow: unset;
}

.tasks-table td:nth-child(7) {
    /* Actions column */
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
    width: 20% !important;
    min-width: 200px !important;
}

.tasks-table td:last-child {
    width: 20% !important;
    min-width: 200px !important;
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
}

.tasks-table .table-action-btns {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.tasks-table .table-action-button {
    flex-shrink: 0;
    min-width: 60px;
    max-width: none;
    white-space: nowrap;
    background-image: none !important;
    padding: 7px 12px;
    width: auto;
}

@media only screen and (width < 1024px) {
    .table-scroll-wrapper table.tasks-table {
        width: max(900px, 100%) !important;
        min-width: 900px;
    }
}

.task-link {
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}

.task-description,
.task-meta {
    color: #979797;
}

.task-overdue {
    color: #AC3014;
    font-weight: 600;
}

/* Settings Page Styles */

/* Settings Page Header */
.settings-page-header {
    margin-top: 20px;
    margin-bottom: 32px;
}

.settings-page-title {
    font-size: 32px;
    font-weight: 700;
    color: #0f1419;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.settings-page-subtitle {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* Settings Tabs */
.settings-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 32px;
    border-bottom: 1px solid #e5e7eb;
}

.settings-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.settings-tab:hover {
    color: #374151;
    text-decoration: none;
}

.settings-tab.active {
    color: #2049c4;
    border-bottom-color: #2049c4;
}

.settings-tab svg {
    width: 18px;
    height: 18px;
}

/* Settings Content */
.settings-content {
    min-height: 400px;
}

/* Settings Section */
.settings-section {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 24px;
}

.settings-section-header {
    margin-bottom: 24px;
}

.settings-section-title {
    font-size: 20px;
    font-weight: 600;
    color: #0f1419;
    margin: 0 0 4px 0;
}

.settings-section-description {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* Coming Soon State */
.settings-coming-soon {
    text-align: center;
    padding: 48px 24px;
}

.settings-coming-soon-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.settings-coming-soon-title {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px 0;
}

.settings-coming-soon-text {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* Notification Settings Specific Styles */

/* Notification Legend */
.notification-legend {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.notification-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.notification-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}

.notification-icon.none {
    background: #f3f4f6;
    color: #6b7280;
}

.notification-icon.email {
    background: #dbeafe;
    color: #1d4ed8;
}

.notification-icon.sms {
    background: #dcfce7;
    color: #059669;
}

.notification-icon.both {
    background: #fef3c7;
    color: #d97706;
}

/* Notification Form */
.notification-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Bulk Actions */
.notification-bulk-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.notification-bulk-actions .btn {
    font-size: 13px;
    padding: 8px 12px;
}

.notification-bulk-save .btn {
    background: #2049c4;
    color: white;
    font-weight: 600;
}

/* Properties List */
.notification-properties {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Property Card */
.notification-property-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.notification-property-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* Property Info */
.notification-property-info {
    flex: 1;
    min-width: 0;
}

.notification-property-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.notification-property-title {
    font-size: 16px;
    font-weight: 600;
    color: #0f1419;
    margin: 0;
}

.notification-property-status {
    display: flex;
    align-items: center;
}

.property-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
}

.property-status.monitoring {
    background: #dcfce7;
    color: #059669;
}

.property-status.not-monitoring {
    background: #f3f4f6;
    color: #6b7280;
}

.notification-property-address {
    font-size: 14px;
    color: #374151;
    line-height: 1.4;
}

.notification-property-location {
    font-size: 13px;
    color: #6b7280;
}

/* Property Settings */
.notification-property-settings {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 280px;
}

/* Current Setting */
.notification-current-setting {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.notification-current-label {
    color: #6b7280;
    font-weight: 500;
}

.notification-current-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.notification-current-badge.none {
    background: #f3f4f6;
    color: #6b7280;
}

.notification-current-badge.email {
    background: #dbeafe;
    color: #1d4ed8;
}

.notification-current-badge.sms {
    background: #dcfce7;
    color: #059669;
}

.notification-current-badge.both {
    background: #fef3c7;
    color: #d97706;
}

/* Notification Options */
.notification-options {
    display: flex;
    gap: 8px;
}

/* Global Notification Settings */
.notification-global-section {
    margin-bottom: 32px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.notification-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px 0;
}

.notification-section-description {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* Global Options (Who Gets Alerts) */
.notification-global-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.notification-global-option {
    position: relative;
    cursor: pointer;
    margin: 0;
}

.notification-global-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.notification-global-option-content {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    transition: all 0.2s ease;
}

.notification-global-option input[type="radio"]:checked+.notification-global-option-content {
    border-color: #2563eb;
    background: #eff6ff;
}

.notification-global-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.notification-global-icon.admin {
    background: #fef3c7;
}

.notification-global-icon.all {
    background: #dbeafe;
}

.notification-global-text h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.notification-global-text p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.4;
}

/* Default Notification Options */
.notification-default-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.notification-default-option {
    position: relative;
    cursor: pointer;
    margin: 0;
}

.notification-default-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.notification-default-option-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    transition: all 0.2s ease;
    height: 100%;
}

.notification-default-option input[type="radio"]:checked+.notification-default-option-content {
    border-color: #2563eb;
    background: #eff6ff;
}

.notification-default-text h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.notification-default-text p {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

/* Info Card */
.notification-info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.notification-info-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.notification-info-content {
    flex: 1;
}

.notification-info-content h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.notification-info-content p {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

.notification-info-content p:last-child {
    margin-bottom: 0;
}

.notification-info-action {
    flex-shrink: 0;
}

/* Save Section */
.notification-save-section {
    display: flex;
    justify-content: center;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.btn-primary {
    background: #2563eb;
    color: white;
    border: none;
}

.btn-primary:hover {
    background: #1d4ed8;
}

.btn-large {
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
}

.btn-outline {
    background: transparent;
    color: #2563eb;
    border: 1px solid #2563eb;
}

.btn-outline:hover {
    background: #2563eb;
    color: white;
}

@media (max-width: 768px) {
    .notification-global-options {
        grid-template-columns: 1fr;
    }

    .notification-default-options {
        grid-template-columns: 1fr;
    }

    .notification-info-card {
        flex-direction: column;
        text-align: center;
    }
}

.notification-option {
    position: relative;
    cursor: pointer;
    margin: 0;
}

.notification-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.notification-option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    transition: all 0.2s ease;
    min-width: 60px;
}

.notification-option-content span {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    text-align: center;
    line-height: 1.2;
}

.notification-option input[type="radio"]:checked+.notification-option-content {
    border-color: #2049c4;
    background: #f0f4ff;
}

.notification-option input[type="radio"]:checked+.notification-option-content span {
    color: #2049c4;
}

.notification-option:hover .notification-option-content {
    border-color: #d1d5db;
}

/* Empty State */
.notification-empty-state {
    text-align: center;
    padding: 48px 24px;
}

.notification-empty-icon {
    font-size: 64px;
    margin-bottom: 24px;
    opacity: 0.8;
}

.notification-empty-title {
    font-size: 20px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px 0;
}

.notification-empty-text {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 24px 0;
}

.notification-empty-state .btn {
    background: #2049c4;
    color: white;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .settings-tabs {
        flex-direction: column;
        gap: 0;
        border-bottom: none;
    }

    .settings-tab {
        border-bottom: 1px solid #e5e7eb;
        border-right: none;
    }

    .settings-tab.active {
        border-bottom-color: #e5e7eb;
        border-left: 3px solid #2049c4;
        background: #f0f4ff;
    }

    .notification-legend {
        flex-direction: column;
        gap: 12px;
    }

    .notification-property-card {
        flex-direction: column;
        gap: 16px;
    }

    .notification-property-settings {
        min-width: auto;
        width: 100%;
    }

    .notification-options {
        flex-wrap: wrap;
    }

    .notification-bulk-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
}

/* Notification Styles */
.notification-container {
    position: relative;
    display: inline-block;
}

.notification-bell {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.notification-bell:hover {
    background-color: #f3f4f6;
}

.notification-bell:focus {
    outline: none;
    background-color: #f3f4f6;
}

.notification-badge {
    position: absolute;
    top: 4px;
    right: -11px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-radius: 10px;
    min-width: 13px;
    height: 16px;
    padding: 0 4px;
    font-size: 10.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
    line-height: 1;
    letter-spacing: 0;
}

.notification-badge:empty {
    display: none;
}

/* Ensure the SVG icon has proper styling */
.notification-bell svg {
    transition: all 0.2s ease;
    width: 30px;
    height: auto;
}

.notification-bell:hover svg {
    stroke: #374151;
}

.notification-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 320px;
    max-height: 400px;
    z-index: 1000;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    pointer-events: none;
}

.notification-dropdown[style*="block"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Add a small arrow pointing to the bell */
.notification-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 16px;
    width: 12px;
    height: 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}

.notification-header {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.mark-all-read {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.mark-all-read:hover {
    background-color: #eff6ff;
}

.notification-list {
    max-height: 280px;
    overflow-y: auto;
}

.notification-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.notification-item:hover {
    background-color: #f9fafb;
}

.notification-item.unread {
    background-color: #eff6ff;
    border-left: 3px solid #3b82f6;
}

.notification-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.notification-icon.task-icon {
    background-color: #dbeafe;
    color: #3b82f6;
}

.notification-icon.complaint-icon {
    background-color: #fef3c7;
    color: #d97706;
}

.notification-icon.violation-icon {
    background-color: #fee2e2;
    color: #dc2626;
}

.notification-icon.property-icon {
    background-color: #d1fae5;
    color: #059669;
}

.notification-icon.alert-icon {
    background-color: #fde68a;
    color: #d97706;
}

.notification-icon.default-icon {
    background-color: #f3f4f6;
    color: #6b7280;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-message {
    font-size: 14px;
    color: #111827;
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.notification-time {
    font-size: 12px;
    color: #6b7280;
}

.notification-footer {
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.view-all-link {
    color: #3b82f6;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.view-all-link:hover {
    text-decoration: underline;
}

.loading {
    padding: 20px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.no-notifications {
    padding: 40px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.no-notifications svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Dro
pdown notification mark as read button */
.notification-actions-dropdown {
    flex-shrink: 0;
    margin-left: 8px;
}

.mark-read-btn {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #6b7280;
    transition: all 0.2s;
}

.mark-read-btn:hover {
    background: #e5e7eb;
    color: #374151;
    border-color: #9ca3af;
}

.mark-read-btn:active {
    transform: scale(0.95);
}

/* Company Info Section Styles */
.company-info-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.form-input,
.form-group input,
.form-group textarea,
.form-group select {
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2937;
    transition: border-color 0.2s;
}

.form-input:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #4220ED;
    box-shadow: 0 0 0 3px rgba(66, 32, 237, 0.1);
}

.form-input::placeholder {
    color: #9ca3af;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.btn,
.form-actions button {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary,
.form-actions button[type="submit"] {
    background: #4220ED;
    color: white;
}

.btn-primary:hover,
.form-actions button[type="submit"]:hover {
    background: #3318d0;
}

.permission-notice {
    padding: 16px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    color: #92400e;
    font-size: 14px;
}

.company-info-display {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.info-label {
    font-weight: 500;
    color: #374151;
    font-size: 14px;
}

.info-value {
    color: #6b7280;
    font-size: 14px;
}

.settings-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 32px 0;
}

@media only screen and (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .info-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Flash Messages */
.flash-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.flash-notice {
    background-color: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.flash-alert {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.flash-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.flash-message span {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.flash-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.flash-close:hover {
    opacity: 1;
}
/* ========================================
   Super Admin Companies - Visual Feedback & Interactions
   ======================================== */

/* ========================================
   10.1 Hover States
   ======================================== */

/* Table row hover effect */
.companies-table tbody tr {
  transition: background-color 0.2s ease;
}

.companies-table tbody tr:hover {
  background-color: #f9fafb;
}

/* Actions dropdown button hover */
.actions-dropdown-btn {
  padding: 8px 12px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.actions-dropdown-btn:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
  color: #1f2937;
}

.actions-dropdown-btn:active,
.actions-dropdown-btn.active {
  background-color: #dee2e6;
  border-color: #adb5bd;
}

.actions-dropdown-btn:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* Dropdown menu styling */
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 999999;
  min-width: 180px;
  display: none;
  overflow: hidden;
}

.dropdown-menu.show {
  display: block;
}

/* Dropdown item hover effects */
.dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-item:hover {
  background-color: #f8f9fa;
  color: #1f2937;
  text-decoration: none;
}

.dropdown-item:focus {
  outline: 2px solid #4220ED;
  outline-offset: -2px;
  background-color: #f8f9fa;
}

.dropdown-item.danger {
  color: #dc2626;
}

.dropdown-item.danger:hover {
  background-color: #fef2f2;
  color: #b91c1c;
}

.dropdown-item.success {
  color: #16a34a;
}

.dropdown-item.success:hover {
  background-color: #f0fdf4;
  color: #15803d;
}

.dropdown-divider {
  height: 1px;
  background-color: #e5e7eb;
  margin: 4px 0;
}

/* Keep the + icon and label on one line in the header action button */
.add-company-button {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Link hover effects */
.search-results-info .clear-search {
  color: #4220ED;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.search-results-info .clear-search:hover {
  color: #3614c7;
  text-decoration: underline;
}

.empty-state-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4220ED;
  color: #ffffff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.empty-state-btn:hover {
  background-color: #3614c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: #ffffff;
}

.empty-state-btn:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* Checkbox label hover */
.companies-table .label {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.companies-table .label:hover {
  opacity: 0.8;
}

/* Company name link hover (if applicable) */
.company-info strong {
  transition: color 0.2s ease;
}

.companies-table tbody tr:hover .company-info strong {
  color: #4220ED;
}

/* ========================================
   10.2 Loading States
   ======================================== */

/* Loading overlay for table updates */
.table-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.table-loading-overlay.hidden {
  display: none;
}

/* Loading spinner */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f4f6;
  border-top-color: #4220ED;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Button loading state */
.actions-dropdown-btn.loading,
.empty-state-btn.loading {
  position: relative;
  color: transparent;
  pointer-events: none;
  cursor: not-allowed;
}

.actions-dropdown-btn.loading::after,
.empty-state-btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-left: -8px;
  border: 2px solid #f3f4f6;
  border-top-color: #4220ED;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* Disabled button state */
.actions-dropdown-btn:disabled,
.empty-state-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Table wrapper with loading state */
.dashboard-table-wrapper {
  position: relative;
}

/* Search input loading indicator */
.dashboard-search {
  position: relative;
}

.dashboard-search.loading::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid #e5e7eb;
  border-top-color: #4220ED;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ========================================
   10.3 Focus States
   ======================================== */

/* Enhanced focus indicators for keyboard navigation */
.companies-table tbody tr:focus-within {
  outline: 2px solid #4220ED;
  outline-offset: -2px;
}

/* Checkbox focus */
.companies-table input[type="checkbox"]:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* Search input focus */
.dashboard-search input:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
  border-color: #4220ED;
}

/* Dropdown button focus visible */
.actions-dropdown-btn:focus-visible {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* Dropdown item focus visible */
.dropdown-item:focus-visible {
  outline: 2px solid #4220ED;
  outline-offset: -2px;
  background-color: #f8f9fa;
}

/* Link focus visible */
a:focus-visible {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* Remove default focus outline for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Focus trap for dropdown menus */
.dropdown-menu.show {
  /* Ensure dropdown is keyboard accessible */
  outline: none;
}

/* Pagination link focus */
.pagination a:focus-visible {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 768px) {
  .actions-dropdown-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .dropdown-menu {
    min-width: 160px;
  }
  
  .dropdown-item {
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* ========================================
   Accessibility - Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .companies-table tbody tr,
  .actions-dropdown-btn,
  .dropdown-item,
  .empty-state-btn,
  .loading-spinner {
    transition: none;
    animation: none;
  }
  
  .empty-state-btn:hover {
    transform: none;
  }
}

/* ========================================
   High Contrast Mode Support
   ======================================== */

@media (prefers-contrast: high) {
  .companies-table tbody tr:hover {
    background-color: #e5e7eb;
  }
  
  .actions-dropdown-btn {
    border-width: 2px;
  }
  
  .dropdown-item:hover {
    background-color: #e5e7eb;
  }
  
  .dropdown-menu {
    border-width: 2px;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 
 * It is generally better to create a new file per style scope.
 *


 */