/* ==========================================================
   WORKCORE LIGHT THEME V1
   Shared theme: ERP + HR + Overtime
   CNC: FREEZE
   Dark theme: untouched
   ========================================================== */

html:not([data-theme="dark"]){
  --wc-bg:#f3f7fb;
  --wc-surface:#ffffff;
  --wc-soft:#f8fbfe;

  --wc-blue-950:#082d63;
  --wc-blue-900:#0b3979;
  --wc-blue-800:#0f478f;
  --wc-blue-700:#175aa9;
  --wc-blue-600:#2473c5;
  --wc-blue-500:#3188da;
  --wc-blue-100:#eaf4fd;
  --wc-blue-050:#f4f9fe;

  --wc-text:#15324d;
  --wc-muted:#758ba0;

  --wc-border:#d7e3ed;
  --wc-border-strong:#c7d8e6;

  --wc-success:#169667;
  --wc-danger:#b94b4b;

  --wc-radius-sm:9px;
  --wc-radius:12px;
  --wc-radius-lg:14px;

  --wc-shadow:
    0 5px 18px rgba(19,55,88,.065);

  --wc-shadow-hover:
    0 10px 26px rgba(19,55,88,.11);

  --sidebar-width:286px;
}


/* ==========================================================
   PAGE
   ========================================================== */

html:not([data-theme="dark"]),
html:not([data-theme="dark"]) body{
  max-width:100%;
  overflow-x:hidden;
}

html:not([data-theme="dark"]) body{
  background:var(--wc-bg);
  color:var(--wc-text);
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

html:not([data-theme="dark"]) .sidebar{
  background:
    linear-gradient(
      180deg,
      #104a96 0%,
      #0b3c80 42%,
      #082f68 100%
    ) !important;

  color:#fff !important;

  border-right:
    1px solid rgba(5,38,83,.35);

  box-shadow:
    7px 0 24px rgba(15,55,100,.10) !important;
}

html:not([data-theme="dark"]) .brand{
  border-bottom-color:
    rgba(255,255,255,.12) !important;
}

html:not([data-theme="dark"]) .brand-title,
html:not([data-theme="dark"]) .brand strong{
  color:#fff !important;
}

html:not([data-theme="dark"]) .brand-subtitle,
html:not([data-theme="dark"]) .brand span{
  color:
    rgba(225,239,252,.68) !important;
}

html:not([data-theme="dark"]) .brand-mark{
  background:
    linear-gradient(
      145deg,
      #2584dd,
      #1768bc
    ) !important;

  color:#fff !important;

  box-shadow:
    0 5px 12px rgba(0,0,0,.15) !important;
}

html:not([data-theme="dark"]) .nav-section{
  color:
    rgba(207,226,246,.68) !important;

  letter-spacing:.16em;
}

html:not([data-theme="dark"]) .nav-item,
html:not([data-theme="dark"]) .nav button,
html:not([data-theme="dark"]) .nav a{
  color:
    rgba(239,247,255,.84) !important;

  border:
    1px solid transparent !important;

  border-radius:
    9px !important;

  transition:
    background .16s ease,
    color .16s ease,
    border-color .16s ease,
    transform .16s ease,
    box-shadow .16s ease !important;
}

html:not([data-theme="dark"]) .nav-item:hover,
html:not([data-theme="dark"]) .nav button:hover,
html:not([data-theme="dark"]) .nav a:hover{
  background:
    rgba(255,255,255,.095) !important;

  color:#fff !important;

  transform:none !important;
}

html:not([data-theme="dark"]) .nav-item.active,
html:not([data-theme="dark"]) .nav button.active,
html:not([data-theme="dark"]) .nav a.active{
  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #2e7fd4 0%,
      #236dc1 100%
    ) !important;

  border-color:
    rgba(122,190,250,.32) !important;

  box-shadow:
    0 6px 16px rgba(3,35,79,.24),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

html:not([data-theme="dark"]) .nav-item.active::before{
  display:none !important;
}

html:not([data-theme="dark"]) .nav-icon{
  color:
    rgba(227,241,255,.94) !important;
}

html:not([data-theme="dark"]) .soon{
  color:
    rgba(235,246,255,.76) !important;

  background:
    rgba(255,255,255,.09) !important;

  border-color:
    rgba(255,255,255,.14) !important;
}


/* ==========================================================
   TOPBAR
   ========================================================== */

html:not([data-theme="dark"]) .topbar{
  background:
    rgba(255,255,255,.96) !important;

  border-bottom:
    1px solid var(--wc-border) !important;

  box-shadow:
    0 2px 10px rgba(20,54,84,.035) !important;
}


/* ==========================================================
   BUTTON SYSTEM
   ========================================================== */

html:not([data-theme="dark"]) .btn{
  min-height:38px !important;

  padding:
    0 14px !important;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:6px;

  border:
    1px solid var(--wc-border) !important;

  border-radius:
    9px !important;

  background:
    #fff !important;

  color:
    #36556f !important;

  font-weight:700;

  box-shadow:
    0 2px 7px rgba(22,58,91,.04) !important;

  transform:none !important;

  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease !important;
}

html:not([data-theme="dark"]) .btn:not(:disabled):hover{
  transform:
    translateY(-1px) !important;

  background:
    var(--wc-blue-050) !important;

  border-color:
    #b5d3e8 !important;

  box-shadow:
    0 5px 13px rgba(23,72,113,.09) !important;
}

html:not([data-theme="dark"]) .btn:not(:disabled):active{
  transform:
    translateY(0) !important;
}

html:not([data-theme="dark"]) .btn.primary{
  background:
    linear-gradient(
      180deg,
      #2c83d2 0%,
      #2473c5 100%
    ) !important;

  border-color:
    #226db8 !important;

  color:#fff !important;

  box-shadow:
    0 4px 10px rgba(28,105,177,.18) !important;
}


/* ==========================================================
   MUST-HAVE CLOSE BUTTON
   ========================================================== */

html:not([data-theme="dark"]) button[id^="close"],
html:not([data-theme="dark"]) button[class*="modal-close"],
html:not([data-theme="dark"]) button[class*="report-close"],
html:not([data-theme="dark"]) button.workcore-close-btn,
html:not([data-theme="dark"]) button[aria-label*="Bezár"],
html:not([data-theme="dark"]) button[title*="Bezár"]{
  position:relative;
  overflow:hidden;
}

html:not([data-theme="dark"]) button[id^="close"]:hover,
html:not([data-theme="dark"]) button[class*="modal-close"]:hover,
html:not([data-theme="dark"]) button[class*="report-close"]:hover,
html:not([data-theme="dark"]) button.workcore-close-btn:hover,
html:not([data-theme="dark"]) button[aria-label*="Bezár"]:hover,
html:not([data-theme="dark"]) button[title*="Bezár"]:hover{
  transform:
    translateY(-1px)
    rotate(-3deg) !important;

  border-color:
    #2f7ecb !important;

  box-shadow:
    0 10px 18px rgba(31,79,149,.15) !important;
}

html:not([data-theme="dark"]) button[id^="close"]::before,
html:not([data-theme="dark"]) button[class*="modal-close"]::before,
html:not([data-theme="dark"]) button[class*="report-close"]::before,
html:not([data-theme="dark"]) button.workcore-close-btn::before,
html:not([data-theme="dark"]) button[aria-label*="Bezár"]::before,
html:not([data-theme="dark"]) button[title*="Bezár"]::before{
  content:"";

  position:absolute;

  top:-35%;
  bottom:-35%;

  left:-60%;

  width:32%;

  background:
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255,255,255,.05) 25%,
      rgba(255,255,255,.62) 50%,
      rgba(255,255,255,.05) 75%,
      transparent 100%
    );

  transform:
    translateX(-220%)
    skewX(-14deg);

  transition:
    transform .48s cubic-bezier(.2,.7,.25,1);

  pointer-events:none;
}

