/*
 * Spoton Theme - Professional UI Color System
 * Optimized for best user experience and brand consistency
 */

/* Spoton Theme Variables */
html[data-skin="spoton"] {
  /* Spoton Brand Colors - Optimized for UI */
  --ins-spoton-orange: #ff5100; /* Primary Orange */
  --ins-spoton-navy: #272c4d; /* Secondary Navy Blue */
  --ins-spoton-dark-gray: #2c2e3b; /* Dark Gray */
  --ins-spoton-light-gray: #afb5ca; /* Light Gray */
  --ins-spoton-red-orange: #d44e2c; /* Danger Red-Orange */
  --ins-spoton-light-bg: #f2f2f2; /* Light Background */
  --ins-spoton-success: #1ab394; /* Success Teal Green */
  --ins-spoton-warning: #f8ac59; /* Warning Warm Yellow */

  /* Complete Bootstrap Color System Override */
  --ins-primary: #ff5100; /* Orange Primary */
  --ins-primary-rgb: 255, 81, 0;

  /* ===== STANDARD CATEGORY COLOR SCHEME ===== */
  --category-creative: #8b5cf6; /* Purple */
  --category-finance: #f59e0b; /* Yellow */
  --category-preproduction: #3b82f6; /* Blue */
  --category-postproduction: #a16207; /* Brown */
  --category-production: #a16207; /* Brown - Combined pre/post production */
  --category-general: #6b7280; /* Gray */

  /* Light variants for backgrounds */
  --category-creative-light: #8b5cf620;
  --category-finance-light: #f59e0b20;
  --category-preproduction-light: #3b82f620;
  --category-postproduction-light: #a1620720;
  --category-production-light: #a1620720;
  --category-general-light: #6b728020;
  --ins-secondary: #272c4d; /* Navy Blue Secondary */
  --ins-secondary-rgb: 39, 44, 77;
  --ins-success: #1ab394; /* Teal Green Success */
  --ins-success-rgb: 26, 179, 148;
  --ins-info: #23c6c8; /* Keep original info cyan */
  --ins-info-rgb: 35, 198, 200;
  --ins-warning: #f8ac59; /* Warm Yellow Warning */
  --ins-warning-rgb: 248, 172, 89;
  --ins-danger: #d44e2c; /* Red-Orange Danger */
  --ins-danger-rgb: 212, 78, 44;
  --ins-light: #f2f2f2; /* Light Background */
  --ins-light-rgb: 242, 242, 242;
  --ins-dark: #2c2e3b; /* Dark Gray */
  --ins-dark-rgb: 44, 46, 59;
  --ins-gray: #afb5ca; /* Light Gray */
  --ins-gray-rgb: 175, 181, 202;
}

/* Light Menu (Default Spoton Style - Clean White with Navy Accents) */
html[data-skin="spoton"][data-menu-color="light"] {
  --ins-sidenav-bg: #ffffff;
  --ins-sidenav-border-color: var(--ins-spoton-light-gray);
  --ins-sidenav-item-color: var(--ins-spoton-navy);
  --ins-sidenav-item-hover-color: var(--ins-spoton-orange);
  --ins-sidenav-item-hover-bg: rgba(255, 81, 0, 0.08);
  --ins-sidenav-item-active-color: var(--ins-spoton-orange);
  --ins-sidenav-item-active-bg: rgba(255, 81, 0, 0.12);
}

/* Dark Menu (Navy Blue Sidebar - Premium Look) */
html[data-skin="spoton"][data-menu-color="dark"] {
  --ins-sidenav-bg: var(--ins-spoton-navy);
  --ins-sidenav-border-color: var(--ins-spoton-navy);
  --ins-sidenav-item-color: var(--ins-spoton-light-gray);
  --ins-sidenav-item-hover-color: var(--ins-spoton-orange);
  --ins-sidenav-item-hover-bg: rgba(255, 81, 0, 0.15);
  --ins-sidenav-item-active-color: var(--ins-spoton-orange);
  --ins-sidenav-item-active-bg: rgba(255, 81, 0, 0.25);
}

