/*
 * Alurco overrides on top of Metronic style.bundle.css.
 * Loaded by every layout after style.bundle.css. Keep this file small:
 * prefer Metronic utility classes in the markup.
 */

/* Auth branding panel: Metronic's own background image with a solid fallback color. */
.app-auth-aside {
    background-color: #0d2451;
}

/* Legal documents (Markdown from the API) inside the terms modal: readable headings and lists. */
.app-legal-content h1 { font-size: 1.5rem; margin: 0 0 1rem; }
.app-legal-content h2 { font-size: 1.25rem; margin: 1.5rem 0 .75rem; }
.app-legal-content h3 { font-size: 1.1rem; margin: 1.25rem 0 .5rem; }
.app-legal-content ul, .app-legal-content ol { padding-left: 1.5rem; }

/* Company switcher in the sidebar footer: hidden while the sidebar is minimized (shown again on hover). */
[data-kt-app-sidebar-minimize="on"]:not([data-kt-app-sidebar-hover="true"]) .app-company-switcher {
    display: none;
}

/* App header: Metronic's .app-header is transparent; the owner wants a white bar (2026-10-01). */
.app-header {
    background-color: #fff;
}

/* Line tabs rendered as <button> (see employee detail): no grey button background on inactive tabs. */
.nav-line-tabs .nav-link {
    background-color: transparent;
}

/*
 * Scrollable modals whose <form> wraps header + body + footer: Bootstrap only makes .modal-body scroll when it is
 * a direct child of .modal-content, so the form must pass the flex layout and the height limit on.
 */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-content > form > .modal-body {
    overflow-y: auto;
}

