/* ==========================================================================
   WORKANT BUSINESS UI — PREMIUM OVERRIDE
   Load this file AFTER all existing WORKANT module CSS files.
   Goal: enterprise / industrial SaaS visual language without breaking markup.
   ========================================================================== */

:root {
    --wb-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    --wb-bg: #f3f6fb;
    --wb-bg-soft: #f8fafc;
    --wb-surface: rgba(255,255,255,.94);
    --wb-surface-solid: #ffffff;
    --wb-surface-muted: #f8fafc;

    --wb-ink: #0b1220;
    --wb-text: #1e293b;
    --wb-muted: #64748b;
    --wb-faint: #94a3b8;

    --wb-primary: #1d4ed8;
    --wb-primary-2: #2563eb;
    --wb-primary-3: #38bdf8;
    --wb-cyan: #06b6d4;
    --wb-success: #16a34a;
    --wb-warning: #d97706;
    --wb-danger: #dc2626;

    --wb-line: #e4eaf2;
    --wb-line-strong: #d5deea;

    --wb-radius-sm: 12px;
    --wb-radius: 16px;
    --wb-radius-lg: 22px;
    --wb-radius-xl: 28px;
    --wb-radius-hero: 34px;

    --wb-shadow-xs: 0 1px 2px rgba(15,23,42,.03), 0 2px 8px rgba(15,23,42,.035);
    --wb-shadow-sm: 0 8px 22px rgba(15,23,42,.055);
    --wb-shadow: 0 16px 40px rgba(15,23,42,.075);
    --wb-shadow-lg: 0 28px 70px rgba(15,23,42,.13);
    --wb-shadow-blue: 0 18px 40px rgba(37,99,235,.22);

    --wb-ease: cubic-bezier(.2,.72,.22,1);
    --wb-fast: 160ms var(--wb-ease);
    --wb-med: 240ms var(--wb-ease);
}

body.theme-dark {
    --wb-bg: #07111f;
    --wb-bg-soft: #0b1728;
    --wb-surface: rgba(14,25,42,.92);
    --wb-surface-solid: #0f1b2d;
    --wb-surface-muted: #111f33;
    --wb-ink: #f8fafc;
    --wb-text: #dce6f4;
    --wb-muted: #94a3b8;
    --wb-faint: #64748b;
    --wb-line: rgba(148,163,184,.16);
    --wb-line-strong: rgba(148,163,184,.23);
    --wb-shadow-xs: 0 1px 2px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.18);
    --wb-shadow-sm: 0 10px 28px rgba(0,0,0,.22);
    --wb-shadow: 0 18px 46px rgba(0,0,0,.28);
    --wb-shadow-lg: 0 34px 90px rgba(0,0,0,.36);
}

/* --------------------------------------------------------------------------
   GLOBAL
   -------------------------------------------------------------------------- */

html {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--wb-font);
    color: var(--wb-text);
    background:
        radial-gradient(circle at 85% -10%, rgba(37,99,235,.09), transparent 30%),
        radial-gradient(circle at 10% 0%, rgba(6,182,212,.055), transparent 28%),
        var(--wb-bg);
}

body.theme-dark {
    background:
        radial-gradient(circle at 84% -8%, rgba(37,99,235,.20), transparent 30%),
        radial-gradient(circle at 8% 4%, rgba(6,182,212,.12), transparent 26%),
        var(--wb-bg);
}

a, button, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

button, .btn, a[class*="btn"], [class*="-btn"] {
    transition:
        transform var(--wb-fast),
        box-shadow var(--wb-fast),
        border-color var(--wb-fast),
        background-color var(--wb-fast),
        color var(--wb-fast),
        filter var(--wb-fast);
}

::selection {
    background: rgba(37,99,235,.18);
    color: inherit;
}

/* neutralize several legacy global overrides from site.css inside modern pages */
.wa-app label,
.armada-page label,
.wa-calendar-page label,
.wa-knowledge-page label,
.exam-page label,
.perco-page label,
.staff-page label,
.roles-page label {
    color: var(--wb-text) !important;
}

.wa-app input[type="text"],
.wa-app input[type="number"],
.armada-page input[type="text"],
.armada-page input[type="number"],
.wa-calendar-page input[type="text"],
.wa-calendar-page input[type="number"],
.wa-knowledge-page input[type="text"],
.exam-page input[type="text"],
.perco-page input[type="text"] {
    border-color: var(--wb-line-strong) !important;
}

