/* ==========================================================================
   SKILL THEME — Monochromatic Design System
   "Clinical blueprint on frosted paper"
   Reference: SKILL.md
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
    /* Colors */
    --color-canvas: #f5f5f5;
    --color-paper: #ffffff;
    --color-surface-alt: #fafafa;
    --color-ink: #0a0a0a;
    --color-ink-soft: #171717;
    --color-mid-gray: #737373;
    --color-hairline: #e5e5e5;
    --color-ember: #e7000b;

    /* Typography */
    --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-geist-mono: 'Geist Mono', monospace;

    /* Radii */
    --radius-cards: 24px;
    --radius-buttons: 18px;
    --radius-inputs: 18px;
    --radius-badges: 18px;
    --radius-nested: 10px;
    --radius-small: 6px;

    /* Shadows - Whisper quiet stack from SKILL.md */
    --shadow-subtle: 0 0 0 1px rgba(23, 23, 23, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
    --shadow-card: 0 0 0 1px rgba(23, 23, 23, 0.05), 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 0 0 1px rgba(23, 23, 23, 0.09), 0 6px 16px -2px rgba(0, 0, 0, 0.06);

    /* Override system variables */
    --bg: #f5f5f5;
    --content-bg: #ffffff;
    --text: #0a0a0a;
    --border: #e5e5e5;
    --font-heading: var(--font-geist);
    --font-ui: var(--font-geist);
    --font-mono: var(--font-geist-mono);
}

/* Base Body Styling */
body {
    font-family: var(--font-geist), -apple-system, BlinkMacSystemFont, sans-serif !important;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html.light body,
html:not(.dark) body {
    background-color: var(--color-canvas) !important;
    color: var(--color-ink) !important;
}

/* Light Mode Layout Styling (Clinical Blueprint) */
html.light aside#sidebar,
html:not(.dark) aside#sidebar {
    background-color: var(--color-surface-alt) !important;
    border-right: 1px solid var(--color-hairline) !important;
}

/* ARDO Group Logo - Section 6 SKILL.md Specs */
.ardo-logo,
.ardo-logo-link {
    transition: transform 0.3s ease !important;
}

.ardo-logo:hover,
.ardo-logo-link:hover {
    transform: scale(1.02) !important;
}

.logo-box {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border: 2px solid #000000 !important;
    border-radius: 0px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

html.dark .logo-box,
html.dark aside#sidebar .logo-box {
    border-color: #ffffff !important;
}

.logo-box span {
    font-family: var(--font-geist) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: -0.05em !important;
    color: #000000 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

html.dark .logo-box span,
html.dark aside#sidebar .logo-box span {
    color: #ffffff !important;
}

.ardo-logo .logo-text span:first-child,
.ardo-logo-link .logo-text span:first-child {
    color: #000000 !important;
    font-family: var(--font-geist) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
}

html.dark .ardo-logo .logo-text span:first-child,
html.dark .ardo-logo-link .logo-text span:first-child {
    color: #ffffff !important;
}

.ardo-logo .logo-text span:last-child,
.ardo-logo-link .logo-text span:last-child {
    color: #000000 !important;
    font-family: var(--font-geist) !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    opacity: 0.6 !important;
    line-height: 1 !important;
    margin-top: 2px !important;
}

html.dark .ardo-logo .logo-text span:last-child,
html.dark .ardo-logo-link .logo-text span:last-child {
    color: #ffffff !important;
}

/* Nav Links in Light Mode */
html.light aside#sidebar nav a,
html:not(.dark) aside#sidebar nav a {
    color: var(--color-mid-gray) !important;
    font-family: var(--font-geist) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    letter-spacing: 0.05em !important;
    margin: 2px 10px !important;
    border-radius: var(--radius-buttons) !important;
    padding: 8px 12px !important;
    transition: all 0.15s ease !important;
    border: none !important;
}

html.light aside#sidebar nav a:hover,
html:not(.dark) aside#sidebar nav a:hover {
    color: var(--color-ink) !important;
    background-color: var(--color-canvas) !important;
}

