/**
 * Tax3S — Global themed controls (Bootstrap + native inputs)
 * Load SAU Bootstrap. Dùng token từ tax3s-tokens.css.
 * Dark overrides bổ sung trong tax3s-dark.css (load sau file này).
 */

/* ── Links ── */
a {
    color: var(--tx-primary);
}
a:hover,
a:focus {
    color: var(--tx-primary-dark);
}

/* ── Text inputs / selects (light themes) ── */
html:not([data-theme="dark"]) .form-control,
html:not([data-theme="dark"]) .custom-select,
html:not([data-theme="dark"]) select.form-control,
html:not([data-theme="dark"]) textarea.form-control,
html:not([data-theme="dark"]) input.form-control,
html:not([data-theme="dark"]) input[type="text"],
html:not([data-theme="dark"]) input[type="password"],
html:not([data-theme="dark"]) input[type="email"],
html:not([data-theme="dark"]) input[type="number"],
html:not([data-theme="dark"]) input[type="search"],
html:not([data-theme="dark"]) input[type="tel"],
html:not([data-theme="dark"]) input[type="url"],
html:not([data-theme="dark"]) input[type="date"],
html:not([data-theme="dark"]) input[type="time"],
html:not([data-theme="dark"]) input:not([type]),
html:not([data-theme="dark"]) textarea,
html:not([data-theme="dark"]) select {
    background-color: var(--tx-surface);
    color: var(--tx-text);
    border-color: var(--tx-border);
}

html:not([data-theme="dark"]) .form-control:focus,
html:not([data-theme="dark"]) .custom-select:focus,
html:not([data-theme="dark"]) input:focus,
html:not([data-theme="dark"]) textarea:focus,
html:not([data-theme="dark"]) select:focus {
    border-color: var(--tx-primary);
    box-shadow: var(--tx-focus-ring);
}

html:not([data-theme="dark"]) .form-control::placeholder,
html:not([data-theme="dark"]) input::placeholder,
html:not([data-theme="dark"]) textarea::placeholder {
    color: var(--tx-input-placeholder, var(--tx-muted));
    opacity: 1;
}

html:not([data-theme="dark"]) .custom-control-label,
html:not([data-theme="dark"]) .form-check-label,
html:not([data-theme="dark"]) label:not(.btn) {
    color: var(--tx-label, var(--tx-text));
}

html:not([data-theme="dark"]) .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--tx-primary);
    background-color: var(--tx-primary);
}

html:not([data-theme="dark"]) .input-group-text {
    background-color: var(--tx-bg-alt);
    border-color: var(--tx-border);
    color: var(--tx-text);
}

/* ── Bootstrap buttons (global — ngoài .tax3s-admin đã có admin-custom) ── */
html:not([data-theme="dark"]) .btn-primary {
    color: #fff !important;
    background-color: var(--tx-btn-primary, var(--tx-primary)) !important;
    border-color: var(--tx-btn-primary-hover, var(--tx-primary-dark)) !important;
}
html:not([data-theme="dark"]) .btn-primary:hover,
html:not([data-theme="dark"]) .btn-primary:focus,
html:not([data-theme="dark"]) .btn-primary:active,
html:not([data-theme="dark"]) .btn-primary.active {
    color: #fff !important;
    background-color: var(--tx-btn-primary-hover, var(--tx-primary-dark)) !important;
    border-color: var(--tx-btn-primary-hover, var(--tx-primary-dark)) !important;
}

html:not([data-theme="dark"]) .btn-outline-primary {
    color: var(--tx-btn-primary-text, var(--tx-primary-dark)) !important;
    border-color: var(--tx-btn-primary, var(--tx-primary)) !important;
    background-color: var(--tx-btn-primary-soft, var(--tx-primary-soft)) !important;
}
html:not([data-theme="dark"]) .btn-outline-primary:hover,
html:not([data-theme="dark"]) .btn-outline-primary:focus,
html:not([data-theme="dark"]) .btn-outline-primary:active {
    color: #fff !important;
    background-color: var(--tx-btn-primary, var(--tx-primary)) !important;
    border-color: var(--tx-btn-primary-hover, var(--tx-primary-dark)) !important;
}

