/* 
 * ==========================================
 *  MODRINTH-INSPIRED THEME (Dark & Modern)
 *  Developed by Antigravity
 * ==========================================
 */

:root {
    /* Brand Colors (Emerald Green to match QtempStudio branding) */
    /* --brand-color: #00AF5C; Modrinth Green reference */
    --brand-50: #ecfdf5;
    --brand-100: #d1fae5;
    --brand-200: #a7f3d0;
    --brand-300: #6ee7b7;
    --brand-400: #34d399;
    --brand-500: #10b981;
    --brand-600: #059669;
    --brand-700: #047857;
    --brand-800: #065f46;
    --brand-900: #064e3b;

    /* Base Colors (Modrinth Dark Mode Style) */
    --bg-base: #13141f;
    /* Deep dark blue-grey */
    --bg-surface: #1b1e2b;
    /* Slightly lighter card bg */
    --bg-surface-hover: #26293b;
    --bg-input: #0e1016;
    /* Very dark inputs */

    --text-main: #ffffff;
    --text-secondary: #a3a3a3;
    --text-muted: #6b7280;

    --border-color: #2e3245;

    /* Shapes */
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);

    --font-main: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Force Dark Mode across the board */
html,
body {
    font-family: var(--font-main) !important;
    background-color: var(--bg-base) !important;
    color: var(--text-main) !important;
    -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    background-color: var(--bg-base);
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-600);
}

/* ==================
   NAVBAR (Sticky & Modern)
   ================== */
.ui.secondary.menu {
    background-color: rgba(19, 20, 31, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    padding: 0.8rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.ui.secondary.menu .item {
    color: var(--text-secondary) !important;
    font-weight: 600;
    transition: all 0.2s;
    border-radius: var(--radius-sm);
}

.ui.secondary.menu .item:hover,
.ui.secondary.menu .item.active {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--brand-400) !important;
}

/* ==================
   UI COMPONENT OVERRIDES
   ================== */

/* Segments & Cards */
.ui.segment,
.ui.card {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-main) !important;
}

.ui.card>.content,
.ui.card>.extra {
    border-color: var(--border-color) !important;
}

/* Hover effects for interactive cards (like news/resources) */
.ui.link.card:hover,
.ui.card.link:hover,
a.card:hover {
    background-color: var(--bg-surface-hover) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md) !important;
}

/* Headers */
h1,
h2,
h3,
h4,
h5,
.ui.header {
    color: var(--text-main) !important;
    font-family: var(--font-main) !important;
}

.ui.header .sub.header {
    color: var(--text-secondary) !important;
}

/* Buttons */
.ui.button {
    background-color: var(--bg-surface-hover) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm) !important;
    font-weight: 700;
    transition: all 0.2s ease !important;
}

.ui.button:hover {
    background-color: #353a4f !important;
    transform: translateY(-1px);
}

.ui.primary.button,
.ui.green.button,
.ui.blue.button {
    background-color: var(--brand-600) !important;
    border-color: var(--brand-500) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.ui.primary.button:hover,
.ui.green.button:hover,
.ui.blue.button:hover {
    background-color: var(--brand-500) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
}

.ui.red.button {
    background-color: #b91c1c !important;
    border-color: #ef4444 !important;
}

/* Inputs & Forms */
.ui.form input,
.ui.form textarea,
.ui.selection.dropdown {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-main) !important;
}

.ui.form input:focus,
.ui.form textarea:focus,
.ui.selection.dropdown:focus {
    border-color: var(--brand-500) !important;
    background-color: var(--bg-input) !important;
}

.ui.selection.dropdown .menu {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
}

.ui.selection.dropdown .menu .item {
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

.ui.selection.dropdown .menu .item:hover {
    background-color: var(--bg-surface-hover) !important;
}

/* ==================
   USER SETTINGS / OPTIONS PAGES
   ================== */

/* Navigation Sidebar (Vertical Menu) */
.ui.vertical.menu {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
}

.ui.vertical.menu .item {
    color: var(--text-secondary) !important;
    border-radius: var(--radius-sm);
    margin: 4px;
}

.ui.vertical.menu .item.active {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: var(--brand-400) !important;
    font-weight: 700;
}

.ui.vertical.menu .item:hover:not(.active) {
    background-color: var(--bg-surface-hover) !important;
    color: var(--text-main) !important;
}

/* Labels & Badges */
.ui.label {
    background-color: var(--bg-surface-hover) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-sm) !important;
}

.ui.blue.label,
.badge-primary {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: var(--brand-300) !important;
}

/* Messages */
.ui.message {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    color: var(--text-main) !important;
}

.ui.success.message {
    background-color: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
    color: var(--brand-300) !important;
}

.ui.error.message {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

/* Tables */
.ui.table {
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}

.ui.table thead th {
    background-color: var(--bg-surface-hover) !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.ui.table tbody tr {
    border-bottom: 1px solid var(--border-color) !important;
}

/* Footer */
.ui.footer.segment {
    background-color: #0c0e12 !important;
    /* Even darker footer */
    border-top: 1px solid var(--border-color) !important;
    margin-top: 5rem !important;
    padding: 4rem 0 !important;
}

/* Modals */
.ui.modal {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color);
}

.ui.modal>.header,
.ui.modal>.actions {
    background-color: var(--bg-surface-hover) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

/* Mobile Fixes */
@media (max-width: 768px) {
    .ui.container {
        width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}