/*
 * Noper theme — Agent.qadeem.solutions visual language
 * Palette (only 3 colors): black · dark grey · white
 *   black:      #0d0d0d  #111111
 *   dark grey:  #1e1e1e  #2a2a2a  #3a3a3a
 *   white:      #ffffff  #ececec  #d4d4d4
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"],
[data-bs-theme="auto"] {
  color-scheme: dark !important;

  /* Kill Paperless green — primary becomes white CTA (Agent style) */
  --pngx-primary: 0, 0% !important;
  --pngx-primary-lightness: 92% !important;
  --pngx-primary-text-contrast: #0a0a0a !important;
  --pngx-primary-faded: #2a2a2a !important;
  --pngx-primary-lighten-10: #ffffff !important;
  --pngx-primary-lighten-30: #ffffff !important;
  --pngx-primary-darken-5: #e5e5e5 !important;
  --pngx-primary-darken-15: #d4d4d4 !important;
  --pngx-primary-darken-18: #c4c4c4 !important;
  --pngx-primary-darken-27: #a3a3a3 !important;
  --pngx-success-darken-10: #1e1e1e !important;
  --pngx-focus-alpha: 0.35 !important;

  /* Surfaces */
  --pngx-bg-alt: #1e1e1e !important;
  --pngx-bg-alt2: #171717 !important;
  --pngx-bg-darker: #0d0d0d !important;
  --pngx-bg-disabled: #1a1a1a !important;
  --pngx-body-color-accent: #ececec !important;

  /* Bootstrap body */
  --bs-body-bg: #111111 !important;
  --bs-body-bg-rgb: 17, 17, 17 !important;
  --bs-body-color: #ececec !important;
  --bs-body-color-rgb: 236, 236, 236 !important;
  --bs-secondary-color: #a3a3a3 !important;
  --bs-tertiary-bg: #0d0d0d !important;
  --bs-border-color: #2a2a2a !important;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.08) !important;
  --bs-dark-border-subtle: #1e1e1e !important;

  --bs-primary: #ffffff !important;
  --bs-primary-rgb: 255, 255, 255 !important;
  --bs-primary-text-emphasis: #ffffff !important;
  --bs-primary-bg-subtle: #1e1e1e !important;
  --bs-primary-border-subtle: #3a3a3a !important;

  --bs-secondary: #2a2a2a !important;
  --bs-secondary-rgb: 42, 42, 42 !important;
  --bs-light: #1e1e1e !important;
  --bs-light-rgb: 30, 30, 30 !important;
  --bs-dark: #0d0d0d !important;
  --bs-dark-rgb: 13, 13, 13 !important;
  --bs-info: #1e1e1e !important;
  --bs-info-rgb: 30, 30, 30 !important;
  --bs-success: #2a2a2a !important;
  --bs-success-rgb: 42, 42, 42 !important;
  --bs-warning: #3a3a3a !important;
  --bs-warning-rgb: 58, 58, 58 !important;
  --bs-danger: #3a3a3a !important;
  --bs-danger-rgb: 58, 58, 58 !important;

  --bs-link-color: #ffffff !important;
  --bs-link-color-rgb: 255, 255, 255 !important;
  --bs-link-hover-color: #d4d4d4 !important;
  --bs-link-hover-color-rgb: 212, 212, 212 !important;

  --bs-emphasis-color: #ffffff !important;
  --bs-emphasis-color-rgb: 255, 255, 255 !important;
  --bs-secondary-bg: #1e1e1e !important;
  --bs-secondary-bg-rgb: 30, 30, 30 !important;

  /* Typography — Agent */
  --bs-body-font-family: "Inter", system-ui, -apple-system, sans-serif !important;
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, sans-serif !important;
  --bs-font-monospace: "JetBrains Mono", ui-monospace, monospace !important;
  --pngx-body-font-size: 0.875rem !important;

  /* Login-page hex vars (base.css) */
  --pngx-primary-hover: #e5e5e5 !important;
  --pngx-primary-active: #d4d4d4 !important;
}

html,
body {
  background-color: #111111 !important;
  color: #ececec !important;
  font-family: "Inter", system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.01em;
}

/* Force dark feel even if theme=light sneaks in */
.bg-light,
.bg-white,
.navbar.bg-light,
.card,
.modal-content,
.offcanvas,
.dropdown-menu,
.popover,
.toast,
.list-group-item,
.form-control,
.form-select,
.input-group-text,
.accordion-item,
.table,
.page-link {
  background-color: #1e1e1e !important;
  color: #ececec !important;
  border-color: #2a2a2a !important;
}

