/* Force LIGHT UI even if OS/browser prefers dark */
    html, body { background: #f9fafb; color: #111827; }
    .stitle a:before { content:"Demo"; margin-right:5px; }

    /* DataTables controls */
    .dt-length label, .dt-search label, .dt-info { color: #111827 !important; font-weight: 500; }
    .dt-length select, .dt-search input {
      background: #ffffff !important;
      color: #111827 !important;
      border: 1px solid #d1d5db !important;
      border-radius: 0.5rem !important;
      padding: 0.45rem 0.6rem !important;
      outline: none !important;
    }
    .dt-length select:focus, .dt-search input:focus {
      border-color: #2563eb !important;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    }

    /* Pagination (override DataTables prefers-dark rules) */
    .dt-paging, .dt-paging nav { background: transparent !important; }
    .dt-paging-button, .dt-paging a, .dt-paging button {
      background: #ffffff !important;
      color: #111827 !important;
      border: 1px solid #d1d5db !important;
      border-radius: 0.5rem !important;
      padding: 0.35rem 0.7rem !important;
      margin-left: 0.25rem !important;
      font-weight: 500;
    }
    .dt-paging-button:hover { background: #f9fafb !important; }
    .dt-paging-button.current {
      background: #2563eb !important;
      color: #ffffff !important;
      border-color: #2563eb !important;
    }
    .dt-paging-button.disabled {
      background: #f3f4f6 !important;
      color: #9ca3af !important;
      border-color: #e5e7eb !important;
      cursor: not-allowed;
    }
    @media (prefers-color-scheme: dark) {
      .dt-paging-button, .dt-paging a, .dt-paging button {
        background: #ffffff !important;
        color: #111827 !important;
        border-color: #d1d5db !important;
      }
      .dt-paging-button.current {
        background: #2563eb !important;
        color: #ffffff !important;
        border-color: #2563eb !important;
      }
      .dark\:bg-gray-700\/25 {
        background-color: rgb(55 65 81 / 0.8) !important;
      }
      .dark\:even\:bg-gray-900\/50:nth-child(even) {
        background-color: rgb(17 24 39 / 0.1) !important;
      }
    }
    
    @media screen and (max-width:1023px) { 
            #tblHistory_wrapper>div:nth-child(3),
            #tblSupport_wrapper>div:nth-child(3),
            #tbl_wrapper>div:nth-child(3) { display:inline-block !important; width:100%; }
            #tblHistory_wrapper>div:nth-child(3)>div,
            #tblSupport_wrapper>div:nth-child(3)>div,
            #tbl_wrapper>div:nth-child(3)>div { justify-self: center !important; margin-bottom:15px; }
            #tblHistory_wrapper .dt-length label,
            #tblHistory_wrapper .dt-search label,
            #tblSupport_wrapper .dt-length label,
            #tblSupport_wrapper .dt-search label, 
            #tbl_wrapper .dt-length label,
            #tbl_wrapper .dt-search label { display:none; }
            .text-2xl { font-size: 1.1rem !important; font-weight: bold !important;}
            .grid input[type="date"] { width:80% !important; }
    }
    
    #tblHistory_wrapper>div:nth-child(2),
    #tblSupport_wrapper>div:nth-child(2),
    #tbl_wrapper>div:nth-child(2) { overflow:scroll; }
    .status-dot { display:none; }

    /* Status badges */
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.15rem 0.6rem;
      border-radius: 9999px;
      font-weight: 600;
      font-size: 0.75rem;
      line-height: 1.25rem;
      border: 1px solid transparent;
      user-select: none;
      white-space: nowrap;
    }
     
    /* Color map (light theme) */
    .status-updated      { color: #fff; background:#28a745; border-color: #28a745; }
    .status-almost-due   { color: #fff; background: #ffc107; border-color: #ffc107; }
    .status-due          { color: #fff; background: #F76464; border-color: #F76464; }
    .status-over-due     { color: #fff; background: #9B1313; border-color: #9B1313; }
    .status-disconnection { color: #fff; background: #9D00FF; border-color: #9D00FF; }
    .status-disconnected { color: #fff; background: #FF0000; border-color: #e5e7eb; }

    /* Disconnected row */
    tr.row-disconnected td { background: #ffcbd1 !important; }
    tr.row-disconnected { opacity: 0.6; }