/* New Line Web Design skin for Akeeba Panopticon 2.4 (Bootstrap 5.3 markup).
   Loads after Panopticon's theme CSS; targets Panopticon's own IDs and Bootstrap classes only. */

/* Lato (SIL Open Font License), self-hosted in templates/newline/media/fonts */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/lato-700.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/lato-900.woff2") format("woff2"); }

:root,
[data-bs-theme=light] {
  --nl-navy: #1c222e;
  --nl-navy-2: #2a3243;
  --nl-amber: #f8b318;
  --nl-amber-ink: #835c00;
  --nl-amber-ui: #b57f00;
  --nl-amber-tint: #fff4d6;
  --nl-ground: #eef0f3;
  --nl-sheet: #ffffff;
  --nl-raised: #f6f7f9;
  --nl-rule: #e3e6eb;
  --nl-muted: #5b6270;
  --nl-ok: #1e7b45;
  --nl-ok-tint: #e7f4ec;
  --nl-bad: #b42318;
  --nl-bad-tint: #fdecea;
  --nl-info: #2a5a8a;
  --nl-info-tint: #e8f0f8;

  --bs-font-monospace: ui-monospace, Consolas, "Courier New", monospace;
  --bs-font-sans-serif: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-body-color: var(--nl-navy);
  --bs-body-bg: #ffffff;
  --bs-emphasis-color: var(--nl-navy);
  --bs-secondary-color: var(--nl-muted);
  --bs-border-color: var(--nl-rule);
  --bs-border-radius: 2px;
  --bs-border-radius-sm: 2px;
  --bs-border-radius-lg: 2px;
  --bs-primary: #1c222e;
  --bs-primary-rgb: 28, 34, 46;
  --bs-link-color: var(--nl-info);
  --bs-link-color-rgb: 42, 90, 138;
  --bs-link-hover-color: var(--nl-navy);
  --bs-link-hover-color-rgb: 28, 34, 46;
  --bs-tertiary-bg: var(--nl-raised);
  --bs-focus-ring-color: rgba(28, 34, 46, .35);
}

body {
  background: var(--nl-ground);
  color: var(--nl-navy);
  font-family: var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; letter-spacing: -.01em; color: var(--nl-navy); }
h3, .h3 { font-size: 1.125rem; }
h4, .h4 { font-size: 1rem; }

:focus-visible { outline: 3px solid var(--nl-navy); outline-offset: 2px; box-shadow: none !important; }

/* ---------- Top bar ---------- */
#pnpChrome { padding: 0; }
#topNavbar {
  background: var(--nl-navy) !important;
  border: 0 !important;
  min-height: 56px;
  padding: 0 24px !important;
  max-width: none;
}
#topNavbar h1 { margin: 0; font-size: 1rem; }
#topNavbar .navbar-brand { display: flex; align-items: center; gap: 12px; padding: 0; color: #fff; font-weight: 700; font-size: .9375rem; }
#topNavbar .navbar-brand img { height: 36px; width: auto; display: block; }
#topNavbar .navbar-brand .pnp-app { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.25); color: #d6dae2; font-weight: 400; }
#topNavbar .nav-link {
  color: #d6dae2;
  font-weight: 700;
  font-size: .875rem;
  padding: 18px 12px 16px !important;
  border-bottom: 2px solid transparent;
}
#topNavbar .nav-link:hover,
#topNavbar .nav-link:focus-visible,
#topNavbar .nav-link.active,
#topNavbar .show > .nav-link { color: #fff; border-bottom-color: var(--nl-amber); }
#topNavbar :focus-visible { outline-color: var(--nl-amber); }
#topNavbar .navbar-toggler { border-color: rgba(255,255,255,.35); }

.dropdown-menu {
  --bs-dropdown-border-color: var(--nl-rule);
  --bs-dropdown-border-radius: .5rem;
  --bs-dropdown-link-color: var(--nl-navy);
  --bs-dropdown-link-hover-bg: var(--nl-raised);
  --bs-dropdown-link-active-bg: var(--nl-navy);
  --bs-dropdown-font-size: .875rem;
  box-shadow: 0 8px 24px rgba(28, 34, 46, .14);
  padding: 6px;
}
.dropdown-item { border-radius: .375rem; padding: 8px 12px; }
.dropdown-item .fa { color: var(--nl-muted); width: 1.25em; }