html:not([data-theme="dark"]) .btn-success {
    color: #fff !important;
    background-color: var(--tx-btn-success, #2f6f4e) !important;
    border-color: var(--tx-btn-success-hover, #255a3f) !important;
}
html:not([data-theme="dark"]) .btn-success:hover,
html:not([data-theme="dark"]) .btn-success:focus,
html:not([data-theme="dark"]) .btn-success:active {
    background-color: var(--tx-btn-success-hover, #255a3f) !important;
    border-color: var(--tx-btn-success-hover, #255a3f) !important;
}

html:not([data-theme="dark"]) .btn-info {
    color: #fff !important;
    background-color: var(--tx-btn-info, var(--tx-primary)) !important;
    border-color: var(--tx-btn-info-hover, var(--tx-primary-dark)) !important;
}
html:not([data-theme="dark"]) .btn-info:hover,
html:not([data-theme="dark"]) .btn-info:focus,
html:not([data-theme="dark"]) .btn-info:active {
    background-color: var(--tx-btn-info-hover, var(--tx-primary-dark)) !important;
}

html:not([data-theme="dark"]) .btn-danger {
    color: #fff !important;
    background-color: var(--tx-btn-danger, var(--hddt-danger, #b33b3b)) !important;
    border-color: var(--tx-btn-danger-hover, #963232) !important;
}
html:not([data-theme="dark"]) .btn-danger:hover,
html:not([data-theme="dark"]) .btn-danger:focus,
html:not([data-theme="dark"]) .btn-danger:active {
    background-color: var(--tx-btn-danger-hover, #963232) !important;
}

html:not([data-theme="dark"]) .btn-warning,
html:not([data-theme="dark"]) .btn-tx-preview {
    color: #fff !important;
    background-color: var(--tx-btn-preview, var(--hddt-preview, #3d5268)) !important;
    border-color: var(--tx-btn-preview-hover, #314255) !important;
}

html:not([data-theme="dark"]) .btn-secondary {
    color: #fff !important;
    background-color: var(--tx-btn-secondary, var(--hddt-slate, #475569)) !important;
    border-color: var(--tx-btn-secondary-hover, #364556) !important;
}

html:not([data-theme="dark"]) .btn-link {
    color: var(--tx-primary) !important;
}
html:not([data-theme="dark"]) .btn-link:hover {
    color: var(--tx-primary-dark) !important;
}

/* ── Cards / surfaces (standalone pages) ── */
html:not([data-theme="dark"]) .card {
    background-color: var(--tx-surface);
    border-color: var(--tx-border);
    color: var(--tx-text);
}

html:not([data-theme="dark"]) .card-header,
html:not([data-theme="dark"]) .card-footer {
    background-color: var(--tx-bg-alt);
    border-color: var(--tx-border);
}

html:not([data-theme="dark"]) .modal-content {
    background-color: var(--tx-surface);
    border-color: var(--tx-border);
    color: var(--tx-text);
}

html:not([data-theme="dark"]) .dropdown-menu {
    background-color: var(--tx-surface);
    border-color: var(--tx-border);
    color: var(--tx-text);
}

html:not([data-theme="dark"]) .dropdown-item:hover,
html:not([data-theme="dark"]) .dropdown-item:focus {
    background-color: var(--tx-primary-soft);
    color: var(--tx-text);
}

/* ── Alerts ── */
html:not([data-theme="dark"]) .alert-info {
    background-color: var(--tx-alert-info-bg);
    border-color: var(--tx-alert-info-border);
    color: var(--tx-alert-info-text);
}
html:not([data-theme="dark"]) .alert-success {
    background-color: var(--tx-alert-success-bg);
    border-color: var(--tx-alert-success-border);
    color: var(--tx-alert-success-text);
}
html:not([data-theme="dark"]) .alert-warning {
    background-color: var(--tx-alert-warning-bg);
    border-color: var(--tx-alert-warning-border);
    color: var(--tx-alert-warning-text);
}
html:not([data-theme="dark"]) .alert-danger {
    background-color: var(--tx-alert-danger-bg);
    border-color: var(--tx-alert-danger-border);
    color: var(--tx-alert-danger-text);
}

/* ── Pagination / badges ── */
html:not([data-theme="dark"]) .page-item.active .page-link {
    background-color: var(--tx-primary);
    border-color: var(--tx-primary);
}
html:not([data-theme="dark"]) .page-link {
    color: var(--tx-primary);
}
html:not([data-theme="dark"]) .page-link:hover {
    color: var(--tx-primary-dark);
}

html:not([data-theme="dark"]) .badge-primary,
html:not([data-theme="dark"]) .bg-primary {
    background-color: var(--tx-primary) !important;
}

html:not([data-theme="dark"]) .text-primary {
    color: var(--tx-primary) !important;
}

html:not([data-theme="dark"]) .border-primary {
    border-color: var(--tx-primary) !important;
}

/* ── Login / tra cứu native controls ── */
html:not([data-theme="dark"]) .tracuu-page input,
html:not([data-theme="dark"]) .tracuu-page textarea,
html:not([data-theme="dark"]) .tracuu-page select {
    border-color: var(--tc-border, var(--tx-border));
}
html:not([data-theme="dark"]) .tracuu-page input:focus,
html:not([data-theme="dark"]) .tracuu-page textarea:focus,
html:not([data-theme="dark"]) .tracuu-page select:focus {
    border-color: var(--tc-primary, var(--tx-primary));
    box-shadow: var(--tx-focus-ring);
}

/* ── Bootstrap .btn — đồng bộ kích thước / bo góc với token ── */
.btn {
    font-weight: var(--tx-btn-fw, 600);
    border-width: 1px;
}

.btn:not(.btn-sm):not(.btn-lg):not(.btn-xs) {
    min-height: var(--tx-control-h);
    padding: var(--tx-btn-py, var(--tx-control-py)) var(--tx-btn-px, var(--tx-control-px));
    font-size: var(--tx-control-fs);
    line-height: 1.25;
    border-radius: var(--tx-btn-radius);
    white-space: nowrap;
}

/* ── Softland / launcher .sl-btn — cao hơn, ôm nội dung (không kéo dài dẹt) ── */
a.sl-btn,
button.sl-btn,
.sl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    box-sizing: border-box;
    min-height: var(--tx-control-h);
    padding: var(--tx-btn-py, var(--tx-control-py)) var(--tx-btn-px, var(--tx-control-px));
    font-size: var(--tx-control-fs);
    font-weight: var(--tx-btn-fw, 600);
    line-height: 1.25;
    border-radius: var(--tx-btn-radius);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    width: auto;
    max-width: 100%;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.sl-app-cta .sl-btn,
.sl-app-prov-table-actions .sl-btn,
.sl-app-kt-pricing-actions .sl-btn,
.sl-app-pricing-card .sl-btn,
.sl-welcome-lookup-form .sl-btn {
    flex: 0 1 auto;
    min-width: var(--tx-btn-min-w, 7.5rem);
    max-width: var(--tx-btn-max-w, 16rem);
    width: auto;
}

.sl-btn-login,
a.sl-btn-login,
button.sl-btn-login {
    color: #fff !important;
    background: var(--tx-primary, #6d28d9) !important;
    border-color: var(--tx-primary-dark, #5b21b6) !important;
    box-shadow: 0 2px 10px var(--tx-shadow-accent, rgba(109, 40, 217, 0.22));
}

.sl-btn-login:hover,
a.sl-btn-login:hover {
    color: #fff !important;
    background: var(--tx-primary-dark, #5b21b6) !important;
    border-color: var(--tx-primary-dark, #5b21b6) !important;
}

.sl-btn-register,
a.sl-btn-register,
button.sl-btn-register {
    color: #fff !important;
    background: var(--tx-btn-success, #2f6f4e) !important;
    border-color: var(--tx-btn-success-hover, #255a3f) !important;
}

.sl-btn-register:hover,
a.sl-btn-register:hover {
    color: #fff !important;
    background: var(--tx-btn-success-hover, #255a3f) !important;
    border-color: var(--tx-btn-success-hover, #255a3f) !important;
}

.sl-app-cta .sl-btn-primary,
.sl-app-pricing .sl-btn-primary,
.sl-welcome-lookup-form .sl-btn-primary,
.sl-app-prov-table-actions .sl-btn-primary,
.sl-app-kt-pricing-actions .sl-btn-primary {
    color: #fff !important;
    background: var(--tx-primary, #6d28d9) !important;
    border-color: var(--tx-primary-dark, #5b21b6) !important;
}

.sl-app-cta .sl-btn-primary:hover,
.sl-app-pricing .sl-btn-primary:hover,
.sl-welcome-lookup-form .sl-btn-primary:hover,
.sl-app-prov-table-actions .sl-btn-primary:hover,
.sl-app-kt-pricing-actions .sl-btn-primary:hover {
    color: #fff !important;
    background: var(--tx-primary-dark, #5b21b6) !important;
}

body.theme-tabler .sl-btn {
    border-radius: var(--tblr-border-radius, var(--tx-btn-radius));
    font-weight: var(--tx-btn-fw, 600);
    font-size: var(--tx-control-fs);
    min-height: var(--tx-control-h);
    padding: var(--tx-btn-py, var(--tx-control-py)) var(--tx-btn-px, var(--tx-control-px));
}

@media (max-width: 767px) {
    .sl-app-cta .sl-btn,
    .sl-app-prov-table-actions .sl-btn,
    .sl-app-kt-pricing-actions .sl-btn,
    .sl-app-pricing-card .sl-btn,
    .sl-welcome-lookup-form .sl-btn {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .btn,
    .sl-btn,
    a.btn,
    a.sl-btn,
    button.btn,
    button.sl-btn {
        transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .btn:active,
    .sl-btn:active,
    a.btn:active,
    a.sl-btn:active,
    button.btn:active,
    button.sl-btn:active {
        transform: scale(var(--tx-mobile-tap-scale, 0.98));
        filter: brightness(0.97);
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .btn,
    .sl-btn,
    a.btn,
    a.sl-btn,
    button.btn,
    button.sl-btn {
        transition: none;
    }

    .btn:active,
    .sl-btn:active,
    a.btn:active,
    a.sl-btn:active {
        transform: none;
    }
}