html:not([data-theme="dark"]) button[id^="close"]:hover::before,
html:not([data-theme="dark"]) button[class*="modal-close"]:hover::before,
html:not([data-theme="dark"]) button[class*="report-close"]:hover::before,
html:not([data-theme="dark"]) button.workcore-close-btn:hover::before,
html:not([data-theme="dark"]) button[aria-label*="Bezár"]:hover::before,
html:not([data-theme="dark"]) button[title*="Bezár"]:hover::before{
  transform:
    translateX(620%)
    skewX(-14deg);
}


/* ==========================================================
   LARGE PANELS = LEFT ACCENT
   ========================================================== */

html:not([data-theme="dark"]) .panel,
html:not([data-theme="dark"]) .table-panel{
  position:relative;

  background:
    var(--wc-surface) !important;

  border:
    1px solid var(--wc-border) !important;

  border-radius:
    var(--wc-radius) !important;

  box-shadow:
    var(--wc-shadow) !important;

  overflow:hidden;
}

html:not([data-theme="dark"]) .panel::before,
html:not([data-theme="dark"]) .table-panel::before{
  content:"";

  position:absolute;

  left:0;
  top:18px;
  bottom:18px;

  width:3px;

  border-radius:
    0 999px 999px 0;

  background:
    linear-gradient(
      180deg,
      #3188da,
      #1f6fae
    );

  pointer-events:none;
}


/* ==========================================================
   SMALL STAT CARDS = TOP ACCENT
   ========================================================== */

html:not([data-theme="dark"]) .kpi,
html:not([data-theme="dark"]) .detail-card{
  position:relative;

  background:
    var(--wc-surface) !important;

  border:
    1px solid var(--wc-border) !important;

  border-radius:
    var(--wc-radius) !important;

  box-shadow:
    0 4px 14px rgba(19,55,88,.055) !important;

  overflow:hidden;
}

