/*
 * KDTDev SSO - Custom Theme Overrides for W3.CSS
 * Color Palette: Navy (#2a6592), Amber (#d97706), Teal (#7e9a9a), Sky (#8ec3eb)
 * Author: KDTDev
 */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
  /* KDTDev Brand Colors */
  --kdtdev-navy: #2a6592;
  --kdtdev-navy-dark: #1e4a6f;
  --kdtdev-navy-light: #e8f1f8;
  --kdtdev-amber: #d97706;
  --kdtdev-amber-dark: #b45309;
  --kdtdev-amber-light: #fef3e2;
  --kdtdev-teal: #7e9a9a;
  --kdtdev-teal-dark: #6a8585;
  --kdtdev-teal-light: #e5eded;
  --kdtdev-sky: #8ec3eb;
  --kdtdev-sky-light: #e6f4fb;
  --kdtdev-neutral: #f1f5f9;
  
  /* Semantic Color Assignments */
  --color-primary: var(--kdtdev-navy);
  --color-primary-hover: var(--kdtdev-navy-dark);
  --color-accent: var(--kdtdev-amber);
  --color-accent-hover: var(--kdtdev-amber-dark);
  --color-secondary: var(--kdtdev-teal);
  --color-info: var(--kdtdev-sky);
  
  /* Extended Palette */
  --color-success: #16a34a;
  --color-warning: var(--kdtdev-amber);
  --color-danger: #dc2626;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.15);
}

/* ============================================
   W3.CSS Theme Overrides
   ============================================ */

/* Primary Theme Colors (Navy) */
.w3-theme-d5 {
  color: #fff !important;
  background-color: #0f3858 !important;
}

.w3-theme-d4 {
  color: #fff !important;
  background-color: #1a4466 !important;
}

.w3-theme-d3 {
  color: #fff !important;
  background-color: #1e4a6f !important;
}

.w3-theme-d2 {
  color: #fff !important;
  background-color: #225078 !important;
}

.w3-theme-d1 {
  color: #fff !important;
  background-color: #2a6592 !important;
}

.w3-theme {
  color: #fff !important;
  background-color: #2a6592 !important;
}

.w3-theme-l1 {
  color: #000 !important;
  background-color: #5a8bb3 !important;
}

.w3-theme-l2 {
  color: #000 !important;
  background-color: #7ea8c5 !important;
}

.w3-theme-l3 {
  color: #000 !important;
  background-color: #a2c2d8 !important;
}

.w3-theme-l4 {
  color: #000 !important;
  background-color: #c6dcec !important;
}

.w3-theme-l5 {
  color: #000 !important;
  background-color: #e8f1f8 !important;
}

/* Hover States for Theme Colors */
.w3-hover-theme-d5:hover {
  background-color: #0f3858 !important;
  color: #fff !important;
}

.w3-hover-theme-d4:hover {
  background-color: #1a4466 !important;
  color: #fff !important;
}

.w3-hover-theme-d3:hover {
  background-color: #1e4a6f !important;
  color: #fff !important;
}

.w3-hover-theme-d2:hover {
  background-color: #225078 !important;
  color: #fff !important;
}

.w3-hover-theme-d1:hover {
  background-color: #2a6592 !important;
  color: #fff !important;
}

.w3-hover-theme:hover {
  background-color: #2a6592 !important;
  color: #fff !important;
}

.w3-hover-theme-l1:hover {
  background-color: #5a8bb3 !important;
  color: #000 !important;
}

.w3-hover-theme-l2:hover {
  background-color: #7ea8c5 !important;
  color: #000 !important;
}

.w3-hover-theme-l3:hover {
  background-color: #a2c2d8 !important;
  color: #000 !important;
}

.w3-hover-theme-l4:hover {
  background-color: #c6dcec !important;
  color: #000 !important;
}

.w3-hover-theme-l5:hover {
  background-color: #e8f1f8 !important;
  color: #000 !important;
}

/* Text Color for Theme */
.w3-text-theme {
  color: #2a6592 !important;
}

.w3-hover-text-theme:hover {
  color: #2a6592 !important;
}

/* Border Color for Theme */
.w3-border-theme {
  border-color: #2a6592 !important;
}

.w3-hover-border-theme:hover {
  border-color: #2a6592 !important;
}

/* ============================================
   KDTDev Custom Color Classes
   ============================================ */

/* Navy Colors */
.w3-kdtdev-navy {
  color: #fff !important;
  background-color: var(--kdtdev-navy) !important;
}

.w3-hover-kdtdev-navy:hover {
  color: #fff !important;
  background-color: var(--kdtdev-navy-dark) !important;
}

.w3-text-kdtdev-navy {
  color: var(--kdtdev-navy) !important;
}

.w3-border-kdtdev-navy {
  border-color: var(--kdtdev-navy) !important;
}

/* Amber Colors */
.w3-kdtdev-amber {
  color: #78350f !important;
  background-color: var(--kdtdev-amber) !important;
}

.w3-hover-kdtdev-amber:hover {
  color: #fff !important;
  background-color: var(--kdtdev-amber-dark) !important;
}

.w3-text-kdtdev-amber {
  color: var(--kdtdev-amber) !important;
}

.w3-border-kdtdev-amber {
  border-color: var(--kdtdev-amber) !important;
}

