/* Techfusion POS - Black & Yellow Theme (Ultimate Precision) */

:root {
    --tf-black: #000000;
    --tf-dark: #0a0a0a;
    --tf-surface: #1a1a1a;
    --tf-yellow: #FFD700;
    --tf-yellow-hover: #e6c200;
    --tf-white: #ffffff;
    --tf-gray: #a0a0a0;
    --tf-border: #2a2a2a;
}

/* 1. Global Backgrounds - Preserve original spacing */
body, .content-wrapper, .main-footer, .content, .right-side {
    background-color: var(--tf-black) !important;
    color: var(--tf-white) !important;
}

/* 2. Header & Logo Area */
.main-header .navbar, .main-header .logo, .tw-bg-gradient-to-r, .tw-from-primary-800 {
    background: var(--tf-black) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--tf-border) !important;
}

.main-header .navbar .nav > li > a, .tw-text-white {
    color: var(--tf-white) !important;
}

/* 3. Sidebar Menu */
.main-sidebar, .side-bar {
    background-color: var(--tf-black) !important;
    border-right: 1px solid var(--tf-border) !important;
}

.sidebar-menu > li > a {
    color: var(--tf-gray) !important;
}

.sidebar-menu > li:hover > a, .sidebar-menu > li.active > a {
    background: var(--tf-dark) !important;
    color: var(--tf-yellow) !important;
    border-left-color: var(--tf-yellow) !important;
}

.sidebar-menu .treeview-menu {
    background: var(--tf-black) !important;
}

/* 4. Dashboard Widgets & All Sections (Precision targeting for ALL original sections) */
/* This covers Sales Financial Year, Payment Due, Stock Alert, Sales Order, Pending Shipments, etc. */
.info-box, .box, .card, .tw-bg-white, .tw-shadow-sm, .tw-ring-1, .tw-mb-4 {
    background-color: var(--tf-dark) !important;
    border: 1px solid var(--tf-border) !important;
    color: var(--tf-white) !important;
    --tw-ring-color: var(--tf-border) !important;
}

.box-header, .card-header, .tw-border-b, .tw-border-gray-200 {
    background-color: var(--tf-surface) !important;
    border-bottom: 1px solid var(--tf-border) !important;
    color: var(--tf-yellow) !important;
    border-color: var(--tf-border) !important;
}

.box-title, .card-title, .tw-text-primary-800, .tw-text-gray-900, .tw-text-xl {
    color: var(--tf-yellow) !important;
}

/* 5. Tables (DataTable & Standard Tables) */
.table, .dataTable, .table-bordered {
    color: var(--tf-white) !important;
    border-color: var(--tf-border) !important;
}

.table thead th, .dataTable thead th {
    background-color: var(--tf-surface) !important;
    color: var(--tf-yellow) !important;
    border-bottom: 2px solid var(--tf-border) !important;
    border-color: var(--tf-border) !important;
}

