/* =====================================================================
   Portal theme for the pages in MainLayout (dashboards, accounts, time tracker, settings…).
   MainLayout's .pt-root carries the live theme as --pt-* tokens (Services/PortalAppearance.cs) and switches
   them for dark mode; everything here reads them, so an admin's theme save re-colors every open page at once.
   Only applies inside .pt-root: the Employee Portal and the sign-in pages keep their own styling.
   ===================================================================== */

.pt-root { accent-color: var(--pt-primary); }
.pt-root ::selection { background: color-mix(in srgb, var(--pt-primary) 28%, transparent); }

/* ----- Text ----- */
.pt-root :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: var(--pt-ink); }
.pt-root a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand) { color: var(--pt-primary); }
.pt-root a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):hover { color: var(--pt-primary-strong); }
.pt-root .text-muted, .pt-root .text-secondary { color: var(--pt-muted) !important; }
.pt-root .text-dark { color: var(--pt-ink) !important; }
.pt-root .text-primary { color: var(--pt-primary) !important; }
.pt-root .text-success { color: var(--pt-ok) !important; }
.pt-root .text-danger { color: var(--pt-bad) !important; }
.pt-root .text-warning { color: var(--pt-warn) !important; }
.pt-root .text-info { color: color-mix(in srgb, var(--pt-primary) 70%, #0dcaf0) !important; }

/* ----- Surfaces ----- */
.pt-root :is(.card, .modal-content, .dropdown-menu, .list-group-item, .accordion-item, .offcanvas, .toast, .popover) {
    background-color: var(--pt-surface); color: var(--pt-ink); border-color: var(--pt-line);
}
.pt-root .card { box-shadow: var(--pt-shadow); }
.pt-root :is(.card-header, .card-footer, .modal-header, .modal-footer) { background-color: transparent; border-color: var(--pt-line); }
.pt-root .bg-white { background-color: var(--pt-surface) !important; }
.pt-root .bg-light { background-color: var(--pt-subtle) !important; }
.pt-root .bg-primary { background-color: var(--pt-primary) !important; color: var(--pt-on-primary); }
.pt-root .bg-secondary { background-color: var(--pt-secondary) !important; color: var(--pt-on-secondary); }
.pt-root .bg-success { background-color: var(--pt-ok) !important; }
.pt-root .bg-danger { background-color: var(--pt-bad) !important; }
.pt-root .bg-warning { background-color: var(--pt-warn) !important; }
.pt-root :is(.border, .border-top, .border-bottom, .border-start, .border-end) { border-color: var(--pt-line) !important; }
.pt-root hr { border-color: var(--pt-line); opacity: 1; }
.pt-root .dropdown-item { color: var(--pt-ink); }
.pt-root .dropdown-item:hover, .pt-root .dropdown-item:focus { background-color: var(--pt-hover); color: var(--pt-ink); }
.pt-root .dropdown-item.text-danger { color: var(--pt-bad) !important; }
.pt-root .dropdown-divider { border-color: var(--pt-line); }
.pt-root .modal-backdrop.show { opacity: 0.55; }

/* ----- Buttons ----- */
.pt-root .btn-primary {
    --bs-btn-bg: var(--pt-primary); --bs-btn-border-color: var(--pt-primary); --bs-btn-color: var(--pt-on-primary);
    --bs-btn-hover-bg: var(--pt-primary-strong); --bs-btn-hover-border-color: var(--pt-primary-strong); --bs-btn-hover-color: var(--pt-on-primary);
    --bs-btn-active-bg: var(--pt-primary-strong); --bs-btn-active-border-color: var(--pt-primary-strong); --bs-btn-active-color: var(--pt-on-primary);
    --bs-btn-disabled-bg: var(--pt-primary); --bs-btn-disabled-border-color: var(--pt-primary);
    --bs-btn-focus-shadow-rgb: var(--pt-primary-rgb);
}
.pt-root .btn-outline-primary {
    --bs-btn-color: var(--pt-primary); --bs-btn-border-color: var(--pt-primary);
    --bs-btn-hover-bg: var(--pt-primary); --bs-btn-hover-border-color: var(--pt-primary); --bs-btn-hover-color: var(--pt-on-primary);
    --bs-btn-active-bg: var(--pt-primary); --bs-btn-active-color: var(--pt-on-primary);
}
.pt-root :is(.btn-secondary, .btn-light) {
    --bs-btn-bg: var(--pt-subtle); --bs-btn-border-color: var(--pt-line-strong); --bs-btn-color: var(--pt-ink);
    --bs-btn-hover-bg: var(--pt-hover); --bs-btn-hover-border-color: var(--pt-line-strong); --bs-btn-hover-color: var(--pt-ink);
}
.pt-root :is(.btn-outline-secondary, .btn-outline-dark, .btn-outline-light) {
    --bs-btn-color: var(--pt-ink); --bs-btn-border-color: var(--pt-line-strong);
    --bs-btn-hover-bg: var(--pt-hover); --bs-btn-hover-border-color: var(--pt-line-strong); --bs-btn-hover-color: var(--pt-ink);
}
.pt-root .btn-outline-info {
    --bs-btn-color: var(--pt-primary); --bs-btn-border-color: color-mix(in srgb, var(--pt-primary) 60%, transparent);
    --bs-btn-hover-bg: var(--pt-primary-soft); --bs-btn-hover-color: var(--pt-primary); --bs-btn-hover-border-color: var(--pt-primary);
}
.pt-root .btn-success { --bs-btn-bg: var(--pt-ok); --bs-btn-border-color: var(--pt-ok); --bs-btn-hover-bg: color-mix(in srgb, var(--pt-ok) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--pt-ok) 85%, #000); }
.pt-root .btn-danger { --bs-btn-bg: var(--pt-bad); --bs-btn-border-color: var(--pt-bad); --bs-btn-hover-bg: color-mix(in srgb, var(--pt-bad) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--pt-bad) 85%, #000); }
.pt-root .btn-close { filter: none; }
.pt-root[data-pt-mode="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* The theme's button effect (Theme settings): applied to primary buttons. */
.pt-root[data-pt-button="pulse"] .btn-primary:not(:disabled) { animation: pt-btn-pulse 2.4s ease-in-out infinite; }
.pt-root[data-pt-button="shine"] .btn-primary { position: relative; overflow: hidden; }
.pt-root[data-pt-button="shine"] .btn-primary::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); animation: pt-btn-shine 3.2s ease-in-out infinite;
}
.pt-root[data-pt-button="grow"] .btn-primary { transition: transform 0.15s ease; }
.pt-root[data-pt-button="grow"] .btn-primary:hover:not(:disabled) { transform: scale(1.04); }
@keyframes pt-btn-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pt-primary) 40%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
@keyframes pt-btn-shine { from { left: -60%; } to { left: 130%; } }

/* The theme's color style for filled buttons. */
.pt-root[data-pt-accent="gradient"] .btn-primary { background-image: linear-gradient(135deg, var(--pt-primary), var(--pt-secondary)); border-color: transparent; }
.pt-root[data-pt-accent="soft"] .btn-primary { --bs-btn-bg: var(--pt-primary-soft); --bs-btn-color: var(--pt-primary); --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--pt-on-primary); }
.pt-root[data-pt-accent="glass"] .btn-primary { --bs-btn-bg: color-mix(in srgb, var(--pt-primary) 72%, transparent); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.pt-root[data-pt-accent="outline"] .btn-primary { --bs-btn-bg: transparent; --bs-btn-color: var(--pt-primary); --bs-btn-hover-color: var(--pt-on-primary); }

/* ----- Forms ----- */
.pt-root :is(.form-control, .form-select, .input-group-text) {
    background-color: var(--pt-surface); color: var(--pt-ink); border-color: var(--pt-line-strong);
}
.pt-root .input-group-text { background-color: var(--pt-subtle); color: var(--pt-muted); }
.pt-root :is(.form-control, .form-select)::placeholder { color: var(--pt-faint); }
.pt-root :is(.form-control, .form-select):focus {
    border-color: var(--pt-primary); box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--pt-primary) 22%, transparent);
    background-color: var(--pt-surface); color: var(--pt-ink);
}
.pt-root :is(.form-control, .form-select):disabled, .pt-root .form-control[readonly] { background-color: var(--pt-subtle); color: var(--pt-muted); }
.pt-root .form-check-input { background-color: var(--pt-surface); border-color: var(--pt-line-strong); }
.pt-root .form-check-input:checked { background-color: var(--pt-primary); border-color: var(--pt-primary); }
.pt-root .form-check-input:focus { box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--pt-primary) 22%, transparent); border-color: var(--pt-primary); }
.pt-root[data-pt-mode="dark"] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a2a8b3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.pt-root label, .pt-root .form-label { color: inherit; }
.pt-root .validation-message, .pt-root .invalid-feedback { color: var(--pt-bad); }

