/* ─── Position Styling ─── */
.tm-position-topbar {
    padding: 0px;
    margin-bottom: 0 !important;
    font-size: 0.8rem;
    border-bottom: 0px solid #3a3939 !important;
}

.tm-position-header {
    border-bottom: 1px solid #adadad;
}

.tm-position-bottom {
    padding: 8px 0;
    background: #222;
    color: #aaa;
    font-size: 0.75rem;
}

/* ─── Module Block ─── */
.module-block {
    margin-bottom: 0px;
}

.module-title {
    font-size: 1.1rem;
    font-weight: 700;
    border-bottom: 2px solid #6366f1;
    display: inline-block;
    margin-bottom: 15px;
}

/* ─── Sidebar ─── */
aside .uk-card {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ─── Position Preview Mode ─── */
.tm-position-preview {
    position: relative;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.tm-position-preview-label {
    position: absolute;
    top: 0;
    left: 0;
    background: #6366f1;
    color: #fff;
    padding: 2px 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 1000;
    border-bottom-right-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.tm-position-preview-active {
    outline: 2px dashed #6366f1;
    outline-offset: -2px;
    background: rgba(99, 102, 241, 0.03);
    min-height: 40px;
}

.tm-position-preview-empty {
    outline: 2px dashed #9ca3af;
    outline-offset: -2px;
    min-height: 60px;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(243, 244, 246, 0.7);
}

.tm-position-preview-empty::after {
    content: "Empty Position";
    color: #9ca3af;
    font-size: 12px;
    font-style: italic;
}

.tm-position-preview:hover {
    outline-color: #4f46e5;
    background: rgba(99, 102, 241, 0.08);
}



/* ─── Navbar Dropdown Fixes ─── */
.uk-navbar-dropdown {
    top: 100% !important;
    margin-top: 0 !important;
    padding: 20px !important;
}

/* ─── Frontend Dark Mode Variables & Overrides ─── */
@keyframes themeGradientAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

:root {
    --bg-main: #ffffff;
    --text-main: #333333;
    --text-muted: #666666;
    --card-bg: #ffffff;
    --border-color: #e5e7eb;
    --primary: #6366f1;
    --secondary: #ec4899;
    --radius: 8px;
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
    --font-size-base: 16px;
    --heading-weight: 700;
    --line-height: 1.6;
    --letter-spacing: normal;
    --heading-transform: none;
    --link-decoration: none;
    --nav-height: 80px;
    --bg-pattern: none;
    --gradient-speed: 15s;
    --gradient-angle: -45deg;
    --container-width: 1200px;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    --card-border-width: 1px;
    --nav-bg: #ffffff;
    --btn-padding: 8px 20px;
    --input-padding: 8px 12px;
    --input-border-width: 1px;
    --input-bg: #ffffff;
    --animation-speed: 0.2s;
    --spacing-y: 40px;
}

body {
    font-family: var(--font-main);
    color: var(--text-main);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    background-image: var(--bg-pattern);
}

.uk-container {
    max-width: var(--container-width) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.uk-h1,
.uk-h2,
.uk-h3,
.uk-h4,
.uk-h5,
.uk-h6 {
    font-family: var(--font-heading);
    font-weight: var(--heading-weight);
    letter-spacing: var(--letter-spacing);
    text-transform: var(--heading-transform);
}

.uk-card,
.uk-button,
.uk-input,
.uk-select,
.uk-textarea,
.uk-badge,
.uk-label {
    border-radius: var(--radius) !important;
    transition: all var(--animation-speed) ease-in-out !important;
}

.uk-card-default {
    background: var(--card-bg) !important;
    box-shadow: var(--card-shadow) !important;
    border: var(--card-border-width) solid var(--border-color) !important;
}

.uk-button-primary {
    background-color: var(--primary) !important;
    padding: var(--btn-padding);
}

.uk-input,
.uk-select,
.uk-textarea {
    background-color: var(--input-bg) !important;
    border-width: var(--input-border-width) !important;
    padding: var(--input-padding);
}

.uk-navbar-container {
    background: var(--nav-bg) !important;
    border-bottom: 1px solid var(--border-color);
    transition: background var(--animation-speed) ease-in-out;
    min-height: var(--nav-height);
}

a,
.uk-link {
    transition: color var(--animation-speed) ease-in-out;
}

.uk-navbar-container {
    background: var(--nav-bg) !important;
    border-bottom: 1px solid var(--border-color);
}

.uk-text-muted,
.uk-text-meta {
    color: var(--text-muted) !important;
}

/* Glassmorphism utility */
.glass {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .glass {
    background: rgba(31, 41, 55, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] body {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
}

html[data-theme="dark"] .uk-section-default,
html[data-theme="dark"] .uk-section-muted {
    background-color: var(--bg-main) !important;
}

html[data-theme="dark"] .uk-card-default,
html[data-theme="dark"] .uk-card-muted {
    background-color: var(--card-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

/* UIkit Text Overrides for Dark Mode */
html[data-theme="dark"] h1,
html[data-theme="dark"] .uk-h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] .uk-h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .uk-h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .uk-h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] .uk-h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .uk-h6,
html[data-theme="dark"] .uk-text-lead,
html[data-theme="dark"] .uk-heading-medium,
html[data-theme="dark"] .uk-heading-small,
html[data-theme="dark"] .uk-form-label {
    color: var(--text-main) !important;
}

html[data-theme="dark"] .uk-text-muted,
html[data-theme="dark"] .uk-text-meta {
    color: #9ca3af !important;
}

/* Navbar Dark Mode */
html[data-theme="dark"] .uk-navbar-container:not(.uk-navbar-transparent) {
    background-color: #1a1e26 !important;
}

html[data-theme="dark"] .uk-navbar-nav>li>a,
html[data-theme="dark"] .uk-navbar-item {
    color: #e5e7eb !important;
}


html[data-theme="dark"] .tm-position-header {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .uk-navbar-dropdown {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color);
}

html[data-theme="dark"] .uk-dropdown-nav>li>a {
    color: #d1d5db !important;
}

/* Forms Dark Mode */
html[data-theme="dark"] .uk-input,
html[data-theme="dark"] .uk-select,
html[data-theme="dark"] .uk-textarea {
    background: #374151 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}

html[data-theme="dark"] .uk-input:focus,
html[data-theme="dark"] .uk-select:focus,
html[data-theme="dark"] .uk-textarea:focus {
    border-color: var(--primary) !important;
}