/* STREAMING_CHUNK:Defining root variables and base typography... /
/

SIGMA LUGGAGE HUB - Enterprise UI Master Stylesheet

Mobile-First, Poppins/Carme Typography, High-Contrast Corporate Accents
*/

/* ==========================================================================

FONTS & VARIABLES
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Carme&family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
/* Brand Colors */
--primary: #D2275B;
--primary-dark: #A81E48;
--primary-light: #FCE8EE;

/* Semantic Colors */
--success: #28A745;
--warning: #F9B900;
--info: #2278BD;
--danger: #DC3545;
--dark: #1E232C;

/* Surface Colors */
--white: #FFFFFF;
--bg: #F4F6F9;
--border: #E5E9F2;

/* Text Colors */
--text-dark: #1E232C;
--text-medium: #646E82;
--text-light: #9CA3AF;

/* Typography */
--font-heading: 'Poppins', sans-serif;
--font-body: 'Carme', sans-serif;

/* Geometry & Depth */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--shadow-sm: 0 2px 4px rgba(0,0,0,0.04);
--shadow-md: 0 6px 12px rgba(0,0,0,0.08);
--shadow-hover: 0 20px 25px -5px rgba(0,0,0,0.1);


}

/* ==========================================================================
2. TYPOGRAPHY & RESETS
========================================================================== */
body {
font-family: var(--font-body);
background-color: var(--bg);
color: var(--text-dark);
-webkit-font-smoothing: antialiased;
font-size: 0.95rem;
overflow-x: hidden;
}

.font-heading {
font-family: var(--font-heading) !important;
}

.font-body {
font-family: var(--font-body) !important;
}

/* Only standard HTML headings get forced dark color */
h1, h2, h3, h4, h5, h6, .navbar-brand, .modal-title {
font-family: var(--font-heading);
font-weight: 600;
color: var(--text-dark);
}

.text-dark { color: var(--text-dark) !important; }
.text-muted { color: var(--text-medium) !important; }

/* Utilities for precise sizing */
.fs-7 { font-size: 0.875rem !important; }
.fs-8 { font-size: 0.75rem !important; }

.tracking-wide { letter-spacing: 0.5px !important; }

/* STREAMING_CHUNK:Styling enterprise buttons and hover states... /
/ ==========================================================================
3. ENTERPRISE BUTTONS
========================================================================== */
.btn {
font-family: var(--font-heading) !important;
font-weight: 600;
border-radius: var(--radius-md);
transition: all 0.2s ease-in-out;
}

.btn-primary {
background-color: var(--primary) !important;
border-color: var(--primary) !important;
color: var(--white) !important;
box-shadow: 0 4px 10px rgba(210, 39, 91, 0.25) !important;
}

.btn-primary:hover, .btn-primary:focus {
background-color: var(--primary-dark) !important;
border-color: var(--primary-dark) !important;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(210, 39, 91, 0.35) !important;
color: var(--white) !important;
}

.btn-success {
background-color: var(--success) !important;
border-color: var(--success) !important;
color: var(--white) !important;
box-shadow: 0 4px 10px rgba(40, 167, 69, 0.25) !important;
}

.btn-success:hover, .btn-success:focus {
background-color: #1e7e34 !important;
border-color: #1e7e34 !important;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(40, 167, 69, 0.35) !important;
color: var(--white) !important;
}

.btn-dark {
background-color: var(--dark) !important;
border-color: var(--dark) !important;
color: var(--white) !important;
box-shadow: 0 4px 10px rgba(30, 35, 44, 0.25) !important;
}

.btn-dark:hover, .btn-dark:focus {
background-color: #000000 !important;
border-color: #000000 !important;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(30, 35, 44, 0.35) !important;
color: var(--white) !important;
}

.btn-white {
background-color: var(--white) !important;
border: 1px solid var(--border) !important;
color: var(--text-dark) !important;
}

