:root {
  /* NR Engineering brand colour - single source of truth */
  --nr-primary: #971867;
  --nr-primary-rgb: 151, 24, 103;
  --nr-primary-hover: #88165d;
  --nr-primary-active: #7c1454;
}

/* NR layer: keep custom changes here rather than editing Vuexy core files. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-primary: var(--nr-primary);
  --bs-primary-rgb: var(--nr-primary-rgb);
}

.nr-brand-wrap .app-brand-link { overflow: visible; }
.nr-brand-mark {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .55rem;
  background: var(--nr-primary);
  color: #fff;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: -.04em;
  box-shadow: 0 .25rem .75rem rgba(var(--nr-primary-rgb), .22);
}

.btn-primary {
  --bs-btn-bg: var(--nr-primary);
  --bs-btn-border-color: var(--nr-primary);
  --bs-btn-hover-bg: var(--nr-primary-hover);
  --bs-btn-hover-border-color: var(--nr-primary-hover);
  --bs-btn-active-bg: var(--nr-primary-active);
  --bs-btn-active-border-color: var(--nr-primary-active);
}

.bg-label-primary { background-color: rgba(var(--nr-primary-rgb), .12) !important; color: var(--nr-primary) !important; }
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) { background: linear-gradient(72.47deg, var(--nr-primary) 22.16%, rgba(var(--nr-primary-rgb), .7) 76.47%) !important; box-shadow: 0 2px 6px 0 rgba(var(--nr-primary-rgb), .3); }

.nr-welcome-card { background: linear-gradient(135deg, rgba(var(--nr-primary-rgb), .10), rgba(var(--nr-primary-rgb), .02)); }
.nr-brand-watermark { font-size: 4rem; font-weight: 800; line-height: 1; color: rgba(var(--nr-primary-rgb), .14); letter-spacing: -.08em; }
.menu-item.disabled > .menu-link { cursor: default; opacity: .65; }

.authentication-wrapper.authentication-basic { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.authentication-wrapper .authentication-inner { width: 100%; max-width: 460px; }

/* ---------------------------------------------------------
   Standard table cards
   Give non-DataTable tables breathing room at the bottom so
   the Vuexy card's rounded lower corners remain visible.
   DataTables manage their own footer/pagination spacing.
   --------------------------------------------------------- */
.card > .table-responsive > .table:not(.dataTable):not([class*="datatable"]) {
  margin-bottom: 1rem !important;
}



/* ---------------------------------------------------------
   DataTables footer spacing
   Keep the info/pagination controls clear of the lower card
   edge so the rounded Vuexy corners remain visible.
   --------------------------------------------------------- */
.card .dt-container > .row:last-child,
.card div.dt-container > .row:last-child {
  padding-top: 1rem !important;
  padding-bottom: .75rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.card .dt-container > .row:last-child > [class*="col-"],
.card div.dt-container > .row:last-child > [class*="col-"] {
  padding-left: 1rem;
  padding-right: 1rem;
}


/* Employee Portal navbar user avatar - match Admin navbar */
.nr-employee-user-avatar {
  width: 38px;
  height: 38px;
}

.nr-employee-user-avatar .avatar-initial {
  width: 100%;
  height: 100%;
  font-size: .9375rem;
}

.nr-employee-user-avatar.avatar-online::after {
  width: .55rem;
  height: .55rem;
  right: 0;
  bottom: 0;
  border: 2px solid var(--bs-body-bg);
  background-color: var(--bs-success);
}


/* ---------------------------------------------------------
   Employee OEE card definition
   Softer contrast: clearer than the original, but not overly boxed-in.
   --------------------------------------------------------- */

[data-bs-theme="dark"] .nr-oee-hub-content .card {
  background-color: #32384f !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  box-shadow: 0 .2rem .7rem rgba(0, 0, 0, .14) !important;
}

/* Main filter/table/status containers get only a very slight lift. */
[data-bs-theme="dark"] .nr-oee-hub-content > .container > .card,
[data-bs-theme="dark"] .nr-oee-hub-content .nr-oee-switch-card {
  background-color: #343a52 !important;
  border-color: rgba(255, 255, 255, .08) !important;
  box-shadow: 0 .25rem .8rem rgba(0, 0, 0, .15) !important;
}

/* Nested machine cards stay just a touch above their parent surface. */
[data-bs-theme="dark"] .nr-oee-hub-content .nr-oee-live-machine {
  background-color: #353b53 !important;
  border-color: rgba(255, 255, 255, .065) !important;
  box-shadow: 0 .12rem .45rem rgba(0, 0, 0, .11) !important;
}

[data-bs-theme="dark"] .nr-oee-hub-content .nr-oee-live-machine:hover,
[data-bs-theme="dark"] .nr-oee-hub-content .nr-oee-dashboard-action:hover {
  border-color: rgba(var(--bs-primary-rgb), .35) !important;
  box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .16) !important;
}