/* --------------------------------------------------------------------------
   WORKANT SHELL / NAVIGATION
   -------------------------------------------------------------------------- */

.wa-shell-app {
    background: transparent;
}

.wa-sidebar {
    border-right: 1px solid var(--wb-line) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
    box-shadow: 12px 0 44px rgba(15,23,42,.035);
}

body.theme-dark .wa-sidebar {
    background:
        linear-gradient(180deg, rgba(10,21,37,.97), rgba(7,17,31,.96)) !important;
}

.wa-side-brand {
    margin: 4px 6px 14px !important;
    padding: 12px !important;
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(37,99,235,.08), rgba(6,182,212,.035));
    border: 1px solid rgba(37,99,235,.10);
}

.wa-side-logo {
    position: relative;
    width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
    background:
        radial-gradient(circle at 32% 28%, #67e8f9 0 8%, transparent 9%),
        radial-gradient(circle at 68% 72%, #60a5fa 0 9%, transparent 10%),
        linear-gradient(145deg, #1e40af, #2563eb 48%, #0891b2) !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    box-shadow:
        0 10px 24px rgba(37,99,235,.22),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.wa-side-name {
    font-size: 15px;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
    color: var(--wb-ink) !important;
}

.wa-side-sub {
    color: var(--wb-muted) !important;
}

.wa-nav-group-title {
    margin-top: 8px;
    padding-inline: 12px !important;
    color: var(--wb-faint) !important;
    font-size: 10px !important;
    font-weight: 900;
    letter-spacing: .16em !important;
}

.wa-nav-item {
    position: relative;
    min-height: 46px;
    margin: 3px 0;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    color: #475569 !important;
    font-weight: 720;
    border: 1px solid transparent !important;
}

body.theme-dark .wa-nav-item {
    color: #cbd5e1 !important;
}

.wa-nav-item:hover {
    transform: translateX(3px) !important;
    background: rgba(37,99,235,.055) !important;
    border-color: rgba(37,99,235,.10) !important;
}

.wa-nav-item.is-active {
    color: #1d4ed8 !important;
    background:
        linear-gradient(90deg, rgba(37,99,235,.13), rgba(37,99,235,.04)) !important;
    border-color: rgba(37,99,235,.16) !important;
    box-shadow: inset 3px 0 0 #2563eb;
}

body.theme-dark .wa-nav-item.is-active {
    color: #93c5fd !important;
    background:
        linear-gradient(90deg, rgba(37,99,235,.25), rgba(37,99,235,.07)) !important;
}

.wa-nav-dot {
    width: 7px !important;
    height: 7px !important;
    background: linear-gradient(135deg, #2563eb, #22d3ee) !important;
    box-shadow: 0 0 0 4px rgba(37,99,235,.08) !important;
}

.wa-topbar {
    min-height: 68px;
    height: auto !important;
    padding-inline: 22px !important;
    background: rgba(255,255,255,.86) !important;
    border-bottom: 1px solid var(--wb-line) !important;
    box-shadow: 0 7px 28px rgba(15,23,42,.035);
    backdrop-filter: blur(18px) saturate(145%) !important;
}

body.theme-dark .wa-topbar {
    background: rgba(9,19,34,.86) !important;
}

.wa-topbar-title {
    color: var(--wb-ink) !important;
    font-size: 15px;
    font-weight: 900 !important;
}

.wa-userchip {
    min-height: 42px;
    border-radius: 14px !important;
    border-color: var(--wb-line) !important;
    background: var(--wb-surface) !important;
    box-shadow: var(--wb-shadow-xs);
}

.wa-content {
    padding: 24px !important;
}

/* --------------------------------------------------------------------------
   UNIVERSAL BUSINESS SURFACES
   -------------------------------------------------------------------------- */

.wa-card,
.wa-tcard,
.wa-super-card,
.exam-panel,
.exam-fieldset,
.exam-kpi,
.wa-knowledge-card,
.wa-knowledge-sidebar,
.wa-knowledge-search form,
.wa-calendar-form-card,
.wa-calendar-view-card,
.staff-card,
.staff-toolbar,
.staff-table-wrap,
.role-card,
.perco-card,
.armada-card,
.armada-form-card,
.armada-table-wrap,
.armada-filter-panel {
    border: 1px solid var(--wb-line) !important;
    background: var(--wb-surface) !important;
    box-shadow: var(--wb-shadow-sm) !important;
    backdrop-filter: blur(14px) saturate(130%);
}

.wa-card:hover,
.wa-tcard:hover,
.wa-super-card:hover,
.wa-knowledge-card:hover,
.staff-card:hover,
.perco-card:hover {
    transform: translateY(-3px);
    border-color: rgba(37,99,235,.25) !important;
    box-shadow: var(--wb-shadow) !important;
}

.wa-card,
.exam-panel,
.exam-fieldset,
.armada-form-card,
.armada-table-wrap {
    border-radius: var(--wb-radius-lg) !important;
}

.wa-tcard,
.wa-super-card,
.wa-knowledge-card,
.staff-card,
.perco-card,
.armada-card {
    border-radius: var(--wb-radius-xl) !important;
}

/* --------------------------------------------------------------------------
   HERO / PAGE HEADER SYSTEM
   -------------------------------------------------------------------------- */

.armada-hero,
.armada-top,
.perco-header,
.staff-header,
.roles-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--wb-radius-hero) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 82% 18%, rgba(56,189,248,.24), transparent 22%),
        radial-gradient(circle at 94% 72%, rgba(59,130,246,.28), transparent 28%),
        linear-gradient(128deg, #081426 0%, #102a56 44%, #1d4ed8 100%) !important;
    box-shadow:
        0 30px 75px rgba(15,23,42,.22),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.armada-hero::before,
.armada-top::before,
.perco-header::before,
.staff-header::before,
.roles-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 520px;
    height: 520px;
    right: -220px;
    top: -300px;
    border-radius: 50%;
    background:
        conic-gradient(
            from 90deg,
            rgba(255,255,255,.00),
            rgba(255,255,255,.10),
            rgba(255,255,255,.00) 55%
        );
    animation: wbHeroOrbit 18s linear infinite;
}

.armada-hero h1,
.armada-top h1,
.perco-header h1,
.staff-header h1,
.roles-header h1 {
    font-weight: 950 !important;
    letter-spacing: -.045em !important;
    text-shadow: 0 2px 18px rgba(0,0,0,.10);
}

.armada-hero p,
.armada-top p,
.perco-header p,
.staff-header p {
    color: rgba(219,234,254,.88) !important;
}

.wa-calendar-hero,
.wa-knowledge-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--wb-radius-xl) !important;
    border: 1px solid var(--wb-line) !important;
    background:
        radial-gradient(circle at 94% 0%, rgba(37,99,235,.10), transparent 30%),
        radial-gradient(circle at 6% 105%, rgba(6,182,212,.065), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,250,255,.96)) !important;
    box-shadow: var(--wb-shadow) !important;
}