/* Gray Menu (Light Gray Sidebar - Subtle Professional) */
html[data-skin="spoton"][data-menu-color="gray"] {
  --ins-sidenav-bg: var(--ins-spoton-light-bg);
  --ins-sidenav-border-color: var(--ins-spoton-light-gray);
  --ins-sidenav-item-color: var(--ins-spoton-dark-gray);
  --ins-sidenav-item-hover-color: var(--ins-spoton-orange);
  --ins-sidenav-item-hover-bg: rgba(255, 81, 0, 0.1);
  --ins-sidenav-item-active-color: var(--ins-spoton-orange);
  --ins-sidenav-item-active-bg: rgba(255, 81, 0, 0.15);
}

/* Gradient Menu (Premium Navy to Orange Gradient) */
html[data-skin="spoton"][data-menu-color="gradient"] {
  --ins-sidenav-bg: linear-gradient(
    135deg,
    var(--ins-spoton-navy) 0%,
    var(--ins-spoton-orange) 100%
  );
  --ins-sidenav-border-color: transparent;
  --ins-sidenav-item-color: rgba(255, 255, 255, 0.9);
  --ins-sidenav-item-hover-color: #ffffff;
  --ins-sidenav-item-hover-bg: rgba(255, 255, 255, 0.15);
  --ins-sidenav-item-active-color: #ffffff;
  --ins-sidenav-item-active-bg: rgba(255, 255, 255, 0.25);
}

/* Light Topbar (Clean White with Professional Styling) */
html[data-skin="spoton"][data-topbar-color="light"] {
  --ins-topbar-bg: #ffffff;
  --ins-topbar-item-color: var(--ins-spoton-navy);
  --ins-topbar-item-hover-color: var(--ins-spoton-orange);
  --ins-topbar-search-bg: var(--ins-spoton-light-bg);
  --ins-topbar-search-border: var(--ins-spoton-light-gray);
}

/* Gray Topbar (Subtle Professional Background) */
html[data-skin="spoton"][data-topbar-color="gray"] {
  --ins-topbar-bg: var(--ins-spoton-light-bg);
  --ins-topbar-item-color: var(--ins-spoton-navy);
  --ins-topbar-item-hover-color: var(--ins-spoton-orange);
  --ins-topbar-search-bg: #ffffff;
  --ins-topbar-search-border: var(--ins-spoton-light-gray);
}

/* Dark Topbar (Premium Navy Blue) */
html[data-skin="spoton"][data-topbar-color="dark"] {
  --ins-topbar-bg: var(--ins-spoton-navy);
  --ins-topbar-item-color: var(--ins-spoton-light-gray);
  --ins-topbar-item-hover-color: var(--ins-spoton-orange);
  --ins-topbar-search-bg: rgba(255, 255, 255, 0.1);
  --ins-topbar-search-border: rgba(255, 255, 255, 0.15);
}

/* Gradient Topbar (Premium Brand Gradient) */
html[data-skin="spoton"][data-topbar-color="gradient"] {
  --ins-topbar-bg: linear-gradient(
    90deg,
    var(--ins-spoton-navy) 0%,
    var(--ins-spoton-orange) 100%
  );
  --ins-topbar-item-color: rgba(255, 255, 255, 0.9);
  --ins-topbar-item-hover-color: #ffffff;
  --ins-topbar-search-bg: rgba(255, 255, 255, 0.15);
  --ins-topbar-search-border: rgba(255, 255, 255, 0.2);
}

/* Spoton Button System - High Specificity Override */
html[data-skin="spoton"] .btn-primary,
html[data-skin="spoton"] .btn.btn-primary {
  background-color: #ff5100 !important;
  border-color: #ff5100 !important;
  color: #ffffff !important;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(255, 81, 0, 0.2);
}

html[data-skin="spoton"] .btn-primary:hover,
html[data-skin="spoton"] .btn-primary:focus,
html[data-skin="spoton"] .btn.btn-primary:hover,
html[data-skin="spoton"] .btn.btn-primary:focus,
html[data-skin="spoton"] .btn-primary:active,
html[data-skin="spoton"] .btn.btn-primary:active {
  background-color: #e6490e !important;
  border-color: #e6490e !important;
  color: #ffffff !important;
  box-shadow: 0 4px 8px rgba(255, 81, 0, 0.3);
  transform: translateY(-1px);
}

