@charset "UTF-8";
/*!
* App CSS, indeholder CSS specifikt til SundVideo_Portal_Web
*/

/* Priority Notification Animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Device Cards for VideoCall page */
.device-card {
    border-left: 4px solid #0d6efd;
    transition: all 0.2s ease-in-out;
    height: 100%; /* Sikrer alle cards i samme række har samme højde */
}

.device-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.device-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.device-card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
}

.device-card .card-text {
    font-size: 0.9rem;
    flex-grow: 1; /* Gør at beskrivelsen fylder tilgængelig plads */
}

/* Responsiv optimering for mobile devices */
@media (max-width: 576px) {
    .device-card .card-title {
        font-size: 1rem;
    }
    
    .device-card .card-text {
        font-size: 0.85rem;
    }
    
    h1.mt-4 {
        font-size: 1.5rem;
    }
}

/* Desktop optimering */
@media (min-width: 992px) {
    .device-card .card-title {
        font-size: 1.05rem;
    }
    
    .device-card .card-text {
        font-size: 0.875rem;
    }
}

/* Stor Desktop optimering (4 cards pr. række) */
@media (min-width: 1200px) {
    .device-card .card-title {
        font-size: 1rem;
    }
    
    .device-card .card-text {
        font-size: 0.8rem;
    }
}

/* Søgefelt styling */
#deviceSearchInput:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

#clearSearch {
    transition: opacity 0.2s ease-in-out;
}

.device-item {
    transition: opacity 0.3s ease-in-out;
}

/* ===================================
   VDX Devices Table Responsive Styling
   =================================== */

/* DataTables wrapper styling - forhindrer horizontal scroll */
#devicesTable_wrapper {
    width: 100%;
    overflow-x: visible;
}

#devicesTable {
    width: 100% !important;
}

/* Forhindrer wordwrap i table header */
#devicesTable thead th {
    white-space: nowrap;
}

/* Maksimum kolonnebredder */
/* Kolonne 0: Short ID */
#devicesTable thead th:nth-child(1),
#devicesTable tbody td:nth-child(1) {
    max-width: 60px;
}

/* Kolonne 3: Status (ikon) */
#devicesTable thead th:nth-child(4),
#devicesTable tbody td:nth-child(4) {
    max-width: 50px;
}

/* Kolonne 4: Type */
#devicesTable thead th:nth-child(5),
#devicesTable tbody td:nth-child(5) {
    max-width: 100px;
}

/* Kolonne 6: Sidst set */
#devicesTable thead th:nth-child(7),
#devicesTable tbody td:nth-child(7) {
    max-width: 80px;
}

/* Kolonne 7: VDX Sync Status */
#devicesTable thead th:nth-child(8),
#devicesTable tbody td:nth-child(8) {
    max-width: 100px;
}

/* Kolonne 8: Actions */
#devicesTable thead th:nth-child(9),
#devicesTable tbody td:nth-child(9) {
    max-width: 100px;
}

/* ===================================
   Organisations Table Responsive Styling
   =================================== */

/* DataTables wrapper styling - forhindrer horizontal scroll */
#organisationsTable_wrapper {
    width: 100%;
    overflow-x: visible;
}

#organisationsTable {
    width: 100% !important;
}

/* Forhindrer wordwrap i table header */
#organisationsTable thead th {
    white-space: nowrap;
}

/* Maksimum kolonnebredder */
/* Kolonne 0: VDX ID */
#organisationsTable thead th:nth-child(1),
#organisationsTable tbody td:nth-child(1) {
    max-width: 120px;
}

/* Kolonne 2: Client ID */
#organisationsTable thead th:nth-child(3),
#organisationsTable tbody td:nth-child(3) {
    max-width: 150px;
}

/* Kolonne 3: Credentials */
#organisationsTable thead th:nth-child(4),
#organisationsTable tbody td:nth-child(4) {
    max-width: 100px;
}

/* Kolonne 4: Oprettet */
#organisationsTable thead th:nth-child(5),
#organisationsTable tbody td:nth-child(5) {
    max-width: 120px;
}

/* Kolonne 5: Opdateret */
#organisationsTable thead th:nth-child(6),
#organisationsTable tbody td:nth-child(6) {
    max-width: 120px;
}

/* Mobil optimering */
@media (max-width: 768px) {
    .card-header h1,
    .card-header i {
        font-size: 1.2rem;
    }
    
    /* Knapper stables på mobil */
    .mb-3.text-end {
        text-align: center !important;
    }
    
    .mb-3.text-end .btn {
        margin-bottom: 0.5rem;
        width: 100%;
    }
    
    /* Mindre action knapper på mobil */
    .btn-group-sm > .btn {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
    }
    
    /* DataTables info og pagination på mobil */
    .dataTables_info,
    .dataTables_paginate {
        text-align: center !important;
        margin-top: 1rem;
    }
    
    .dataTables_length,
    .dataTables_filter {
        text-align: center !important;
        margin-bottom: 1rem;
    }
}

/* Tablet optimering */
@media (max-width: 992px) and (min-width: 769px) {
    .btn-group-sm > .btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* Forbedret styling på små enheder */
@media (max-width: 576px) {
    .card-body {
        padding: 0.5rem;
    }
    
    h1.mt-4 {
        font-size: 1.5rem;
        margin-top: 1rem !important;
    }
}

/* ===================================
   Push Notification Dropdown Styling
   =================================== */

/* Notifikations ikon i navbar - tydelig farve */
#notificationStatusIcon {
    transition: color 0.2s ease-in-out;
    font-size: 1.1rem;
}

/* Dropdown item tekst styling */
#notificationStatusItem .dropdown-item-text {
    display: flex;
    align-items: center;
}

/* Blokeret notifikation info tekst */
#blockedNotificationItem .dropdown-item-text {
    font-size: 0.875rem;
    line-height: 1.4;
}