/* ======================================================
   HEWEA PORTAL — GLOBAL STYLES (CLEAN)
   Kolor firmowy: #39ff14 (neon green) / tło: #000
   ====================================================== */

/* ======================================================
   1. VARIABLES
   ====================================================== */
:root {
  --primary-accent: #39ff14;
  --primary-hover: #2eff09;

  --bg-main: #000;
  --bg-secondary: #111;
  --bg-header: #000;

  --text-main: #ffffff;

  --radius: 6px;
}

/* ======================================================
   2. GLOBAL
   ====================================================== */
body {
  margin: 0;
  padding: 0;
  background: var(--bg-main);
  color: var(--text-main);
}

/* ======================================================
   3. LAYOUT
   ====================================================== */
.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-content {
  flex: 1;
}

#content {
  width: 100%;
  max-width: none;
  padding: 0 20px;
}

/* ======================================================
   4. NAVBAR / HEADER
   ====================================================== */
.navbar.static-top {
  height: 80px;
  background: var(--bg-header) !important;
  display: flex;
  align-items: center;
}

/* Linki w menu (wyzsza specyficznosc by wygrac z theme.css / portalbasictheme.css) */
body .static-top.navbar a,
body .static-top.navbar .nav-link,
body .static-top.navbar .navbar-nav .nav-link,
body .static-top.navbar .navbar-nav .nav-link:visited,
body .static-top.navbar .menu-bar .navbar-nav li a {
  color: var(--primary-accent) !important;
  opacity: 1 !important;
}

body .static-top.navbar a:hover,
body .static-top.navbar .nav-link:hover,
body .static-top.navbar .navbar-nav .nav-link:hover {
  color: #fff !important;
  text-shadow: 0 0 6px var(--primary-accent);
}

/* Tytuł portalu (w nagłówku) */
.portal-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--primary-accent);
  font-size: 28px;
}

/* ======================================================
   4b. DROPDOWN MENU (ciemny motyw)
   ====================================================== */
body .navbar .dropdown-menu {
  background-color: var(--bg-secondary);
  border: 1px solid rgba(57, 255, 20, 0.2);
  border-radius: var(--radius);
}

body .navbar .dropdown-menu .dropdown-item {
  color: var(--primary-accent);
}

body .navbar .dropdown-menu .dropdown-item:hover,
body .navbar .dropdown-menu .dropdown-item:focus {
  background-color: rgba(57, 255, 20, 0.15);
  color: #fff;
}

body .navbar .dropdown-divider {
  border-color: rgba(57, 255, 20, 0.2);
}

/* Bootstrap 5 dropdown visibility fix - CRITICAL: must override .devices-page .dropdown-menu { display: none } */
.devices-page .dropdown-menu.show {
  display: block !important;
}

.dropdown-menu.show {
  display: block !important;
}



/* ======================================================
   5. BUTTONS / FORMS
   ====================================================== */
/* Przyciski – !important by wygrac z portalbasictheme.css */
body .btn-primary,
body .devices-page .btn-primary {
  background: var(--primary-accent) !important;
  color: #000 !important;
  border-color: var(--primary-accent) !important;
}