.btn-white:hover {
background-color: #f8f9fa !important;
border-color: #cbd5e1 !important;
color: var(--primary) !important;
}

/* CRM Outlined Button Variations */
.btn-brand-accent { background-color: var(--primary); color: white; border: none; font-weight: 600; border-radius: 30px; transition: all 0.2s; }
.btn-brand-accent:hover { background-color: var(--primary-dark); color: white; transform: translateY(-1px); }
.btn-brand-outline-green { border: 2px solid var(--success); color: var(--success); background: transparent; font-weight: 600; border-radius: 30px; transition: all 0.2s; }
.btn-brand-outline-green:hover { background: var(--success); color: white; }
.btn-brand-solid-green { background-color: var(--success); color: white; border: none; font-weight: 600; border-radius: 30px; transition: all 0.2s; }
.btn-brand-solid-green:hover { background-color: #1e7e34; color: white; }

.transition-hover { transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; }
.transition-hover:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; }

/* STREAMING_CHUNK:Configuring SaaS-level Tooltip guides... /
/ ==========================================================================
4. PREMIUM HOVER GUIDES (TOOLTIPS)
========================================================================== */
.tooltip-inner {
background-color: var(--dark) !important;
color: var(--white) !important;
font-family: var(--font-body) !important;
font-size: 0.85rem !important;
padding: 0.75rem 1rem !important;
border-radius: var(--radius-sm) !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
border: 1px solid var(--primary) !important;
text-align: left !important;
max-width: 250px !important;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--primary) !important; }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--primary) !important; }
.tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--primary) !important; }
.tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--primary) !important; }

/* STREAMING_CHUNK:Finalizing tables, cards, and layout shells... /
/ ==========================================================================
5. SEAMLESS MAGENTA PILL TABLE HEADERS
========================================================================== */
.table-light, .table-light > th, .table-light > td {
background-color: transparent !important;
}

table.table, .table {
border-collapse: separate !important;
border-spacing: 0 !important;
}

table.table > thead > tr > th, .table thead th {
background-color: var(--primary) !important;
color: var(--white) !important;
font-family: var(--font-heading) !important;
font-weight: 700 !important;
font-size: 0.85rem !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
border: none !important;
border-bottom: 6px solid var(--white) !important;
padding: 1rem 1.25rem !important;
vertical-align: middle !important;
white-space: nowrap !important;
}

table.table > thead > tr:first-child > th:first-child, .table thead tr:first-child th:first-child {
border-top-left-radius: var(--radius-md) !important;
border-bottom-left-radius: var(--radius-md) !important;
}
table.table > thead > tr:first-child > th:last-child, .table thead tr:first-child th:last-child {
border-top-right-radius: var(--radius-md) !important;
border-bottom-right-radius: var(--radius-md) !important;
}

.table tbody td {
vertical-align: middle !important;
color: var(--text-dark) !important;
font-size: 0.95rem !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: 1px solid var(--border) !important;
padding: 1rem !important;
}

.table tbody tr:nth-child(even) td { background-color: rgba(0, 0, 0, 0.015) !important; }
.table-hover tbody tr:hover td { background-color: rgba(210, 39, 91, 0.04) !important; }
.table tbody tr:last-child td { border-bottom: none !important; }

/* ==========================================================================
6. DASHBOARD & KPI CARDS (FORCED WHITE TEXT ON GRADIENTS)
========================================================================== */
.card {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
background-color: var(--white);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
box-shadow: var(--shadow-md);
}

.card[style*="linear-gradient"], .kpi-card {
border: none !important;
color: var(--white) !important;
box-shadow: var(--shadow-md) !important;
}

.card[style*="linear-gradient"]:hover, .kpi-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
}

