/* =========================================================
   SCYLLA CRM – ADMIN THEME
   Cél: SAP / Fiori jellegű, stabil admin kinézet
   Fontos: ezt az eredeti style.css UTÁN kell betölteni
   Megjegyzés: szerkezeti layoutot nem írunk át agresszíven
========================================================= */

/* =========================================================
   01. ALAPSZÍNEK ÉS VÁLTOZÓK
========================================================= */
:root{
  --sc-primary: #0a6ed1;
  --sc-primary-hover: #085caf;
  --sc-primary-soft: #eaf3fc;
  --sc-primary-soft-2: #d9ecff;
  --sc-border: #d7e1ea;
  --sc-border-soft: #e6edf3;
  --sc-bg-app: #eef3f8;
  --sc-bg-panel: #ffffff;
  --sc-bg-sidebar: #f7f9fc;
  --sc-bg-header: #ffffff;
  --sc-text: #1f2937;
  --sc-text-soft: #5f6b7a;
  --sc-text-sidebar: #425466;
  --sc-icon: #7b8794;
  --sc-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.04);
  --sc-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06);
  --sc-radius-sm: 8px;
  --sc-radius-md: 12px;
  --sc-radius-lg: 14px;
}

/* =========================================================
   02. APP HÁTTÉR / TARTALMI ALAP
========================================================= */
html,
body,
#wrapper{
  background: var(--sc-bg-app);
}

body{
  color: var(--sc-text);
}

/* A content marad a meglévő szerkezeten, csak a vizuális réteg változik */
.content{
  background: var(--sc-bg-app);
}

/* =========================================================
   03. HEADER / FELSŐ SÁV
========================================================= */
#header{
  background: var(--sc-bg-header);
  border-bottom: 1px solid var(--sc-border);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

#header li > a.active{
  background: #edf5fc;
  color: var(--sc-primary);
  border-radius: 999px;
}

.navbar-nav > li > a{
  color: var(--sc-text-soft);
  font-weight: 500;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav .open > a,
.navbar-nav .open > a:hover,
.navbar-nav .open > a:focus{
  background: #edf5fc;
  color: var(--sc-primary);
  border-radius: 999px;
}

/* =========================================================
   04. SIDEBAR – SAP/FIORI JELLEG
   Csak kinézetet módosítunk, a működést nem
========================================================= */
.sidebar,
#menu,
#setup-menu-wrapper{
  background: var(--sc-bg-sidebar);
  border-right: 1px solid var(--sc-border);
}

[dir="rtl"] .sidebar,
[dir="rtl"] #menu,
[dir="rtl"] #setup-menu-wrapper{
  border-right: 0;
  border-left: 1px solid var(--sc-border);
}

.sidebar{
  padding-left: 8px;
  padding-right: 8px;
}

.sidebar > ul.nav > li{
  border-left: 3px solid transparent;
  margin-bottom: 3px;
  position: relative;
}

[dir="rtl"] .sidebar > ul.nav > li{
  border-left: 0;
  border-right: 3px solid transparent;
}

.sidebar ul.nav li a{
  color: var(--sc-text-sidebar);
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--sc-radius-sm);
  background: transparent;
  transition: all .18s ease;
}

.sidebar ul.nav li a i.menu-icon{
  color: var(--sc-icon);
  transition: color .18s ease;
}

/* főmenü hover */
.sidebar > ul.nav > li:hover{
  border-left-color: var(--sc-primary);
}

[dir="rtl"] .sidebar > ul.nav > li:hover{
  border-left-color: transparent;
  border-right-color: var(--sc-primary);
}

.sidebar > ul.nav > li:hover > a:first-child,
.sidebar > ul.nav > li > a:first-child:hover,
.sidebar > ul.nav > li > a:first-child:focus{
  background: var(--sc-primary-soft);
  border-color: #b8d6f1;
  color: var(--sc-primary);
}

.sidebar > ul.nav > li:hover > a:first-child .menu-icon,
.sidebar > ul.nav > li > a:first-child:hover .menu-icon,
.sidebar > ul.nav > li > a:first-child:focus .menu-icon{
  color: var(--sc-primary);
}

/* főmenü aktív */
.sidebar > ul.nav > li.active{
  border-left-color: var(--sc-primary);
}

[dir="rtl"] .sidebar > ul.nav > li.active{
  border-left-color: transparent;
  border-right-color: var(--sc-primary);
}

