/*
 * @file styles.css
 * @module EvictSure Platform
 * @since 2024
 *
 * PROPRIETARY AND CONFIDENTIAL
 * ==================================================================================
 *
 * Copyright © 2024-2025 TIU Consulting, LLC. All Rights Reserved.
 *
 * This source code and all associated documentation, materials, and information
 * (collectively, the "Software") are the exclusive property of TIU Consulting, LLC
 * and are protected by copyright law, trade secret law, and other applicable
 * intellectual property rights.
 *
 * UNAUTHORIZED USE PROHIBITED
 * ---------------------------
 * No part of this Software may be reproduced, distributed, transmitted, displayed,
 * published, broadcast, modified, adapted, sold, licensed, or otherwise exploited
 * in any form or by any means, including without limitation by photocopying,
 * recording, or other electronic or mechanical methods, without the prior written
 * permission of TIU Consulting, LLC.
 *
 * RESTRICTIONS
 * ------------
 * You may NOT:
 * - Copy, modify, or create derivative works of this Software
 * - Reverse engineer, disassemble, or decompile this Software
 * - Remove or alter any proprietary notices or labels
 * - Use this Software for any unlawful purpose
 * - Transfer, sublicense, or assign your rights to this Software
 *
 * RESERVATION OF RIGHTS
 * ---------------------
 * TIU Consulting reserves all rights not expressly granted herein. TIU Consulting
 * retains the exclusive right to alter, modify, update, or delete this Software
 * at any time without notice. Any unauthorized use will be prosecuted to the
 * maximum extent permissible under applicable law.
 *
 * DISCLAIMER OF LEGAL ADVICE
 * --------------------------
 * THIS SOFTWARE IS PROVIDED FOR BUSINESS PROCESS AUTOMATION AND CASE MANAGEMENT
 * PURPOSES ONLY. NOTHING IN THIS SOFTWARE CONSTITUTES LEGAL ADVICE OR CREATES
 * AN ATTORNEY-CLIENT RELATIONSHIP. THE SOFTWARE IS NOT A SUBSTITUTE FOR
 * PROFESSIONAL LEGAL COUNSEL.
 *
 * Users must:
 * - Consult with qualified legal professionals for legal advice
 * - Verify all legal procedures and requirements independently
 * - Ensure compliance with applicable local, state, and federal laws
 * - Accept full responsibility for any legal documents or actions taken
 *
 * NO WARRANTY
 * -----------
 * THIS SOFTWARE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO WARRANTIES OF MERCHANTABILITY, FITNESS
 * FOR A PARTICULAR PURPOSE, TITLE, OR NON-INFRINGEMENT.
 *
 * CONTACT INFORMATION
 * -------------------
 * For licensing inquiries or written permission requests:
 * TIU Consulting, LLC
 * Email: ai@tiuconsulting.com
 *
 * ==================================================================================
 */

/* EvictSure Shared Styles - Comprehensive Design System */

/* ========================================
   COMPONENT IMPORTS
======================================== */

/* Import core design tokens FIRST - Required for all CSS variables */
@import url('./design-tokens.css');

/* Import unified dropdown component with dark mode support */
@import url('./dropdown-component.css');

/* ========================================
   CSS VARIABLES AND DESIGN TOKENS
======================================== */

/* IMPORTANT: Core design tokens are now defined in design-tokens.css
   This section provides backward compatibility aliases for existing code
   All values reference the unified token system defined in design-tokens.css */

/* ========================================
   SCROLLBAR STYLING
======================================== */

/* Firefox - Universal scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-secondary);
}

/* Chrome, Edge, Safari - Webkit scrollbar styling */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 6px;
    border: 2px solid var(--bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Dark mode specific scrollbar adjustments */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1a1a1a;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #404040;
    border: 2px solid #1a1a1a;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #505050;
}

[data-theme="dark"] * {
    scrollbar-color: #404040 #1a1a1a;
}

:root {
    /* ====================================================================
       PRIMARY COLORS - Reference unified design tokens
       ==================================================================== */

    --primary: var(--evict-primary);
    --primary-dark: var(--evict-primary-dark);
    --primary-light: var(--evict-primary-light);
    --primary-bg: var(--evict-primary-bg);

    /* ====================================================================
       STATUS COLORS - Reference unified design tokens
       ==================================================================== */

    --success: var(--evict-success);
    --success-light: var(--evict-success-light);
    --success-bg: var(--evict-success-bg);
    --success-bg-strong: var(--evict-success-bg-strong);

    --warning: var(--evict-warning);
    --warning-light: var(--evict-warning-light);
    --warning-bg: var(--evict-warning-bg);

    --danger: var(--evict-danger);
    --danger-light: var(--evict-danger-light);
    --danger-bg: var(--evict-danger-bg);

    --info: var(--evict-info);
    --info-light: var(--evict-info-light);
    --info-bg: var(--evict-info-bg);

    /* ====================================================================
       NEUTRAL COLORS - Reference unified design tokens
       ==================================================================== */

    --dark: var(--evict-text-primary);
    --text: var(--evict-text-secondary);
    --text-light: var(--evict-text-tertiary);
    --text-muted: var(--evict-text-disabled);
    --text-secondary: var(--evict-text-secondary);

    --light: var(--evict-gray-100);
    --bg: var(--evict-bg-primary);
    --bg-secondary: var(--evict-bg-secondary);
    --bg-tertiary: var(--evict-bg-tertiary);
    --border: var(--evict-border-primary);
    --border-light: var(--evict-border-secondary);

    /* ====================================================================
       SHADOWS - Reference unified design tokens
       ==================================================================== */

    --shadow: var(--evict-shadow-md);
    --shadow-lg: var(--evict-shadow-lg);
    --shadow-hover: var(--evict-shadow-primary);

    /* ====================================================================
       SPACING - Reference unified design tokens
       ==================================================================== */

    --spacing-xs: var(--evict-spacing-xs);
    --spacing-sm: var(--evict-spacing-sm);
    --spacing-md: var(--evict-spacing-md);
    --spacing-lg: var(--evict-spacing-lg);
    --spacing-xl: var(--evict-spacing-xl);
    --spacing-xxl: var(--evict-spacing-2xl);

    /* ====================================================================
       BORDER RADIUS - Reference unified design tokens
       ==================================================================== */

    --radius-sm: var(--evict-radius-sm);
    --radius-md: var(--evict-radius-md);
    --radius-lg: var(--evict-radius-lg);
    --radius-xl: var(--evict-radius-xl);
    --radius-full: 50%;

    /* ====================================================================
       TYPOGRAPHY - Reference unified design tokens
       ==================================================================== */

    --font-family: var(--evict-font-family-base);
    --font-size-xs: var(--evict-font-size-xs);
    --font-size-sm: var(--evict-font-size-sm);
    --font-size-md: var(--evict-font-size-md);
    --font-size-lg: var(--evict-font-size-lg);
    --font-size-xl: var(--evict-font-size-xl);
    --font-size-xxl: var(--evict-font-size-2xl);
    --font-size-title: 24px;
    --font-size-hero: 32px;

    /* ====================================================================
       LAYOUT - Component specific
       ==================================================================== */

    --sidebar-width: 250px;
    --sidebar-collapsed-width: 72px;
    --header-height: 70px;
    --container-max-width: 1200px;
}

/* Dark Theme Variables - References unified design tokens */
[data-theme="dark"] {
    /* Dark mode colors are automatically handled by design-tokens.css
       which provides adaptive colors in [data-theme="dark"] selector */

    /* These aliases maintain backward compatibility while using the
       adaptive colors defined in design-tokens.css */

    --primary: var(--evict-primary);
    --primary-dark: var(--evict-primary-dark);
    --primary-light: var(--evict-primary-light);
    --primary-bg: var(--evict-primary-bg);

    --success: var(--evict-success);
    --success-light: var(--evict-success-light);
    --success-bg: var(--evict-success-bg);

    --warning: var(--evict-warning);
    --warning-light: var(--evict-warning-light);
    --warning-bg: var(--evict-warning-bg);

    --danger: var(--evict-danger);
    --danger-light: var(--evict-danger-light);
    --danger-bg: var(--evict-danger-bg);

    --info: var(--evict-info);
    --info-light: var(--evict-info-light);
    --info-bg: var(--evict-info-bg);

    --dark: var(--evict-text-primary);
    --text: var(--evict-text-secondary);
    --text-light: var(--evict-text-tertiary);
    --text-muted: var(--evict-text-disabled);

    --light: var(--evict-gray-100);
    --bg: var(--evict-bg-secondary);
    --bg-secondary: var(--evict-bg-primary);
    --border: var(--evict-border-primary);
    --border-light: var(--evict-border-secondary);

    --shadow: var(--evict-shadow-md);
    --shadow-lg: var(--evict-shadow-lg);
    --shadow-hover: var(--evict-shadow-primary);
}

/* Dark mode header user menu styles */
[data-theme="dark"] .evictsure-user-menu {
    background: var(--bg-secondary);
    color: var(--text);
    border: 1px solid var(--border);
}

[data-theme="dark"] .evictsure-user-menu:hover {
    background: var(--border);
    border-color: var(--border-light);
}

[data-theme="dark"] .evictsure-user-info {
    color: var(--text);
}

[data-theme="dark"] .evictsure-user-name {
    color: var(--dark) !important;
}

[data-theme="dark"] .evictsure-user-role {
    color: var(--text-light) !important;
}

/* Smooth theme transition - scoped to interactive elements only for performance */
button,
a,
.evictsure-btn,
.evictsure-card,
.evictsure-tab,
input:not([type="file"]),
textarea,
select {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Prevent transition on page load */
.preload * {
    transition: none !important;
}

/* Print styles - always use light theme */
@media print {
    * {
        background: white !important;
        color: black !important;
    }
}

/* Accessibility - reduce motion */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ========================================
   RESET AND BASE STYLES
======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    font-size: var(--font-size-md);
    overflow-x: hidden;
}

/* ========================================
   LAYOUT COMPONENTS
======================================== */

/* Main Layout Container */
.evictsure-layout {
    display: flex;
    min-height: 100vh;
}

.evictsure-main {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    transition: margin-left 0.3s ease;
}

.evictsure-content {
    flex: 1;
    padding: var(--spacing-xl);
    background: var(--bg);
}

/* Sidebar Styles */
.evictsure-sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
    transition: transform 0.3s ease, width 0.3s ease;
    transform: translateX(0);
}

.evictsure-sidebar-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.evictsure-sidebar-header:hover {
    opacity: 0.8;
    background-color: rgba(0, 0, 0, 0.02);
}

.evictsure-sidebar-header:active {
    opacity: 0.6;
}

.evictsure-logo {
    width: 120px; /* Increase the width to make the logo larger */
    height: 72px; /* Increase the height to make the logo larger */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    color: white;
    flex-shrink: 0;
    /* Remove background when using image logo */
}

.evictsure-logo-img {
    width: 100%; /* Set the width to 100% to make the logo image fill the container */
    height: auto; /* Set the height to auto to maintain the aspect ratio of the image */
    object-fit: contain; /* Keep the image within the container while maintaining its aspect ratio */
    border-radius: var(--radius-sm);
}

.evictsure-brand {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: var(--dark);
}

.evictsure-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    z-index: 1000;
}

/* Navigation Menu */
.evictsure-nav {
    padding: var(--spacing-lg) 0;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px); /* Adjust for sidebar header and spacing */
    overflow-y: auto;
    text-align: left;
}

.evictsure-nav-section {
    margin-bottom: var(--spacing-md);
}

.evictsure-nav-section:last-child {
    margin-top: auto;
    margin-bottom: 0;
}

.evictsure-nav-title {
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-xs);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.evictsure-nav-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left !important;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border: none;
    background: none;
    width: 100%;
    font-family: inherit;
    font-size: var(--font-size-md);
}

.evictsure-nav-item span {
    text-align: left !important;
}

.evictsure-nav-item:hover {
    background: var(--bg);
    color: var(--primary);
}

.evictsure-nav-item.active {
    background: var(--primary-bg);
    color: var(--primary);
    font-weight: 500;
}

.evictsure-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary);
}

