/* Bootstrap 5.3 Enhancements for DokuWiki Template */

/* ========== TABLES ========== */

.table-responsive {
    border-radius: 0.375rem;
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); */
    margin-bottom: 1.5rem;
}

.table {
    margin-bottom: 0;
    border-collapse: collapse;
}

/* .table thead.table-light {
    background-color: #f8f9fa;
} */

/* .table tbody tr.table-group-divider {
    border-top: 2px solid rgba(0, 0, 0, 0.125);
} */

/* Responsive table stacking for mobile */
@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .table thead {
        display: none;
    }
    
    .table tbody,
    .table tr,
    .table td {
        display: block;
        width: 100%;
    }
    
    .table tr {
        margin-bottom: 1rem;
        /* border: 1px solid #dee2e6; */
        /* border-radius: 0.375rem; */
        overflow: hidden;
    }
    
    .table td {
        padding: 0.75rem;
        padding-left: 50%;
        position: relative;
        border: none;
        border-bottom: 1px solid #dee2e6;
    }
    
    .table td:last-child {
        border-bottom: none;
    }
    
    /* Show data attribute labels on mobile */
    .table td:before {
        content: attr(data-label);
        position: absolute;
        left: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.75rem;
        /* color: #6c757d; */
    }
}

/* ========== FORM CONTROLS ========== */

/* .form-control,
.form-select,
.form-range {
    border-color: #dee2e6;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
} */

/* .form-control:focus,
.form-select:focus,
.form-range:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
} */

/* Form groups spacing */
/* .mb-3 {
    margin-bottom: 1rem;
} */

/* label {
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #212529;
} */

/* Checkbox and radio enhancements */
/* .form-check {
    padding-left: 0;
    margin-bottom: 0.75rem;
} */

/* .form-check-input {
    margin-top: 0.3125rem;
    margin-right: 0.5rem;
    cursor: pointer;
} */

/* .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
} */

/* .form-check-label {
    cursor: pointer;
    margin-bottom: 0;
    user-select: none;
} */

/* Input group styling */
/* .input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
} */

/* .input-group > .form-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
} */

/* ========== BUTTONS ========== */

/* .btn {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.375rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 
                border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
} */


/* ========== ADMIN SCREENS ========== */

#dokuwiki__admin {
    padding: 2rem 0;
}

/* #dokuwiki__admin .table {
    background-color: #fff;
} */

#dokuwiki__admin form {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
}

#dokuwiki__admin fieldset {
    /* border: 1px solid #dee2e6;
    border-radius: 0.375rem; */
    padding: 1rem;
    margin-bottom: 1.5rem;
}

#dokuwiki__admin legend {
    padding: 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

/* ========== ACCESSIBILITY ========== */

/* Enhanced focus states for keyboard navigation */
.form-control:focus,
.form-select:focus,
.btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .form-control,
    .form-select,
    .btn {
        transition: none;
    }
    
    .btn:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
    .table {
        border: 2px solid currentColor;
    }
    
    .table th,
    .table td {
        border: 1px solid currentColor;
    }
    
    .form-control,
    .form-select {
        border-width: 2px;
    }
    
    .btn {
        border-width: 2px;
    }
}

/* ========== WIKI-SPECIFIC OVERRIDES ========== */

/* Ensure code blocks aren't styled as form controls */
pre code,
pre.code {
    all: revert;
    display: block;
    overflow-x: auto;
    padding: 1rem;
    /* background-color: #f8f9fa;
    border: 1px solid #dee2e6; */
    border-radius: 0.375rem;
}

/* Preserve syntax highlighting in code blocks */
.php, .javascript, .html, .css {
    all: revert;
}

/* ========== FIXES ========== */

#config__manager tr.default td.value .form-check .form-check-label {
    max-width: 32rem;
}

.compound-label {
    display: flex;
}

.ui-admin ul {
    list-style-type: none;
    padding-left: 0.5rem;
    color: var(--bs-body-color);
    fill: var(--bs-body-color);
}
.ui-admin .admin_tasks div.li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ui-admin .admin_tasks div.li .icon svg {
    width: 100%;
    max-width: 1.5rem;
}