html[data-skin="spoton"] .btn-secondary,
html[data-skin="spoton"] .btn.btn-secondary {
  background-color: #272c4d !important;
  border-color: #272c4d !important;
  color: #ffffff !important;
  font-weight: 500;
}

html[data-skin="spoton"] .btn-secondary:hover,
html[data-skin="spoton"] .btn-secondary:focus,
html[data-skin="spoton"] .btn.btn-secondary:hover,
html[data-skin="spoton"] .btn.btn-secondary:focus,
html[data-skin="spoton"] .btn-secondary:active,
html[data-skin="spoton"] .btn.btn-secondary:active {
  background-color: #1f2340 !important;
  border-color: #1f2340 !important;
  color: #ffffff !important;
}

html[data-skin="spoton"] .btn-success,
html[data-skin="spoton"] .btn.btn-success {
  background-color: #1ab394 !important;
  border-color: #1ab394 !important;
  color: #ffffff !important;
  font-weight: 500;
}

html[data-skin="spoton"] .btn-success:hover,
html[data-skin="spoton"] .btn-success:focus,
html[data-skin="spoton"] .btn.btn-success:hover,
html[data-skin="spoton"] .btn.btn-success:focus,
html[data-skin="spoton"] .btn-success:active,
html[data-skin="spoton"] .btn.btn-success:active {
  background-color: #17a085 !important;
  border-color: #17a085 !important;
  color: #ffffff !important;
}

html[data-skin="spoton"] .btn-warning,
html[data-skin="spoton"] .btn.btn-warning {
  background-color: #f8ac59 !important;
  border-color: #f8ac59 !important;
  color: #ffffff !important;
  font-weight: 500;
}

html[data-skin="spoton"] .btn-warning:hover,
html[data-skin="spoton"] .btn-warning:focus,
html[data-skin="spoton"] .btn.btn-warning:hover,
html[data-skin="spoton"] .btn.btn-warning:focus,
html[data-skin="spoton"] .btn-warning:active,
html[data-skin="spoton"] .btn.btn-warning:active {
  background-color: #f69c42 !important;
  border-color: #f69c42 !important;
  color: #ffffff !important;
}

html[data-skin="spoton"] .btn-danger,
html[data-skin="spoton"] .btn.btn-danger {
  background-color: #d44e2c !important;
  border-color: #d44e2c !important;
  color: #ffffff !important;
  font-weight: 500;
}

html[data-skin="spoton"] .btn-danger:hover,
html[data-skin="spoton"] .btn-danger:focus,
html[data-skin="spoton"] .btn.btn-danger:hover,
html[data-skin="spoton"] .btn.btn-danger:focus,
html[data-skin="spoton"] .btn-danger:active,
html[data-skin="spoton"] .btn.btn-danger:active {
  background-color: #c23d24 !important;
  border-color: #c23d24 !important;
  color: #ffffff !important;
}

html[data-skin="spoton"] .btn-light {
  background-color: var(--ins-spoton-light-bg);
  border-color: var(--ins-spoton-light-gray);
  color: var(--ins-spoton-dark-gray);
  font-weight: 500;
}

html[data-skin="spoton"] .btn-light:hover,
html[data-skin="spoton"] .btn-light:focus {
  background-color: #e8e8e8;
  border-color: #9ca8b8;
  color: var(--ins-spoton-dark-gray);
}

html[data-skin="spoton"] .btn-dark {
  background-color: var(--ins-spoton-dark-gray);
  border-color: var(--ins-spoton-dark-gray);
  color: #ffffff;
  font-weight: 500;
}

html[data-skin="spoton"] .btn-dark:hover,
html[data-skin="spoton"] .btn-dark:focus {
  background-color: #252732;
  border-color: #252732;
  color: #ffffff;
}

/* Outline Button Styles - High Specificity */
html[data-skin="spoton"] .btn-outline-primary,
html[data-skin="spoton"] .btn.btn-outline-primary {
  border-color: #ff5100 !important;
  color: #ff5100 !important;
  background-color: transparent !important;
  font-weight: 500;
}

html[data-skin="spoton"] .btn-outline-primary:hover,
html[data-skin="spoton"] .btn-outline-primary:focus,
html[data-skin="spoton"] .btn.btn-outline-primary:hover,
html[data-skin="spoton"] .btn.btn-outline-primary:focus,
html[data-skin="spoton"] .btn-outline-primary:active,
html[data-skin="spoton"] .btn.btn-outline-primary:active {
  background-color: #ff5100 !important;
  border-color: #ff5100 !important;
  color: #ffffff !important;
}