/* Light mode remains understated. */
[data-bs-theme="light"] .nr-oee-hub-content .card {
  border: 1px solid rgba(47, 43, 61, .065) !important;
  box-shadow: 0 .18rem .65rem rgba(47, 43, 61, .065) !important;
}


/* ---------------------------------------------------------
   Employee OEE entry-flow card definition
   Match the softer contrast used on the OEE dashboard.
   --------------------------------------------------------- */

/* Department/machine selector */
[data-bs-theme="dark"] .nr-oee-selector-container .nr-employee-content-card,
[data-bs-theme="dark"] .nr-oee-selector-container .nr-oee-department-card,
[data-bs-theme="dark"] .nr-oee-selector-container .nr-oee-machine-card {
  background-color: #32384f !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  box-shadow: 0 .2rem .7rem rgba(0, 0, 0, .14) !important;
}

[data-bs-theme="dark"] .nr-oee-selector-container .nr-oee-department-card:hover,
[data-bs-theme="dark"] .nr-oee-selector-container .nr-oee-machine-card:hover {
  background-color: #343a52 !important;
  border-color: rgba(var(--bs-primary-rgb), .32) !important;
  box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .16) !important;
}

/* OEE form: status controls, machine switcher and main form cards */
[data-bs-theme="dark"] .nr-oee-form-shell .nr-oee-machine-controls-card,
[data-bs-theme="dark"] .nr-oee-form-shell .nr-oee-switch-card,
[data-bs-theme="dark"] .nr-oee-form-background .nr-oee-production-card,
[data-bs-theme="dark"] .nr-oee-form-background > .nr-oee-form-inner > form > .row > [class*="col-"] > .card {
  background-color: #32384f !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  box-shadow: 0 .2rem .7rem rgba(0, 0, 0, .14) !important;
}

/* Give the two floating controls a tiny extra lift from the background. */
[data-bs-theme="dark"] .nr-oee-form-shell .nr-oee-machine-controls-card,
[data-bs-theme="dark"] .nr-oee-form-shell .nr-oee-switch-card {
  background-color: #343a52 !important;
  border-color: rgba(255, 255, 255, .08) !important;
  box-shadow: 0 .25rem .8rem rgba(0, 0, 0, .15) !important;
}

/* Light mode: just enough edge definition without changing Vuexy's surface. */
[data-bs-theme="light"] .nr-oee-selector-container .card,
[data-bs-theme="light"] .nr-oee-form-shell .card,
[data-bs-theme="light"] .nr-oee-form-background .card {
  border: 1px solid rgba(47, 43, 61, .065) !important;
  box-shadow: 0 .18rem .65rem rgba(47, 43, 61, .065) !important;
}


/* ---------------------------------------------------------
   OEE front-end overflow guard
   Prevent the full-width OEE background/overlap treatment from
   creating a horizontal browser scrollbar.
   --------------------------------------------------------- */

html:has(.nr-oee-form-section),
body:has(.nr-oee-form-section),
html:has(.nr-oee-selector-container),
body:has(.nr-oee-selector-container) {
  overflow-x: hidden !important;
}


/* Autosave error is intentionally interactive so the operator can see why. */
.nr-oee-save-error {
  text-decoration: underline dotted;
  text-underline-offset: .2rem;
}


/* OEE horizontal overflow fix - page level only.
   Do not constrain the OEE component widths themselves. */
body:has(.nr-oee-form-section),
body:has(.nr-oee-selector-container) {
  width: 100%;
  overflow-x: hidden !important;
}

html:has(.nr-oee-form-section),
html:has(.nr-oee-selector-container) {
  overflow-x: hidden !important;
}


/* OEE final confirmation */
.nr-oee-confirm-check {
  width: 100%;
  min-height: 48px;
  padding: .75rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.nr-oee-confirm-check:hover {
  border-color: rgba(var(--bs-primary-rgb), .35);
  background: rgba(var(--bs-primary-rgb), .025);
}

.nr-oee-confirm-check .form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0;
}

.nr-oee-confirm-check:has(.form-check-input:checked) {
  border-color: rgba(var(--bs-success-rgb), .35);
  background: rgba(var(--bs-success-rgb), .045);
}

