/* Define theme variables in root */
:root {
    /* Basic colors */
    --bg-color: white;
    --text-color: black;
    --link-color: #2196F3;
    --border-color: black;
    --footer-border: #e9ecef;
    --input-bg: white;
    --button-bg: white;
    --button-color: inherit;

    /* Element-specific colors */
    --editable-border: #000;
    --icon-filter: none;
    --favicon-filter: none;
    --modal-bg: white;

    /* Range input specific */
    --range-track-color: black;
    --range-thumb-color: #0066ff;
    --range-disabled-thumb: #cccccc;

    /* Dimensions */
    --toolbar-height: 60px;
}

/* Dark mode variables */
body.dark-mode {
    --bg-color: black;
    --text-color: white;
    --link-color: #8ab4f8;
    --border-color: white;
    --footer-border: white;
    --footer-bg: #111111;
    --input-bg: #222;
    --button-bg: black;
    --button-hover-bg: #333;
    --button-color: white;
    --editable-border: white;
    --icon-filter: brightness(10);
    --modal-bg: black;
    --secondary-text-color: #aaa;

    /* Range input colors for dark mode */
    --range-track-color: white;
    --range-thumb-color: #0066ff;
    --range-disabled-thumb: #555555;
}

/* System preference dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: black;
        --text-color: white;
        --link-color: #8ab4f8;
        --border-color: white;
        --footer-border: white;
        --footer-bg: #111111;
        --input-bg: #222;
        --button-bg: #222;
        --button-hover-bg: #333;
        --button-color: white;
        --editable-border: white;
        --icon-filter: brightness(10);
        --modal-bg: black;
        --secondary-text-color: #aaa;

        /* Range input colors for dark mode */
        --range-track-color: white;
        --range-thumb-color: #0066ff;
        --range-disabled-thumb: #555555;
    }
}

/* Apply theme variables */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

[href] {
    color: var(--link-color);
    text-decoration: underline;
    cursor: pointer;
}

/* Page Styles */
.page {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    height: 100%;
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Header Styles */
.page-header {
    display: block;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-color);
}

.page-header h1, h2, h3 {
    margin-top: 0px;
    margin-bottom: 0px;
    color: var(--text-color);
}

.page-header table {
    width: 100% !important;
}

/* Content Styles */
.page-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 10px;
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Target the last child of .page-content */
.page-content > *:last-child {
    flex-grow: 1;
}

/* Footer Styles */
.page-footer {
    display: block;
    padding: 10px 0;
    border-top: 1px solid var(--footer-border);
    padding: 10px;
    background-color: var(--bg-color);
}

.tri-space {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tri-space > *:first-child {
    margin-right: auto;
}

.tri-space > *:last-child {
    margin-left: auto;
}

.tri-space > *:not(:first-child):not(:last-child) {
    margin: 0 auto;
}

[contenteditable="true"] {
    border: 1px dashed var(--editable-border);
    background-color: var(--bg-color);
    color: var(--text-color);
}

[contenteditable="true"]:focus {
    border: 1px solid var(--editable-border);
}

/* Target buttons with an href attribute */
button[href] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    background-color: var(--button-bg);
    color: var(--button-color);
}

/* prevents auto zoom on ios */
input {
    font-size: 16px;
}

/* Hover and focus states: Only change the cursor */
button[href]:hover,
button[href]:focus {
    cursor: pointer;
    text-decoration: none;
}

/* For all buttons */
button,
input[type="button"],
input[type="submit"] {
    background-color: var(--button-bg);
    color: var(--button-color);
    border-color: var(--border-color);
}

/* For all inputs */
input, select, textarea {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

img[src="./favicon.ico"] {
    height: 2ch;
    width: 2ch;
    position: relative;
    top: .5ch;
    margin-right: 1ch;
    margin-bottom: 1ch;
    float: left;
}

a[href][onclick^="copyElementToClipboard"] {
    text-decoration: none;
    color: var(--text-color);
}

a[href][onclick^="copyElementToClipboard"]:hover {
    cursor: copy;
}

/* Toolbar styles */
[src="#toolbar"] {
    background-color: var(--bg-color);
    border-color: var(--border-color);
}

/* Container styles */
#container, #content {
    background-color: var(--bg-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* Modal styles */
.modal-content {
    background-color: var(--modal-bg);
    color: var(--text-color);
}

/* Font Awesome icons */
.fa, .fas, .far, .fal, .fab,
.fa-solid, .fa-regular, .fa-light, .fa-thin, .fa-duotone, .fa-brands,
i[class*="fa-"] {
    color: var(--text-color);
    filter: var(--icon-filter);
}

/* Buttons with Font Awesome icons */
button:has(i[class*="fa"]),
button:has(.fa),
button:has(.fas),
button:has(.far),
button:has(.fal),
button:has(.fab),
button:has(.fa-solid),
button:has(.fa-regular),
button:has(.fa-light),
button:has(.fa-thin),
button:has(.fa-duotone),
button:has(.fa-brands) {
    background-color: var(--bg-color);
}

/* Iframe specific styles */
iframe {
    background-color: white !important; /* Force white background */
    color: black !important; /* Force black text */
    border: 1px solid var(--border-color); /* Use theme border color */
}

/* Ensure iframe content is visible in dark mode */
body.dark-mode iframe,
body.dark-mode iframe * {
    background-color: white !important;
    color: black !important;
    filter: none !important; /* Remove any filters */
    /* Exempt iframes from other dark mode styles */
}

/* Same for system preference dark mode */
@media (prefers-color-scheme: dark) {
    iframe,
    iframe * {
        background-color: white !important;
        color: black !important;
        filter: none !important;
    }
}