html[data-skin="spoton"] .btn-outline-secondary,
html[data-skin="spoton"] .btn.btn-outline-secondary {
  border-color: #272c4d !important;
  color: #272c4d !important;
  background-color: transparent !important;
  font-weight: 500;
}

html[data-skin="spoton"] .btn-outline-secondary:hover,
html[data-skin="spoton"] .btn-outline-secondary:focus,
html[data-skin="spoton"] .btn.btn-outline-secondary:hover,
html[data-skin="spoton"] .btn.btn-outline-secondary:focus,
html[data-skin="spoton"] .btn-outline-secondary:active,
html[data-skin="spoton"] .btn.btn-outline-secondary:active {
  background-color: #272c4d !important;
  border-color: #272c4d !important;
  color: #ffffff !important;
}

html[data-skin="spoton"] .btn-outline-success,
html[data-skin="spoton"] .btn.btn-outline-success {
  border-color: #1ab394 !important;
  color: #1ab394 !important;
  background-color: transparent !important;
  font-weight: 500;
}

html[data-skin="spoton"] .btn-outline-success:hover,
html[data-skin="spoton"] .btn-outline-success:focus,
html[data-skin="spoton"] .btn.btn-outline-success:hover,
html[data-skin="spoton"] .btn.btn-outline-success:focus,
html[data-skin="spoton"] .btn-outline-success:active,
html[data-skin="spoton"] .btn.btn-outline-success:active {
  background-color: #1ab394 !important;
  border-color: #1ab394 !important;
  color: #ffffff !important;
}

html[data-skin="spoton"] .btn-outline-warning,
html[data-skin="spoton"] .btn.btn-outline-warning {
  border-color: #f8ac59 !important;
  color: #f8ac59 !important;
  background-color: transparent !important;
  font-weight: 500;
}

html[data-skin="spoton"] .btn-outline-warning:hover,
html[data-skin="spoton"] .btn-outline-warning:focus,
html[data-skin="spoton"] .btn.btn-outline-warning:hover,
html[data-skin="spoton"] .btn.btn-outline-warning:focus,
html[data-skin="spoton"] .btn-outline-warning:active,
html[data-skin="spoton"] .btn.btn-outline-warning:active {
  background-color: #f8ac59 !important;
  border-color: #f8ac59 !important;
  color: #ffffff !important;
}

html[data-skin="spoton"] .btn-outline-danger,
html[data-skin="spoton"] .btn.btn-outline-danger {
  border-color: #d44e2c !important;
  color: #d44e2c !important;
  background-color: transparent !important;
  font-weight: 500;
}

html[data-skin="spoton"] .btn-outline-danger:hover,
html[data-skin="spoton"] .btn-outline-danger:focus,
html[data-skin="spoton"] .btn.btn-outline-danger:hover,
html[data-skin="spoton"] .btn.btn-outline-danger:focus,
html[data-skin="spoton"] .btn-outline-danger:active,
html[data-skin="spoton"] .btn.btn-outline-danger:active {
  background-color: #d44e2c !important;
  border-color: #d44e2c !important;
  color: #ffffff !important;
}

/* Spoton Links and Text Colors */
html[data-skin="spoton"] .text-primary {
  color: #ff5100 !important;
}

html[data-skin="spoton"] a {
  color: #ff5100;
}

html[data-skin="spoton"] a:hover {
  color: #d44e2c;
}

/* Spoton Card and Component Styling */
html[data-skin="spoton"] .card {
  border-color: #e7e9eb;
}

html[data-skin="spoton"] .border-primary {
  border-color: #ff5100 !important;
}

html[data-skin="spoton"] .bg-primary {
  background-color: #ff5100 !important;
}

html[data-skin="spoton"] .bg-secondary {
  background-color: #afb5ca !important;
}

/* Spoton Alert System - Professional Styling */
html[data-skin="spoton"] .alert-primary {
  background-color: rgba(255, 81, 0, 0.1);
  border-color: var(--ins-spoton-orange);
  color: #cc4100;
  border-left: 4px solid var(--ins-spoton-orange);
}