.table td, .dataTable td {
    border-top: 1px solid var(--tf-border) !important;
    border-color: var(--tf-border) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* 6. Forms & Inputs */
.form-control, input, select, textarea {
    background-color: var(--tf-surface) !important;
    border: 1px solid var(--tf-border) !important;
    color: var(--tf-white) !important;
}

/* 7. Buttons */
.btn-primary, .bg-blue, .bg-navy, .tw-bg-primary-800, .btn-info, .btn-success {
    background-color: var(--tf-yellow) !important;
    color: var(--tf-black) !important;
    border: none !important;
    font-weight: 800 !important;
}

.btn-primary:hover, .btn-info:hover, .btn-success:hover {
    background-color: var(--tf-yellow-hover) !important;
    color: var(--tf-black) !important;
}

/* 8. Specific Tailwind classes from original screenshot */
.tw-text-gray-500 { color: var(--tf-gray) !important; }
.tw-bg-sky-100, .tw-bg-green-100, .tw-bg-yellow-100, .tw-bg-red-100 {
    background-color: rgba(255, 215, 0, 0.1) !important;
}
.tw-text-sky-500, .tw-text-green-500, .tw-text-yellow-500, .tw-text-red-500 {
    color: var(--tf-yellow) !important;
}

/* 9. Header Icons & POS Button Visibility */
.main-header .navbar .nav > li > a > i,
.main-header .navbar .nav > li > a > svg,
.navbar-custom-menu .nav > li > a > i,
.navbar-custom-menu .nav > li > a > svg {
    color: var(--tf-yellow) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.navbar-custom-menu .nav > li > a {
    color: var(--tf-white) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.navbar-custom-menu .nav > li > a:hover {
    background: rgba(255, 215, 0, 0.1) !important;
    color: var(--tf-yellow) !important;
}

/* POS Button & Calculator Button */
.nav > li > a[href*="sale_pos"],
.nav > li > a[href*="calculator"] {
    color: var(--tf-white) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.nav > li > a[href*="sale_pos"] i,
.nav > li > a[href*="calculator"] i {
    color: var(--tf-yellow) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 10. Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--tf-black); }
::-webkit-scrollbar-thumb { background: var(--tf-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--tf-yellow); }
/* Techfusion POS - Header & POS Button Visibility Fix */

:root {
    --tf-black: #000000;
    --tf-yellow: #FFD700;
    --tf-yellow-hover: #e6c200;
    --tf-white: #ffffff;
}

/* Target the specific Tailwind-based POS button in the header */
a[href*="pos/create"].tw-bg-primary-800, 
a[href*="pos/create"].tw-bg-blue-800,
a[href*="pos/create"].tw-bg-green-800,
a[href*="pos/create"].tw-bg-red-800,
a[href*="pos/create"] {
    background-color: var(--tf-yellow) !important;
    color: var(--tf-black) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    border: none !important;
    font-weight: 700 !important;
}

a[href*="pos/create"]:hover {
    background-color: var(--tf-yellow-hover) !important;
    color: var(--tf-black) !important;
}

/* Ensure the SVG icon inside the POS button is visible */
a[href*="pos/create"] svg {
    color: var(--tf-black) !important;
    stroke: var(--tf-black) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix for the Calculator Button and other header buttons */
button.tw-bg-primary-800,
button.tw-bg-blue-800,
button.tw-bg-green-800,
button.tw-bg-red-800,
.main-header .navbar-custom-menu .btn {
    background-color: var(--tf-surface) !important;
    color: var(--tf-yellow) !important;
}

/* Global Header Icon Visibility */
.main-header i, .main-header svg {
    color: var(--tf-yellow) !important;
    opacity: 1 !important;
}

/* Ensure the user name and other text in header is white */
.main-header .tw-text-white, .main-header span {
    color: var(--tf-white) !important;
}
/* Techfusion POS - Product List & DataTables Visibility Fix */

/* Ensure all table text is white and visible */
.table, .dataTable, .table-bordered, .table-striped {
    color: var(--tf-white) !important;
    background-color: var(--tf-dark) !important;
}

/* Specific fix for product list rows */
.table tbody tr, .dataTable tbody tr {
    background-color: var(--tf-dark) !important;
    color: var(--tf-white) !important;
}

/* Ensure all text inside table cells is visible */
.table td, .dataTable td, .table th, .dataTable th {
    color: var(--tf-white) !important;
}

/* Fix for links inside tables (often used for product names) */
.table td a, .dataTable td a {
    color: var(--tf-yellow) !important;
    font-weight: 600 !important;
}

.table td a:hover, .dataTable td a:hover {
    color: var(--tf-yellow-hover) !important;
    text-decoration: underline !important;
}

/* Fix for striped rows in dark theme */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #121212 !important;
}

/* Fix for hover effect on rows */
.table-hover tbody tr:hover, .dataTable tbody tr:hover {
    background-color: #1a1a1a !important;
}

/* Fix for DataTables search and info text */
.dataTables_wrapper .dataTables_length, 
.dataTables_wrapper .dataTables_filter, 
.dataTables_wrapper .dataTables_info, 
.dataTables_wrapper .dataTables_processing, 
.dataTables_wrapper .dataTables_paginate {
    color: var(--tf-gray) !important;
}

/* Fix for DataTables pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--tf-white) !important;
    background-color: var(--tf-surface) !important;
    border: 1px solid var(--tf-border) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: var(--tf-yellow) !important;
    color: var(--tf-black) !important;
}

/* Fix for any white backgrounds that might hide white text */
.tw-bg-white, .bg-white {
    background-color: var(--tf-dark) !important;
}

/* Ensure product image thumbnails are visible */
.img-thumbnail {
    background-color: var(--tf-surface) !important;
    border: 1px solid var(--tf-border) !important;
}
/* Techfusion POS - POS Terminal Specific Theme */

/* POS Terminal Background */
.pos-container, .pos-content {
    background-color: var(--tf-black) !important;
}

/* Product Cards in POS */
.product_box {
    background-color: var(--tf-surface) !important;
    border: 1px solid var(--tf-border) !important;
    color: var(--tf-white) !important;
}

.product_box:hover {
    border-color: var(--tf-yellow) !important;
}

.product_box .product_name {
    color: var(--tf-yellow) !important;
}

/* POS Sidebar / Order Details */
.pos-order-details, .pos-sidebar {
    background-color: var(--tf-dark) !important;
    border-left: 1px solid var(--tf-border) !important;
}

/* POS Form Actions (Footer) */
.pos-form-actions {
    background-color: var(--tf-dark) !important;
    border-top: 2px solid var(--tf-yellow) !important;
    padding: 10px !important;
}

/* POS Input Fields */
.pos-input {
    background-color: var(--tf-surface) !important;
    color: var(--tf-white) !important;
    border: 1px solid var(--tf-border) !important;
}

/* Key Action Buttons in POS */
.btn-pos-checkout, .btn-pos-pay {
    background-color: var(--tf-yellow) !important;
    color: var(--tf-black) !important;
    font-weight: 800 !important;
}

/* POS Total Section */
.pos-total-row {
    background-color: var(--tf-surface) !important;
    color: var(--tf-yellow) !important;
    font-weight: bold !important;
}
/* Techfusion POS - Subscription Package Visibility Fix */

/* Package Cards */
.price_card .bg-white {
    background-color: var(--tf-dark) !important;
    border: 1px solid var(--tf-border) !important;
}

/* Package Titles */
.price_card h2, .price_card h2.tw-text-\[\#1f1f1f\] {
    color: var(--tf-yellow) !important;
}

/* Package Descriptions */
.price_card .tw-text-gray-700, .price_card span.tw-text-sm {
    color: var(--tf-gray) !important;
}

/* Package Features List */
.price_card .tw-flex.tw-gap-2.tw-items-center.tw-text-\[\#1f1f1f\] {
    color: var(--tf-white) !important;
}

/* Package Feature Icons */
.price_card .fa-check {
    color: var(--tf-yellow) !important;
}

/* Popular Badge */
.price_card .tw-bg-amber-100 {
    background-color: rgba(255, 215, 0, 0.1) !important;
    color: var(--tf-yellow) !important;
    border-color: var(--tf-yellow) !important;
}

/* Subscription Buttons */
.price_card a.tw-bg-gradient-to-r {
    background: var(--tf-yellow) !important;
    color: var(--tf-black) !important;
    border: none !important;
    font-weight: 800 !important;
}

.price_card a.tw-bg-gradient-to-r:hover {
    background: var(--tf-yellow-hover) !important;
    color: var(--tf-black) !important;
}

/* Active Subscription Box */
.box.box-success {
    border-top-color: var(--tf-yellow) !important;
}

.box-body.text-center {
    color: var(--tf-white) !important;
}
/* Techfusion POS - Pricing Section Theme Update */

.section-pricing {
    background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.05), transparent 70%) !important;
    position: relative;
    padding: 100px 0 !important;
}

.section-pricing::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
}

