/* TSIN / Meester365 huisstijl voor het selfserviceportaal en de inlogpagina.
   Geldt alleen voor body.helpdesk (selfservice) en body.welcome-anonymous (inloggen). */

@font-face {
    font-family: "Outfit";
    src: url("fonts/outfit-latin.woff2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "DM Sans";
    src: url("fonts/dm-sans-latin.woff2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

body.helpdesk,
body.central,
body.welcome-anonymous {
    --tsin-navy: #182038;
    --tsin-navy-2: #232d4b;
    --tsin-green: #00A870;
    --tsin-green-dark: #008559;
    --tsin-green-soft: #E3F5EE;
    --tsin-bg: #F4F2EC;
    --tsin-line: #E6E3DA;
    --tsin-muted: #5B6275;

    --tblr-primary: #00A870;
    --tblr-primary-rgb: 0, 168, 112;
    --tblr-primary-fg: #ffffff;
    --tblr-primary-text: #008559;
    --tblr-link-color: #008559;
    --tblr-link-color-rgb: 0, 133, 89;
    --tblr-link-hover-color: #182038;
    --tblr-link-hover-color-rgb: 24, 32, 56;
    --tblr-secondary: #5B6275;
    --tblr-body-color: #182038;
    --tblr-body-color-rgb: 24, 32, 56;
    --tblr-body-bg: #F4F2EC;
    --tblr-border-color: #E6E3DA;
    --tblr-border-radius: 10px;
    --tblr-font-sans-serif: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --glpi-mainmenu-bg: #182038;
    --glpi-mainmenu-fg: #ffffff;
    --glpi-helpdesk-header: #182038;
    --glpi-helpdesk-tiles-section-bg: #F4F2EC;
    --glpi-helpdesk-tabs-section-bg: #ffffff;
    --glpi-palette-color-1: #00A870;
    --glpi-palette-color-2: #182038;
    --glpi-palette-color-3: #7FD4B8;
    --glpi-palette-color-4: #F4F2EC;
    --glpi-illustrations-gradient-1: #E3F5EE;
    --glpi-illustrations-gradient-2: #7FD4B8;
    --glpi-illustrations-gradient-3: #00A870;

    background: var(--tsin-bg) !important;
    color: var(--tsin-navy);
    font-family: var(--tblr-font-sans-serif);
}

body.helpdesk h1, body.helpdesk h2, body.helpdesk h3, body.helpdesk h4,
body.helpdesk .card-title, body.helpdesk .page-title, body.helpdesk .navbar .nav-link,
body.welcome-anonymous h1, body.welcome-anonymous h2, body.welcome-anonymous .card-header {
    font-family: "Outfit", "DM Sans", system-ui, sans-serif;
    letter-spacing: -0.01em;
}

/* ---------- Logo ---------- */
body.helpdesk .glpi-logo,
body.welcome-anonymous .glpi-logo {
    background: url("img/tsin-logo.png") no-repeat left center / contain !important;
    width: 92px !important;
    height: 48px !important;
    display: inline-block;
}
body.welcome-anonymous .glpi-logo {
    width: 180px !important;
    height: 96px !important;
    background-position: center !important;
}
body.helpdesk .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
body.helpdesk .navbar-brand::after {
    content: "Servicedesk";
    font-family: "Outfit", system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: #ffffff;
    border-left: 1px solid rgba(255, 255, 255, .25);
    padding-left: 10px;
    line-height: 1.2;
}

/* ---------- Bovenbalk ---------- */
body.helpdesk header.navbar,
body.helpdesk .navbar.topbar {
    background: var(--tsin-navy) !important;
    border-bottom: 4px solid var(--tsin-green);
    box-shadow: none !important;
}
body.helpdesk .navbar .nav-link,
body.helpdesk .navbar .nav-link .menu-label,
body.helpdesk .navbar .nav-link i {
    color: #ffffff !important;
}
body.helpdesk .navbar .nav-item.active > .nav-link,
body.helpdesk .navbar .nav-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .08);
    border-radius: 8px;
}
body.helpdesk .navbar .nav-item.active > .nav-link {
    box-shadow: inset 0 -3px 0 var(--tsin-green);
}

/* ---------- Startpagina ---------- */
body.helpdesk .search-banner {
    background: var(--tsin-navy) !important;
    background-image:
        radial-gradient(900px 300px at 85% 110%, rgba(0, 168, 112, .28), transparent 60%),
        radial-gradient(700px 260px at 10% -10%, rgba(127, 212, 184, .14), transparent 60%) !important;
}
body.helpdesk .search-banner .search-banner-content {
    padding-top: 110px;
    padding-bottom: 60px;
}
body.helpdesk .helpdesk-home-container h1 {
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(2.1rem, 4.2vw, 3.3rem);
}
body.helpdesk .tsin-home-sub {
    text-align: center;
    color: #C9CFDB;
    font-size: 1.1rem;
    margin: .6rem 0 0;
    position: relative;
    z-index: 1;
}
body.helpdesk .helpdesk-home-container .search-bar-container {
    padding: 2rem 0 2.6rem;
}
body.helpdesk .home-search {
    border-radius: 999px !important;
    border: 0 !important;
    padding-top: .85rem;
    padding-bottom: .85rem;
    font-size: 1.05rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
body.helpdesk .home-search::placeholder {
    color: var(--tsin-muted) !important;
}
body.helpdesk .search-bar-container .input-icon-addon {
    color: var(--tsin-green);
}
body.helpdesk .search-banner .scene {
    opacity: .9;
}

body.helpdesk .tiles-banner {
    padding-top: 48px;
    padding-bottom: 56px;
}
body.helpdesk .tickets-banner {
    padding-top: 48px;
}

/* ---------- Kaarten (tegels, catalogus) ---------- */
body.helpdesk .tiles-banner a.card,
body.helpdesk [data-glpi-service-catalog-items] a.card {
    border: 1px solid var(--tsin-line) !important;
    border-radius: 14px !important;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(24, 32, 56, .06);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    text-decoration: none;
}
body.helpdesk .tiles-banner a.card:hover,
body.helpdesk .tiles-banner a.card:focus-visible,
body.helpdesk [data-glpi-service-catalog-items] a.card:hover,
body.helpdesk [data-glpi-service-catalog-items] a.card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--tsin-green) !important;
    box-shadow: 0 10px 24px rgba(24, 32, 56, .10);
}
body.helpdesk a.card .card-title {
    color: var(--tsin-navy);
    font-weight: 600;
    font-size: 1.15rem;
}
body.helpdesk a.card .text-secondary {
    color: var(--tsin-muted) !important;
}
body.helpdesk [data-glpi-service-catalog-items] a.card.border-menu {
    border-color: var(--tsin-green) !important;
}

