/**
 * Tecno TA - Master Application Design System
 * File: public/demo1/css/tecno-ta.css
 * Brand Colors: Primary = Tecno Orange (#ff5900 / #f26522)
 */

/* ==========================================================================
   1. Brand Palette & Core Variables
   ========================================================================== */
:root {
    --bs-primary: #ff5900 !important;
    --bs-primary-rgb: 255, 89, 0 !important;
    --bs-primary-hover: #e04f00 !important;
    --bs-primary-active: #cc4700 !important;
    --tecno-orange: #ff5900;
    --tecno-orange-hover: #e04f00;
    --tecno-orange-light: #fff4ee;
}

/* Primary Color Utilities */
.text-primary,
a.text-primary:hover,
.menu-item .menu-link.active .menu-title,
.pageTitleHeader .text-primary {
    color: #ff5900 !important;
}

.bg-primary {
    background-color: #ff5900 !important;
}

.bg-light-primary {
    background-color: #fff3eb !important;
}

.bg-light-primary i,
.symbol.bg-light-primary i,
.symbol-circle.bg-light-primary i {
    color: #ff5900 !important;
}

.badge-primary {
    background-color: #ff5900 !important;
    color: #ffffff !important;
}

.badge-light-primary {
    background-color: #fff3eb !important;
    color: #ff5900 !important;
    border: 1px solid #ffe2d1 !important;
}

/* Primary Button Overrides */
.btn-primary {
    background-color: #ff5900 !important;
    border-color: #ff5900 !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: #e04f00 !important;
    border-color: #e04f00 !important;
    color: #ffffff !important;
}

