:root {
    --eievss-blue: #0f4260;
    --eievss-blue-dark: #0a2d42;
    --eievss-soft: #f4f8fb;
    --eievss-border: #d8e2ea;
    --paper-width: 1080px;
}
* { box-sizing: border-box; }
body {
    background: #f6f9fc;
    color: #1f2937;
    font-family: Arial, Tahoma, Helvetica, sans-serif;
    min-height: 100vh;
}
a { text-decoration: none; }
.nav-logo { width: 72px; max-height: 38px; object-fit: contain; }
.install-logo { width: min(360px, 80%); height: auto; }
.hero-card {
    background: linear-gradient(135deg, #ffffff, #eaf4fa);
    border: 1px solid var(--eievss-border);
    box-shadow: 0 10px 30px rgba(15,66,96,.08);
}
.hero-logo { width: min(420px, 90%); filter: drop-shadow(0 8px 16px rgba(0,0,0,.08)); }
.metric-card {
    background: #fff;
    border: 1px solid var(--eievss-border);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15,66,96,.06);
}
.metric-value { font-size: 2.3rem; font-weight: 800; color: var(--eievss-blue); line-height: 1; }
.metric-label { color: #64748b; margin-top: 8px; }
.template-card { transition: transform .15s ease, box-shadow .15s ease; }
.template-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(15,66,96,.12) !important; }
.btn-primary, .btn-success { box-shadow: 0 4px 12px rgba(15,66,96,.12); }
.app-shell { max-width: 1800px; }
.document-paper {
    width: min(var(--paper-width), 100%);
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--eievss-border);
    border-radius: 18px;
    padding: clamp(18px, 3vw, 42px);
    box-shadow: 0 10px 35px rgba(15,66,96,.10);
    overflow-wrap: anywhere;
}
.preview-paper { min-height: 70vh; }
.editor-paper {
    min-height: 980px;
    outline: none;
    line-height: 1.65;
}
.editor-paper:focus { box-shadow: 0 0 0 3px rgba(15,66,96,.16), 0 10px 35px rgba(15,66,96,.10); }
.editor-paper [contenteditable="false"] { user-select: none; }
.editor-side { top: 92px; }
.doc-brand, .export-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--eievss-blue);
    padding-bottom: 14px;
}
.doc-brand img { width: min(360px, 70%); height: auto; }
.export-header { justify-content: space-between; }
.export-header img { width: 240px; max-width: 45%; }
.doc-title-ar,
.doc-title-en {
    text-align: center;
    color: var(--eievss-blue);
    font-weight: 800;
    margin: 10px 0 8px;
}
.doc-title-ar { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.doc-title-en { font-size: clamp(1.15rem, 2.4vw, 1.55rem); color: #374151; }
.doc-section-title {
    color: var(--eievss-blue);
    font-weight: 800;
    margin-top: 28px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--eievss-soft);
    border-inline-start: 5px solid var(--eievss-blue);
    border-radius: 10px;
    font-size: 1.1rem;
}
.doc-list-item { margin: 4px 0; }
.doc-table-wrap { margin: 14px 0 22px; }
.doc-table {
    width: 100%;
    border-color: #8daabc;
    direction: rtl;
    font-size: .95rem;
}
.doc-table th,
.doc-table td {
    border: 1px solid #8daabc !important;
    padding: 9px 10px !important;
    vertical-align: top;
    min-width: 110px;
}
.doc-table th { background: #eaf2f8 !important; color: var(--eievss-blue); font-weight: 700; }
.doc-table td:nth-child(odd) { font-weight: 600; color: #243b53; }
.doc-table td.placeholder-cell,
.doc-table th.placeholder-cell {
    color: #7c8ca0;
    font-weight: 400;
    background: #fffdf5;
}
.editor-paper table td,
.editor-paper table th,
.editor-paper p,
.editor-paper h1,
.editor-paper h2,
.editor-paper h3 { outline: 1px solid transparent; }
.editor-paper table td:focus,
.editor-paper table th:focus,
.editor-paper p:focus,
.editor-paper h1:focus,
.editor-paper h2:focus,
.editor-paper h3:focus { outline: 2px solid rgba(15,66,96,.25); }
.export-body { background: #fff; }
.print-paper { width: 100%; border: none; box-shadow: none; border-radius: 0; }
.dropdown-menu { text-align: inherit; }
.table-responsive { scrollbar-width: thin; }
.form-label { font-weight: 600; color: #344054; }
.card { border-radius: 16px; }
.badge { white-space: normal; }
@media (max-width: 768px) {
    .document-paper { border-radius: 12px; padding: 14px; }
    .doc-table { font-size: .82rem; }
    .doc-table th, .doc-table td { padding: 7px !important; min-width: 130px; }
    .btn-group { display: flex; flex-wrap: wrap; }
}
@media print {
    @page { size: A4; margin: 12mm; }
    body { background: #fff !important; }
    nav, footer, .no-print, .editor-side, .btn, form.card, .hero-card, .metric-card { display: none !important; }
    .container-fluid, .app-shell { padding: 0 !important; max-width: none !important; width: 100% !important; }
    .document-paper {
        width: 100% !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .doc-brand { margin-bottom: 10px; }
    .doc-brand img { max-width: 280px; }
    .doc-section-title { break-after: avoid; page-break-after: avoid; }
    .doc-table { break-inside: avoid; page-break-inside: avoid; }
    .doc-table th, .doc-table td { font-size: 10.5pt; padding: 5px !important; }
    a[href]:after { content: ""; }
}