:root {
    /* 1. Core Theme Colors (Jewel Tones) */
    --bs-primary: #004D40;   /* Deep Emerald */
    --bs-secondary: #B8860B; /* Aged Gold Accent */
    --bs-info: #0077B6;      /* Royal Sapphire */

    /* 2. State Colors (Muted Opulence) */
    --bs-success: #6B8E23;   /* Olive Green */
    --bs-danger: #800020;    /* Deep Burgundy */
    --bs-warning: #B87333;   /* Copper Bronze */

    /* 3. Background/Text Neutrals (Warm Contrast) */
    --bs-light: #F0F8FF;     /* Creamy Ivory */
    --bs-dark: #1C1C1C;      /* Deep Charcoal Gray */

    /* 4. Global Body/Text Overrides */
    --bs-body-color: var(--bs-dark);
    --bs-body-bg: var(--bs-light);
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: var(--bs-secondary); /* Gold hover accent */

    /* Small border radius for sophistication */
    --bs-border-radius: 0.4rem;
    /* Spacing and Dimensions */
    --sidebar-width: 250px;
    --bs-body-font-family: 'Roboto', sans-serif;
    --bs-font-weight-light: 300;
    --bs-font-weight-normal: 400;
    --bs-font-weight-medium: 500;
    --bs-font-weight-bold: 700;

    /* Custom Color Variables (The 'DigitalOcean' Palette) */
    --do-dark-blue: #02072f;
    --do-light-blue: #007bff;
    --do-hover-bg: #0c123d;
    --do-divider-color: #1a2046;
    --do-cyan: #00bcd4;
    --do-green: #1e8d64; /* Custom Green Button */
    --do-gray-text: #6c757d; /* Muted text */
}



/* --- I. UTILITIES AND TEXT --- */

/* 5. Text Utilities (Using Gold for Accent Text) */
.text-primary { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; } /* Gold text utility */
.text-light { color: var(--bs-light) !important; }
.text-dark { color: var(--bs-dark) !important; }

/* 6. Background Utilities (Using Deep Charcoal for Sophisticated Dark Sections) */
.bg-primary { background-color: var(--bs-primary) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }
.bg-light { background-color: var(--bs-light) !important; }
.bg-dark { background-color: var(--bs-dark) !important; } /* Deep Charcoal background utility */


/* --- II. BUTTONS --- */

/* 7. Button Overrides (Emerald Background, GOLD Text) */

/* Primary Button: Deep Emerald background, AGED GOLD text */
.btn-primary {
    --bs-btn-color: var(--bs-secondary); /* Aged Gold text on Primary */
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);

    /* Hover state: Lighter emerald background, same gold text */
    --bs-btn-hover-bg: #00695C;
    --bs-btn-hover-border-color: #00695C;
}

/* Secondary Button: Aged Gold background, DEEP CHARCOAL text */
.btn-secondary {
    --bs-btn-color: var(--bs-dark); /* Deep Charcoal text on Gold */
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);

    /* Hover state: Darker gold background, same charcoal text */
    --bs-btn-hover-bg: #A0720A;
    --bs-btn-hover-border-color: #A0720A;
}

/* --- III. ALERTS AND COMPONENTS (Clean and Defined) --- */

/* 8. Alerts Overrides (Deep color background, light text for high contrast) */

.alert-primary {
    --bs-alert-bg: var(--bs-primary);
    --bs-alert-color: var(--bs-light); /* Creamy Ivory text on Emerald */
    --bs-alert-border-color: var(--bs-primary);
}

.alert-secondary {
    --bs-alert-bg: var(--bs-secondary);
    --bs-alert-color: var(--bs-dark); /* Deep Charcoal text on Gold */
    --bs-alert-border-color: var(--bs-secondary);
}

.alert-info {
    --bs-alert-bg: var(--bs-info);
    --bs-alert-color: var(--bs-light); /* Creamy Ivory text on Sapphire */
    --bs-alert-border-color: var(--bs-info);
}

/* 9. Modal/Card/Nav Bar Backgrounds (Applying Creamy Ivory) */
.modal-content,
.card {
    background-color: var(--bs-light); /* Creamy Ivory background */
    color: var(--bs-dark);             /* Deep Charcoal text */
    border: 1px solid rgba(0, 0, 0, 0.1); /* Subtle definition */
}

