/* Simpla Work App - moderne knoppen (geladen na layout.css in default.master, login.aspx en loginByPin.aspx)
 *
 * Bouwt verder op de Simpla-kleuren en afrondingen uit layout.css (--pt-*). Geen HTML-wijzigingen:
 * alle bestaande bootstrap-klassen (btn, btn-sm, btn-block, btn-primary, btn-outline-..., btn-light) blijven.
 *
 *  - omlijnde knoppen (btn-outline-...) worden "zachte" knoppen: lichte tint + gekleurde tekst
 *    -> rustiger, beter leesbaar, groter aanraakvlak zichtbaar
 *  - indrukeffect bij tikken (iets kleiner), hover-effect enkel met muis (geen "blijvende hover" op gsm)
 *  - duidelijke focusring voor toetsenbord, uitgeschakelde knoppen herkenbaar
 *  - grotere tikvlakken op touchscreens, knoppen over de volle breedte iets hoger
 *  - aangepaste varianten binnen donkere kaarten (bv. "Prestaties van ...")
 */

/* --- basis ------------------------------------------------------------------------ */
.btn:not(.btn-link):not(.close) {
    position: relative;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .005em;
    border-radius: var(--pt-radius-sm, 8px);
    box-shadow: 0 1px 2px rgba(20, 22, 28, .06);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                box-shadow .15s ease, transform .08s ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation; /* geen 300 ms vertraging / dubbel-tik-zoom */
}

/* geen springend effect meer bij hover (layout.css) - enkel subtiel met een muis */
.btn:hover { transform: none; }
@media (hover: hover) and (pointer: fine) {
    .btn:not(.btn-link):not(.close):not(:disabled):not(.disabled):hover {
        box-shadow: 0 3px 10px rgba(20, 22, 28, .10);
    }
}

/* indrukken: kort "ingedrukt"-gevoel */
.btn:not(.btn-link):not(.close):not([disabled]):not(.disabled):active {
    transform: scale(.97);
    box-shadow: none;
}

/* focus via toetsenbord: zachte ring i.p.v. harde rand */
.btn:focus { box-shadow: 0 1px 2px rgba(20, 22, 28, .06); }
.btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(5, 104, 204, .28) !important;
}

/* uitgeschakeld (o.a. na "Opslaan" tijdens het bewaren) */
.btn:disabled, .btn.disabled {
    opacity: .55;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed;
}

/* --- maten ------------------------------------------------------------------------ */
.btn-sm { padding: 6px 12px; font-size: .85rem; border-radius: var(--pt-radius-sm, 8px); }
.btn-lg { padding: 12px 22px; font-size: 1.05rem; border-radius: 10px; }
.btn-block, .btn.w-100 { padding-top: 12px; padding-bottom: 12px; }
.btn-sm.btn-block, .btn-sm.w-100 { padding-top: 8px; padding-bottom: 8px; }

/* touchscreens: grotere tikvlakken (min. ~40 px) */
@media (pointer: coarse) {
    .btn:not(.btn-link):not(.close) { padding-top: 11px; padding-bottom: 11px; }
    .btn-sm:not(.btn-link) { padding-top: 8px; padding-bottom: 8px; min-width: 40px; }
}