.bg-body,
.bg-body-tertiary,
.bg-body-secondary {
  background-color: #111111 !important;
  color: #ececec !important;
}

.bg-dark,
.navbar-dark,
.pngx-sidebar,
app-sidenav,
.sidebar,
nav.sidebar {
  background-color: #0d0d0d !important;
  color: #ececec !important;
  border-color: #2a2a2a !important;
}

/* App shell surfaces */
pngx-root,
.pngx-main,
main,
.content-wrapper {
  background-color: #111111 !important;
  color: #ececec !important;
}

/* Cards — Agent rounded-xl feel */
.card,
.modal-content,
.dropdown-menu,
.offcanvas {
  border-radius: 0.75rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  background-color: #1e1e1e !important;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer {
  background-color: #171717 !important;
  border-color: #2a2a2a !important;
  color: #ececec !important;
}

/* Buttons — white primary CTA like Agent */
.btn-primary,
.btn.btn-primary,
a.btn-primary {
  --bs-btn-color: #0a0a0a !important;
  --bs-btn-bg: #ffffff !important;
  --bs-btn-border-color: #ffffff !important;
  --bs-btn-hover-color: #0a0a0a !important;
  --bs-btn-hover-bg: #e5e5e5 !important;
  --bs-btn-hover-border-color: #e5e5e5 !important;
  --bs-btn-active-color: #0a0a0a !important;
  --bs-btn-active-bg: #d4d4d4 !important;
  --bs-btn-active-border-color: #d4d4d4 !important;
  --bs-btn-disabled-color: #737373 !important;
  --bs-btn-disabled-bg: #2a2a2a !important;
  --bs-btn-disabled-border-color: #2a2a2a !important;
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #0a0a0a !important;
  font-weight: 500 !important;
  border-radius: 0.5rem !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #e5e5e5 !important;
  border-color: #e5e5e5 !important;
  color: #0a0a0a !important;
}

.btn-outline-primary,
.btn-secondary,
.btn-light,
.btn-dark,
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark {
  background-color: transparent !important;
  border-color: #3a3a3a !important;
  color: #ececec !important;
  border-radius: 0.5rem !important;
  font-weight: 500 !important;
}

.btn-outline-primary:hover,
.btn-secondary:hover,
.btn-light:hover,
.btn-outline-secondary:hover,
.btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.btn-link {
  color: #ffffff !important;
  text-decoration: none !important;
}
.btn-link:hover {
  color: #d4d4d4 !important;
}

.btn-danger,
.btn-outline-danger,
.btn-success,
.btn-warning,
.btn-info {
  background-color: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #ececec !important;
}
.btn-danger:hover,
.btn-outline-danger:hover {
  background-color: #3a3a3a !important;
  color: #ffffff !important;
}

/* Forms */
.form-control,
.form-select,
.form-control:focus,
.form-select:focus,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea,
select {
  background-color: #0d0d0d !important;
  color: #ececec !important;
  border-color: #2a2a2a !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
}

.form-control:focus,
.form-select:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.12) !important;
}

.form-control::placeholder {
  color: #737373 !important;
}

.form-check-input:checked {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
}

.form-check-input {
  background-color: #1e1e1e !important;
  border-color: #3a3a3a !important;
}

/* Nav / sidebar */
.navbar,
.navbar-nav .nav-link,
.nav-tabs .nav-link,
.nav-pills .nav-link {
  color: #d4d4d4 !important;
}

.nav-link.active,
.nav-tabs .nav-link.active,
.navbar-nav .nav-link.active,
a.active {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: #2a2a2a !important;
}

.nav-tabs {
  border-bottom-color: #2a2a2a !important;
}

.nav-link:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* ========== Sidebar — Agent-style alignment ==========
 * Flat icon column, rounded rows, nested rail (no Paperless ms-2 stagger).
 */