/* ---------------------------------------------------------
   Flatpickr inside Bootstrap / Vuexy modals
   Keep calendars above the modal and its backdrop.
   --------------------------------------------------------- */
.flatpickr-calendar {
  z-index: 1090 !important;
}



/* ===== NR Portal logo =====
   Shared branding for Admin, Employee Portal and sign-in. */
.nr-portal-logo-link{
  display:inline-flex;
  align-items:center;
  min-width:0;
}

.nr-portal-logo{
  display:block;
  width:auto;
  height:42px;
  max-width:190px;
  object-fit:contain;
}

.nr-portal-logo-dark{
  display:none;
}

[data-bs-theme="dark"] .nr-portal-logo-light{
  display:none;
}

[data-bs-theme="dark"] .nr-portal-logo-dark{
  display:block;
}

/* Employee navbar keeps the landscape logo compact. */
.nr-employee-navbar .nr-portal-logo{
  height:40px;
  max-width:172px;
}

/* Admin sidebar: fit the expanded menu without crowding the toggle. */
#layout-menu .nr-portal-logo{
  height:38px;
  max-width:155px;
}

.nr-portal-logo-login{
  height:54px;
  max-width:235px;
}

/* On a collapsed desktop sidebar, show only the NR badge portion of the
   landscape artwork without introducing a second brand design. */
@media (min-width:1200px){
  .layout-menu-collapsed #layout-menu .nr-portal-logo-link{
    width:42px;
    overflow:hidden;
  }
  .layout-menu-collapsed #layout-menu .nr-portal-logo{
    width:155px;
    max-width:none;
    object-fit:contain;
    object-position:left center;
  }
}

@media (max-width:575.98px){
  .nr-employee-navbar .nr-portal-logo{
    height:36px;
    max-width:150px;
  }
}


/* ===== NR Portal logo sizing correction =====
   Prevent the source artwork from ever expanding beyond the navbar/sidebar slot. */
.nr-portal-logo-link{
  flex:0 0 auto;
  max-width:190px;
  overflow:hidden;
}

.nr-portal-logo{
  display:block !important;
  width:auto !important;
  height:40px !important;
  max-width:180px !important;
  max-height:40px !important;
  object-fit:contain !important;
}

/* Employee navbar */
.nr-employee-navbar .nr-portal-logo-link{
  width:178px;
  max-width:178px;
}
.nr-employee-navbar .nr-portal-logo{
  width:auto !important;
  height:38px !important;
  max-width:178px !important;
  max-height:38px !important;
}

/* Admin sidebar */
#layout-menu .nr-portal-logo-link{
  width:160px;
  max-width:160px;
}
#layout-menu .nr-portal-logo{
  height:36px !important;
  max-width:160px !important;
  max-height:36px !important;
}

/* Login page can be a little larger, but still bounded. */
.nr-portal-logo-login{
  height:50px !important;
  max-width:220px !important;
  max-height:50px !important;
}

/* Mobile employee navbar */
@media (max-width:575.98px){
  .nr-employee-navbar .nr-portal-logo-link{
    width:150px;
    max-width:150px;
  }
  .nr-employee-navbar .nr-portal-logo{
    height:34px !important;
    max-width:150px !important;
    max-height:34px !important;
  }
}


/* ===== NR Portal logo theme visibility correction =====
   Must come after the shared !important sizing rule so only ONE logo renders. */
html:not([data-bs-theme="dark"]) .nr-portal-logo-light{
  display:block !important;
}
html:not([data-bs-theme="dark"]) .nr-portal-logo-dark{
  display:none !important;
}

html[data-bs-theme="dark"] .nr-portal-logo-light{
  display:none !important;
}
html[data-bs-theme="dark"] .nr-portal-logo-dark{
  display:block !important;
}

/* ===== Employee Portal navbar quick actions =====
   Front-end only: match the Admin navbar's tight spacing and obvious hover. */
.nr-employee-navbar .nr-navbar-quick-actions{
  gap:4px !important;
}

.nr-employee-navbar .nr-navbar-quick-actions > .nav-item{
  margin-left:0 !important;
  margin-right:0 !important;
}

.nr-employee-navbar .nr-navbar-quick-actions .nr-navbar-quick-action{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  padding:0 !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  border-radius:50% !important;
  transition:background-color .15s ease, color .15s ease;
}

@media (hover:hover) and (pointer:fine){
  .nr-employee-navbar .nr-navbar-quick-actions .nr-navbar-quick-action:hover,
  .nr-employee-navbar .nr-navbar-quick-actions .nr-navbar-quick-action:focus-visible{
    background-color:var(--bs-gray-200) !important;
  }
}

