/* Wildlife Watch Sri Lanka — design tokens from the V1 specification §5.1 */
:root {
  --ww-forest: #173D32;
  --ww-forest-2: #1f5243;
  --ww-leaf: #397858;
  --ww-sage: #DCE8DC;
  --ww-ivory: #F4F0E6;
  --ww-amber: #A55D13;
  --ww-error: #9B1C1C;
  --ww-ink: #1d2521;
  --ww-muted: #55625b;
  --ww-card: #ffffff;
  --ww-line: #d9d4c7;
  --ww-radius: 10px;

  --bs-body-font-family: "Noto Sans", "Noto Sans Sinhala", "Noto Sans Tamil", system-ui, sans-serif;
  --bs-body-bg: var(--ww-ivory);
  --bs-body-color: var(--ww-ink);
  --bs-link-color-rgb: 57, 120, 88;
  --bs-link-hover-color-rgb: 23, 61, 50;
  --bs-border-radius: var(--ww-radius);
  --bs-secondary-color: var(--ww-muted);
}

body { background: var(--ww-ivory); line-height: 1.6; }
:lang(si) body, :lang(ta) body { line-height: 1.8; }

a { text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--ww-amber) !important; outline-offset: 2px; }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 2000; background: #fff; padding: .5rem 1rem; }
.skip-link:focus { left: 1rem; }