html.light aside#sidebar nav a.active-nav-link,
html.light aside#sidebar nav a.active-subnav-link,
html.light aside#sidebar nav a.bg-white\/10,
html.light aside#sidebar .nav-submenu a.active-subnav-link,
html.light aside#sidebar .nav-submenu a.active-nav-link,
html.light aside#sidebar .nav-submenu a.bg-white\/10,
html:not(.dark) aside#sidebar nav a.active-nav-link,
html:not(.dark) aside#sidebar nav a.active-subnav-link,
html:not(.dark) aside#sidebar nav a.bg-white\/10,
html:not(.dark) aside#sidebar .nav-submenu a.active-subnav-link,
html:not(.dark) aside#sidebar .nav-submenu a.active-nav-link,
html:not(.dark) aside#sidebar .nav-submenu a.bg-white\/10 {
    background-color: var(--color-ink) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: var(--radius-buttons) !important;
    border-left: none !important;
}

html.light aside#sidebar nav a.bg-white\/10 .material-symbols-outlined,
html.light aside#sidebar nav a.active-nav-link .material-symbols-outlined,
html:not(.dark) aside#sidebar nav a.bg-white\/10 .material-symbols-outlined,
html:not(.dark) aside#sidebar nav a.active-nav-link .material-symbols-outlined {
    color: #ffffff !important;
}

html.light aside#sidebar nav a .material-symbols-outlined,
html:not(.dark) aside#sidebar nav a .material-symbols-outlined {
    color: var(--color-mid-gray) !important;
    transition: color 0.15s ease;
}

html.light aside#sidebar nav a:hover .material-symbols-outlined,
html:not(.dark) aside#sidebar nav a:hover .material-symbols-outlined {
    color: var(--color-ink) !important;
}

/* Sidebar Submenu */
html.light aside#sidebar .nav-submenu,
html:not(.dark) aside#sidebar .nav-submenu {
    background-color: transparent !important;
    padding-left: 8px !important;
}

html.light aside#sidebar .nav-submenu a,
html:not(.dark) aside#sidebar .nav-submenu a {
    padding-left: 26px !important;
    font-size: 11px !important;
    color: var(--color-mid-gray) !important;
}

/* Dark Mode Active Submenu Link */
html.dark aside#sidebar .nav-submenu a.active-subnav-link,
html.dark aside#sidebar .nav-submenu a.active-nav-link,
html.dark aside#sidebar .nav-submenu a.bg-white\/10,
html.dark aside#sidebar nav a.active-subnav-link,
html.dark aside#sidebar nav a.active-nav-link {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: var(--radius-buttons) !important;
    border-left: none !important;
}

/* Sidebar Footer & Bottom Controls */
html.light aside#sidebar .border-white\/10,
html:not(.dark) aside#sidebar .border-white\/10 {
    border-color: var(--color-hairline) !important;
}

/* Sidebar Bottom Utility Buttons: Sleek 32px Circular Buttons */
aside#sidebar .sidebar-controls-row button,
aside#sidebar .sidebar-controls-row a {
    background-color: transparent !important;
    color: var(--color-mid-gray) !important;
    border: 1px solid var(--color-hairline) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
}

aside#sidebar .sidebar-controls-row button:hover,
aside#sidebar .sidebar-controls-row a:hover {
    background-color: var(--color-canvas) !important;
    color: var(--color-ink) !important;
    border-color: #d4d4d4 !important;
}

html.dark aside#sidebar .sidebar-controls-row button,
html.dark aside#sidebar .sidebar-controls-row a {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html.dark aside#sidebar .sidebar-controls-row button:hover,
html.dark aside#sidebar .sidebar-controls-row a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

html.light aside#sidebar #profileMenuToggleBtn:hover,
html:not(.dark) aside#sidebar #profileMenuToggleBtn:hover {
    background-color: var(--color-canvas) !important;
}

/* Collapsed Sidebar Refinements */
body.sidebar-collapsed aside#sidebar .sidebar-controls-row {
    justify-content: center !important;
}

body.sidebar-collapsed aside#sidebar .sidebar-controls-row .privacy-toggle-btn,
body.sidebar-collapsed aside#sidebar .sidebar-controls-row .theme-toggle-btn,
body.sidebar-collapsed aside#sidebar .sidebar-controls-row a[title="Sincronizar CRM"] {
    display: none !important;
}

body.sidebar-collapsed aside#sidebar #profileMenuToggleBtn {
    justify-content: center !important;
    padding: 4px !important;
}

body.sidebar-collapsed aside#sidebar .sidebar-filters-container {
    display: none !important;
}

body.sidebar-collapsed aside#sidebar .logo-text-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    justify-content: center !important;
}

body.sidebar-collapsed aside#sidebar .logo-text-container a {
    justify-content: center !important;
}

