/* Ny stil för 4PIM, i samma anda som Ellectual-ERP:s nya stil.
   Lugn ljus bakgrund, mörk meny, petrol som accentfärg, vita kort med mjuka hörn.
   Allt är avgränsat till body.ny-stil, så att en sida utan klassen ser ut som förut.
   Laddas efter Bootstrap och efter static/style.css. */

body.ny-stil {
  --n-primary: #0e6a7b;
  --n-primary-dark: #0b5767;
  --n-primary-rgb: 14, 106, 123;
  --n-primary-light: #7fd0dc;
  --n-text: #12212e;
  --n-muted: #5b6b78;
  --n-line: #cfd8df;
  --n-border: #e2e8ee;
  --n-soft: #f6f8fa;
  --n-bg: #f4f7f9;
  --n-nav: #12212e;

  /* Bootstraps egna variabler, så att bg-primary, text-primary, länkar och ramar följer med */
  --bs-primary: var(--n-primary);
  --bs-primary-rgb: var(--n-primary-rgb);
  --bs-primary-bg-subtle: #dff2f5;
  --bs-primary-text-emphasis: #0b4f5c;
  --bs-primary-border-subtle: #a9dbe3;
  --bs-link-color: var(--n-primary);
  --bs-link-color-rgb: var(--n-primary-rgb);
  --bs-link-hover-color: var(--n-primary-dark);
  --bs-link-hover-color-rgb: 11, 87, 103;
  --bs-body-bg: #fff;              /* kort, fält och tabeller blir vita */
  --bs-tertiary-bg: var(--n-soft);
  --bs-body-color: var(--n-text);
  --bs-secondary-color: var(--n-muted);
  --bs-border-color: var(--n-border);
  --bs-border-radius: .5rem;
  --bs-border-radius-sm: .4rem;
  --bs-border-radius-lg: .75rem;
  --bs-focus-ring-color: rgba(var(--n-primary-rgb), .2);

  /* Sidomenyerna i CRM, Lager och HR läser dessa */
  --sidebar-bg: var(--n-nav);
  --sidebar-hover: rgba(255, 255, 255, .08);
  --sidebar-active: rgba(255, 255, 255, .14);

  background: var(--n-bg);
  color: var(--n-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.ny-stil .text-muted { color: var(--n-muted) !important; }

/* ---------- Toppmeny (4PIM) ---------- */
body.ny-stil .navbar.bg-dark {
  background: var(--n-nav) !important;
  border-bottom: 1px solid #0b1620;
  padding-top: .55rem; padding-bottom: .55rem;
}
body.ny-stil .navbar-brand, body.ny-stil .navbar-brand:hover { color: #fff; letter-spacing: -.01em; }
body.ny-stil .navbar-dark .nav-link {
  border-radius: 8px; padding: .4rem .6rem; color: rgba(255, 255, 255, .72); font-weight: 500;
  font-size: .92rem; white-space: nowrap;
}
@media (min-width: 992px) {
  body.ny-stil .navbar-dark .navbar-nav { gap: .1rem; align-items: center; }
}
body.ny-stil .navbar-dark .nav-link:hover,
body.ny-stil .navbar-dark .nav-link:focus { background: rgba(255, 255, 255, .08); color: #fff; }
body.ny-stil .navbar-dark .nav-link.active,
body.ny-stil .navbar-dark .nav-link.show { background: rgba(255, 255, 255, .14); color: #fff; }
body.ny-stil .navbar .text-secondary { color: rgba(255, 255, 255, .5) !important; }
body.ny-stil .dropdown-menu {
  border: 1px solid var(--n-border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(18, 33, 46, .12); padding: .35rem;
}
body.ny-stil .dropdown-item { border-radius: 6px; color: var(--n-text); padding: .4rem .75rem; }
body.ny-stil .dropdown-item:hover, body.ny-stil .dropdown-item:focus { background: var(--n-soft); color: var(--n-text); }
body.ny-stil .dropdown-item.active, body.ny-stil .dropdown-item:active { background: var(--n-primary); color: #fff; }

/* Innehållet får en lagom maxbredd på stora skärmar */
body.ny-stil > main.container-fluid { max-width: 1440px; margin-left: auto; margin-right: auto; }

/* ---------- Sidomenyer (CRM, Lager, HR) ---------- */
body.ny-stil .crm-sidebar, body.ny-stil .lager-sidebar, body.ny-stil .hr-sidebar { border-right: 1px solid #0b1620; }
body.ny-stil .crm-sidebar .brand span, body.ny-stil .lager-sidebar .brand span,
body.ny-stil .hr-sidebar .brand span, body.ny-stil .learn-nav .navbar-brand span { color: var(--n-primary-light); }
body.ny-stil .crm-sidebar .nav-link, body.ny-stil .lager-sidebar .nav-link, body.ny-stil .hr-sidebar .nav-link {
  border-radius: 8px; font-weight: 500;
}
body.ny-stil .crm-sidebar .nav-link.active, body.ny-stil .lager-sidebar .nav-link.active,
body.ny-stil .hr-sidebar .nav-link.active { box-shadow: inset 3px 0 0 var(--n-primary-light); }
body.ny-stil .learn-nav { background: var(--n-nav) !important; }
body.ny-stil .side-link { color: var(--n-text); border-radius: 8px; }
body.ny-stil .side-link:hover { background: #e6f1f3; }
body.ny-stil .side-link.active { background: var(--n-primary); color: #fff; }
body.ny-stil .learn-body blockquote { border-left-color: var(--n-primary); background: #e9f5f7; }

/* ---------- Rubriker ---------- */
body.ny-stil h1, body.ny-stil h2, body.ny-stil h3, body.ny-stil h4 { letter-spacing: -.015em; color: var(--n-text); }
body.ny-stil h1, body.ny-stil h2 { font-weight: 700; }
body.ny-stil .crm-header h1, body.ny-stil .lager-header h1, body.ny-stil .hr-header h1 { font-size: 1.6rem; }

/* ---------- Knappar ---------- */
body.ny-stil .btn { border-radius: 8px; font-weight: 600; }
body.ny-stil .btn-primary {
  --bs-btn-bg: var(--n-primary); --bs-btn-border-color: var(--n-primary); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--n-primary-dark); --bs-btn-hover-border-color: var(--n-primary-dark); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #094a57; --bs-btn-active-border-color: #094a57;
  --bs-btn-disabled-bg: var(--n-primary); --bs-btn-disabled-border-color: var(--n-primary);
  --bs-btn-focus-shadow-rgb: var(--n-primary-rgb);
}
body.ny-stil .btn-outline-primary {
  --bs-btn-color: var(--n-primary); --bs-btn-border-color: var(--n-line); --bs-btn-bg: #fff;
  --bs-btn-hover-bg: var(--n-primary); --bs-btn-hover-border-color: var(--n-primary); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--n-primary-dark); --bs-btn-active-border-color: var(--n-primary-dark);
  --bs-btn-focus-shadow-rgb: var(--n-primary-rgb);
}
body.ny-stil .btn-outline-secondary {
  --bs-btn-color: var(--n-text); --bs-btn-border-color: var(--n-line); --bs-btn-bg: #fff;
  --bs-btn-hover-bg: var(--n-soft); --bs-btn-hover-border-color: #bcc8d1; --bs-btn-hover-color: var(--n-text);
  --bs-btn-active-bg: #eaeff3; --bs-btn-active-border-color: #bcc8d1; --bs-btn-active-color: var(--n-text);
}
body.ny-stil .btn-link { color: var(--n-primary); text-decoration: none; font-weight: 500; }

/* ---------- Fält ---------- */
body.ny-stil .form-control, body.ny-stil .form-select { border-color: var(--n-line); border-radius: 8px; }
body.ny-stil .form-control:focus, body.ny-stil .form-select:focus {
  border-color: var(--n-primary); box-shadow: 0 0 0 .2rem rgba(var(--n-primary-rgb), .15);
}
body.ny-stil .form-check-input:checked { background-color: var(--n-primary); border-color: var(--n-primary); }
body.ny-stil .form-check-input:focus { border-color: var(--n-primary); box-shadow: 0 0 0 .2rem rgba(var(--n-primary-rgb), .15); }
body.ny-stil .form-label { font-weight: 500; }

/* ---------- Kort ---------- */
body.ny-stil .card {
  --bs-card-border-color: var(--n-border);
  --bs-card-border-radius: 12px;
  --bs-card-inner-border-radius: 11px;
  --bs-card-cap-bg: var(--n-soft);
}
body.ny-stil .card.shadow-sm, body.ny-stil .shadow-sm { box-shadow: 0 1px 2px rgba(18, 33, 46, .05) !important; }
body.ny-stil .card-header { font-weight: 600; }

/* ---------- Tabeller ---------- */
body.ny-stil .table { --bs-table-border-color: var(--n-border); --bs-table-hover-bg: #f1f7f9; }
body.ny-stil .table > :not(caption) > * > * { border-bottom-color: var(--n-border); }
body.ny-stil .table th { font-size: .8rem; font-weight: 600; color: var(--n-muted); }
body.ny-stil .table-light, body.ny-stil .table-dark, body.ny-stil thead.table-light, body.ny-stil thead.table-dark {
  --bs-table-bg: var(--n-soft); --bs-table-color: var(--n-muted);
  --bs-table-border-color: var(--n-border); border-color: var(--n-border);
}
body.ny-stil .table-responsive {
  background: #fff; border: 1px solid var(--n-border); border-radius: 12px;
}
body.ny-stil .table-responsive > .table { margin-bottom: 0; }
body.ny-stil .card .table-responsive { border: 0; border-radius: 0; }
body.ny-stil .table-active { --bs-table-bg-state: #e6f1f3; }
/* Valda rader i katalogen (style.css) */
body.ny-stil .productRow.selected { background-color: #e6f1f3; }

/* ---------- Etiketter som mjuka piller ---------- */
body.ny-stil .badge { border-radius: 999px; font-weight: 500; padding: .35em .7em; }
body.ny-stil .badge.bg-secondary { background: #eceff2 !important; color: #4a5964 !important; }
body.ny-stil .badge.bg-success { background: #e1f3e8 !important; color: #17693c !important; }
body.ny-stil .badge.bg-primary { background: #e0eef6 !important; color: #14597f !important; }
body.ny-stil .badge.bg-info { background: #dff2f5 !important; color: #0e6a7b !important; }
body.ny-stil .badge.bg-warning { background: #fcefd0 !important; color: #7d5200 !important; }
body.ny-stil .badge.bg-danger { background: #fae3e3 !important; color: #9b2a2a !important; }
body.ny-stil .badge.bg-dark { background: #dfe5ea !important; color: var(--n-text) !important; }
body.ny-stil .badge.bg-light { background: #fff !important; color: var(--n-muted) !important; border: 1px solid var(--n-border); }
/* Räknare i mörka menyer ska synas mot mörk bakgrund */
body.ny-stil .navbar .badge.bg-warning, body.ny-stil .crm-sidebar .badge, body.ny-stil .lager-sidebar .badge,
body.ny-stil .hr-sidebar .badge { background: #f2b632 !important; color: #12212e !important; }

/* ---------- Övrigt ---------- */
body.ny-stil .alert { border-radius: 10px; }
body.ny-stil .nav-tabs { --bs-nav-tabs-border-color: var(--n-border); }
body.ny-stil .nav-tabs .nav-link { color: var(--n-muted); font-weight: 500; }
body.ny-stil .nav-tabs .nav-link.active { color: var(--n-text); border-color: var(--n-border) var(--n-border) #fff; }
body.ny-stil .nav-pills { --bs-nav-pills-link-active-bg: var(--n-primary); }
body.ny-stil .list-group { --bs-list-group-border-color: var(--n-border); --bs-list-group-active-bg: var(--n-primary); --bs-list-group-active-border-color: var(--n-primary); }
body.ny-stil .page-link { color: var(--n-primary); border-color: var(--n-border); }
body.ny-stil .page-item.active .page-link { background: var(--n-primary); border-color: var(--n-primary); color: #fff; }
body.ny-stil .progress-bar { background-color: var(--n-primary); }

/* ---------- Inloggning ---------- */
body.ny-stil.inloggning h1 { color: var(--n-text); letter-spacing: -.02em; }
body.ny-stil.inloggning h1::after { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--n-primary); margin: .6rem auto 0; }
body.ny-stil.inloggning .card { border: 0; box-shadow: 0 12px 32px rgba(18, 33, 46, .14) !important; }