/* employeeResponsive.css */

/* ======================== */
/* Phones: max-width 600px */
/* ======================== */
@media screen and (max-width: 600px) {

    h2,
    h4 {
        font-size: 1.2rem;
    }

    .btn,
    .modal-title {
        font-size: 0.9rem;
    }

    .floating-navbar .navbar-brand strong {
        font-size: 0.9rem;
    }

    .floating-navbar .icon-button,
    .floating-navbar .nav-link {
        font-size: 0;
    }

    .floating-navbar .icon-button i,
    .floating-navbar .nav-link i {
        font-size: 1.2rem;
    }

    .floating-navbar .d-flex.gap-4 {
        gap: 0.5rem !important;
    }

    /* Make modal body scroll well */
    .modal-body {
        max-height: 55vh !important;
        overflow-y: auto;
    }

    /* Shrink form fields */
    .modal-body .form-label {
        font-size: 0.8rem;
    }

    .modal-body .form-control {
        font-size: 0.8rem;
        padding: 6px 8px;
    }

    /* Table adjustments */
    table th,
    table td {
        font-size: 0.7rem !important;
        padding: 4px 6px !important;
    }

    /* Hide less important table columns (starting from column 5) */
    table thead th:nth-child(n+5),
    table tbody td:nth-child(n+5) {
        display: none;
    }

    .profile-dropdown {
        width: 90vw !important;
    }

    .profile-avatar span {
        font-size: 1.2rem;
    }
}


/* ============================ */
/* Tablets: 601px to 1024px     */
/* ============================ */
@media screen and (min-width: 601px) and (max-width: 1024px) {
/* Style for the 3-dot menu */
.dropdown-toggle::after {
    display: none !important;
}

.bi-three-dots-vertical {
    font-size: 1.25rem;
    color: #6c757d;
}

.dropdown-menu {
    min-width: 120px;
}

.dropdown-item {
    padding: 0.25rem 1rem;
    cursor: pointer;
}

.dropdown-item i {
    width: 1.25em;
    text-align: center;
}
    h2,
    h4 {
        font-size: 1.4rem;
    }

    .btn,
    .modal-title {
        font-size: 1rem;
    }

    .floating-navbar .navbar-brand strong {
        font-size: 1rem;
    }

    .floating-navbar .d-flex.gap-4 {
        gap: 1rem !important;
    }

    .modal-body {
        max-height: 65vh !important;
    }

    .modal-body .form-label,
    .modal-body .form-control {
        font-size: 0.9rem;
    }

    table th,
    table td {
        font-size: 0.8rem !important;
        padding: 6px 8px !important;
    }

    /* Hide some columns for clarity (after 7th column) */
    table thead th:nth-child(n+8),
    table tbody td:nth-child(n+8) {
        display: none;
    }
.editing-row {
  background-color: #eef9ff;
  transition: transform 0.2s ease-in-out;
  transform: scale(1.02);
}

}