/* Desktop: Hide top-navbar and adjust canvas */
header.top-navbar {
    display: none !important;
}

main.main-canvas {
    padding-top: 32px !important;
}

@media (min-width: 1024px) {
    main.main-canvas {
        width: calc(100% - var(--sidebar-width)) !important;
        margin-left: var(--sidebar-width) !important;
    }
    body.sidebar-collapsed main.main-canvas {
        width: calc(100% - var(--sidebar-collapsed-width)) !important;
        margin-left: var(--sidebar-collapsed-width) !important;
    }
    footer.footer-container {
        width: calc(100% - var(--sidebar-width)) !important;
        margin-left: var(--sidebar-width) !important;
    }
    body.sidebar-collapsed footer.footer-container {
        width: calc(100% - var(--sidebar-collapsed-width)) !important;
        margin-left: var(--sidebar-collapsed-width) !important;
    }
}

@media (max-width: 1023px) {
    main.main-canvas {
        padding-top: 76px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    footer.footer-container {
        margin-left: 0 !important;
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 1024px) {
    header.mobile-header,
    header.top-navbar {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    header.mobile-header {
        display: flex !important;
        height: 58px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        align-items: center !important;
        justify-content: space-between !important;
        z-index: 50 !important;
        transition: background-color 0.2s ease, border-color 0.2s ease !important;
    }

    html.light header.mobile-header,
    html:not(.dark) header.mobile-header {
        background-color: rgba(255, 255, 255, 0.94) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-bottom: 1px solid var(--color-hairline) !important;
        color: var(--color-ink) !important;
    }

    html.light header.mobile-header button,
    html.light header.mobile-header a,
    html:not(.dark) header.mobile-header button,
    html:not(.dark) header.mobile-header a {
        color: var(--color-ink) !important;
    }

    html.light header.mobile-header .logo-box,
    html:not(.dark) header.mobile-header .logo-box {
        border-color: var(--color-ink) !important;
    }

    html.light header.mobile-header .logo-box span,
    html:not(.dark) header.mobile-header .logo-box span {
        color: var(--color-ink) !important;
    }

    html.light header.mobile-header .logo-text span:first-child,
    html:not(.dark) header.mobile-header .logo-text span:first-child {
        color: var(--color-ink) !important;
    }

    html.dark header.mobile-header {
        background-color: rgba(10, 10, 10, 0.94) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }

    html.dark header.mobile-header button,
    html.dark header.mobile-header a {
        color: #ffffff !important;
    }

    html.dark header.mobile-header .logo-box {
        border-color: #ffffff !important;
    }

    html.dark header.mobile-header .logo-box span {
        color: #ffffff !important;
    }

    html.dark header.mobile-header .logo-text span:first-child {
        color: #ffffff !important;
    }
}

/* Mobile Navigation Drawer */
@media (max-width: 1023px) {
    aside#sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 280px !important;
        max-width: 85vw !important;
        z-index: 100 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-shadow: none !important;
    }

    body.mobile-nav-active aside#sidebar,
    body.mobile-nav-active.sidebar-collapsed aside#sidebar {
        transform: translateX(0) !important;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.2) !important;
    }

    .sidebar-overlay {
        display: none;
        position: fixed !important;
        inset: 0 !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 90 !important;
        transition: opacity 0.28s ease !important;
    }

    body.mobile-nav-active .sidebar-overlay {
        display: block !important;
    }

    body.mobile-nav-active .nav-text,
    body.mobile-nav-active .logo-text,
    body.mobile-nav-active .submenu-indicator,
    body.mobile-nav-active .flyout-indicator,
    body.mobile-nav-active.sidebar-collapsed .nav-text,
    body.mobile-nav-active.sidebar-collapsed .logo-text,
    body.mobile-nav-active.sidebar-collapsed .submenu-indicator,
    body.mobile-nav-active.sidebar-collapsed .flyout-indicator {
        display: inline-block !important;
    }

    body.mobile-nav-active .sidebar-filters-container,
    body.mobile-nav-active.sidebar-collapsed .sidebar-filters-container {
        display: block !important;
    }

    body.mobile-nav-active .sidebar-controls-row .privacy-toggle-btn,
    body.mobile-nav-active .sidebar-controls-row .theme-toggle-btn,
    body.mobile-nav-active .sidebar-controls-row a[title="Sincronizar CRM"],
    body.mobile-nav-active.sidebar-collapsed .sidebar-controls-row .privacy-toggle-btn,
    body.mobile-nav-active.sidebar-collapsed .sidebar-controls-row .theme-toggle-btn,
    body.mobile-nav-active.sidebar-collapsed .sidebar-controls-row a[title="Sincronizar CRM"] {
        display: inline-flex !important;
    }
}