/* Bestellen: categorie herkenbaar met een groene rand */
body.helpdesk a.card.tsin-shop {
    border-color: var(--tsin-green) !important;
    background: linear-gradient(180deg, #ffffff 0%, #F7FCFA 100%);
}
body.helpdesk .tsin-shop-intro {
    background: var(--tsin-navy);
    color: #ffffff;
    border-radius: 14px;
    padding: 18px 22px;
    margin: 4px 4px 14px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}
body.helpdesk .tsin-shop-intro strong {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1.15rem;
}
body.helpdesk .tsin-shop-intro span {
    color: #C9CFDB;
}
body.helpdesk .tsin-shop-intro ol {
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
    counter-reset: stap;
}
body.helpdesk .tsin-shop-intro li {
    counter-increment: stap;
    color: #ffffff;
    font-size: .95rem;
}
body.helpdesk .tsin-shop-intro li::before {
    content: counter(stap);
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--tsin-green);
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    margin-right: 6px;
}

/* ---------- Knoppen, formulieren ---------- */
body.helpdesk .btn-primary,
body.welcome-anonymous .btn-primary {
    background: var(--tsin-green) !important;
    border-color: var(--tsin-green) !important;
    color: #ffffff !important;
    border-radius: 999px;
    font-weight: 600;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}
