:root{
    --wcag-font-scale: 1; /* 1.00..1.50 */
}

/* Floating button */
.wcag-fab{
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2147483000;
    border: 0;
    border-radius: 999px;
    padding: 12px 14px;
    font: 600 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: #111827;
    color: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
    cursor: pointer;
}
.wcag-fab:focus-visible{ outline: 3px solid #F59E0B; outline-offset: 3px; }

/* Panel */
.wcag-panel{
    position: fixed;
    right: 16px;
    bottom: 64px;
    width: min(320px, calc(100vw - 32px));
    z-index: 2147483000;
    background: #fff;
    color: #111827;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 14px;
    box-shadow: 0 14px 35px rgba(0,0,0,.25);
}
.wcag-panel__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    padding: 12px 12px 8px;
}
.wcag-panel__title{
    margin:0;
    font: 700 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.wcag-close{
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #F3F4F6;
    color:#111827;
    font: 700 20px/1 system-ui, sans-serif;
    cursor:pointer;
}
.wcag-close:focus-visible{ outline: 3px solid #2563EB; outline-offset: 2px; }

.wcag-panel__body{ padding: 8px 12px 12px; }
.wcag-row{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 8px 0; }
.wcag-row--end{ justify-content:flex-end; }
.wcag-label{ font: 600 13px/1.2 system-ui, sans-serif; }

.wcag-actions{ display:flex; gap: 8px; }
.wcag-btn{
    border: 1px solid rgba(0,0,0,.15);
    background: #fff;
    color:#111827;
    border-radius: 10px;
    padding: 8px 10px;
    cursor:pointer;
    font: 600 13px/1 system-ui, sans-serif;
}
.wcag-btn:focus-visible{ outline: 3px solid #2563EB; outline-offset: 2px; }
.wcag-btn--danger{ background:#FEF2F2; border-color:#FCA5A5; }

.wcag-toggle{ display:flex; gap: 10px; align-items:center; font: 600 13px/1.2 system-ui, sans-serif; }
.wcag-toggle input{ width: 18px; height: 18px; }

.wcag-hint{
    margin: 8px 0 0;
    font: 500 12px/1.3 system-ui, sans-serif;
    color: #374151;
}
.wcag-hint kbd{
    font: 700 11px/1 system-ui, sans-serif;
    border: 1px solid rgba(0,0,0,.2);
    border-bottom-width: 2px;
    background: #F9FAFB;
    color: #111827;
    padding: 2px 6px;
    border-radius: 6px;
}

/* === Effects applied to the whole page === */

/* WCAG: font scale (AdminLTE v2 / Bootstrap 3 friendly)
   AdminLTE uses lots of px sizes, so scaling html font-size often won't help.
   We scale body (and typical controls) instead, with !important. */
html.wcag-font body{
    font-size: calc(14px * var(--wcag-font-scale)) !important;
}

/* Common AdminLTE/BS3 elements that hardcode font-size in px */
html.wcag-font .content-wrapper,
html.wcag-font .main-header,
html.wcag-font .main-sidebar,
html.wcag-font .sidebar,
html.wcag-font .sidebar-menu,
html.wcag-font .treeview-menu,
html.wcag-font .content,
html.wcag-font .box,
html.wcag-font .box-header,
html.wcag-font .box-body,
html.wcag-font .box-footer,
html.wcag-font .navbar,
html.wcag-font .dropdown-menu,
html.wcag-font .form-control,
html.wcag-font .input-group,
html.wcag-font .btn,
html.wcag-font .label,
html.wcag-font .badge,
html.wcag-font .small-box,
html.wcag-font .info-box,
html.wcag-font .callout,
html.wcag-font .alert,
html.wcag-font .timeline,
html.wcag-font .pagination,
html.wcag-font .breadcrumb,
html.wcag-font table,
html.wcag-font th,
html.wcag-font td{
    font-size: inherit !important;
}

/* high contrast (page) */
html.wcag-contrast, html.wcag-contrast body{
    background: #000 !important;
    color: #fff !important;
}

/* Global rule for page content (we'll undo for widget below) */
html.wcag-contrast *{
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

html.wcag-contrast a{ color: #FFD700 !important; }
html.wcag-contrast button,
html.wcag-contrast input,
html.wcag-contrast select,
html.wcag-contrast textarea{
    background: #000 !important;
    color:#fff !important;
}

/* grayscale */
html.wcag-grayscale{
    filter: grayscale(1);
}

/* underline links */
html.wcag-underline a{
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

/* stronger focus */
html.wcag-focus :focus-visible{
    outline: 4px solid #F59E0B !important;
    outline-offset: 3px !important;
}

/* spacing */
html.wcag-spacing body{
    letter-spacing: 0.04em;
    word-spacing: 0.12em;
    line-height: 1.6;
}
html.wcag-spacing p{ margin-bottom: 1.1em; }

/* --- FIX: keep widget readable under contrast/grayscale/global overrides --- */

/* Do not filter widget in grayscale mode */
html.wcag-grayscale .wcag-panel,
html.wcag-grayscale .wcag-fab{
    filter: none !important;
}

/* In high-contrast mode, undo the global "*" overrides for the widget */
html.wcag-contrast .wcag-panel,
html.wcag-contrast .wcag-panel *,
html.wcag-contrast .wcag-fab{
    background-color: revert !important;
    color: revert !important;
    border-color: revert !important;
}

/* Fallback if some browser ignores revert */
html.wcag-contrast .wcag-panel{
    background: #fff !important;
    color: #111827 !important;
}
html.wcag-contrast .wcag-hint{ color: #374151 !important; }
html.wcag-contrast .wcag-hint kbd{
    background: #F9FAFB !important;
    color: #111827 !important;
    border-color: rgba(0,0,0,.2) !important;
}