/* Footer Container */
html.light footer.footer-container,
html:not(.dark) footer.footer-container {
    background-color: transparent !important;
    border-top: 1px solid var(--color-hairline) !important;
    color: var(--color-mid-gray) !important;
}

/* ==========================================================================
   SKILL COMPONENT CLASSES (24px Cards, 18px Interactive, Hairline Borders)
   ========================================================================== */

/* Main Canvas */
html.light main.main-canvas,
html:not(.dark) main.main-canvas {
    background-color: var(--color-canvas) !important;
    max-width: none !important;
}

html.dark main.main-canvas {
    background-color: #000000 !important;
    max-width: none !important;
}

/* Card Component: 24px Radius, Hairline Border, Whisper-Quiet Shadow */
.skill-card {
    background-color: var(--color-paper);
    border-radius: var(--radius-cards) !important;
    border: 1px solid var(--color-hairline) !important;
    box-shadow: var(--shadow-card) !important;
    padding: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.skill-card:hover {
    box-shadow: var(--shadow-card-hover) !important;
}

/* Dark variant fallback */
.dark .skill-card {
    background-color: #121212;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* Primary Filled Button: 18px Radius, Pill Shape, #0a0a0a */
.skill-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: var(--color-ink) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-buttons) !important;
    padding: 8px 16px !important;
    font-family: var(--font-geist) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    min-height: 36px !important;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none !important;
}

.skill-btn-primary:hover {
    background-color: var(--color-ink-soft) !important;
    opacity: 0.94;
    transform: translateY(-1px);
}

/* Ghost / Secondary Button: 18px Radius, #f5f5f5 */
.skill-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: var(--color-surface-alt) !important;
    color: var(--color-ink) !important;
    border: 1px solid var(--color-hairline) !important;
    border-radius: var(--radius-buttons) !important;
    padding: 8px 14px !important;
    font-family: var(--font-geist) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    min-height: 36px !important;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none !important;
}

.skill-btn-ghost:hover {
    background-color: var(--color-canvas) !important;
    border-color: #d4d4d4 !important;
    color: var(--color-ink) !important;
}

/* Outline Button: 18px Radius, Hairline Border */
.skill-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: transparent !important;
    color: var(--color-ink) !important;
    border: 1px solid var(--color-hairline) !important;
    border-radius: var(--radius-buttons) !important;
    padding: 8px 14px !important;
    font-family: var(--font-geist) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    min-height: 36px !important;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none !important;
}

.skill-btn-outline:hover {
    background-color: var(--color-canvas) !important;
    border-color: #a3a3a3 !important;
}

/* Entity Filter Pill (Customized for Division Nav) */
.skill-entity-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-paper);
    color: var(--color-ink);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-buttons);
    padding: 7px 14px;
    font-family: var(--font-geist);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    min-height: 36px;
}

.skill-entity-pill:hover {
    background-color: var(--color-ink);
    color: #ffffff !important;
    border-color: var(--color-ink);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.dark .skill-entity-pill {
    background-color: #171717;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.15);
}

.dark .skill-entity-pill:hover {
    background-color: #ffffff;
    color: #000000 !important;
}

/* Badges: 18px Radius Capsule Tag */
.skill-badge-solid {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: var(--color-ink-soft);
    color: #fafafa !important;
    border-radius: var(--radius-badges) !important;
    padding: 3px 9px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
}

.skill-badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: var(--color-canvas);
    color: var(--color-ink) !important;
    border: 1px solid var(--color-hairline) !important;
    border-radius: var(--radius-badges) !important;
    padding: 3px 9px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
}

