/* Define your brand colors as CSS variables */
:root {
    /* 🎨 Your Brand Colors - Change these to update your entire site! */
    --brand-primary: #000000;        /* Black - main brand color */
    --brand-secondary: #fd6262;      /* Red rgb(253, 98, 98) - accent color */
    --brand-white: #ffffff;          /* White */
    
    /* 🎨 Utility Colors - Functional UI colors */
    --brand-success: #00aa28;        /* Green - for success states */
    --brand-danger: #FF0000;  /* Use secondary (red) for danger states */
    --brand-warning: #ffc107;        /* Yellow - for warning states (Bootstrap default) */
    --brand-info: #17a2b8;           /* Cyan - for info states */
    --brand-gray: #878a99;           /* Gray - for muted elements */
    --brand-gray-light: #f2f2f2;     /* Light gray - for backgrounds */
    --brand-gray-medium: #ddd;       /* Medium gray - for borders */
    --brand-gray-dark: #666;         /* Dark gray - for secondary text */
    
    /* 🔧 Override Theme Variables (Velzon template uses --vz-* variables) */
    /* Point theme variables to your brand colors so theme components use your colors */
    --vz-primary: var(--brand-primary);
    --vz-primary-rgb: 0, 0, 0;
    --vz-secondary: var(--brand-secondary);
    --vz-secondary-rgb: 253, 98, 98;
    --vz-success: var(--brand-success);
    --vz-success-rgb: 0, 170, 40;
    --vz-danger: var(--brand-danger);
    --vz-danger-rgb: 255, 0, 0;
    --vz-warning: var(--brand-warning);
    --vz-warning-rgb: 255, 193, 7;
    --vz-info: var(--brand-info);
    --vz-info-rgb: 23, 162, 184;
}

.auth-pass-inputgroup {
    position: relative;
}
.auth-pass-inputgroup .icon-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding-right: 10px;
    z-index: 3;
    background: transparent;
}

.auth-pass-inputgroup .password-addon {
    background: none;
    border: none;
    padding: 4px;
    margin-right: 4px;
    color: var(--brand-gray);
    cursor: pointer;
}

.auth-pass-inputgroup .valid-feedback-icon {
    color: var(--brand-success);
    display: none;
    margin-left: 4px;
}

.auth-pass-inputgroup .form-control {
    padding-right: 65px !important; /* Ensure space for icons */
}

.auth-pass-inputgroup .form-control.is-valid,
.auth-pass-inputgroup .form-control.is-invalid {
    background-image: none !important;
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--brand-secondary);
}

/* Ensure feedback messages don't affect layout */
.auth-pass-inputgroup .feedback-messages {
    position: absolute;
    width: 100%;
    z-index: 2;
}

/* Custom Sidebar bg Color */
.sidebar-bg{
    background: var(--brand-primary);
}
/* Primary Button - Black */
.btn-primary{
    background: var(--brand-primary);
    border: 1px solid var(--brand-primary);
}
.btn-primary:hover{
    background: var(--brand-white);
    color: inherit;
    border: 1px solid var(--brand-primary);
}
.btn-secondary{
    background: var(--brand-secondary);
    border: 1px solid var(--brand-secondary);
}
.btn-secondary:hover{
    background: var(--brand-white);
    color: var(--brand-secondary);
    border: 1px solid var(--brand-secondary);
}
.btn-info:active, .btn-secondary:active{
    background-color: #ff5b5b !important;
    border-color: #ff5b5b !important;
    color: #ffffff !important;
}

/* Secondary Outline Button - Orange/Coral */
.btn-outline-secondary, .btn-outline-info{
    color: #ff5b5b;
    border-color: #ff5b5b;
    background: transparent;
}
.btn-outline-secondary:hover, .btn-outline-info:hover{
    background: #ff5b5b;
    color: #ffffff;
    border-color: #ff5b5b;
}
.btn-outline-secondary:active, .btn-outline-secondary:focus,
.btn-outline-info:active, .btn-outline-info:focus{
    background-color: #ff5b5b !important;
    border-color: #ff5b5b !important;
    color: #ffffff !important;
}

.coming-soon-text1 {
    font-weight: var(--vz-font-weight-semibold);
    text-transform: uppercase;
    color: var(--brand-white);
    text-shadow: -3px 3px var(--brand-secondary);
}
.text-primary1{
    color: var(--brand-secondary);
}
.btn-secondary:active{
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary);
}

.badge-primary{
    background-color: var(--brand-primary);
    color: var(--brand-white);
}

/* Success Components */
.btn-success{
    background-color: var(--brand-success);
    border: 1px solid var(--brand-success);
}
.btn-success:hover{
    background-color: var(--brand-white);
    color: var(--brand-success);
    border: 1px solid var(--brand-success);
}
.badge-success{
    background-color: var(--brand-success);
}
.bg-success{
    background-color: var(--brand-success) !important;
}
.text-success{
    color: var(--brand-success) !important;
}
.alert-success{
    background-color: rgba(0, 170, 40, 0.1);
    border-color: var(--brand-success);
    color: var(--brand-success);
}