.section-pricing .section-title {
    color: var(--tf-yellow) !important;
    font-size: 3rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.section-pricing .section-subtitle {
    color: var(--tf-white) !important;
    font-size: 1.2rem !important;
    opacity: 0.8;
}

/* Pricing Cards */
.pricing-grid .glass-card {
    background: rgba(10, 10, 10, 0.8) !important;
    border: 1px solid rgba(255, 215, 0, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 24px !important;
    padding: 40px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.pricing-grid .glass-card:hover {
    border-color: var(--tf-yellow) !important;
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.1) !important;
}

.pricing-grid .featured-tier {
    border-color: var(--tf-yellow) !important;
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(0, 0, 0, 0.9)) !important;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.1) !important;
}

.pricing-grid .tier-name {
    color: var(--tf-white) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

.pricing-grid .tier-price {
    color: var(--tf-yellow) !important;
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    margin: 20px 0 !important;
}

.pricing-grid .tier-features li {
    color: var(--tf-gray) !important;
    margin-bottom: 12px !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pricing-grid .tier-features li::before {
    content: "✓";
    color: var(--tf-yellow);
    font-weight: bold;
}

/* Pricing Buttons */
.pricing-grid .btn-main {
    background: var(--tf-yellow) !important;
    color: var(--tf-black) !important;
    border-radius: 12px !important;
    padding: 15px 30px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    width: 100% !important;
    margin-top: 30px !important;
}

.pricing-grid .btn-main:hover {
    background: var(--tf-yellow-hover) !important;
    transform: translateY(-2px) !important;
}