/* Instance Badges & Table Status Tags: Rounded Capsule Pills (Full Radius) */
.skill-instance-badge,
table td span[style*="border-color"],
table td span.rounded-sm,
table td span[class*="rounded-sm"],
.badge,
.badge-pill {
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html.dark table td span[style*="border-color"],
html.dark .skill-instance-badge {
    border-radius: 9999px !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(4px) !important;
}

/* Stat Blocks & Typography */
.skill-title-display {
    font-family: var(--font-geist) !important;
    font-size: clamp(28px, 3.2vw, 42px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.05em !important;
    line-height: 1.12 !important;
    color: var(--color-ink);
}

.dark .skill-title-display {
    color: #ffffff;
}

.skill-stat-label {
    font-family: var(--font-geist) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--color-mid-gray) !important;
}

.skill-stat-value {
    font-family: var(--font-geist) !important;
    font-size: clamp(24px, 2.5vw, 34px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.1 !important;
    color: var(--color-ink) !important;
}

.dark .skill-stat-value {
    color: #ffffff !important;
}

.skill-stat-sub {
    font-family: var(--font-geist) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--color-mid-gray) !important;
}

/* News Marquee in 18px Pill Container */
.skill-ticker-container {
    background-color: var(--color-paper);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-buttons);
    box-shadow: var(--shadow-subtle);
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.dark .skill-ticker-container {
    background-color: #121212;
    border-color: rgba(255, 255, 255, 0.12);
}

.skill-ticker-badge {
    background-color: var(--color-ink);
    color: #ffffff;
    padding: 8px 18px;
    font-family: var(--font-geist);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius-buttons) 0 0 var(--radius-buttons);
}

/* Continuous Smooth Marquee Animation */
@keyframes skillMarquee {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

.animate-marquee,
#newsMarqueeContainer {
    display: inline-flex !important;
    white-space: nowrap !important;
    width: max-content !important;
    will-change: transform;
    animation: skillMarquee 250s linear infinite !important;
}

.animate-marquee:hover,
#newsMarqueeContainer:hover {
    animation-play-state: paused !important;
}

/* Tables inside Details */
.skill-details-container {
    border-top: 1px solid var(--color-hairline);
    padding-top: 14px;
    margin-top: 16px;
}

.skill-details-summary {
    font-family: var(--font-geist);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-mid-gray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}

.skill-details-summary:hover {
    color: var(--color-ink);
}

.dark .skill-details-summary:hover {
    color: #ffffff;
}

.skill-subtable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-geist);
}

.skill-subtable th {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-mid-gray);
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-hairline);
}

.skill-subtable td {
    padding: 8px 10px;
    font-size: 12.5px;
    color: var(--color-ink);
    border-bottom: 1px solid #f2f2f2;
}

.dark .skill-subtable td {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.05);
}

.skill-subtable tr:hover td {
    background-color: var(--color-surface-alt);
}

.dark .skill-subtable tr:hover td {
    background-color: rgba(255, 255, 255, 0.03);
}

/* KPI Rate Mini-Cards */
.skill-rate-kpi {
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-buttons);
    padding: 12px 14px;
    transition: all 0.15s ease;
}

.skill-rate-kpi:hover {
    background-color: var(--color-paper);
    border-color: #d4d4d4;
}

.dark .skill-rate-kpi {
    background-color: #171717;
    border-color: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   UNIVERSAL APPLICATION RULES (Project-Wide Consistency)
   ========================================================================== */

/* Universal Form Controls: 18px Pill Radius */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select:not(.global-filter-select),
textarea {
    border-radius: var(--radius-inputs) !important;
    font-family: var(--font-geist) !important;
    font-size: 13px !important;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}

html.light input[type="text"],
html.light input[type="search"],
html.light input[type="email"],
html.light input[type="password"],
html.light input[type="number"],
html.light input[type="date"],
html.light select:not(.global-filter-select),
html.light textarea,
html:not(.dark) input[type="text"],
html:not(.dark) input[type="search"],
html:not(.dark) input[type="email"],
html:not(.dark) input[type="password"],
html:not(.dark) input[type="number"],
html:not(.dark) input[type="date"],
html:not(.dark) select:not(.global-filter-select),
html:not(.dark) textarea {
    background-color: var(--color-surface-alt) !important;
    border: 1px solid var(--color-hairline) !important;
    color: var(--color-ink) !important;
}

html.light input:focus,
html.light select:not(.global-filter-select):focus,
html.light textarea:focus,
html:not(.dark) input:focus,
html:not(.dark) select:not(.global-filter-select):focus,
html:not(.dark) textarea:focus {
    background-color: #ffffff !important;
    border-color: #a3a3a3 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #a3a3a3 !important;
}

/* Universal Buttons: 18px Pill Radius (Main Canvas Only, Excludes Sidebar Navigation) */
main button:not(.settings-nav-link),
main a[class~="bg-black"]:not(.settings-nav-link),
main a[class~="bg-white"]:not(.settings-nav-link),
main a.btn:not(.settings-nav-link),
main .btn:not(.settings-nav-link),
button[type="submit"]:not(.settings-nav-link),
.main-canvas button:not(.settings-nav-link),
.main-canvas a[class~="bg-black"]:not(.settings-nav-link),
.main-canvas a[class~="bg-white"]:not(.settings-nav-link) {
    border-radius: var(--radius-buttons) !important;
    font-family: var(--font-geist) !important;
    font-weight: 500 !important;
}

html.light a[class~="bg-black"]:not(.settings-nav-link),
html.light button[class~="bg-black"]:not(.settings-nav-link),
html:not(.dark) a[class~="bg-black"]:not(.settings-nav-link),
html:not(.dark) button[class~="bg-black"]:not(.settings-nav-link) {
    background-color: var(--color-ink) !important;
    color: #ffffff !important;
    border: none !important;
    transition: all 0.15s ease !important;
}

html.light a[class~="bg-black"]:not(.settings-nav-link):hover,
html.light button[class~="bg-black"]:not(.settings-nav-link):hover,
html:not(.dark) a[class~="bg-black"]:not(.settings-nav-link):hover,
html:not(.dark) button[class~="bg-black"]:not(.settings-nav-link):hover {
    background-color: var(--color-ink-soft) !important;
    opacity: 0.94 !important;
}

/* ==========================================================================
   SETTINGS MODULE VERTICAL NAVIGATION (Clean, Minimalist Aesthetics)
   ========================================================================== */
.settings-nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-family: var(--font-geist) !important;
    font-size: 11.5px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out !important;
    border: 1px solid transparent !important;
    margin-bottom: 2px !important;
}

