/* Light mode background */
body {
    background: #f5f5f7 !important;
}

/* Dark mode (scoped). No impact unless body[data-theme="dark"] is set. */

body[data-theme="dark"] {
    background: #0f1115 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Common segments/cards */
body[data-theme="dark"] .ui.segment,
body[data-theme="dark"] .ui.card,
body[data-theme="dark"] .ui.table {
    background: #151922 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Headers (fixes 'Worklogs for each level:' etc.) */
body[data-theme="dark"] .ui.header,
body[data-theme="dark"] .ui.header .sub.header {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Table header + stripes */
body[data-theme="dark"] .ui.table thead th {
    background: #111520 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}
body[data-theme="dark"] .ui.striped.table > tbody > tr:nth-child(2n) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Inputs */
body[data-theme="dark"] .ui.input > input,
body[data-theme="dark"] .ui.form input,
body[data-theme="dark"] .ui.form textarea,
body[data-theme="dark"] .ui.form select {
    background: #0f1115 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

/* Dropdown control (the closed "selection" box) */
body[data-theme="dark"] .ui.dropdown,
body[data-theme="dark"] .ui.selection.dropdown {
    background: #0f1115 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}
body[data-theme="dark"] .ui.selection.dropdown > .text,
body[data-theme="dark"] .ui.dropdown > .text,
body[data-theme="dark"] .ui.selection.dropdown > .default.text {
    color: rgba(255, 255, 255, 0.85) !important;
}
body[data-theme="dark"] .ui.dropdown > .dropdown.icon {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Dropdown menu */
body[data-theme="dark"] .ui.dropdown .menu {
    background: #151922 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
body[data-theme="dark"] .ui.dropdown .menu > .item {
    color: rgba(255, 255, 255, 0.9) !important;
}
body[data-theme="dark"] .ui.dropdown .menu > .item:hover,
body[data-theme="dark"] .ui.dropdown .menu > .selected.item {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Buttons (covers "unselected" level buttons) */
body[data-theme="dark"] .ui.button,
body[data-theme="dark"] .ui.buttons .button {
    background: #1b2130 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset !important;
}
body[data-theme="dark"] .ui.button:hover,
body[data-theme="dark"] .ui.buttons .button:hover {
    background: #222a3b !important;
}
body[data-theme="dark"] .ui.active.button,
body[data-theme="dark"] .ui.buttons .active.button {
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Basic buttons: keep readable */
body[data-theme="dark"] .ui.basic.button {
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
}

/* Popups (ui popup + tooltip popups) */
body[data-theme="dark"] .ui.popup {
    background: #151922 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
body[data-theme="dark"] .ui.popup:before {
    background: #151922 !important;
    box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.12) !important;
}
body[data-theme="dark"] [data-tooltip]:after {
    background: #151922 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
body[data-theme="dark"] [data-tooltip]:before {
    background: #151922 !important;
    box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.12) !important;
}

/* Modals */
body[data-theme="dark"] .ui.modal {
    background: #151922 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}
body[data-theme="dark"] .ui.modal > .header,
body[data-theme="dark"] .ui.modal > .content,
body[data-theme="dark"] .ui.modal > .actions {
    background: #151922 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Form labels (Start date / End date) */
body[data-theme="dark"] .ui.form .field > label,
body[data-theme="dark"] .ui.form .fields .field > label {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Modals: ensure footer/actions area is dark */
body[data-theme="dark"] .ui.modal > .actions {
    background: #151922 !important;
    border-top-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Modal footer buttons (some Fomantic button variants override colors) */
body[data-theme="dark"] .ui.modal > .actions .ui.button,
body[data-theme="dark"] .ui.modal > .actions .ui.buttons .button {
    background: #1b2130 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset !important;
}

/* Links */
body[data-theme="dark"] a {
    color: #8ab4f8 !important;
}

/* Table footer (tfoot) in dark mode */
body[data-theme="dark"] .ui.table tfoot th,
body[data-theme="dark"] .ui.table tfoot td {
    background: #111520 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}

/* Checkbox label text (Detailed view / Owner view) */
body[data-theme="dark"] .ui.checkbox label {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Fomantic sometimes dims labels when disabled */
body[data-theme="dark"] .ui.disabled.checkbox label {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* vis-timeline dark mode */
body[data-theme="dark"] .vis-timeline {
    background: #151922 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
body[data-theme="dark"] .vis-time-axis .vis-text {
    color: rgba(255, 255, 255, 0.8) !important;
}
body[data-theme="dark"] .vis-time-axis .vis-grid.vis-odd {
    background: rgba(255, 255, 255, 0.03) !important;
}
body[data-theme="dark"] .vis-time-axis .vis-grid.vis-even {
    background: transparent !important;
}
body[data-theme="dark"] .vis-panel.vis-bottom,
body[data-theme="dark"] .vis-panel.vis-top,
body[data-theme="dark"] .vis-panel.vis-left,
body[data-theme="dark"] .vis-panel.vis-right {
    border-color: rgba(255, 255, 255, 0.12) !important;
}
body[data-theme="dark"] .vis-labelset .vis-label {
    color: rgba(255, 255, 255, 0.85) !important;
    background: #151922 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
body[data-theme="dark"] .vis-foreground .vis-group {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
body[data-theme="dark"] .vis-current-time {
    background-color: #ff8800 !important;
}