/* WebLegal Document Wrapper CSS — Shared across all generated documents */
/* Version: 1.0 — Any change here applies retroactively to ALL documents */

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100%; height: 100%; margin: 0; padding: 0;
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Wrapper */
#document-wrapper {
    width: 100%; max-width: 960px;
    margin: 0 auto; padding: 40px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    min-height: 100vh;
}

/* Typography */
h1, h2, h3, h4, h5, h6 { color: #000 !important; margin-top: 1.5em; margin-bottom: 0.5em; }
h1 { font-size: 28px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
p, li, td, div:not(.document-toolbar-vertical):not(.toolbar-button) { color: #333 !important; }
p { margin: 1em 0; }
ul, ol { margin: 1em 0; padding-left: 2em; }
li { margin-bottom: 0.5em; }
a { color: #4361EE; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Tables */
table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 14px; }
th, td { border: 1px solid #ddd; padding: 10px 12px; text-align: left; vertical-align: top; }
th { background-color: #f8f9fa; font-weight: bold; color: #000 !important; }
tr:nth-child(even) { background-color: #fafafa; }

/* Header */
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.logo { display: flex; align-items: center; }
.logo svg { margin-right: 15px; }
.logo-text { font-size: 24px; font-weight: bold; color: #000; }
.logo-img { max-height: 48px; max-width: 240px; width: auto; height: auto; display: block; margin: 0 auto; }
.document-date { color: #777; font-size: 14px; }

/* Footer */
.document-footer { margin-top: 50px; padding-top: 20px; border-top: 1px solid #eee; color: #777; font-size: 14px; text-align: center; }

/* Toolbar */
.document-toolbar-vertical {
    position: fixed; bottom: 50px; right: 20px;
    background-color: #fff; border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    display: flex; flex-direction: column;
    overflow: visible; z-index: 1000; width: 180px;
}
.toolbar-button {
    display: flex; align-items: center;
    padding: 12px 16px; cursor: pointer;
    transition: all 0.3s ease; border: none; background: none;
    color: #4361EE; gap: 12px; font-size: 14px; font-weight: 500; width: 100%;
}
.toolbar-button:not(:last-child) { border-bottom: 1px solid #eee; }
.toolbar-button:hover { background-color: #f5f8ff; }
.toolbar-button svg { width: 16px; height: 16px; }
.toolbar-button.success { background-color: #4CAF50; color: white; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.toolbar-button.animated { animation: pulse 0.5s ease; }

/* Dropdown */
.dropdown { position: relative; width: 100%; }
.dropdown-arrow { width: 12px; height: 12px; margin-left: auto; }
.dropdown-content { display: none; position: absolute; right: 0; background-color: #fff; min-width: 180px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); border-radius: 8px; z-index: 1; overflow: visible; max-height: none; }
.dropdown-content.show { display: block; }
.dropdown-item { display: block; width: 100%; padding: 12px 16px; text-align: left; border: none; background: none; color: #4361ee; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; }

/* Credit link in footer */
.document-footer a { color: #10b981 !important; font-weight: 600; text-decoration: none; }
.document-footer a:hover { text-decoration: underline; }

/* Print */
@media print {
    body { background-color: #fff; }
    #document-wrapper { width: 100%; max-width: none; box-shadow: none; padding: 0; margin: 0; }
    .document-toolbar-vertical { display: none; }
}

/* RTL support */
[dir="rtl"] body { text-align: right; direction: rtl; }
[dir="rtl"] ul, [dir="rtl"] ol { padding-right: 2em; padding-left: 0; }
[dir="rtl"] .header { flex-direction: row-reverse; }
[dir="rtl"] .logo { flex-direction: row-reverse; }
[dir="rtl"] .logo svg, [dir="rtl"] .logo img { margin-right: 0; margin-left: 15px; }
[dir="rtl"] .document-toolbar-vertical { right: auto; left: 20px; }
[dir="rtl"] .dropdown-content { right: auto; left: 0; }
[dir="rtl"] .dropdown-arrow { margin-left: 0; margin-right: auto; }
[dir="rtl"] .dropdown-item { text-align: right; }
[dir="rtl"] .toolbar-button { flex-direction: row-reverse; }

/* ═══════════════════════════════════════
   DARK MODE — via ?theme=dark or OS preference
   ═══════════════════════════════════════ */

/* Forced dark mode via ?theme=dark (class added by wrapper.php) */
html.theme-dark,
.theme-dark body {
    background-color: #1a1a2e;
    color: #e0e0e0;
}
.theme-dark #document-wrapper {
    background-color: #16213e !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
.theme-dark h1, .theme-dark h2, .theme-dark h3,
.theme-dark h4, .theme-dark h5, .theme-dark h6 { color: #fff !important; }
.theme-dark h1 { border-bottom-color: #333 !important; }
.theme-dark p, .theme-dark li, .theme-dark td, .theme-dark span,
.theme-dark div:not(.document-toolbar-vertical):not(.toolbar-button) { color: #e0e0e0 !important; }
.theme-dark a { color: #6c8dff !important; }
.theme-dark .header { border-bottom-color: #333 !important; }
.theme-dark .logo-text { color: #fff !important; }
.theme-dark .document-date { color: #999 !important; }
.theme-dark .document-footer { border-top-color: #333 !important; color: #999 !important; }
.theme-dark .document-toolbar-vertical { background-color: #1e293b !important; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.theme-dark .toolbar-button { color: #6c8dff !important; }
.theme-dark .toolbar-button:not(:last-child) { border-bottom-color: #333 !important; }
.theme-dark .toolbar-button:hover { background-color: #253557 !important; }
.theme-dark table { border-color: #333; }
.theme-dark th { background-color: #1e293b !important; color: #e0e0e0 !important; border-color: #333 !important; }
.theme-dark td { border-color: #333 !important; }
.theme-dark tr:nth-child(even) { background-color: #1a1a2e !important; }
.theme-dark tr:nth-child(odd) { background-color: transparent !important; }
.theme-dark .dropdown-content { background-color: #1e293b !important; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.theme-dark .dropdown-item { color: #6c8dff !important; }

/* Auto dark mode — follows OS preference when ?theme=auto or no param */
@media (prefers-color-scheme: dark) {
    html.theme-auto, .theme-auto body { background-color: #1a1a2e; color: #e0e0e0; }
    .theme-auto #document-wrapper { background-color: #16213e !important; box-shadow: 0 0 10px rgba(0,0,0,0.4); }
    .theme-auto h1, .theme-auto h2, .theme-auto h3,
    .theme-auto h4, .theme-auto h5, .theme-auto h6 { color: #fff !important; }
    .theme-auto h1 { border-bottom-color: #333 !important; }
    .theme-auto p, .theme-auto li, .theme-auto td, .theme-auto span,
    .theme-auto div:not(.document-toolbar-vertical):not(.toolbar-button) { color: #e0e0e0 !important; }
    .theme-auto a { color: #6c8dff !important; }
    .theme-auto .header { border-bottom-color: #333 !important; }
    .theme-auto .logo-text { color: #fff !important; }
    .theme-auto .document-date { color: #999 !important; }
    .theme-auto .document-footer { border-top-color: #333 !important; color: #999 !important; }
    .theme-auto .document-toolbar-vertical { background-color: #1e293b !important; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
    .theme-auto .toolbar-button { color: #6c8dff !important; }
    .theme-auto .toolbar-button:not(:last-child) { border-bottom-color: #333 !important; }
    .theme-auto .toolbar-button:hover { background-color: #253557 !important; }
    .theme-auto table { border-color: #333; }
    .theme-auto th { background-color: #1e293b !important; color: #e0e0e0 !important; border-color: #333 !important; }
    .theme-auto td { border-color: #333 !important; }
    .theme-auto tr:nth-child(even) { background-color: #1a1a2e !important; }
    .theme-auto tr:nth-child(odd) { background-color: transparent !important; }
    .theme-auto .dropdown-content { background-color: #1e293b !important; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
    .theme-auto .dropdown-item { color: #6c8dff !important; }
}