#sidebarMenu.sidebar,
nav#sidebarMenu,
.sidebar {
  background-color: #0d0d0d !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

.sidebar .sidebar-sticky {
  padding: 0.65rem 0.45rem 1.25rem !important;
  gap: 0.15rem;
}

.sidebar .nav {
  gap: 1px;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

.sidebar .nav-group {
  margin-top: 0.85rem !important;
  margin-bottom: 0.15rem !important;
}

.sidebar .sidebar-heading {
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #737373 !important;
  padding: 0.35rem 0.7rem 0.4rem !important;
  margin: 0 !important;
}

.sidebar .sidebar-heading span {
  color: #737373 !important;
}

.sidebar .nav-item {
  width: 100%;
}

.sidebar .nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  padding: 0.45rem 0.7rem !important;
  margin: 0 !important;
  border-radius: 0.5rem !important;
  color: #a3a3a3 !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
  line-height: 1.25 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  white-space: nowrap;
}

/* Kill Bootstrap me-2 on icons — gap handles spacing so icons share one column */
.sidebar .nav-link > i-bs,
.sidebar .nav-link i-bs.me-2,
.sidebar .nav-link .me-2 {
  margin-right: 0 !important;
  margin-left: 0 !important;
  flex: 0 0 1.125rem !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  top: 0 !important;
  opacity: 0.85;
}

.sidebar .nav-link > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar .nav-link:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.sidebar .nav-link:hover > i-bs {
  opacity: 1;
}

.sidebar .nav-link.active,
.sidebar a.nav-link.active {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  font-weight: 600 !important;
}

.sidebar .nav-link.active > i-bs {
  opacity: 1;
}

/* Attributes row: parent + expand control on one line */
.sidebar .attributes-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.15rem !important;
  width: 100%;
  padding-right: 0.15rem;
}

.sidebar .attributes-row > .nav-link {
  flex: 1 1 auto !important;
  min-width: 0;
}

.sidebar .attributes-expand-btn {
  flex: 0 0 auto !important;
  opacity: 0.55 !important;
  color: #a3a3a3 !important;
  margin: 0 0.2rem 0 0 !important;
  padding: 0.35rem !important;
  border-radius: 0.375rem !important;
  line-height: 1 !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
}

.sidebar .attributes-expand-btn:hover,
.sidebar .attributes-row:hover .attributes-expand-btn {
  opacity: 1 !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/*
 * Nested submenu — Agent flat align:
 * same icon column as Dashboard / Documents (no Paperless ms-2 stagger).
 * Nesting is shown only by quieter type + soft inset background group.
 */
.sidebar .attributes-submenu,
.sidebar .attributes-submenu.ms-2 {
  margin: 0.1rem 0 0.35rem 0 !important;
  padding: 0.15rem 0 !important;
  border-left: none !important;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
}

.sidebar .attributes-submenu .nav {
  gap: 1px;
}

.sidebar .attributes-submenu .nav-link {
  /* identical horizontal padding → icons share top-level column */
  padding: 0.4rem 0.7rem !important;
  font-size: 0.78125rem !important;
  color: #8a8a8a !important;
  border-radius: 0.45rem !important;
}

.sidebar .attributes-submenu .nav-link:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.045) !important;
}