/* ---------- The sheet: toolbar + main read as one white surface ---------- */
#toolbar, main.container-xl { max-width: 1320px; }
#toolbar {
  background: var(--nl-sheet) !important;
  margin: 16px auto 0;
  padding: 20px 24px 12px !important;
  border: 1px solid var(--nl-rule);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  min-height: 0;
}
#toolbar #toolbarTitle { color: var(--nl-navy) !important; font-size: 1.5rem !important; font-weight: 700; padding: 0 !important; }
#toolbar #toolbarTitle .fa { color: var(--nl-muted); font-size: 1.125rem; margin-right: 8px; }
#toolbar .navbar-toggler { color: var(--nl-navy); border-color: var(--nl-rule); }
main.container-xl {
  background: var(--nl-sheet);
  border: 1px solid var(--nl-rule);
  border-radius: 0 0 16px 16px;
  padding: 8px 24px 32px !important;
  margin-bottom: 24px;
  min-height: auto !important;
}
body.pnp-bare main.container-xl { border-radius: 16px; }

/* ---------- Buttons ---------- */
.btn { --bs-btn-border-radius: .375rem; --bs-btn-font-weight: 700; --bs-btn-font-size: .875rem; --bs-btn-padding-y: .5rem; --bs-btn-padding-x: .875rem; }
.btn-sm { --bs-btn-font-size: .8125rem; --bs-btn-padding-y: .3125rem; --bs-btn-padding-x: .625rem; }
.btn-primary {
  --bs-btn-bg: var(--nl-navy); --bs-btn-border-color: var(--nl-navy);
  --bs-btn-hover-bg: var(--nl-navy-2); --bs-btn-hover-border-color: var(--nl-navy-2);
  --bs-btn-active-bg: #10141c; --bs-btn-active-border-color: #10141c;
  --bs-btn-disabled-bg: var(--nl-navy); --bs-btn-disabled-border-color: var(--nl-navy);
}
.btn-secondary, .btn-outline-secondary, .btn-outline-primary, .btn-light {
  --bs-btn-color: var(--nl-navy); --bs-btn-bg: #fff; --bs-btn-border-color: #c9ced7;
  --bs-btn-hover-color: var(--nl-navy); --bs-btn-hover-bg: var(--nl-raised); --bs-btn-hover-border-color: var(--nl-navy);
  --bs-btn-active-color: var(--nl-navy); --bs-btn-active-bg: var(--nl-rule); --bs-btn-active-border-color: var(--nl-navy);
}
.btn-warning {
  --bs-btn-color: var(--nl-navy); --bs-btn-bg: var(--nl-amber); --bs-btn-border-color: var(--nl-amber);
  --bs-btn-hover-color: var(--nl-navy); --bs-btn-hover-bg: #e9a30a; --bs-btn-hover-border-color: #e9a30a;
  --bs-btn-active-color: var(--nl-navy); --bs-btn-active-bg: #d99700; --bs-btn-active-border-color: #d99700;
}
.btn-success {
  --bs-btn-bg: var(--nl-ok); --bs-btn-border-color: var(--nl-ok);
  --bs-btn-hover-bg: #17633a; --bs-btn-hover-border-color: #17633a;
}
.btn-danger, .btn-outline-danger {
  --bs-btn-color: var(--nl-bad); --bs-btn-bg: #fff; --bs-btn-border-color: var(--nl-bad);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--nl-bad); --bs-btn-hover-border-color: var(--nl-bad);
}
.btn-link { --bs-btn-color: var(--nl-info); --bs-btn-font-weight: 700; }