/* Example: Dark Navbar using Deep Charcoal */
.navbar-dark {
    --bs-navbar-color: var(--bs-secondary); /* Gold text/links */
    --bs-navbar-brand-color: var(--bs-secondary);
    --bs-navbar-bg: var(--bs-dark);       /* Deep Charcoal background */
}
/* --- Sidebar Styling --- */
.sidebar-nav-container {
    /*width: var(--sidebar-width);*/
    /*min-width: var(--sidebar-width);*/
    background-color: var(--do-dark-blue);
    color: var(--bs-white);
    height: 100vh;
    position: fixed;
    font-weight: var(--bs-font-weight-medium); /* Medium weight for sidebar text */
}
.nav-link.menu-item {
    color: var(--bs-white);
    font-size: 0.9rem;
    font-weight: var(--bs-font-weight-bold);
    text-transform: uppercase;
}
.nav-link.menu-item.active {
    font-weight: var(--bs-font-weight-bold); /* Bold for active element */
    border-left: 3px solid var(--do-light-blue);
}
.sub-menu-item {
    font-size: 0.85rem;
    font-weight: var(--bs-font-weight-normal);
    color: rgba(255, 255, 255, 0.7); /* Slightly muted sub-links */
    text-transform: uppercase;
}

/* --- Navbar/Header Styling --- */
.custom-navbar {
    padding-left: var(--sidebar-width);
}
.btn-success {
    --bs-btn-bg: var(--do-green);
    --bs-btn-border-color: var(--do-green);
    --bs-btn-hover-bg: #187251;
    font-weight: var(--bs-font-weight-medium);
}
.custom-navbar .text-primary {
    font-weight: var(--bs-font-weight-medium);
    font-size: 0.9rem;
}

/* --- Droplet Table Styling --- */
.table thead th {
    color: var(--do-gray-text);
    font-weight: var(--bs-font-weight-medium);
    font-size: 0.85rem;
    text-transform: uppercase;
}
.table tbody td {
    font-size: 0.9rem;
}
.table .fw-bold {
    font-weight: var(--bs-font-weight-medium) !important; /* Names should be medium weight */
    font-size: 0.95rem;
}
.table small {
    font-size: 0.75rem;
    font-weight: var(--bs-font-weight-normal);
}
.custom-icon-circle {
    background-color: #e0f7fa;
    color: var(--do-cyan);
    font-size: 0.95rem;
}
.btn-outline-primary, .btn-link.text-secondary {
    font-size: 0.85rem;
    font-weight: var(--bs-font-weight-medium);
}

/* --- Layout & Utilities --- */
/*.main-content {*/
/*    margin-left: var(--sidebar-width);*/
/*    padding-top: 70px;*/
/*}*/
.form-control::placeholder {
    font-weight: var(--bs-font-weight-light);
    font-size: 0.9rem;
}

.custom-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem; /* Size of the circle */
    height: 2rem;
    border-radius: 50%;
    background-color: #e0f7fa; /* Very light blue background */
    color: #00bcd4; /* A shade of blue/cyan for the icon */
    font-size: 1rem;
    flex-shrink: 0; /* Prevents the circle from shrinking in the flex container */
}

.table td, .table th {
    border-color: #eee; /* Lighter border color for a softer line */
}

/* Customizing the 'More' link to look like the image */
.btn-link.text-secondary {
    padding: 0.25rem 0.75rem; /* Match the Upsize button padding */
    border: 1px solid transparent; /* Mimic the Upsize button border structure */
}

body {
    overflow-x: hidden;
}
.navbar {
    height: 56px;
}


/* Sidebar */
#sidebar {
    position: fixed;
    top: 56px; /* below navbar */
    left: 0;
    width: 180px;
    height: calc(100vh - 56px);
    background-color: #f8f9fa;
    transition: margin-left 0.3s ease;
    overflow-y: auto;
}

#sidebar.collapsed {
    margin-left: -180px;
}

/* Main content */
#content {
    margin-top: 56px;
    margin-left: 180px;
    padding: 1rem;
    transition: margin-left 0.3s ease;
}

#content.expanded {
    margin-left: 0;
}

@media (max-width: 768px) {
    #sidebar {
        margin-left: -240px;
    }

    #sidebar.show {
        margin-left: 0;
    }

    #content {
        margin-left: 0;
    }
}