/* Theme variables and base styles */

:root {
    /* Light theme variables */
    --primary-color: #0066cc;
    --primary-hover: #0052a3;
    --primary-rgb: 0, 102, 204;
    --text-color: #333;
    --text-muted: #666;
    --accent-color: #3498db;
    --accent-hover-color: #2980b9;
    --border-color: #e0e0e0;
    --hover-bg: #f8f9fa;
    --sidebar-bg: #f5f5f5;
    --breadcrumb-color: #666;
    --sidebar-width: 280px;
    --bg-color: #ffffff;
    --blockquote-bg: #f8f9fa;
    --code-bg: #f8f9fa;
    --theme-toggle-bg: #e0e0e0;
    --theme-toggle-color: #333;
    --danger-color: #dc3545;
    --danger-bg: #f8d7da;
    --success-color: #28a745;
    --success-bg: #d4edda;
    --warning-color: #ffc107;
    --warning-bg: #fff3cd;
    --content-max-width: 900px;
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] {
    /* Dark theme variables */
    --primary-color: #66b3ff;
    --primary-hover: #4d99e6;
    --primary-rgb: 102, 179, 255;
    --text-color: #e0e0e0;
    --text-muted: #999;
    --accent-color: #5dade2;
    --accent-hover-color: #3498db;
    --border-color: #404040;
    --hover-bg: #2a2a2a;
    --sidebar-bg: #1a1a1a;
    --breadcrumb-color: #999;
    --bg-color: #121212;
    --blockquote-bg: #2a2a2a;
    --code-bg: #2a2a2a;
    --theme-toggle-bg: #404040;
    --theme-toggle-color: #e0e0e0;
    --danger-color: #ff6b6b;
    --danger-bg: #2c1215;
    --success-color: #4caf50;
    --success-bg: #1b2e1f;
    --warning-color: #ffb74d;
    --warning-bg: #2e2416;
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}

/* ---------- Base styles ---------- */
/* custom scrollbars */
::-webkit-scrollbar-track,
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--theme-toggle-bg);
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    display: flex;
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--bg-color);
    min-height: 100vh;
    width: 100%;
    position: relative;
}

/* Word breaking for content */
.markdown-content *,
main *,
table *,
pre,
code,
kbd,
.content-wrapper *,
h1, h2, h3, h4, p, .markdown-content ul li, .markdown-content ol li, td {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Force break for extremely long strings */
.markdown-content code,
.markdown-content pre,
.markdown-content .path,
.markdown-content .filepath,
td {
    word-break: break-all;
}

/* Bidirectional text support */
h1, h2, h3, h4, h5, h6,
p, th, td, div, input {
    unicode-bidi: plaintext;
}

input:-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder {
    unicode-bidi: plaintext;
    text-align: start;
}

/* Enhanced bidirectional support for markdown content */
.markdown-content {
    direction: auto;
}

.markdown-content * {
    text-align: start;
}

/* Bidirectional for code and pre */
pre, code {
    direction: auto;
    text-align: start;
    white-space: pre-wrap;
    unicode-bidi: plaintext;
}

/* Special handling for pre > code structure */
pre > code {
    display: block;
}

/* Apply transitions for smoother theme changes */
*:not(.hamburger-icon):not(.hamburger-icon:before):not(.hamburger-icon:after) {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ---------- Password warning banner ---------- */
.password-warning-banner {
    background-color: var(--danger-bg);
    color: var(--danger-color);
    text-align: center;
    padding: 10px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    pointer-events: none; /* Do not block interactions with UI beneath */
}

/* Global banner for documents */
.global-banner {
    width: 100%;
    margin-bottom: 0px;
    overflow: hidden;
}

.responsive-banner {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: cover;
    border-radius: 4px;
}

/* Add padding to body when banner is visible */
body.has-password-warning {
    padding-top: 40px;
}

/* Adjust sidebar when password warning is shown */
body.has-password-warning .sidebar,
body.has-password-warning .hamburger {
    height: calc(100vh - 40px);
    top: 40px;
}

.sidebar-footer-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.sidebar-footer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--theme-toggle-bg);
    color: var(--theme-toggle-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar-footer-btn:hover {
    background: var(--hover-bg);
    color: var(--primary-color);
}

.sidebar-footer-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}