.evictsure-nav-icon {
    font-size: var(--font-size-lg);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.evictsure-nav-badge {
    background: var(--warning);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    margin-left: auto;
}

.evictsure-nav-divider {
    height: 1px;
    background: var(--border);
    margin: var(--spacing-lg);
}

/* Header Styles */
.evictsure-header {
    background: var(--bg-secondary);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 99;
    height: var(--header-height);
    width: 100%;
}

.evictsure-header-content {
    padding: 0 var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.evictsure-page-title {
    font-size: var(--font-size-title);
    font-weight: 600;
    color: var(--dark);
}

.evictsure-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

/* User Menu */
.evictsure-user-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-family: inherit;
}

.evictsure-user-menu:hover {
    background: var(--border);
}

.evictsure-user-avatar {
    width: 32px;
    height: 32px;
    background: var(--primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.evictsure-user-info {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.evictsure-user-name {
    font-weight: 600;
    font-size: var(--font-size-md);
    color: var(--dark);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.evictsure-user-role {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* User Menu Wrapper */
.evictsure-user-menu-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* User Menu Dropdown */
.user-menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    min-width: 280px;
    margin-top: 8px;
    overflow-y: auto;
    max-height: calc(100vh - 80px);
    animation: userMenuFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes userMenuFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.user-menu-item {
    transition: all 0.2s ease;
}

.user-menu-item:hover {
    background: var(--bg);
    color: var(--primary);
}

.user-menu-item:focus {
    outline: none;
    background: var(--bg);
    color: var(--primary);
    box-shadow: inset 0 0 0 2px var(--primary);
}

.user-menu-item-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.user-menu-item-danger:focus {
    outline: none;
    background: rgba(239, 68, 68, 0.1);
    box-shadow: inset 0 0 0 2px var(--danger);
}

/* ========================================
   COMPONENT STYLES
======================================== */

/* Buttons */
.evictsure-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: inherit;
    text-align: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

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

.evictsure-btn-primary {
    background: var(--primary);
    color: white;
}

.evictsure-btn-primary:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.evictsure-btn-secondary {
    background: var(--bg-secondary);
    color: var(--text);
    border: 1px solid var(--border);
}

.evictsure-btn-secondary:hover:not(:disabled) {
    background: var(--bg);
    border-color: var(--primary);
    color: var(--primary);
}

.evictsure-btn-success {
    background: var(--success);
    color: white;
}

.evictsure-btn-success:hover:not(:disabled) {
    background: var(--success-light);
    transform: translateY(-2px);
}

.evictsure-btn-warning {
    background: var(--warning);
    color: white;
}

.evictsure-btn-warning:hover:not(:disabled) {
    background: var(--warning-light);
    transform: translateY(-2px);
}

.evictsure-btn-danger {
    background: var(--danger);
    color: white;
}

.evictsure-btn-danger:hover:not(:disabled) {
    background: var(--danger-light);
    transform: translateY(-2px);
}

.evictsure-btn-sm {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.evictsure-btn-lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}

/* Cards */
.evictsure-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: all 0.3s ease;
}

.evictsure-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

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

.evictsure-card-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--dark);
    margin: 0;
}

.evictsure-card-body {
    padding: var(--spacing-lg);
}

.evictsure-card-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border);
    background: var(--bg);
}

/* Status Badges */
.evictsure-status {
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.evictsure-status-active {
    background: var(--success-bg);
    color: var(--success);
}

.evictsure-status-inactive {
    background: var(--light);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.evictsure-status-pending {
    background: var(--warning-bg);
    color: var(--warning);
}

.evictsure-status-review {
    background: var(--info-bg);
    color: var(--info);
}

.evictsure-status-completed {
    background: var(--success-bg);
    color: var(--success);
}

.evictsure-status-overdue {
    background: var(--danger-bg);
    color: var(--danger);
}

.evictsure-status-urgent {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger);
    font-weight: 600;
}
.evictsure-status-closed {
    background: var(--light);
    color: var(--text-muted);
}

.evictsure-status-billing {
    background: rgba(147, 51, 234, 0.1);  /* purple-bg */
    color: #7c3aed;                        /* purple */
}

/* Demo Data Indicator - Theme Aware */
.evictsure-demo-indicator {
    background: var(--warning-bg);
    border: 1px solid var(--warning);
    color: var(--warning);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: all 0.3s ease;
}

[data-theme="dark"] .evictsure-demo-indicator {
    background: rgba(255, 214, 10, 0.15);
    border-color: #FFD60A;
    color: #FFD60A;
}

/* Form Elements */
.evictsure-form-group {
    margin-bottom: var(--spacing-lg);
}

.evictsure-form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    color: var(--dark);
    font-size: var(--font-size-md);
}

.evictsure-form-input,
.evictsure-form-select,
.evictsure-form-textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    font-family: inherit;
    background: var(--bg-secondary);
    color: var(--text);
    transition: all 0.3s ease;
}

/* Placeholder styling for dark mode compatibility */
.evictsure-form-input::placeholder,
.evictsure-form-textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.evictsure-form-input:focus,
.evictsure-form-select:focus,
.evictsure-form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* Disabled state for form inputs */
.evictsure-form-input:disabled,
.evictsure-form-select:disabled,
.evictsure-form-textarea:disabled {
    background: var(--light);
    border-color: var(--border);
    color: #6b7280;
    cursor: not-allowed;
    opacity: 1;
    transition: all 0.3s ease;
}

[data-theme="dark"] .evictsure-form-input:disabled,
[data-theme="dark"] .evictsure-form-select:disabled,
[data-theme="dark"] .evictsure-form-textarea:disabled {
    background: #3a3a3c;
    border-color: #5a5a5c;
    color: #8E8E93;
    opacity: 1;
}

.evictsure-form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Select dropdown options - Light mode */
.evictsure-form-select option {
    background: var(--bg-secondary);
    color: var(--text);
    padding: var(--spacing-sm) var(--spacing-md);
    line-height: 1.5;
}

/* Select dropdown option hover and selected states - Light mode */
.evictsure-form-select option:checked,
.evictsure-form-select option:hover {
    background: var(--primary-bg);
    color: var(--dark);
}

/* Search Box */
.evictsure-search {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.evictsure-search-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-xl) var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    transition: all 0.3s ease;
    background: var(--bg-secondary);
    color: var(--dark);
}

/* Dark theme overrides for form elements */
[data-theme="dark"] .evictsure-form-label {
    color: #e5e7eb;
}

[data-theme="dark"] .evictsure-form-input,
[data-theme="dark"] .evictsure-form-select,
[data-theme="dark"] .evictsure-form-textarea {
    background: #0f172a;
    border-color: #1f2937;
    color: #f3f4f6;
    box-shadow: 0 0 0 transparent;
}

[data-theme="dark"] .evictsure-form-input:focus,
[data-theme="dark"] .evictsure-form-select:focus,
[data-theme="dark"] .evictsure-form-textarea:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

[data-theme="dark"] .evictsure-form-input::placeholder,
[data-theme="dark"] .evictsure-form-textarea::placeholder {
    color: #94a3b8;
}

/* Dark mode select dropdown options */
[data-theme="dark"] .evictsure-form-select option {
    background: #0f172a;
    color: #f3f4f6;
    padding: var(--spacing-sm) var(--spacing-md);
    line-height: 1.5;
}

/* Dark mode select option hover and selected states */
[data-theme="dark"] .evictsure-form-select option:checked {
    background: #1e293b;
    color: #ffffff;
}

[data-theme="dark"] .evictsure-form-select option:hover {
    background: #1e293b;
    color: #ffffff;
}

[data-theme="dark"] .evictsure-search-input {
    background: #0f172a;
    border-color: #1f2937;
    color: #f3f4f6;
}

[data-theme="dark"] .evictsure-search-input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

[data-theme="dark"] .evictsure-search-input::placeholder {
    color: #94a3b8;
}

[data-theme="dark"] .evictsure-search-icon {
    color: #64748b;
}

.evictsure-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.evictsure-search-input::placeholder {
    color: var(--text-muted);
}

.evictsure-search-icon {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: var(--font-size-lg);
}

/* Stat Cards */
.evictsure-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.evictsure-stat-card {
    background: var(--bg-secondary);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    text-align: left;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: var(--spacing-md);
    align-items: center;
}

.evictsure-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.evictsure-stat-card.primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
}

.evictsure-stat-card.success {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
    color: white;
}

.evictsure-stat-card.warning {
    background: linear-gradient(135deg, var(--warning) 0%, var(--warning-light) 100%);
    color: white;
}

.evictsure-stat-card.danger {
    background: linear-gradient(135deg, var(--danger) 0%, var(--danger-light) 100%);
    color: white;
}

.evictsure-stat-icon {
    font-size: var(--font-size-lg);
    grid-row: 1 / -1;
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.evictsure-stat-value {
    font-size: var(--font-size-title);
    font-weight: 700;
    grid-column: 2;
    line-height: 1.2;
}

.evictsure-stat-label {
    font-size: var(--font-size-sm);
    opacity: 0.9;
    grid-column: 2;
}

.evictsure-stat-change {
    font-size: var(--font-size-xs);
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    opacity: 0.85;
}

/* Filters */
.evictsure-filters {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.evictsure-filter-chip {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--text);
    font-family: inherit;
}

.evictsure-filter-chip:hover {
    background: var(--light);
    border-color: var(--primary);
}

.evictsure-filter-chip.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Modals */
.evictsure-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10001;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    will-change: opacity;
}

.evictsure-modal.active {
    display: flex !important;
    opacity: 1 !important;
}

/* Modal Loader Spinner */
.modal-loader {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
    gap: var(--spacing-md);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.evictsure-modal-content {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
}

.evictsure-modal-header {
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.evictsure-modal-title {
    font-size: var(--font-size-xxl);
    font-weight: 600;
    color: var(--dark);
    margin: 0;
}

.evictsure-modal-close {
    background: none;
    border: none;
    font-size: var(--font-size-title);
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
}

.evictsure-modal-close:hover {
    background: var(--bg);
    color: var(--text);
}

.evictsure-modal-body {
    padding: var(--spacing-xl);
}

.evictsure-modal-footer {
    padding: var(--spacing-xl);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    background: var(--bg);
}

/* Data Mock Indicators */
.evictsure-mock-data {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: #856404;
}

.evictsure-live-data {
    background: #d4f4dd;
    border: 1px solid #27ae60;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: #155724;
}

/* ⚡ Enhanced Notifications */

/* Notification Container */
.evictsure-notification-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Notification Bell Button */
.evictsure-notification {
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text);
    transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: var(--font-size-xl);
}

.evictsure-notification:hover {
    color: var(--primary);
    background: var(--bg-hover);
    transform: translateY(-2px);
}

.evictsure-notification:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.evictsure-notification.has-notifications {
    animation: bellRing 2s ease-in-out infinite 10s;
}

@keyframes bellRing {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-5deg); }
    20% { transform: rotate(5deg); }
    30% { transform: rotate(-5deg); }
    40% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
}

/* Bell Icon SVG */
.bell-icon {
    width: 24px;
    height: 24px;
    transition: all 200ms ease;
}

.evictsure-notification:hover .bell-icon {
    transform: scale(1.1);
}

/* Badge with smooth animations */
.evictsure-notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    animation: badgePop 300ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    border: 2px solid var(--bg);
}

@keyframes badgePop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ⚡ Optimized pulse animation for badge updates */
.evictsure-notification-badge.pulse-animation {
    animation: badgePulse 300ms ease-out forwards !important;
}

@keyframes badgePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    }
}

/* Loading Spinner */
.notification-loading-spinner {
    position: absolute;
    width: 18px;
    height: 18px;
    animation: spin 0.8s linear infinite;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary);
    z-index: 10;
    filter: drop-shadow(0 0 2px rgba(59, 130, 246, 0.5));
}

.notification-loading-spinner svg {
    width: 100%;
    height: 100%;
    stroke-linecap: round;
    stroke-width: 2.5px;
}

/* Visual indicator when bell is loading */
.evictsure-notification.is-loading {
    animation: bellPulse 1.5s ease-in-out infinite;
}

@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes bellPulse {
    0%, 100% {
        color: var(--text);
        filter: drop-shadow(0 0 0px rgba(59, 130, 246, 0));
    }
    50% {
        color: var(--primary);
        filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.6));
    }
}

/* ============================================
   Notification Dropdown Styles
   ============================================ */

/* Dropdown Container */
.evictsure-notification-dropdown {
    position: absolute;
    top: 60px;
    right: 20px;
    z-index: 10000;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 400px;
    max-width: calc(100vw - 40px);
    max-height: 500px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideDownNotification 0.2s ease-out;
}

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

/* Dropdown Header */
.evictsure-notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border);
    background-color: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
}

.evictsure-notification-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text);
}

.evictsure-notification-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--text-light);
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.evictsure-notification-close:hover {
    background-color: var(--bg);
    color: var(--text);
}

/* Notification List Container */
.evictsure-notification-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Empty State */
.evictsure-notification-empty {
    padding: var(--spacing-xxl) var(--spacing-lg);
    text-align: center;
}

.evictsure-notification-empty p {
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--text-light);
}

/* Notification Item */
.evictsure-notification-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border);
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.evictsure-notification-item:hover {
    background-color: var(--bg);
}

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

/* Unread notification emphasis */
.evictsure-notification-item.unread {
    background-color: var(--primary-bg);
}

.evictsure-notification-item.unread:hover {
    background-color: rgba(0, 122, 255, 0.12);
}

