/* Modern Dashboard Redesign for Booked Scheduler */

        /* Reset and base styles */
        * {
          box-sizing: border-box;
        }

        body {
          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
          margin: 0;
          padding: 0;
          min-height: 100vh;
        }

        /* Enhanced Navigation */
        .navbar-default {
          background: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(20px);
          border: none;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
          border-radius: 0;
          padding: 0.5rem 0;
        }

        .navbar-brand img {
          height: 40px;
          width: auto;
        }

        .navbar-nav > li > a {
          color: #374151 !important;
          font-weight: 500;
          transition: all 0.3s ease;
          border-radius: 8px;
          margin: 0 4px;
        }

        .navbar-nav > li > a:hover,
        .navbar-nav > li > a:focus {
          background: linear-gradient(135deg, #F4A637, #CC8B2E);
          color: white !important;
          transform: translateY(-2px);
        }

        .dropdown-menu {
          border: none;
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
          border-radius: 12px;
          padding: 8px;
          background: white;
          margin-top: 8px;
        }

        .dropdown-menu > li > a {
          padding: 12px 16px;
          border-radius: 8px;
          transition: all 0.2s ease;
          color: #374151;
        }

        .dropdown-menu > li > a:hover {
          background: #f8fafc;
          color: #F4A637;
        }

        /* Main Container */
        #main {
          padding-top: 80px;
          padding-left: 2rem;
          padding-right: 2rem;
        }

        /* LOGIN PAGE */
        /* login button */
        .btn-primary{
            background: linear-gradient(135deg, #F4A637, #CC8B2E);
            color: white !important;
            border: none;
            border-radius: 25px;
            padding: 12px 24px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-size: 1rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);

        }

        .login-container {
            max-width: 500px;
            width: 100%;
            margin: 0 auto;
            padding: 20px;
        }

        #login-box {
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
            overflow: hidden;
          

        }

        #login {
            background: none;
            background-color: none;
            border: none;
        }
        .default-box, #page-login .default-box {
            background: none;
            background-color: none;
            border: none;
        }

        .input-group-addon {
           background-color: transparent;
           border: none;
        }

        .input-group-addon i {
            color: #F4A637;
            font-size: 18px;
        }


        .login-subtitle {
            font-size: 16px;
            opacity: 0.9;
            margin: 0;
            font-weight: 500;
        }

        .login-body {
            padding: 40px 30px;
        }

        .form-group {
            margin-bottom: 25px;
            position: relative;
        }

        .form-control {
            height: 50px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 16px;
            padding: 12px 50px 12px 16px;
            transition: all 0.3s ease;
            background: #f8f9fa;
        }

        .form-control:focus {
            border-color: #e67e22;
            box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.1);
            background: white;
            outline: none;
        }

        .input-icon {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #adb5bd;
            font-size: 18px;
            z-index: 2;
        }

        #login {
            width: 100%;
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 16px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }

        #btn-login:hover {
            background: linear-gradient(135deg, #2980b9 0%, #1f618d 100%);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
        }

        /* .checkbox-container {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
        } */

        .checkbox-container input[type="checkbox"] {
            margin-right: 10px;
            transform: scale(1.2);
        }

        .checkbox label {
            color: #6c757d;
            font-size: 14px;
            margin: 0;
            cursor: pointer;
        }

        .language-dropdown {
            position: relative;
        }

        #change-language button {
            background: none;
            border: none;
            color: #6c757d;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: color 0.3s ease;
        }

        #forgot-password a{
            color: #6c757d;
            font-size: 14px;
            text-decoration: none;
            transition: color 0.3s ease;
           
        }

        .language-btn:hover {
            color: #e67e22;
        }

        .language-options {
            position: absolute;
            bottom: 100%;
            right: 0;
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            min-width: 200px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 1000;
        }

        .language-options select {
            width: 100%;
            border: none;
            padding: 10px;
            font-size: 14px;
            background: transparent;
        }

         @media (max-width: 768px) {
            .login-header {
                padding: 30px 20px;
            }
            
            .login-body {
                padding: 30px 20px;
            }
            
            .login-footer {
                padding: 20px;
                flex-direction: column;
                text-align: center;
            }
            
            .login-logo {
                max-width: 240px;
            }
        }

        /* Animation for page load */
        .login-card {
            animation: slideInUp 0.6s ease-out;
        }

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

        /* DASHBOARD PAGE */
        /* Dashboard Grid */
        
        #dashboardList {
    display: grid;
    /* Define two columns. This will allow the first two items to be side by side. */
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Target the third item to make it span both columns */
#dashboardList > *:nth-child(3) {
    grid-column: 1 / span 2; /* This makes the 3rd item start at column 1 and span 2 columns */
}

        /* Modern Dashboard Cards */
        .dashboard {
          background: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(20px);
          border-radius: 20px;
          border: 1px solid rgba(255, 255, 255, 0.2);
          /* Enhanced shadow for more depth */
          box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
          overflow: hidden;
          transition: all 0.3s ease;
        }

        .dashboard:hover {
          transform: translateY(-8px);
          box-shadow: 0 35px 70px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
        }

        /* Dashboard Headers */
        .dashboardHeader {
          background: linear-gradient(135deg, #F4A637, #CC8B2E);
          padding: 2.5rem;
          color: white;
          position: relative;
          overflow: hidden;
        }

        .dashboardHeader::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
          opacity: 0.3;
        }

        .dashboardHeader .pull-left,
        .dashboardHeader .pull-right {
          position: relative;
          z-index: 2;
        }

        .dashboardHeader .pull-left {
          font-size: 1.5rem;
          font-weight: 600;
          letter-spacing: -0.025em;
        }

        .badge {
          background: rgba(255, 255, 255, 0.2);
          color: white;
          border-radius: 20px;
          padding: 4px 12px;
          font-size: 0.875rem;
          font-weight: 500;
          margin-left: 8px;
        }

        .dashboardHeader .pull-right a {
          color: rgba(255, 255, 255, 0.8);
          transition: all 0.3s ease;
          padding: 8px;
          border-radius: 8px;
        }

        .dashboardHeader .pull-right a:hover {
          background: rgba(255, 255, 255, 0.1);
          color: white;
          text-decoration: none;
        }

        /* Dashboard Contents */
        .dashboardContents {
          padding: 2rem; /* Ensure consistent padding */
        }

        .noresults {
          text-align: center;
          /* Improved contrast for text on white background */
          color: #4a5568;
          font-style: italic;
          padding: 3rem;
          background: #f9fafb;
          border-radius: 12px;
          margin: 1rem 0;
        }

        /* Resource Availability Styling */
        .availabilityDashboard .header {
          font-size: 1.125rem;
          font-weight: 600;
          color: #374151;
          margin: 2rem 0 1rem 0;
          padding-bottom: 0.5rem;
          border-bottom: 2px solid #e5e7eb;
        }

        .availabilityItem {
          background: #f8fafc;
          border-radius: 12px;
          padding: 1.5rem;
          margin: 1rem 0;
          transition: all 0.3s ease;
          border: 1px solid #e5e7eb;
        }

        .availabilityDashboard .availabilityItem .btn {
    color: #fff;
    padding: 16px 0px;
        }

        .availabilityItem:hover {
          background: white;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
          transform: translateX(4px);
        }

        .availabilityDashboard .resourceName{
            background-color: transparent;
        }

        

        .availabilityDashboard .availabilityItem {
    padding: 24px 0;
}

        .resourceName {
          font-weight: 600;
          font-size: 1.1rem;
          color: #374151;
                      background-color: transparent;

        }

        .resourceName a {
          color: #1f1f1f !important;
          font-size: 1.5rem;
          text-decoration: none;
          transition: color 0.3s ease;
        }

        .resourceName a:hover {
          color: #CC8B2E !important;
        }

        .resourceNameSelector {
          color: #9ca3af;
          font-size: 2rem;
          margin-right: 8px;
          transition: color 0.3s ease;
        }

        .availabilityItem:hover .resourceNameSelector {
          color: #F4A637;
        }

        .availability {
          display: flex;
          align-items: center;
          font-size: 0.9rem;
          color: #6b7280;
        }

        .no-data {
          background: #fef3c7;
          /* Improved contrast for yellow background text */
          color: #7b341f; /* Darker orange/red */
          padding: 8px 12px;
          border-radius: 20px;
          font-size: 1rem;
          font-weight: 500;
        }

        /* Reserve Button */
        .reserveButton .btn {
          /* Brighter, more inviting blue gradient for consistency with XPO logo blues */
          background: linear-gradient(135deg, #08329D, #1151F2);
          color: white !important;
          border: none;
          border-radius: 25px;
          padding: 12px 24px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          font-size: 1rem;
          transition: all 0.3s ease;
          /* Updated shadow to match new button color */
          box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
        }

        .reserveButton .btn:hover {
          background: linear-gradient(135deg, #1151F2, #3b82f6);
          transform: translateY(-2px);
          /* Updated shadow on hover */
          box-shadow: 0 8px 24px rgba(29, 78, 216, 0.4);
        }

        /* Specific Dashboard Customizations */
        #announcementsDashboard .dashboardHeader {
          background: linear-gradient(135deg, #F4A637, #CC8B2E); /* Keep orange for primary section */
        }
        
        #upcomingReservationsDashboard .dashboardHeader {
          /* Consistent blue gradient for other headers */
          background: linear-gradient(135deg, #1151F2, #3b82f6);
        }

        #availabilityDashboard .dashboardHeader {
          background: linear-gradient(135deg, #F4A637, #CC8B2E); /* Keep orange for this key section */
        }

        #adminUpcomingReservationsDashboard .dashboardHeader {
          /* Consistent blue gradient for other headers */
          background: linear-gradient(135deg, #1d4ed8, #2563eb);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
          #main {
            padding-left: 1rem;
            padding-right: 1rem;
          }
          
          #dashboardList {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
          }
          
          .dashboardHeader {
            padding: 2.5rem;
          }
          
          .dashboardContents {
            padding: 1.5rem;
          }
          
          .availabilityItem {
            padding: 1rem;
          }
          
          .availabilityItem .col-xs-12 {
            margin-bottom: 1rem;
          }
        }

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

        .loading {
          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
          background-size: 200px 100%;
          animation: shimmer 1.5s infinite;
        }

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

        /* Focus styles for better accessibility */
        .btn:focus,
        .navbar-nav > li > a:focus {
          outline: 2px solid #F4A637;
          outline-offset: 2px;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
          width: 8px;
        }

        ::-webkit-scrollbar-track {
          background: #f1f5f9;
          border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
          background: linear-gradient(135deg, #F4A637, #CC8B2E);
          border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
          background: linear-gradient(135deg, #CC8B2E, #a87226);
        }

        /* Animation for dashboard cards loading */
        .dashboard {
          animation: fadeInUp 0.6s ease forwards;
          opacity: 0;
          transform: translateY(30px);
        }

        .dashboard:nth-child(1) { animation-delay: 0.1s; }
        .dashboard:nth-child(2) { animation-delay: 0.2s; }
        .dashboard:nth-child(3) { animation-delay: 0.3s; }
        .dashboard:nth-child(4) { animation-delay: 0.4s; }

        @keyframes fadeInUp {
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        /* Logo placeholder */
        .logo-placeholder {
          height: 40px;
          width: 150px;
          background: linear-gradient(135deg, #F4A637, #CC8B2E);
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-weight: 600;
          font-size: 14px;
        }

        /* Footer styles */
        .footer.navbar{
          background: #1f1f1f;
        }

        .footer.navbar a {
          color: #F4A637;
          text-decoration: none;
          transition: color 0.3s ease;
        }