body.theme-dark .wa-calendar-hero,
body.theme-dark .wa-knowledge-hero {
    background:
        radial-gradient(circle at 94% 0%, rgba(37,99,235,.22), transparent 30%),
        radial-gradient(circle at 6% 105%, rgba(6,182,212,.12), transparent 34%),
        var(--wb-surface-solid) !important;
}

.wa-calendar-hero h1,
.wa-knowledge-hero h1 {
    font-weight: 950 !important;
    letter-spacing: -.045em !important;
    color: var(--wb-ink) !important;
}

.wa-calendar-hero p,
.wa-knowledge-hero p {
    color: var(--wb-muted) !important;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.wa-btn,
.armada-btn,
.wa-calendar-create,
.wa-calendar-save,
.wa-calendar-approve,
.wa-calendar-back,
.wa-calendar-cancel,
.wa-kbtn,
.perco-page .btn,
.staff-page .btn,
.roles-page .btn,
.exam-page .btn {
    border-radius: 13px !important;
    font-weight: 850 !important;
    letter-spacing: -.005em;
}

.wa-btn-primary,
.armada-btn:not(.armada-btn-light),
.wa-calendar-create,
.wa-calendar-save,
.wa-calendar-approve,
.wa-kbtn-primary,
.perco-btn-main {
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #fff !important;
    background:
        linear-gradient(135deg, #1d4ed8, #2563eb 52%, #0891b2) !important;
    box-shadow:
        0 12px 26px rgba(37,99,235,.24),
        inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.wa-btn-primary:hover,
.armada-btn:hover,
.wa-calendar-create:hover,
.wa-calendar-save:hover,
.wa-kbtn-primary:hover,
.perco-btn-main:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.035);
    box-shadow:
        0 18px 38px rgba(37,99,235,.30),
        inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.armada-link,
.exam-icon-btn,
.wa-card-edit,
.wa-card-action,
.wa-card-btn,
.armada-chart-btn {
    border-radius: 12px !important;
    border-color: var(--wb-line) !important;
    background: var(--wb-surface-solid) !important;
    box-shadow: var(--wb-shadow-xs) !important;
}

.armada-link:hover,
.exam-icon-btn:hover,
.wa-card-edit:hover,
.wa-card-action:hover,
.wa-card-btn:hover,
.armada-chart-btn:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(37,99,235,.26) !important;
    color: #2563eb !important;
    background: #f5f9ff !important;
    box-shadow: 0 10px 22px rgba(37,99,235,.10) !important;
}

body.theme-dark .armada-link:hover,
body.theme-dark .exam-icon-btn:hover,
body.theme-dark .wa-card-edit:hover,
body.theme-dark .wa-card-action:hover,
body.theme-dark .wa-card-btn:hover {
    background: rgba(37,99,235,.12) !important;
}

/* --------------------------------------------------------------------------
   TABLES
   -------------------------------------------------------------------------- */

.armada-table-wrap,
.staff-table-wrap,
.exam-panel {
    overflow: hidden;
}

.armada-table thead th,
.exam-table th,
.staff-table th {
    background:
        linear-gradient(180deg, rgba(248,250,252,.96), rgba(241,245,249,.96)) !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase;
    border-bottom: 1px solid var(--wb-line) !important;
}

body.theme-dark .armada-table thead th,
body.theme-dark .exam-table th,
body.theme-dark .staff-table th {
    background: #111f33 !important;
    color: #94a3b8 !important;
}

.armada-table tbody td,
.exam-table td,
.staff-table td {
    color: var(--wb-text) !important;
    border-bottom: 1px solid var(--wb-line) !important;
}

.armada-table tbody tr,
.exam-table tbody tr,
.staff-table tbody tr {
    transition: background var(--wb-fast), transform var(--wb-fast);
}

.armada-table tbody tr:hover td,
.exam-table tbody tr:hover td,
.staff-table tbody tr:hover td {
    background: rgba(37,99,235,.035) !important;
}

.armada-badge,
.exam-status,
.perco-badge,
.device-status-active,
.device-status-offline,
.device-status-disabled {
    border-radius: 999px !important;
    font-weight: 850 !important;
    letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */

.armada-form-card .form-control,
.armada-form-card .form-select,
.exam-fieldset .form-control,
.wa-calendar-field .wa-input,
.wa-calendar-field input,
.wa-calendar-field select,
.wa-calendar-field textarea,
#knowledge-form .form-control,
.staff-search,
.armada-filter-form select {
    min-height: 48px;
    border-radius: 13px !important;
    border: 1px solid var(--wb-line-strong) !important;
    background: var(--wb-surface-solid) !important;
    color: var(--wb-text) !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.025) !important;
}

body.theme-dark .armada-form-card .form-control,
body.theme-dark .armada-form-card .form-select,
body.theme-dark .exam-fieldset .form-control,
body.theme-dark .wa-calendar-field input,
body.theme-dark .wa-calendar-field select,
body.theme-dark .wa-calendar-field textarea,
body.theme-dark #knowledge-form .form-control {
    background: #0d1a2b !important;
}