body.helpdesk .btn-primary:hover,
body.welcome-anonymous .btn-primary:hover {
    background: var(--tsin-green-dark) !important;
    border-color: var(--tsin-green-dark) !important;
}
body.helpdesk .form-control:focus,
body.helpdesk .form-select:focus,
body.welcome-anonymous .form-control:focus {
    border-color: var(--tsin-green);
    box-shadow: 0 0 0 .2rem rgba(0, 168, 112, .18);
}
body.helpdesk .form-check-input:checked {
    background-color: var(--tsin-green);
    border-color: var(--tsin-green);
}
body.helpdesk .card {
    border-color: var(--tsin-line);
}
body.helpdesk .breadcrumb a {
    color: var(--tsin-green-dark);
}
body.helpdesk .nav-tabs .nav-link.active {
    color: var(--tsin-navy);
    box-shadow: inset 0 -3px 0 var(--tsin-green);
}

/* ---------- Inlogpagina ---------- */
body.welcome-anonymous {
    background:
        radial-gradient(900px 400px at 50% 0%, rgba(0, 168, 112, .10), transparent 70%),
        var(--tsin-bg) !important;
}
body.welcome-anonymous .main-content-card {
    border: 1px solid var(--tsin-line);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(24, 32, 56, .08);
}

@media (max-width: 576px) {
    body.helpdesk .navbar-brand::after { display: none; }
    body.helpdesk .search-banner .search-banner-content { padding-top: 56px; padding-bottom: 36px; }
    body.helpdesk .tsin-home-sub { font-size: 1rem; padding: 0 12px; }
}


/* =================================================================
   Medewerkerskant (body.central): zelfde huisstijl, rustig gehouden
   ================================================================= */
body.central {
    --glpi-mainmenu-bg: #182038;
    --glpi-mainmenu-fg: #E9ECF3;
    --tblr-body-bg: #F4F2EC;
}
body.central h1, body.central h2, body.central h3, body.central .card-title,
body.central .navbar-vertical .nav-link, body.central .breadcrumb {
    font-family: "Outfit", "DM Sans", system-ui, sans-serif;
}
body.central aside.navbar-vertical.sidebar {
    background: var(--tsin-navy) !important;
    border-right: 3px solid var(--tsin-green);
}
body.central aside.navbar-vertical .nav-link,
body.central aside.navbar-vertical .nav-link i,
body.central aside.navbar-vertical .menu-label {
    color: #E9ECF3 !important;
}
body.central aside.navbar-vertical .nav-item.active > .nav-link,
body.central aside.navbar-vertical .nav-link:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 var(--tsin-green);
}
body.central aside.navbar-vertical .dropdown-menu {
    background: #202a47 !important;
    border-color: rgba(255, 255, 255, .08) !important;
}
body.central aside.navbar-vertical .dropdown-item {
    color: #E9ECF3 !important;
}
body.central aside.navbar-vertical .dropdown-item:hover,
body.central aside.navbar-vertical .dropdown-item.active {
    background: rgba(0, 168, 112, .18) !important;
    color: #ffffff !important;
}
body.central aside.navbar-vertical .glpi-logo {
    background: url("img/tsin-logo.png") no-repeat center / contain !important;
    width: 120px !important;
    height: 64px !important;
}
body.central.navbar-collapsed aside.navbar-vertical .glpi-logo {
    width: 48px !important;
    height: 32px !important;
}
body.central header.navbar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--tsin-line);
}
body.central .page-wrapper,
body.central .page-body {
    background: var(--tsin-bg);
}
body.central .btn-primary {
    background: var(--tsin-green) !important;
    border-color: var(--tsin-green) !important;
    color: #ffffff !important;
}
body.central .btn-primary:hover {
    background: var(--tsin-green-dark) !important;
    border-color: var(--tsin-green-dark) !important;
}
body.central .nav-tabs .nav-link.active {
    box-shadow: inset 0 -3px 0 var(--tsin-green);
}
body.central .form-check-input:checked {
    background-color: var(--tsin-green);
    border-color: var(--tsin-green);
}
body.central .card {
    border-color: var(--tsin-line);
}

/* =================================================================
   Inlogpagina: rustig, één kaart, duidelijke knoppen
   ================================================================= */
