/* ==========================================================
   DASHBOARD PREMIUM - Fixed Scrolling & Toggle
   ========================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

   :root {
       --primary: #007aff;
       --primary-dark: #0062cc;
       --success: #34c759;
       --warning: #ff9500;
       --danger: #ff3b30;
       --info: #5ac8fa;
       --purple: #af52de;
       
       --bg-primary: #f5f5f7;
       --text-primary: #1c1c1e;
       --text-secondary: #3a3a3c;
       --text-tertiary: #6c6c70;
       --text-quaternary: #8e8e93;
       
       --glass-blur: blur(20px) saturate(180%);
       --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       
       --sidebar-width: 280px;
       --sidebar-collapsed-width: 78px;
       --navbar-height: 68px;
   }
   
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   html, body {
       overflow-x: hidden;
       width: 100%;
       height: 100%;
   }
   
   body {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
       background: #f5f5f7;
       background-image: 
           radial-gradient(circle at 20% 20%, rgba(0, 122, 255, 0.08) 0%, transparent 50%),
           radial-gradient(circle at 80% 80%, rgba(175, 82, 222, 0.08) 0%, transparent 50%);
       background-attachment: fixed;
       color: var(--text-primary);
       line-height: 1.5;
       -webkit-font-smoothing: antialiased;
       min-height: 100vh;
   }
   
   /* ==========================================================
      SIDEBAR - FIXED LAYOUT WITH SCROLLING
      ========================================================== */
   .sidebar {
       position: fixed;
       top: 0;
       left: 0;
       bottom: 0;
       width: var(--sidebar-width);
       background: rgba(255, 255, 255, 0.9);
       backdrop-filter: var(--glass-blur);
       -webkit-backdrop-filter: var(--glass-blur);
       border-right: 1px solid rgba(0, 0, 0, 0.05);
       box-shadow: 4px 0 24px rgba(0, 0, 0, 0.04);
       z-index: 1000;
       display: flex;
       flex-direction: column;
       transition: width var(--transition-smooth), transform var(--transition-smooth);
       /* CRITICAL: No overflow on sidebar itself */
       overflow: hidden;
   }
   
   .sidebar.collapsed {
       width: var(--sidebar-collapsed-width);
   }
   
   /* ============================================
      SIDEBAR HEADER - FIXED HEIGHT
      ============================================ */
   .sidebar-header {
       padding: 20px;
       display: flex;
       align-items: center;
       gap: 12px;
       border-bottom: 1px solid rgba(0, 0, 0, 0.05);
       height: 80px;
       min-height: 80px;
       max-height: 80px;
       flex-shrink: 0;
       flex-grow: 0;
   }
   
   .sidebar.collapsed .sidebar-header {
       padding: 20px 12px;
       justify-content: center;
   }
   
   .sidebar-logo {
       width: 44px;
       height: 44px;
       min-width: 44px;
       border-radius: 12px;
       background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       font-size: 1.3rem;
       box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
       transition: transform var(--transition-smooth);
       flex-shrink: 0;
   }
   
   .sidebar-logo:hover {
       transform: scale(1.05) rotate(-5deg);
   }
   
   .sidebar-title {
       font-size: 1rem;
       font-weight: 700;
       color: var(--text-primary);
       letter-spacing: -0.02em;
       white-space: nowrap;
       overflow: hidden;
       line-height: 1.2;
       transition: opacity var(--transition-smooth);
   }
   
   .sidebar-title small {
       display: block;
       font-size: 0.7rem;
       font-weight: 500;
       color: var(--text-quaternary);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       margin-top: 2px;
   }
   
   .sidebar.collapsed .sidebar-title {
       opacity: 0;
       width: 0;
   }
   
   /* ============================================
      SIDEBAR NAV - PROPERLY SCROLLABLE
      ============================================ */
   .sidebar-nav {
       /* CRITICAL FIXES FOR SCROLLING */
       flex: 1 1 auto;
       min-height: 0; /* MUST have this for flex scroll */
       overflow-y: auto;
       overflow-x: hidden;
       
       padding: 12px;
       
       /* Smooth scroll */
       -webkit-overflow-scrolling: touch;
       scrollbar-width: thin;
       scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
       
       /* Prevent any inherited overflow */
       overscroll-behavior: contain;
   }
   
   /* Custom scrollbar */
   .sidebar-nav::-webkit-scrollbar {
       width: 6px;
   }
   
   .sidebar-nav::-webkit-scrollbar-track {
       background: transparent;
   }
   
   .sidebar-nav::-webkit-scrollbar-thumb {
       background: rgba(0, 0, 0, 0.15);
       border-radius: 3px;
   }
   
   .sidebar-nav::-webkit-scrollbar-thumb:hover {
       background: rgba(0, 0, 0, 0.25);
   }
   
   /* Nav sections */
   .nav-section {
       margin-top: 8px;
       margin-bottom: 4px;
   }
   
   .nav-section:first-child {
       margin-top: 0;
   }
   
   .nav-section-title {
       font-size: 0.68rem;
       font-weight: 700;
       color: var(--text-quaternary);
       text-transform: uppercase;
       letter-spacing: 0.8px;
       padding: 12px 14px 6px;
       white-space: nowrap;
       overflow: hidden;
       transition: opacity var(--transition-smooth);
   }
   
   .sidebar.collapsed .nav-section-title {
       opacity: 0;
       padding: 4px 0;
       height: 8px;
       overflow: hidden;
   }
   
   /* Nav items */
   .nav-item {
       margin-bottom: 2px;
       list-style: none;
   }
   
   .nav-link {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 11px 14px;
       color: var(--text-secondary);
       font-size: 0.9rem;
       font-weight: 500;
       border-radius: 12px;
       text-decoration: none;
       transition: all var(--transition-fast);
       position: relative;
       white-space: nowrap;
       cursor: pointer;
       user-select: none;
   }
   
   .nav-link::before {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg, rgba(0, 122, 255, 0.08), rgba(175, 82, 222, 0.08));
       opacity: 0;
       transition: opacity var(--transition-fast);
       border-radius: 12px;
       pointer-events: none;
   }
   
   .nav-link:hover::before {
       opacity: 1;
   }
   
   .nav-link:hover {
       color: var(--primary);
       transform: translateX(2px);
   }
   
   .nav-link .nav-icon {
       width: 24px;
       height: 24px;
       min-width: 24px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.05rem;
       color: var(--text-tertiary);
       transition: all var(--transition-fast);
       position: relative;
       z-index: 1;
       flex-shrink: 0;
   }
   
   .nav-link:hover .nav-icon {
       color: var(--primary);
       transform: scale(1.15);
   }
   
   .nav-link .nav-text {
       flex: 1;
       position: relative;
       z-index: 1;
       overflow: hidden;
       white-space: nowrap;
       transition: opacity var(--transition-smooth);
   }
   
   .sidebar.collapsed .nav-link .nav-text {
       opacity: 0;
       width: 0;
   }
   
   /* Active */
   .nav-link.active {
       background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
       color: white;
       box-shadow: 0 4px 16px rgba(0, 122, 255, 0.35);
       transform: translateX(0);
   }
   
   .nav-link.active::before {
       opacity: 0;
   }
   
   .nav-link.active .nav-icon {
       color: white;
       transform: scale(1.1);
   }
   
   .nav-badge {
       background: var(--danger);
       color: white;
       font-size: 0.65rem;
       font-weight: 700;
       padding: 2px 7px;
       border-radius: 10px;
       min-width: 20px;
       text-align: center;
       position: relative;
       z-index: 1;
       box-shadow: 0 2px 6px rgba(255, 59, 48, 0.4);
       flex-shrink: 0;
       transition: opacity var(--transition-smooth);
   }
   
   .sidebar.collapsed .nav-badge {
       opacity: 0;
       width: 0;
       padding: 0;
       min-width: 0;
       overflow: hidden;
   }
   
   /* ============================================
      SIDEBAR FOOTER - FIXED HEIGHT
      ============================================ */
   .sidebar-footer {
       padding: 12px;
       border-top: 1px solid rgba(0, 0, 0, 0.05);
       flex-shrink: 0;
       flex-grow: 0;
       background: rgba(255, 255, 255, 0.5);
   }
   
   .sidebar-user {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 10px 12px;
       border-radius: 12px;
       background: rgba(0, 122, 255, 0.08);
       cursor: pointer;
       transition: all var(--transition-fast);
       text-decoration: none;
       color: inherit;
       overflow: hidden;
   }
   
   .sidebar-user:hover {
       background: rgba(0, 122, 255, 0.15);
   }
   
   .sidebar-user-avatar {
       width: 36px;
       height: 36px;
       min-width: 36px;
       border-radius: 50%;
       background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       font-weight: 600;
       font-size: 0.85rem;
       box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
       flex-shrink: 0;
   }
   
   .sidebar-user-info {
       flex: 1;
       min-width: 0;
       overflow: hidden;
       transition: opacity var(--transition-smooth);
   }
   
   .sidebar.collapsed .sidebar-user-info {
       opacity: 0;
       width: 0;
   }
   
   .sidebar-user-name {
       font-size: 0.85rem;
       font-weight: 600;
       color: var(--text-primary);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   
   .sidebar-user-role {
       font-size: 0.7rem;
       color: var(--text-quaternary);
       text-transform: capitalize;
   }
   
   /* ==========================================================
      MAIN CONTENT
      ========================================================== */
   .main-content {
       margin-left: var(--sidebar-width);
       transition: margin-left var(--transition-smooth);
       min-height: 100vh;
       display: flex;
       flex-direction: column;
   }
   
   .main-content.expanded {
       margin-left: var(--sidebar-collapsed-width);
   }
   
   /* ==========================================================
      TOP NAVBAR
      ========================================================== */
   .top-navbar {
       position: sticky;
       top: 0;
       height: var(--navbar-height);
       background: rgba(255, 255, 255, 0.85);
       backdrop-filter: var(--glass-blur);
       -webkit-backdrop-filter: var(--glass-blur);
       border-bottom: 1px solid rgba(0, 0, 0, 0.05);
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
       padding: 0 24px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       z-index: 900;
       flex-shrink: 0;
   }
   
   .navbar-left,
   .navbar-right {
       display: flex;
       align-items: center;
       gap: 16px;
   }
   
   /* ============================================
      HAMBURGER BUTTON - CRITICAL FIX
      ============================================ */
   .menu-toggle {
       width: 44px;
       height: 44px;
       border-radius: 12px;
       background: rgba(0, 122, 255, 0.08);
       border: none;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: background 0.2s;
       position: relative;
       z-index: 100;
       flex-shrink: 0;
       padding: 0;
       /* CRITICAL: Prevent hamburger children from blocking clicks */
       pointer-events: auto;
   }
   
   .menu-toggle:hover {
       background: rgba(0, 122, 255, 0.15);
   }
   
   .menu-toggle:active {
       transform: scale(0.95);
   }
   
   /* Hamburger - REMOVE POINTER EVENTS */
   .hamburger {
       width: 22px;
       height: 16px;
       position: relative;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       /* CRITICAL: Let clicks pass through to button */
       pointer-events: none;
   }
   
   .hamburger span {
       display: block;
       height: 2.5px;
       background: var(--primary);
       border-radius: 3px;
       transition: all 0.3s ease;
       /* CRITICAL: Let clicks pass through */
       pointer-events: none;
   }
   
   .hamburger span:nth-child(1) { width: 100%; }
   .hamburger span:nth-child(2) { width: 70%; }
   .hamburger span:nth-child(3) { width: 100%; }
   
   .menu-toggle:hover .hamburger span:nth-child(2) {
       width: 100%;
   }
   
   /* Page title */
   .page-title-area {
       display: flex;
       flex-direction: column;
   }
   
   .page-title {
       font-size: 1.1rem;
       font-weight: 700;
       color: var(--text-primary);
       line-height: 1.2;
   }
   
   .page-subtitle {
       font-size: 0.75rem;
       color: var(--text-quaternary);
       margin-top: 2px;
   }
   
   /* Nav icon buttons */
   .nav-icon-btn {
       width: 44px;
       height: 44px;
       border-radius: 12px;
       background: rgba(0, 0, 0, 0.04);
       border: none;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all 0.2s;
       color: var(--text-secondary);
       position: relative;
       font-size: 1.05rem;
   }
   
   .nav-icon-btn:hover {
       background: rgba(0, 122, 255, 0.12);
       color: var(--primary);
       transform: translateY(-2px);
   }
   
   .notification-count {
       position: absolute;
       top: -4px;
       right: -4px;
       min-width: 20px;
       height: 20px;
       padding: 0 5px;
       background: var(--danger);
       color: white;
       font-size: 0.65rem;
       font-weight: 700;
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       border: 2px solid white;
   }
   
   /* User button */
   .user-avatar-btn {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 6px;
       border-radius: 12px;
       background: rgba(0, 0, 0, 0.04);
       border: none;
       cursor: pointer;
       transition: all 0.2s;
       text-decoration: none;
       color: inherit;
   }
   
   .user-avatar-btn:hover {
       background: rgba(0, 122, 255, 0.1);
   }
   
   .user-avatar {
       width: 36px;
       height: 36px;
       border-radius: 10px;
       background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       font-weight: 700;
       font-size: 0.85rem;
       flex-shrink: 0;
   }
   
   .user-info {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       text-align: left;
   }
   
   .user-name-nav {
       font-size: 0.85rem;
       font-weight: 600;
       color: var(--text-primary);
       line-height: 1.2;
   }
   
   .user-role-nav {
       font-size: 0.7rem;
       color: var(--text-quaternary);
       text-transform: capitalize;
   }
   
   /* ==========================================================
      PAGE CONTENT
      ========================================================== */
   .page-content {
       flex: 1;
       padding: 28px;
       overflow-x: hidden;
   }
   
   /* Cards */
   .card {
       background: rgba(255, 255, 255, 0.9);
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
       border: 1px solid rgba(255, 255, 255, 0.6);
       border-radius: 20px;
       box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
       transition: all 0.3s;
       margin-bottom: 24px;
       overflow: hidden;
   }
   
   .card:hover {
       transform: translateY(-3px);
       box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
   }
   
   /* Dropdown */
   .dropdown-menu {
       background: rgba(255, 255, 255, 0.98);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       border: 1px solid rgba(255, 255, 255, 0.6);
       border-radius: 16px;
       box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
       padding: 8px;
       margin-top: 8px;
   }
   
   .dropdown-item {
       border-radius: 10px;
       padding: 10px 14px;
       font-size: 0.9rem;
       font-weight: 500;
       color: var(--text-secondary);
       transition: all 0.15s;
       display: flex;
       align-items: center;
       gap: 10px;
       cursor: pointer;
   }
   
   .dropdown-item:hover {
       background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(175, 82, 222, 0.1));
       color: var(--primary);
   }
   
   .dropdown-header {
       padding: 10px 14px 6px;
       font-size: 0.7rem;
       font-weight: 700;
       color: var(--text-quaternary);
       text-transform: uppercase;
   }
   
   /* ==========================================================
      MOBILE OVERLAY
      ========================================================== */
   .sidebar-overlay {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.4);
       backdrop-filter: blur(4px);
       -webkit-backdrop-filter: blur(4px);
       opacity: 0;
       visibility: hidden;
       transition: all 0.3s;
       z-index: 999;
   }
   
   .sidebar-overlay.active {
       opacity: 1;
       visibility: visible;
   }
   
   /* ==========================================================
      RESPONSIVE - MOBILE
      ========================================================== */
   @media (max-width: 768px) {
       .sidebar {
           transform: translateX(-100%);
           width: var(--sidebar-width);
       }
       
       .sidebar.mobile-open {
           transform: translateX(0);
           box-shadow: 0 0 60px rgba(0, 0, 0, 0.3);
       }
       
       .main-content {
           margin-left: 0 !important;
       }
       
       .page-content {
           padding: 16px;
       }
       
       .top-navbar {
           padding: 0 16px;
           height: 64px;
       }
       
       .user-info {
           display: none;
       }
       
       .page-title-area {
           display: none;
       }
   }
   
   @keyframes float {
       0%, 100% { transform: translateY(0); }
       50% { transform: translateY(-10px); }
   }
   /* ============================================
   FIX: Toast notifications must appear ABOVE everything
   ============================================ */