.armada-form-card .form-control:focus,
.armada-form-card .form-select:focus,
.exam-fieldset .form-control:focus,
.wa-calendar-field input:focus,
.wa-calendar-field select:focus,
.wa-calendar-field textarea:focus,
#knowledge-form .form-control:focus,
.staff-search:focus,
.armada-filter-form select:focus {
    border-color: #60a5fa !important;
    box-shadow:
        0 0 0 4px rgba(37,99,235,.10),
        inset 0 1px 2px rgba(15,23,42,.025) !important;
    outline: none !important;
}

.armada-form-card label,
.exam-fieldset label,
.wa-calendar-field label,
#knowledge-form label {
    color: #475569 !important;
    font-size: 12px;
    font-weight: 850 !important;
}

/* --------------------------------------------------------------------------
   ARMADA — INDUSTRIAL COMMAND CENTER
   -------------------------------------------------------------------------- */

.armada-page {
    background:
        radial-gradient(circle at 100% 0%, rgba(37,99,235,.085), transparent 28%),
        radial-gradient(circle at 0% 100%, rgba(6,182,212,.055), transparent 32%),
        var(--wb-bg) !important;
}

.armada-card::before {
    height: 3px !important;
    background:
        linear-gradient(90deg, #2563eb, #06b6d4, #60a5fa) !important;
}

.armada-row,
.armada-event,
.armada-metric {
    border: 1px solid var(--wb-line) !important;
    background:
        linear-gradient(180deg, var(--wb-surface-solid), var(--wb-surface-muted)) !important;
    box-shadow: var(--wb-shadow-xs);
}

.armada-row:hover,
.armada-event:hover {
    border-color: rgba(37,99,235,.22) !important;
    transform: translateX(2px);
}

.armada-chart-box {
    border-radius: 26px !important;
    border: 1px solid var(--wb-line) !important;
    box-shadow: 0 34px 90px rgba(15,23,42,.24) !important;
}

.device-status-active::before {
    animation: wbStatusPulse 1.8s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   CALENDAR
   -------------------------------------------------------------------------- */

.wa-calendar-page {
    background: transparent;
}

.wa-calendar-toolbar,
.wa-calendar-grid {
    border-color: var(--wb-line) !important;
    background: var(--wb-surface) !important;
    box-shadow: var(--wb-shadow-sm) !important;
}

.wa-calendar-grid {
    border-radius: 28px !important;
}

.wa-calendar-day {
    border-color: var(--wb-line) !important;
    background: var(--wb-surface-solid) !important;
    box-shadow: var(--wb-shadow-xs) !important;
}

.wa-calendar-day:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(37,99,235,.26) !important;
    box-shadow: var(--wb-shadow) !important;
}

.wa-calendar-day.is-today {
    border-color: #60a5fa !important;
    box-shadow:
        0 0 0 3px rgba(37,99,235,.08),
        var(--wb-shadow-sm) !important;
}

.wa-calendar-event {
    border-radius: 11px !important;
    box-shadow: none !important;
    border-top: 1px solid rgba(255,255,255,.7) !important;
    border-right: 1px solid rgba(15,23,42,.04) !important;
    border-bottom: 1px solid rgba(15,23,42,.04) !important;
}

.wa-calendar-event:hover {
    transform: translateX(4px) !important;
}

/* --------------------------------------------------------------------------
   KNOWLEDGE
   -------------------------------------------------------------------------- */

.wa-knowledge-page {
    background: transparent !important;
}

.wa-knowledge-sidebar {
    border-radius: 20px !important;
}

.wa-knowledge-cat {
    font-weight: 750;
    border: 1px solid transparent;
}

.wa-knowledge-cat:hover,
.wa-knowledge-cat.is-active {
    background: rgba(37,99,235,.07) !important;
    border-color: rgba(37,99,235,.10);
}

.wa-knowledge-card {
    min-height: 260px;
}

.wa-knowledge-card::after {
    content: "";
    position: absolute;
    inset: auto -40px -60px auto;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37,99,235,.08), transparent 68%);
    pointer-events: none;
}