/* ----- Tables ----- */
.pt-root .table {
    --bs-table-color: var(--pt-ink); --bs-table-bg: transparent; --bs-table-border-color: var(--pt-line);
    --bs-table-striped-bg: var(--pt-subtle); --bs-table-striped-color: var(--pt-ink);
    --bs-table-hover-bg: var(--pt-hover); --bs-table-hover-color: var(--pt-ink);
    --bs-table-active-bg: var(--pt-primary-soft); color: var(--pt-ink); border-color: var(--pt-line);
}
.pt-root .table > thead { color: var(--pt-muted); }
.pt-root .table-light { --bs-table-bg: var(--pt-subtle); --bs-table-color: var(--pt-ink); }
.pt-root .table-dark { --bs-table-bg: var(--pt-inverse); }

/* ----- Feedback ----- */
.pt-root .alert-primary, .pt-root .alert-info { background-color: var(--pt-primary-soft); border-color: color-mix(in srgb, var(--pt-primary) 30%, transparent); color: var(--pt-ink); }
.pt-root .alert-success { background-color: var(--pt-ok-soft); border-color: color-mix(in srgb, var(--pt-ok) 30%, transparent); color: var(--pt-ok); }
.pt-root .alert-danger { background-color: var(--pt-bad-soft); border-color: color-mix(in srgb, var(--pt-bad) 30%, transparent); color: var(--pt-bad); }
.pt-root .alert-warning { background-color: var(--pt-warn-soft); border-color: color-mix(in srgb, var(--pt-warn) 30%, transparent); color: var(--pt-warn); }
.pt-root .badge.bg-primary, .pt-root .badge.text-bg-primary { background-color: var(--pt-primary) !important; color: var(--pt-on-primary) !important; }
.pt-root .progress { background-color: var(--pt-line-soft); }
.pt-root .progress-bar { background-color: var(--pt-primary); }
.pt-root :is(.nav-tabs .nav-link.active, .nav-pills .nav-link.active) { color: var(--pt-primary) !important; border-color: var(--pt-line) var(--pt-line) var(--pt-surface); background-color: var(--pt-surface); }
.pt-root .nav-pills .nav-link.active { background-color: var(--pt-primary); color: var(--pt-on-primary) !important; }
.pt-root .page-link { background-color: var(--pt-surface); color: var(--pt-primary); border-color: var(--pt-line); }
.pt-root .page-item.active .page-link { background-color: var(--pt-primary); border-color: var(--pt-primary); color: var(--pt-on-primary); }

/* ----- The theme's hover effect on cards ----- */
.pt-root[data-pt-hover="lift"] .card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.pt-root[data-pt-hover="lift"] .card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12); }
.pt-root[data-pt-hover="glow"] .card:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pt-primary) 30%, transparent), 0 10px 30px color-mix(in srgb, var(--pt-primary) 18%, transparent); }
.pt-root[data-pt-hover="outline"] .card:hover { box-shadow: inset 0 0 0 1.5px var(--pt-secondary); }
.pt-root[data-pt-hover="tint"] .card:hover { background-color: var(--pt-primary-soft); }

/* ----- Scrollbars ----- */
.pt-root[data-pt-mode="dark"] * { scrollbar-color: var(--pt-line-strong) transparent; }

/* ----- Color changes ease in instead of snapping ----- */
.pt-root :is(.card, .btn, .form-control, .form-select, .table, .modal-content, .dropdown-menu) {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .pt-root .btn-primary, .pt-root .btn-primary::after { animation: none !important; }
    .pt-root[data-pt-hover="lift"] .card:hover { transform: none; }
    .pt-root :is(.card, .btn, .form-control, .form-select, .table, .modal-content, .dropdown-menu) { transition: none; }
}