/* /employee-portal/public/css/style.css */

body {
    background-color: #f8f9fc;
    overflow-x: hidden;
}

#wrapper {
    display: flex;
}

#sidebar-wrapper {
    min-height: 100vh;
    width: 250px;
    background-color: #343a40; /* Corresponds to bg-dark */
    color: #fff;
    margin-left: -250px;
    -webkit-transition: margin .25s ease-out;
    transition: margin .25s ease-out;
    flex-shrink: 0; /* Prevent sidebar from shrinking */
}

#sidebar-wrapper .sidebar-heading {
    padding: 0.875rem 1.25rem;
    font-size: 1.2rem;
    font-weight: bold;
}

#sidebar-wrapper .list-group-item {
    background-color: #343a40;
    color: rgba(255, 255, 255, 0.7);
    border: none;
}

#sidebar-wrapper .list-group-item.active {
    color: #fff;
    background-color: #4e73df;
}

#sidebar-wrapper .list-group-item:hover:not(.active) {
    background-color: #495057;
    color: #fff;
}

/* Custom styles for the collapsible sidebar menu */
.list-group-item-collapse {
    padding-left: 20px; /* Indent sub-items */
    background-color: #495057; /* Darker background for sub-menu */
}
.list-group-item-collapse .list-group-item-action {
    padding-left: 30px; /* Further indent for sub-sub-items */
    background-color: #495057;
    color: rgba(255, 255, 255, 0.7);
}
.list-group-item-collapse .list-group-item-action:hover {
    background-color: #5a6268;
    color: #fff;
}
.list-group-item.active-parent {
    background-color: #4e73df; /* Active parent background */
    color: #fff;
}

#page-content-wrapper {
    flex-grow: 1; /* Allow content to fill available space */
    min-width: 0; /* Allow content to shrink on small screens */
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
}

@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: -250px;
    }
}

.topbar {
    height: 4.375rem;
}

.topbar .nav-item .nav-link {
    height: 4.375rem;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
}

.topbar .topbar-divider {
    width: 0;
    border-right: 1px solid #e3e6f0;
    height: calc(4.375rem - 2rem);
    margin: auto 1rem;
}

@keyframes growIn {
  0% {
    transform: scale(.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animated--grow-in {
  animation-name: growIn;
  animation-duration: .2s;
}

.card .card-header {
    background-color: #fff;
}

.border-left-primary {
    border-left: .25rem solid #4e73df!important;
}

.text-xs {
    font-size: .7rem;
}

.text-gray-300 {
    color: #dddfeb!important;
}

.text-gray-800 {
    color: #5a5c69!important;
}

.shadow {
    box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;
}

.text-gray-600 {
    color: #858796!important;
}

/* --- Color Utilities --- */
.border-left-success {
    border-left: .25rem solid #1cc88a!important;
}
.border-left-warning {
    border-left: .25rem solid #f6c23e!important;
}
.text-success {
    color: #1cc88a!important;
}
.text-warning {
    color: #f6c23e!important;
}

/* --- Responsive & User-Friendliness Improvements --- */

/* Prevent action buttons in tables from wrapping */
.actions-cell {
    white-space: nowrap;
}

/* Allow dashboard quick action buttons to wrap on smaller screens */
.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* PDF Viewer on document page */
.pdf-container {
    height: 110vh; /* Force scrolling to see content below */
    border: 1px solid #ddd;
    margin-bottom: 1rem;
}
.pdf-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.action-container {
    text-align: center;
}

/* --- Mobile Responsiveness for Tables and Buttons --- */
@media (max-width: 767.98px) {
    /* Adjust button size in action cells for small screens */
    .actions-cell .btn {
        padding: .25rem .5rem; /* Smaller padding */
        font-size: .75rem;     /* Smaller font size */
        margin-bottom: .25rem; /* Add some vertical spacing if they wrap */
    }
    /* Allow buttons to wrap within the actions-cell */
    .actions-cell {
        white-space: normal; /* Override nowrap for small screens */
        display: flex;       /* Use flexbox to manage wrapping */
        flex-wrap: wrap;     /* Allow items to wrap */
        justify-content: center; /* Center buttons if they wrap */
        gap: .25rem;         /* Space between wrapped buttons */
    }
    /* Ensure table cells don't have excessive min-width */
    .table-responsive table td,
    .table-responsive table th {
        min-width: unset !important; /* Remove any fixed min-width that might be inherited */
    }

    /* Adjust login card padding on small screens */
    .login-card .card-body {
        padding: 1.5rem !important; /* Reduce padding for smaller screens */
    }
}