/* Teal Colors */
.w3-kdtdev-teal {
  color: #fff !important;
  background-color: var(--kdtdev-teal) !important;
}

.w3-hover-kdtdev-teal:hover {
  color: #fff !important;
  background-color: var(--kdtdev-teal-dark) !important;
}

.w3-text-kdtdev-teal {
  color: var(--kdtdev-teal) !important;
}

.w3-border-kdtdev-teal {
  border-color: var(--kdtdev-teal) !important;
}

/* Sky Colors */
.w3-kdtdev-sky {
  color: #0369a1 !important;
  background-color: var(--kdtdev-sky) !important;
}

.w3-hover-kdtdev-sky:hover {
  color: #0369a1 !important;
  background-color: #6ab0e0 !important;
}

.w3-text-kdtdev-sky {
  color: var(--kdtdev-sky) !important;
}

.w3-border-kdtdev-sky {
  border-color: var(--kdtdev-sky) !important;
}

/* ============================================
   Enhanced Component Styling
   ============================================ */

/* Buttons with KDTDev Colors */
.w3-button.w3-theme-d1:hover,
.w3-button.w3-theme:hover {
  background-color: var(--kdtdev-navy-dark) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  transition: all 150ms ease;
}

.w3-button.w3-kdtdev-amber:hover {
  background-color: var(--kdtdev-amber-dark) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.w3-button.w3-kdtdev-teal:hover {
  background-color: var(--kdtdev-teal-dark) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Cards and Panels */
.w3-card,
.w3-card-2,
.w3-card-4 {
  box-shadow: var(--shadow-md) !important;
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.w3-card:hover,
.w3-card-2:hover,
.w3-card-4:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px);
}

/* Tags and Badges with KDTDev Colors */
.w3-tag.w3-theme {
  background-color: var(--kdtdev-navy) !important;
}

.w3-tag.w3-kdtdev-amber {
  background-color: var(--kdtdev-amber) !important;
  color: #78350f !important;
}

.w3-tag.w3-kdtdev-sky {
  background-color: var(--kdtdev-sky-light) !important;
  color: #0369a1 !important;
  border: 1px solid var(--kdtdev-sky);
}

/* Tables */
.w3-table-all thead tr {
  background-color: var(--kdtdev-navy-light) !important;
  color: var(--kdtdev-navy-dark) !important;
  font-weight: 600;
}

.w3-table-all tbody tr:hover {
  background-color: var(--kdtdev-neutral) !important;
}

/* ============================================
   Flash Messages with KDTDev Colors
   ============================================ */
.flash-success {
  background-color: #dcfce7 !important;
  color: #15803d !important;
  border-left: 4px solid var(--color-success);
}

.flash-danger {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
  border-left: 4px solid var(--color-danger);
}

.flash-info {
  background-color: var(--kdtdev-sky-light) !important;
  color: #0369a1 !important;
  border-left: 4px solid var(--kdtdev-sky);
}

.flash-warning {
  background-color: var(--kdtdev-amber-light) !important;
  color: #92400e !important;
  border-left: 4px solid var(--kdtdev-amber);
}

/* ============================================
   Form Elements
   ============================================ */
.w3-input:focus,
.w3-select:focus {
  border-color: var(--kdtdev-navy) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 101, 146, 0.1) !important;
}

/* ============================================
   Navigation Bar Enhancements
   ============================================ */
.w3-bar.w3-theme-d2 {
  background: linear-gradient(135deg, var(--kdtdev-navy-dark) 0%, var(--kdtdev-navy) 100%) !important;
  box-shadow: var(--shadow-md);
}

.w3-bar-item.w3-button:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  transition: background-color 150ms ease;
}

.w3-dropdown-content {
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

/* ============================================
   Footer Styling
   ============================================ */
.site-footer,
footer.w3-center.w3-black {
  background: linear-gradient(180deg, var(--kdtdev-navy) 0%, var(--kdtdev-navy-dark) 100%) !important;
  box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.1);
}

/* ============================================
   Pagination with KDTDev Colors
   ============================================ */
.w3-bar .w3-button.w3-theme-d1 {
  background-color: var(--kdtdev-navy) !important;
  color: #fff !important;
}

.w3-bar .w3-button.w3-hover-theme:hover {
  background-color: var(--kdtdev-navy-light) !important;
  color: var(--kdtdev-navy-dark) !important;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 768px) {
  .w3-bar.w3-theme-d2 {
    padding: 0.75rem 1rem;
  }
  
  .w3-dropdown-hover {
    width: 100%;
  }
  
  .w3-dropdown-content {
    width: 100%;
  }
}

/* ============================================
   Accessibility Enhancements
   ============================================ */
*:focus-visible {
  outline: 3px solid var(--kdtdev-navy) !important;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================
   Utility Classes
   ============================================ */
.kdtdev-shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.kdtdev-shadow-md {
  box-shadow: var(--shadow-md) !important;
}

.kdtdev-shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}

.kdtdev-rounded {
  border-radius: 0.5rem !important;
}

.kdtdev-rounded-lg {
  border-radius: 1rem !important;
}

/* Smooth transitions for interactive elements */
.w3-button,
.w3-bar-item,
.w3-tag {
  transition: all 150ms ease !important;
}