/**
 * IdeaDunes Accessibility Mode Styles
 * Opt-in styles activated via html.accessibility-mode and html.high-contrast-mode.
 * Safe global rules are limited to focus visibility and reduced-motion support.
 */

/* Safe global focus treatment */
:focus-visible {
    outline: 0.1875rem solid #1e73be;
    outline-offset: 0.125rem;
}

/* Enhanced keyboard navigation support */
/* Skip to main content link */
.skip-to-main {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 10000;
    padding: 0.75rem 1rem;
    background: #1e73be;
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: top 0.2s;
}

.skip-to-main:focus {
    top: 0;
}

/* Keyboard focus indicators for all interactive elements */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 0.1875rem solid #1e73be;
    outline-offset: 0.125rem;
    box-shadow: 0 0 0 0.25rem rgba(30, 115, 190, 0.2);
}

/* Remove default outline for mouse users, keep for keyboard */
:focus:not(:focus-visible) {
    outline: none;
}

/* Keyboard navigation for dropdowns */
.dropdown-menu:focus-within {
    display: block;
}

/* Keyboard navigation for modals */
.modal[tabindex="-1"] {
    outline: none;
}

/* Keyboard navigation for tabs */
.nav-tabs [role="tab"]:focus {
    outline: 2px solid #1e73be;
    outline-offset: -0.125rem;
}

/* Keyboard navigation for data tables */
table:focus {
    outline: 2px solid #1e73be;
}

td:focus,
th:focus {
    outline: 2px solid #1e73be;
    background-color: #f0f7ff;
}

/* Keyboard navigation for cards with actions */
.card:focus-within {
    outline: 2px solid #1e73be;
    outline-offset: 2px;
}

/* Ensure keyboard-only users can see focus on hidden elements */
[aria-hidden="true"]:focus {
    display: block;
    position: absolute;
    left: -9999px;
}

/* Keyboard navigation for custom widgets */
[role="button"]:focus,
[role="checkbox"]:focus,
[role="switch"]:focus,
[role="slider"]:focus {
    outline: 2px solid #1e73be;
    outline-offset: 2px;
}

/* Respect reduced-motion preferences globally */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Utility for assistive-only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Accessibility mode: readable defaults and stronger affordances */
html.accessibility-mode {
    --a11y-font-scale: 1.12;
    --a11y-line-height: 1.6;
    --a11y-text: #111111;
    --a11y-bg: #ffffff;
    --a11y-link: #004ea8;
    --a11y-link-visited: #5a2a86;
    --a11y-border: #5f5f5f;
}

html.accessibility-mode body {
    color: var(--a11y-text);
    background-color: var(--a11y-bg);
    font-size: calc(16px * var(--a11y-font-scale));
    line-height: var(--a11y-line-height);
}

html.accessibility-mode p,
html.accessibility-mode li,
html.accessibility-mode label,
html.accessibility-mode small,
html.accessibility-mode .text-muted {
    line-height: var(--a11y-line-height);
}

html.accessibility-mode a {
    color: var(--a11y-link);
    text-decoration: underline;
    text-underline-offset: 0.125rem;
}

html.accessibility-mode a:visited {
    color: var(--a11y-link-visited);
}

html.accessibility-mode a:hover,
html.accessibility-mode a:focus {
    color: #003d83;
}

html.accessibility-mode button,
html.accessibility-mode [role="button"],
html.accessibility-mode input,
html.accessibility-mode select,
html.accessibility-mode textarea {
    min-height: 44px;
    border: 1px solid var(--a11y-border);
}

html.accessibility-mode .form-control,
html.accessibility-mode .btn,
html.accessibility-mode .dropdown-item {
    font-size: 1rem;
}

html.accessibility-mode input:focus,
html.accessibility-mode select:focus,
html.accessibility-mode textarea:focus,
html.accessibility-mode button:focus-visible,
html.accessibility-mode .btn:focus-visible,
html.accessibility-mode a:focus-visible {
    outline: 3px solid #1e73be;
    outline-offset: 2px;
}