html[data-skin="spoton"] .alert-secondary {
  background-color: rgba(39, 44, 77, 0.08);
  border-color: var(--ins-spoton-navy);
  color: var(--ins-spoton-navy);
  border-left: 4px solid var(--ins-spoton-navy);
}

html[data-skin="spoton"] .alert-success {
  background-color: rgba(26, 179, 148, 0.1);
  border-color: var(--ins-spoton-success);
  color: #158f7a;
  border-left: 4px solid var(--ins-spoton-success);
}

html[data-skin="spoton"] .alert-warning {
  background-color: rgba(248, 172, 89, 0.1);
  border-color: var(--ins-spoton-warning);
  color: #d4941f;
  border-left: 4px solid var(--ins-spoton-warning);
}

html[data-skin="spoton"] .alert-danger {
  background-color: rgba(212, 78, 44, 0.1);
  border-color: var(--ins-spoton-red-orange);
  color: #b83e26;
  border-left: 4px solid var(--ins-spoton-red-orange);
}

html[data-skin="spoton"] .alert-info {
  background-color: rgba(35, 198, 200, 0.1);
  border-color: #23c6c8;
  color: #1a9a9c;
  border-left: 4px solid #23c6c8;
}

/* Spoton Form Controls */
html[data-skin="spoton"] .form-control:focus {
  border-color: #ff5100;
  box-shadow: 0 0 0 0.2rem rgba(255, 81, 0, 0.25);
}

html[data-skin="spoton"] .form-check-input:checked {
  background-color: #ff5100;
  border-color: #ff5100;
}

/* Spoton Badge System - High Specificity */
html[data-skin="spoton"] .badge.bg-primary,
html[data-skin="spoton"] span.badge.bg-primary {
  background-color: #ff5100 !important;
  color: #ffffff !important;
}

html[data-skin="spoton"] .badge.bg-secondary,
html[data-skin="spoton"] span.badge.bg-secondary {
  background-color: #272c4d !important;
  color: #ffffff !important;
}

html[data-skin="spoton"] .badge.bg-success,
html[data-skin="spoton"] span.badge.bg-success {
  background-color: #1ab394 !important;
  color: #ffffff !important;
}

html[data-skin="spoton"] .badge.bg-warning,
html[data-skin="spoton"] span.badge.bg-warning {
  background-color: #f8ac59 !important;
  color: #ffffff !important;
}

html[data-skin="spoton"] .badge.bg-danger,
html[data-skin="spoton"] span.badge.bg-danger {
  background-color: #d44e2c !important;
  color: #ffffff !important;
}

html[data-skin="spoton"] .badge.bg-light,
html[data-skin="spoton"] span.badge.bg-light {
  background-color: #f2f2f2 !important;
  color: #2c2e3b !important;
}

html[data-skin="spoton"] .badge.bg-dark,
html[data-skin="spoton"] span.badge.bg-dark {
  background-color: #2c2e3b !important;
  color: #ffffff !important;
}

/* Spoton Progress Bar */
html[data-skin="spoton"] .progress-bar {
  background-color: #ff5100;
}

/* Spoton Dropdown */
html[data-skin="spoton"] .dropdown-item:hover,
html[data-skin="spoton"] .dropdown-item:focus {
  background-color: rgba(255, 81, 0, 0.1);
  color: #ff5100;
}

/* Spoton Pagination */
html[data-skin="spoton"] .page-link {
  color: #ff5100;
}

html[data-skin="spoton"] .page-link:hover {
  color: #d44e2c;
  background-color: rgba(255, 81, 0, 0.1);
  border-color: #ff5100;
}

html[data-skin="spoton"] .page-item.active .page-link {
  background-color: #ff5100;
  border-color: #ff5100;
}

/* Spoton Table Styling */
html[data-skin="spoton"] .table-hover tbody tr:hover td {
  background-color: rgba(255, 81, 0, 0.05);
}

/* Dark Mode Support for Spoton Theme */
html[data-skin="spoton"][data-bs-theme="dark"] {
  --ins-body-bg: #272c4d;
  --ins-body-color: #ffffff;
  --ins-light: #2c2e3b;
  --ins-light-rgb: 44, 46, 59;
  --ins-dark: #afb5ca;
  --ins-dark-rgb: 175, 181, 202;
}