.card[style*="linear-gradient"] h1,
.card[style*="linear-gradient"] h2,
.card[style*="linear-gradient"] h3,
.card[style*="linear-gradient"] h4,
.card[style*="linear-gradient"] h5,
.card[style*="linear-gradient"] h6,
.kpi-card h2, .kpi-card h3 {
color: var(--white) !important;
font-weight: 700 !important;
text-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

.card[style*="linear-gradient"] p:not(.text-success):not(.text-warning):not(.text-danger):not(.text-info),
.card[style*="linear-gradient"] span:not(.text-success):not(.text-warning):not(.text-danger):not(.text-info),
.kpi-card p, .kpi-card span {
color: rgba(255, 255, 255, 0.9) !important;
}

.card[style*="linear-gradient"] .text-muted, .kpi-card .text-muted {
color: rgba(255, 255, 255, 0.75) !important;
}

.bg-primary-light { background-color: var(--primary-light) !important; }
.text-primary { color: var(--primary) !important; }
.text-primary-dark { color: var(--primary-dark) !important; }

/* ==========================================================================
7. LAYOUT SHELL (SIDEBAR & TOPBAR)
========================================================================== */
#wrapper { display: flex; width: 100%; min-height: 100vh; overflow-x: hidden; }
#sidebar { width: 260px; background: var(--white); border-right: 1px solid var(--border); transition: all 0.3s; z-index: 1000; }
#content { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-x: hidden; }

.topbar {
height: 70px; background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(229, 233, 242, 0.5); display: flex; align-items: center;
padding: 0 1.5rem; position: sticky; top: 0; z-index: 999;
}

/* HIGH-DENSITY SIDEBAR OVERRIDES */
#sidebar .nav-item { margin-bottom: 2px !important; }

#sidebar .nav-link {
font-family: var(--font-body) !important;
font-weight: 600 !important;
font-size: 0.9rem !important;
color: var(--text-dark) !important;
text-decoration: none !important;
padding: 0.5rem 1rem !important;
border-radius: var(--radius-md) !important;
transition: all 0.2s ease;
display: flex;
align-items: center;
}

#sidebar .nav-link i {
font-size: 1.15rem !important;
margin-right: 0.5rem;
}

#sidebar .sidebar-heading {
margin-top: 1.2rem !important;
margin-bottom: 0.3rem !important;
font-size: 0.7rem !important;
padding-left: 1rem !important;
text-transform: uppercase;
font-weight: 800 !important;
color: var(--text-light) !important;
letter-spacing: 0.5px;
}

#sidebar .nav-link:hover {
color: var(--primary) !important;
background-color: rgba(210, 39, 91, 0.05) !important;
}

#sidebar .nav-link.active {
color: var(--primary) !important;
background-color: var(--primary-light) !important;
font-weight: 700 !important;
box-shadow: inset 3px 0 0 var(--primary);
}

/* ==========================================================================
8. MOBILE RESPONSIVENESS (TABLE STACKING)
========================================================================== */
@media (max-width: 767.98px) {
#sidebar { margin-left: -260px; position: fixed; height: 100vh; }
#sidebar.active { margin-left: 0; box-shadow: var(--shadow-md); }

.table-responsive { border: 0 !important; overflow-x: hidden !important; }
table { width: 100% !important; table-layout: fixed; }

.table-mobile-stack, .table-mobile-stack tbody, .table-mobile-stack tr, .table-mobile-stack td {
    display: block !important; width: 100% !important;
}

.table-mobile-stack thead { display: none !important; }

.table-mobile-stack tr {
    margin-bottom: 1rem; background-color: var(--white); border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 0.5rem;
}

.table-mobile-stack td {
    display: flex !important; justify-content: space-between; align-items: center;
    text-align: right !important; padding: 0.75rem 1rem !important; border-bottom: 1px solid var(--bg) !important; border-top: none !important;
}

.table-mobile-stack td:last-child { border-bottom: none !important; }

.table-mobile-stack td::before {
    content: attr(data-label); font-family: var(--font-heading); font-weight: 600; font-size: 0.75rem; color: var(--text-medium);
    text-transform: uppercase; text-align: left; flex-shrink: 0; margin-right: 15px; max-width: 45%;
}


}