html.light .settings-nav-link,
html:not(.dark) .settings-nav-link {
    background-color: transparent !important;
    color: #525252 !important;
    font-weight: 500 !important;
}

html.light .settings-nav-link:hover,
html:not(.dark) .settings-nav-link:hover {
    background-color: #f5f5f5 !important;
    color: #0a0a0a !important;
}

html.light .settings-nav-link.active,
html:not(.dark) .settings-nav-link.active {
    background-color: #0a0a0a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

html.light .settings-nav-link.active .material-symbols-outlined,
html:not(.dark) .settings-nav-link.active .material-symbols-outlined {
    color: #ffffff !important;
}

html.light .settings-nav-link:not(.active) .material-symbols-outlined,
html:not(.dark) .settings-nav-link:not(.active) .material-symbols-outlined {
    color: #888888 !important;
}

html.dark .settings-nav-link {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500 !important;
}

html.dark .settings-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}

html.dark .settings-nav-link.active {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.15) !important;
}

html.dark .settings-nav-link.active .material-symbols-outlined {
    color: #000000 !important;
}

html.dark .settings-nav-link:not(.active) .material-symbols-outlined {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Sticky Settings Navigation Anchor */
aside.settings-sidebar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 24px !important;
    z-index: 25 !important;
    align-self: flex-start !important;
}

.settings-sticky-menu {
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.settings-sticky-menu::-webkit-scrollbar {
    width: 3px;
}
.settings-sticky-menu::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}
html.dark .settings-sticky-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 1023px) {
    .settings-sticky-menu {
        position: static !important;
        max-height: none !important;
    }
}

/* Universal Soft-Elevation & Card Containers (Both Light & Dark) */
.soft-elevation,
div.soft-elevation,
div[class*="soft-elevation"],
.skill-card,
.card {
    border-radius: var(--radius-cards) !important;
}

html.light .soft-elevation,
html.light div.soft-elevation,
html.light div[class*="soft-elevation"],
html:not(.dark) .soft-elevation,
html:not(.dark) div.soft-elevation,
html:not(.dark) div[class*="soft-elevation"] {
    background-color: var(--color-paper) !important;
    border: 1px solid var(--color-hairline) !important;
    box-shadow: var(--shadow-card) !important;
}

