/* KISS dashboard 'Cijfers' (kd-*). Afgeleid van hours-dashboard.css in Workforce; licht en donker thema. */
.kd-dashboard { padding: 16px; background: #F5F7FA; min-height: 100%; font-size: 13px; color: #1f2937; }
[data-bs-theme='dark'] .kd-dashboard { background: #1c1c1c; color: #e6e6e6; }
.kd-loading { padding: 40px; text-align: center; color: #6B7280; }
.kd-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06); padding: 16px; min-width: 0; }
[data-bs-theme='dark'] .kd-card { background: #262626; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.kd-card-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kd-sub { font-weight: 400; font-size: 12px; opacity: .7; }
.kd-muted { opacity: .65; }
.kd-good { color: #059669; }
.kd-bad { color: #DC2626; }
.kd-right { margin-left: auto; font-size: 12px; }
.kd-help { font-size: 12px; opacity: .7; margin-top: 8px; }
.kd-notes { font-size: 12px; opacity: .75; margin-top: 12px; line-height: 1.6; }

.kd-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.kd-filter-label { font-weight: 600; }
.kd-year { width: 110px; }

.kd-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.kd-kpi { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; }
.kd-kpi-icon { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; background-repeat: no-repeat; background-position: center; background-size: 22px; }
.kd-kpi-body { flex: 1; min-width: 0; }
.kd-kpi-title { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; opacity: .7; margin-bottom: 4px; }
.kd-kpi-value { font-size: 24px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kd-kpi-trend { font-size: 12px; margin-top: 4px; font-weight: 500; }
.kd-icon-revenue { background-color: #FFF6E0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C48C14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 17 9 11 13 15 21 7'/><polyline points='14 7 21 7 21 14'/></svg>"); }
.kd-icon-month { background-color: #EFF6FF; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E88E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>"); }
.kd-icon-open { background-color: #ECFDF5; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343A047' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>"); }
.kd-icon-overdue { background-color: #FEF2F2; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>"); }
[data-bs-theme='dark'] .kd-kpi-icon { filter: saturate(.8); }

.kd-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.kd-col-1 { grid-column: span 1; }
.kd-col-2 { grid-column: span 2; }
.kd-col-3 { grid-column: span 3; }

/* Staafdiagram per maand (twee reeksen) */
.kd-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 220px; align-items: end; padding-top: 18px; }
.kd-chart-col { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; min-width: 0; }
.kd-chart-col.kd-future { opacity: .45; }
.kd-bars { display: flex; align-items: flex-end; gap: 3px; height: 160px; width: 100%; justify-content: center; }
.kd-bar { width: 38%; max-width: 22px; border-radius: 3px 3px 0 0; min-height: 1px; transition: height .2s; }
.kd-bar-cur { background: #FFB71B; }
.kd-bar-prev { background: rgba(128,128,128,.35); }
.kd-chart-val { font-size: 10px; opacity: .75; margin-top: 4px; font-variant-numeric: tabular-nums; height: 14px; }
.kd-chart-label { font-size: 11px; opacity: .8; }
.kd-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin: 0 2px; }
.kd-swatch-cur { background: #FFB71B; }
.kd-swatch-prev { background: rgba(128,128,128,.35); }

/* Tabellen */
table.kd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.kd-table th { text-align: left; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid rgba(128,128,128,.35); white-space: nowrap; }
table.kd-table td { padding: 5px 8px; border-bottom: 1px solid rgba(128,128,128,.15); vertical-align: top; }
table.kd-table td.num, table.kd-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.kd-table tr.kd-total td { font-weight: 600; border-top: 2px solid rgba(128,128,128,.35); }
table.kd-table tr.kd-row-warn td { background: rgba(255,183,27,.12); }
table.kd-table tr.kd-row-bad td { background: rgba(220,38,38,.10); }
.kd-scroll { max-height: 440px; overflow: auto; }
.kd-scroll table.kd-table thead th { position: sticky; top: 0; background: #fff; }
[data-bs-theme='dark'] .kd-scroll table.kd-table thead th { background: #262626; }
.kd-bar-inline { display: inline-block; width: 60px; height: 6px; background: rgba(128,128,128,.2); border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.kd-bar-inline > span { display: block; height: 100%; background: #FFB71B; }

@media (max-width: 1200px) {
    .kd-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .kd-row { grid-template-columns: 1fr; }
    .kd-col-2, .kd-col-3 { grid-column: span 1; }
}

/* ==========================================================
   Live-tegels in de zwarte kopbalk (kiss-live-tiles.js): Uren / Productie / Ingeklokt van
   alle klanten bij elkaar, links van de drie header-iconen. De header is altijd donker.
   ========================================================== */
.klt-wrap { display: flex; align-items: center; gap: 6px; order: 1; margin-left: auto; margin-right: 6px; flex: 0 0 auto; }
/* Volgorde rechts: [schermtitel] … [tegels] [bel] [account] [instellingen] (zelfde truc als
   workforce-header.css). De DX-toolbar (bel) mag niet uitrekken: dat staat hier ALTIJD aan, niet
   pas na het injecteren van de tegels, want krimpt de toolbar achteraf dan schakelt DevExpress
   de adaptieve modus in en verdwijnt de tekst "0" naast de bel. Zonder tegels duwt de toolbar
   zelf alles naar rechts (margin-left:auto); mét tegels neemt .klt-wrap dat over. */
div.header .header-right-side > dxbl-toolbar { flex: 0 0 auto !important; margin-left: auto; }
div.header .header-right-side.klt-has-tiles > dxbl-toolbar { order: 2; margin-left: 0; }
.header-right-side.klt-has-tiles > .d-flex.ms-auto { order: 3; margin-left: 0 !important; }
.klt-tile { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; height: 36px; min-width: 64px; padding: 0 10px; border: 1px solid #333333; border-radius: 8px; background: #262626; color: #fff; cursor: pointer; line-height: 1; font-family: inherit; transition: border-color .15s, background .15s; }
.klt-tile:hover, .klt-tile:focus-visible { border-color: #444444; background: #2e2e2e; outline: none; }
.klt-value { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: #ffffff !important; }
/* Kleurcode van de Workforce-website: uren/ingeklokt/aanmeldingen geel #FFB71B, productie blauw #0099FF, toegang en cloud wit. */
.klt-tile[data-key="hours"] .klt-value, .klt-tile[data-key="clockedIn"] .klt-value, .klt-tile[data-key="entries"] .klt-value { color: #FFB71B !important; }
.klt-tile[data-key="productionAmount"] .klt-value, .klt-tile[data-key="productionKg"] .klt-value { color: #0099FF !important; }
.klt-tile[data-key="systemsOnline"] .klt-value { color: #43A047 !important; }
.klt-tile[data-key="systemsOffline"] .klt-value { color: #DC2626 !important; }
.klt-tile[data-key="myTickets"] .klt-value { color: #FFB71B !important; }
.klt-panel a { color: inherit; text-decoration: underline; text-decoration-color: rgba(128,128,128,.5); }
.klt-panel a:hover { color: #FFB71B; }
.klt-label { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #9a9a9a !important; margin-top: 2px; white-space: nowrap; }
.klt-dot { align-self: center; width: 7px; height: 7px; border-radius: 50%; background: #555; margin-left: 2px; }
.klt-dot-ok { background: #43A047; box-shadow: 0 0 0 3px rgba(67,160,71,.18); }
.klt-dot-warn { background: #f4a522; box-shadow: 0 0 0 3px rgba(244,165,34,.2); }
.klt-dot-wait { background: #666; animation: klt-pulse 1.2s ease-in-out infinite; }
@keyframes klt-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (max-width: 1500px) { .klt-label { display: none; } .klt-tile { min-width: 0; height: 30px; } }
@media (max-width: 820px) { .klt-wrap { display: none; } }

.klt-panel { position: fixed; z-index: 2000; width: 380px; max-height: 70vh; overflow: auto; background: #fff; color: #1f2937; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 12px 14px; font-size: 13px; }
[data-bs-theme='dark'] .klt-panel { background: #262626; color: #e6e6e6; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.klt-panel-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.klt-panel-head strong { font-size: 14px; }
.klt-panel-sub { font-size: 12px; opacity: .7; margin-bottom: 8px; }
.klt-close { margin-left: auto; border: 0; background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; opacity: .6; }
.klt-close:hover { opacity: 1; }
.klt-table { width: 100%; border-collapse: collapse; }
.klt-table td { padding: 3px 0; border-bottom: 1px solid rgba(128,128,128,.15); }
.klt-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.klt-muted { opacity: .6; font-size: 12px; }
.klt-warn { color: #f4a522; }
.klt-up { color: #43A047; }
.klt-down { color: #DC2626; }
.klt-table th { font-weight: 500; font-size: 11px; opacity: .6; text-align: left; padding: 2px 0 4px; }
.klt-panel-foot { margin-top: 8px; font-size: 12px; opacity: .8; }
.klt-failed { margin-top: 6px; font-size: 11px; opacity: .7; line-height: 1.5; }
.klt-rise { animation: klt-rise 1.6s ease-out; }
@keyframes klt-rise { 0% { box-shadow: 0 0 0 0 rgba(67,160,71,.9); border-color: #43A047; } 100% { box-shadow: 0 0 0 14px rgba(67,160,71,0); border-color: #333333; } }
.klt-sound { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; opacity: .8; cursor: pointer; }
.klt-sound-test { margin-left: 8px; font-size: 11px; padding: 1px 8px; border-radius: 8px; border: 1px solid rgba(128,128,128,.4); background: transparent; color: inherit; cursor: pointer; }
.klt-sound-select { margin-left: 8px; font-size: 12px; padding: 2px 6px; border-radius: 6px; border: 1px solid rgba(128,128,128,.4); background: transparent; color: inherit; }