/* ---------- Forms ---------- */
.form-control, .form-select { border-color: #c9ced7; border-radius: 2px; font-size: .9375rem; }
.form-control-lg, .form-select-lg { font-size: 1rem; border-radius: 2px; }
.form-control:focus, .form-select:focus { border-color: var(--nl-navy); box-shadow: 0 0 0 3px rgba(28, 34, 46, .18); }
.form-label, .col-form-label { font-weight: 700; font-size: .875rem; }
.form-text { color: var(--nl-muted); font-size: .8125rem; }
.form-check-input:checked { background-color: var(--nl-navy); border-color: var(--nl-navy); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231c222e'/%3e%3c/svg%3e"); }
.input-group > .btn { border-radius: 0 2px 2px 0; }
.border.rounded-1.bg-body-tertiary { background: var(--nl-raised) !important; border: 0 !important; border-radius: 2px !important; padding: 12px !important; }

/* ---------- Tables ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: var(--nl-raised);
  --bs-table-border-color: var(--nl-rule);
  --bs-table-color: var(--nl-navy);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}
.table > :not(caption) > * > * { padding: 12px 12px; }
.table-sm > :not(caption) > * > * { padding: 10px 12px; }
.table thead.table-secondary, .table thead.table-dark, .table thead.table-light { --bs-table-bg: transparent; --bs-table-color: var(--nl-muted); }
.table thead th { color: var(--nl-muted); font-weight: 700; font-size: .8125rem; border-bottom-width: 1px; white-space: nowrap; }
.table thead th a { color: var(--nl-muted); text-decoration: none; }
.table thead th .fa, .table thead th .fab { font-size: 1rem !important; }
.table-group-divider { border-top: 1px solid var(--nl-rule) !important; }
.table td .text-body-secondary, .table td small { color: var(--nl-muted) !important; }
.table a { font-weight: 700; color: var(--nl-navy); text-decoration: none; }
.table a:hover { text-decoration: underline; }
.table .num { text-align: right; }

/* ---------- Badges (status always with icon + words) ---------- */
.badge { border-radius: 2px; font-weight: 700; font-size: .75rem; padding: .3em .5em; }
.form-check:not(.form-switch) > .form-check-input[type=checkbox] { border-radius: 2px; }
.form-switch { padding-left: 3.5em; min-height: 1.75em; display: flex; align-items: center; gap: .5em; }
.form-switch .form-check-input {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236b7280'/%3e%3c/svg%3e");
  width: 2.75em; height: 1.5em; margin: 0 0 0 -3.5em; flex-shrink: 0; border-radius: 2em; border: 1px solid #8a919e; cursor: pointer;
}
.form-switch .form-check-input:checked { background-color: var(--nl-navy); border-color: var(--nl-navy); --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
.form-switch .form-check-label { cursor: pointer; }
.badge .fa { margin-right: .3em; }
.badge.bg-success, .badge.text-bg-success { background: var(--nl-ok-tint) !important; color: var(--nl-ok) !important; }
.badge.bg-danger, .badge.text-bg-danger { background: var(--nl-bad-tint) !important; color: var(--nl-bad) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--nl-amber) !important; color: var(--nl-navy) !important; }
.badge.bg-info, .badge.text-bg-info { background: var(--nl-info-tint) !important; color: var(--nl-info) !important; }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.text-bg-light { background: var(--nl-raised) !important; color: var(--nl-muted) !important; border: 1px solid var(--nl-rule); }
.badge.bg-primary, .badge.text-bg-primary, .badge.text-bg-dark { background: var(--nl-navy) !important; color: #fff !important; }
.text-success { color: var(--nl-ok) !important; }
.text-danger { color: var(--nl-bad) !important; }
.text-warning { color: var(--nl-amber-ink) !important; }
.text-info { color: var(--nl-info) !important; }
.text-body-secondary, .text-secondary { color: var(--nl-muted) !important; }

/* ---------- Cards ---------- */
.card { --bs-card-bg: #fff; --bs-card-border-color: var(--nl-rule); --bs-card-border-radius: 2px; --bs-card-cap-bg: transparent; --bs-card-spacer-x: 1.25rem; --bs-card-spacer-y: 1rem; }
.card-header { border-bottom: 1px solid var(--nl-rule); font-weight: 700; font-size: .9375rem; padding: 14px 20px; display: flex; align-items: center; gap: 8px; }
.card-header h3, .card-header h4 { font-size: .9375rem; margin: 0; }
.card-header .fa, .card-header .fab { color: var(--nl-muted); }
.card-header.bg-success, .card-header.bg-danger, .card-header.bg-warning, .card-header.bg-info, .card-header.bg-primary, .card-header.bg-secondary, .card-header.text-bg-success, .card-header.text-bg-danger, .card-header.text-bg-warning, .card-header.text-bg-info { background: transparent !important; color: var(--nl-navy) !important; }

/* ---------- Alerts ---------- */
.alert { border: 0; border-left: 4px solid; border-radius: 2px; font-size: .9375rem; }
.alert-success { --bs-alert-bg: var(--nl-ok-tint); --bs-alert-color: #14512e; border-left-color: var(--nl-ok); }
.alert-danger { --bs-alert-bg: var(--nl-bad-tint); --bs-alert-color: #7a1810; border-left-color: var(--nl-bad); }
.alert-warning { --bs-alert-bg: var(--nl-amber-tint); --bs-alert-color: #4d3600; border-left-color: var(--nl-amber); }
.alert-info { --bs-alert-bg: var(--nl-info-tint); --bs-alert-color: #1d3f61; border-left-color: var(--nl-info); }
.alert code { color: inherit; font-weight: 700; }
.alert-heading { font-size: 1rem; font-weight: 700; }

/* ---------- Nav tabs, pagination, progress ---------- */
.nav-tabs { --bs-nav-tabs-border-color: var(--nl-rule); --bs-nav-tabs-link-active-border-color: transparent; --bs-nav-tabs-link-active-bg: transparent; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--nl-muted); font-weight: 700; font-size: .875rem; padding: 10px 2px; margin-right: 24px; }
.nav-tabs .nav-link:hover { color: var(--nl-navy); border-bottom-color: #c9ced7; }
.nav-tabs .nav-link.active { color: var(--nl-navy); border-bottom-color: var(--nl-navy); }
.pagination { --bs-pagination-color: var(--nl-navy); --bs-pagination-active-bg: var(--nl-navy); --bs-pagination-active-border-color: var(--nl-navy); --bs-pagination-border-color: var(--nl-rule); --bs-pagination-font-size: .875rem; }
.progress { --bs-progress-bg: var(--nl-rule); --bs-progress-bar-bg: var(--nl-navy); --bs-progress-height: .5rem; border-radius: 1rem; }

/* ---------- Footer ---------- */
footer.container-xl { background: transparent !important; color: var(--nl-muted) !important; max-width: 1320px; padding: 4px 24px 24px !important; font-size: .8125rem; }
footer.container-xl a, footer.container-xl .text-white { color: var(--nl-navy) !important; }
footer.container-xl .text-muted { color: var(--nl-muted) !important; }

/* ---------- Live-template additions ---------- */
/* Pages without a toolbar: main is the whole sheet. */
#pnpChrome:not(:has(#toolbar)) + main.container-xl { border-radius: 16px; margin-top: 16px; }
#toolbar .btn-dark, .btn-dark { --bs-btn-bg: var(--nl-navy); --bs-btn-border-color: var(--nl-navy); --bs-btn-hover-bg: var(--nl-navy-2); --bs-btn-hover-border-color: var(--nl-navy-2); }
.btn-info, .btn-outline-info, .btn-outline-warning, .btn-outline-success, .btn-outline-dark, .btn-outline-light {
  --bs-btn-color: var(--nl-navy); --bs-btn-bg: #fff; --bs-btn-border-color: #c9ced7;
  --bs-btn-hover-color: var(--nl-navy); --bs-btn-hover-bg: var(--nl-raised); --bs-btn-hover-border-color: var(--nl-navy);
  --bs-btn-active-color: var(--nl-navy); --bs-btn-active-bg: var(--nl-rule); --bs-btn-active-border-color: var(--nl-navy);
}
#topNavbar .navbar-brand svg { display: none; }
#topNavbar .badge { vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent; }
.bg-light-subtle { background-color: var(--nl-raised) !important; }
.text-primary-emphasis { color: var(--nl-navy) !important; }

/* Login (templates/newline/html/Login/default.blade.php) */
body.panopticon-view-login { background: #fff; }
body.panopticon-view-login main.container-xl { max-width: none; margin: 0 !important; border: 0; border-radius: 0; padding: 0 !important; }
body.panopticon-view-login #loginForm { min-height: 0; }
.nl-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.nl-login-brand { background: var(--nl-navy); color: #d6dae2; padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 40px; }
.nl-login-brand img { width: min(320px, 80%); height: auto; }
.nl-login-brand .big { color: #fff; font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; max-width: 20ch; margin: 0; }
.nl-login-brand ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .9375rem; }
.nl-login-brand ul .fa { color: var(--nl-amber); width: 1.5em; }
.nl-login-form { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.nl-login-form form { width: min(400px, 100%); }
.nl-login-form #loginArea { width: 100% !important; border: 0 !important; padding: 0 !important; background: transparent !important; }
.nl-login-form .nl-lede { color: var(--nl-muted); margin: 0 0 24px; }
@media (max-width: 991.98px) {
  .nl-login { grid-template-columns: 1fr; min-height: 0; }
  .nl-login-brand { padding: 24px 16px; gap: 16px; }
  .nl-login-brand ul { display: none; }
}

/* ---------- Phone ---------- */
@media (max-width: 991.98px) {
  #topNavbar { padding: 0 16px !important; }
  #topNavbar .navbar-brand img { height: 28px; }
  #topNavbar .navbar-brand .pnp-app { display: none; }
  #topNavbar .navbar-collapse { padding-bottom: 12px; }
  #topNavbar .nav-link { padding: 10px 4px !important; }
  #toolbar { margin: 0; border-radius: 0; border-left: 0; border-right: 0; padding: 16px !important; }
  main.container-xl { border-radius: 0; border-left: 0; border-right: 0; padding: 8px 16px 24px !important; }
  main .table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Toolbar: core theme CSS puts buttons first (order:1) and the title second; the design reads title left, buttons right. */
#toolbar #toolbarTitle { order: 1; flex: 0 1 auto; }
#toolbar .navbar-toggler { order: 2; margin-left: auto; }
#toolbar #toolbarButtons { order: 3; }
#toolbar #toolbarButtonsInner { margin-left: auto; }

/* Sticky chrome: once scrolled, the toolbar butts up against the top bar with square top corners. */
#toolbar { transition: margin-top .15s ease, border-radius .15s ease; }
#pnpChrome.nl-stuck #toolbar { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; border-bottom: 1px solid var(--nl-rule); }