.sidebar .attributes-submenu .nav-link.active {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.sidebar .attributes-submenu .nav-link > i-bs,
.sidebar .attributes-submenu .nav-link i-bs.me-2 {
  flex: 0 0 1.125rem !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
}

/* Slim toggle — quiet Agent chip */
.sidebar-slim-toggler,
.btn.sidebar-slim-toggler {
  background: #1e1e1e !important;
  border: 1px solid #2a2a2a !important;
  color: #a3a3a3 !important;
  border-radius: 0.375rem !important;
  box-shadow: none !important;
}
.sidebar-slim-toggler:hover {
  background: #2a2a2a !important;
  color: #ffffff !important;
}

/* Version / docs footer links */
.sidebar .nav-item .nav-link small,
.sidebar .text-muted {
  color: #737373 !important;
}

/* Tables */
.table,
.table > :not(caption) > * > * {
  background-color: #1e1e1e !important;
  color: #ececec !important;
  border-color: #2a2a2a !important;
  --bs-table-bg: #1e1e1e !important;
  --bs-table-color: #ececec !important;
  --bs-table-border-color: #2a2a2a !important;
  --bs-table-striped-bg: #171717 !important;
  --bs-table-hover-bg: #2a2a2a !important;
}

/* Badges / tags — monochrome */
.badge,
.tag,
.pngx-tag {
  background-color: #2a2a2a !important;
  color: #ececec !important;
  border: 1px solid #3a3a3a !important;
  font-weight: 500 !important;
}

.badge.bg-primary,
.badge.text-bg-primary {
  background-color: #ffffff !important;
  color: #0a0a0a !important;
  border-color: #ffffff !important;
}

.badge.bg-success,
.badge.bg-danger,
.badge.bg-warning,
.badge.bg-info,
.badge.text-bg-success,
.badge.text-bg-danger,
.badge.text-bg-warning,
.badge.text-bg-info {
  background-color: #2a2a2a !important;
  color: #ececec !important;
}

/* Text utilities */
.text-primary,
.text-success,
.text-info,
.text-warning,
a.text-primary {
  color: #ffffff !important;
}
.text-muted,
.text-secondary,
.text-body-secondary {
  color: #a3a3a3 !important;
}
.text-dark,
.text-black {
  color: #ececec !important;
}
.text-danger {
  color: #d4d4d4 !important;
}

/* Alerts — no colored fills */
.alert {
  background-color: #1e1e1e !important;
  border: 1px solid #3a3a3a !important;
  color: #ececec !important;
  border-radius: 0.75rem !important;
}
.alert-success,
.alert-danger,
.alert-warning,
.alert-info,
.alert-primary {
  background-color: #1e1e1e !important;
  border-color: #3a3a3a !important;
  color: #ececec !important;
}

/* Pagination */
.page-link {
  background-color: #1e1e1e !important;
  border-color: #2a2a2a !important;
  color: #ececec !important;
}
.page-item.active .page-link {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #0a0a0a !important;
}
.page-link:hover {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
}

/* Progress / spinners */
.progress {
  background-color: #1e1e1e !important;
}
.progress-bar {
  background-color: #ffffff !important;
}
.spinner-border,
.spinner-grow {
  color: #ffffff !important;
  border-color: #ffffff transparent #ffffff transparent !important;
}

/* Dropdowns */
.dropdown-item {
  color: #ececec !important;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}
.dropdown-divider {
  border-color: #2a2a2a !important;
}

/* ng-select / paperless widgets */
.ng-select .ng-select-container,
.ng-dropdown-panel {
  background-color: #0d0d0d !important;
  border-color: #2a2a2a !important;
  color: #ececec !important;
}
.ng-dropdown-panel .ng-option {
  background-color: #1e1e1e !important;
  color: #ececec !important;
}
.ng-dropdown-panel .ng-option-marked,
.ng-dropdown-panel .ng-option-selected {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
}

/* Document list / cards hover */
.card:hover,
.list-group-item:hover {
  background-color: #242424 !important;
}

/* Scrollbars */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: #0d0d0d;
}
*::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* ========== Login / accounts pages ========== */
body.text-center,
.form-accounts {
  background-color: #111111 !important;
  color: #ececec !important;
}

.form-accounts .form-control {
  background-color: #0d0d0d !important;
  border-color: #2a2a2a !important;
  color: #ececec !important;
}

.form-accounts h1,
.form-accounts .text-primary,
.form-accounts span.ms-2 {
  color: #ffffff !important;
}

.byline {
  color: #737373 !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.12rem !important;
  font-weight: 500 !important;
}

/* Logo leaf → white */
svg.logo .leaf,
svg .leaf {
  fill: #ffffff !important;
}
svg.logo text,
svg.logo .text {
  fill: #ffffff !important;
}

/* Loader splash */
.app-loader h6,
.app-loader p {
  color: #a3a3a3 !important;
}
.bg-light.w-100.h-100 {
  background-color: #111111 !important;
}

/* Kill remaining green tints anywhere */
[style*="#17541f"],
[style*="rgb(23, 84, 31)"],
[style*="hsl(128"] {
  /* can't override inline easily; vars above cover most */
}

a:not(.btn) {
  color: #ffffff;
}
a:not(.btn):hover {
  color: #d4d4d4;
}

/* Toasts */
.toast {
  background-color: #1e1e1e !important;
  border: 1px solid #2a2a2a !important;
  color: #ececec !important;
}

/* Close buttons */
.btn-close {
  filter: invert(1) grayscale(1) !important;
  opacity: 0.7 !important;
}
.btn-close:hover {
  opacity: 1 !important;
}

/* Headings weight like Agent */
h1, h2, h3, h4, h5, h6,
.page-title,
.card-title {
  color: #ececec !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}

/* ========== Top bar brand — kill Paperless leaf, Agent mark ========== */
.navbar.navbar-dark,
.navbar.bg-primary,
nav.navbar.fixed-top {
  background-color: #0d0d0d !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

.navbar-brand {
  gap: 0.55rem !important;
  color: #ffffff !important;
}

/* Hide Paperless leaf glyph — replace with N mark */
.navbar-brand > svg {
  display: none !important;
}

.navbar-brand::before {
  content: "N";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  border-radius: 0.5rem;
  background: #ffffff;
  color: #0a0a0a;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.03em;
  line-height: 1;
}

.navbar-brand .title,
.navbar-brand .custom-title .title {
  font-family: "Inter", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
}

.navbar-brand .byline {
  color: #737373 !important;
  font-size: 0.5625rem !important;
  letter-spacing: 0.14em !important;
  font-weight: 500 !important;
  margin-top: 0.05rem !important;
}

.navbar-brand .ms-2,
.navbar-brand .ms-md-3 {
  margin-left: 0 !important;
}

/* Slim brand: keep mark only */
.navbar-brand.slim::before {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.8rem;
}