html.accessibility-mode table {
    border-collapse: collapse;
}

html.accessibility-mode table th,
html.accessibility-mode table td {
    border: 1px solid var(--a11y-border);
    padding: 10px 12px;
}

html.accessibility-mode table th {
    background-color: #f1f1f1;
    color: #111111;
}

html.accessibility-mode .skip-link {
    position: absolute;
    left: 0;
    top: -48px;
    z-index: 10000;
    padding: 10px 14px;
    background: #111111;
    color: #ffffff;
    text-decoration: none;
}

html.accessibility-mode .skip-link:focus {
    top: 0;
}

/* High contrast mode can be toggled manually or picked up by media query */

html.high-contrast-mode body {
    background: #ffffff;
    color: #000000;
}

html.high-contrast-mode a {
    color: #0033aa;
}

html.high-contrast-mode .btn,
html.high-contrast-mode button,
html.high-contrast-mode input,
html.high-contrast-mode select,
html.high-contrast-mode textarea,
html.high-contrast-mode .form-control,
html.high-contrast-mode .card,
html.high-contrast-mode .panel,
html.high-contrast-mode .modal-content,
html.high-contrast-mode .dropdown-menu {
    border: 0.125rem solid #000000 !important;
    box-shadow: none !important;
}

html.high-contrast-mode .btn-primary {
    background: #000000 !important;
    color: #ffffff !important;
}

@media (prefers-contrast: more) {
    body {
        background: #ffffff;
        color: #000000;
    }

    a,
    button,
    input,
    select,
    textarea,
    .btn,
    .form-control {
        border-color: #000000 !important;
    }
}

/* ─── Font Scaling & Layout Reflow (WCAG 2.1 SC 1.4.4 & 1.4.10) ──────────── */

/* Fluid base: 1rem = browser default (usually 16px), scales with OS text size */
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Prevent overflow / horizontal scroll at any zoom level */
body {
    overflow-x: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Dashboard layout reflow at 320px width (WCAG SC 1.4.10) */
@media (max-width: 400px) {
    .container,
    .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .col, [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .card,
    .panel,
    .widget-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dataTables_wrapper {
        overflow-x: auto;
    }
}

/* Avoid fixed pixel widths on text containers */
.page-content,
.main-content,
#page-body,
.content-area {
    max-width: 100%;
    overflow-x: hidden;
}

/* Prevent text clipping in fixed-width stat boxes / metric cards */
.stat-value,
.metric-number,
.kpi-number,
.counter-value,
.badge,
.label {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Tables: allow column wrap at high zoom */
@media (min-resolution: 192dpi), (min-resolution: 2dppx) {
    table td,
    table th {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* Minimum 200% text-zoom support: ensure 1-column reflow */
@media (max-width: 640px) {
    .sidebar,
    .left-sidebar,
    #left-sidebar {
        position: static !important;
        width: 100% !important;
        float: none !important;
    }

    .main-panel,
    .content-wrapper,
    .page-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .navbar .navbar-brand span,
    .logo-text {
        font-size: 1rem !important;
    }
}

/* Ensure form labels and inputs reflow at high zoom */
.form-group,
.form-row {
    flex-wrap: wrap;
}

.form-group label,
.control-label {
    display: block;
    max-width: 100%;
}

/* Ensure modal dialogs don't overflow viewport at 200% */
.modal-dialog {
    max-width: min(560px, calc(100vw - 16px));
    margin: 8px auto;
}

@media (max-width: 576px) {
    .modal-dialog {
        margin: 8px;
        max-width: calc(100vw - 16px);
    }

    .modal-body {
        padding: 12px;
    }
}

/* Dashboard header stats: wrap gracefully */
.stats-row,
.dashboard-stats,
.metric-row {
    flex-wrap: wrap;
    gap: 8px;
}

.stats-row > *,
.dashboard-stats > *,
.metric-row > * {
    min-width: 140px;
    flex: 1 1 140px;
}