/* ═══════════════════════════════════════════════════════════════════
   BRQ Brasilquímica — Shared Design System v1.0
   Unified visual branding inspired by the BRQ logo
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Barlow+Condensed:wght@400;600;700;800&display=swap');

:root {
    /* BRQ Logo inspired colors */
    --brq-green:       #8DC63F; /* Primary lime green */
    --brq-green-mid:   #73a430;
    --brq-green-dark:  #5a8222;
    --brq-green-light: #a2db54;
    --brq-green-pale:  #f4faf0;
    --brq-green-xpale: #fbfdfa;
    
    --brq-cyan:        #00AEEF; /* Secondary cyan blue */
    --brq-cyan-mid:    #0092c8;
    --brq-cyan-dark:   #0077a3;
    --brq-cyan-pale:   #edf9fe;
    
    --brq-yellow:      #FFE600; /* Accent yellow */
    --brq-yellow-pale: #fffef0;
    
    /* Neutrals */
    --brq-dark:        #2d3748; /* Off-black */
    --brq-dark-mid:    #4a5568;
    --brq-dark-light:  #718096;
    --brq-bg:          #f4f6f8;
    --brq-surface:     #ffffff;
    --brq-border:      #e2e8f0;
    --brq-border-light:#edf2f7;
    
    /* Effects */
    --brq-shadow:      0 4px 18px rgba(88, 89, 91, 0.06);
    --brq-shadow-md:   0 8px 30px rgba(88, 89, 91, 0.12);
    --r-sm:            6px;
    --r-md:            10px;
    --r-lg:            14px;
}

/* ── Reset and Base overrides ── */
body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    background: var(--brq-bg) !important;
    background-image: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(141, 198, 63, 0.08) 0%, transparent 80%) !important;
    color: var(--brq-dark) !important;
}

/* Base link behavior */
a {
    color: var(--brq-cyan-dark);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover {
    color: var(--brq-cyan);
    text-decoration: underline;
}

/* ── Sleek Head / Navbar styling ── */
.navbar, .navbar.bg-primary, .navbar.bg-dark, .brq-navbar, .topbar, .top-bar {
    background: var(--brq-dark) !important;
    background-color: var(--brq-dark) !important;
    color: #ffffff !important;
    border-bottom: 4px solid !important;
    border-image: linear-gradient(90deg, var(--brq-green) 0%, var(--brq-yellow) 35%, var(--brq-cyan) 100%) 1 !important;
    box-shadow: var(--brq-shadow) !important;
    padding: 10px 20px !important;
}

.navbar-brand, .topbar-brand, .brand-title {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1.25rem !important;
    letter-spacing: 0.5px;
}

.navbar-nav .nav-link, .topbar a {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 500 !important;
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
    color: #ffffff !important;
}

/* ── Card and Container styling with signature stripe ── */
.card, .card-brq, .content-card, .login-container, .kpi-card, .portal-card {
    background: var(--brq-surface) !important;
    border: 1px solid var(--brq-border) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--brq-shadow) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.22s cubic-bezier(.4,0,.2,1), box-shadow 0.22s cubic-bezier(.4,0,.2,1) !important;
}

.card:hover, .card-brq:hover, .content-card:hover, .kpi-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--brq-shadow-md) !important;
}

/* Decorative 3-color signature stripe at top of elements */
.card::before, .card-brq::before, .content-card::before, .login-container::before, .kpi-card::before, .portal-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--brq-green) 0%, var(--brq-yellow) 35%, var(--brq-cyan) 100%) !important;
    z-index: 10 !important;
}

/* Card Body spacing adjustment to accommodate stripe */
.card-body, .brq-card-body, .card-body-custom {
    padding: 24px !important;
    padding-top: 26px !important;
}

/* Card Headers */
.card-header, .brq-card-header, .modal-header {
    background: var(--brq-border-light) !important;
    border-bottom: 1px solid var(--brq-border) !important;
    color: var(--brq-dark) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 14px 20px !important;
}

/* ── Modern Industrial Form Controls ── */
.form-control, .form-select, .field input, .field select, .field textarea {
    background: var(--brq-surface) !important;
    border: 1.5px solid var(--brq-border) !important;
    border-radius: var(--r-sm) !important;
    color: var(--brq-dark) !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.88rem !important;
    padding: 10px 14px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    outline: none !important;
}

.form-control:focus, .form-select:focus, .field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--brq-green) !important;
    box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.15) !important;
}

/* Bootstrap floating labels need reserved vertical space.
   Keep these rules after the generic controls so labels never cover values. */
.form-floating {
    position: relative;
}

.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
    min-height: 58px !important;
    height: 58px !important;
    line-height: 1.25 !important;
}

.form-floating > .form-control,
.form-floating > .form-control-plaintext {
    padding: 1.65rem 0.85rem 0.45rem !important;
}

.form-floating > .form-select {
    padding: 1.65rem 2.25rem 0.45rem 0.85rem !important;
}

