/* ============================================================
   PATADOCS — extra.css
   Components that the supplied design did not include (forms, alerts, tabs,
   admin layout, viewer controls...). Everything reuses the design's tokens:
   variables, Tahoma headings, Courier inputs, 2px borders, 4px radius,
   navy #000080 accents and the classic raised/inset button look.
   ============================================================ */

/* ---------- Links & buttons as anchors ---------- */
:where(.aspx-content) a:where(:not(.btn-classic):not(.cat-tile):not(.pill):not(.modal-btn)) { color: #000080; }
body.dark-theme :where(.aspx-content) a:where(:not(.btn-classic):not(.cat-tile):not(.pill):not(.modal-btn)) { color: #9fcdff; }
a.btn-classic, a.modal-btn { display: inline-block; text-decoration: none; text-align: center; }
.btn-classic.btn-sm { padding: 6px 14px; font-size: 0.85rem; }
.btn-classic.block { display: block; width: 100%; }
.btn-classic[disabled], .btn-classic.disabled, .modal-btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-classic.active-toggle { background: #ffff99; color: #000; border-color: #000080; }
a.pill { text-decoration: none; display: inline-block; }
a.cat-tile, a.feature-card { display: block; text-decoration: none; color: inherit; }
.toolbar-right a.theme-toggle { text-decoration: none; display: inline-block; line-height: 1.25; }
.brand-logo { height: 34px; width: auto; align-self: center; border-radius: 3px; }

/* ---------- Helpers referenced by the design's markup ---------- */
.text-center { text-align: center; } .text-right { text-align: right; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 18px; } .mb-4 { margin-bottom: 18px; } .p-3 { padding: 16px; }
.muted { color: var(--text-secondary); } .nowrap { white-space: nowrap; } .hidden { display: none !important; }
.mono { font-family: 'Courier New', monospace; } .small { font-size: 0.85rem; } .break { word-break: break-all; }
.flex { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .grow { flex: 1; }
.section-title { font-weight: bold; font-family: Tahoma, sans-serif; margin: 22px 0 10px; color: #000080; font-size: 1.2rem; }
body.dark-theme .section-title { color: #9fcdff; }
.spinner { display: inline-block; width: 1em; height: 1em; border: 3px solid #b0b0b0; border-top-color: #000080; border-radius: 50%; animation: pdspin .8s linear infinite; vertical-align: -2px; }
@keyframes pdspin { to { transform: rotate(360deg); } }

/* ---------- Footer links row (above the red footer bar) ---------- */
.footer-links { flex-shrink: 0; padding: 10px 16px; background: var(--bg-total); border-top: 2px solid var(--border); text-align: center; font-family: Tahoma, sans-serif; font-size: 0.9rem; line-height: 2; }
.footer-links a { color: #000080; font-weight: bold; text-decoration: none; margin: 0 8px; padding: 2px 4px; }
.footer-links a:hover { background: #ffff99; }
.footer-links .sep { color: var(--text-secondary); }
body.dark-theme .footer-links a { color: #9fcdff; } body.dark-theme .footer-links a:hover { background: #5a5a3a; }

/* ---------- Alerts (same family as the design's yellow "protected preview" note) ---------- */
.alert { padding: 12px 16px; border: 1px solid var(--border); border-radius: 4px; font-family: Tahoma, sans-serif; font-size: 1rem; margin: 0 0 14px; background: var(--result-bg); color: var(--text-primary); line-height: 1.5; }
.alert-info { background: #ffe; border: 1px dashed #cc0; color: #333; }
.alert-success { background: #e6f4e6; border: 1px solid #008000; color: #004000; }
.alert-error { background: #fde8e8; border: 1px solid #cc0000; color: #800000; }
.alert-warn { background: #fff3e0; border: 1px solid #e67e22; color: #7a3d00; }
body.dark-theme .alert-info { background: #4a4a30; color: #f0f0c0; }
body.dark-theme .alert-success { background: #1e3a1e; color: #b8ffb8; }
body.dark-theme .alert-error { background: #4a1e1e; color: #ffc0c0; }
body.dark-theme .alert-warn { background: #4a3a1e; color: #ffd9a0; }
.alert a { font-weight: bold; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 2px 8px; font-family: Tahoma, sans-serif; font-size: 0.72rem; font-weight: bold; text-transform: uppercase; letter-spacing: .04em; border: 1px solid; border-radius: 3px; white-space: nowrap; }
.b-green { background: #dff5df; color: #006000; border-color: #008000; }
.b-orange { background: #ffe9cf; color: #8a4600; border-color: #e67e22; }
.b-red { background: #fde0e0; color: #900000; border-color: #cc0000; }
.b-gray { background: #e4e4e4; color: #404040; border-color: #808080; }
.b-blue { background: #dfe6ff; color: #000080; border-color: #000080; }
body.dark-theme .b-green { background: #1e3a1e; color: #8dff8d; } body.dark-theme .b-orange { background: #4a3a1e; color: #ffcf8a; }
body.dark-theme .b-red { background: #4a1e1e; color: #ffa0a0; } body.dark-theme .b-gray { background: #3a3a3a; color: #ccc; }
body.dark-theme .b-blue { background: #1e2a5a; color: #9fc2ff; border-color: #9fcdff; }
.badge.attribution { background: #ffffcc; color: #000080; border-color: #000080; }

/* ---------- Form controls (design: inset box, Courier text, navy focus ring) ---------- */
.search-form { margin: 0; width: 100%; }
.pd-form input[type=text], .pd-form input[type=email], .pd-form input[type=tel], .pd-form input[type=number], .pd-form input[type=password],
.pd-form input[type=url], .pd-form input[type=search], .pd-form input[type=date], .pd-form select, .pd-form textarea,
.filters select, .filters input[type=number], .result-area select, .result-area textarea, .admin-bar input[type=text], .admin-bar select, .admin-bar input[type=search], .admin-bar input[type=date] {
    width: 100%; padding: 10px 14px; font-size: 1.05rem; background: var(--bg-input); color: var(--text-primary); border: none;
    box-shadow: inset 2px 2px 0 var(--shadow); font-family: 'Courier New', monospace; border-radius: 4px; text-align: left; min-width: 0;
}
.result-area select, .result-area textarea { width: 100%; }
.pd-form textarea, .result-area textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
.pd-form input:focus, .pd-form select:focus, .pd-form textarea:focus, .filters select:focus, .filters input:focus,
.result-area select:focus, .result-area textarea:focus, .admin-bar input:focus, .admin-bar select:focus { background: #f0f0ff; box-shadow: inset 2px 2px 0 #000080, 0 0 0 3px #000080; outline: none; }
body.dark-theme .pd-form input:focus, body.dark-theme .pd-form select:focus, body.dark-theme .pd-form textarea:focus, body.dark-theme .filters select:focus,
body.dark-theme .result-area select:focus, body.dark-theme .result-area textarea:focus, body.dark-theme .admin-bar input:focus { background: #666; }
body.dark-theme .result-area select, body.dark-theme .result-area textarea { background: #555; color: #e0e0e0; }
.pd-form input[type=file] { width: 100%; padding: 10px; background: var(--bg-input); color: var(--text-primary); box-shadow: inset 2px 2px 0 var(--shadow); border-radius: 4px; font-family: Tahoma, sans-serif; font-size: 0.95rem; }
.pd-form input[type=file]::file-selector-button { background: var(--btn-bg); color: var(--text-primary); font-family: Tahoma, sans-serif; font-weight: bold; padding: 8px 16px; margin-right: 12px; cursor: pointer; border: 2px solid #e0e0e0; border-right-color: var(--shadow); border-bottom-color: var(--shadow); border-radius: 4px; }
.frow { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.frow > label, .flabel { font-family: Tahoma, sans-serif; font-weight: bold; font-size: 0.85rem; color: #000080; text-transform: uppercase; letter-spacing: .04em; }
body.dark-theme .frow > label, body.dark-theme .flabel { color: #9fcdff; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.help { font-family: Tahoma, sans-serif; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4; }
.req { color: #cc0000; font-weight: bold; }
.chk { display: flex; gap: 10px; align-items: flex-start; font-family: Tahoma, sans-serif; font-size: 1rem; cursor: pointer; line-height: 1.45; }
.chk input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.chk-group { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* spam honeypot */
.result-area .result-row select, .result-area .result-row textarea { flex: 1; min-width: 200px; }

/* ---------- Tabs (classic property-sheet tabs) ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 3px solid #000080; }
.tab { padding: 10px 18px; font-family: Tahoma, sans-serif; font-weight: bold; font-size: 0.95rem; background: var(--btn-bg); color: var(--text-primary); border: 2px solid #e0e0e0; border-right-color: var(--shadow); border-bottom: none; border-radius: 4px 4px 0 0; cursor: pointer; }
.tab:hover { background: var(--btn-hover); }
.tab.active { background: #000080; color: #fff; border-color: #0000a0; }
.tab-pane { display: none; padding-top: 16px; } .tab-pane.active { display: block; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-family: Tahoma, sans-serif; font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 4px; line-height: 1.6; }
.breadcrumb .sep { margin: 0 7px; opacity: .7; }
.breadcrumb a { text-decoration: underline; text-underline-offset: 2px; } .breadcrumb a:hover { text-decoration-thickness: 2px; }

/* ---------- Tables ---------- */
.gv-wrap { background: var(--bg-list); padding: 4px; border: 2px solid var(--border); border-radius: 4px; overflow-x: auto; }
.empty-cell { text-align: center; padding: 28px !important; color: var(--text-secondary) !important; font-family: Tahoma, sans-serif; font-size: 1.1rem; }
.gv-table .doc-title a { color: inherit; text-decoration: none; } .gv-table .doc-title a:hover { text-decoration: underline; }
.gv-table td.actions, .gv-table td.nowrap { white-space: nowrap; }
.gv-table td .btn-classic + .btn-classic { margin-left: 4px; }
.gv-table input[type=checkbox] { width: 16px; height: 16px; }
.gv-table.kv td:first-child { font-family: Tahoma, sans-serif; font-weight: bold; width: 32%; background: var(--bg-total); color: var(--text-secondary); }
.gv-table.compact th, .gv-table.compact td { padding: 8px 10px; font-size: 0.92rem; }
.gv-table td .sub { display: block; font-size: 0.8rem; color: var(--text-secondary); font-family: Tahoma, sans-serif; font-weight: normal; }
.gv-table .num { text-align: right; }
.result-count { margin: 6px 2px 10px; font-family: Tahoma, sans-serif; font-size: 1.05rem; color: var(--text-secondary); }
.relaxed-note { color: #b9770e; font-weight: bold; }

/* ---------- Search filters ---------- */
.filters { margin: 0 0 14px; }
.filters-title { font-family: Tahoma, sans-serif; font-weight: bold; font-size: 0.95rem; color: #000080; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
body.dark-theme .filters-title { color: #9fcdff; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.filters select, .filters input[type=number] { font-size: 0.95rem; padding: 8px 10px; }
.range-row { display: flex; gap: 6px; }
.filter-actions { margin-top: 12px; text-align: right; }

/* ---------- Document page ---------- */
.doc-selected { padding: 16px; background: var(--bg-total); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 16px; }
.doc-selected .lbl, .action-label { font-weight: bold; font-family: Tahoma, sans-serif; font-size: 0.95rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.doc-selected .name { font-weight: bold; color: #005a00; font-size: 1.25rem; font-family: Tahoma, sans-serif; margin-bottom: 10px; word-break: break-word; line-height: 1.3; }
body.dark-theme .doc-selected .name { color: #5f5; }
.doc-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: Tahoma, sans-serif; font-size: 0.92rem; color: var(--text-secondary); margin-bottom: 12px; }
.price-row { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px dashed var(--shadow); }
.price-row .k { font-weight: bold; font-family: Tahoma, sans-serif; color: #000080; font-size: 1.05rem; }
.price-row .v { font-weight: bold; font-size: 2rem; color: #005a00; font-family: 'Courier New', monospace; }
body.dark-theme .price-row .k { color: #9fcdff; } body.dark-theme .price-row .v { color: #5f5; }
.action-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.action-row .btn-classic { flex: 1; min-width: 150px; text-align: center; }
.keys-hint { font-size: 0.85rem; color: var(--text-secondary); margin-top: 12px; text-align: right; font-family: Tahoma, sans-serif; }
.share-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.share-label { font-family: Tahoma, sans-serif; font-weight: bold; font-size: 0.85rem; color: var(--text-secondary); }
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.desc-text { font-family: Tahoma, sans-serif; font-size: 1.08rem; line-height: 1.75; color: var(--text-primary); max-width: 900px; }
.contrib-note { margin-top: 14px; padding: 10px 14px; background: var(--bg-total); border: 1px solid var(--border); border-radius: 4px; font-family: Tahoma, sans-serif; }

/* Preview viewer (real preview pages; watermark is also embedded in the images) */
.preview-container.has-img { padding: .75rem; min-height: 220px; }
.preview-container.has-img .preview-watermark { z-index: 2; font-size: 2.6rem; }
.preview-page.has-img { padding: 0; max-height: 72vh; overflow: auto; text-align: center; background: #fff; }
.preview-page.has-img img { display: block; margin: 0 auto; max-width: none; height: auto; user-select: none; -webkit-user-drag: none; }
.preview-container:fullscreen { background: #222; padding: 1rem; overflow: auto; }
.preview-container:fullscreen .preview-page.has-img { max-height: calc(100vh - 90px); }
.viewer-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 10px; font-family: Tahoma, sans-serif; }
.viewer-bar .count, .viewer-bar .zoomv { font-weight: bold; min-width: 78px; text-align: center; font-size: 0.95rem; color: var(--text-primary); }
.viewer-bar .btn-classic { padding: 6px 12px; font-size: 0.85rem; }
.preview-text { font-family: 'Courier New', monospace; }
.preview-text .row { margin-bottom: 10px; }

/* ---------- Home ---------- */
.how-num { width: 72px; height: 72px; background: linear-gradient(135deg, #000080, #1084d0); color: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: bold; margin: 0 auto 14px; }
.how-title { font-weight: bold; font-family: Tahoma, sans-serif; font-size: 1.2rem; color: #000080; }
.how-desc { font-size: 1rem; color: var(--text-secondary); margin-top: 6px; }
body.dark-theme .how-title { color: #9fcdff; }
.panel-tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.coll-price { font-family: 'Courier New', monospace; font-weight: bold; color: #005a00; margin-top: 8px; }
body.dark-theme .coll-price { color: #5f5; }
.pop-searches { margin-top: 16px; }

/* ---------- Admin layout ---------- */
.admin-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.admin-nav { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
.admin-nav .nav-group { padding: 8px 14px; font-family: Tahoma, sans-serif; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); background: var(--bg-total); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.admin-nav a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--suggestion-divider); font-family: Tahoma, sans-serif; font-weight: bold; font-size: 0.95rem; color: #000080; text-decoration: none; background: var(--suggestion-bg); }
.admin-nav a:hover { background: var(--suggestion-hover); }
.admin-nav a.active { background: #000080; color: #fff; }
.admin-nav .count { background: #cc0000; color: #fff; border-radius: 9px; padding: 0 7px; font-size: 0.75rem; line-height: 1.5; }
body.dark-theme .admin-nav a { color: #9fcdff; } body.dark-theme .admin-nav a.active { background: #1a1a5e; color: #fff; }
.admin-menu-toggle { display: none; width: 100%; margin-bottom: 12px; }
.admin-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.admin-bar form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1; margin: 0; }
.admin-bar input[type=text], .admin-bar input[type=search] { width: auto; min-width: 200px; flex: 1; font-size: 0.95rem; padding: 8px 12px; }
.admin-bar select { width: auto; font-size: 0.95rem; padding: 8px 10px; }
.bulk-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.bulk-bar select { width: auto; padding: 6px 10px; font-size: 0.9rem; }
.stat-box .stat-sub { font-size: 0.85rem; color: var(--text-secondary); font-family: Tahoma, sans-serif; }
.chart-box canvas { max-height: 230px; }
.result-area .result-row a { text-decoration: none; }
.result-area .result-row .when { margin-left: auto; font-size: 0.85rem; color: var(--text-secondary); font-family: Tahoma, sans-serif; white-space: nowrap; }
.tokenbox { font-family: 'Courier New', monospace; font-size: 0.85rem; word-break: break-all; }
.login-box { max-width: 460px; margin: 30px auto; }
.matrix td.center, .matrix th.center { text-align: center; }

/* Upload stepper (9 steps) */
.stepper { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.stepper button { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; background: var(--btn-bg); border: 2px solid #e0e0e0; border-right-color: var(--shadow); border-bottom-color: var(--shadow); border-radius: 4px; font-family: Tahoma, sans-serif; font-weight: bold; font-size: 0.85rem; color: var(--text-primary); cursor: pointer; }
.stepper .n { width: 26px; height: 26px; background: linear-gradient(135deg, #000080, #1084d0); color: #fff; border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.stepper button.active { background: #ffff99; border-color: #000080; color: #000; }
body.dark-theme .stepper button.active { background: #5a5a3a; color: #fff; }
.step-pane { display: none; } .step-pane.active { display: block; }
.step-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--border); flex-wrap: wrap; }
.step-title { font-family: Tahoma, sans-serif; font-weight: bold; font-size: 1.25rem; color: #000080; margin-bottom: 4px; }
body.dark-theme .step-title { color: #9fcdff; }
.seo-preview { background: #fff; color: #202124; border: 1px solid #ccc; border-radius: 4px; padding: 12px 14px; font-family: Arial, sans-serif; }
.seo-preview .t { color: #1a0dab; font-size: 1.15rem; } .seo-preview .u { color: #006621; font-size: .85rem; } .seo-preview .d { color: #545454; font-size: .9rem; }

/* Category tree */
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-left: 24px; border-left: 2px dotted var(--shadow); margin-left: 12px; }
.tree .node { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); background: var(--bg-row); margin: 4px 0; border-radius: 4px; font-family: Tahoma, sans-serif; flex-wrap: wrap; }
.tree .node:hover { background: #ffff99; } body.dark-theme .tree .node:hover { background: #5a5a3a; }
.tree .node .nm { font-weight: bold; color: #000080; } body.dark-theme .tree .node .nm { color: #9fcdff; }
.tree .node .meta { font-size: 0.8rem; color: var(--text-secondary); }

/* ---------- Responsive additions ---------- */
@media (max-width: 900px) {
    .admin-layout { grid-template-columns: 1fr; }
    .admin-nav { position: static; display: none; max-height: none; }
    .admin-nav.open { display: block; }
    .admin-menu-toggle { display: block; }
}
@media (max-width: 768px) {
    .filter-grid { grid-template-columns: 1fr 1fr; }
    .price-row .v { font-size: 1.6rem; }
    .footer-links { font-size: 0.8rem; }
    .action-row .btn-classic { min-width: 120px; }
    .preview-page.has-img { max-height: 60vh; }
    .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .filter-grid { grid-template-columns: 1fr; } }

/* h1/h2 used for SEO inside design blocks must not add browser-default margins */
h1.hero-title { margin: 0 0 8px; }
.doc-selected h1.name { margin: 0 0 10px; }

/* ---------- Ratings & verified-buyer reviews ---------- */
.stars { color: #e6a100; letter-spacing: 1px; font-size: 1.05rem; white-space: nowrap; }
.stars .off { color: #b0b0b0; }
.rating-line { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; font-family: Tahoma, sans-serif; color: var(--text-primary); text-decoration: none; }
.rating-line.big { font-size: 1.1rem; margin-bottom: 14px; }
.rating-line.big .stars { font-size: 1.4rem; }
.review-item { padding: 12px 0; border-top: 1px solid var(--border); }
.review-item .desc-text { margin-top: 6px; }
.review-form { background: var(--bg-list); border: 2px solid var(--border); border-radius: 4px; padding: 14px; margin-top: 12px; }
.star-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.star-opt { cursor: pointer; }
.star-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-opt span { display: inline-block; padding: 6px 10px; border: 2px solid var(--border); border-radius: 4px; background: var(--bg-input); color: #e6a100; font-size: 1.05rem; }
.star-opt input:checked + span { background: #ffff99; border-color: #000080; }
.star-opt input:focus-visible + span { outline: 3px solid #000080; }
body.dark-theme .star-opt input:checked + span { background: #5a5a3a; }

/* ---------- Text from inside the document (automation → text extraction) ---------- */
.doc-excerpt { margin: 0; padding: 12px 16px; border-left: 4px solid #000080; background: var(--bg-list); font-family: Georgia, 'Times New Roman', serif; line-height: 1.6; color: var(--text-primary); }
body.dark-theme .doc-excerpt { border-left-color: #9fcdff; }

/* ---------- Main navigation: always one row; what doesn't fit goes into "More ▾" (assets/js/app.js) ---------- */
.aspx-menu { min-width: 0; }                                   /* may shrink: the brand and the right-hand buttons never move */
.js .aspx-menu #mainNav { flex-wrap: nowrap; }
.nav-more { position: relative; }
.nav-more[hidden] { display: none; }
.nav-more-btn { display: block; padding: 20px 18px; background: transparent; border: 0; border-bottom: 3px solid transparent; color: #fff; font: bold 1rem Tahoma, 'MS Sans Serif', sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,0.4); cursor: pointer; white-space: nowrap; }
.nav-more-btn:hover, .nav-more-btn.active, .nav-more.open .nav-more-btn { background: rgba(255,255,255,0.1); border-bottom-color: #5fff5f; }
.nav-more-btn:focus-visible { outline: 3px solid #ffff66; outline-offset: -3px; }
.aspx-menu .nav-more-list { display: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch; position: absolute; right: 0; top: 100%; min-width: 230px; margin: 0; padding: 6px 0; list-style: none; background: linear-gradient(180deg, #0a2a4a, #061830); border: 2px solid #000040; border-top: 0; border-radius: 0 0 4px 4px; box-shadow: 0 8px 18px rgba(0,0,0,0.35); z-index: 1100; }
.aspx-menu .nav-more.open .nav-more-list { display: flex; }
.aspx-menu .nav-more-list a { text-align: left; padding: 12px 18px; border-bottom: 0; border-left: 4px solid transparent; }
.aspx-menu .nav-more-list a:hover, .aspx-menu .nav-more-list a.active { border-left-color: #5fff5f; background: rgba(255,255,255,0.1); }
.aspx-menu a:focus-visible { outline: 3px solid #ffff66; outline-offset: -3px; }
@media (max-width: 1280px) { .aspx-menu a, .nav-more-btn { padding-left: 13px; padding-right: 13px; } }
@media (max-width: 768px) { .nav-more { display: none !important; } }

/* ---------- Top bar (Admin → Top Bar); colours arrive as --tb-bg / --tb-fg / --tb-accent ---------- */
.pd-topbar { background: var(--tb-bg, #000040); color: var(--tb-fg, #fff); font-family: Tahoma, sans-serif; font-size: 0.85rem; line-height: 1.4; border-bottom: 1px solid rgba(0,0,0,0.35); }
.pd-topbar[hidden] { display: none; }
.pd-topbar a { color: inherit; text-decoration: none; }
.pd-topbar a:hover, .pd-topbar a:focus-visible { text-decoration: underline; }
.pd-topbar a:focus-visible, .pd-topbar button:focus-visible { outline: 2px solid var(--tb-accent, #ff6); outline-offset: 2px; }
.tb-inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 6px 16px; min-height: 36px; }
.tb-contacts, .tb-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; white-space: nowrap; }
.tb-contacts a, .tb-right a { display: inline-flex; align-items: center; gap: 5px; }
.tb-msgs { flex: 1; min-width: 0; text-align: center; }
.tb-msg { display: none; }
.tb-msg.is-on { display: block; animation: tbIn .45s ease; }
.tb-msg a { color: var(--tb-accent, #ff6); font-weight: bold; }
@keyframes tbIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tb-social { opacity: .9; } .tb-social:hover { opacity: 1; }
.tb-link { font-weight: bold; }
.tb-close { background: transparent; border: 0; color: inherit; font-size: 0.95rem; cursor: pointer; padding: 2px 4px; opacity: .8; flex-shrink: 0; line-height: 1; }
.tb-close:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tb-msg.is-on { animation: none; } }
@media (max-width: 900px) { .tb-contacts a[href^="mailto:"] { display: none; } .tb-link { display: none; } }
@media (max-width: 768px) {
    .tb-inner { gap: 10px; padding: 6px 10px; }
    .pd-topbar:not(.tb-mobile-contacts) .tb-contacts, .tb-right { display: none; }   /* phones: the announcement only */
    .tb-mobile-contacts .tb-contacts a:not([href^="tel:"]) { display: none; }
    .tb-msgs { text-align: left; }
}
.tb-preview-box { border: 2px dashed var(--border); border-radius: 4px; overflow: hidden; }

/* ---------- Buy buttons → Editoria Payment Hub widget (assets/js/app.js → buy / openWidget) ---------- */
.pay-msg { margin-top: 8px; flex-basis: 100%; }
.pay-msg:empty { display: none; }
.btn-classic[aria-busy="true"] { pointer-events: none; }

/* ---------- Ad spaces (includes/ads.php): clearly labelled, reserved height (no layout shift), never inside content ---------- */
.pd-ad { margin: 6px auto; width: 100%; max-width: 970px; text-align: center; }
.pd-ad-label { font: 0.7rem Tahoma, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 4px; }
.pd-ad-box { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pd-ad-box > ins { width: 100%; }
.pd-ad-preview { width: 100%; align-self: stretch; display: flex; align-items: center; justify-content: center; border: 2px dashed #b35400; border-radius: 4px; color: var(--text-secondary); font: 0.85rem Tahoma, sans-serif; padding: 10px; }
@media (max-width: 768px) { .pd-ad-desktop { display: none; } }
@media (min-width: 769px) { .pd-ad-mobile { display: none; } }
@media print { .pd-ad { display: none; } }

/* ---------- Legal pages ---------- */
.legal-text { max-width: 860px; font-family: Tahoma, sans-serif; line-height: 1.75; color: var(--text-primary); }
.legal-text h2 { font-size: 1.15rem; margin: 22px 0 8px; color: #000080; }
body.dark-theme .legal-text h2 { color: #9fcdff; }
.legal-text p { margin: 0 0 10px; }
.legal-text ul { margin: 0 0 12px 22px; }
.legal-text li { margin-bottom: 6px; }
/* AdSense had nothing to show: collapse the space instead of leaving a labelled gap */
.pd-ad:has(ins[data-ad-status="unfilled"]) { display: none; }
.pd-ad.is-unfilled { display: none; }

/* ===== Blog ===== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.blog-main { min-width: 0; }
.blog-sidebar .panel { margin-bottom: 14px; }
@media (max-width: 900px) { .blog-layout { grid-template-columns: 1fr; } }
.blog-intro { font-size: 1.05rem; color: var(--text-secondary); margin: 0 0 14px; }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.blog-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .blog-grid, .blog-grid-3 { grid-template-columns: 1fr; } }
.blog-card { background: var(--bg-input); border: 2px solid var(--border); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 2px 2px 0 var(--shadow); }
.blog-card-big { grid-column: 1 / -1; }
@media (min-width: 761px) { .blog-card-big { flex-direction: row; } .blog-card-big .blog-card-img { flex: 0 0 52%; } .blog-card-big .blog-card-img img { height: 100%; aspect-ratio: auto; } }
.blog-card-img { display: block; background: var(--bg-list); }
.blog-card-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.blog-card-title { margin: 0; font-size: 1.12rem; line-height: 1.35; font-family: Tahoma, Verdana, sans-serif; }
.blog-card-big .blog-card-title { font-size: 1.45rem; }
.blog-card-title a { color: var(--text-primary); text-decoration: none; }
.blog-card-title a:hover, .blog-card-title a:focus { text-decoration: underline; }
.blog-card-excerpt { margin: 0; color: var(--text-secondary); font-size: .97rem; line-height: 1.5; flex: 1; }
.blog-meta { color: var(--text-secondary); font-size: .9rem; font-family: Tahoma, Verdana, sans-serif; }
.blog-meta a { color: inherit; }
.blog-cat-chip { align-self: flex-start; display: inline-block; background: #000080; color: #fff !important; font: bold .72rem Tahoma, Verdana, sans-serif; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 3px; text-decoration: none; }
.dark-theme .blog-cat-chip { background: #1a4a7a; }
.blog-article .panel-body { padding: 18px 22px 22px; }
@media (max-width: 600px) { .blog-article .panel-body { padding: 14px 12px; } }
.blog-head { margin-bottom: 14px; }
.blog-title { font-family: Tahoma, Verdana, sans-serif; font-size: 2rem; line-height: 1.25; margin: 10px 0 8px; color: var(--text-primary); }
@media (max-width: 600px) { .blog-title { font-size: 1.55rem; } }
.blog-cover { margin: 0 0 18px; }
.blog-cover img { display: block; width: 100%; height: auto; border-radius: 4px; border: 2px solid var(--border); }
.blog-toc { background: var(--bg-list); border: 2px solid var(--border); border-radius: 4px; padding: 10px 14px; margin: 0 0 20px; font-family: Tahoma, Verdana, sans-serif; }
.blog-toc summary { font-weight: bold; cursor: pointer; }
.blog-toc ol { margin: 8px 0 0; padding-left: 1.4em; }
.blog-toc li { margin: 3px 0; }
.blog-toc li.lvl-3 { margin-left: 1.2em; list-style-type: circle; }
.blog-toc a { color: var(--text-primary); }
.blog-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-tag { display: inline-block; border: 1px solid var(--border); background: var(--bg-list); color: var(--text-primary); padding: 3px 9px; border-radius: 12px; font: .85rem Tahoma, Verdana, sans-serif; text-decoration: none; }
.blog-tag:hover, .blog-tag:focus { background: var(--suggestion-hover); }
.blog-author-box { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 14px; border: 2px solid var(--border); border-radius: 4px; background: var(--bg-list); }
.blog-author-box p { margin: 6px 0 0; }
.blog-author-name { font-weight: bold; font-family: Tahoma, Verdana, sans-serif; }
.blog-avatar { flex: 0 0 56px; height: 56px; border-radius: 50%; background: var(--header-bg); color: #fff; display: flex; align-items: center; justify-content: center; font: bold 1.5rem Tahoma, Verdana, sans-serif; }
.blog-doc-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 1em 0; border: 2px solid var(--border); border-left: 6px solid #008000; border-radius: 4px; background: var(--bg-input); font-family: Tahoma, Verdana, sans-serif; font-size: 1rem; line-height: 1.4; }
.blog-doc-icon { font-size: 1.8rem; }
.blog-doc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.blog-doc-title { font-weight: bold; color: var(--text-primary) !important; }
.blog-doc-meta { font-size: .88rem; color: var(--text-secondary); }
.blog-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 14px; }
.blog-prevnext a { display: block; border: 2px solid var(--border); background: var(--bg-input); padding: 10px 12px; border-radius: 4px; color: var(--text-primary); text-decoration: none; font-family: Tahoma, Verdana, sans-serif; }
.blog-prevnext a span { display: block; font-size: .8rem; color: var(--text-secondary); text-transform: uppercase; }
.blog-prevnext .next { text-align: right; }
@media (max-width: 600px) { .blog-prevnext { grid-template-columns: 1fr; } }
.blog-side-list { margin: 0; padding-left: 1.2em; line-height: 1.7; }
.blog-side-list a { color: var(--text-primary); }
.blog-search { display: flex; gap: 6px; }
.blog-search input { flex: 1; min-width: 0; }
.blog-comment { border-top: 1px solid var(--border); padding: 10px 0; }
.blog-comment.is-staff > .blog-comment-body { border-left: 3px solid #000080; padding-left: 8px; }
.blog-comment-body { margin-top: 4px; white-space: normal; overflow-wrap: break-word; }
.blog-replies { margin-left: 26px; }
.blog-reply-btn { margin-top: 6px; }
@media print { .blog-sidebar, .blog-prevnext, #comments, .share-row { display: none !important; } .blog-layout { display: block; } }

/* ===== Blog admin (editor, SEO box, media library) ===== */
.post-edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 14px; align-items: start; }
.post-edit-main { min-width: 0; }
.post-edit-side .panel { margin-bottom: 12px; }
@media (max-width: 1100px) { .post-edit-grid { grid-template-columns: 1fr; } }
.post-title-input { width: 100%; font: bold 1.5rem Tahoma, Verdana, sans-serif; padding: 8px 10px; }
.post-permalink { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 8px 0 12px; font-size: .9rem; }
.post-permalink input { flex: 1; min-width: 160px; max-width: 420px; padding: 3px 6px; }
.post-content-area { width: 100%; min-height: 520px; font-family: Consolas, monospace; }
.post-editor-status { min-height: 1.2em; margin-top: 6px; }
.post-side-row { margin: 0 0 8px; }
.post-publish-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.post-inline-add { display: flex; gap: 6px; margin-top: 8px; }
.post-inline-add input { flex: 1; min-width: 0; }
.post-cover-preview img { display: block; width: 100%; height: auto; border: 2px solid var(--border); border-radius: 4px; }
.post-revs { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
.post-revs li { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px dotted var(--border); font-size: .88rem; }
.seo-score-pill { display: inline-block; min-width: 38px; text-align: center; padding: 2px 8px; border-radius: 10px; font: bold .8rem Tahoma, Verdana, sans-serif; color: #fff; background: #777; margin-left: 6px; }
.seo-score-pill.good { background: #0a7a2f; } .seo-score-pill.ok { background: #a56200; } .seo-score-pill.bad { background: #b3261e; }
.seo-checks { list-style: none; margin: 0; padding: 0; }
.seo-checks li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px dotted var(--border); font-size: .93rem; }
.seo-checks .dot { flex: 0 0 11px; height: 11px; border-radius: 50%; background: #777; transform: translateY(1px); }
.seo-checks .good .dot { background: #0a7a2f; } .seo-checks .ok .dot { background: #e08a00; } .seo-checks .bad .dot { background: #d93025; }
.seo-advanced { margin-top: 12px; } .seo-advanced summary { cursor: pointer; font-weight: bold; }
.serp { background: #fff; color: #202124; border: 1px solid #dadce0; border-radius: 8px; padding: 12px 14px; max-width: 620px; font-family: Arial, sans-serif; }
.serp-site { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.serp-favicon { width: 26px; height: 26px; border-radius: 50%; background: #f1f3f4 url("../images/favicon.svg") center / 16px no-repeat; border: 1px solid #ecedef; }
.serp-name { display: block; color: #202124; } .serp-url { display: block; color: #4d5156; font-size: 12px; }
.serp-title { color: #1a0dab; font-size: 20px; line-height: 1.3; margin: 6px 0 3px; }
.serp-desc { color: #4d5156; font-size: 14px; line-height: 1.58; } .serp-date { color: #70757a; }
.media-modal { max-width: 920px; width: calc(100% - 24px); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; max-height: 60vh; overflow: auto; }
.media-grid-admin { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); max-height: none; }
.media-item { display: flex; flex-direction: column; gap: 4px; border: 2px solid var(--border); border-radius: 4px; background: var(--bg-input); padding: 4px; text-align: left; font: inherit; color: var(--text-primary); cursor: pointer; }
button.media-item:hover, button.media-item:focus { border-color: #000080; outline: 2px solid #000080; }
.media-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-list); display: block; }
.media-item span { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-item .media-alt { width: 100%; font-size: .85rem; }
.row-actions { display: block; font-size: .82rem; margin-top: 3px; }
.linkish { background: none; border: 0; padding: 0; color: #0645ad; text-decoration: underline; cursor: pointer; font: inherit; }
.linkish.danger { color: #b3261e; }
.dark-theme .linkish { color: #8ab4f8; } .dark-theme .linkish.danger { color: #ff8a80; }
.tox-tinymce { border-radius: 4px !important; }
/* Blog — dark theme contrast (site-wide dark link colour is too light-blue on the card/article backgrounds) */
.blog-layout .panel-body, #page-home .blog-card { color: var(--text-primary); }
.dark-theme .blog-card-title a, .dark-theme .blog-toc a, .dark-theme .blog-side-list a, .dark-theme .blog-prevnext a, .dark-theme .blog-doc-title, .dark-theme .blog-meta a, .dark-theme .blog-author-name a { color: #fff !important; }
.blog-sidebar p { margin: 0 0 10px; }