/* ============================================================
   Weblingo Task Manager - Site Styles
   ============================================================ */

/* --- Base Typography --- */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    overflow-x: hidden;
}

/* --- Focus Styles (Accessibility) --- */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* ============================================================
   Full-width layout for >= 1024px
   Ensures all content renders without horizontal scrolling,
   clipping, or overlapping elements.
   ============================================================ */
@media (min-width: 1024px) {
    .container-fluid {
        max-width: 100%;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* DataGrid containers use full available width */
    .dx-datagrid {
        width: 100%;
    }

    /* Form layouts use grid for side-by-side fields */
    .form-row-responsive {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .form-row-responsive-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

/* ============================================================
   Responsive layout for < 1024px
   Ensures no horizontal scrolling, content clipping, or
   overlapping elements at 768px and 375px viewports.
   All interactive controls remain operable.
   ============================================================ */
@media (max-width: 1023.98px) {
    /* Prevent page-level horizontal scroll */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Main content padding adjustment for smaller screens */
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* DataGrid: allow horizontal scrolling within container
       without causing page-level horizontal scroll */
    .dx-datagrid-container,
    .datagrid-wrapper,
    [class*="dx-datagrid"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .dx-datagrid {
        min-width: 600px;
    }

    /* Stack form fields vertically on small screens */
    .form-row-responsive,
    .form-row-responsive-3 {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Ensure form groups stack properly */
    .row > [class*="col-md"],
    .row > [class*="col-lg"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Buttons: ensure minimum tap-target size (44x44px per WCAG) */
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 1rem;
    }

    /* Interactive controls maintain operability */
    .form-control,
    .form-select,
    .dx-texteditor-input {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* DevExtreme DateBox and Slider responsive sizing */
    .dx-datebox,
    .dx-slider {
        width: 100% !important;
        max-width: 100%;
    }

    /* HtmlEditor responsive width */
    .dx-htmleditor {
        width: 100% !important;
        max-width: 100%;
    }

    /* Tables: prevent overflow */
    .table-responsive,
    table {
        max-width: 100%;
    }

    table:not(.dx-datagrid table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Card layouts stack on smaller screens */
    .card {
        margin-bottom: 1rem;
    }
}

/* ============================================================
   Additional responsive styles for very small screens (375px)
   ============================================================ */
@media (max-width: 575.98px) {
    /* Further reduce padding on very small screens */
    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Navbar brand logo sizing */
    .navbar-logo {
        max-height: 28px;
    }

    /* Full-width buttons on mobile */
    .btn-group-responsive {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn-group-responsive .btn {
        width: 100%;
    }

    /* Footer text adjustment */
    .footer {
        font-size: 0.85rem;
        padding: 0.75rem 0;
    }
}

/* ============================================================
   Utility classes for responsive DataGrid containers
   ============================================================ */
.datagrid-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Ensure DevExtreme controls don't cause overflow */
.dx-widget {
    max-width: 100%;
    box-sizing: border-box;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}

/* ============================================================
   Navbar (Weblingo brand)
   The navbar carries the Bootstrap `navbar-dark` class, so its
   text and toggler icon are styled for a dark background. Set the
   brand background colour so links and the hamburger are visible.
   ============================================================ */
.weblingo-navbar {
    background-color: #144FB7;
}

/* Subtle hover/active feedback that stays legible on the blue */
.weblingo-navbar .nav-link:hover,
.weblingo-navbar .nav-link:focus {
    color: #ffffff;
    opacity: 0.85;
}