body .btn-primary:hover,
body .btn-primary:focus,
body .devices-page .btn-primary:hover,
body .devices-page .btn-primary:focus {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

body .btn-secondary,
body .btn-default,
body .devices-page .btn-secondary,
body .devices-page .btn-default {
  color: var(--primary-accent) !important;
  background: transparent !important;
  border: 1px solid var(--primary-accent) !important;
}

body .btn-secondary:hover,
body .btn-default:hover,
body .btn-secondary:focus,
body .btn-default:focus,
body .devices-page .btn-secondary:hover,
body .devices-page .btn-default:hover,
body .devices-page .btn-secondary:focus,
body .devices-page .btn-default:focus {
  background: rgba(57, 255, 20, 0.15) !important;
  color: #fff !important;
}

/* ======================================================
   6. PAGE SPECIFIC LAYOUTS
   (Added back because local page CSS is not loading)
   ====================================================== */

/* --- HOME PAGE --- */
body.home #mainContent,
body.home .wrapper-body,
body.home .page-copy,
body.home .xrm-editable-html,
body.home .xrm-attribute-value,
body.home .container, 
body.home .container-fluid { 
  margin: 0 !important; 
  padding: 0 !important; 
  max-width: 100% !important;
  width: 100% !important;
}

body.home .app-footer { 
  flex: 0 0 24px; 
  background: #000; 
  text-align: center; 
  color: #39ff14; 
  font-size: 7px; 
  line-height: 24px; 
}

/* --- DEVICES PAGE --- */
.devices-container {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  gap: 20px;
  padding: 0;
  align-items: flex-start;
}

.devices-container > .col-lg-5 {
  width: 420px !important;
  max-width: 420px !important;
  flex: 0 0 420px !important;
  min-width: 320px;
}

.devices-container > .col-lg-7 {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
}

/* Business theme for Devices Page */
.devices-page {
  background: #eef2f7;
  border: 1px solid #d7dde8;
  border-radius: 12px;
  padding: 12px 20px;
  width: 100%;
}

.devices-page a:not(.btn) {
  color: #1f3a5f !important;
}

/* Attachments Layout (Full Width, 3 Columns) */
.devices-attachments-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 1400px !important;
  margin: 20px auto !important;
  gap: 20px !important;
  padding: 0 !important;
  /* CRITICAL FIX: Section must be static to let modals float out */
  position: static !important;
  transform: none !important;
}

.attachments-section {
  flex: 1 !important;
  min-width: 0 !important;
  background: #ffffff !important;
  border: 1px solid #d7dde8 !important;
  border-radius: 10px !important;
  padding: 15px !important;
  box-shadow: 0 2px 8px rgba(31, 58, 95, 0.1) !important;
  /* CRITICAL: Allow dropdowns to overflow */
  position: relative !important;
  overflow: visible !important;
  transform: none !important;
  z-index: auto !important;
}

.section-title-unified {
  color: #1f3a5f !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #1f3a5f !important;
  padding-bottom: 5px !important;
  margin-top: 20px !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Fix for Device Details Form Layout */
.devices-details {
  background: #fff !important;
  padding: 15px !important;
  border-radius: 8px !important;
  border: 1px solid #d7dde8 !important;
  margin-bottom: 5px !important;
  z-index: 1;
}

.devices-details label {
  color: #1f3a5f !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  margin-bottom: 2px !important;
}

.devices-details .form-control {
  background-color: #f9f9f9 !important;
  border: 1px solid #e1e1e1 !important;
  color: #333 !important;
  height: 30px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
}

/* Dropdown container must be relative, but the menu MUST keep Popper's inline
   top/left/transform. Forcing top: 100% here used to push the menu to viewport
   bottom (Popper's transform was then misaligned with the toggle). */
.devices-page .dropdown,
.devices-page .btn-group {
  position: relative;
}

.devices-page .dropdown-menu {
  z-index: 1000;
}

/* In table action cells (last column) anchor menu to the right edge of the cell
   so it does not overflow the card / viewport on narrow columns. */
.devices-page table td:last-child .dropdown-menu {
  right: 0;
  left: auto;
}

/* Modal conflict fix - Global High Priority */
.modal-backdrop {
  z-index: 5000 !important;
}

.modal {
  z-index: 5010 !important;
}

/* Specific fix for Power Pages grid actions modal accessibility */
body.modal-open div[role="dialog"], 
body.modal-open .modal-content {
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Hide redundant Download links when native menu is present */
.attachments-section .table td a.attachment-menu-btn-download:not(:only-child) {
  display: none !important;
}

/* Modal visibility for native Power Pages modals */
.modal-header, .modal-footer {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Prevent layout shift when modal opens */
body.modal-open {
  overflow: hidden !important;
}


body .form-control {
  background: var(--bg-secondary) !important;
  color: #fff !important;
  border: 1px solid var(--primary-accent) !important;
}

/* ======================================================
   6. LOGIN
   ====================================================== */

/* Wyśrodkowanie i poszerzenie całego bloku logowania */
body #content-container {
  max-width: 700px !important;
  margin: 60px auto !important;
  text-align: left !important;
}

/* 🔑 KLUCZ: kontener formularza to .col-md-6 – rozciągnij go do 100% */
body #content-container .page-content > .row > .col-md-6,
body #content-container #mainContent > .row > .col-md-6,
body #content-container > #content > .page-content > .row > .col-md-6,
body #content-container .col-md-6:has(> form > .portal-form) {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Fallback: ostatni .col-md-6 wewnątrz #content-container */
body #content-container .row > .col-md-6:last-child,
body #content-container .page-content .row > .col-md-6,
body #content-container #mainContent .row > .col-md-6 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

body #content-container form.portal-form,
body #content-container form[action="/SignIn"] {
  text-align: left !important;
  margin: 0 auto !important;
  max-width: 700px !important;
  width: 100% !important;
}

/* Tytuł sekcji - biały tekst, w jednej linii, z dolną krawędzią */
body #content-container .login-heading-section {
  margin-bottom: 8px !important;
}