.evictsure-notification-item.read {
    opacity: 0.7;
}

/* Priority Indicator */
.evictsure-notification-priority {
    font-size: var(--font-size-xl);
    line-height: 1;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background-color: var(--bg);
}

.evictsure-notification-priority.urgent {
    background-color: rgba(255, 59, 48, 0.1);
}

.evictsure-notification-priority.high {
    background-color: rgba(255, 149, 0, 0.1);
}

.evictsure-notification-priority.medium {
    background-color: rgba(0, 122, 255, 0.1);
}

.evictsure-notification-priority.low {
    background-color: rgba(142, 142, 147, 0.1);
}

/* Notification Content */
.evictsure-notification-content {
    flex: 1;
    min-width: 0;
}

.evictsure-notification-subject {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--spacing-xs);
    line-height: 1.4;
}

.evictsure-notification-message {
    font-size: var(--font-size-sm);
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: var(--spacing-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.evictsure-notification-time {
    font-size: var(--font-size-xs);
    color: var(--text-light);
    font-weight: 500;
}

/* Notification Actions */
.evictsure-notification-actions {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.evictsure-btn-small {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--primary);
    background-color: transparent;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.evictsure-btn-small:hover {
    background-color: var(--primary);
    color: white;
    box-shadow: var(--shadow-hover);
}

.evictsure-btn-small:active {
    transform: scale(0.96);
}

/* Dropdown Footer */
.evictsure-notification-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border);
    background-color: var(--bg-secondary);
    position: sticky;
    bottom: 0;
}

.evictsure-notification-footer .evictsure-btn {
    width: 100%;
    justify-content: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .evictsure-notification-dropdown {
        top: 50px;
        right: 10px;
        left: 10px;
        width: auto;
        max-width: none;
    }
}

/* Loading Spinner */
.evictsure-loading {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--light);
    border-top: 4px solid var(--primary);
    border-radius: var(--radius-full);
    animation: spin 1s linear infinite;
}

/* ========================================
   SKELETON LOADING COMPONENTS
======================================== */

/* Base skeleton shimmer animation */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton {
    display: inline-block;
    height: 1em;
    position: relative;
    overflow: hidden;
    background-color: var(--light);
    background-image: linear-gradient(90deg, var(--light), var(--border), var(--light));
    background-size: 200px 100%;
    background-repeat: no-repeat;
    border-radius: var(--radius-sm);
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
}

/* Skeleton variants */
.skeleton-text {
    width: 100%;
    height: 0.8em;
    margin-bottom: 0.5em;
}

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

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

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

.skeleton-title {
    width: 70%;
    height: 1.2em;
    margin-bottom: 0.8em;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.skeleton-avatar.small {
    width: 32px;
    height: 32px;
}

.skeleton-avatar.large {
    width: 48px;
    height: 48px;
}

.skeleton-button {
    width: 80px;
    height: 32px;
    border-radius: var(--radius-md);
}

.skeleton-button.wide {
    width: 120px;
}

.skeleton-badge {
    width: 60px;
    height: 20px;
    border-radius: 20px;
}

/* Organization Card Skeleton */
.skeleton-organization-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.skeleton-org-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--light);
    flex-shrink: 0;
}

.skeleton-org-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.skeleton-org-status {
    width: 50px;
    height: 18px;
    border-radius: 20px;
    background: var(--light);
}

/* User Activity Skeleton */
.skeleton-user-item {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.skeleton-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--light);
    flex-shrink: 0;
}

.skeleton-user-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.skeleton-user-status {
    width: 40px;
    height: 16px;
    border-radius: 20px;
    background: var(--light);
}

/* Statistics Skeleton */
.skeleton-stat {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: center;
}

.skeleton-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--light);
}

.skeleton-stat-number {
    width: 40px;
    height: 24px;
    background: var(--light);
    border-radius: var(--radius-sm);
}

.skeleton-stat-label {
    width: 60px;
    height: 14px;
    background: var(--light);
    border-radius: var(--radius-sm);
}

/* Loading container styles */
.skeleton-loading-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
}

/* Responsive skeleton adjustments */
@media (max-width: 768px) {
    .skeleton-organization-card,
    .skeleton-user-item {
        padding: var(--spacing-sm);
    }
    
    .skeleton-org-icon,
    .skeleton-user-avatar {
        width: 32px;
        height: 32px;
    }
}

/* Utility Classes */
.evictsure-text-center { text-align: center; }
.evictsure-text-left { text-align: left; }
.evictsure-text-right { text-align: right; }

.evictsure-text-primary { color: var(--primary); }
.evictsure-text-success { color: var(--success); }
.evictsure-text-warning { color: var(--warning); }
.evictsure-text-danger { color: var(--danger); }
.evictsure-text-muted { color: var(--text-muted); }

.evictsure-bg-primary { background-color: var(--primary); }
.evictsure-bg-success { background-color: var(--success); }
.evictsure-bg-warning { background-color: var(--warning); }
.evictsure-bg-danger { background-color: var(--danger); }

.evictsure-mt-0 { margin-top: 0; }
.evictsure-mt-1 { margin-top: var(--spacing-xs); }
.evictsure-mt-2 { margin-top: var(--spacing-sm); }
.evictsure-mt-3 { margin-top: var(--spacing-md); }
.evictsure-mt-4 { margin-top: var(--spacing-lg); }
.evictsure-mt-5 { margin-top: var(--spacing-xl); }

.evictsure-mb-0 { margin-bottom: 0; }
.evictsure-mb-1 { margin-bottom: var(--spacing-xs); }
.evictsure-mb-2 { margin-bottom: var(--spacing-sm); }
.evictsure-mb-3 { margin-bottom: var(--spacing-md); }
.evictsure-mb-4 { margin-bottom: var(--spacing-lg); }
.evictsure-mb-5 { margin-bottom: var(--spacing-xl); }

.evictsure-d-none { display: none; }
.evictsure-d-block { display: block; }
.evictsure-d-flex { display: flex; }
.evictsure-d-grid { display: grid; }

/* ========================================
   ANIMATIONS
======================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

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

/* Mobile Toggle Button */
.evictsure-header-content {
    padding: 0 var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.evictsure-header-title-wrapper {
    flex: 1;
    min-width: 0;
    text-align: left;
    padding-left: 15px;
}

.evictsure-header-title-wrapper .evictsure-page-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.evictsure-mobile-toggle {
    display: none;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
}

.evictsure-mobile-toggle:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.evictsure-mobile-toggle:active {
    transform: translateY(0);
}

/* ========================================
   TOUCH TARGET ACCESSIBILITY
======================================== */

/* Ensure all interactive elements meet 44px minimum touch target */
.evictsure-nav-item {
    min-height: 44px;
    padding: var(--spacing-sm) var(--spacing-lg);
}

.evictsure-btn {
    min-height: 44px;
    min-width: 44px;
}

.evictsure-btn-sm {
    min-height: 36px;
    min-width: 36px;
    padding: var(--spacing-xs) var(--spacing-md);
}

/* ========================================
   MODERN ACTION BUTTONS
======================================== */

/* Action Button Container */
.table-actions {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    justify-content: flex-start;
}

/* Icon Button Base */
.evictsure-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
    position: relative;
    overflow: hidden;
    background: transparent;
    color: var(--text-light);
}

.evictsure-btn-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.evictsure-btn-icon:active {
    transform: translateY(0);
    transition-duration: 0.1s;
}

/* Icon Button Variants */
.evictsure-btn-icon.btn-view {
    background: linear-gradient(135deg, var(--info) 0%, var(--info-light) 100%);
    color: white;
}

.evictsure-btn-icon.btn-view:hover {
    background: linear-gradient(135deg, var(--info-light) 0%, var(--info) 100%);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3);
}

.evictsure-btn-icon.btn-edit {
    background: linear-gradient(135deg, var(--warning) 0%, #f1c40f 100%);
    color: white;
}

.evictsure-btn-icon.btn-edit:hover {
    background: linear-gradient(135deg, #f1c40f 0%, var(--warning) 100%);
    box-shadow: 0 6px 20px rgba(243, 156, 18, 0.3);
}

.evictsure-btn-icon.btn-delete {
    background: linear-gradient(135deg, var(--danger) 0%, var(--danger-light) 100%);
    color: white;
}

.evictsure-btn-icon.btn-delete:hover {
    background: linear-gradient(135deg, var(--danger-light) 0%, var(--danger) 100%);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.3);
}

.evictsure-btn-icon.btn-resend {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
    color: white;
}

.evictsure-btn-icon.btn-resend:hover {
    background: linear-gradient(135deg, var(--success-light) 0%, var(--success) 100%);
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.3);
}

/* Icon SVGs */
.btn-icon-svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform 0.2s ease;
}

.evictsure-btn-icon:hover .btn-icon-svg {
    transform: scale(1.1);
}

/* Ripple Effect */
.evictsure-btn-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: width 0.6s, height 0.6s, top 0.6s, left 0.6s;
    transform: translate(-50%, -50%);
}

.evictsure-btn-icon:active::before {
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
}

/* Card Footer Actions */
.user-card-footer {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-light);
    background: var(--bg);
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
}

.user-card-footer .evictsure-btn-icon {
    width: 40px;
    height: 40px;
}

/* Tooltip for Icon Buttons */
.evictsure-btn-icon[title] {
    position: relative;
}

.evictsure-btn-icon[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--dark);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    z-index: 1000;
    animation: tooltipFadeIn 0.2s ease;
}

.evictsure-btn-icon[title]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--dark);
    z-index: 1000;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Mobile touch targets - ensure accessibility */