.sidebar > ul.nav > li.active > a:first-child{
  background: var(--sc-primary-soft-2);
  border-color: #90c3f4;
  color: #0854a0;
  box-shadow: none;
}

.sidebar > ul.nav > li.active > a:first-child .menu-icon{
  color: var(--sc-primary);
}

.sidebar ul.nav li.active > a,
.sidebar ul.nav > li > a:hover,
.sidebar ul.nav > li > a:focus,
.sidebar ul.nav li.active > a .menu-icon,
.sidebar ul.nav > li > a:hover .menu-icon,
.sidebar ul.nav > li > a:focus .menu-icon{
  color: #0854a0;
}

/* submenu */
.sidebar ul.nav li .nav-second-level{
  margin-top: 2px;
  margin-bottom: 4px;
}

.sidebar ul.nav li .nav-second-level li{
  border-left: 3px solid transparent;
  border-radius: var(--sc-radius-sm);
}

[dir="rtl"] .sidebar ul.nav li .nav-second-level li{
  border-left: 0;
  border-right: 3px solid transparent;
}

.sidebar ul.nav li .nav-second-level li a{
  padding: 6px 12px 6px 42px;
  color: #526172;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--sc-radius-sm);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#setup-menu li .nav-second-level li a{
  padding-left: 24px;
}

.sidebar ul.nav li .nav-second-level li:hover,
.sidebar ul.nav li .nav-second-level li:focus-within{
  background: var(--sc-primary-soft);
  border-left-color: var(--sc-primary);
}

[dir="rtl"] .sidebar ul.nav li .nav-second-level li:hover,
[dir="rtl"] .sidebar ul.nav li .nav-second-level li:focus-within{
  border-left-color: transparent;
  border-right-color: var(--sc-primary);
}

.sidebar ul.nav li .nav-second-level li:hover a,
.sidebar ul.nav li .nav-second-level li:focus-within a{
  color: var(--sc-primary) !important;
}

.sidebar ul.nav li .nav-second-level li.active{
  background: var(--sc-primary-soft);
  border-left-color: var(--sc-primary);
}

[dir="rtl"] .sidebar ul.nav li .nav-second-level li.active{
  border-left-color: transparent;
  border-right-color: var(--sc-primary);
}

.sidebar ul.nav li .nav-second-level li.active a{
  color: #0854a0 !important;
  font-weight: 600;
}

.sidebar .arrow{
  color: var(--sc-icon);
}

/* setup menü fejléc */
#setup-menu > li:first-child{
  border-bottom: 1px solid var(--sc-border-soft);
  color: var(--sc-text);
  font-weight: 600;
}

/* =========================================================
   05. PANELEK / KÁRTYÁK / DOBOZOK
========================================================= */
.panel_s,
.panel,
.card,
.question.form-group{
  background: var(--sc-bg-panel);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  box-shadow: var(--sc-shadow-sm);
  overflow: hidden;
}

.panel_s .panel-heading,
.panel > .panel-heading,
.panel_s > .panel-heading{
  background: #ffffff;
  border-bottom: 1px solid var(--sc-border-soft);
}

.panel_s .panel-body,
.panel .panel-body{
  background: #ffffff;
}

/* =========================================================
   06. GOMBOK
========================================================= */
.btn{
  border-radius: 10px;
  font-weight: 600;
  box-shadow: none;
  transition: all .18s ease;
}

.btn-primary,
.btn-info{
  background: var(--sc-primary);
  border-color: var(--sc-primary);
  color: #fff;
}

.btn-primary:hover,
.btn-info:hover,
.btn-primary:focus,
.btn-info:focus{
  background: var(--sc-primary-hover);
  border-color: var(--sc-primary-hover);
  color: #fff;
}

.btn-default{
  background: #ffffff;
  border-color: #cfd8e3;
  color: #334155;
}

.btn-default:hover,
.btn-default:focus{
  background: #f8fbff;
  border-color: #b8c8d8;
  color: #1f2937;
}

/* =========================================================
   07. INPUTOK / SELECT / FORM ELEMEK
========================================================= */
.form-control,
.bootstrap-select .dropdown-toggle,
.selectpicker,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select{
  background: #ffffff;
  border: 1px solid #cfd8e3;
  border-radius: 10px;
  box-shadow: none;
  min-height: 42px;
  color: var(--sc-text);
}

.form-control:focus,
.bootstrap-select .dropdown-toggle:focus,
input:focus,
textarea:focus,
select:focus{
  border-color: #7fb0e5;
  box-shadow: 0 0 0 3px rgba(10, 110, 209, 0.12);
}

.bootstrap-select > .dropdown-toggle:hover{
  border-color: #a9b7c6;
}

/* =========================================================
   08. TÁBLÁK
========================================================= */
.table > thead > tr > th{
  background: #f7fafd;
  color: #4b5b6b;
  border-bottom: 1px solid var(--sc-border);
  font-weight: 600;
}

.table > tbody > tr > td{
  border-top: 1px solid #edf2f7;
}

.table-hover > tbody > tr:hover{
  background: #f7fbff;
}

/* =========================================================
   09. BADGE / KIS KIEMELŐK
========================================================= */
.label,
.badge{
  border-radius: 999px;
  font-weight: 600;
}

/* =========================================================
   10. MODALOK
========================================================= */
.modal-content{
  border-radius: 16px;
  border: 1px solid var(--sc-border);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
}

.modal-header{
  border-bottom: 1px solid var(--sc-border-soft);
}

.modal-footer{
  border-top: 1px solid var(--sc-border-soft);
}

/* =========================================================
   11. KANBAN / BELSŐ KÁRTYÁK
   Csak vizuális finomítás
========================================================= */
.kan-ban-content{
  background: #e8eef5;
  border-radius: 0 0 14px 14px;
}

#kan-ban .panel-body{
  background: #ffffff;
  border: 1px solid #dde5ed;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

/* =========================================================
   12. MOBIL FINOMÍTÁS
   Itt nem írjuk át a layout működését, csak a vizuális sűrűséget
========================================================= */
@media (max-width: 768px){

  .sidebar ul.nav li a{
    padding: 10px 12px;
  }

  .sidebar ul.nav li .nav-second-level li a{
    padding-top: 8px;
    padding-bottom: 8px;
  }

  #setup-menu > li > a{
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .panel_s,
  .panel,
  .card{
    border-radius: 12px;
  }

  .content{
    background: var(--sc-bg-app);
  }
}
/* =========================================================
   SCYLLA – EGYSÉGES KÉK KIEMELÉS
========================================================= */

/* Panelek / kártyák finom kék border */
.panel_s,
.panel,
.card{
  border-color: #d0e2f5;
}

/* Hover állapot – finom kék kiemelés */
.panel_s:hover,
.panel:hover,
.card:hover{
  border-color: var(--sc-primary);
}

/* Felső kártyák (dashboard) – ha vannak külön stat boxok */
.top_stats_wrapper [class*="col-"] > *{
  border-color: #d0e2f5;
}

/* Input fókusz már jó volt, de erősítjük */
.form-control:focus,
.bootstrap-select .dropdown-toggle:focus,
input:focus,
textarea:focus,
select:focus{
  border-color: var(--sc-primary);
}

/* Táblázat fejléc */
.table > thead > tr > th{
  border-bottom: 2px solid #d0e2f5;
}

/* Táblázat hover */
.table-hover > tbody > tr:hover{
  background: #f0f7ff;
}

/* Aktív elemek (pl. badge, label) */
.label-primary,
.badge-primary{
  background: var(--sc-primary);
}

/* Link hover */
a:hover{
  color: var(--sc-primary);
}

/* Modal finom hangolás */
.modal-content{
  border-color: #d0e2f5;
}
/* =========================================================
   SCYLLA – TYPOGRAPHY (SAP / FIORI STYLE)
========================================================= */

body{
  font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sc-text);
}

/* Címsorok */
h1, h2, h3, h4, h5, h6{
  font-weight: 600;
  letter-spacing: -0.2px;
  color: #1a2b3c;
}

/* Kártya címek */
.panel-heading,
.card-header{
  font-weight: 600;
  font-size: 14px;
}

/* Sidebar */
.sidebar ul.nav li a{
  font-weight: 500;
  font-size: 14px;
}

/* Táblázatok */
.table{
  font-size: 13.5px;
}

.table > thead > tr > th{
  font-weight: 600;
  font-size: 13px;
}

/* Gombok */
.btn{
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Inputok */
.form-control,
select,
textarea{
  font-size: 14px;
}

/* Kisebb szövegek */
.small,
.text-muted{
  font-size: 12.5px;
  color: var(--sc-text-soft);
}