body.welcome-anonymous .page-anonymous .container-tight {
    max-width: 30rem !important;
}
body.welcome-anonymous .main-content-card .card-header:empty { display: none; }
body.welcome-anonymous .rich_text_container {
    margin-bottom: 4px;
}
body.welcome-anonymous .rich_text_container h2,
body.welcome-anonymous .rich_text_container h2 span {
    color: var(--tsin-muted) !important;
    font: 500 1rem/1.4 "DM Sans", system-ui, sans-serif !important;
    margin: 0 0 8px !important;
}
body.welcome-anonymous form .row.justify-content-center {
    flex-direction: column;
    align-items: stretch;
}
body.welcome-anonymous form .row.justify-content-center > .col-md-5,
body.welcome-anonymous form .row.justify-content-center > .col-auto {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
}
body.welcome-anonymous .card-header h2 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--tsin-navy);
    margin: 0 auto;
}
body.welcome-anonymous .form-label { font-weight: 600; color: var(--tsin-navy); }
body.welcome-anonymous .form-control {
    border-radius: 10px;
    padding: .7rem .85rem;
    border-color: #cfd3dc;
}
body.welcome-anonymous .btn-primary {
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
    font-size: 1rem;
}
/* "Inloggen via" heeft maar één keuze: verbergen */
body.welcome-anonymous .tsin-hide { display: none !important; }

/* Microsoft-inlog (plugin SAML) als nette tweede knop */
body.welcome-anonymous .plugin_glpisaml_login #saml_header { display: none !important; }
body.welcome-anonymous .plugin_glpisaml_login #saml_buttons {
    max-width: none !important;
    margin: 0 !important;
    display: block !important;
}
body.welcome-anonymous .plugin_glpisaml_login #saml_buttons > div { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
body.welcome-anonymous .plugin_glpisaml_login button[name="samlIdpId"] {
    width: 100% !important;
    margin: 0 0 6px !important;
    background: #ffffff !important;
    border: 1px solid #cfd3dc !important;
    border-radius: 999px !important;
    padding: .7rem 1rem !important;
    font: 600 1rem/1.2 "DM Sans", system-ui, sans-serif !important;
    color: var(--tsin-navy) !important;
}
body.welcome-anonymous .plugin_glpisaml_login button[name="samlIdpId"]:hover {
    border-color: var(--tsin-green) !important;
    background: #F7FCFA !important;
}
body.welcome-anonymous .plugin_glpisaml_login button[name="samlIdpId"] > div { margin: 0 !important; }
body.welcome-anonymous .plugin_glpisaml_login button[name="samlIdpId"] .d-flex { flex-direction: row !important; justify-content: center; align-items: center; gap: 10px; }
body.welcome-anonymous .plugin_glpisaml_login button[name="samlIdpId"] i { font-size: 1.25rem !important; color: var(--tsin-navy); }
body.welcome-anonymous .tsin-divider {
    display: flex; align-items: center; gap: 12px;
    color: var(--tsin-muted); font-size: .85rem; margin: 18px 0 14px;
}
body.welcome-anonymous .tsin-divider::before,
body.welcome-anonymous .tsin-divider::after { content: ""; flex: 1; height: 1px; background: var(--tsin-line); }
body.welcome-anonymous .tsin-help {
    margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--tsin-line);
    font-size: .9rem; color: var(--tsin-muted); text-align: center;
}
body.welcome-anonymous .tsin-help a { color: var(--tsin-green-dark); font-weight: 600; }

/* ---------- Iconen in TSIN-stijl (zoals op tsin.nl) ---------- */
body.helpdesk .tsin-ico {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 16px;
    background: #E3F4EC;
    color: #007A55;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
body.helpdesk a.card:hover .tsin-ico,
body.helpdesk a.card:focus-visible .tsin-ico {
    background: var(--tsin-green, #00A870);
    color: #ffffff;
    transform: translateY(-1px);
}
body.helpdesk a.card.tsin-shop .tsin-ico {
    background: var(--tsin-navy, #182038);
    color: #7FD4B8;
}