/* WebWatch theme: Softanic Books look (navy ink on quiet grey, Poppins for words, IBM Plex Sans for figures). */
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('../vendor/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('../vendor/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('../vendor/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('../vendor/fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url('../vendor/fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url('../vendor/fonts/ibm-plex-sans-600.woff2') format('woff2'); }

:root {
  --ww-sidebar: 232px;
  --ww-paper: #f4f5f8; --ww-sheet: #fff; --ww-rule: #e3e6ed; --ww-rule-strong: #cdd2dc;
  --ww-ink: #18214d; --ww-ink-soft: #4b5274; --ww-muted: #747b94;
  --ww-in: #0b7a4b; --ww-in-soft: #e3f4ec; --ww-out: #b93a2b; --ww-out-soft: #fbe9e6;
  --ww-warn: #b7791f; --ww-warn-soft: #fdf3dc; --ww-info: #2f5fb3;
  --ww-hi: #9db8f2; --ww-hi-soft: #ebf1fd;
  --ww-font: 'Poppins', system-ui, sans-serif; --ww-font-num: 'IBM Plex Sans', 'Poppins', system-ui, sans-serif;
  --ww-focus: 0 0 0 3px var(--ww-hi-soft), 0 0 0 4px var(--ww-hi);

  --bs-body-font-family: var(--ww-font); --bs-body-font-size: 14.5px; --bs-body-color: var(--ww-ink); --bs-body-color-rgb: 24, 33, 77; --bs-code-color: var(--ww-ink-soft);
  --bs-secondary-color: var(--ww-muted); --bs-secondary-color-rgb: 116, 123, 148; --bs-border-color: var(--ww-rule); --bs-heading-color: var(--ww-ink);
  --bs-link-color: var(--ww-ink); --bs-link-color-rgb: 24, 33, 77; --bs-link-hover-color: var(--ww-ink-soft); --bs-link-hover-color-rgb: 75, 82, 116;
  --bs-primary: var(--ww-ink); --bs-primary-rgb: 24, 33, 77; --bs-primary-bg-subtle: var(--ww-hi-soft); --bs-primary-text-emphasis: var(--ww-ink); --bs-primary-border-subtle: var(--ww-hi);
  --bs-secondary: var(--ww-ink-soft); --bs-secondary-rgb: 75, 82, 116; --bs-secondary-bg-subtle: #eceef3; --bs-secondary-text-emphasis: var(--ww-ink-soft); --bs-secondary-border-subtle: var(--ww-rule-strong);
  --bs-success: var(--ww-in); --bs-success-rgb: 11, 122, 75; --bs-success-bg-subtle: var(--ww-in-soft); --bs-success-text-emphasis: var(--ww-in); --bs-success-border-subtle: #b7e2cd;
  --bs-danger: var(--ww-out); --bs-danger-rgb: 185, 58, 43; --bs-danger-bg-subtle: var(--ww-out-soft); --bs-danger-text-emphasis: var(--ww-out); --bs-danger-border-subtle: #f2c6bf;
  --bs-warning: var(--ww-warn); --bs-warning-rgb: 183, 121, 31; --bs-warning-bg-subtle: var(--ww-warn-soft); --bs-warning-text-emphasis: #8a5a12; --bs-warning-border-subtle: #f0d9a8;
  --bs-info: var(--ww-info); --bs-info-rgb: 47, 95, 179; --bs-info-bg-subtle: var(--ww-hi-soft); --bs-info-text-emphasis: var(--ww-info); --bs-info-border-subtle: var(--ww-hi);
}
html { font-size: 15px; }
body { background: var(--ww-paper); color: var(--ww-ink); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.text-bg-info { color: #fff !important; }

/* page frame */
.ww-wrapper { display: flex; min-height: 100vh; }
.ww-sidebar { width: var(--ww-sidebar); background: var(--ww-ink); color: #fff; position: fixed; inset: 0 auto 0 0; z-index: 1040; transition: transform .2s; display: flex; flex-direction: column; }
.ww-brand { display: flex; align-items: center; gap: .625rem; height: 56px; flex-shrink: 0; padding: 0 1rem; color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.1); }
.ww-brand:hover { color: #fff; text-decoration: none; }
.ww-brand-mark { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; background: #fff; color: var(--ww-ink); font-size: 16px; }
.ww-sidebar-nav { flex: 1; overflow-y: auto; padding: .75rem .5rem 1rem; }
.ww-sidebar-foot { border-top: 1px solid rgba(255,255,255,.1); padding: .5rem; }
.ww-sidebar .nav-link { display: flex; align-items: center; gap: .75rem; width: 100%; height: 40px; margin-bottom: 2px; padding: 0 .75rem; border: 0; border-radius: 6px; color: #fff; font-size: 14.5px; font-weight: 400; text-align: left; white-space: nowrap; box-shadow: none; }
.ww-sidebar .nav-link i { font-size: 1.15rem; line-height: 1; }
.ww-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.1); text-decoration: none; }
.ww-sidebar .nav-link.active { color: #fff; background: rgba(255,255,255,.15); font-weight: 500; }
.ww-sidebar .nav-link:focus-visible { background: rgba(255,255,255,.15); box-shadow: 0 0 0 2px var(--ww-hi); }
.ww-main { flex: 1; margin-left: var(--ww-sidebar); min-width: 0; display: flex; flex-direction: column; }
.ww-topbar { background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ww-rule); height: 56px; padding: 0 1.5rem; display: flex; align-items: center; gap: .75rem; position: sticky; top: 0; z-index: 1030; }
.ww-search { position: relative; align-items: center; flex: 1; max-width: 448px; }
.ww-search i { position: absolute; left: .75rem; color: var(--ww-muted); }
.ww-search input { padding-left: 2.1rem; background: var(--ww-paper); }
.ww-content { padding: 1.5rem; flex: 1; }
.ww-page-title { font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; }
.ww-footer { padding: .75rem 1.5rem; border-top: 1px solid var(--ww-rule); background: var(--ww-sheet); color: var(--ww-muted); font-size: 13px; }
.ww-backdrop { display: none; }
@media (max-width: 991.98px) {
  .ww-sidebar { transform: translateX(-100%); }
  .ww-sidebar.show { transform: none; }
  .ww-main { margin-left: 0; }
  .ww-topbar { padding: 0 .75rem; }
  .ww-content { padding: 1rem; }
  .ww-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(24,33,77,.45); z-index: 1035; }
}

/* buttons */
.btn { --bs-btn-font-size: 14px; --bs-btn-font-weight: 500; --bs-btn-padding-x: .875rem; --bs-btn-padding-y: .375rem; --bs-btn-border-radius: 6px; --bs-btn-focus-box-shadow: 0 0 0 3px var(--ww-hi); display: inline-flex; align-items: center; justify-content: center; gap: .4rem; transition: background-color .1s, border-color .1s; }
.btn-sm { --bs-btn-font-size: 13px; --bs-btn-padding-x: .625rem; --bs-btn-padding-y: .25rem; --bs-btn-border-radius: 6px; }
.btn-primary { --bs-btn-bg: var(--ww-ink); --bs-btn-border-color: var(--ww-ink); --bs-btn-hover-bg: var(--ww-ink-soft); --bs-btn-hover-border-color: var(--ww-ink-soft); --bs-btn-active-bg: var(--ww-ink-soft); --bs-btn-active-border-color: var(--ww-ink-soft); --bs-btn-disabled-bg: var(--ww-ink); --bs-btn-disabled-border-color: var(--ww-ink); }
.btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-secondary, .btn-outline-dark { --bs-btn-color: var(--ww-ink); --bs-btn-bg: var(--ww-sheet); --bs-btn-border-color: var(--ww-rule-strong); --bs-btn-hover-color: var(--ww-ink); --bs-btn-hover-bg: var(--ww-paper); --bs-btn-hover-border-color: #a5abbd; --bs-btn-active-color: var(--ww-ink); --bs-btn-active-bg: var(--ww-hi-soft); --bs-btn-active-border-color: var(--ww-hi); --bs-btn-disabled-color: var(--ww-muted); --bs-btn-disabled-bg: var(--ww-sheet); --bs-btn-disabled-border-color: var(--ww-rule); box-shadow: 0 1px 1px rgba(16,24,40,.04); }
.btn-danger { --bs-btn-bg: var(--ww-out); --bs-btn-border-color: var(--ww-out); --bs-btn-hover-bg: #9c2f22; --bs-btn-hover-border-color: #9c2f22; --bs-btn-active-bg: #9c2f22; --bs-btn-active-border-color: #9c2f22; }
.btn-outline-danger { --bs-btn-color: var(--ww-out); --bs-btn-border-color: var(--ww-rule-strong); --bs-btn-hover-bg: var(--ww-out-soft); --bs-btn-hover-color: var(--ww-out); --bs-btn-hover-border-color: var(--ww-out); --bs-btn-active-bg: var(--ww-out-soft); --bs-btn-active-color: var(--ww-out); --bs-btn-active-border-color: var(--ww-out); }
.btn-success { --bs-btn-bg: var(--ww-in); --bs-btn-border-color: var(--ww-in); --bs-btn-hover-bg: #096540; --bs-btn-hover-border-color: #096540; --bs-btn-active-bg: #096540; --bs-btn-active-border-color: #096540; }
.btn-outline-success { --bs-btn-color: var(--ww-in); --bs-btn-border-color: var(--ww-rule-strong); --bs-btn-hover-bg: var(--ww-in-soft); --bs-btn-hover-color: var(--ww-in); --bs-btn-hover-border-color: var(--ww-in); --bs-btn-active-bg: var(--ww-in-soft); --bs-btn-active-color: var(--ww-in); --bs-btn-active-border-color: var(--ww-in); }
.btn-link { --bs-btn-color: var(--ww-ink); --bs-btn-hover-color: var(--ww-ink-soft); --bs-btn-active-color: var(--ww-ink-soft); }

/* fields */
.form-control, .form-select { border-color: var(--ww-rule-strong); border-radius: 6px; padding-top: .3rem; padding-bottom: .3rem; font-size: 14.5px; line-height: 1.5rem; color: var(--ww-ink); transition: border-color .1s, box-shadow .1s; }
.form-control-sm, .form-select-sm { font-size: 13.5px; }
.form-control:hover, .form-select:hover { border-color: #a5abbd; }
.form-control:focus, .form-select:focus { border-color: var(--ww-ink); background-color: var(--ww-sheet); box-shadow: var(--ww-focus); }
.form-control::placeholder { color: var(--ww-muted); }
.form-label { margin-bottom: .25rem; font-size: 13px; font-weight: 500; color: var(--ww-ink-soft); }
.form-check-input { border-color: var(--ww-rule-strong); }
.form-check-input:checked { background-color: var(--ww-ink); border-color: var(--ww-ink); }
.form-check-input:focus { border-color: var(--ww-ink); box-shadow: var(--ww-focus); }
.input-group-text { background: var(--ww-paper); border-color: var(--ww-rule-strong); color: var(--ww-ink-soft); }
.invalid-feedback { font-size: 13px; }

/* panels */
.card { --bs-card-border-radius: 8px; --bs-card-inner-border-radius: 7px; border: 1px solid var(--ww-rule); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: var(--ww-sheet); border-bottom: 1px solid var(--ww-rule); font-weight: 600; padding: .7rem 1rem; }
.card-header > i, .card-header > span > i { margin-right: .3rem; }
.card-footer { background: var(--ww-sheet); border-top: 1px solid var(--ww-rule); }
a.stat-card { color: inherit; text-decoration: none; transition: border-color .1s, box-shadow .1s; }
a.stat-card:hover { color: inherit; text-decoration: none; border-color: var(--ww-rule-strong); box-shadow: 0 2px 6px rgba(16,24,40,.08); }
a.stat-card:focus-visible { outline: none; box-shadow: var(--ww-focus); }
a.stat-card.is-active { border-color: var(--ww-ink); background: var(--ww-hi-soft); box-shadow: 0 0 0 1px var(--ww-ink); }
.stat-card .stat-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.stat-card .stat-value { font-family: var(--ww-font-num); font-size: 1.6rem; font-weight: 600; line-height: 1.15; font-feature-settings: 'tnum' 1; }
.stat-card .stat-label { color: var(--ww-muted); font-size: 12.5px; line-height: 1.3; }

/* tables */
.table { --bs-table-bg: transparent; --bs-table-color: var(--ww-ink); --bs-table-hover-bg: var(--ww-paper); --bs-table-hover-color: var(--ww-ink); --bs-table-striped-bg: rgba(244,245,248,.6); --bs-border-color: var(--ww-rule); margin-bottom: 0; font-size: 14.5px; }
.table > :not(caption) > * > * { vertical-align: middle; padding: .5rem .75rem; }
.table thead th { background: rgba(244,245,248,.6); border-bottom: 1px solid var(--ww-rule-strong); font-size: 11.5px; font-weight: 600; text-transform: uppercase; color: var(--ww-muted); letter-spacing: .05em; white-space: nowrap; }
.table thead th a { color: inherit; }
.table-light { --bs-table-bg: rgba(244,245,248,.6); --bs-table-color: var(--ww-muted); }
.url-cell { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* small parts */
.badge { --bs-badge-font-size: 11.5px; --bs-badge-font-weight: 500; --bs-badge-padding-x: .55em; --bs-badge-padding-y: .3em; --bs-badge-border-radius: 999px; }
.alert { --bs-alert-border-radius: 8px; font-size: 14px; }
.modal { --bs-modal-border-radius: 8px; --bs-modal-inner-border-radius: 7px; --bs-modal-border-color: var(--ww-rule); --bs-modal-header-border-color: var(--ww-rule); --bs-modal-footer-border-color: var(--ww-rule); }
.modal-title { font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; }
.dropdown-menu { --bs-dropdown-border-radius: 8px; --bs-dropdown-border-color: var(--ww-rule); --bs-dropdown-link-color: var(--ww-ink); --bs-dropdown-link-hover-bg: var(--ww-paper); --bs-dropdown-link-active-bg: var(--ww-hi-soft); --bs-dropdown-link-active-color: var(--ww-ink); --bs-dropdown-font-size: 14px; }
.dropdown-item { display: flex; align-items: center; gap: .5rem; }
.dropdown-item:hover { text-decoration: none; }
.nav-tabs { --bs-nav-tabs-border-color: var(--ww-rule); --bs-nav-tabs-link-active-color: var(--ww-ink); --bs-nav-tabs-link-active-border-color: var(--ww-rule) var(--ww-rule) var(--ww-sheet); --bs-nav-link-color: var(--ww-ink-soft); --bs-nav-link-hover-color: var(--ww-ink); }
.nav-pills { --bs-nav-pills-border-radius: 6px; --bs-nav-pills-link-active-bg: var(--ww-ink); --bs-nav-link-color: var(--ww-ink-soft); --bs-nav-link-hover-color: var(--ww-ink); }
.pagination { --bs-pagination-color: var(--ww-ink); --bs-pagination-hover-color: var(--ww-ink); --bs-pagination-hover-bg: var(--ww-paper); --bs-pagination-border-color: var(--ww-rule); --bs-pagination-hover-border-color: var(--ww-rule-strong); --bs-pagination-active-bg: var(--ww-ink); --bs-pagination-active-border-color: var(--ww-ink); --bs-pagination-focus-box-shadow: 0 0 0 3px var(--ww-hi); --bs-pagination-border-radius: 6px; --bs-pagination-font-size: 14px; }
.list-group { --bs-list-group-border-color: var(--ww-rule); --bs-list-group-active-bg: var(--ww-ink); --bs-list-group-active-border-color: var(--ww-ink); }
.progress { --bs-progress-bg: var(--ww-rule); --bs-progress-bar-bg: var(--ww-ink); }
.ww-notif-menu { width: 340px; max-width: 92vw; padding: 0; }
.ww-notif-menu .notif-item { display: block; padding: .6rem 1rem; border-bottom: 1px solid var(--ww-rule); color: inherit; font-size: 13.5px; }
.ww-notif-menu .notif-item:hover { background: var(--ww-paper); text-decoration: none; }
.rotation-list .list-group-item { cursor: grab; }
.rotation-list .list-group-item.dragging { opacity: .5; }
.shot-thumb { width: 100%; height: 170px; object-fit: cover; object-position: top; border-bottom: 1px solid var(--ww-rule); background: var(--ww-paper); }
.json-box { background: var(--ww-ink); color: #e6e9f5; border-radius: 6px; padding: .75rem; font-size: .78rem; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-all; }
.progress-sm { height: .5rem; }
.badge-dot::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; margin-right: .35rem; }

/* login */
.ww-auth { display: grid; place-items: center; min-height: 100vh; padding: 2.5rem 1rem; }
.ww-auth-box { width: 100%; max-width: 420px; }
.ww-auth-brand { display: flex; align-items: center; gap: .625rem; margin-bottom: 1.5rem; font-size: 17px; font-weight: 600; }
.ww-auth-brand .ww-brand-mark { width: 36px; height: 36px; background: var(--ww-ink); color: #fff; }

@media print {
  .ww-sidebar, .ww-topbar, .ww-footer, .no-print { display: none !important; }
  .ww-main { margin: 0; } body { background: #fff; } .card { box-shadow: none; border: 1px solid #ddd; }
  .page-break { page-break-before: always; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }