/* theme-name: Pratic Glass */
/*
 * Tema "Pratic Glass": sidebar navy bergradasi dengan menu kaca + aksen teal, header kaca (blur),
 * isi halaman tetap terang. Token warna sama dengan halaman login idssso (login-branding.css).
 *
 * File sumber ada di plugins/praticthemes/themes/; plugin menyalinnya ke GLPI_THEMES_DIR
 * (files/_themes) agar muncul di "Color palette" (Pengaturan user / Setup -> Umum). GLPI memuat
 * SEMUA tema kustom di setiap halaman, jadi setiap aturan wajib di bawah selektor tema ini.
 */
:root[data-glpi-theme=pratic_glass] {
  --glpi-palette-color-1: #123761;
  --glpi-palette-color-2: #ffffff;
  --glpi-palette-color-3: #00ada6;
  --glpi-palette-color-4: #8fe3de;
  --pratic-navy: #123761;
  --pratic-navy-deep: #0a213d;
  --pratic-teal: #00ada6;
  --pratic-teal-light: #8fe3de;
  --pratic-glass: rgba(255, 255, 255, .07);
  --pratic-glass-strong: rgba(255, 255, 255, .11);
  --tblr-primary-rgb: 0, 173, 166;
  --tblr-primary-fg: #061a31;
  --tblr-navbar-color: #123761;
  --glpi-mainmenu-bg: #123761;
  --glpi-mainmenu-fg: #ffffff;
  --glpi-mainmenu-fg-muted: rgba(255, 255, 255, .6);
  --glpi-mainmenu-active-bg: rgba(0, 173, 166, .16);
}
:root[data-glpi-theme=pratic_glass] .sidebar,
:root[data-glpi-theme=pratic_glass] .topbar {
  background: radial-gradient(120% 40% at 0% 100%, rgba(0, 173, 166, 0.22) 0%, rgba(0, 173, 166, 0) 70%), radial-gradient(90% 30% at 100% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(170deg, var(--pratic-navy) 0%, var(--pratic-navy-deep) 100%);
  background-color: var(--pratic-navy-deep);
}
:root[data-glpi-theme=pratic_glass] .sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
:root[data-glpi-theme=pratic_glass] body:not(.navbar-collapsed) .sidebar #navbar-menu .nav-item .nav-link {
  margin: 1px 0.75rem 1px 0;
  border-left: 3px solid transparent;
  border-radius: 0 10px 10px 0;
  color: rgba(255, 255, 255, 0.78);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
:root[data-glpi-theme=pratic_glass] body:not(.navbar-collapsed) .sidebar #navbar-menu .nav-item .nav-link.active, :root[data-glpi-theme=pratic_glass] body:not(.navbar-collapsed) .sidebar #navbar-menu .nav-item .nav-link.show {
  border-left-color: var(--pratic-teal);
  background-color: var(--pratic-glass-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--pratic-teal-light);
}
:root[data-glpi-theme=pratic_glass] body:not(.navbar-collapsed) .sidebar #navbar-menu .nav-item .nav-link.active + .dropdown-menu, :root[data-glpi-theme=pratic_glass] body:not(.navbar-collapsed) .sidebar #navbar-menu .nav-item .nav-link.show + .dropdown-menu {
  margin: 2px 0.75rem 6px 0;
  border-radius: 0 10px 10px 0;
  background-color: rgba(255, 255, 255, 0.035);
}
:root[data-glpi-theme=pratic_glass] body:not(.navbar-collapsed) .sidebar #navbar-menu .nav-item .nav-link.active + .dropdown-menu .dropdown-item, :root[data-glpi-theme=pratic_glass] body:not(.navbar-collapsed) .sidebar #navbar-menu .nav-item .nav-link.show + .dropdown-menu .dropdown-item {
  border-left: 3px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.72);
}
:root[data-glpi-theme=pratic_glass] body:not(.navbar-collapsed) .sidebar #navbar-menu .nav-item .nav-link.active + .dropdown-menu .dropdown-item:hover, :root[data-glpi-theme=pratic_glass] body:not(.navbar-collapsed) .sidebar #navbar-menu .nav-item .nav-link.show + .dropdown-menu .dropdown-item:hover {
  border-left-color: var(--pratic-teal);
  background-color: var(--pratic-glass);
  color: #fff;
}
:root[data-glpi-theme=pratic_glass] body:not(.navbar-collapsed) .sidebar #navbar-menu .nav-item .nav-link.active + .dropdown-menu .dropdown-item.active, :root[data-glpi-theme=pratic_glass] body:not(.navbar-collapsed) .sidebar #navbar-menu .nav-item .nav-link.show + .dropdown-menu .dropdown-item.active {
  border-left-color: var(--pratic-teal);
  background-color: var(--pratic-glass-strong);
  color: var(--pratic-teal-light);
}
:root[data-glpi-theme=pratic_glass] body:not(.navbar-collapsed) .sidebar #navbar-menu .nav-item:hover .nav-link {
  border-left-color: var(--pratic-teal);
  background-color: var(--pratic-glass);
  color: #fff;
}
@media (max-width: 991.98px) {
  :root[data-glpi-theme=pratic_glass] .sidebar #navbar-menu .nav-item .nav-link {
    margin: 1px 0.75rem 1px 0;
    border-left: 3px solid transparent;
    border-radius: 0 10px 10px 0;
    color: rgba(255, 255, 255, 0.78);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  :root[data-glpi-theme=pratic_glass] .sidebar #navbar-menu .nav-item .nav-link.active, :root[data-glpi-theme=pratic_glass] .sidebar #navbar-menu .nav-item .nav-link.show {
    border-left-color: var(--pratic-teal);
    background-color: var(--pratic-glass-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: var(--pratic-teal-light);
  }
  :root[data-glpi-theme=pratic_glass] .sidebar #navbar-menu .nav-item .nav-link.active + .dropdown-menu, :root[data-glpi-theme=pratic_glass] .sidebar #navbar-menu .nav-item .nav-link.show + .dropdown-menu {
    margin: 2px 0.75rem 6px 0;
    border-radius: 0 10px 10px 0;
    background-color: rgba(255, 255, 255, 0.035);
  }
  :root[data-glpi-theme=pratic_glass] .sidebar #navbar-menu .nav-item .nav-link.active + .dropdown-menu .dropdown-item, :root[data-glpi-theme=pratic_glass] .sidebar #navbar-menu .nav-item .nav-link.show + .dropdown-menu .dropdown-item {
    border-left: 3px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.72);
  }
  :root[data-glpi-theme=pratic_glass] .sidebar #navbar-menu .nav-item .nav-link.active + .dropdown-menu .dropdown-item:hover, :root[data-glpi-theme=pratic_glass] .sidebar #navbar-menu .nav-item .nav-link.show + .dropdown-menu .dropdown-item:hover {
    border-left-color: var(--pratic-teal);
    background-color: var(--pratic-glass);
    color: #fff;
  }
  :root[data-glpi-theme=pratic_glass] .sidebar #navbar-menu .nav-item .nav-link.active + .dropdown-menu .dropdown-item.active, :root[data-glpi-theme=pratic_glass] .sidebar #navbar-menu .nav-item .nav-link.show + .dropdown-menu .dropdown-item.active {
    border-left-color: var(--pratic-teal);
    background-color: var(--pratic-glass-strong);
    color: var(--pratic-teal-light);
  }
  :root[data-glpi-theme=pratic_glass] .sidebar #navbar-menu .nav-item:hover .nav-link {
    border-left-color: var(--pratic-teal);
    background-color: var(--pratic-glass);
    color: #fff;
  }
}
@media (min-width: 992px) {
  :root[data-glpi-theme=pratic_glass] body.navbar-collapsed .sidebar #navbar-menu .nav-item.active {
    background-color: var(--pratic-glass-strong);
    box-shadow: inset 3px 0 0 var(--pratic-teal);
  }
  :root[data-glpi-theme=pratic_glass] body.navbar-collapsed .sidebar #navbar-menu .nav-item:hover > .nav-link {
    border-left-color: transparent;
    background-color: var(--pratic-glass);
    color: #fff;
  }
  :root[data-glpi-theme=pratic_glass] body.vertical-layout header.navbar {
    background-color: transparent;
    border-bottom: 1px solid rgba(18, 55, 97, 0.08);
    box-shadow: 0 6px 24px rgba(10, 33, 61, 0.06) !important;
  }
  :root[data-glpi-theme=pratic_glass] body.vertical-layout header.navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    pointer-events: none;
  }
}
@media (min-width: 768px) {
  :root[data-glpi-theme=pratic_glass] .secondary-bar {
    background-color: transparent;
    border-bottom: 1px solid rgba(18, 55, 97, 0.08);
    box-shadow: 0 6px 24px rgba(10, 33, 61, 0.06) !important;
  }
  :root[data-glpi-theme=pratic_glass] .secondary-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    pointer-events: none;
  }
}