/* ---------- QR labels (label/view_print.php) ---------- */
.app-label-grid { display: flex; flex-wrap: wrap; gap: 2mm; padding: 5mm; }
.app-label { display: flex; align-items: center; gap: 2mm; border: 1px dashed #cfd3dc; padding: 2mm; overflow: hidden; break-inside: avoid; page-break-inside: avoid; }
.app-label-medium .app-label { width: 50mm; height: 30mm; }
.app-label-small .app-label { width: 38mm; height: 22mm; }
.app-label-qr { flex-shrink: 0; }
.app-label-medium .app-label-qr, .app-label-medium .app-label-qr img, .app-label-medium .app-label-qr canvas { width: 24mm; height: 24mm; }
.app-label-small .app-label-qr, .app-label-small .app-label-qr img, .app-label-small .app-label-qr canvas { width: 17mm; height: 17mm; }
.app-label-text { min-width: 0; line-height: 1.15; color: #000; }
.app-label-code { font-weight: 700; font-size: 9pt; word-break: break-all; }
.app-label-name { font-size: 7.5pt; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.app-label-small .app-label-code { font-size: 7.5pt; }
.app-label-small .app-label-name { font-size: 6pt; -webkit-line-clamp: 2; }

/* QR on detail pages (asset, storage contents) */
.app-qr-box img, .app-qr-box canvas { width: 120px; height: 120px; }

@media print {
    .app-label-toolbar { display: none !important; }
    .app-label-grid { padding: 0; }
    .app-label { border-color: #ddd; }
    @page { margin: 5mm; }
}

/* ---------- Printing a page part (stock document): only .app-print-area ---------- */
@media print {
    #kt_app_header, #kt_app_sidebar, #kt_app_toolbar, #kt_app_footer, .app-no-print { display: none !important; }
    .app-wrapper, .app-main, .app-content, .app-container { margin: 0 !important; padding: 0 !important; }
    .app-print-area { box-shadow: none !important; border: 0 !important; }
}

/* Asset history (asset/_timeline.php): Metronic's timeline-label fits a 50px label; ours shows date + time. */
.app-timeline .timeline-label { width: 125px; }
.app-timeline:before { left: 126px; }
.app-timeline .timeline-label:before { content: none; } /* the inner label shares the class: only the outer line */

/* Multi-line text typed by users (legal descriptions, notes): keep their line breaks */
.app-pre-line { white-space: pre-line; }

/* ---------- A4 print pages (procurement/view_print.php) ---------- */
.app-a4 { width: 210mm; min-height: 297mm; margin: 0 auto; padding: 15mm; color: #000; background: #fff; }
.app-a4-logo { max-height: 18mm; max-width: 40mm; }
.app-a4-vendor { max-width: 80mm; }
.app-a4-table th, .app-a4-table td { padding: 2mm 3mm !important; }
.app-a4-signature { min-width: 40mm; }
.app-a4-signature-space { height: 20mm; }
@media print {
    @page { size: A4 portrait; margin: 10mm; }
    .app-a4 { width: auto; min-height: 0; padding: 0; }
}

/* ↻ button of selects loaded from the API (js/core/select-refresh.js) */
@keyframes app-spin { to { transform: rotate(360deg); } }
.app-spin { display: inline-block; animation: app-spin 0.8s linear infinite; }

/* ---------- Organization chart (master/view_org_chart.php, js/master/org-chart.js) ----------
   Diagram: a top-down CSS tree; every <li> draws the line to its parent with ::before / ::after.
   List (.org-mode-list, small screens): the same markup as an indented list. */
.org-chart-viewport { overflow: auto; min-height: 420px; max-height: 75vh; cursor: grab; }
.org-chart-viewport.is-dragging { cursor: grabbing; user-select: none; }
.org-chart-canvas { display: inline-block; min-width: 100%; padding: 1.5rem; }
.org-tree, .org-tree ul { display: flex; justify-content: center; position: relative; margin: 0; padding: 20px 0 0; list-style: none; }
.org-tree { padding-top: 0; }
.org-tree li { display: flex; flex-direction: column; align-items: center; position: relative; padding: 20px 8px 0; }
.org-tree > li { padding-top: 0; }
.org-tree > li::before, .org-tree > li::after { display: none; } /* top-level units have no parent line */
.org-tree li::before, .org-tree li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 20px; border-top: 1px solid var(--bs-gray-400); }
.org-tree li::after { right: auto; left: 50%; border-left: 1px solid var(--bs-gray-400); }
.org-tree li:only-child::before, .org-tree li:only-child::after { display: none; }
.org-tree li:only-child { padding-top: 0; }
.org-tree li:first-child::before, .org-tree li:last-child::after { border: 0 none; }
.org-tree li:last-child::before { border-right: 1px solid var(--bs-gray-400); }
.org-tree ul ul::before, .org-tree li > ul::before { content: ''; position: absolute; top: 0; left: 50%; height: 20px; border-left: 1px solid var(--bs-gray-400); }
.org-tree li.org-collapsed > ul { display: none; }
.org-unit-card { width: 250px; cursor: default; }
.org-unit-card.is-focused { box-shadow: 0 0 0 3px var(--bs-primary); }
.org-issues { max-height: 75vh; overflow-y: auto; }

.org-mode-list { cursor: default; max-height: none; }
.org-mode-list .org-chart-canvas { display: block; zoom: 1 !important; padding: 1rem; }
.org-mode-list .org-tree, .org-mode-list .org-tree ul { display: block; padding: 0; }
.org-mode-list .org-tree ul { margin-left: 1rem; padding-left: 1rem; border-left: 1px dashed var(--bs-gray-400); }
.org-mode-list .org-tree li { display: block; padding: 0.75rem 0 0; }
.org-mode-list .org-tree li::before, .org-mode-list .org-tree li::after, .org-mode-list .org-tree ul::before { display: none; }
.org-mode-list .org-unit-card { width: 100%; max-width: 520px; }

/* ---------- Support (support/_conversation.php, platform/view_donation_summary.php) ---------- */
.app-bubble { max-width: 100%; }
@media (min-width: 992px) { .app-bubble { max-width: 75%; } }
.app-bars { height: 220px; }
.app-bar { width: 100%; min-height: 2px; border-radius: 0.475rem 0.475rem 0 0; }
.app-stars { display: inline-flex; flex-direction: row-reverse; gap: 0.25rem; }
.app-stars input { position: absolute; opacity: 0; width: 0; }
.app-stars label { cursor: pointer; font-size: 1.75rem; color: var(--bs-gray-300); }
.app-stars label:hover, .app-stars label:hover ~ label, .app-stars input:checked ~ label { color: var(--bs-warning); }
.app-stars input:focus-visible + label { outline: 2px solid var(--bs-primary); border-radius: 0.25rem; }

/* ---------- Guide (docs/*.php): Midtrans-like three columns, Markdown body, callouts ---------- */
.app-docs-topbar { z-index: 1030; }
@media (min-width: 992px) {
    .app-docs-menu { position: sticky; top: 73px; align-self: flex-start; max-height: calc(100vh - 73px); overflow-y: auto; }
}
.app-docs-link { color: var(--bs-gray-700); }
.app-docs-link:hover { color: var(--bs-primary); background: var(--bs-gray-100); }
.app-docs-link.active { color: var(--bs-primary); background: var(--bs-primary-light); font-weight: 600; }
.app-docs-search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; max-height: 60vh; overflow-y: auto; }
.app-docs-toc { position: sticky; top: 100px; }
.app-docs-toc-list a.active { color: var(--bs-primary) !important; font-weight: 600; }
.app-docs-article { min-width: 0; }
.app-guide-body h2, .app-guide-body h3 { scroll-margin-top: 90px; margin-top: 2rem; margin-bottom: 0.75rem; font-weight: 700; }
.app-guide-body h2 { font-size: 1.5rem; }
.app-guide-body h3 { font-size: 1.2rem; }
.app-guide-body p, .app-guide-body ul, .app-guide-body ol { margin-bottom: 1rem; line-height: 1.7; }
.app-guide-body table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
.app-guide-body th, .app-guide-body td { border: 1px solid var(--bs-gray-300); padding: 0.5rem 0.75rem; vertical-align: top; }
.app-guide-body th { background: var(--bs-gray-100); font-weight: 600; }
.app-guide-body pre { position: relative; background: var(--bs-gray-100); border-radius: 0.475rem; padding: 1rem; overflow-x: auto; }
.app-guide-body code { font-family: var(--bs-font-monospace); }
.app-guide-copy { position: absolute; top: 0.5rem; right: 0.5rem; }
.app-guide-body blockquote { margin: 0 0 1.25rem; padding: 0.85rem 1.1rem; border-left: 4px solid var(--bs-gray-400); border-radius: 0.475rem; background: var(--bs-gray-100); }
.app-guide-body blockquote p:last-child { margin-bottom: 0; }
.app-guide-body .app-callout-info { border-left-color: var(--bs-primary); background: var(--bs-primary-light); }
.app-guide-body .app-callout-warning { border-left-color: var(--bs-warning); background: var(--bs-warning-light); }
.app-guide-body .app-callout-note { border-left-color: var(--bs-gray-500); background: var(--bs-gray-100); }

/* Recruitment candidate board (recruitment/view_applications.php): an empty stage column still takes drops */
.app-board-column { min-height: 200px; }