/*
 * Application styles on top of Bootstrap 5.
 * Logical properties (inline-start / inline-end) are used throughout so the
 * same rules serve English (LTR) and Arabic (RTL) without overrides.
 */
:root {
    --app-sidebar-width: 264px;
    --app-sidebar-bg: #14342b;
    --app-sidebar-fg: #d7e6df;
    --app-sidebar-active: #2f7d5b;
    --app-brand: #1f6f4a;
    --bs-primary: #1f6f4a;
    --bs-primary-rgb: 31, 111, 74;
    --bs-link-color: #1a6142;
    --bs-link-color-rgb: 26, 97, 66;
    --bs-link-hover-color: #134a32;
    --bs-link-hover-color-rgb: 19, 74, 50;
}

.btn-primary {
    --bs-btn-bg: #1f6f4a; --bs-btn-border-color: #1f6f4a;
    --bs-btn-hover-bg: #195c3d; --bs-btn-hover-border-color: #175538;
    --bs-btn-active-bg: #175538; --bs-btn-active-border-color: #144c32;
    --bs-btn-disabled-bg: #1f6f4a; --bs-btn-disabled-border-color: #1f6f4a;
}
.btn-outline-primary {
    --bs-btn-color: #1f6f4a; --bs-btn-border-color: #1f6f4a;
    --bs-btn-hover-bg: #1f6f4a; --bs-btn-hover-border-color: #1f6f4a;
    --bs-btn-active-bg: #1f6f4a; --bs-btn-active-border-color: #1f6f4a;
}
.form-check-input:checked { background-color: #1f6f4a; border-color: #1f6f4a; }
.page-link { --bs-pagination-color: #1f6f4a; --bs-pagination-active-bg: #1f6f4a; --bs-pagination-active-border-color: #1f6f4a; --bs-pagination-hover-color: #134a32; }

.app-body { background: #f4f6f5; }
[lang="ar"] body, html[lang="ar"] { font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Noto Sans Arabic", Arial, sans-serif; }
.min-w-0 { min-width: 0; }

/* ---- shell ------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-content { padding: 1rem; flex: 1 1 auto; }
@media (min-width: 992px) { .app-content { padding: 1.5rem; } }

/* !important: Bootstrap makes .offcanvas-lg transparent on large screens. */
.app-sidebar { background-color: var(--app-sidebar-bg) !important; color: var(--app-sidebar-fg); --bs-offcanvas-width: var(--app-sidebar-width); --bs-offcanvas-bg: var(--app-sidebar-bg); --bs-offcanvas-color: var(--app-sidebar-fg); }
@media (min-width: 992px) {
    .app-sidebar { width: var(--app-sidebar-width); flex: 0 0 var(--app-sidebar-width); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
}
.app-brand { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem; font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.app-brand .bi { font-size: 1.3rem; color: #8fd3ae; }
.app-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-nav { padding: .5rem 0 2rem; overflow-y: auto; }
.app-nav-link { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .6rem 1.1rem; color: var(--app-sidebar-fg); text-decoration: none; background: none; border: 0; text-align: start; font-size: .95rem; border-inline-start: 3px solid transparent; }
.app-nav-link:hover, .app-nav-link:focus-visible { background: rgba(255, 255, 255, .07); color: #fff; }
.app-nav-link.active { background: rgba(47, 125, 91, .35); color: #fff; border-inline-start-color: #8fd3ae; }
.app-nav-link > .bi:first-child { width: 1.2rem; text-align: center; }
.app-nav-child { padding-inline-start: 3rem; font-size: .9rem; }
.app-nav-caret { margin-inline-start: auto; font-size: .75rem; transition: transform .15s; }
.app-nav-toggle:not(.collapsed) .app-nav-caret { transform: rotate(180deg); }

.app-topbar { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; background: #fff; border-bottom: 1px solid #e3e8e5; position: sticky; top: 0; z-index: 1020; }
.app-topbar .breadcrumb { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; font-size: .9rem; }
.app-banner { padding: .5rem 1rem; font-size: .9rem; font-weight: 500; }

/* ---- content ------------------------------------------------------------ */
.card { border-color: #e3e8e5; }
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #5c6b64; white-space: nowrap; background: #f8faf9; }
html[dir="rtl"] .table thead th { letter-spacing: 0; }
.stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.1rem; color: inherit; text-decoration: none; }
.stat-card { --tone: #1f6f4a; position: relative; overflow: hidden; border-block-start: 3px solid var(--tone); transition: transform .15s ease, box-shadow .15s ease; }
.stat-card .stat-icon { width: 3rem; height: 3rem; border-radius: .75rem; background: color-mix(in srgb, var(--tone) 14%, #fff); color: var(--tone); display: grid; place-items: center; font-size: 1.4rem; flex: 0 0 auto; }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.stat-card .stat-label { color: #5c6b64; font-size: .85rem; }
a.stat-card:hover { background: color-mix(in srgb, var(--tone) 5%, #fff); transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(20, 52, 43, .08); }
.stat-card-alert { box-shadow: inset 0 0 0 1px #f0b429; }
.stat-card-alert::after { content: ""; position: absolute; inset-block-start: .7rem; inset-inline-end: .7rem; width: .55rem; height: .55rem; border-radius: 50%; background: #e34948; }
@media (prefers-reduced-motion: reduce) { .stat-card { transition: none; } a.stat-card:hover { transform: none; } }

/* ---- dashboard banner and charts ------------------------------------------- */
.dash-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.25rem; padding: 1.6rem 1.75rem; border-radius: 1rem; color: #fff;
    background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .18) 0, transparent 40%), linear-gradient(120deg, #14342b 0%, #1f6f4a 38%, #1baf7a 68%, #2a78d6 100%); }
.dash-hero-date { font-size: .85rem; opacity: .85; }
.dash-hero-title { font-size: 1.6rem; font-weight: 600; margin: .15rem 0 .35rem; }
.dash-hero-org { font-size: .95rem; opacity: .92; }
.dash-hero-stats { display: flex; gap: .75rem; flex-wrap: wrap; }
.dash-hero-stats > div { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); border-radius: .75rem; padding: .6rem 1rem; font-size: .8rem; min-width: 9rem; }
.dash-hero-stats span { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.chart-card .card-body { padding: 1rem 1.1rem; }
.chart svg text { font-family: inherit; }
.chart-grid { stroke: #e7ece9; stroke-width: 1; }
.chart-axis { fill: #6b7a73; font-size: 11px; }
.chart-value { fill: #14342b; font-size: 12px; font-weight: 600; }
.chart-hit-area { fill: transparent; }
.chart-hit:hover .chart-hit-area { fill: rgba(20, 52, 43, .05); }
.chart-hit:hover > rect:not(.chart-hit-area), circle.chart-hit:hover { filter: brightness(1.08); }
.chart-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .6rem; font-size: .82rem; color: #3d4a44; }
.chart-legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: .2rem; margin-inline-end: .35rem; vertical-align: -.05rem; }
.chart-legend b { font-weight: 600; color: #14342b; margin-inline-start: .2rem; }
.chart-donut { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }
.chart-donut-ring { width: 170px; height: 170px; flex: 0 0 auto; }
.chart-donut-track { fill: none; stroke: #eef2f0; stroke-width: 24; }
.chart-donut-total { fill: #14342b; font-size: 22px; font-weight: 600; }
.chart-legend-list { flex-direction: column; margin-top: 0; }
.severity-critical .progress-bar { background: #c62828; }
.severity-high .progress-bar { background: #eb6834; }
.severity-medium .progress-bar { background: #eda100; }
.severity-low .progress-bar { background: #2a78d6; }
.module-badge { background: color-mix(in srgb, var(--tone) 12%, #fff); color: #14342b; border: 1px solid color-mix(in srgb, var(--tone) 35%, #fff); font-weight: 500; }
.movement-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-inline-end: .25rem; }

.tree-indent { display: inline-block; }
.location-tree .tree-row td:first-child { white-space: nowrap; }
.permission-group { border: 1px solid #e3e8e5; border-radius: .5rem; padding: .9rem 1rem; height: 100%; background: #fff; }
.audit-values { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; white-space: pre-wrap; word-break: break-word; direction: ltr; text-align: left; margin: 0; }
code, .font-monospace, .ltr { direction: ltr; unicode-bidi: embed; }

/* ---- guest pages -------------------------------------------------------- */
.guest-body { background: linear-gradient(160deg, #14342b 0%, #1f6f4a 100%); min-height: 100vh; }
.guest-wrap { max-width: 440px; margin: 0 auto; padding: 2rem 1rem; }
.guest-wrap.wide { max-width: 860px; }
.guest-logo { width: 4rem; height: 4rem; border-radius: 1rem; background: #e2f1e9; color: #1f6f4a; display: grid; place-items: center; font-size: 2rem; margin: 0 auto .75rem; }

/* Larger touch targets on handhelds and industrial terminals */
@media (max-width: 575.98px) {
    .btn { padding-block: .5rem; }
    .form-control, .form-select { padding-block: .55rem; font-size: 1rem; }
}

@media print {
    .app-sidebar, .app-topbar, .app-banner, .btn, .pagination { display: none !important; }
    .app-content { padding: 0; }
}

/* Language switch on the dark sign-in background */
.guest-wrap > .d-flex .btn-outline-secondary { --bs-btn-color: #e8f3ee; --bs-btn-border-color: rgba(255, 255, 255, .45); --bs-btn-hover-bg: rgba(255, 255, 255, .15); --bs-btn-hover-border-color: #fff; --bs-btn-hover-color: #fff; }
.guest-wrap > .d-flex .btn-secondary { --bs-btn-bg: #fff; --bs-btn-color: #14342b; --bs-btn-border-color: #fff; --bs-btn-hover-bg: #e8f3ee; --bs-btn-hover-color: #14342b; --bs-btn-hover-border-color: #e8f3ee; }

/* Brand colour for active list items (settings menu) */
.list-group { --bs-list-group-active-bg: #1f6f4a; --bs-list-group-active-border-color: #1f6f4a; }


/* ---- Phase 2: search, media, scan ------------------------------------------ */
.app-search { width: 16rem; }
.media-tile { border: 1px solid #e3e8e5; border-radius: .5rem; padding: .4rem; background: #fff; }
.media-thumb { display: grid; place-items: center; aspect-ratio: 4 / 3; background: #f4f6f5; border-radius: .35rem; overflow: hidden; margin-bottom: .35rem; font-size: 2.2rem; color: #b02a37; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }

.scan-screen { max-width: 760px; }
.scan-choice { align-items: center; gap: .75rem; padding: 2.2rem 1rem; font-size: 1.25rem; font-weight: 600; color: #14342b; text-align: center; transition: transform .1s, box-shadow .1s; }
.scan-choice .bi { font-size: 3.5rem; color: #1f6f4a; }
.scan-choice:hover, .scan-choice:focus-visible { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(20, 52, 43, .12); color: #14342b; }
.scan-actions .btn { min-height: 3.6rem; }
.scan-camera video { width: 100%; max-height: 50vh; border-radius: .5rem; background: #000; }