@media (max-width: 1024px) {
    .evictsure-nav-item {
        min-height: 48px;
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .evictsure-btn {
        min-height: 48px;
        min-width: 48px;
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .evictsure-btn-icon {
        width: 44px;
        height: 44px;
    }

    .table-actions {
        gap: var(--spacing-sm);
    }

    .evictsure-card-actions button {
        min-height: 44px;
        margin-bottom: var(--spacing-sm);
    }

    .activity-item {
        min-height: 44px;
        padding: var(--spacing-md);
    }
    
    .quick-action-btn {
        min-height: 60px;
        padding: var(--spacing-md);
    }
    
    /* Form inputs touch accessibility */
    .evictsure-form-input,
    .evictsure-form-select,
    .evictsure-form-textarea {
        min-height: 44px;
        padding: var(--spacing-md);
    }
    
    /* User menu touch target */
    .evictsure-user-menu {
        min-height: 44px;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    /* Status badges touch target */
    .evictsure-status {
        min-height: 28px;
        padding: var(--spacing-xs) var(--spacing-md);
    }
    
    /* Search input touch target */
    .evictsure-search-input {
        min-height: 44px;
        padding: var(--spacing-md);
    }
    
    /* Filter chips touch target */
    .evictsure-filter-chip {
        min-height: 44px;
        padding: var(--spacing-sm) var(--spacing-md);
        margin-bottom: var(--spacing-sm);
    }
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */
@media (max-width: 1024px) {
    .evictsure-mobile-toggle {
        display: flex;
    }

    .evictsure-sidebar {
        transform: translateX(-100%) !important;
    }

    body.sidebar-open .evictsure-sidebar {
        transform: translateX(0) !important;
    }

    .evictsure-main {
        margin-left: 0;
    }

    .evictsure-header-content {
        justify-content: space-between;
        padding: 0 var(--spacing-md);
    }

    .evictsure-page-title {
        font-size: var(--font-size-lg);
    }

    .evictsure-header-actions {
        gap: var(--spacing-md);
    }

    .evictsure-stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .evictsure-content {
        padding: var(--spacing-lg);
    }

    .evictsure-header-content {
        padding: 0 var(--spacing-sm);
    }

    .evictsure-header-actions {
        gap: var(--spacing-sm);
    }

    .evictsure-header-title-wrapper {
        padding-left: var(--spacing-sm);
    }

    .evictsure-stat-grid {
        grid-template-columns: 1fr;
    }

    .evictsure-user-info {
        display: none;
    }

    .evictsure-modal-content {
        margin: var(--spacing-sm);
        max-width: calc(100% - 16px);
    }
}

@media (max-width: 480px) {
    .evictsure-content {
        padding: var(--spacing-md);
    }

    .evictsure-page-title {
        font-size: var(--font-size-md);
    }

    .evictsure-filters {
        justify-content: center;
    }
}

/* ========================================
   ENHANCED CASE FORM STYLES
======================================== */

/* Form Section Styling */
.evictsure-form-section {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.evictsure-form-section-title {
    margin: 0 0 var(--spacing-md) 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--primary);
    color: var(--primary);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

/* Timeline Preview Styles */
.evictsure-timeline-preview {
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.timeline-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.timeline-name {
    font-weight: 600;
    color: var(--text);
    font-size: var(--font-size-md);
}

.timeline-duration {
    background: var(--primary-bg);
    color: var(--primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.timeline-milestones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-sm);
}

.milestone-item {
    padding: var(--spacing-sm);
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    border-left: 3px solid var(--primary-light);
}

.milestone-item strong {
    color: var(--primary);
}

/* Legal Compliance Alert Styles */
.evictsure-compliance-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    background: var(--warning-bg);
    border: 1px solid var(--warning);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
}

.evictsure-compliance-alert .alert-icon {
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.evictsure-compliance-alert .alert-content h5 {
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--warning);
    font-weight: 600;
}

.evictsure-compliance-alert .alert-content div {
    color: var(--text);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* Draft Case Banner */
.evictsure-draft-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease;
    animation: slideDown 0.4s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.evictsure-draft-banner strong {
    font-size: 16px;
}

/* Workflow Progress Indicator */
.evictsure-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    text-align: center;
}

.evictsure-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    animation: evictsure-spin 1s linear infinite;
}

@keyframes evictsure-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.evictsure-progress p {
    margin: 0;
    color: var(--text);
    font-size: var(--font-size-md);
}

/* Enhanced Form Responsive Design */
@media (max-width: 992px) {
    .evictsure-form-section {
        padding: var(--spacing-md);
    }
    
    .timeline-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .timeline-milestones {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .evictsure-form-section-title {
        font-size: var(--font-size-md);
    }
    
    .evictsure-compliance-alert {
        flex-direction: column;
        text-align: center;
    }
    
    .evictsure-compliance-alert .alert-icon {
        align-self: center;
    }
}

/* Form Field Validation States */
.evictsure-form-input:invalid,
.evictsure-form-select:invalid {
    border-color: var(--danger);
    background-color: var(--danger-bg);
}

.evictsure-form-input:valid,
.evictsure-form-select:valid {
    border-color: var(--success);
}

.evictsure-form-input:disabled,
.evictsure-form-select:disabled {
    background-color: var(--light);
    color: #6b7280;
    cursor: not-allowed;
}

[data-theme="dark"] .evictsure-form-input:disabled,
[data-theme="dark"] .evictsure-form-select:disabled {
    background-color: #3a3a3c;
    color: #8E8E93;
}

/* Enhanced Form Validation */
.evictsure-form-group {
    position: relative;
}

.evictsure-form-group.has-error .evictsure-form-input,
.evictsure-form-group.has-error .evictsure-form-select,
.evictsure-form-group.has-error .evictsure-form-textarea {
    border-color: var(--danger);
    background-color: var(--danger-bg);
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.evictsure-form-group.has-success .evictsure-form-input,
.evictsure-form-group.has-success .evictsure-form-select,
.evictsure-form-group.has-success .evictsure-form-textarea {
    border-color: var(--success);
    background-color: var(--success-bg);
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1);
}

.evictsure-form-group.has-warning .evictsure-form-input,
.evictsure-form-group.has-warning .evictsure-form-select,
.evictsure-form-group.has-warning .evictsure-form-textarea {
    border-color: var(--warning);
    background-color: var(--warning-bg);
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.1);
}

/* Validation Messages */
.evictsure-form-error,
.evictsure-form-success,
.evictsure-form-warning {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 500;
    animation: slideDown 0.3s ease;
}

.evictsure-form-error {
    color: var(--danger);
}

.evictsure-form-success {
    color: var(--success);
}

.evictsure-form-warning {
    color: var(--warning);
}

.evictsure-form-error svg,
.evictsure-form-success svg,
.evictsure-form-warning svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Validation Icons */
.evictsure-form-group.has-error .evictsure-form-label::after,
.evictsure-form-group.has-success .evictsure-form-label::after,
.evictsure-form-group.has-warning .evictsure-form-label::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: var(--spacing-xs);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.evictsure-form-group.has-error .evictsure-form-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 1.4 1.4M6.6 4.6l-1.4 1.4'/%3e%3c/svg%3e");
}

.evictsure-form-group.has-success .evictsure-form-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='m6.564.75-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.evictsure-form-group.has-warning .evictsure-form-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='%23ffc107'%3e%3cpath d='M6 1L1 11h10L6 1z'/%3e%3cpath d='M6 4v3'/%3e%3ccircle cx='6' cy='9' r='.5'/%3e%3c/svg%3e");
}

/* Real-time validation styling */
.evictsure-form-input.validating {
    border-color: var(--info);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='%233498db' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 12.5a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3e%3cpath fill='%233498db' d='M8 4.5a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    animation: pulse 1.5s infinite;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Enhanced Tooltip Support for Complex Fields */
.evictsure-field-tooltip {
    position: relative;
    display: inline-block;
}

.evictsure-field-tooltip .tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: var(--dark);
    color: var(--bg-secondary);
    text-align: center;
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    margin-left: -125px;
    opacity: 0;
    transition: opacity 0.3s;
}

.evictsure-field-tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* ========================================
   ENHANCED CASE FORM COMPONENTS
======================================== */

/* Timeline Preview Component */
.timeline-preview {
    background: var(--info-bg);
    border: 1px solid var(--info);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    display: none;
}

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

.timeline-preview-header h4 {
    margin: 0;
    color: var(--info);
    font-size: 1.1rem;
}

.estimated-completion {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--info);
    background: var(--bg-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: calc(var(--radius) / 2);
}

.timeline-milestones {
    display: grid;
    gap: var(--spacing-sm);
}

.milestone {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: calc(var(--radius) / 2);
    border-left: 4px solid var(--info);
    font-size: 0.9rem;
    color: var(--text);
}

.timeline-note {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: calc(var(--radius) / 2);
    font-style: italic;
    color: var(--text-muted);
    text-align: center;
}

/* Legal Compliance Alert Component */
.compliance-alert {
    background: var(--warning-bg);
    border: 1px solid var(--warning);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    display: none;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.compliance-alert-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.compliance-alert-text {
    color: var(--warning);
    line-height: 1.5;
}

.compliance-alert-text strong {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: 1.05rem;
}

/* Enhanced Form Section Improvements */
.evictsure-form-section {
    position: relative;
}

.evictsure-form-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary);
    border-radius: 2px;
}

/* Dynamic Field States */
.evictsure-form-select[disabled] {
    background-color: var(--light);
    color: #6b7280;
    cursor: not-allowed;
}

[data-theme="dark"] .evictsure-form-select[disabled] {
    background-color: #3a3a3c;
    color: #8E8E93;
}

.evictsure-form-select:not([disabled]):focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

/* Responsive Adjustments for Enhanced Components */
@media (max-width: 768px) {
    .timeline-preview-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .estimated-completion {
        font-size: 0.8rem;
    }

    .compliance-alert {
        padding: var(--spacing-md);
    }

    .timeline-milestones {
        font-size: 0.85rem;
    }
}

/* ==========================================
   CLIENT ORGANIZATION STYLES (NEW)
   ========================================== */

/* Auto-populated field indicator */
.form-control.auto-populated,
input.auto-populated,
select.auto-populated {
    background-color: var(--info-bg);
    border-left: 3px solid var(--success);
    color: var(--text);
}

.form-control.auto-populated::placeholder,
input.auto-populated::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

/* Tooltip icon */
.tooltip-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #2196F3;
    color: white;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    cursor: help;
    margin-left: 4px;
    font-weight: bold;
}

/* Case Card Styles */
.case-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    cursor: pointer;
    color: var(--text);
}

.case-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.case-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

.case-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.case-meta > div {
    display: flex;
    flex-direction: column;
}

.evictsure-status {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.evictsure-status.status-active {
    background: var(--success-bg);
    color: var(--success);
}

.evictsure-status.status-pending {
    background: var(--warning-bg);
    color: var(--warning);
}

.evictsure-status.status-review {
    background: var(--info-bg);
    color: var(--info);
}

.evictsure-status.status-completed {
    background: var(--success-bg);
    color: var(--success);
}

.evictsure-status.status-archived {
    background: var(--muted-bg);
    color: var(--text-muted);
}

.evictsure-status.status-billing,
.status-billing {
    background: rgba(147, 51, 234, 0.1);  /* purple-bg */
    color: #7c3aed;                        /* purple */
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    transition: width 0.3s ease;
}

/* Case Grid Layout */
.cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
}

/* Responsive Design */
@media (max-width: 768px) {
    .cases-grid {
        grid-template-columns: 1fr;
        padding: var(--spacing-md);
    }

    .case-meta {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: var(--spacing-sm);
    }

    .case-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
}

/* ========================================
   PHASE 4 ENHANCEMENT: Progress Checklist Styling
   Used for role-by-role loading progress display
======================================== */

