/* ==========================================================================
   BORNO CLOUD - PROFESSIONAL UNIFIED DARK & CYAN THEME
   Developed for: Abdur Rahman (Kyrex)
   Update: Fixed Form Icon & Text Overlapping Issue
   ========================================================================== */

:root {
    --bg-main: #151a1f;
    --bg-card: #1d2329;
    --bg-header: #11151a;
    --bg-input: #161b22;
    --brand-cyan: #109682;
    --brand-cyan-hover: #0d8271;
    --border-color: #334155;
    --text-main: #ffffff;
    --text-muted: #a0aec0;
}

/* 1. GLOBAL RESET & BACKGROUNDS */
html, body, 
#main-body, 
section#main-body, 
.main-content, 
.primary-content,
.bg-light, 
.bg-white,
.login-page,
.register-page {
    background-color: var(--bg-main) !important;
    color: var(--text-muted) !important;
}

/* Force override for any hidden white wrappers */
div[class*="bg-white"], 
div[class*="bg-light"], 
section[class*="bg-white"] {
    background-color: var(--bg-main) !important;
}

/* 2. CARDS, PANELS & FORUM-STYLE BOXES */
.card, .panel, .well, .thumbnail, 
.client-home-cards .card,
.product-info, .summary-container {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    color: var(--text-muted) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.card-header, .panel-heading, .list-group-item-heading {
    background-color: var(--bg-header) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    font-weight: 600 !important;
}

.card-footer, .panel-footer {
    background-color: var(--bg-header) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* 3. TABLES (Domains, Invoices, Services List) */
.table-container, .dataTables_wrapper {
    background-color: var(--bg-card) !important;
    border-radius: 10px;
}

.table {
    background-color: transparent !important;
    color: var(--text-muted) !important;
}

.table thead th {
    background-color: var(--bg-header) !important;
    color: var(--brand-cyan) !important;
    border-bottom: 2px solid var(--border-color) !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.table td {
    border-top: 1px solid var(--border-color) !important;
    vertical-align: middle !important;
}

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

.table-hover tbody tr:hover {
    background-color: rgba(16, 150, 130, 0.08) !important;
}

/* 4. FORM ELEMENTS & INPUTS (FIXED) */
.form-control, select, textarea, .field, 
.input-group-box .form-control {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    border-radius: 8px !important;
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    /* Removed rigid left/right padding so icons don't break */
}

/* Fix for icons inside input fields (Register/Login pages) */
form[name="register"] .form-control,
.login-page .form-control,
.has-feedback .form-control,
.input-group .form-control {
    padding-left: 45px !important; /* Makes room for the icon */
    padding-right: 15px !important;
}

/* Fix for Phone Number Plugin (intl-tel-input) */
.iti input, 
.iti input[type=text], 
.iti input[type=tel] {
    padding-left: 55px !important; /* Extra room for the flag */
}

/* Styling the icons so they match the Cyan theme and stay on top */
.form-control-feedback,
.input-group-addon i,
form[name="register"] .fas,
form[name="register"] .far {
    color: var(--brand-cyan) !important;
    z-index: 5 !important;
}

.iti__flag-container {
    z-index: 6 !important;
}

.form-control:focus {
    border-color: var(--brand-cyan) !important;
    box-shadow: 0 0 0 3px rgba(16, 150, 130, 0.2) !important;
    outline: none !important;
}

.input-group-text, .input-group-addon {
    background-color: var(--bg-header) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--brand-cyan) !important;
}

/* 5. BUTTONS (Cyan Professional Overhaul) */
.btn-primary, .btn-success, .btn-info, .btn-default,
.btn-order-now, .btn-checkout, .btn-order,
#btnDomainSearch, #login, #btnTransferDomain {
    background-color: var(--brand-cyan) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    transition: all 0.3s ease-in-out !important;
}

.btn-primary:hover, .btn-success:hover, .btn:hover {
    background-color: var(--brand-cyan-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(16, 150, 130, 0.3) !important;
}

/* 6. SIDEBAR & NAVIGATION */
.list-group-item {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
    margin-bottom: 2px;
}

.list-group-item:hover, .list-group-item.active {
    background-color: #1a2127 !important;
    color: var(--brand-cyan) !important;
    border-left: 4px solid var(--brand-cyan) !important;
}

.list-group-item i {
    color: var(--brand-cyan) !important;
    margin-right: 10px;
}

/* 7. ORDER FORM & CART (Standard Cart Fix) */
#order-standard_cart .cart-sidebar .panel,
#order-standard_cart .products .product,
#order-standard_cart .domain-checker-bg {
    background-color: var(--bg-card) !important;
}

#order-standard_cart .products .product header {
    background-color: var(--bg-header) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

#order-standard_cart .total-due-today {
    background-color: var(--bg-header) !important;
    border: 2px solid var(--brand-cyan) !important;
}

#order-standard_cart .total-due-today .amt {
    color: var(--brand-cyan) !important;
}

/* 8. ALERTS, BADGES & STATUS */
.badge, .label-info, .status {
    background-color: var(--brand-cyan) !important;
    color: #ffffff !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
}

.alert-info {
    background-color: rgba(16, 150, 130, 0.1) !important;
    border: 1px solid var(--brand-cyan) !important;
    color: #fff !important;
}

/* 9. DASHBOARD TILES */
.tiles .tile {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.tiles .tile i {
    color: var(--brand-cyan) !important;
}

.tiles .tile .stat {
    color: var(--text-main) !important;
}

/* 10. MODALS & POPUPS */
.modal-content {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.modal-header, .modal-footer {
    background-color: var(--bg-header) !important;
    border-color: var(--border-color) !important;
}