:root {
            --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
            --card-shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        }

       .load-header {
           background: #1c1d23;
            /*background: linear-gradient(to right, #1c1d23, #575965, #1c1d23);*/
           /*{#background: linear-gradient(to right, #1c1d23, #575965, rgba(87, 177, 255, 1), rgba(145, 225, 138, 1));#}*/
            color: white;
            border-radius: 16px;
            padding: 1rem;
            margin-bottom: 1rem;
            box-shadow: var(--card-shadow);
            transition: transform 0.3s ease-in-out;
        }

       .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.875rem;
        }

        .status-badge-small {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            font-weight: 600;
            font-size: .7rem;
        }

        .status-card {
            background: white;
            border-radius: 12px;
            box-shadow: var(--card-shadow);
            transition: all 0.2s ease;
            border: 1px solid #e5e7eb;
        }

        /*.status-card:hover {*/
        /*    border-color: rgba(145, 225, 138, 1);*/
        /*    box-shadow: var(--card-shadow-hover);*/
        /*    transform: translateY(-1px);*/
        /*}*/

        .status-issue {
            background-color: #fee2e2;
            color: #991b1b;
        }

        .metric-card {
            height: 175px;
            text-align: start;
            padding: 1.5rem;
        }

        .metric-value {
            /*{#font-size: 2rem;#}*/
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: #1c1d23;
        }

        .metric-label {
            font-size: .9rem;
            font-weight: 500;
            text-decoration: underline;
        }

        .data-section {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border: 1px solid #e5e7eb;
            box-shadow: var(--card-shadow);
        }

        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #e5e7eb;
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #111827;
            margin: 0;
        }

        .tab-modern {
            background: none;
            padding: 0.5rem 1rem;
            transition: all 0.2s ease;
            color: #575965;
            font-weight: 500;
          border: 4px solid transparent;
          border-radius:10px;
        }

        .tab-modern.active {
          background-color: #1E2027 !important;
          color: white !important;
          background: linear-gradient(#1E2027, #1E2027) padding-box,
                      linear-gradient(to left, rgba(145, 225, 138, 1), rgba(87, 177, 255, 1)) border-box;
          border: 4px solid transparent;
          border-radius: 10px;
        }

        .tab-modern:hover:not(.active) {
            background: #f3f4f6;
            color: #1c1d23;
        }

        .basic-text-clamp-1 {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-clamp-1 {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.4;
        }

        .text-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.4;
        }

        .dataTables_wrapper .dataTable tbody td {
            white-space: normal; /* Allows text to wrap */
            word-break: break-word; /* Breaks long words if necessary */
        }

        .datatable-wrap-text {
            word-wrap: break-word !important;
            word-break: break-all !important;
            max-width: 600px !important;
            white-space: normal !important;
            overflow-wrap: break-word !important;
        }