/* --- gevulde knoppen: lichte glans bovenaan, tekst altijd wit/leesbaar ------------- */
.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-dark {
    color: #fff;
    box-shadow: 0 1px 2px rgba(20, 22, 28, .10), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn-warning {
    color: #3d2a00;
    box-shadow: 0 1px 2px rgba(20, 22, 28, .10), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-warning:hover, .btn-warning:focus { background-color: #e39a2c; border-color: #e39a2c; color: #3d2a00; }

/* ingedrukt: Simpla-kleuren i.p.v. de standaard bootstrap-kleuren */
.btn-primary:not([disabled]):not(.disabled):active, .btn-primary:not([disabled]):not(.disabled).active { background-color: var(--pt-primary-dark, #04519e); border-color: var(--pt-primary-dark, #04519e); }
.btn-success:not([disabled]):not(.disabled):active, .btn-success:not([disabled]):not(.disabled).active { background-color: var(--pt-success-dark, #086b3c); border-color: var(--pt-success-dark, #086b3c); }
.btn-danger:not([disabled]):not(.disabled):active, .btn-danger:not([disabled]):not(.disabled).active { background-color: var(--pt-danger-dark, #b3212f); border-color: var(--pt-danger-dark, #b3212f); }
.btn-info:not([disabled]):not(.disabled):active, .btn-info:not([disabled]):not(.disabled).active { background-color: var(--pt-primary-dark, #04519e); border-color: var(--pt-primary-dark, #04519e); }

/* neutrale knop (bv. "Inloggen met PIN-code") */
.btn-secondary {
    background-color: #eceef3; border-color: #eceef3; color: var(--pt-text, #1c1f27);
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-secondary:not([disabled]):not(.disabled):active {
    background-color: #e0e3ea; border-color: #e0e3ea; color: var(--pt-text, #1c1f27);
}

/* witte knop */
.btn-light {
    background-color: var(--pt-surface, #fff);
    border-color: var(--pt-border, #e3e5ef);
    color: var(--pt-text, #1c1f27);
}
.btn-light:hover, .btn-light:focus { background-color: #f3f5f9; border-color: #d7dae5; color: var(--pt-text, #1c1f27); }

/* --- zachte knoppen (vervangen de omlijnde) ----------------------------------------- */
.btn-outline-primary   { --bt-c: #0568cc; --bt-t: rgba(5, 104, 204, .09);   --bt-h: rgba(5, 104, 204, .16);   --bt-b: rgba(5, 104, 204, .22); }
.btn-outline-success   { --bt-c: #0a7d46; --bt-t: rgba(12, 138, 78, .09);   --bt-h: rgba(12, 138, 78, .16);   --bt-b: rgba(12, 138, 78, .24); }
.btn-outline-danger    { --bt-c: #c82333; --bt-t: rgba(220, 53, 69, .08);   --bt-h: rgba(220, 53, 69, .15);   --bt-b: rgba(220, 53, 69, .24); }
.btn-outline-info      { --bt-c: #0b78ad; --bt-t: rgba(15, 143, 206, .09);  --bt-h: rgba(15, 143, 206, .16);  --bt-b: rgba(15, 143, 206, .24); }
.btn-outline-warning   { --bt-c: #8a5a00; --bt-t: rgba(242, 169, 60, .14);  --bt-h: rgba(242, 169, 60, .24);  --bt-b: rgba(242, 169, 60, .40); }
.btn-outline-secondary { --bt-c: #4b5160; --bt-t: rgba(107, 114, 128, .08); --bt-h: rgba(107, 114, 128, .15); --bt-b: rgba(107, 114, 128, .22); }
.btn-outline-dark      { --bt-c: #1c1f27; --bt-t: rgba(20, 22, 28, .06);    --bt-h: rgba(20, 22, 28, .12);    --bt-b: rgba(20, 22, 28, .18); }

.btn-outline-primary, .btn-outline-success, .btn-outline-danger, .btn-outline-info,
.btn-outline-warning, .btn-outline-secondary, .btn-outline-dark {
    color: var(--bt-c);
    background-color: var(--bt-t);
    border-color: var(--bt-b);
    box-shadow: none;
}
.btn-outline-primary:hover, .btn-outline-success:hover, .btn-outline-danger:hover, .btn-outline-info:hover,
.btn-outline-warning:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover,
.btn-outline-primary:focus, .btn-outline-success:focus, .btn-outline-danger:focus, .btn-outline-info:focus,
.btn-outline-warning:focus, .btn-outline-secondary:focus, .btn-outline-dark:focus {
    color: var(--bt-c);
    background-color: var(--bt-h);
    border-color: var(--bt-b);
}

/* gekozen / actief (filters zoals Vandaag - Deze week, schakelaars): gevuld */
.btn-outline-primary:not([disabled]):not(.disabled).active, .btn-outline-primary:not([disabled]):not(.disabled):active,
.btn-outline-success:not([disabled]):not(.disabled).active, .btn-outline-success:not([disabled]):not(.disabled):active,
.btn-outline-danger:not([disabled]):not(.disabled).active, .btn-outline-danger:not([disabled]):not(.disabled):active,
.btn-outline-info:not([disabled]):not(.disabled).active, .btn-outline-info:not([disabled]):not(.disabled):active,
.btn-outline-secondary:not([disabled]):not(.disabled).active, .btn-outline-secondary:not([disabled]):not(.disabled):active,
.btn-outline-dark:not([disabled]):not(.disabled).active, .btn-outline-dark:not([disabled]):not(.disabled):active {
    color: #fff;
    background-color: var(--bt-c);
    border-color: var(--bt-c);
}
.btn-outline-warning:not([disabled]):not(.disabled).active, .btn-outline-warning:not([disabled]):not(.disabled):active {
    color: #3d2a00; background-color: var(--pt-warning, #f2a93c); border-color: var(--pt-warning, #f2a93c);
}

/* --- knoppen binnen donkere kaarten (bg-dark) ---------------------------------------- */
.bg-dark .btn-outline-primary   { --bt-c: #7db8f5; --bt-t: rgba(125, 184, 245, .12); --bt-h: rgba(125, 184, 245, .22); --bt-b: rgba(125, 184, 245, .30); }
.bg-dark .btn-outline-success   { --bt-c: #6fd6a2; --bt-t: rgba(111, 214, 162, .12); --bt-h: rgba(111, 214, 162, .22); --bt-b: rgba(111, 214, 162, .30); }
.bg-dark .btn-outline-danger    { --bt-c: #ff8a95; --bt-t: rgba(255, 138, 149, .12); --bt-h: rgba(255, 138, 149, .22); --bt-b: rgba(255, 138, 149, .30); }
.bg-dark .btn-outline-info      { --bt-c: #7fd0f5; --bt-t: rgba(127, 208, 245, .12); --bt-h: rgba(127, 208, 245, .22); --bt-b: rgba(127, 208, 245, .30); }
.bg-dark .btn-outline-secondary,
.bg-dark .btn-outline-light     { --bt-c: #e7e9ef; --bt-t: rgba(255, 255, 255, .08); --bt-h: rgba(255, 255, 255, .16); --bt-b: rgba(255, 255, 255, .22); }
.bg-dark .btn-outline-light {
    color: var(--bt-c); background-color: var(--bt-t); border-color: var(--bt-b);
}
.bg-dark .btn-outline-light:hover, .bg-dark .btn-outline-light:focus { color: #fff; background-color: var(--bt-h); }
.bg-dark .btn-outline-primary:not([disabled]):not(.disabled).active, .bg-dark .btn-outline-success:not([disabled]):not(.disabled).active, .bg-dark .btn-outline-danger:not([disabled]):not(.disabled).active,
.bg-dark .btn-outline-info:not([disabled]):not(.disabled).active, .bg-dark .btn-outline-secondary:not([disabled]):not(.disabled).active { color: #14161c; }

/* geen harde bootstrap-ring bij ingedrukt/actief (bootstrap 4.0 zet die altijd) */
.btn:not([disabled]):not(.disabled):active,
.btn:not([disabled]):not(.disabled).active { box-shadow: none; }

/* --- groepen: aaneengesloten knoppen niet laten "springen" --------------------------- */
.btn-group > .btn:not(.btn-link) { box-shadow: none; }
.btn-group > .btn:not([disabled]):not(.disabled):active { transform: none; }

/* --- links die als knop dienen: geen schaduw/indruk -------------------------------- */
.btn-link { box-shadow: none !important; transform: none !important; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .btn { transition: none !important; }
    .btn:active { transform: none !important; }
}