html.dark .soft-elevation,
html.dark div.soft-elevation,
html.dark div[class*="soft-elevation"] {
    background-color: #121212 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Badges, Tags, Action Buttons & Month Filter Links: 18px Pill (Both Light & Dark) */
span[class*="rounded-sm"],
a[class*="rounded-sm"],
button[class*="rounded-sm"],
div[class*="rounded-sm"]:not(.soft-elevation),
.badge,
.badge-pill,
.skill-instance-badge {
    border-radius: var(--radius-badges) !important;
}

/* Interactive elements and pills */
a[class*="rounded-sm"],
button[class*="rounded-sm"],
button[type="submit"],
button[type="button"],
.btn-filter,
.btn-clear-filter {
    border-radius: var(--radius-buttons) !important;
}

/* Light mode link pills */
html.light a[class*="border-black/15"],
html:not(.dark) a[class*="border-black/15"],
html.light a[class*="border-black/20"],
html:not(.dark) a[class*="border-black/20"] {
    border-color: var(--color-hairline) !important;
    background-color: var(--color-surface-alt) !important;
    color: var(--color-mid-gray) !important;
    transition: all 0.15s ease !important;
}

html.light a[class*="border-black/15"]:hover,
html:not(.dark) a[class*="border-black/15"]:hover,
html.light a[class*="border-black/20"]:hover,
html:not(.dark) a[class*="border-black/20"]:hover {
    background-color: #ffffff !important;
    border-color: #a3a3a3 !important;
    color: var(--color-ink) !important;
}

/* Dark mode inputs, selects & textareas: 18px pill radius */
html.dark input[type="text"],
html.dark input[type="search"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark select:not(.global-filter-select),
html.dark textarea {
    background-color: #171717 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: var(--radius-inputs) !important;
}

html.dark input:focus,
html.dark select:not(.global-filter-select):focus,
html.dark textarea:focus {
    background-color: #222222 !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
}

/* ==========================================================================
   SIDEBAR NAVIGATION LINKS (Protected Dark Mode Aesthetics)
   ========================================================================== */
aside#sidebar nav a,
aside#sidebar a.submenu-trigger,
aside#sidebar .nav-submenu a,
html.dark aside#sidebar nav a,
html.dark aside#sidebar a.submenu-trigger,
html.dark aside#sidebar .nav-submenu a {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 0 !important;
}

html.dark aside#sidebar nav a:hover,
html.dark aside#sidebar a.submenu-trigger:hover,
html.dark aside#sidebar .nav-submenu a:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}

html.dark aside#sidebar nav a[class*="bg-white/10"],
html.dark aside#sidebar nav a.active-nav-link,
html.dark aside#sidebar .active-subnav-link {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-left: 2px solid #ffffff !important;
}

html.dark aside#sidebar .nav-submenu {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Dark mode action buttons in content canvas only (Excluding sidebar) */
main a[class*="rounded-sm"],
main button[class*="rounded-sm"],
.main-canvas a[class*="rounded-sm"],
.main-canvas button[class*="rounded-sm"],
button:not(#mobileMenuToggle):not(.sidebar-toggle) {
    border-radius: var(--radius-buttons) !important;
}

/* Universal Tables */
html.light table,
html:not(.dark) table {
    font-family: var(--font-geist) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

html.light thead tr,
html:not(.dark) thead tr {
    border-bottom: 1px solid var(--color-hairline) !important;
}

html.light th,
html:not(.dark) th {
    font-family: var(--font-geist) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--color-mid-gray) !important;
    border-bottom: 1px solid var(--color-hairline) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

html.light td,
html:not(.dark) td {
    border-bottom: 1px solid #f2f2f2 !important;
    font-size: 13px !important;
    color: var(--color-ink) !important;
}

html.light tbody tr:hover td,
html:not(.dark) tbody tr:hover td {
    background-color: var(--color-surface-alt) !important;
}

/* Flyouts in Light Mode */
html.light .nav-flyout,
html:not(.dark) .nav-flyout {
    background: #ffffff !important;
    border-left: 1px solid var(--color-hairline) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.06) !important;
}

html.light .nav-flyout span,
html.light .nav-flyout a,
html:not(.dark) .nav-flyout span,
html:not(.dark) .nav-flyout a {
    color: var(--color-ink) !important;
}

html.light .nav-flyout .font-label-sm,
html:not(.dark) .nav-flyout .font-label-sm {
    color: var(--color-mid-gray) !important;
}

html.light .nav-flyout a:hover,
html:not(.dark) .nav-flyout a:hover {
    color: var(--color-ink) !important;
    background-color: var(--color-canvas) !important;
    border-radius: var(--radius-buttons) !important;
    padding-left: 10px !important;
}

/* Dropdown Menus (Both Light & Dark) */
#profileDropdownMenu,
#mobileProfileDropdownMenu {
    border-radius: var(--radius-cards) !important;
    padding: 8px !important;
}