html:not([data-theme="dark"]) .kpi::before,
html:not([data-theme="dark"]) .detail-card::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:3px;

  background:
    linear-gradient(
      90deg,
      #2473c5 0%,
      #4196d5 60%,
      #b9dcee 100%
    );

  pointer-events:none;
}


/* ==========================================================
   MODALS
   ========================================================== */

html:not([data-theme="dark"]) .modal{
  background:
    var(--wc-surface) !important;

  border:
    1px solid var(--wc-border) !important;

  border-radius:
    var(--wc-radius-lg) !important;

  box-shadow:
    0 18px 55px rgba(20,53,84,.16) !important;
}

html:not([data-theme="dark"]) .modal-head{
  border-bottom-color:
    var(--wc-border) !important;
}

html:not([data-theme="dark"]) .modal-actions{
  border-top-color:
    var(--wc-border) !important;
}


/* ==========================================================
   TABLES / FORMS
   ========================================================== */

html:not([data-theme="dark"]) thead th{
  background:
    #f4f8fb !important;

  color:
    #587188 !important;

  border-color:
    var(--wc-border) !important;
}

html:not([data-theme="dark"]) tbody td{
  border-color:
    #e5edf3 !important;
}

html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) textarea{
  border-color:
    var(--wc-border) !important;

  border-radius:
    var(--wc-radius-sm) !important;
}

html:not([data-theme="dark"]) input:focus,
html:not([data-theme="dark"]) select:focus,
html:not([data-theme="dark"]) textarea:focus{
  outline:none;

  border-color:
    #66a7d8 !important;

  box-shadow:
    0 0 0 3px rgba(49,136,218,.10) !important;
}


/* ==========================================================
   END WORKCORE LIGHT THEME V1
   ========================================================== */


/* WORKCORE SAFE CLEANUP CSS V1 */

/* =========================================================
   1. ERP LIGHT ACCENTEK KIKAPCSOLÁSA
   ========================================================= */

.left-accent::before,
.panel-accent::before,
.section-accent::before,
.report-accent::before,
.card-accent::before,
.top-accent::before,
[class*="left-accent"]::before,
[class*="panel-accent"]::before,
[class*="section-accent"]::before,
[class*="report-accent"]::before,
[class*="card-accent"]::before,
[class*="top-accent"]::before,
[class*="accent-bar"]::before,
[class*="accent-bar"]::after,
[class*="accent-top"]::before,
[class*="accent-top"]::after,
.metric-card::before,
.stat-card::before,
.summary-card::before,
.kpi-card::before,
.report-card::before,
.dashboard-card::before,
.info-card::before {
  content: none !important;
  display: none !important;
}

.left-accent,
.panel-accent,
.section-accent,
.report-accent,
.card-accent,
.top-accent,
[class*="left-accent"],
[class*="panel-accent"],
[class*="section-accent"],
[class*="report-accent"],
[class*="card-accent"],
[class*="top-accent"] {
  border-left: none !important;
  padding-left: inherit !important;
}

/* =========================================================
   2. ERP BEZÁRÓ / X GOMB HOVER
   ========================================================= */

:root {
  --wc-close-bg: #ffffff;
  --wc-close-border: #c9d7e6;
  --wc-close-text: #29405c;
  --wc-close-shadow: 0 8px 20px rgba(24, 51, 84, 0.14);
  --wc-close-shadow-hover: 0 12px 28px rgba(24, 51, 84, 0.22);
}

html[data-theme="dark"] {
  --wc-close-bg: #243447;
  --wc-close-border: #3f5776;
  --wc-close-text: #eef5ff;
  --wc-close-shadow: 0 10px 24px rgba(0, 0, 0, 0.30);
  --wc-close-shadow-hover: 0 14px 30px rgba(0, 0, 0, 0.40);
}

button[id^="close"],
button[id*="close"],
button[id*="Close"],
.modal-header .btn,
.dialog-header .btn,
.sheet-header .btn,
.overlay-header .btn,
.popup-header .btn {
  transform: none !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease !important;
}

button[id^="close"],
button[id*="close"],
button[id*="Close"] {
  background: var(--wc-close-bg) !important;
  color: var(--wc-close-text) !important;
  border: 1px solid var(--wc-close-border) !important;
  box-shadow: var(--wc-close-shadow) !important;
}

button[id^="close"]:hover,
button[id^="close"]:focus-visible,
button[id*="close"]:hover,
button[id*="close"]:focus-visible,
button[id*="Close"]:hover,
button[id*="Close"]:focus-visible {
  transform: translateY(-1px) rotate(-2deg) !important;
  box-shadow: var(--wc-close-shadow-hover) !important;
  border-color: #3a7fc4 !important;
}

button[id^="close"]:active,
button[id*="close"]:active,
button[id*="Close"]:active {
  transform: translateY(0) rotate(-1deg) !important;
}

/* END WORKCORE SAFE CLEANUP CSS V1 */