#admin__version {
    font-size: smaller;
    opacity: 0.7;
}

fieldset > div.table {
    border: none;
}

#dw__configform > p:last-child {
    display: flex;
    gap: 0.5rem;
}

/* ===== LOGIN ===== */

#dw__login fieldset [for="remember__me"] {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
#dw__login > p {
    margin-top: 0.5rem;
}

#dw__login > fieldset.plugin_oauth > div > a {
    display: flex;
    align-items: flex-end;
    background-color: unset !important;
}
#dw__login > fieldset.plugin_oauth > div > a > svg {
    max-width: 2rem;
}
#dw__login > fieldset.plugin_oauth > div > a > span {
    font-weight: 600;
    font-size: 1.25rem;
}

/* ===== NAVBAR ===== */

.offcanvas-body {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;

    padding: 0;
    margin: 0;
}
.header-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}
.header-menu .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;

    color: var(--bs-header-body-color);
    fill: var(--bs-header-body-color);
}
.header-menu .nav-link i,
.header-menu .nav-link svg {
    color: var(--bs-header-body-color);
    fill: var(--bs-header-body-color);
}

.site-header .navbar .container-fluid > a,
.site-header .navbar .container-fluid > a span {
    color: var(--bs-header-body-color);
    fill: var(--bs-header-body-color);

    font-size: 1.5rem;
    font-weight: 600;
}

/* ===== SEARCH ===== */

#dw__search__header > div.no,
#dw__search__footer > div.no {
    display: flex;
    gap: 0.5rem;
}

/* ===== FOOTER ===== */

#dokuwiki__footer .pad {
    display: flex;
    flex-direction: column;
    align-items: center;

    font-size: smaller;
    opacity: 0.7;
}

.site-footer .footer-card .card-body .container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.site-footer .footer-card .card-body .container .footer-fullmenu {
    display: flex;
    justify-content: center;
    color: var(--bs-body-color);
    fill: var(--bs-body-color);
}
.site-footer .footer-card .card-body .container .footer-fullmenu a,
.site-footer .footer-card .card-body .container .footer-fullmenu i,
.site-footer .footer-card .card-body .container .footer-fullmenu svg {
    color: var(--bs-body-color);
    fill: var(--bs-body-color);
}
.site-footer .footer-card .card-body .container .footer-fullmenu .footer-fullmenu-wrapper {
    display: flex;
    gap: 1rem;
}

/* ===== ACL ===== */

#acl__tree > ul {
    list-style-type: none;
    padding-left: 0.5rem;
}
#acl__tree > ul ul {
    list-style-type: none;
    padding-left: 1.5rem;
}
#acl__tree > ul div.li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
#acl__tree > ul img {
    width: 100%;
    height: 100%;
    min-width: 1.25rem;
    min-height: 1.25rem;
    max-width: 1.25rem;
    max-height: 1.25rem;

    border-radius: 0.375rem;
    border: 1px solid var(--bs-body-color);

    filter: contrast(300%) grayscale(100%);
}

#acl__user {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    text-wrap: nowrap;
}
@media (min-width: 690px) {
    #acl__user {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }
}

#acl_manager .footnotes > div.fn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
#acl_manager .footnotes > div.fn > sup {
    padding-top: 0.6rem;
}

/* ===== EXTENSIONS ===== */

#extension__list > form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#extension__list > form > section {
    display: flex;
    flex-wrap: wrap;

    padding-bottom: 1rem;

    border-bottom: 1px solid var(--bs-border-color);
}
#extension__list > form > section > .screenshot {
    width: 8.5rem;
}
#extension__list > form > section > .main {
    width: calc(100% - 8.5rem);
}
#extension__list > form > section > .notices {
    width: 100%;
}
#extension__list > form > section > .details {
    width: 100%;
}
#extension__list > form > section > .actions {
    display: flex;
    gap: 0.5rem;
    
    width: 100%;
}