/* App-wide custom styles */
/* Corporate Colors - NS Inspired */
:root {
    --ns-orange: #FFC917;
    --ns-blue: #003082;
    --ns-dark-blue: #002060;
    --primary-blue: #366092;
    --accent-orange: #FFA500;
}

.page-title { 
    font-weight: 700;
    color: var(--ns-blue) !important;
}

.card .card-header .card-title { 
    font-weight: 600;
    color: var(--primary-blue) !important;
}

/* Enhanced Tab Styling - Cleaner and More Compact */

/* Main Tab Container */
.tab-container {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 2px solid #dee2e6;
    padding: 8px 0;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Tab List Container */
.dash-tabs {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 0 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-bottom: 2px solid #dee2e6 !important;
}

/* Individual Tab Styling */
.dash-tab {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    margin: 2px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #495057 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    min-width: 80px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* Tab Hover Effect - NS Blue with Orange accent */
.dash-tab:hover {
    background: #f8f9fa !important;
    border-color: var(--ns-blue) !important;
    color: var(--ns-blue) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0, 48, 130, 0.15) !important;
    border-bottom: 2px solid var(--ns-orange) !important;
}

/* Active Tab Styling - NS Corporate Blue */
.dash-tab--selected {
    background: linear-gradient(135deg, var(--ns-blue) 0%, var(--primary-blue) 100%) !important;
    border-color: var(--ns-blue) !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(0, 48, 130, 0.3) !important;
}

/* Active Tab Hover */
.dash-tab--selected:hover {
    background: linear-gradient(135deg, var(--ns-dark-blue) 0%, var(--ns-blue) 100%) !important;
    transform: none !important;
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    .dash-tabs {
        padding: 0 10px !important;
        gap: 2px !important;
    }
    
    .dash-tab {
        padding: 6px 12px !important;
        font-size: 12px !important;
        min-width: 70px !important;
    }
}

/* Tab Focus State for Accessibility */
.dash-tab:focus {
    outline: 2px solid var(--ns-blue) !important;
    outline-offset: 2px !important;
}

/* Table header styling with subtle NS colors */
.dash-table-container .dash-spreadsheet-container .dash-header {
    background: linear-gradient(135deg, var(--ns-blue) 0%, var(--primary-blue) 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--ns-orange) !important;
}

/* Table row hover effect */
.dash-table-container .dash-spreadsheet-container .dash-cell {
    transition: background-color 0.2s ease;
}

.dash-table-container .dash-spreadsheet-container tr:hover .dash-cell {
    background-color: #fff8e7 !important;
}

/* Header Title Styling */
.app-header {
    text-align: center !important;
    padding: 15px 0 5px 0 !important;
    margin: 0 !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

.app-header h1 {
    color: var(--ns-blue) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1) !important;
    background: linear-gradient(90deg, var(--ns-blue) 0%, var(--primary-blue) 60%, var(--ns-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Compact spacing for entire header area */
.header-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Optimized Summary Table Column Styling */
/* Compact Decom column styling */
.dash-table-container .dash-spreadsheet-container .dash-cell[data-column-id="Decom"],
.dash-table-container .dash-spreadsheet-container .dash-cell[data-column-id="Decom Status"] {
    width: 80px !important;
    max-width: 80px !important;
    min-width: 80px !important;
    padding: 2px 4px !important;
    font-size: 10px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* Total column styling - prevent wrapping */
.dash-table-container .dash-spreadsheet-container .dash-cell[data-column-id*="Total"],
.dash-table-container .dash-spreadsheet-container .dash-cell[data-column-id^="€"] {
    width: 120px !important;
    max-width: 140px !important;
    min-width: 100px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Menlo', monospace !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 300 !important;
}

/* Header styling for optimized columns */
.dash-table-container .dash-spreadsheet-container .dash-header[data-column-id="Decom"],
.dash-table-container .dash-spreadsheet-container .dash-header[data-column-id="Decom Status"] {
    width: 80px !important;
    max-width: 80px !important;
    min-width: 80px !important;
    font-size: 11px !important;
}

.dash-table-container .dash-spreadsheet-container .dash-header[data-column-id*="Total"],
.dash-table-container .dash-spreadsheet-container .dash-header[data-column-id^="€"] {
    width: 120px !important;
    max-width: 140px !important;
    min-width: 100px !important;
}

/* Hide the View dropdown on all pages - not in use */
.view-dropdown-hidden {
    display: none !important;
}

/* Horizontal scroll indicator for forecast savings table */
.forecast-savings-table .dash-table-container {
    position: relative;
}

.forecast-savings-table .dash-table-container::after {
    content: '⟶';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.9) 30%, rgba(255,255,255,1) 100%);
    padding: 5px 10px;
    font-size: 16px;
    color: #6c757d;
    pointer-events: none;
    z-index: 1;
}

/* Hide arrow when scrolled to the end */
.forecast-savings-table .dash-table-container:hover::after {
    opacity: 0.7;
}

/* Enhanced scroll hint styling */
.scroll-hint {
    color: #6c757d !important;
    font-style: italic !important;
    font-size: 12px !important;
}

/* Mission Critical columns styling - Roboto Condensed */
.dash-table-container .dash-spreadsheet-container .dash-cell[data-column-id="Mission Critical Algemene dienst"],
.dash-table-container .dash-spreadsheet-container .dash-cell[data-column-id="Mission Critical Hosting"],
.dash-table-container .dash-spreadsheet-container .dash-cell[data-column-id="Mission Critical Monitoring Services"],
.dash-table-container .dash-spreadsheet-container .dash-cell[data-column-id="Mission Critical TAB"] {
    font-family: 'Roboto Condensed', 'Roboto Mono', 'JetBrains Mono', 'SF Mono', 'Monaco', 'Consolas', monospace !important;
    font-weight: 200 !important;
    font-variant-numeric: tabular-nums !important;
    text-align: right !important;
}

/* Summary sticky header (cards + savings) */
.summary-sticky {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	padding-top: 0.5rem;
	padding-bottom: 1.5rem;
	margin-bottom: 1rem;
}

/* Card header improvements */
.card-header.small {
	font-size: 0.875rem;
}

.card-header .text-truncate {
	max-width: 100%;
	flex: 1;
}

@media (max-width: 768px) {
	.card-header.small {
		font-size: 0.75rem;
		padding: 0.75rem;
	}
}

/* Custom Navbar Button Styles - NS Corporate */
/* Base styles for all buttons */
.navbar button {
  background-color: #ffffff;     /* white background */
  color: var(--ns-blue);        /* NS blue text */
  border: none;                 /* remove default border */
  border-radius: 6px;           /* smaller rounded corners */
  padding: 4px 8px;             /* further reduced spacing */
  font-size: 13px;              /* slightly smaller font */
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease-in-out; /* smooth hover effect */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* subtle shadow */
  margin: 0 1px;                /* minimal margin */
  position: relative;           /* for active indicator */
  border-bottom: 2px solid transparent; /* space for active indicator */
}

/* Hover effect with orange accent */
.navbar button:hover {
  background-color: #fff8e7;    /* light orange tint */
  color: var(--ns-blue);
  transform: translateY(-1px);  /* reduced movement */
  box-shadow: 0 2px 4px rgba(255, 165, 0, 0.2);
  border-bottom: 2px solid var(--ns-orange) !important;
}

/* Active/focused button with orange underline */
.navbar button:focus,
.navbar button.active,
.navbar button[aria-current="page"] {
  background-color: #fff8e7;
  color: var(--ns-blue);
  border-bottom: 2px solid var(--ns-orange) !important;
  box-shadow: 0 1px 3px rgba(255, 165, 0, 0.2);
}

/* Active state for buttons with .active class */
.navbar button.active {
  background-color: #fff8e7 !important;
  color: var(--ns-dark-blue) !important;
  border-bottom: 2px solid var(--ns-orange) !important;
  box-shadow: 0 1px 3px rgba(255, 165, 0, 0.25) !important;
  font-weight: 600;
}

/* Responsive navbar styles */
@media (max-width: 991.98px) {
  /* Mobile navbar styles */
  .navbar button {
    width: 100%;
    text-align: left;
    margin: 2px 0;
    justify-content: flex-start;
  }
  
  .navbar .nav-item {
    width: 100%;
  }
  
  /* Stack buttons vertically on mobile */
  .navbar .navbar-nav {
    width: 100%;
  }
  
  /* Adjust navbar brand on mobile */
  .navbar-brand {
    font-size: 1.1rem;
  }
  
  /* Hamburger menu spacing */
  .navbar-collapse {
    margin-top: 1rem;
  }
}

/* Navbar toggle button styling */
.navbar-toggler {
  border: none;
  padding: 0.25rem 0.5rem;
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* Ensure smooth transitions */
.navbar-collapse {
  transition: all 0.3s ease-in-out;
}

/* Active/pressed effect */
.navbar button:active {
  background-color: #cce0ff;
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset;
}

/* Mission Critical Card Hover Effects */
.card.shadow-sm {
  transition: all 0.3s ease;
}

.card.shadow-sm:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-color: #cbd5e1 !important;
}

.card.shadow-sm:active {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Mission Critical Card specific hover (cards with mc-card- prefix) */
[id^="mc-card-"] {
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

[id^="mc-card-"]:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 48, 130, 0.2) !important;
  border-color: var(--ns-blue) !important;
  border-top: 3px solid var(--ns-orange) !important;
}

[id^="mc-card-"]:active {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(0, 48, 130, 0.15) !important;
}

/* Subtle orange accent for card value text (non-indicator) */
.card-body h5:not(.text-danger):not(.text-success):not(.text-warning) {
    color: var(--ns-dark-blue) !important;
    font-weight: 600;
}

/* Orange accent for numeric values on cards */
.card-body .h2:not(.text-danger):not(.text-success):not(.text-warning),
.card-body .h3:not(.text-danger):not(.text-success):not(.text-warning) {
    background: linear-gradient(135deg, var(--ns-blue) 0%, var(--primary-blue) 70%, var(--ns-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* Flip Card Styles */
.flip-card-container {
    perspective: 1000px;
    cursor: pointer;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card-container.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.flip-card-front {
    position: relative;
    z-index: 2;
}

.flip-card-back {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateY(180deg);
    z-index: 1;
}

/* Flip icon indicator */
.flip-icon {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1rem;
    color: #9CA3AF;
    transition: color 0.3s, transform 0.3s;
    z-index: 10;
}

.flip-card-container:hover .flip-icon {
    color: var(--ns-orange);
    transform: rotate(180deg);
}