body #content-container .login-heading-section .xrm-attribute-value-encoded,
body #content-container .login-heading-section .xrm-attribute-value {
  color: #fff !important;
  font-weight: 600 !important;
  display: block !important;
  text-align: left !important;
  white-space: nowrap !important;
  border-bottom: 1px solid #39ff14 !important;
  padding-bottom: 10px !important;
  margin-bottom: 20px !important;
}

/* Etykiety: w jednej linii, biały tekst, 35% szerokości */
body #content-container form.portal-form .row.mb-3 > .col-md-4,
body #content-container form[action="/SignIn"] .row.mb-3 > .col-md-4,
body #content-container form.portal-form .row.mb-3 > label.col-form-label,
body #content-container form[action="/SignIn"] .row.mb-3 > label.col-form-label {
  flex: 0 0 35% !important;
  max-width: 35% !important;
  width: 35% !important;
  white-space: nowrap !important;
  text-align: left !important;
  padding-right: 12px !important;
  margin-bottom: 0 !important;
  color: #fff !important;
}

/* Kontener pola input - 65% szerokości */
body #content-container form.portal-form .row.mb-3 > .col-md-8,
body #content-container form[action="/SignIn"] .row.mb-3 > .col-md-8 {
  flex: 0 0 65% !important;
  max-width: 65% !important;
  width: 65% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body #content-container form.portal-form .form-control,
body #content-container form[action="/SignIn"] .form-control {
  width: 100% !important;
  display: block !important;
}

/* Checkbox "Pamiętasz mnie?" + przyciski - wyrównane do lewej krawędzi pól */
body #content-container form.portal-form .row.mb-3 > .offset-md-4,
body #content-container form[action="/SignIn"] .row.mb-3 > .offset-md-4,
body #content-container form.portal-form .row.mb-3 > .offset-md-4.col-md-8,
body #content-container form[action="/SignIn"] .row.mb-3 > .offset-md-4.col-md-8 {
  margin-left: 35% !important;
  max-width: 65% !important;
  flex: 0 0 65% !important;
  padding-left: 0 !important;
  text-align: left !important;
}

body #content-container form.portal-form .checkbox,
body #content-container form[action="/SignIn"] .checkbox {
  text-align: left !important;
}

body #content-container form.portal-form .checkbox label,
body #content-container form[action="/SignIn"] .checkbox label {
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

/* Przyciski obok siebie - flex z gap */
body #content-container form.portal-form .offset-md-4.col-md-8,
body #content-container form[action="/SignIn"] .offset-md-4.col-md-8 {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px;
  align-items: center !important;
}

body #content-container form.portal-form .btn,
body #content-container form[action="/SignIn"] .btn {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
}

/* ======================================================
   7. DEVICES PAGE - Moved to page-specific CSS
   ====================================================== */

/* ======================================================
   9. HOME PAGE Layout - Moved to page-specific CSS
   ====================================================== */