/* public/backend/css/styles.css */

.dl-bordered {
    display: grid;
    grid-template-columns: auto 1fr; /* dt width is based on content, dd takes the rest */
    border: 1px solid #e3e6f0;
    border-radius: .35rem;
    overflow: hidden; /* Ensures border-radius is respected by children */
}

.dl-bordered > dt,
.dl-bordered > dd {
    padding: .75rem;
    margin-bottom: 0; /* Override Bootstrap's default dl > dd margin */
    border-bottom: 1px solid #e3e6f0;
}

.dl-bordered > dt {
    font-weight: 700;
    border-right: 1px solid #e3e6f0;
    background-color: #f8f9fc;
}

/* Remove bottom border from the last row */
.dl-bordered > dt:last-of-type,
.dl-bordered > dd:last-of-type {
    border-bottom: none;
}

/* Dark mode styles for dl-bordered */
html.dark-mode .dl-bordered {
    border-color: #454d55;
}

html.dark-mode .dl-bordered > dt {
    background-color: #343a40;
    border-right-color: #454d55;
}

html.dark-mode .dl-bordered > dt,
html.dark-mode .dl-bordered > dd {
    border-bottom-color: #454d55;
}

/* Default dd — allow wrapping and multiple lines */
.dl-bordered > dd {
    overflow-x: auto;
    white-space: normal; /* normal wrapping */
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Only force no-wrap horizontal scroll for certain types of content */
.dl-bordered > dd.scrollable {
    white-space: nowrap;
}

.dl-bordered > dd.scrollable > * {
    display: inline-block; /* keeps content side-by-side for horizontal scroll */
}

/* dt wrap fix */
.dl-bordered > dt {
    white-space: normal;
    word-break: break-word;
}

/* Mobile: stack dt and dd */
@media (max-width: 576px) {
    .dl-bordered {
        grid-template-columns: 1fr;
    }
    .dl-bordered > dt,
    .dl-bordered > dd {
        border-right: none;
    }
}

.bg-gradient-primary {
    background-color: #4e73df;
    background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
    background-size: cover;
}

.input-box {
    display: flex;
    align-items: center;
    border: 1px solid #424242;
    border-radius: 6px;
    padding-left: 10px;
}
.input-box input, .input-box select {
    border: none;
    outline: none;
    padding-left: 1px;
    flex-grow: 1;
    border-radius: inherit;
    background-color: inherit;
}
.input-box input:focus, .input-box select:focus {
    outline: none;
}
.input-box:focus-within {
    border-color: #4f7df3;
}

/*
 * Custom large toggle switch
 */
.custom-switch.custom-switch-lg {
    padding-left: 3.5rem;
}

.custom-switch.custom-switch-lg .custom-control-label::before {
    left: -3.5rem;
    width: 3rem;
    height: 1.5rem;
    border-radius: 1.5rem;
}

.custom-switch.custom-switch-lg .custom-control-label::after {
    top: calc(0.25rem + 2px);
    left: calc(-3.5rem + 2px);
    width: calc(1.5rem - 4px);
    height: calc(1.5rem - 4px);
    border-radius: 1.5rem;
}

.custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(1.5rem);
}

html:not(.dark-mode) .sidebar.bg-deep-blue {
    background-color: #373e7d !important;
}

html.dark-mode .sidebar.bg-deep-blue {
    background-color: #222e3c !important;
}