.wa-knowledge-title {
    color: var(--wb-ink) !important;
    letter-spacing: -.025em;
}

.wa-knowledge-desc,
.wa-knowledge-meta,
.wa-knowledge-card-footer {
    color: var(--wb-muted) !important;
}

/* --------------------------------------------------------------------------
   EXAMS
   -------------------------------------------------------------------------- */

.exam-page {
    background: transparent !important;
}

.exam-title,
.exam-panel-title,
.exam-fieldset-title,
.exam-question-text,
.exam-kpi-value {
    color: var(--wb-ink) !important;
}

.exam-muted,
.exam-kpi-label {
    color: var(--wb-muted) !important;
}

.exam-kpi {
    position: relative;
    overflow: hidden;
    border-radius: 18px !important;
}

.exam-kpi::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    right: -38px;
    top: -38px;
    border-radius: 50%;
    background: rgba(37,99,235,.06);
}

.exam-question-row {
    border-color: var(--wb-line) !important;
    border-radius: 18px !important;
    background: var(--wb-surface-solid) !important;
}

.exam-question-number {
    color: #1d4ed8 !important;
    background: rgba(37,99,235,.09) !important;
}

/* --------------------------------------------------------------------------
   PERCO / STAFF / ROLES
   -------------------------------------------------------------------------- */

