/* /themes/tide/assets/custom/extra.css */

/* 1. Import Roboto from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
/* /themes/tide/assets/custom/extra.css */

/* --- Cielo Cloud Host Brand Colors --- */
:root {
    --cielo-primary: #1299F3; /* e.g., #1a73e8 */
    --cielo-hover: #1557b0;     /* e.g., #1557b0 */
}

/* Force Tide/Tabler to use your brand colors globally */
.bg-primary { 
    background-color: var(--cielo-primary) !important; 
}

.text-primary { 
    color: var(--cielo-primary) !important; 
}

.btn-primary { 
    background-color: var(--cielo-primary) !important; 
    border-color: var(--cielo-primary) !important; 
    color: #ffffff !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active { 
    background-color: var(--cielo-hover) !important; 
    border-color: var(--cielo-hover) !important; 
    color: #ffffff !important;
}

/* Optional: Outline Buttons (Like "View VPS Plans") */
.btn-outline-primary {
    color: var(--cielo-primary) !important;
    border-color: var(--cielo-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--cielo-primary) !important;
    color: #ffffff !important;
}

:root {
    /* Map your body text and headings to Roboto */
    --tblr-font-sans-serif: 'Roboto', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Helvetica Neue, sans-serif;
    --tblr-font-family-headings: 'Roboto', sans-serif;
}

/* Force global overrides just in case a core FOSSBilling table ignores the root variables */
body, .form-control, .btn {
    font-family: var(--tblr-font-sans-serif) !important;
}

h1, h2, h3, h4, h5, h6, .card-title {
    font-family: var(--tblr-font-family-headings) !important;
    font-weight: 500; /* Roboto looks excellent at 500 for UI headings */
}

:root {
    --cielo-primary: #1299F3; 
}

/* Dark Mode Overrides */
[data-bs-theme="dark"] {
    --cielo-primary: #1299F3; 
}

.bg-primary { background-color: var(--cielo-primary) !important; }
.btn-primary { background-color: var(--cielo-primary) !important; border-color: var(--cielo-primary) !important; }

/* Override Tide/Tabler default logo height limits */
.navbar-brand-image.responsive-logo {
    height: auto !important;
    max-height: 70px !important; /* Make sure this matches your HTML height 
    width: auto !important;
}

/* Override Tabler's strict navigation container limits */
a.navbar-brand {
    height: auto !important;
    min-height: 70px !important; 
    max-height: none !important;
}

/* Force the specific Cielo Cloud Host logo ID to scale */
img#company-logo {
    height: 70px !important;
    max-height: 100px !important;
    width: auto !important;
}