[data-bs-theme="dark"] .nr-employee-navbar .nr-navbar-quick-actions .nr-navbar-quick-action:hover,
[data-bs-theme="dark"] .nr-employee-navbar .nr-navbar-quick-actions .nr-navbar-quick-action:focus-visible{
  background-color:var(--bs-gray-700) !important;
}

/* Keep the avatar close to the two quick actions without altering Admin Portal spacing. */
.nr-employee-navbar .nr-navbar-quick-actions > .nav-item:last-child{
  margin-left:6px !important;
}


/* ===== Notifications ===== */
.nr-notification-dropdown{
  width:min(390px,calc(100vw - 1.5rem));
  overflow:hidden;
}

.nr-notification-dropdown .dropdown-notifications-list{
  display:block;
  max-height:420px;
  overflow-y:auto;
}

.nr-notification-dropdown .dropdown-notifications-item > a{
  text-decoration:none;
}

.nr-notification-dropdown .dropdown-notifications-item:hover{
  background:var(--bs-gray-100);
}

.nr-notification-unread{
  background:rgba(var(--bs-primary-rgb),.055);
}

.nr-notification-message{
  white-space:normal;
  line-height:1.35;
  margin:.18rem 0;
}

.nr-notification-bell-dot{
  position:absolute;
  top:-1px;
  right:-3px;
  width:7px;
  height:7px;
  min-width:7px;
  padding:0;
  border:2px solid var(--bs-paper-bg);
  box-sizing:content-box;
}

.nr-notifications-page{
  padding-top:110px !important;
}

[data-bs-theme="dark"] .nr-notification-dropdown .dropdown-notifications-item:hover{
  background:var(--bs-gray-800);
}


/* ===== Notification bell dot - Vuexy style =====
   Small circular point tucked neatly into the bell's top-right corner. */
.nr-navbar-quick-actions .position-relative > .nr-notification-bell-dot{
  position:absolute !important;
  top:-4px !important;
  right:-5px !important;
  width:8px !important;
  height:8px !important;
  min-width:8px !important;
  min-height:8px !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  border-radius:50% !important;
  background:var(--bs-danger) !important;
  border:2px solid var(--bs-paper-bg) !important;
  box-sizing:content-box !important;
  line-height:0 !important;
  pointer-events:none;
  z-index:2;
}

/* Remove any effect from the older notification-dot rule. */
.nr-notification-bell-dot::before,
.nr-notification-bell-dot::after{
  content:none !important;
}

/* Requests uses the same Vuexy dropdown structure as Notifications. */
.nr-leave-request-plane{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nr-leave-request-count{position:absolute;right:-7px;top:-8px;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:#b31770;color:#fff;font-size:10px;font-weight:800;line-height:1;border:2px solid var(--bs-paper-bg);z-index:3}
.nr-leave-request-normal[hidden],.nr-leave-request-confirm[hidden]{display:none!important}
.nr-leave-request-confirm{display:flex;align-items:center;justify-content:space-between;gap:16px}
#layout-navbar .nr-leave-request-dropdown{margin-right:.5rem}
@media(max-width:440px){.nr-leave-request-confirm{align-items:stretch;flex-direction:column}.nr-leave-request-confirm>div:last-child{justify-content:flex-end}}


/* ===== Notification bell dot positioning correction =====
   Shared Admin + Employee treatment. Keep the dot fully inside the 36/40px
   button so it cannot be clipped by navbar/dropdown overflow. */
.dropdown-notifications > .nav-link{
  overflow:visible !important;
}

.dropdown-notifications > .nav-link > .position-relative{
  overflow:visible !important;
}

.dropdown-notifications .nr-notification-bell-dot{
  position:absolute !important;
  top:-2px !important;
  right:-3px !important;
  width:7px !important;
  height:7px !important;
  min-width:7px !important;
  min-height:7px !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  border-radius:50% !important;
  background-color:#ff4c51 !important;
  border:2px solid var(--bs-paper-bg) !important;
  box-sizing:content-box !important;
  line-height:0 !important;
  pointer-events:none !important;
  z-index:10 !important;
}

/* The Employee quick-action row was clipping the point at its top edge. */
.nr-employee-navbar .nr-navbar-quick-actions,
.nr-employee-navbar .nr-navbar-quick-actions > .nav-item,
.nr-employee-navbar .dropdown-notifications{
  overflow:visible !important;
}