.toast-container {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    top: auto !important;
    left: auto !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    max-width: 400px !important;
    width: calc(100% - 48px) !important;
    pointer-events: none !important;
}

.toast-container .toast,
.toast-container .toast-notification {
    pointer-events: auto !important;
    z-index: 99999 !important;
}

/* Ensure modal dialogs stay above toasts */
.modal {
    z-index: 100000 !important;
}

.modal-backdrop {
    z-index: 99998 !important;
}

/* Toast on mobile */
@media (max-width: 576px) {
    .toast-container {
        bottom: 12px !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-width: 100% !important;
    }
}
/* ============================================
   NOBLE HOMES LOGO — Sidebar & Loader
   ============================================ */
   .sidebar-logo {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 6px !important;
    overflow: hidden;
}

.sidebar-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.sidebar-logo i {
    display: none;
}

.sidebar-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: -0.025em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--transition-smooth);
}

.sidebar-title small {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-quaternary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
}
/* ============================================
   NAVBAR NOTIFICATION DROPDOWN
   ============================================ */
   .notification-dropdown-item {
    display: block !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
    color: inherit !important;
}

.notification-dropdown-item:hover {
    background: #f2f2f7 !important;
    color: inherit !important;
}

.notification-dropdown-item.unread {
    background: #f0f7ff;
}