/* Additional High-Priority Overrides for Spoton Theme */
html[data-skin="spoton"] {
  /* Ensure primary color is always orange */
  --bs-primary: #ff5100;
  --bs-primary-rgb: 255, 81, 0;
  --bs-secondary: #272c4d;
  --bs-secondary-rgb: 39, 44, 77;
  --bs-success: #1ab394;
  --bs-success-rgb: 26, 179, 148;
  --bs-warning: #f8ac59;
  --bs-warning-rgb: 248, 172, 89;
  --bs-danger: #d44e2c;
  --bs-danger-rgb: 212, 78, 44;
  --bs-light: #f2f2f2;
  --bs-light-rgb: 242, 242, 242;
  --bs-dark: #2c2e3b;
  --bs-dark-rgb: 44, 46, 59;
}

/* Force Bootstrap button colors */
html[data-skin="spoton"] .btn-primary {
  --bs-btn-bg: #ff5100;
  --bs-btn-border-color: #ff5100;
  --bs-btn-hover-bg: #e6490e;
  --bs-btn-hover-border-color: #e6490e;
  --bs-btn-active-bg: #e6490e;
  --bs-btn-active-border-color: #e6490e;
}

html[data-skin="spoton"] .btn-secondary {
  --bs-btn-bg: #272c4d;
  --bs-btn-border-color: #272c4d;
  --bs-btn-hover-bg: #1f2340;
  --bs-btn-hover-border-color: #1f2340;
  --bs-btn-active-bg: #1f2340;
  --bs-btn-active-border-color: #1f2340;
}

html[data-skin="spoton"] .btn-success {
  --bs-btn-bg: #1ab394;
  --bs-btn-border-color: #1ab394;
  --bs-btn-hover-bg: #17a085;
  --bs-btn-hover-border-color: #17a085;
  --bs-btn-active-bg: #17a085;
  --bs-btn-active-border-color: #17a085;
}

html[data-skin="spoton"] .btn-warning {
  --bs-btn-bg: #f8ac59;
  --bs-btn-border-color: #f8ac59;
  --bs-btn-hover-bg: #f69c42;
  --bs-btn-hover-border-color: #f69c42;
  --bs-btn-active-bg: #f69c42;
  --bs-btn-active-border-color: #f69c42;
}

html[data-skin="spoton"] .btn-danger {
  --bs-btn-bg: #d44e2c;
  --bs-btn-border-color: #d44e2c;
  --bs-btn-hover-bg: #c23d24;
  --bs-btn-hover-border-color: #c23d24;
  --bs-btn-active-bg: #c23d24;
  --bs-btn-active-border-color: #c23d24;
}

/* ===== CATEGORY COLOR UTILITY CLASSES ===== */

/* Category Text Colors */
.category-creative {
  color: var(--category-creative) !important;
}
.category-finance {
  color: var(--category-finance) !important;
}
.category-preproduction {
  color: var(--category-preproduction) !important;
}
.category-postproduction {
  color: var(--category-postproduction) !important;
}
.category-production {
  color: var(--category-production) !important;
}
.category-general {
  color: var(--category-general) !important;
}

/* Category Background Colors */
.bg-category-creative {
  background-color: var(--category-creative) !important;
  color: white !important;
}
.bg-category-finance {
  background-color: var(--category-finance) !important;
  color: white !important;
}
.bg-category-preproduction {
  background-color: var(--category-preproduction) !important;
  color: white !important;
}
.bg-category-postproduction {
  background-color: var(--category-postproduction) !important;
  color: white !important;
}
.bg-category-production {
  background-color: var(--category-production) !important;
  color: white !important;
}
.bg-category-general {
  background-color: var(--category-general) !important;
  color: white !important;
}

/* Category Light Background Colors */
.bg-category-creative-light {
  background-color: var(--category-creative-light) !important;
}
.bg-category-finance-light {
  background-color: var(--category-finance-light) !important;
}
.bg-category-preproduction-light {
  background-color: var(--category-preproduction-light) !important;
}
.bg-category-postproduction-light {
  background-color: var(--category-postproduction-light) !important;
}
.bg-category-production-light {
  background-color: var(--category-production-light) !important;
}
.bg-category-general-light {
  background-color: var(--category-general-light) !important;
}