#profileDropdownMenu a,
#mobileProfileDropdownMenu a {
    border-radius: var(--radius-buttons) !important;
    margin: 3px 4px !important;
    padding: 8px 12px !important;
    font-family: var(--font-geist) !important;
    font-size: 12.5px !important;
    transition: all 0.15s ease !important;
}

html.light #profileDropdownMenu,
html.light #mobileProfileDropdownMenu,
html:not(.dark) #profileDropdownMenu,
html:not(.dark) #mobileProfileDropdownMenu {
    background-color: var(--color-paper) !important;
    border: 1px solid var(--color-hairline) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08) !important;
}

html.light #profileDropdownMenu a,
html.light #mobileProfileDropdownMenu a,
html:not(.dark) #profileDropdownMenu a,
html:not(.dark) #mobileProfileDropdownMenu a {
    color: var(--color-ink) !important;
}

html.light #profileDropdownMenu a:hover,
html.light #mobileProfileDropdownMenu a:hover,
html:not(.dark) #profileDropdownMenu a:hover,
html:not(.dark) #mobileProfileDropdownMenu a:hover {
    background-color: var(--color-canvas) !important;
}

html.dark #profileDropdownMenu,
html.dark #mobileProfileDropdownMenu {
    background-color: #141414 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

html.dark #profileDropdownMenu a,
html.dark #mobileProfileDropdownMenu a {
    color: #ffffff !important;
}

html.dark #profileDropdownMenu a:hover,
html.dark #mobileProfileDropdownMenu a:hover {
    background-color: #242424 !important;
}

/* Headings Tracking */
h1,
h2,
h3,
.font-display-lg {
    letter-spacing: -0.035em !important;
}

/* ==========================================================================
   STRICT TYPOGRAPHY ENFORCEMENT (SKILL.md)
   ========================================================================== */

/* Enforce Geist Mono on all monospace elements, dates, amounts, code, and folios */
.font-mono,
.skill-mono,
[class*="font-mono"],
code,
kbd,
samp,
pre,
td.font-mono,
th.font-mono,
span.font-mono,
div.font-mono,
a.font-mono {
    font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-feature-settings: "tnum" 1, "zero" 1 !important;
}

/* Enforce Geist on all general text, headers, table cells, and UI controls */
.font-sans,
[class*="font-sans"],
.font-body-md,
.font-body-lg,
.font-label-md,
.font-display-lg,
.font-headline-lg,
.font-headline-md,
.font-headline-sm,
body,
html,
p,
button,
input,
select,
textarea,
th:not(.font-mono),
td:not(.font-mono) {
    font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Ensure Material Symbols Outlined icons are NEVER overridden by Geist */
.material-symbols-outlined,
[class*="material-symbols"],
button .material-symbols-outlined,
a .material-symbols-outlined,
span.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-wrap: normal !important;
    white-space: nowrap !important;
    direction: ltr !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Privacy Icon Toggle States */
.privacy-icon-off {
    display: none !important;
}

.privacy-icon-on {
    display: inline-block !important;
}

.privacy-mode .privacy-icon-off {
    display: inline-block !important;
}

.privacy-mode .privacy-icon-on {
    display: none !important;
}

/* Theme Icon Toggle States */
html:not(.dark) .theme-icon-dark,
body:not(.dark-mode) .theme-icon-dark {
    display: inline-block !important;
}

html:not(.dark) .theme-icon-light,
body:not(.dark-mode) .theme-icon-light {
    display: none !important;
}

html.dark .theme-icon-dark,
body.dark-mode .theme-icon-dark {
    display: none !important;
}

html.dark .theme-icon-light,
body.dark-mode .theme-icon-light {
    display: inline-block !important;
}

/* Sidebar Global Filter Selects (100% Flat & Seamless) */
aside#sidebar select.global-filter-select,
#globalFilterForm select.global-filter-select,
html.light aside#sidebar select.global-filter-select,
html:not(.dark) aside#sidebar select.global-filter-select,
html.dark aside#sidebar select.global-filter-select {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 16px 0 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-family: var(--font-geist) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    color: var(--color-ink) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    text-align: right !important;
}

html.dark aside#sidebar select.global-filter-select {
    color: #ffffff !important;
}

aside#sidebar select.global-filter-select:focus,
#globalFilterForm select.global-filter-select:focus,
html.light aside#sidebar select.global-filter-select:focus,
html:not(.dark) aside#sidebar select.global-filter-select:focus,
html.dark aside#sidebar select.global-filter-select:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}