.notification-dropdown-item.unread:hover {
    background: #e0efff;
}

/* Make badge circular and always on top */
#notificationBadge {
    display: none;
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ff3b30;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(255, 59, 48, 0.4);
    z-index: 10;
}

#notificationBadge[style*="display: flex"],
#notificationBadge[style*="display:flex"] {
    display: flex !important;
}

/* Sidebar badge */
#notifBadge {
    display: none;
    background: #ff3b30;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
    margin-left: auto;
}
/* ============================================
   GLOBAL MODAL WIDTH CONSTRAINTS
   Applies to ALL Bootstrap modals
   ============================================ */

/* Default modal: 520px max */
.modal .modal-dialog {
    max-width: 520px !important;
    margin: 1.75rem auto !important;
}

/* Small modal (delete confirmations) */
.modal .modal-dialog.modal-sm {
    max-width: 400px !important;
}

/* Large modal (forms) */
.modal .modal-dialog.modal-lg {
    max-width: 800px !important;
}

/* Extra large modal */
.modal .modal-dialog.modal-xl {
    max-width: 1140px !important;
}

/* Dialog modal (our custom dialog system) */
.modal.dialog-modal .modal-dialog {
    max-width: 420px !important;
    width: 420px !important;
}

.modal.dialog-modal .modal-dialog.modal-dialog-centered {
    max-width: 420px !important;
    width: 420px !important;
}