/* Category Border Colors */
.border-category-creative {
  border-color: var(--category-creative) !important;
}
.border-category-finance {
  border-color: var(--category-finance) !important;
}
.border-category-preproduction {
  border-color: var(--category-preproduction) !important;
}
.border-category-postproduction {
  border-color: var(--category-postproduction) !important;
}
.border-category-production {
  border-color: var(--category-production) !important;
}
.border-category-general {
  border-color: var(--category-general) !important;
}

/* Category Left Border for Cards */
.border-left-category-creative {
  border-left: 4px solid var(--category-creative) !important;
}
.border-left-category-finance {
  border-left: 4px solid var(--category-finance) !important;
}
.border-left-category-preproduction {
  border-left: 4px solid var(--category-preproduction) !important;
}
.border-left-category-postproduction {
  border-left: 4px solid var(--category-postproduction) !important;
}
.border-left-category-general {
  border-left: 4px solid var(--category-general) !important;
}

/* Category Badges */
.badge-category-creative {
  background-color: var(--category-creative) !important;
  color: white !important;
}
.badge-category-finance {
  background-color: var(--category-finance) !important;
  color: white !important;
}
.badge-category-preproduction {
  background-color: var(--category-preproduction) !important;
  color: white !important;
}
.badge-category-postproduction {
  background-color: var(--category-postproduction) !important;
  color: white !important;
}
.badge-category-production {
  background-color: var(--category-production) !important;
  color: white !important;
}
.badge-category-general {
  background-color: var(--category-general) !important;
  color: white !important;
}

/* Soft Badge for Production */
.badge-soft-brown {
  --bs-badge-color: var(--category-production);
  background-color: var(--category-production-light);
  color: var(--category-production) !important;
}

/* Category Icons */
.category-icon::before {
  margin-right: 0.5rem;
  font-size: 1.1em;
}
.category-icon-creative::before {
  content: "<i class=" ti ti-palette "></i>";
}
.category-icon-finance::before {
  content: "<i class=" ti ti-cash "></i>";
}
.category-icon-preproduction::before {
  content: "<i class=" ti ti-video "></i>";
}
.category-icon-postproduction::before {
  content: "<i class=" ti ti-scissors "></i>";
}
.category-icon-general::before {
  content: "📋";
}

/* ===== FILE DISPLAY CONSISTENCY STYLES ===== */

/* File name display - ensures consistent truncation and wrapping */
.file-name-display {
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  hyphens: auto;
}

/* Truncate long file names with ellipsis - MORE AGGRESSIVE */
.file-name-truncate {
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  max-width: 180px !important;
  display: inline-block !important;
}

/* File containers - ensure proper flex behavior */
.files-container .flex-grow-1,
#projectFilesContainer .flex-grow-1 {
  min-width: 0 !important;
  flex: 1 1 0% !important;
  overflow: hidden !important;
}

/* File card responsive behavior */
.file-card {
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
  overflow: hidden;
}

.file-card .file-name {
  max-width: calc(100% - 100px) !important; /* Account for actions buttons */
  display: inline-block !important;
  vertical-align: middle;
  overflow: hidden !important;
}

/* File name container should not exceed parent */
.file-name-container {
  max-width: 100%;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

/* Responsive file name handling */
@media (max-width: 768px) {
  .file-name-truncate {
    max-width: 120px !important;
  }

  .file-card .file-name {
    max-width: calc(100% - 80px) !important;
  }
}

@media (max-width: 480px) {
  .file-name-truncate {
    max-width: 100px !important;
  }

  .file-card .file-name {
    max-width: calc(100% - 60px) !important;
  }
}

/* Ensure file links are properly truncated */
.file-name a {
  display: inline-block !important;
  max-width: 100% !important;
  text-decoration: none;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.file-name a:hover {
  text-decoration: underline;
}

/* Additional file container constraints */
.files-container,
#projectFilesContainer {
  width: 100%;
  overflow: hidden;
}

.files-container .card-body,
#projectFilesContainer .card-body {
  overflow: hidden;
}

/* Ensure the file items don't exceed container width */
.files-container .d-flex,
#projectFilesContainer .d-flex {
  max-width: 100%;
  overflow: hidden;
}