/* Header */
.ww-emergency { background: var(--ww-amber); color: #fff; font-size: .875rem; }
.ww-emergency a { color: #fff; font-weight: 600; }
.ww-nav { background: var(--ww-forest); }
.ww-nav .navbar-brand { font-weight: 700; letter-spacing: .01em; color: #fff; display: flex; align-items: center; gap: .5rem; }
.ww-nav .navbar-brand img { width: 32px; height: 32px; }
.ww-nav .nav-link { color: rgba(255,255,255,.85); white-space: nowrap; }
.ww-nav .btn { white-space: nowrap; }
@media (min-width: 1200px) {
  .ww-nav .navbar-brand { margin-right: .5rem; }
  .ww-nav .navbar-nav .nav-link { padding-left: .45rem; padding-right: .45rem; }
}
.ww-nav .nav-link:hover, .ww-nav .nav-link.active { color: #fff; }
.ww-nav .navbar-toggler { border-color: rgba(255,255,255,.4); }
.ww-nav .navbar-toggler-icon { filter: invert(1); }

.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-sm { min-height: 34px; }
.btn-primary { --bs-btn-bg: var(--ww-forest); --bs-btn-border-color: var(--ww-forest); --bs-btn-hover-bg: var(--ww-forest-2); --bs-btn-hover-border-color: var(--ww-forest-2); --bs-btn-active-bg: var(--ww-forest-2); }
.btn-report { background: var(--ww-amber); border-color: var(--ww-amber); color: #fff; font-weight: 600; }
.btn-report:hover { background: #8a4c0e; color: #fff; }
.btn-outline-primary { --bs-btn-color: var(--ww-forest); --bs-btn-border-color: var(--ww-forest); --bs-btn-hover-bg: var(--ww-forest); --bs-btn-hover-border-color: var(--ww-forest); }

/* Hero */
.ww-hero { background: linear-gradient(135deg, var(--ww-forest) 0%, #24584a 60%, var(--ww-leaf) 100%); color: #fff; position: relative; overflow: hidden; }
.ww-hero::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 420px; height: 420px; background: url('/images/leaf.svg') no-repeat center / contain; opacity: .12; pointer-events: none; }
.ww-hero h1 { font-weight: 700; }
.ww-hero .lead { color: rgba(255,255,255,.9); max-width: 40rem; }

/* Cards & panels */
.ww-card { background: var(--ww-card); border: 1px solid var(--ww-line); border-radius: var(--ww-radius); }
.ww-panel { background: var(--ww-sage); border-radius: var(--ww-radius); }
.ww-stat { font-size: 2rem; font-weight: 700; color: var(--ww-forest); line-height: 1.1; }
.ww-muted { color: var(--ww-muted); }
.case-card { transition: box-shadow .15s; height: 100%; }
.case-card:hover { box-shadow: 0 4px 18px rgba(23,61,50,.12); }
.case-card a.stretched-link { color: var(--ww-ink); text-decoration: none; }

.ww-section-title { font-weight: 700; color: var(--ww-forest); }

/* Labels (text + icon, never colour alone) */
.ww-label { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; border: 1px solid currentColor; background: #fff; }
.ww-label-secondary { color: #4b5563; }
.ww-label-warning { color: #8a4c0e; background: #fff7ed; }
.ww-label-info { color: #155e75; background: #ecfeff; }
.ww-label-primary { color: var(--ww-forest); background: #eef6f1; }
.ww-label-success { color: #166534; background: #f0fdf4; }
.ww-label-danger { color: var(--ww-error); background: #fef2f2; }
.ww-label-dark { color: #111827; background: #f3f4f6; }

/* Timeline */
.ww-timeline { list-style: none; padding-left: 0; position: relative; }
.ww-timeline::before { content: ""; position: absolute; left: 11px; top: 4px; bottom: 4px; width: 2px; background: var(--ww-line); }
.ww-timeline li { position: relative; padding-left: 2.25rem; padding-bottom: 1.25rem; }
.ww-timeline li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--ww-leaf); }

/* Stepper */
.ww-stepper { display: flex; gap: .5rem; list-style: none; padding: 0; counter-reset: step; flex-wrap: wrap; }
.ww-stepper li { flex: 1 1 0; min-width: 120px; padding: .5rem .75rem; border-radius: 8px; background: #fff; border: 1px solid var(--ww-line); font-size: .875rem; color: var(--ww-muted); }
.ww-stepper li::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: .4rem; border-radius: 50%; background: var(--ww-sage); color: var(--ww-forest); font-weight: 700; font-size: .8rem; }
.ww-stepper li[aria-current="step"] { border-color: var(--ww-forest); color: var(--ww-forest); font-weight: 600; }
.ww-stepper li[aria-current="step"]::before { background: var(--ww-forest); color: #fff; }
.ww-step[hidden] { display: none !important; }

.ww-token { font-family: ui-monospace, Consolas, monospace; font-size: 1.35rem; letter-spacing: .08em; background: #fff; border: 2px dashed var(--ww-amber); border-radius: 8px; padding: .75rem 1rem; word-break: break-all; }

.ww-private { border-left: 4px solid var(--ww-error); background: #fff7f7; }

/* Evidence drop zone and previews */
.ww-dropzone { position: relative; border: 2px dashed var(--ww-line); border-radius: var(--ww-radius); background: #fff; transition: border-color .15s, background .15s; }
.ww-dropzone.is-invalid { border-color: var(--ww-error); }
.ww-dropzone:hover, .ww-dropzone.is-dragover { border-color: var(--ww-leaf); background: #f3f8f4; }
.ww-dropzone:focus-within { outline: 3px solid var(--ww-amber); outline-offset: 2px; }
.ww-dropzone.is-full { opacity: .6; }
.ww-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ww-dropzone-label { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: 1.5rem 1rem; margin: 0; cursor: pointer; text-align: center; color: var(--ww-forest); }
.ww-dz-js { display: none; }
.ww-dropzone.is-enhanced .ww-dz-js { display: inline; }
.ww-dropzone.is-enhanced .ww-dz-nojs { display: none; }
.ww-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin: .75rem 0 0; }
.ww-preview { position: relative; background: #fff; border: 1px solid var(--ww-line); border-radius: var(--ww-radius); overflow: hidden; display: flex; flex-direction: column; }
.ww-preview-media { height: 110px; display: grid; place-items: center; background: var(--ww-sage); color: var(--ww-forest); }
.ww-preview-media img, .ww-preview-media video { width: 100%; height: 100%; object-fit: cover; }
.ww-preview audio { width: 100%; height: 32px; }
.ww-preview-meta { display: flex; flex-direction: column; padding: .35rem .5rem; font-size: .75rem; min-width: 0; }
.ww-preview-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ww-preview-remove { position: absolute; top: .35rem; right: .35rem; width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgba(23,61,50,.85); color: #fff; display: grid; place-items: center; line-height: 1; }
.ww-preview-remove:hover { background: var(--ww-error); }

/* Draggable report pin (OpenStreetMap fallback) — pure CSS, no marker images */
.ww-pin { background: none; border: 0; }
.ww-pin span { position: absolute; left: 3px; top: 0; width: 24px; height: 24px; background: var(--ww-error); border: 3px solid #fff;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.35); cursor: grab; }
.ww-pin span::after { content: ""; position: absolute; left: 6px; top: 6px; width: 6px; height: 6px; background: #fff; border-radius: 50%; }
#report-map { background: var(--ww-sage); }
gmp-place-autocomplete { width: 100%; }
.ww-private-tag { font-size: .75rem; font-weight: 700; color: var(--ww-error); text-transform: uppercase; letter-spacing: .05em; }

/* Admin */
.ww-admin-side { background: var(--ww-forest); min-height: 100vh; }
.ww-admin-side .nav-link { color: rgba(255,255,255,.82); border-radius: 8px; padding: .55rem .8rem; display: flex; gap: .55rem; align-items: center; }
.ww-admin-side .nav-link:hover, .ww-admin-side .nav-link.active { background: rgba(255,255,255,.12); color: #fff; }
.ww-admin-main { background: var(--ww-ivory); min-height: 100vh; }
.table > :not(caption) > * > * { background: transparent; }
.ww-table { background: #fff; border-radius: var(--ww-radius); overflow: hidden; border: 1px solid var(--ww-line); }
.ww-table thead th { background: var(--ww-sage); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ww-forest); }
.ww-mono { font-family: ui-monospace, Consolas, monospace; font-size: .85em; }
.ww-progress { height: 10px; border-radius: 99px; background: var(--ww-sage); }
.ww-progress .progress-bar { background: var(--ww-leaf); }

/* Single-series bar charts: thin bars, 4px rounded data end, 2px gaps, recessive axis */
.ww-bars { display: flex; align-items: flex-end; gap: 2px; height: 200px; padding-top: 1.25rem; border-bottom: 1px solid var(--ww-line); }
.ww-bar-col { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; outline-offset: 0; }
.ww-bar { width: 70%; max-width: 28px; background: var(--ww-leaf); border-radius: 4px 4px 0 0; min-height: 0; }
.ww-bar.is-suppressed { background: repeating-linear-gradient(45deg, var(--ww-leaf) 0 3px, var(--ww-sage) 3px 6px); }
.ww-bar-col:hover .ww-bar, .ww-bar-col:focus .ww-bar { background: var(--ww-forest); }
.ww-bar-value { font-size: .7rem; color: var(--ww-muted); position: absolute; top: -1.1rem; opacity: 0; transition: opacity .1s; }
.ww-bar-col:hover .ww-bar-value, .ww-bar-col:focus .ww-bar-value { opacity: 1; }
.ww-bar-label { position: absolute; bottom: -1.3rem; font-size: .65rem; color: var(--ww-muted); }
.ww-bars + details { margin-top: 1.6rem !important; }

/* Role permission matrix */
.ww-matrix th, .ww-matrix td { white-space: nowrap; }
.ww-matrix thead th { position: sticky; top: 0; z-index: 2; }
.ww-matrix .ww-matrix-sticky { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 240px; }
.ww-matrix thead .ww-matrix-sticky { z-index: 3; background: var(--ww-sage); }
.ww-matrix-role { min-width: 92px; max-width: 120px; white-space: normal !important; font-size: .72rem; }
.ww-matrix-group th { background: #f7f5ef !important; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ww-muted); }
.ww-perm-sensitive { background: #fff7f7; }
.ww-matrix-yes { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--ww-leaf); color: #fff; font-weight: 700; font-size: .8rem; }
.ww-matrix-yes.is-sensitive { background: var(--ww-error); }

.ww-footer { background: var(--ww-forest); color: rgba(255,255,255,.8); }
.ww-footer a { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 575.98px) {
  .ww-hero h1 { font-size: 1.75rem; }
  .ww-stepper li { min-width: 45%; }
}