/* Prevent any modal-content from stretching */
.modal .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

/* Modal header: proper padding and layout */
.modal .modal-header {
    padding: 20px 24px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 20px 20px 0 0 !important;
}

.modal .modal-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}

/* Modal body: proper padding */
.modal .modal-body {
    padding: 24px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
}

/* Modal footer: proper alignment */
.modal .modal-footer {
    padding: 16px 24px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    border-radius: 0 0 20px 20px !important;
    background: #fafafa !important;
}

/* Mobile: full-width minus margins */
@media (max-width: 576px) {
    .modal .modal-dialog,
    .modal .modal-dialog.modal-sm,
    .modal .modal-dialog.modal-lg,
    .modal .modal-dialog.modal-xl,
    .modal.dialog-modal .modal-dialog {
        max-width: calc(100% - 24px) !important;
        width: calc(100% - 24px) !important;
        margin: 12px auto !important;
    }
    
    .modal .modal-header {
        padding: 16px 20px !important;
    }
    
    .modal .modal-body {
        padding: 20px !important;
        max-height: 75vh !important;
    }
    
    .modal .modal-footer {
        padding: 14px 20px !important;
        flex-direction: column-reverse !important;
    }
    
    .modal .modal-footer .btn {
        width: 100% !important;
    }
}

/* ============================================
   DEVICE AUTH — Additional Styles
   ============================================ */

/* Device changes count badge pulse */
#deviceChangesCount:not([style*="display: none"]) {
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
    }
    50% { 
        transform: scale(1.1);
        box-shadow: 0 0 0 8px rgba(255, 59, 48, 0);
    }
}

/* Pending approvals badge */
#pendingApprovalsCount:not([style*="display: none"]) {
    animation: badgePulse 2s ease-in-out infinite;
}

/* Device verification modal specific */
#deviceVerificationModal .modal-content {
    border-radius: 20px;
    overflow: hidden;
}

#deviceVerificationModal .modal-body {
    padding: 1.5rem;
}

/* Success state */
.verification-success-state {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
}

.verification-success-state i {
    color: #22c55e;
    font-size: 4rem;
    animation: verificationSuccess 0.6s ease forwards;
}

/* Danger state */
.verification-danger-state {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
}

.verification-danger-state i {
    color: #ef4444;
    font-size: 4rem;
    animation: shake 0.5s ease;
}

/* Warning state */
.verification-warning-state {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
}

.verification-warning-state i {
    color: #f59e0b;
    font-size: 4rem;
}