/* Role checklist items */
.role-item {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Role item completed state with checkmark */
.role-item.completed {
    background-color: rgba(16, 185, 129, 0.05);
}

.role-item.completed .role-status {
    color: #10b981;
}

.role-item.completed .role-status svg {
    opacity: 1;
}

.role-item.completed .role-status polyline {
    stroke: #10b981;
}

/* Role item loading state with spinner */
.role-item.loading .role-status {
    color: var(--primary);
}

.role-item.loading .role-status svg {
    animation: spin-status 1s linear infinite;
    opacity: 1;
}

/* Role item error state */
.role-item.error {
    background-color: rgba(239, 68, 68, 0.05);
}

.role-item.error .role-status {
    color: #ef4444;
}

.role-item.error .role-status svg {
    opacity: 1;
}

/* Spinner animation for loading status icons */
@keyframes spin-status {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Checkmark animation for completed items */
@keyframes checkmark-pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.role-item.completed .role-status {
    animation: checkmark-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Role count badge styling */
.role-count {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

/* Checklist container styling for responsive layout */
#roleChecklistContainer {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Mobile responsive - adjust checklist width */
@media (max-width: 480px) {
    #roleChecklistContainer {
        max-width: 100%;
    }
}

/* ===== APPROVAL WORKFLOW STYLING ===== */

.approval-workflow {
  border-left: 4px solid #ff9800;
  background-color: rgba(255, 152, 0, 0.03);
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 4px;
}

.section-header h4 {
  margin-top: 0;
  color: #ff9800;
  font-size: 1.1rem;
  font-weight: 600;
}

.approval-info-box {
  background-color: #e3f2fd;
  border-left: 4px solid #2196f3;
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.requirement-badge {
  display: inline-block;
  background-color: #2196f3;
  color: white;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.requirement-description {
  margin: 0.5rem 0 0 0;
  color: #1565c0;
  font-size: 0.9rem;
}

.approval-status-box {
  margin: 1rem 0;
}

.status-pending,
.status-approved,
.status-rejected {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.status-pending {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
  color: #856404;
}

.status-approved {
  background-color: #d4edda;
  border-left: 4px solid #28a745;
  color: #155724;
}

.status-rejected {
  background-color: #f8d7da;
  border-left: 4px solid #dc3545;
  color: #721c24;
}

.status-icon {
  font-size: 1.5rem;
  margin-right: 0.5rem;
  display: inline-block;
  min-width: 2rem;
}

.status-text {
  font-size: 1rem;
}

.status-description {
  margin: 0.5rem 0 0 0;
  font-size: 0.85rem;
  font-weight: normal;
  padding-left: 2.5rem;
}

.approval-history-box {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0.75rem;
  border-radius: 3px;
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

.approval-history-box p {
  margin: 0.25rem 0;
  line-height: 1.4;
}

.approval-comment-text {
  background-color: #f5f5f5;
  padding: 0.75rem;
  border-radius: 3px;
  margin-top: 0.5rem;
  border-left: 3px solid #999;
  font-style: italic;
  color: #555;
}

.approval-actions {
  margin-top: 1.5rem;
  padding: 1rem;
  background-color: rgba(255, 152, 0, 0.05);
  border-radius: 4px;
}

.action-note {
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: #666;
}

.action-buttons,
.approval-decision-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.approval-decision-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.approval-comment-input {
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
}

.approval-comment-input:focus {
  outline: none;
  border-color: #ff9800;
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
}

/* Button styling for approval actions */
.btn-success,
.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-icon {
  font-size: 1.1rem;
  display: inline-block;
}

/* Badge for approval status in task list */
.badge-approval {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: #ff9800;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 0.5rem;
  animation: pulse-approval 2s infinite;
}

.badge-icon {
  display: inline-block;
  font-size: 0.9rem;
}

@keyframes pulse-approval {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Dark mode support */
[data-theme="dark"] .approval-workflow {
  background-color: rgba(255, 152, 0, 0.08);
}

[data-theme="dark"] .approval-info-box {
  background-color: rgba(33, 150, 243, 0.1);
  border-left-color: #42a5f5;
}

[data-theme="dark"] .requirement-badge {
  background-color: #42a5f5;
}

[data-theme="dark"] .requirement-description {
  color: #64b5f6;
}

[data-theme="dark"] .approval-history-box {
  background-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .approval-comment-text {
  background-color: rgba(255, 255, 255, 0.1);
  color: #bbb;
}

[data-theme="dark"] .approval-comment-input {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #444;
  color: #fff;
}

[data-theme="dark"] .status-description,
[data-theme="dark"] .action-note {
  color: #999;
}

/* ===== PHASE B: MISSING COLUMN CONTROLS STYLING ===== */

/* Permission section (ViewableByClient) */
.permission-section {
  border-left: 4px solid #2196f3;
  background-color: rgba(33, 150, 243, 0.03);
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 4px;
}

.permission-section h4 {
  color: #2196f3;
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

/* Blocking section (IsBlocked, BlockedReason) */
.blocking-section {
  border-left: 4px solid #f44336;
  background-color: rgba(244, 67, 54, 0.03);
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 4px;
}

.blocking-section h4 {
  color: #f44336;
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

/* Form elements */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.form-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin: 0;
}

.form-checkbox:checked {
  accent-color: #2196f3;
}

.checkbox-group label {
  margin: 0;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

.help-text {
  display: block;
  font-size: 0.85rem;
  color: #666;
  margin-left: 28px;
  margin-top: -0.25rem;
  width: 100%;
  flex-basis: 100%;
}

#blockedReasonContainer {
  margin-top: 1rem;
  padding: 0.75rem;
  background-color: rgba(244, 67, 54, 0.05);
  border-radius: 3px;
}

#blockedReasonContainer label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #f44336;
}

.form-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  box-sizing: border-box;
}

.form-textarea:focus {
  outline: none;
  border-color: #2196f3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

/* Enhanced progress slider */
.form-range {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #e0e0e0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  margin: 0.5rem 0;
}

.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2196f3;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background 0.15s ease-in-out;
}

.form-range::-webkit-slider-thumb:hover {
  background: #1976d2;
  transform: scale(1.1);
}

.form-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2196f3;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background 0.15s ease-in-out;
}

.form-range::-moz-range-thumb:hover {
  background: #1976d2;
  transform: scale(1.1);
}

/* Progress value display */
#progressValue {
  background-color: #4caf50;
  color: white;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 600;
  min-width: 45px;
  text-align: center;
  font-size: 0.9rem;
  display: inline-block;
  margin-left: 0.5rem;
}

/* Task sections */
.task-section {
  margin: 1.5rem 0;
}

/* Dark mode support for new controls */
[data-theme="dark"] .permission-section {
  background-color: rgba(33, 150, 243, 0.1);
  border-left-color: #42a5f5;
}

[data-theme="dark"] .permission-section h4 {
  color: #42a5f5;
}

[data-theme="dark"] .blocking-section {
  background-color: rgba(244, 67, 54, 0.1);
  border-left-color: #ef5350;
}

[data-theme="dark"] .blocking-section h4 {
  color: #ef5350;
}

[data-theme="dark"] .help-text {
  color: #999;
}

[data-theme="dark"] #blockedReasonContainer {
  background-color: rgba(244, 67, 54, 0.15);
}

[data-theme="dark"] #blockedReasonContainer label {
  color: #ef5350;
}

[data-theme="dark"] .form-textarea {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: #444;
  color: #fff;
}

[data-theme="dark"] .form-textarea:focus {
  border-color: #42a5f5;
  box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.2);
}

[data-theme="dark"] .form-range {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .form-range::-webkit-slider-thumb {
  background: #42a5f5;
}

[data-theme="dark"] .form-range::-webkit-slider-thumb:hover {
  background: #2196f3;
}

[data-theme="dark"] .form-range::-moz-range-thumb {
  background: #42a5f5;
}

[data-theme="dark"] .form-range::-moz-range-thumb:hover {
  background: #2196f3;
}

[data-theme="dark"] #progressValue {
  background-color: #66bb6a;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .permission-section,
  .blocking-section {
    padding: 0.75rem;
    margin: 0.75rem 0;
  }

  .checkbox-group {
    gap: 0.5rem;
  }

  .help-text {
    margin-left: 0;
    margin-top: 0.25rem;
  }

  .form-checkbox {
    width: 18px;
    height: 18px;
  }
}

[data-theme="dark"] .badge-approval {
  background-color: #ff9800;
  color: #fff;
}

/* ===== ADVANCED FEATURES STYLING ===== */

/* Client assignment section */
.client-assignment-section {
  border-left: 4px solid #9c27b0;
  background-color: rgba(156, 39, 176, 0.03);
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 4px;
}

.client-assignment-section h4 {
  color: #9c27b0;
  margin-top: 0;
}

.assignment-info {
  background-color: rgba(156, 39, 176, 0.05);
  padding: 0.75rem;
  border-radius: 3px;
  margin-bottom: 1rem;
}

.info-text {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.4;
}

/* Multi-select styling */
.multi-select-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.multi-select-container label {
  font-weight: 500;
  color: #333;
}

.form-multi-select {
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9rem;
  background-color: white;
  cursor: pointer;
}

.form-multi-select:focus {
  outline: none;
  border-color: #9c27b0;
  box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.1);
}

.form-multi-select option:checked {
  background-color: #9c27b0;
  color: white;
}

/* Assigned users list */
.assigned-users-list {
  margin-top: 1rem;
  padding: 0.75rem;
  background-color: rgba(156, 39, 176, 0.05);
  border-radius: 3px;
}

.assigned-users-list h5 {
  margin-top: 0;
  font-size: 0.95rem;
  color: #9c27b0;
}

.users-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.users-list li {
  padding: 0.5rem;
  margin: 0.25rem 0;
  background-color: white;
  border-left: 3px solid #9c27b0;
  border-radius: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.users-list .empty-state {
  color: #999;
  font-style: italic;
  border-left: 3px solid #ddd;
}

.user-name {
  font-size: 0.9rem;
  color: #333;
}

.btn-remove-user {
  background: none;
  border: none;
  color: #f44336;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.btn-remove-user:hover {
  background-color: rgba(244, 67, 54, 0.1);
}

/* Blocking state indicator */
.is-blocked {
  background-color: rgba(244, 67, 54, 0.1) !important;
  border-color: #f44336 !important;
  color: #f44336 !important;
  font-weight: 600;
}

.is-blocked:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Dark mode support for advanced features */
[data-theme="dark"] .client-assignment-section {
  background-color: rgba(156, 39, 176, 0.1);
  border-left-color: #ba68c8;
}

[data-theme="dark"] .client-assignment-section h4 {
  color: #ba68c8;
}

[data-theme="dark"] .assignment-info {
  background-color: rgba(156, 39, 176, 0.15);
}

[data-theme="dark"] .info-text {
  color: #999;
}

[data-theme="dark"] .multi-select-container label {
  color: #fff;
}

[data-theme="dark"] .form-multi-select {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #444;
  color: #fff;
}

[data-theme="dark"] .form-multi-select:focus {
  border-color: #ba68c8;
  box-shadow: 0 0 0 3px rgba(186, 104, 200, 0.2);
}

[data-theme="dark"] .form-multi-select option {
  background-color: #333;
  color: #fff;
}

[data-theme="dark"] .form-multi-select option:checked {
  background-color: #ba68c8;
}

[data-theme="dark"] .assigned-users-list {
  background-color: rgba(156, 39, 176, 0.08);
}

[data-theme="dark"] .assigned-users-list h5 {
  color: #ba68c8;
}

[data-theme="dark"] .users-list li {
  background-color: rgba(255, 255, 255, 0.05);
  border-left-color: #ba68c8;
  color: #fff;
}

[data-theme="dark"] .user-name {
  color: #fff;
}

[data-theme="dark"] .is-blocked {
  background-color: rgba(244, 67, 54, 0.15) !important;
  border-color: #ef5350 !important;
  color: #ef5350 !important;
}

/* Mobile responsive for advanced features */
@media (max-width: 768px) {
  .client-assignment-section {
    padding: 0.75rem;
    margin: 0.75rem 0;
  }

  .assignment-info {
    padding: 0.5rem;
  }

  .form-multi-select {
    font-size: 0.85rem;
    padding: 0.5rem;
  }

  .assigned-users-list {
    padding: 0.5rem;
  }

  .users-list li {
    padding: 0.4rem;
    font-size: 0.85rem;
  }
}

/* ============================================
   Documents Manager Window Styles
   ============================================ */

.documents-manager-modal .modal-content {
  width: 90%;
  max-width: 1200px;
  height: 85vh;
  display: flex;
  flex-direction: column;
}

.documents-manager-modal .modal-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Documents Toolbar */
.documents-toolbar {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-secondary, #f8f9fa);
  border-radius: 8px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.toolbar-section {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.toolbar-section:first-child {
  flex: 1;
  min-width: 200px;
}

.search-input {
  min-width: 250px;
}

/* Documents Container */
.documents-container {
  display: flex;
  gap: 1rem;
  flex: 1;
  overflow: hidden;
}

.documents-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background: var(--bg-primary, #ffffff);
  border-radius: 8px;
  border: 1px solid var(--border-color, #dee2e6);
}

/* Document Items */
.document-item {
  padding: 0.75rem;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.document-item:hover {
  background: var(--bg-hover, #f8f9fa);
  border-color: var(--primary, #4A90E2);
}

.document-item.selected {
  background: var(--bg-selected, #e3f2fd);
  border-color: var(--primary, #4A90E2);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.document-item-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.document-icon {
  font-size: 1.5rem;
  color: var(--text-muted, #6c757d);
  min-width: 40px;
  text-align: center;
}

.document-info {
  flex: 1;
  min-width: 0;
}

.document-name {
  font-weight: 500;
  color: var(--text-primary, #212529);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}

.document-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.document-meta .badge {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

.document-date {
  font-size: 0.85rem;
  color: var(--text-muted, #6c757d);
}

.document-actions {
  display: flex;
  gap: 0.25rem;
}

.btn-icon {
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted, #6c757d);
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background: var(--bg-hover, #f8f9fa);
  border-color: var(--border-color, #dee2e6);
  color: var(--primary, #4A90E2);
}

.btn-icon.btn-danger:hover {
  color: var(--danger, #dc3545);
  border-color: var(--danger, #dc3545);
}

/* Document Detail Panel */
.document-detail-panel {
  width: 400px;
  background: var(--bg-primary, #ffffff);
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 8px;
  padding: 1rem;
  overflow-y: auto;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color, #dee2e6);
}

.detail-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-primary, #212529);
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.detail-section {
  padding: 0.5rem 0;
}

.detail-section label {
  display: block;
  font-weight: 600;
  color: var(--text-muted, #6c757d);
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.editable-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.editable-field input {
  flex: 1;
  padding: 0.25rem 0.5rem;
}

.document-description {
  margin: 0;
  color: var(--text-primary, #212529);
  line-height: 1.5;
}

.access-level {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
  display: inline-block;
}

.access-level.internal {
  background: var(--info-bg, #d1ecf1);
  color: var(--info, #0c5460);
}

.access-level.restricted {
  background: var(--warning-bg, #fff3cd);
  color: var(--warning, #856404);
}

.access-level.confidential {
  background: var(--danger-bg, #f8d7da);
  color: var(--danger, #721c24);
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tag {
  background: var(--bg-secondary, #e9ecef);
  color: var(--text-primary, #495057);
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
}

/* Empty and Loading States */
.empty-state,
.error-state,
.loading-spinner {
  text-align: center;
  padding: 3rem 1rem;
}

/* Small spinner for inline use (like buttons) */
.loading-spinner.small-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spinner-rotate 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}

@keyframes spinner-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Enhanced disabled button state with better visual feedback */
.evictsure-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.evictsure-btn-primary:disabled {
  background: var(--primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.evictsure-btn-secondary:disabled {
  background: var(--bg-secondary);
  border-color: var(--border);
}

/* Loading state for buttons with data-loading attribute */
.evictsure-btn[data-loading="true"] {
  opacity: 0.8;
  cursor: not-allowed;
  position: relative;
}

.evictsure-btn[data-loading="true"]:hover {
  transform: none;
  box-shadow: var(--shadow);
}

/* Dark mode support for loading buttons */
[data-theme="dark"] .evictsure-btn[data-loading="true"] {
  opacity: 0.9;
}

.empty-state i,
.error-state i {
  opacity: 0.3;
  margin-bottom: 1rem;
}

/* Documents Card in Task Modal */
.documents-card {
  background: var(--bg-secondary, #f8f9fa);
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
}

.documents-summary {
  color: var(--text-muted, #6c757d);
  font-size: 0.9rem;
}

/* Badge Styles for Document Types and Status */
.badge-primary {
  background: #4A90E2;
  color: white;
}

.badge-info {
  background: #17a2b8;
  color: white;
}

.badge-warning {
  background: #ffc107;
  color: #212529;
}

.badge-success {
  background: #28a745;
  color: white;
}

.badge-secondary {
  background: #6c757d;
  color: white;
}

.badge-default {
  background: #e9ecef;
  color: #495057;
}

/* Dark Theme Support for Documents Manager */
[data-theme="dark"] .documents-manager-modal .modal-content {
  background: var(--dark-bg-primary, #1a1a1a);
  color: var(--dark-text-primary, #ffffff);
}

[data-theme="dark"] .documents-toolbar {
  background: var(--dark-bg-secondary, #2d2d2d);
}

[data-theme="dark"] .documents-list,
[data-theme="dark"] .document-detail-panel {
  background: var(--dark-bg-primary, #1a1a1a);
  border-color: var(--dark-border-color, #404040);
}

[data-theme="dark"] .document-item {
  border-color: var(--dark-border-color, #404040);
}

[data-theme="dark"] .document-item:hover {
  background: var(--dark-bg-hover, #2d2d2d);
}

[data-theme="dark"] .document-item.selected {
  background: rgba(74, 144, 226, 0.15);
}

[data-theme="dark"] .document-name {
  color: var(--dark-text-primary, #ffffff);
}

[data-theme="dark"] .documents-card {
  background: var(--dark-bg-secondary, #2d2d2d);
}

/* Responsive Design for Documents Manager */
@media (max-width: 992px) {
  .documents-container {
    flex-direction: column;
  }

  .document-detail-panel {
    width: 100%;
    max-height: 300px;
  }

  .documents-manager-modal .modal-content {
    width: 95%;
    height: 90vh;
  }
}

@media (max-width: 768px) {
  .documents-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar-section {
    width: 100%;
    justify-content: space-between;
  }

  .search-input {
    width: 100%;
  }

  .document-item-content {
    flex-wrap: wrap;
  }

  .document-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 0.5rem;
  }
}

/* ========================================
   UNIFIED DROPDOWN STYLING - USER MENU & NOTIFICATION DROPDOWNS
   Consistent design with full dark mode support
======================================== */

/* ============================= */
/* User Menu Dropdown Container */
/* ============================= */

.user-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    min-width: 280px;
    margin-top: 8px;
    overflow-y: auto;
    max-height: calc(100vh - 80px);
    animation: dropdownSlideInUser 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: calc(100vw - 32px);
}

@keyframes dropdownSlideInUser {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark mode container */
[data-theme="dark"] .user-menu-dropdown {
    background: var(--bg-secondary);
    border-color: var(--border);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* ============================= */
/* User Profile Header Section */
/* ============================= */

.user-menu-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

[data-theme="dark"] .user-menu-header {
    background: #111827;
    border-bottom-color: var(--border);
}

.user-profile-section {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.user-profile-info {
    flex: 1;
    min-width: 0;
}

.user-profile-name {
    font-weight: 600;
    color: var(--dark);
    font-size: var(--font-size-md);
    margin: 0;
    word-break: break-word;
}

[data-theme="dark"] .user-profile-name {
    color: var(--text);
}

.user-profile-role {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

[data-theme="dark"] .user-profile-role {
    color: var(--text-muted);
}

.user-profile-email {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    word-break: break-word;
}

[data-theme="dark"] .user-profile-email {
    color: var(--text-muted);
}

/* ============================= */
/* User Menu Items Container */
/* ============================= */

.user-menu-items {
    padding: var(--spacing-sm) 0;
}

/* Individual Menu Item */
.user-menu-item {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    border: none;
    background: var(--bg-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--text);
    transition: all 0.2s ease;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}

.user-menu-item:last-of-type {
    border-bottom: none;
}

.user-menu-item:hover {
    background: var(--bg);
    color: var(--primary);
    padding-left: calc(var(--spacing-lg) + 4px);
}

.user-menu-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    background: var(--bg);
}

.user-menu-item:active {
    background: rgba(0, 122, 255, 0.08);
}

/* Dark mode menu items */
[data-theme="dark"] .user-menu-item {
    background: #1F2937;
    color: var(--text);
    border-bottom-color: var(--border);
}

[data-theme="dark"] .user-menu-item:hover {
    background: #374151;
    color: #60A5FA;
}

[data-theme="dark"] .user-menu-item:active {
    background: rgba(10, 132, 255, 0.15);
}

/* ============================= */
/* Menu Item Variants */
/* ============================= */

/* Danger action item (Logout) */
.user-menu-item-danger {
    color: var(--danger);
    border-top: 1px solid var(--border);
    margin-top: var(--spacing-sm);
}

.user-menu-item-danger:hover {
    background: rgba(230, 126, 34, 0.08);
    color: var(--danger);
}

[data-theme="dark"] .user-menu-item-danger {
    color: #EF4444;
}

[data-theme="dark"] .user-menu-item-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

/* Success action item */
.user-menu-item-success {
    color: var(--success);
}

.user-menu-item-success:hover {
    background: rgba(39, 174, 96, 0.08);
    color: var(--success);
}

[data-theme="dark"] .user-menu-item-success {
    color: #10B981;
}

[data-theme="dark"] .user-menu-item-success:hover {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

/* ============================= */
/* Menu Item Icons/Separators */
/* ============================= */

.user-menu-item-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1;
}

.user-menu-divider {
    height: 1px;
    background: var(--border);
    margin: var(--spacing-sm) 0;
}

[data-theme="dark"] .user-menu-divider {
    background: var(--border);
}

/* ============================= */
/* Notification Dropdown - CSS Classes */
/* ============================= */

/* This allows the Web Component to be styled from the outside */
.notification-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

/* Ensure notification dropdown is properly positioned */
evictsure-notification-dropdown {
    --notification-bg: var(--bg-secondary);
    --notification-text: var(--dark);
    --notification-text-secondary: var(--text-muted);
    --notification-border: var(--border);
    --notification-hover: var(--bg);
    --notification-divider: #F3F4F6;
    --primary: #007AFF;
    --primary-dark: #0051BA;
    --primary-hover: #003D82;
    --primary-light: #4DA3FF;
}

[data-theme="dark"] evictsure-notification-dropdown {
    --notification-bg: #1F2937;
    --notification-text: #F3F4F6;
    --notification-text-secondary: #D1D5DB;
    --notification-border: #374151;
    --notification-hover: #111827;
    --notification-divider: #2D3748;
    --primary: #0A84FF;
    --primary-dark: #0066CC;
    --primary-hover: #0052A3;
    --primary-light: #60A5FA;
}

/* ============================= */
/* Narrow Screen Dropdown Constraint */
/* ============================= */

@media (max-width: 480px) {
    .user-menu-dropdown {
        min-width: unset;
        width: calc(100vw - 16px);
        right: -8px;
    }
}

/* ============================= */
/* Theme Toggle Button */
/* ============================= */
.evictsure-theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    color: var(--text);
}

.evictsure-theme-toggle:hover {
    background: var(--bg);
    transform: scale(1.1);
}

.evictsure-theme-toggle:active {
    transform: scale(0.95);
}

[data-theme="dark"] .evictsure-theme-toggle {
    color: var(--text);
}

[data-theme="dark"] .evictsure-theme-toggle:hover {
    background: var(--bg);
}

/* ============================= */
/* Logout Modal Styles */
/* ============================= */
.logout-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
    z-index: 1999;
}

.logout-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-xl);
    z-index: 2000;
    max-width: 400px;
    width: 90%;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.logout-modal h3 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--dark);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.logout-modal p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-md);
    line-height: 1.5;
}

.logout-modal button {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
    font-weight: 500;
}

.evictsure-btn-secondary {
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
}

.evictsure-btn-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--primary);
}

.evictsure-btn-danger {
    background: var(--danger);
    color: white;
    border: none;
}

.evictsure-btn-danger:hover {
    background: #d42020;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.evictsure-btn-danger:active {
    transform: scale(0.98);
}

/* Dark mode support for logout modal */
[data-theme="dark"] .logout-modal {
    background: var(--bg-secondary);
    border-color: var(--border);
}

[data-theme="dark"] .logout-modal h3 {
    color: var(--dark);
}

[data-theme="dark"] .logout-modal p {
    color: var(--text-muted);
}

/* Document Table Inline Editing Styles */
.doc-name-editable {
    cursor: pointer;
    display: inline-block;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    position: relative;
}

.doc-name-editable:hover {
    background-color: var(--bg-hover, rgba(0, 123, 255, 0.1));
}

/* Input field for inline editing */
.doc-name-input {
    width: 100%;
    padding: 4px 8px;
    border: 2px solid var(--primary);
    border-radius: 4px;
    font-size: inherit;
    font-family: inherit;
    background: var(--bg-secondary);
    color: var(--text);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.doc-name-input:focus {
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

/* Saving state indicator */
.doc-name-cell .saving-indicator {
    color: var(--text-muted);
    font-style: italic;
}

/* Document Description Inline Editing Styles */
.doc-description-editable {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.doc-description-editable:hover {
    background-color: var(--bg-hover, rgba(0, 123, 255, 0.08));
}

.doc-description-textarea {
    width: 100%;
    padding: 6px 8px;
    border: 2px solid var(--primary, #2563eb);
    border-radius: 4px;
    font-size: inherit;
    font-family: inherit;
    background: var(--bg-secondary, #fff);
    color: var(--text, #1f2937);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    resize: vertical;
    min-height: 40px;
}

.doc-description-textarea:focus {
    border-color: var(--primary-dark, #1d4ed8);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.doc-desc-save-btn:hover {
    opacity: 0.9;
    filter: brightness(1.1);
}

.doc-desc-cancel-btn:hover {
    background: var(--bg-hover, #f3f4f6) !important;
}

/* Dark mode for description editing */
[data-theme="dark"] .doc-description-textarea {
    background: var(--dark-bg-secondary, #1e293b) !important;
    color: var(--dark-text, #e2e8f0) !important;
    border-color: var(--primary, #3b82f6) !important;
}

[data-theme="dark"] .doc-description-textarea:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .doc-desc-cancel-btn {
    background: var(--dark-bg-secondary, #334155) !important;
    color: var(--dark-text, #e2e8f0) !important;
    border-color: var(--dark-border, #475569) !important;
}

[data-theme="dark"] .doc-desc-cancel-btn:hover {
    background: var(--dark-bg-hover, #475569) !important;
}

[data-theme="dark"] .doc-description-editable:hover {
    background-color: rgba(59, 130, 246, 0.15);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .doc-description-textarea {
        background: var(--dark-bg-secondary, #1e293b) !important;
        color: var(--dark-text, #e2e8f0) !important;
        border-color: var(--primary, #3b82f6) !important;
    }

    :root:not([data-theme="light"]) .doc-desc-cancel-btn {
        background: var(--dark-bg-secondary, #334155) !important;
        color: var(--dark-text, #e2e8f0) !important;
        border-color: var(--dark-border, #475569) !important;
    }
}

/* Document table cell adjustments */
.doc-name-cell {
    position: relative;
    min-width: 200px;
}

/* Ensure the document name doesn't overflow */
.doc-name {
    word-break: break-word;
    max-width: 100%;
}

/* ========================================
   DOCUMENT UPLOAD MODAL - Enhanced Styling
======================================== */

/* Document Upload Form Specific Styles */
.document-upload-form .form-group {
    margin-bottom: 20px;
}

.document-upload-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text, #333);
}

.document-upload-form .required {
    color: var(--danger, #e74c3c);
    margin-left: 4px;
}

.document-upload-form input[type="text"],
.document-upload-form input[type="file"],
.document-upload-form textarea,
.document-upload-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border, #ddd);
    border-radius: var(--radius-md, 6px);
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--bg-secondary, #fff);
    color: var(--text, #333);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.document-upload-form input:focus,
.document-upload-form textarea:focus,
.document-upload-form select:focus {
    outline: none;
    border-color: var(--primary, #007AFF);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.document-upload-form .form-text {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--text-muted, #666);
}

.document-upload-form .form-row {
    display: flex;
    gap: 16px;
}

.document-upload-form .form-row .form-group {
    flex: 1;
}

.upload-btn-content .loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
    margin-right: 8px;
}

/* File input hover effect */
.document-upload-form input[type="file"]:hover {
    border-color: var(--primary);
    background: var(--bg-hover, rgba(0, 122, 255, 0.05));
}

/* Modal close button hover */
.evictsure-modal-close:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
    color: var(--danger, #e74c3c);
}

/* Dark mode support for document upload form */
[data-theme="dark"] .document-upload-form input[type="text"],
[data-theme="dark"] .document-upload-form input[type="file"],
[data-theme="dark"] .document-upload-form textarea,
[data-theme="dark"] .document-upload-form select {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .document-upload-form input[type="file"] {
    border-style: dashed;
}

[data-theme="dark"] .document-upload-form input[type="file"]:hover {
    background: rgba(10, 132, 255, 0.1);
    border-color: var(--primary);
}

[data-theme="dark"] .document-upload-form input:focus,
[data-theme="dark"] .document-upload-form textarea:focus,
[data-theme="dark"] .document-upload-form select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
}

[data-theme="dark"] .document-upload-form label {
    color: var(--text);
}

[data-theme="dark"] .document-upload-form .form-text {
    color: var(--text-muted);
}

[data-theme="dark"] .evictsure-modal-header {
    background: var(--bg);
    border-bottom-color: var(--border);
}

[data-theme="dark"] .evictsure-modal-body {
    background: var(--bg-secondary);
}

[data-theme="dark"] .evictsure-modal-footer {
    background: var(--bg);
    border-top-color: var(--border);
}

[data-theme="dark"] .evictsure-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ========================================
   DOCUMENTS TABLE - Enhanced Styling
======================================== */

/* Documents Section */
.documents-section .section-content {
    padding: var(--spacing-lg);
}

/* Table Controls */
.documents-table-controls {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg);
    border-radius: var(--radius-md);
}

[data-theme="dark"] .documents-table-controls {
    background: rgba(255, 255, 255, 0.03);
}

/* Table Container */
.documents-table-container {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

[data-theme="dark"] .documents-table-container {
    border-color: var(--border);
}

/* Documents Table */
.documents-table {
    width: 100%;
    border-collapse: collapse;
}

.documents-table thead {
    background: var(--bg);
    border-bottom: 2px solid var(--border);
}

[data-theme="dark"] .documents-table thead {
    background: rgba(255, 255, 255, 0.03);
}

.documents-table th {
    padding: var(--spacing-md);
    text-align: left;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.documents-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.documents-table th.sortable:hover {
    background: var(--bg-hover, rgba(0, 122, 255, 0.05));
}

[data-theme="dark"] .documents-table th.sortable:hover {
    background: rgba(10, 132, 255, 0.1);
}

.documents-table th.sortable.sort-asc .sort-indicator::after {
    content: ' ↑';
    color: var(--primary);
}

.documents-table th.sortable.sort-desc .sort-indicator::after {
    content: ' ↓';
    color: var(--primary);
}

.documents-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background-color 0.2s ease;
}

.documents-table tbody tr:hover:not(.empty-state) {
    background: var(--bg-hover, rgba(0, 122, 255, 0.02));
}

[data-theme="dark"] .documents-table tbody tr:hover:not(.empty-state) {
    background: rgba(10, 132, 255, 0.05);
}

/* Highlight documents linked to the current task */
.documents-table tbody tr.current-task-doc {
    background: rgba(37, 99, 235, 0.04);
    border-left: 3px solid #2563eb;
}

.documents-table tbody tr.current-task-doc:hover {
    background: rgba(37, 99, 235, 0.08);
}

[data-theme="dark"] .documents-table tbody tr.current-task-doc {
    background: rgba(59, 130, 246, 0.08);
    border-left: 3px solid #3b82f6;
}

[data-theme="dark"] .documents-table tbody tr.current-task-doc:hover {
    background: rgba(59, 130, 246, 0.14);
}

/* Dark mode table row hover - covers all list tables that use var(--light) or var(--primary-bg) */
[data-theme="dark"] .users-table tbody tr:hover,
[data-theme="dark"] .organization-table tbody tr:hover,
[data-theme="dark"] .invoice-table tbody tr:hover,
[data-theme="dark"] .overdue-tasks-table tbody tr:hover,
[data-theme="dark"] .tasks-table tbody tr:hover,
[data-theme="dark"] .recent-documents-table tbody tr:hover {
    background: rgba(10, 132, 255, 0.08);
}

[data-theme="dark"] .organization-list-row:hover {
    background: rgba(10, 132, 255, 0.08);
}

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

.documents-table td {
    padding: var(--spacing-md);
    color: var(--text);
}

/* Document Type Badges */
.doc-type-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.doc-type-badge.legal {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
}

.doc-type-badge.property {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
}

.doc-type-badge.communication {
    background: rgba(155, 89, 182, 0.1);
    color: #9b59b6;
}

.doc-type-badge.administrative {
    background: rgba(149, 165, 166, 0.1);
    color: #95a5a6;
}

.doc-type-badge.financial {
    background: rgba(241, 196, 15, 0.1);
    color: #f1c40f;
}

[data-theme="dark"] .doc-type-badge.legal {
    background: rgba(52, 152, 219, 0.2);
    color: #5dade2;
}

[data-theme="dark"] .doc-type-badge.property {
    background: rgba(46, 204, 113, 0.2);
    color: #58d68d;
}

[data-theme="dark"] .doc-type-badge.communication {
    background: rgba(155, 89, 182, 0.2);
    color: #bb8fce;
}

[data-theme="dark"] .doc-type-badge.administrative {
    background: rgba(149, 165, 166, 0.2);
    color: #bdc3c7;
}

[data-theme="dark"] .doc-type-badge.financial {
    background: rgba(241, 196, 15, 0.2);
    color: #f4d03f;
}

/* Document Status Badges */
.doc-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.doc-status-badge.review {
    background: rgba(243, 156, 18, 0.1);
    color: #f39c12;
}

.doc-status-badge.approved {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
}

.doc-status-badge.filed {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
}

.doc-status-badge.archived {
    background: rgba(149, 165, 166, 0.1);
    color: #95a5a6;
}

.doc-status-badge.completed {
    background: rgba(39, 174, 96, 0.1);
    color: #27ae60;
}

[data-theme="dark"] .doc-status-badge.review {
    background: rgba(243, 156, 18, 0.2);
    color: #f8b739;
}

[data-theme="dark"] .doc-status-badge.approved {
    background: rgba(46, 204, 113, 0.2);
    color: #58d68d;
}

[data-theme="dark"] .doc-status-badge.filed {
    background: rgba(52, 152, 219, 0.2);
    color: #5dade2;
}

[data-theme="dark"] .doc-status-badge.archived {
    background: rgba(149, 165, 166, 0.2);
    color: #bdc3c7;
}

[data-theme="dark"] .doc-status-badge.completed {
    background: rgba(39, 174, 96, 0.2);
    color: #52be80;
}

/* Document Access Badges */
.doc-access-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.doc-access-badge.internal {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
}

.doc-access-badge.restricted {
    background: rgba(243, 156, 18, 0.1);
    color: #f39c12;
}

.doc-access-badge.confidential {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}

[data-theme="dark"] .doc-access-badge.internal {
    background: rgba(52, 152, 219, 0.2);
    color: #5dade2;
}

[data-theme="dark"] .doc-access-badge.restricted {
    background: rgba(243, 156, 18, 0.2);
    color: #f8b739;
}

[data-theme="dark"] .doc-access-badge.confidential {
    background: rgba(231, 76, 60, 0.2);
    color: #ec7063;
}

/* Document Actions */
.doc-actions {
    display: flex;
    gap: var(--spacing-xs);
    justify-content: center;
    align-items: center;
}

.doc-actions button {
    background: transparent;
    border: 1px solid transparent;
    font-size: 1.2rem;
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    line-height: 1;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.doc-actions button:hover {
    background: var(--bg-hover, rgba(0, 122, 255, 0.1));
    border-color: var(--border);
    transform: scale(1.1);
}

.doc-actions button:active {
    transform: scale(0.95);
}

/* Individual button styling based on action */
.doc-actions button[title*="View"]:hover {
    background: rgba(52, 152, 219, 0.1);
    border-color: #3498db;
}

.doc-actions button[title*="Download"]:hover {
    background: rgba(46, 204, 113, 0.1);
    border-color: #2ecc71;
}

.doc-actions button[title*="Delete"]:hover {
    background: rgba(231, 76, 60, 0.1);
    border-color: #e74c3c;
}

[data-theme="dark"] .doc-actions button {
    color: var(--text);
}

[data-theme="dark"] .doc-actions button:hover {
    background: rgba(10, 132, 255, 0.2);
    border-color: var(--border);
}

[data-theme="dark"] .doc-actions button[title*="View"]:hover {
    background: rgba(52, 152, 219, 0.2);
    border-color: #5dade2;
}

[data-theme="dark"] .doc-actions button[title*="Download"]:hover {
    background: rgba(46, 204, 113, 0.2);
    border-color: #58d68d;
}

[data-theme="dark"] .doc-actions button[title*="Delete"]:hover {
    background: rgba(231, 76, 60, 0.2);
    border-color: #ec7063;
}

/* Disabled state for action buttons */
.doc-actions button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

.doc-actions button:disabled:hover {
    background: transparent;
    border-color: transparent;
}

/* Empty State */
.documents-table .empty-state td {
    text-align: center;
    padding: var(--spacing-xxl);
    color: var(--text-muted);
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.3;
}

/* Team Assignment Chips - Case Detail Modal */
.assignment-chips {
    margin-top: 12px;
    min-height: 45px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--text);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.chip:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow);
}

.chip.chip-primary {
    background: linear-gradient(to right, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-color: var(--primary);
}

.chip.chip-secondary {
    background: var(--bg-secondary);
    border-color: var(--border);
}

/* Star icon for primary/secondary indicator */
.star-icon {
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s ease;
    opacity: 0.8;
}

.star-icon:hover {
    transform: scale(1.2);
    opacity: 1;
}

.star-icon.filled {
    color: var(--primary);
    opacity: 1;
}

.star-icon.hollow {
    color: var(--text-muted);
}

/* Role badge inside chip */
.role-icon {
    font-size: 14px;
    opacity: 0.8;
}

/* Chip content container */
.chip-content {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text);
    flex-grow: 1;
}

.chip-content .name {
    font-weight: 500;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-content .email {
    font-size: 12px;
    color: var(--text-muted);
}

.chip-content .separator {
    color: var(--text-muted);
    font-size: 12px;
}

/* Primary badge indicator */
.primary-badge {
    display: inline-block;
    background: var(--primary);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 4px;
    white-space: nowrap;
}

/* Remove button */
.chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    opacity: 0.6;
    transition: all 0.2s ease;
    padding: 0;
    margin-left: 4px;
    color: var(--text);
}

.chip-remove:hover {
    opacity: 1;
    transform: scale(1.15);
    color: var(--danger);
}

/* Assignment section styling */
.assignment-section {
    margin-bottom: 30px;
}

.team-select-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.team-select-row select {
    flex: 1 1 240px;
    min-width: 240px;
}

.team-select-row .team-add-button {
    flex-shrink: 0;
}

/* Team refresh controls */
.team-refresh-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.team-refresh-button {
    background: none;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.team-refresh-button:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.team-refresh-hint {
    font-size: 12px;
    color: var(--text-muted);
}

/* Button Styling */
.btn {
    padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
    border-radius: var(--radius-md, 6px);
    font-size: var(--font-size-md, 14px);
    font-weight: 600;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
}

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

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary-dark, #4a52b8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-primary:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text);
    border: 2px solid var(--border);
}

.btn-secondary:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg);
}

.btn-secondary:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.btn-outline {
    background: transparent;
    color: var(--text-muted);
    border: 2px solid var(--border);
}

.btn-outline:hover:not(:disabled) {
    background: var(--bg);
    border-color: var(--primary);
    color: var(--primary);
}

.btn-outline:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .documents-table-controls {
        flex-direction: column;
    }

    .documents-table-controls input,
    .documents-table-controls select {
        width: 100%;
    }

    .documents-table {
        font-size: 0.85rem;
    }

    .documents-table th,
    .documents-table td {
        padding: var(--spacing-sm);
    }

    .doc-type-badge,
    .doc-status-badge,
    .doc-access-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    .team-select-row {
        flex-direction: column;
    }

    .team-select-row select,
    .team-select-row .team-add-button {
        width: 100%;
        flex: 1 1 auto;
    }

    .chip {
        font-size: 12px;
        padding: 6px 10px;
    }

    .chip-content .name {
        max-width: 100px;
    }
}

/* ========================================
   COLLAPSIBLE SIDEBAR - DESKTOP ONLY
======================================== */

/* --- Toggle Button --- */
.evictsure-sidebar-toggle {
    position: fixed;
    top: 28px;
    left: calc(var(--sidebar-width) - 14px);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    cursor: pointer;
    z-index: 1001;
    display: none; /* shown only on desktop via media query */
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease, left 0.3s ease;
    color: var(--text);
}

.evictsure-sidebar-toggle:hover {
    background: var(--primary-bg);
    color: var(--primary);
}

.evictsure-sidebar-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

/* --- Collapsed Logo Icon (hidden by default, shown when collapsed) --- */
.evictsure-collapsed-logo {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.evictsure-collapsed-logo img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    object-position: left center;
    /* Light mode: colorize white image to brand purple #6B298A */
    filter: brightness(0) saturate(100%) invert(17%) sepia(75%) saturate(2117%) hue-rotate(265deg) brightness(94%) contrast(92%);
}

/* Dark mode: show white logo as-is */
[data-theme="dark"] .evictsure-collapsed-logo img {
    filter: none;
}

/* --- Tooltip --- */
.evictsure-sidebar-tooltip {
    position: fixed;
    background: #1f2937;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.evictsure-sidebar-tooltip.visible {
    opacity: 1;
}

.evictsure-sidebar-tooltip::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -6px;
    transform: translateY(-50%);
    border-width: 6px 6px 6px 0;
    border-style: solid;
    border-color: transparent #1f2937 transparent transparent;
}

/* --- Desktop-only collapsed state rules --- */
@media (min-width: 1025px) {
    .evictsure-sidebar-toggle {
        display: flex;
    }

    /* Collapsed sidebar width */
    html.sidebar-collapsed .evictsure-sidebar {
        width: var(--sidebar-collapsed-width);
        overflow-x: hidden;
    }

    /* Main content adjusts margin */
    html.sidebar-collapsed .evictsure-main {
        margin-left: var(--sidebar-collapsed-width);
    }

    /* Hide full logo and brand text */
    html.sidebar-collapsed .evictsure-logo {
        display: none;
    }

    html.sidebar-collapsed .evictsure-brand {
        display: none;
    }

    /* Show collapsed logo icon */
    html.sidebar-collapsed .evictsure-collapsed-logo {
        display: flex;
    }

    /* Center sidebar header around monogram */
    html.sidebar-collapsed .evictsure-sidebar-header {
        justify-content: center;
        padding: var(--spacing-md) var(--spacing-sm);
    }

    /* Move toggle button to match collapsed width */
    html.sidebar-collapsed .evictsure-sidebar-toggle {
        left: calc(var(--sidebar-collapsed-width) - 14px);
    }

    /* Rotate toggle chevron when collapsed */
    html.sidebar-collapsed .evictsure-sidebar-toggle svg {
        transform: rotate(180deg);
    }

    /* Collapse section titles */
    html.sidebar-collapsed .evictsure-nav-title {
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
        opacity: 0;
        transition: height 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
    }

    /* Nav items: hide labels, center icons */
    html.sidebar-collapsed .evictsure-nav-item {
        justify-content: center;
        padding: var(--spacing-sm) 0;
    }

    html.sidebar-collapsed .evictsure-nav-item > span:not(.evictsure-nav-icon):not(.evictsure-nav-badge) {
        display: none;
    }

    /* Center the icon span */
    html.sidebar-collapsed .evictsure-nav-icon {
        margin: 0;
    }

    /* Badges become small dot indicators */
    html.sidebar-collapsed .evictsure-nav-badge {
        position: absolute;
        top: 6px;
        right: 10px;
        width: 8px;
        height: 8px;
        min-width: 8px;
        padding: 0;
        font-size: 0;
        border-radius: 50%;
    }

    /* Active bar stays on the left */
    html.sidebar-collapsed .evictsure-nav-item.active::before {
        width: 3px;
    }

    /* Theme toggle: hide label */
    html.sidebar-collapsed #theme-label {
        display: none;
    }

    /* Nav section bottom border spacing */
    html.sidebar-collapsed .evictsure-nav-section[style*="border-top"] {
        padding-top: var(--spacing-sm) !important;
    }

    /* Ensure nav has smooth transition */
    .evictsure-nav-title {
        transition: height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
    }
}

/* Hide toggle button on mobile */
@media (max-width: 1024px) {
    .evictsure-sidebar-toggle {
        display: none !important;
    }
}

/* ============================================================================
   ZIP CODE VALIDATION VISUAL STATES - MINIMAL FEEDBACK
   ============================================================================ */

/* Loading state during API call - subtle opacity only (for input fields) */
.evictsure-input-loading {
    opacity: 0.6;
    cursor: wait;
}

/* Auto-filled and Valid field styling - light green background */
.evictsure-autofilled,
.evictsure-valid {
    background-color: #f0f8f5 !important;
}

/* ZIP code shimmer loading animation */
@keyframes zip-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* === Dark Mode Overrides (Auto-generated from audit) === */

/* Mock/Live data indicators */
[data-theme="dark"] .evictsure-mock-data {
    background: rgba(255, 214, 10, 0.12);
    border-color: rgba(255, 214, 10, 0.3);
    color: #FFD60A;
}

[data-theme="dark"] .evictsure-live-data {
    background: rgba(74, 222, 128, 0.12);
    border-color: #4ADE80;
    color: #4ADE80;
}

/* Tooltip icon */
[data-theme="dark"] .tooltip-icon {
    background-color: #60a5fa;
    color: #ffffff;
}

/* Approval workflow status boxes */
[data-theme="dark"] .status-pending {
    background-color: rgba(255, 193, 7, 0.12);
    border-left-color: #fbbf24;
    color: #fbbf24;
}

[data-theme="dark"] .status-approved {
    background-color: rgba(74, 222, 128, 0.12);
    border-left-color: #4ADE80;
    color: #4ADE80;
}

[data-theme="dark"] .status-rejected {
    background-color: rgba(255, 107, 107, 0.12);
    border-left-color: #FF6B6B;
    color: #FF6B6B;
}

/* Section header in approval workflow */
[data-theme="dark"] .section-header h4 {
    color: #FFB347;
}

/* Badge styles for document types and status */
[data-theme="dark"] .badge-primary {
    background: #3b82f6;
    color: #ffffff;
}

[data-theme="dark"] .badge-info {
    background: #0ea5e9;
    color: #ffffff;
}

[data-theme="dark"] .badge-warning {
    background: #f59e0b;
    color: #1C1C1E;
}

[data-theme="dark"] .badge-success {
    background: #10b981;
    color: #ffffff;
}

[data-theme="dark"] .badge-secondary {
    background: var(--evict-text-disabled, #5E5E60);
    color: #ffffff;
}

[data-theme="dark"] .badge-default {
    background: var(--evict-border-primary, #3A3A3C);
    color: var(--evict-text-secondary, #A1A1A6);
}

/* Sidebar dark mode shadow */
[data-theme="dark"] .evictsure-sidebar {
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .evictsure-sidebar-header:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Form range dark mode for base track */
[data-theme="dark"] .form-range {
    background: rgba(255, 255, 255, 0.1);
}

/* Autofill/valid field dark mode */
[data-theme="dark"] .evictsure-autofilled,
[data-theme="dark"] .evictsure-valid {
    background-color: rgba(74, 222, 128, 0.1) !important;
}

/* Skeleton loading dark mode */
[data-theme="dark"] .skeleton {
    background-color: var(--evict-bg-tertiary, #3A3A3C);
    background-image: linear-gradient(90deg, var(--evict-bg-tertiary, #3A3A3C), var(--evict-border-secondary, #424245), var(--evict-bg-tertiary, #3A3A3C));
}

/* Approval comment input dark mode */
[data-theme="dark"] .approval-comment-input {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--evict-border-secondary, #424245);
    color: var(--evict-text-primary, #F5F5F7);
}

[data-theme="dark"] .approval-comment-input:focus {
    border-color: #FFB347;
    box-shadow: 0 0 0 3px rgba(255, 179, 71, 0.15);
}

/* Document detail panel dark mode */
[data-theme="dark"] .detail-header {
    border-bottom-color: var(--evict-border-primary, #3A3A3C);
}

[data-theme="dark"] .detail-header h3 {
    color: var(--evict-text-primary, #F5F5F7);
}

[data-theme="dark"] .detail-section label {
    color: var(--evict-text-tertiary, #86868B);
}

[data-theme="dark"] .document-description {
    color: var(--evict-text-primary, #F5F5F7);
}

/* Tags dark mode */
[data-theme="dark"] .tag {
    background: var(--evict-bg-tertiary, #3A3A3C);
    color: var(--evict-text-secondary, #A1A1A6);
}

/* Document item dark mode */
[data-theme="dark"] .document-icon {
    color: var(--evict-text-tertiary, #86868B);
}

[data-theme="dark"] .document-date {
    color: var(--evict-text-tertiary, #86868B);
}

/* Btn icon dark mode */
[data-theme="dark"] .btn-icon {
    color: var(--evict-text-tertiary, #86868B);
}

[data-theme="dark"] .btn-icon:hover {
    background: var(--evict-bg-tertiary, #3A3A3C);
    border-color: var(--evict-border-secondary, #424245);
    color: var(--evict-primary-300, #66B0FF);
}

/* Form input disabled dark mode - ensure color consistency */
[data-theme="dark"] .evictsure-form-input:disabled,
[data-theme="dark"] .evictsure-form-select:disabled,
[data-theme="dark"] .evictsure-form-textarea:disabled {
    background: var(--evict-bg-tertiary, #3A3A3C);
    border-color: var(--evict-border-secondary, #424245);
    color: var(--evict-text-disabled, #5E5E60);
    opacity: 1;
}

/* Chip primary dark mode */
[data-theme="dark"] .chip.chip-primary {
    background: linear-gradient(to right, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
}

/* Card footer dark mode */
[data-theme="dark"] .user-card-footer {
    background: var(--evict-bg-primary, #1C1C1E);
    border-top-color: var(--evict-border-primary, #3A3A3C);
}

/* Documents summary dark mode */
[data-theme="dark"] .documents-summary {
    color: var(--evict-text-tertiary, #86868B);
}

/* Form focus shadow override in dark mode */
[data-theme="dark"] .evictsure-form-input:focus,
[data-theme="dark"] .evictsure-form-select:focus,
[data-theme="dark"] .evictsure-form-textarea:focus {
    border-color: var(--evict-primary-300, #66B0FF);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}

/* ====================================================================
   DARK MODE HOVER OVERRIDES - Comprehensive fix for var(--light) and
   var(--primary-bg) hover rules that resolve to light colors in dark mode.
   var(--light) = var(--evict-gray-100) = #F3F4F6 (NOT redefined in dark mode)
   var(--primary-bg) = var(--evict-primary-50) = #001F3F in dark (too subtle)
   ==================================================================== */

/* Filter chip hover - uses var(--light) which is #F3F4F6 in dark mode */
[data-theme="dark"] .evictsure-filter-chip:hover {
    background: rgba(10, 132, 255, 0.1);
    border-color: var(--evict-primary-300, #66B0FF);
}

/* Notification bell hover - uses var(--bg-hover) which is undefined */
[data-theme="dark"] .evictsure-notification:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* View toggle button hover - used across case-list, invoice, user-management, org-list */
[data-theme="dark"] .view-toggle-btn:hover {
    background: rgba(10, 132, 255, 0.1);
    color: var(--evict-primary-300, #66B0FF);
}

/* Activity item hover - admin & super-admin dashboard, uses var(--primary-bg) */
[data-theme="dark"] .activity-item:hover {
    background: rgba(10, 132, 255, 0.08);
    border-color: var(--evict-primary-300, #66B0FF);
}

/* Template item hover - document preparation page, uses var(--primary-bg) */
[data-theme="dark"] .template-item:hover {
    background: rgba(10, 132, 255, 0.08);
}

/* Upload zone hover - document preparation page, uses var(--primary-bg) */
[data-theme="dark"] .upload-zone:hover {
    background: rgba(10, 132, 255, 0.05);
    border-color: var(--evict-primary-300, #66B0FF);
}

/* Generic btn-secondary hover - case-detail pages use var(--light) */
[data-theme="dark"] .btn-secondary:hover {
    background: var(--evict-bg-tertiary, #3A3A3C);
}

/* Team refresh button hover - case-creation-wizard, uses var(--primary-bg) */
[data-theme="dark"] .team-refresh-button:hover {
    background: rgba(10, 132, 255, 0.1);
}

/* Nav item hover - used in mockup/wizard pages, uses var(--light) */
[data-theme="dark"] .evictsure-nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Team member item hover - case-timeline.css files use var(--light) */
[data-theme="dark"] .team-member-item:hover {
    background: rgba(10, 132, 255, 0.08);
}

/* Document list item hover - task pages use var(--light) */
[data-theme="dark"] .document-list li:hover {
    background: rgba(10, 132, 255, 0.08);
}

/* Section header hover - case-detail pages use var(--light) */
[data-theme="dark"] .section-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Collapsible header hover - case-creation-wizard uses gradient to var(--light) */
[data-theme="dark"] .collapsible-header:hover {
    background: linear-gradient(135deg, var(--evict-bg-secondary, #2C2C2E) 0%, var(--evict-bg-tertiary, #3A3A3C) 100%);
}

/* Searchable select option hover - case-create.html */
[data-theme="dark"] .searchable-select-option:hover {
    background: rgba(10, 132, 255, 0.1);
}

/* Wizard step hover - assigned-cases, case-list pages use var(--bg-light) */
[data-theme="dark"] .wizard-step:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Modal close hover - case-list pages use var(--bg-light) */
[data-theme="dark"] .modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Remove spinner arrows from number inputs in Review Invoice modal */
#reviewInvoiceModal input[type="number"]::-webkit-inner-spin-button,
#reviewInvoiceModal input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#reviewInvoiceModal input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}