.perco-page,
.staff-page,
.roles-page {
    background: transparent !important;
}

.perco-icon,
.staff-avatar {
    background:
        linear-gradient(145deg, rgba(37,99,235,.10), rgba(6,182,212,.07)) !important;
    color: #2563eb !important;
    border: 1px solid rgba(37,99,235,.09);
}

.perco-info-item,
.perco-status-item,
.staff-item,
.permission-item,
.perco-reader-box {
    border: 1px solid var(--wb-line) !important;
    background: var(--wb-surface-muted) !important;
}

.permission-item {
    border-radius: 15px !important;
}

.perco-fab-main {
    background:
        linear-gradient(145deg, #1d4ed8, #2563eb 55%, #0891b2) !important;
    box-shadow:
        0 16px 40px rgba(37,99,235,.35),
        0 0 0 7px rgba(37,99,235,.08) !important;
}

.perco-fab-main:hover {
    transform: translateY(-3px) scale(1.03);
}

/* --------------------------------------------------------------------------
   MODALS
   -------------------------------------------------------------------------- */

.wa-modal-backdrop,
.wa-calendar-modal-backdrop,
.modal-backdrop {
    backdrop-filter: blur(9px) saturate(115%);
}

.wa-modal-dialog,
.wa-calendar-modal-dialog,
.wa-kmodal-content,
.modal-content {
    border: 1px solid rgba(255,255,255,.55) !important;
    border-radius: 24px !important;
    box-shadow:
        0 38px 100px rgba(15,23,42,.28),
        0 12px 30px rgba(15,23,42,.10) !important;
}

body.theme-dark .wa-modal-dialog,
body.theme-dark .wa-calendar-modal-dialog,
body.theme-dark .modal-content {
    border-color: var(--wb-line) !important;
    background: var(--wb-surface-solid) !important;
}

/* --------------------------------------------------------------------------
   MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */

@keyframes wbHeroOrbit {
    to { transform: rotate(360deg); }
}

@keyframes wbStatusPulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(34,197,94,.28), 0 0 8px rgba(34,197,94,.55);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(34,197,94,0), 0 0 12px rgba(34,197,94,.72);
    }
}

@keyframes wbFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.armada-card,
.wa-knowledge-card,
.exam-kpi,
.perco-card,
.staff-card {
    animation: wbFadeUp .42s var(--wb-ease) both;
}

.armada-card:nth-child(2),
.wa-knowledge-card:nth-child(2),
.exam-kpi:nth-child(2),
.perco-card:nth-child(2),
.staff-card:nth-child(2) { animation-delay: 40ms; }

.armada-card:nth-child(3),
.wa-knowledge-card:nth-child(3),
.exam-kpi:nth-child(3),
.perco-card:nth-child(3),
.staff-card:nth-child(3) { animation-delay: 80ms; }

.armada-card:nth-child(4),
.wa-knowledge-card:nth-child(4),
.exam-kpi:nth-child(4),
.perco-card:nth-child(4),
.staff-card:nth-child(4) { animation-delay: 120ms; }

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

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .wa-content {
        padding: 16px !important;
    }

    .armada-page,
    .exam-page,
    .wa-calendar-page,
    .wa-knowledge-page {
        padding: 14px !important;
    }

    .armada-hero,
    .armada-top,
    .perco-header,
    .staff-header,
    .roles-header,
    .wa-calendar-hero,
    .wa-knowledge-hero {
        border-radius: 24px !important;
    }
}

@media (max-width: 640px) {
    .wa-content {
        padding: 12px !important;
    }

    .armada-hero,
    .armada-top,
    .perco-header,
    .staff-header,
    .roles-header {
        padding: 22px !important;
    }

    .armada-hero h1,
    .armada-top h1,
    .perco-header h1,
    .staff-header h1,
    .roles-header h1 {
        font-size: 28px !important;
    }
}