.form-floating > label {
    height: 100% !important;
    max-width: 100% !important;
    padding: 0.72rem 0.85rem !important;
    overflow: hidden !important;
    color: var(--brq-dark-light) !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    transform-origin: 0 0 !important;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
    opacity: 0.78 !important;
    transform: scale(0.82) translateY(-0.28rem) translateX(0.12rem) !important;
}

.form-floating > .form-control[type="date"] ~ label,
.form-floating > .form-control[type="time"] ~ label {
    opacity: 0.78 !important;
    transform: scale(0.82) translateY(-0.28rem) translateX(0.12rem) !important;
}

.form-label, .field label {
    font-weight: 700 !important;
    font-size: 0.76rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--brq-dark-mid) !important;
    margin-bottom: 6px !important;
}

.form-floating > label,
.form-floating > label.form-label {
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ── Premium Buttons ── */
.btn-primary, .btn-primary-custom, .btn-login {
    background: linear-gradient(135deg, var(--brq-green) 0%, var(--brq-green-mid) 100%) !important;
    border-color: var(--brq-green) !important;
    color: #ffffff !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.5px !important;
    border-radius: var(--r-sm) !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 10px rgba(141, 198, 63, 0.2) !important;
}

.btn-primary:hover, .btn-primary-custom:hover, .btn-login:hover {
    background: linear-gradient(135deg, var(--brq-green-mid) 0%, var(--brq-green-dark) 100%) !important;
    border-color: var(--brq-green-mid) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(141, 198, 63, 0.35) !important;
    color: #ffffff !important;
}

.btn-secondary, .btn-secondary-custom, .btn-info, .btn-outline-primary {
    background: linear-gradient(135deg, var(--brq-cyan) 0%, var(--brq-cyan-mid) 100%) !important;
    border-color: var(--brq-cyan) !important;
    color: #ffffff !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.5px !important;
    border-radius: var(--r-sm) !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 10px rgba(0, 174, 239, 0.15) !important;
}

.btn-secondary:hover, .btn-secondary-custom:hover, .btn-info:hover, .btn-outline-primary:hover {
    background: linear-gradient(135deg, var(--brq-cyan-mid) 0%, var(--brq-cyan-dark) 100%) !important;
    border-color: var(--brq-cyan-mid) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(0, 174, 239, 0.25) !important;
    color: #ffffff !important;
}

/* ── Table Styling ── */
table, .table {
    border-color: var(--brq-border) !important;
}

thead th, .table thead th, th {
    background: var(--brq-border-light) !important;
    background-color: var(--brq-border-light) !important;
    color: var(--brq-dark-mid) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.06em !important;
    border-bottom: 2px solid var(--brq-border) !important;
    padding: 12px 16px !important;
}

tbody tr, .table tbody tr {
    background-color: var(--brq-surface) !important;
}

tbody td, .table tbody td, td {
    background-color: var(--brq-surface) !important;
    border-bottom: 1px solid var(--brq-border) !important;
    font-size: 0.85rem !important;
    color: var(--brq-dark) !important;
    padding: 12px 16px !important;
    vertical-align: middle !important;
}

tbody tr:hover td, .table tbody tr:hover td {
    background-color: var(--brq-green-pale) !important;
    background: var(--brq-green-pale) !important;
    transition: background 0.15s ease;
}

/* ── Badges ── */
.badge {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    border-radius: 20px !important;
    padding: 4px 10px !important;
}
.bg-success { background-color: var(--brq-green) !important; color: #ffffff !important; }
.bg-primary { background-color: var(--brq-green) !important; color: #ffffff !important; }
.bg-info { background-color: var(--brq-cyan) !important; color: #ffffff !important; }
.bg-warning { background-color: var(--brq-yellow) !important; color: var(--brq-dark) !important; }
.bg-danger { background-color: #ef4444 !important; color: #ffffff !important; }

/* ── Status Pills ── */
.status-pill {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* ── Alerts ── */
.alert-success, .brq-alert-success { background: var(--brq-green-pale) !important; border-left: 4px solid var(--brq-green) !important; color: var(--brq-green-dark) !important; }
.alert-danger, .brq-alert-danger { background: #fdf0ee !important; border-left: 4px solid #ef4444 !important; color: #c0392b !important; }
.alert-warning, .brq-alert-warning { background: #fffdf0 !important; border-left: 4px solid var(--brq-yellow) !important; color: #7d5800 !important; }
.alert-info, .brq-alert-info { background: var(--brq-cyan-pale) !important; border-left: 4px solid var(--brq-cyan) !important; color: var(--brq-cyan-dark) !important; }

/* ── Utility modifications ── */
.text-primary { color: var(--brq-green-mid) !important; }
.text-success { color: var(--brq-green-dark) !important; }
.text-info { color: var(--brq-cyan-mid) !important; }
.text-warning { color: #f59e0b !important; }
.text-danger { color: #ef4444 !important; }