/* Secondary Components */
.alert-secondary{
    background-color: rgba(253, 98, 98, 0.1);
    border-color: var(--brand-secondary);
    color: var(--brand-secondary);
}

/* Danger Components */
.bg-danger{
    background-color: var(--brand-danger) !important;
}
.btn-danger{
    background-color: var(--brand-danger);
    border: 1px solid var(--brand-danger);
}
.btn-danger:hover{
    background-color: var(--brand-white);
    color: var(--brand-danger);
    border: 1px solid var(--brand-danger);
}
.alert-danger{
    background-color: rgba(255, 0, 0, 0.1);
    border-color: var(--brand-danger);
    color: var(--brand-danger);
}

/* Warning Components */
.btn-warning{
    background-color: var(--brand-warning);
    border: 1px solid var(--brand-warning);
}
.btn-warning:hover{
    background-color: var(--brand-white);
    color: var(--brand-warning);
    border: 1px solid var(--brand-warning);
}
.alert-warning{
    background-color: rgba(255, 193, 7, 0.1);
    border-color: var(--brand-warning);
    color: #856404;  /* Darker yellow for readability */
}

/* Info Components */
.btn-info{
    background-color: var(--brand-info);
    border: 1px solid var(--brand-info);
}
.btn-info:hover{
    background-color: var(--brand-white);
    color: var(--brand-info);
    border: 1px solid var(--brand-info);
}
.btn-info:active{
    background-color: var(--brand-info) !important;
    border-color: var(--brand-info);
}
.badge-info{
    background-color: var(--brand-info);
}
.bg-info{
    background-color: var(--brand-info) !important;
}
.text-info{
    color: var(--brand-info) !important;
}
.alert-info{
    background-color: rgba(23, 162, 184, 0.1);
    border-color: var(--brand-info);
    color: var(--brand-info);
}

/* Primary Components */
.alert-primary{
    background-color: rgba(0, 0, 0, 0.05);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

/* Text Colors */
.text-primary{
    color: #000000 !important;
}

.text-secondary{
    color: #ff5b5b !important;
}

/* Border Colors */
.border-primary{
    border-color: #000000 !important;
}

.border-secondary{
    border-color: #ff5b5b !important;
}

/* Subtle Background Colors */
.bg-secondary-subtle{
    background-color: rgba(255, 91, 91, 0.15) !important;
}

/* Alert Styles */
.alert-primary{
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-color: #000000 !important;
    color: #000000 !important;
}

.alert-secondary{
    background-color: rgba(255, 91, 91, 0.1) !important;
    border-color: #ff5b5b !important;
    color: #ff5b5b !important;
}

/* Link Colors */
.link-primary{
    color: #000000 !important;
}

.link-secondary{
    color: #ff5b5b !important;
}

.link-primary:hover{
    color: #333333 !important;
}

.link-secondary:hover{
    color: #ff7b7b !important;
}

/* Form Controls Focus State */
.form-control:focus, .form-select:focus{
    border-color: #000000;
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
}

.form-check-input:checked{
    background-color: #000000;
    border-color: #000000;
}

.navbar-brand-box{
    background-color: var(--brand-primary) !important;
}

.nav-item{
    background-color: var(--brand-primary) !important;
}

.nav-item:hover>a.menu-link{
    background-color: var(--brand-primary) !important;
}

.nav-item:hover>a.menu-link>span{
    color: var(--brand-white) !important;
}

.active>.page-link, .page-link.active{
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.contact-log-table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
}

.contact-log-table th, .contact-log-table td {
    padding: 10px;
    text-align: left;

}

/* Set the Message column to take up as much space as possible */
.contact-log-table th:first-child, .contact-log-table td:first-child {
    width: 100%;
}

/* Minimise the size of other columns */
.contact-log-table th:not(:first-child), 
.contact-log-table td:not(:first-child) {
    width: 1%;
    white-space: nowrap; /* Prevent text wrapping */
}

.contact-log-table thead {
    background-color: var(--brand-gray-light);
    border-bottom: 2px solid var(--brand-gray-medium);
}

.contact-log-table th:nth-child(2),
.contact-log-table td:nth-child(2) {
    text-align: center;
}

.contact-log-table td:nth-child(4) {
    color: var(--brand-gray-dark);
}

/* WhatsApp Settings Page Styles */
.method-section {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 1.5rem;
    height: 100%;
    background-color: var(--brand-white);
}

.manual-connection-section {
    padding: 1.5rem;
    height: 100%;
    background-color: var(--brand-white);
}

.method-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #6c757d;
}

/* Only apply to form-group within WhatsApp settings forms */
.manual-connection-section .form-group,
#manualConnectionForm .form-group,
#testMessageForm .form-group {
    margin-bottom: 1rem;
}