.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary {
    background-color: #cc4700 !important;
    border-color: #cc4700 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   2. Cards & Semantical Borders
   ========================================================================== */
.card {
    border-radius: 0.75rem;
    box-shadow: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.card.card-flush {
    border: 1px solid #eff2f5;
}

/* Top Color Accents for Cards */
.card.border-primary,
.card.card-border-primary {
    border-top: 4px solid #ff5900 !important;
}

.card.border-info,
.card.card-border-info {
    border-top: 4px solid #009ef7 !important;
}

.card.border-success,
.card.card-border-success {
    border-top: 4px solid #50cd89 !important;
}

.card.border-warning,
.card.card-border-warning {
    border-top: 4px solid #ffaa00 !important;
}

.card.border-danger,
.card.card-border-danger {
    border-top: 4px solid #f1416c !important;
}

.card.border-dark,
.card.card-border-dark {
    border-top: 4px solid #181c32 !important;
}

.card-header {
    border-bottom: 0 !important;
    padding-top: 1.25rem;
    padding-bottom: 0.75rem;
}

/* ==========================================================================
   3. Table Action Buttons (Punchy, Vivid, High-Contrast)
   ========================================================================== */
.btn-icon.btn-sm {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.45rem !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-icon.btn-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* In Tables: Solid, Vibrant Colors (Never Pale/Washed-Out) */
table .btn-primary,
table .btn-light-primary,
table .btn-icon.btn-primary,
table .btn-icon.btn-light-primary {
    background-color: #ff5900 !important;
    border-color: #ff5900 !important;
    color: #ffffff !important;
}

table .btn-primary:hover,
table .btn-light-primary:hover,
table .btn-icon.btn-primary:hover,
table .btn-icon.btn-light-primary:hover {
    background-color: #e04f00 !important;
    border-color: #e04f00 !important;
    color: #ffffff !important;
}

table .btn-primary i,
table .btn-light-primary i,
table .btn-icon.btn-primary i,
table .btn-icon.btn-light-primary i {
    color: #ffffff !important;
}

table .btn-danger,
table .btn-light-danger,
table .btn-icon.btn-danger,
table .btn-icon.btn-light-danger {
    background-color: #f1416c !important;
    border-color: #f1416c !important;
    color: #ffffff !important;
}

table .btn-danger:hover,
table .btn-light-danger:hover,
table .btn-icon.btn-danger:hover,
table .btn-icon.btn-light-danger:hover {
    background-color: #d9214e !important;
    border-color: #d9214e !important;
    color: #ffffff !important;
}

table .btn-danger i,
table .btn-light-danger i,
table .btn-icon.btn-danger i,
table .btn-icon.btn-light-danger i {
    color: #ffffff !important;
}

table .btn-success,
table .btn-light-success,
table .btn-icon.btn-success,
table .btn-icon.btn-light-success {
    background-color: #50cd89 !important;
    border-color: #50cd89 !important;
    color: #ffffff !important;
}

table .btn-success:hover,
table .btn-light-success:hover,
table .btn-icon.btn-success:hover,
table .btn-icon.btn-light-success:hover {
    background-color: #47be7d !important;
    border-color: #47be7d !important;
    color: #ffffff !important;
}

table .btn-success i,
table .btn-light-success i,
table .btn-icon.btn-success i,
table .btn-icon.btn-light-success i {
    color: #ffffff !important;
}

table .btn-info,
table .btn-light-info,
table .btn-icon.btn-info,
table .btn-icon.btn-light-info {
    background-color: #009ef7 !important;
    border-color: #009ef7 !important;
    color: #ffffff !important;
}

table .btn-info:hover,
table .btn-light-info:hover,
table .btn-icon.btn-info:hover,
table .btn-icon.btn-light-info:hover {
    background-color: #0086d1 !important;
    border-color: #0086d1 !important;
    color: #ffffff !important;
}

table .btn-info i,
table .btn-light-info i,
table .btn-icon.btn-info i,
table .btn-icon.btn-light-info i {
    color: #ffffff !important;
}

table .btn-warning,
table .btn-light-warning,
table .btn-icon.btn-warning,
table .btn-icon.btn-light-warning {
    background-color: #ffaa00 !important;
    border-color: #ffaa00 !important;
    color: #ffffff !important;
}

table .btn-warning:hover,
table .btn-light-warning:hover,
table .btn-icon.btn-warning:hover,
table .btn-icon.btn-light-warning:hover {
    background-color: #e69900 !important;
    border-color: #e69900 !important;
    color: #ffffff !important;
}

table .btn-warning i,
table .btn-light-warning i,
table .btn-icon.btn-warning i,
table .btn-icon.btn-light-warning i {
    color: #ffffff !important;
}

table .btn-dark,
table .btn-light-dark,
table .btn-icon.btn-dark,
table .btn-icon.btn-light-dark {
    background-color: #3f4254 !important;
    border-color: #3f4254 !important;
    color: #ffffff !important;
}

table .btn-dark:hover,
table .btn-light-dark:hover,
table .btn-icon.btn-dark:hover,
table .btn-icon.btn-light-dark:hover {
    background-color: #181c32 !important;
    border-color: #181c32 !important;
    color: #ffffff !important;
}

table .btn-dark i,
table .btn-light-dark i,
table .btn-icon.btn-dark i,
table .btn-icon.btn-light-dark i {
    color: #ffffff !important;
}

/* ==========================================================================
   4. Tables & DataTables Styling
   ========================================================================== */
.table-responsive {
    border-radius: 0.5rem;
}

table.dataTable,
table.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    width: 100% !important;
}

table.dataTable thead tr,
table.table thead tr {
    background-color: #f5f8fa !important;
}

table.dataTable thead th,
table.table thead th {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #7e8299 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    border-bottom: 0 !important;
    padding: 0.85rem 1rem !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

/* Rounded Header Corners */
table.dataTable thead tr th:first-child,
table.table thead tr th:first-child {
    border-top-left-radius: 0.475rem !important;
    border-bottom-left-radius: 0.475rem !important;
}

table.dataTable thead tr th:last-child,
table.table thead tr th:last-child {
    border-top-right-radius: 0.475rem !important;
    border-bottom-right-radius: 0.475rem !important;
}

table.dataTable tbody td,
table.table tbody td {
    padding: 0.85rem 1rem !important;
    vertical-align: middle !important;
    font-size: 0.9rem;
    border-bottom: 1px dashed #eff2f5 !important;
}

table.dataTable.table-hover tbody tr:hover,
table.table-hover tbody tr:hover {
    background-color: rgba(255, 89, 0, 0.04) !important;
}

/* DataTables Pagination & Filter */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #ff5900 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 0.475rem !important;
    font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #fff3eb !important;
    color: #ff5900 !important;
    border: 0 !important;
    border-radius: 0.475rem !important;
}

/* ==========================================================================
   5. Form Controls Focus States
   ========================================================================== */
.form-control:focus,
.form-select:focus,
.form-control-solid:focus,
.form-select-solid:focus {
    border-color: #ff5900 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 89, 0, 0.15) !important;
}

.form-check-input:checked {
    background-color: #ff5900 !important;
    border-color: #ff5900 !important;
}

/* ==========================================================================
   6. Custom Scrollbars
   ========================================================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff5900;
}