/* Ocean Pixel Kingdom Design System */

:root {
  /* Primary - Deep Ocean Blue */
  --primary-500: #0099B0;
  --secondary-500: #00D9A3;
  
  /* Dark Mode Colors */
  --dark-surface: #161B22;
  --dark-border: #30363D;
  --gray-300: #B0C4CE;
}

/* ========================================
   Custom Pixel Art Cursors - Dave the Diver Style
   ======================================== */

* {
  cursor: url("/assets/cursor-default-08ca966b.svg") 2 2, auto !important;
}

a, button, 
input[type="button"], 
input[type="submit"],
input[type="reset"],
.cursor-pointer,
.btn,
[role="button"],
.clickable,
.add-table-btn,
#saveBtn,
#downloadImageBtn,
.table-item,
.entity-rect,
.attribute-group,
.attr-ellipse,
.post-card,
.improvement-card,
label[for],
.hover\\:bg-gray-50:hover,
.hover\\:bg-blue-50:hover,
.hover\\:bg-green-50:hover,
.hover\\:bg-red-50:hover {
  cursor: url("/assets/cursor-pointer-2cbfbc61.svg") 6 2, pointer !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="tel"],
textarea,
.trix-content,
trix-editor,
[contenteditable="true"] {
  cursor: text !important;
}

.draggable,
.table-bg,
g[data-table-id],
#chenCanvas svg g[data-table-id],
div[data-er-diagram-editor-target="canvas"] svg g[data-table-id] {
  cursor: url("/assets/cursor-pointer-2cbfbc61.svg") 6 2, grab !important;
}

.dragging,
g[data-table-id]:active,
#chenCanvas.panning,
#chenCanvas:active,
div[data-er-diagram-editor-target="canvas"]:active {
  cursor: url("/assets/cursor-pointer-2cbfbc61.svg") 6 2, grabbing !important;
}

input[type="checkbox"],
input[type="radio"] {
  cursor: url("/assets/cursor-pointer-2cbfbc61.svg") 6 2, pointer !important;
}

select {
  cursor: url("/assets/cursor-pointer-2cbfbc61.svg") 6 2, pointer !important;
}

.disabled,
[disabled],
button:disabled,
input:disabled {
  cursor: not-allowed !important;
}

/* Loading cursor for async operations */
.loading,
.saving,
[data-loading="true"] {
  cursor: wait !important;
}

/* Resize cursors */
.resize-n { cursor: n-resize !important; }
.resize-e { cursor: e-resize !important; }
.resize-s { cursor: s-resize !important; }
.resize-w { cursor: w-resize !important; }
.resize-ne { cursor: ne-resize !important; }
.resize-nw { cursor: nw-resize !important; }
.resize-se { cursor: se-resize !important; }
.resize-sw { cursor: sw-resize !important; }

:root {
  /* Primary - Deep Ocean Blue */
  --primary-50: #E6F4F7;
  --primary-100: #B3E0E8;
  --primary-200: #80CCD9;
  --primary-300: #4DB8CA;
  --primary-400: #26A9BD;
  --primary-500: #0099B0;
  --primary-600: #008A9E;
  --primary-700: #00798B;
  --primary-800: #006878;
  --primary-900: #004754;
  
  /* Secondary - Mint Splash */
  --secondary-50: #E6FBF6;
  --secondary-100: #B3F4E4;
  --secondary-200: #80EDD2;
  --secondary-300: #4DE6C0;
  --secondary-400: #26E0B2;
  --secondary-500: #00D9A3;
  --secondary-600: #00C394;
  --secondary-700: #00AA82;
  --secondary-800: #009170;
  --secondary-900: #00614B;
  
  /* Accent - Coral Glow */
  --accent-50: #FFF4E6;
  --accent-100: #FFE0B3;
  --accent-200: #FFCC80;
  --accent-300: #FFB84D;
  --accent-400: #FFA726;
  --accent-500: #FF9500;
  --accent-600: #FB8C00;
  --accent-700: #F57C00;
  --accent-800: #EF6C00;
  --accent-900: #E65100;
  
  /* Dark Mode - Deep Sea */
  --dark-bg: #0D1117;
  --dark-surface: #161B22;
  --dark-surface-2: #21262D;
  --dark-border: #30363D;
  
  /* Light Mode - Shallow Waters */
  --light-bg: #F0F8FA;
  --light-surface: #FFFFFF;
  --light-surface-2: #F6FAFB;
  --light-border: #D1E3E8;
  
  /* Pixel Grid Overlay */
  --pixel-grid: rgba(0, 153, 176, 0.05);
}

/* Dark Mode (Default) */
body {
  background-color: var(--dark-bg);
  color: #E6F0F3;
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 7px,
      var(--pixel-grid) 7px,
      var(--pixel-grid) 8px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 7px,
      var(--pixel-grid) 7px,
      var(--pixel-grid) 8px
    );
}

/* Pixel Font for Headers */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

h1, h2, h3 {
  font-family: 'Press Start 2P', monospace;
  text-shadow: 2px 2px 0 rgba(0, 153, 176, 0.3);
  letter-spacing: 1px;
}

h1 {
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--secondary-400);
}

h2 {
  font-size: 1.2rem;
  line-height: 1.8rem;
  color: var(--primary-400);
}

h3 {
  font-size: 1rem;
  line-height: 1.6rem;
  color: var(--accent-400);
}

/* Ocean Buttons */
.btn-ocean-primary,
.bg-indigo-600,
.hover\:bg-indigo-700:hover {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700)) !important;
  color: white !important;
  padding: 12px 24px;
  border: 2px solid var(--primary-400) !important;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 
    4px 4px 0 rgba(0, 153, 176, 0.3),
    inset 0 0 0 2px rgba(255, 255, 255, 0.1);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.btn-ocean-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-ocean-primary:hover::before {
  left: 100%;
}

.btn-ocean-primary:hover {
  transform: translateY(-2px);
  box-shadow: 
    6px 6px 0 rgba(0, 153, 176, 0.4),
    inset 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.btn-ocean-primary:active {
  transform: translateY(0);
  box-shadow: 
    2px 2px 0 rgba(0, 153, 176, 0.3),
    inset 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.btn-ocean-secondary {
  background: linear-gradient(135deg, var(--secondary-500), var(--secondary-700));
  color: white;
  padding: 12px 24px;
  border: 2px solid var(--secondary-400);
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 
    4px 4px 0 rgba(0, 217, 163, 0.3),
    inset 0 0 0 2px rgba(255, 255, 255, 0.1);
  transition: all 0.2s;
}

.btn-ocean-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 
    6px 6px 0 rgba(0, 217, 163, 0.4),
    inset 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.btn-ocean-accent {
  background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
  color: white;
  padding: 12px 24px;
  border: 2px solid var(--accent-400);
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 
    4px 4px 0 rgba(255, 149, 0, 0.3),
    inset 0 0 0 2px rgba(255, 255, 255, 0.1);
  transition: all 0.2s;
}

.btn-ocean-accent:hover {
  transform: translateY(-2px);
  box-shadow: 
    6px 6px 0 rgba(255, 149, 0, 0.4),
    inset 0 0 0 2px rgba(255, 255, 255, 0.2);
}

/* Ocean Cards */
.ocean-card {
  background: var(--dark-surface);
  border: 2px solid var(--dark-border);
  border-radius: 8px;
  padding: 24px;
  position: relative;
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(0, 153, 176, 0.1);
  transition: all 0.3s;
}

.ocean-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--primary-500), var(--secondary-500), var(--accent-500));
  border-radius: 8px;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s;
}

.ocean-card:hover::before {
  opacity: 0.3;
}

.ocean-card:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 8px 12px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(0, 153, 176, 0.2);
}

/* Navigation Bar */
.ocean-nav {
  background: rgba(13, 17, 23, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--dark-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  height: 60px;
}

.ocean-nav-link {
  color: #B0C4CE;
  padding: 8px 12px;
  text-decoration: none;
  position: relative;
  transition: all 0.3s;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 4px;
  height: 36px;
  margin: 0;
}

.ocean-nav-link .pixel-icon {
  font-size: 1rem;
  margin-right: 4px;
  display: none; /* Hide icons on small screens */
}

@media (min-width: 768px) {
  .ocean-nav-link .pixel-icon {
    display: inline-block;
  }
  
  .ocean-nav-link {
    padding: 10px 14px;
    font-size: 0.85rem;
  }
}

.ocean-nav-link:hover {
  color: var(--secondary-400);
  background: rgba(0, 217, 163, 0.1);
}

.ocean-nav-link.active {
  color: var(--secondary-400);
  background: rgba(0, 217, 163, 0.15);
  box-shadow: inset 0 0 0 1px rgba(0, 217, 163, 0.3);
}

/* Compact nav link underline effect */
.ocean-nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 8px;
  right: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--secondary-400), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.ocean-nav-link:hover::after,
.ocean-nav-link.active::after {
  opacity: 1;
}

/* Form Elements */
.ocean-input {
  background: var(--dark-surface);
  border: 2px solid var(--dark-border);
  border-radius: 4px;
  padding: 10px 16px;
  color: #E6F0F3;
  transition: all 0.3s;
  font-family: 'JetBrains Mono', monospace;
}

.ocean-input:focus {
  outline: none;
  border-color: var(--secondary-500);
  box-shadow: 
    0 0 0 3px rgba(0, 217, 163, 0.2),
    inset 0 0 0 1px rgba(0, 217, 163, 0.1);
}

.ocean-input::placeholder {
  color: #6B7C87;
}

/* Animations */
@keyframes wave {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-4px); }
  75% { transform: translateY(2px); }
}

@keyframes bubble {
  0% { 
    transform: translateY(100vh) scale(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  100% { 
    transform: translateY(-100vh) scale(1) rotate(360deg);
    opacity: 0;
  }
}

@keyframes pixelFade {
  0% { 
    opacity: 0;
    filter: blur(8px) brightness(0.8);
  }
  50% {
    filter: blur(4px) brightness(1.2);
  }
  100% { 
    opacity: 1;
    filter: blur(0) brightness(1);
  }
}

/* Pixel Grid Background */
.pixel-grid-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.05;
  background-image: 
    repeating-linear-gradient(
      0deg,
      var(--primary-500) 0,
      transparent 1px,
      transparent 7px,
      var(--primary-500) 8px
    ),
    repeating-linear-gradient(
      90deg,
      var(--primary-500) 0,
      transparent 1px,
      transparent 7px,
      var(--primary-500) 8px
    );
  z-index: -1;
}

/* Bubble Effect */
.bubble {
  position: fixed;
  bottom: -100px;
  background: radial-gradient(circle, rgba(0, 217, 163, 0.4), transparent);
  border-radius: 50%;
  pointer-events: none;
  animation: bubble 10s infinite;
}

.bubble:nth-child(1) {
  width: 40px;
  height: 40px;
  left: 10%;
  animation-duration: 8s;
  animation-delay: 0s;
}

.bubble:nth-child(2) {
  width: 60px;
  height: 60px;
  left: 30%;
  animation-duration: 12s;
  animation-delay: 2s;
}

.bubble:nth-child(3) {
  width: 30px;
  height: 30px;
  left: 50%;
  animation-duration: 10s;
  animation-delay: 4s;
}

.bubble:nth-child(4) {
  width: 50px;
  height: 50px;
  left: 70%;
  animation-duration: 14s;
  animation-delay: 1s;
}

.bubble:nth-child(5) {
  width: 35px;
  height: 35px;
  left: 90%;
  animation-duration: 9s;
  animation-delay: 3s;
}

/* Loading Animation */
.ocean-loader {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.ocean-loader div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--secondary-500);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.ocean-loader div:nth-child(1) {
  left: 8px;
  animation: ocean-loader1 0.6s infinite;
}

.ocean-loader div:nth-child(2) {
  left: 8px;
  animation: ocean-loader2 0.6s infinite;
}

.ocean-loader div:nth-child(3) {
  left: 32px;
  animation: ocean-loader2 0.6s infinite;
}

.ocean-loader div:nth-child(4) {
  left: 56px;
  animation: ocean-loader3 0.6s infinite;
}

@keyframes ocean-loader1 {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

@keyframes ocean-loader3 {
  0% { transform: scale(1); }
  100% { transform: scale(0); }
}

@keyframes ocean-loader2 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(24px, 0); }
}

/* Ocean Alert Messages */
.ocean-alert {
  background: var(--dark-surface);
  border: 2px solid var(--dark-border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  animation: pixelFade 0.3s ease-out;
}

.ocean-alert-success {
  border-color: var(--secondary-500);
  background: linear-gradient(135deg, rgba(0, 217, 163, 0.1), transparent);
}

.ocean-alert-error {
  border-color: var(--accent-500);
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.1), transparent);
}

/* Ocean Footer */
.ocean-footer {
  background: rgba(13, 17, 23, 0.98);
  border-top: 2px solid var(--dark-border);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5);
}

.ocean-footer-link {
  color: var(--secondary-400);
  transition: color 0.3s;
}

.ocean-footer-link:hover {
  color: var(--secondary-300);
}

/* Pixel Icons */
.pixel-icon {
  display: inline-block;
  margin-right: 4px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}

/* Pixel Title */
.pixel-title {
  font-family: 'Press Start 2P', monospace;
  color: var(--secondary-400);
  text-shadow: 
    1px 1px 0 rgba(0, 153, 176, 0.5),
    2px 2px 0 rgba(0, 153, 176, 0.3);
  letter-spacing: 1px;
  line-height: 1;
  font-size: 1rem !important;
  display: inline-flex;
  align-items: center;
}

/* Pixel Logo */
.pixel-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Compact Ocean Buttons */
.ocean-compact-btn {
  padding: 8px 12px;
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  border-radius: 4px;
  color: #B0C4CE;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  white-space: nowrap;
  letter-spacing: 0.3px;
  margin: 0;
  cursor: pointer;
}

/* Fix for button_to forms */
form.inline-block,
form.button_to {
  display: inline-block;
  margin: 0;
  padding: 0;
}

/* Ensure button inside form has no extra styles */
form button.ocean-compact-btn {
  border: 1px solid var(--dark-border);
  background: var(--dark-surface) !important;
  color: #B0C4CE !important;
}

/* Logout button specific styling */
form[action*="/logout"] button.ocean-compact-btn,
button.ocean-compact-btn[type="submit"] {
  background: linear-gradient(135deg, #2a3947 0%, #1a2937 100%) !important;
  border: 1px solid var(--dark-border) !important;
  color: #B0C4CE !important;
}

form[action*="/logout"] button.ocean-compact-btn:hover,
button.ocean-compact-btn[type="submit"]:hover {
  background: linear-gradient(135deg, #3a4957 0%, #2a3947 100%) !important;
  border-color: var(--secondary-500) !important;
  color: var(--secondary-400) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 217, 163, 0.2) !important;
}

.ocean-compact-btn:hover {
  background: var(--dark-surface-2);
  border-color: var(--secondary-500);
  color: var(--secondary-400);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.ocean-compact-btn-primary {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-800));
  border-color: var(--primary-500);
  color: white;
}

.ocean-compact-btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  border-color: var(--primary-400);
  color: white;
}

/* Experience Bar */
.exp-bar {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  border-radius: 10px;
  height: 14px;
  position: relative;
  overflow: hidden;
  align-self: center;
}

.exp-bar-fill {
  background: linear-gradient(90deg, var(--primary-500), var(--secondary-500));
  height: 100%;
  border-radius: 8px;
  position: relative;
  transition: width 0.5s ease;
  box-shadow: 0 0 6px rgba(0, 217, 163, 0.4);
}

.exp-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  border-radius: 8px;
}

/* Badge System */
.pixel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: var(--dark-surface);
  border: 1px solid var(--accent-500);
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 
    1px 1px 0 rgba(255, 149, 0, 0.3),
    inset 0 0 0 1px rgba(255, 149, 0, 0.1);
  height: 22px;
  margin: 0;
}

/* Glitch Effect for Errors */
@keyframes glitch {
  0%, 100% { 
    text-shadow: 
      2px 0 #ff0000,
      -2px 0 #00ffff;
  }
  25% { 
    text-shadow: 
      -2px 0 #ff0000,
      2px 0 #00ffff;
  }
  50% { 
    text-shadow: 
      2px 0 #00ffff,
      -2px 0 #ff0000;
  }
  75% { 
    text-shadow: 
      -2px 0 #00ffff,
      2px 0 #ff0000;
  }
}

.glitch-text {
  animation: glitch 0.3s infinite;
}

/* Terminal Style Text */
.terminal-text {
  font-family: 'JetBrains Mono', monospace;
  color: var(--secondary-400);
  position: relative;
  font-size: 0.75rem;
}

.terminal-text::after {
  content: '_';
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Override Tailwind Classes for Ocean Theme */
.bg-white {
  background-color: var(--dark-surface) !important;
}

.bg-gray-50 {
  background-color: var(--dark-bg) !important;
}

.bg-gray-100 {
  background-color: var(--dark-surface-2) !important;
}

.border-gray-200 {
  border-color: var(--dark-border) !important;
}

.border-gray-300 {
  border-color: var(--dark-border) !important;
}

.text-gray-900 {
  color: var(--secondary-400) !important;
}

.text-gray-800 {
  color: var(--secondary-300) !important;
}

.text-gray-700 {
  color: #B0C4CE !important;
}

.text-gray-600 {
  color: #8B9CAA !important;
}

.text-gray-500 {
  color: #6B7C87 !important;
}

.text-gray-400 {
  color: #556571 !important;
}

/* Ocean Article Cards */
article {
  background: var(--dark-surface) !important;
  border: 2px solid var(--dark-border) !important;
  border-radius: 8px;
  position: relative;
  transition: all 0.3s;
  overflow: hidden;
}

article::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-400), var(--secondary-400), var(--accent-400));
  transform: translateX(-100%);
  transition: transform 0.5s;
}

article:hover::before {
  transform: translateX(0);
}

article:hover {
  border-color: var(--primary-600);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 16px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(0, 153, 176, 0.2);
}

/* Ocean Sections */
.rounded-lg,
.rounded-md {
  background: var(--dark-surface) !important;
  border: 2px solid var(--dark-border) !important;
  position: relative;
}

/* Ocean Tab Buttons */
.text-indigo-600.bg-indigo-50 {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700)) !important;
  color: white !important;
  border: 2px solid var(--primary-400) !important;
  box-shadow: 
    3px 3px 0 rgba(0, 153, 176, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.hover\:bg-gray-50:hover {
  background: var(--dark-surface-2) !important;
  border-color: var(--primary-600) !important;
  color: var(--secondary-400) !important;
}

/* Ocean Links */
a {
  color: var(--secondary-400);
  text-decoration: none;
  transition: all 0.3s;
  position: relative;
}

a:hover {
  color: var(--secondary-300);
  text-shadow: 0 0 8px rgba(0, 217, 163, 0.5);
}

/* Post Titles and Important Links */
.text-lg.font-medium.text-gray-900,
.text-base.font-semibold.text-gray-900,
h4.text-lg.font-medium.text-gray-900,
article a h3,
article a .text-base {
  color: var(--secondary-400) !important;
  transition: all 0.3s;
}

.text-lg.font-medium.text-gray-900:hover,
.text-base.font-semibold.text-gray-900:hover,
h4.text-lg.font-medium.text-gray-900:hover,
article:hover a h3,
article:hover a .text-base {
  color: var(--secondary-300) !important;
  text-shadow: 0 0 8px rgba(0, 217, 163, 0.5);
}

/* Ocean Tables */
table {
  background: var(--dark-surface);
  border: 2px solid var(--dark-border);
  border-radius: 8px;
  overflow: hidden;
}

thead {
  background: var(--dark-surface-2);
  border-bottom: 2px solid var(--dark-border);
}

thead th {
  color: var(--secondary-400);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px;
}

tbody tr {
  border-bottom: 1px solid var(--dark-border);
  transition: all 0.3s;
}

tbody tr:hover {
  background: rgba(0, 153, 176, 0.1) !important;
}

tbody td {
  padding: 12px;
  color: #B0C4CE;
}

/* Ocean Forms */
form {
  background: transparent;
}

/* Ocean Lists */
ul li,
ol li {
  color: #B0C4CE;
}

/* Ocean Headings with Pixel Style */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Press Start 2P', monospace;
  text-shadow: 2px 2px 0 rgba(0, 153, 176, 0.3);
}

/* Ocean Content Sections */
.ocean-content {
  min-height: calc(100vh - 200px);
  position: relative;
}

/* Pixel Decorations */
.pixel-decoration {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--secondary-500);
  opacity: 0.3;
}

.pixel-decoration::before,
.pixel-decoration::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--secondary-500);
}

.pixel-decoration::before {
  top: -8px;
  left: 8px;
}

.pixel-decoration::after {
  top: 8px;
  left: -8px;
}

/* Ocean Dropdown Menu */
.dropdown-menu,
[id^="er-diagram-dropdown-"],
[id^="interface-definition-dropdown-"],
[id^="post-dropdown-"],
[id^="project-dropdown-"],
[id^="meeting-record-dropdown-"],
[id*="dropdown"] {
  background: var(--dark-surface) !important;
  border: 2px solid var(--primary-500) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 153, 176, 0.3), 
              0 0 20px rgba(0, 217, 163, 0.2) !important;
  overflow: hidden !important;
}

.dropdown-menu a,
[id^="er-diagram-dropdown-"] a,
[id^="interface-definition-dropdown-"] a,
[id^="post-dropdown-"] a,
[id^="project-dropdown-"] a,
[id^="meeting-record-dropdown-"] a,
[id*="dropdown"] a,
.dropdown-menu button,
[id^="er-diagram-dropdown-"] button,
[id^="interface-definition-dropdown-"] button,
[id^="post-dropdown-"] button,
[id^="project-dropdown-"] button,
[id^="meeting-record-dropdown-"] button,
[id*="dropdown"] button {
  display: block !important;
  width: 100% !important;
  padding: 10px 16px !important;
  background: transparent !important;
  color: var(--gray-300) !important;
  text-align: left !important;
  border: none !important;
  transition: all 0.2s ease !important;
  font-family: 'Pretendard', system-ui, sans-serif !important;
}

.dropdown-menu a:hover,
[id*="dropdown"] a:hover,
.dropdown-menu button:hover,
[id*="dropdown"] button:hover {
  background: var(--primary-500) !important;
  color: white !important;
  padding-left: 20px !important;
  box-shadow: inset 4px 0 0 var(--secondary-500) !important;
}

/* Delete button special styling */
.dropdown-menu button[onclick*="delete"],
[id*="dropdown"] button[onclick*="delete"],
.text-red-700 {
  color: #ff6b6b !important;
}

.dropdown-menu button[onclick*="delete"]:hover,
[id*="dropdown"] button[onclick*="delete"]:hover,
.text-red-700:hover {
  background: #dc2626 !important;
  color: white !important;
}

/* Ocean Dropdown Select */
select {
  background: var(--dark-surface) !important;
  border: 2px solid var(--dark-border) !important;
  color: #B0C4CE !important;
  padding: 8px 32px 8px 12px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300D9A3'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 20px !important;
}

select:focus {
  border-color: var(--secondary-500) !important;
  box-shadow: 0 0 0 3px rgba(0, 217, 163, 0.2) !important;
}

/* Ocean Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--dark-surface);
  border: 2px solid var(--dark-border);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: linear-gradient(135deg, var(--secondary-500), var(--secondary-700));
  border-color: var(--secondary-400);
}

input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  font-weight: bold;
}

input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
}

/* Ocean Pagination */
.pagination {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pagination a,
.pagination span,
nav.pagination a,
nav.pagination span {
  padding: 8px 12px;
  background: var(--dark-surface) !important;
  border: 2px solid var(--dark-border) !important;
  border-radius: 4px !important;
  color: #B0C4CE !important;
  text-decoration: none !important;
  transition: all 0.3s;
}

.pagination a:hover,
nav.pagination a:hover {
  background: var(--dark-surface-2) !important;
  border-color: var(--secondary-500) !important;
  color: var(--secondary-400) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.pagination .current,
nav.pagination span.current {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700)) !important;
  border-color: var(--primary-400) !important;
  color: white !important;
  box-shadow: 0 0 10px rgba(0, 153, 176, 0.3);
}

/* Kaminari specific styles */
nav.pagination span.page.current {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700)) !important;
  border-color: var(--primary-400) !important;
  color: white !important;
}

nav.pagination .page a,
nav.pagination .first a,
nav.pagination .prev a,
nav.pagination .next a,
nav.pagination .last a {
  background: var(--dark-surface) !important;
  border: 2px solid var(--dark-border) !important;
  color: var(--secondary-400) !important;
}

nav.pagination .page a:hover,
nav.pagination .first a:hover,
nav.pagination .prev a:hover,
nav.pagination .next a:hover,
nav.pagination .last a:hover {
  background: rgba(0, 217, 163, 0.1) !important;
  border-color: var(--secondary-500) !important;
  color: var(--secondary-300) !important;
}

nav.pagination span.gap {
  background: transparent !important;
  border: none !important;
  color: #556571 !important;
}

/* Meeting Records Specific Styles */
.bg-indigo-100.text-indigo-800 {
  background: linear-gradient(135deg, rgba(0, 153, 176, 0.2), rgba(0, 153, 176, 0.1)) !important;
  color: var(--primary-400) !important;
  border: 1px solid var(--primary-600) !important;
}

.bg-gray-100.text-gray-600 {
  background: rgba(0, 217, 163, 0.15) !important;
  color: var(--secondary-400) !important;
  border: 1px solid var(--secondary-700) !important;
}

/* Search Results Count */
.text-gray-900 {
  color: var(--secondary-400) !important;
}

/* Button Styles Override */
.bg-indigo-600.hover\:bg-indigo-700 {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700)) !important;
  border: 2px solid var(--primary-400) !important;
  color: white !important;
  box-shadow: 2px 2px 0 rgba(0, 153, 176, 0.3) !important;
  transition: all 0.2s;
}

.bg-indigo-600.hover\:bg-indigo-700:hover {
  background: linear-gradient(135deg, var(--primary-400), var(--primary-600)) !important;
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 rgba(0, 153, 176, 0.4) !important;
}

.border-gray-300.hover\:bg-gray-50 {
  background: var(--dark-surface) !important;
  border: 2px solid var(--dark-border) !important;
  color: var(--secondary-400) !important;
}

.border-gray-300.hover\:bg-gray-50:hover {
  background: var(--dark-surface-2) !important;
  border-color: var(--secondary-500) !important;
  color: var(--secondary-300) !important;
}

/* Posts & Improvements List Styles */
.max-w-7xl.mx-auto .bg-white.shadow {
  background: var(--dark-surface) !important;
  border: 2px solid var(--dark-border) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

/* List Items */
.divide-y.divide-gray-200 {
  border-color: var(--dark-border) !important;
}

.divide-y.divide-gray-200 > li {
  border-color: var(--dark-border) !important;
  transition: all 0.3s;
  position: relative;
}

.divide-y.divide-gray-200 > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary-500), var(--secondary-500));
  opacity: 0;
  transition: opacity 0.3s;
}

.divide-y.divide-gray-200 > li:hover::before {
  opacity: 1;
}

.divide-y.divide-gray-200 > li a {
  display: block !important;
}

.divide-y.divide-gray-200 > li:hover {
  background: rgba(0, 153, 176, 0.05) !important;
}

/* Post/Improvement Title */
.text-lg.font-medium.text-indigo-600 {
  color: var(--secondary-400) !important;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  transition: all 0.3s;
}

.text-lg.font-medium.text-indigo-600:hover {
  color: var(--secondary-300) !important;
  text-shadow: 0 0 8px rgba(0, 217, 163, 0.5);
}

/* Category Badges */
.bg-gray-100.text-gray-800 {
  background: rgba(107, 124, 135, 0.15) !important;
  color: #8B9CAA !important;
  border: 1px solid var(--dark-border) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.bg-blue-100.text-blue-800 {
  background: rgba(0, 153, 176, 0.15) !important;
  color: var(--primary-400) !important;
  border: 1px solid var(--primary-700) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.bg-red-100.text-red-800 {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #EF4444 !important;
  border: 1px solid #991B1B !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.bg-green-100.text-green-800 {
  background: rgba(0, 217, 163, 0.15) !important;
  color: var(--secondary-400) !important;
  border: 1px solid var(--secondary-700) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.bg-yellow-100.text-yellow-800 {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #F59E0B !important;
  border: 1px solid #92400E !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.bg-orange-100.text-orange-700 {
  background: rgba(255, 149, 0, 0.15) !important;
  color: var(--accent-500) !important;
  border: 1px solid var(--accent-700) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Filter Buttons */
.text-gray-700.hover\:bg-gray-100 {
  color: #B0C4CE !important;
  background: var(--dark-surface) !important;
  border: 1px solid var(--dark-border) !important;
  transition: all 0.2s;
}

.text-gray-700.hover\:bg-gray-100:hover {
  background: rgba(0, 217, 163, 0.1) !important;
  border-color: var(--secondary-500) !important;
  color: var(--secondary-400) !important;
}

/* Active Filter */
.bg-indigo-100.text-indigo-700,
.bg-green-100.text-green-700 {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700)) !important;
  color: white !important;
  border: 2px solid var(--primary-400) !important;
  box-shadow: 0 0 10px rgba(0, 153, 176, 0.3) !important;
}

/* Meta Information */
.flex.items-center.text-sm.text-gray-500 {
  color: #6B7C87 !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
}

.flex.items-center.text-sm.text-gray-500 svg {
  color: var(--primary-600) !important;
  opacity: 0.7;
}

/* Page Headers */
.text-3xl.font-bold.text-gray-900 {
  font-family: 'Press Start 2P', monospace !important;
  color: var(--secondary-400) !important;
  text-shadow: 2px 2px 0 rgba(0, 153, 176, 0.3);
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}

/* Ocean Divider */
hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dark-border), transparent);
  margin: 24px 0;
}

/* Comment Submit Button - More specific selector to avoid affecting header buttons */
form:not(.button_to) button[type="submit"],
form:not(.button_to) input[type="submit"],
.comment-form button[type="submit"],
.post-form button[type="submit"],
.improvement-form button[type="submit"] {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700)) !important;
  color: white !important;
  padding: 10px 20px;
  border: 2px solid var(--primary-400) !important;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 
    2px 2px 0 rgba(0, 153, 176, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.2s;
  cursor: pointer;
}

form:not(.button_to) button[type="submit"]:hover,
form:not(.button_to) input[type="submit"]:hover,
.comment-form button[type="submit"]:hover,
.post-form button[type="submit"]:hover,
.improvement-form button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--primary-400), var(--primary-600)) !important;
  transform: translateY(-1px);
  box-shadow: 
    3px 3px 0 rgba(0, 153, 176, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Ocean Scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary-600), var(--primary-800));
  border-radius: 6px;
  border: 1px solid var(--dark-border);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--primary-500), var(--primary-700));
}

/* Ocean Code Blocks */
pre, code {
  background: var(--dark-surface) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--secondary-400) !important;
  font-family: 'JetBrains Mono', monospace !important;
  padding: 2px 6px;
  border-radius: 4px;
}

pre {
  padding: 16px !important;
  overflow-x: auto;
}

/* ActionText Editor */
trix-editor {
  background: var(--dark-surface) !important;
  border: 2px solid var(--dark-border) !important;
  color: #E6F0F3 !important;
  min-height: 200px;
  padding: 12px !important;
  border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Trix placeholder text */
trix-editor:empty:not(:focus)::before {
  color: rgba(176, 196, 206, 0.5) !important;
}

/* Enhanced Bold Effect in Trix Editor */
trix-editor strong,
trix-editor b,
trix-editor [style*="font-weight: bold"],
.trix-content strong,
.trix-content b {
  font-weight: 900 !important;
  color: #FFFFFF !important;
  text-shadow: 0 0 2px rgba(0, 217, 163, 0.5) !important;
  letter-spacing: 0.5px !important;
}

/* Italic text styling */
trix-editor em,
trix-editor i,
.trix-content em,
.trix-content i {
  font-style: italic !important;
  color: var(--secondary-400) !important;
}

/* Strike-through text */
trix-editor del,
trix-editor s,
.trix-content del,
.trix-content s {
  text-decoration: line-through !important;
  opacity: 0.7 !important;
  color: #8B9BA3 !important;
}

trix-editor:focus {
  outline: none;
  border-color: var(--secondary-500) !important;
  box-shadow: 
    0 0 0 3px rgba(0, 217, 163, 0.2),
    inset 0 0 0 1px rgba(0, 217, 163, 0.1) !important;
}

trix-toolbar {
  background: var(--dark-surface-2) !important;
  border: 2px solid var(--dark-border) !important;
  border-bottom: none !important;
  border-radius: 4px 4px 0 0;
}

trix-toolbar .trix-button,
trix-toolbar .trix-button.trix-button--icon {
  background: #3A4A54 !important;
  border: 1px solid var(--dark-border) !important;
  color: #E6F0F3 !important;
  /* Lighter background and higher contrast for better visibility */
  filter: invert(0.8) contrast(1.5) !important;
  opacity: 1 !important;
}

trix-toolbar .trix-button:hover,
trix-toolbar .trix-button--icon:hover {
  background: rgba(0, 217, 163, 0.2) !important;
  border-color: var(--secondary-500) !important;
  color: var(--secondary-400) !important;
  filter: invert(0.9) contrast(1.5) !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 1px var(--secondary-500) inset !important;
}

trix-toolbar .trix-button.trix-active,
trix-toolbar .trix-button--icon.trix-active {
  background: linear-gradient(135deg, #FF6B6B, #FF8E53) !important;
  border-color: #FF6B6B !important;
  color: white !important;
  filter: invert(1) contrast(2) !important;
  opacity: 1 !important;
  box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3) !important;
}

/* Trix dialog inputs */
.trix-dialog input[type="url"],
.trix-dialog input[type="button"] {
  background: var(--dark-surface) !important;
  color: #B0C4CE !important;
  border: 1px solid var(--dark-border) !important;
}

.trix-dialog input[type="button"]:hover {
  background: rgba(0, 217, 163, 0.1) !important;
  border-color: var(--secondary-500) !important;
  color: var(--secondary-400) !important;
}

/* ERDiagram Styles */
#diagramCanvas,
.diagram-canvas,
canvas {
  background: var(--dark-surface) !important;
  border: 2px solid var(--dark-border) !important;
  border-radius: 4px;
}

#diagramPreview {
  background: var(--dark-surface) !important;
  border: 2px solid var(--dark-border) !important;
  border-radius: 4px;
  padding: 20px;
}

/* ERDiagram Entity Boxes */
.entity-box {
  fill: var(--dark-surface-2) !important;
  stroke: var(--primary-500) !important;
  stroke-width: 2;
}

.entity-text {
  fill: var(--secondary-400) !important;
  font-family: 'JetBrains Mono', monospace;
}

.relationship-line {
  stroke: var(--primary-400) !important;
  stroke-width: 2;
}

/* Chen Notation Elements */
.chen-entity {
  fill: rgba(0, 153, 176, 0.1) !important;
  stroke: var(--primary-500) !important;
  stroke-width: 2;
}

.chen-attribute {
  fill: rgba(0, 217, 163, 0.1) !important;
  stroke: var(--secondary-500) !important;
  stroke-width: 2;
}

.chen-relationship {
  fill: rgba(255, 149, 0, 0.1) !important;
  stroke: var(--accent-500) !important;
  stroke-width: 2;
}

/* Posting Rules Section - Ocean Theme */
.posting-rules,
div[class*="bg-white"][class*="rounded-lg"] h3:has(+ ol) {
  background: var(--dark-surface-2) !important;
  border: 2px solid var(--dark-border) !important;
}

/* Rule list styling */
ol:has(li span.text-blue-500) {
  color: #B0C4CE !important;
}

ol li span.text-blue-500 {
  color: var(--secondary-500) !important;
  text-shadow: 0 0 10px rgba(0, 217, 163, 0.5) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* Post form background */
form#reddit-post-form .bg-gray-50 {
  background: transparent !important;
}

form#reddit-post-form .bg-white {
  background: var(--dark-surface) !important;
  border: 2px solid var(--dark-border) !important;
}

form#reddit-post-form h3 {
  color: var(--secondary-400) !important;
}

form#reddit-post-form .text-gray-600,
form#reddit-post-form .text-gray-700 {
  color: #B0C4CE !important;
}

/* Green checkmark icon to ocean theme */
form#reddit-post-form svg.text-green-500 {
  color: var(--secondary-500) !important;
}

/* File Add Button - Ocean Theme */
#add-file-btn,
button.text-blue-600,
button[class*="text-blue"] {
  color: var(--secondary-400) !important;
  background: transparent !important;
  border: none !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-shadow: 0 0 10px rgba(0, 217, 163, 0.3) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

#add-file-btn:hover,
button.text-blue-600:hover,
button[class*="text-blue"]:hover {
  color: var(--secondary-300) !important;
  text-shadow: 0 0 15px rgba(0, 217, 163, 0.5) !important;
  transform: translateY(-1px) !important;
}

/* File attachment section styling */
form#reddit-post-form .bg-white:has(#add-file-btn) {
  background: var(--dark-surface) !important;
  border: 2px solid var(--dark-border) !important;
}

form#reddit-post-form h3:has(+ #add-file-btn),
form#reddit-post-form h3.text-gray-700 {
  color: #B0C4CE !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
}

/* ERDiagram Editor Page - Ocean Theme */
.er-diagram-container {
  background: transparent !important;
}

/* ERD Page Headers */
.er-diagram-container h1,
h1:has(+ p:contains("데이터베이스")) {
  color: var(--secondary-400) !important;
  font-family: 'Press Start 2P', cursive !important;
  font-size: 24px !important;
  text-shadow: 0 0 20px rgba(0, 217, 163, 0.5) !important;
}

.er-diagram-container p,
p:contains("데이터베이스") {
  color: #B0C4CE !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* ERD Form Sections */
div.bg-white:has(h3:contains("기본 정보")),
div.bg-white:has(h3:contains("ERD 편집기")) {
  background: var(--dark-surface) !important;
  border: 2px solid var(--dark-border) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Section Headers */
h3.text-gray-900,
h4.font-medium.text-gray-900 {
  color: var(--secondary-400) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
}

/* Labels */
label.text-gray-700,
label.block.text-sm {
  color: #B0C4CE !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
}

/* Input Fields */
input[type="text"].border-gray-300,
textarea.border-gray-300,
select.border-gray-300 {
  background: var(--dark-surface-2) !important;
  border: 1px solid var(--dark-border) !important;
  color: #E6F0F3 !important;
  font-family: 'JetBrains Mono', monospace !important;
}

input[type="text"].border-gray-300:focus,
textarea.border-gray-300:focus,
select.border-gray-300:focus {
  border-color: var(--secondary-500) !important;
  box-shadow: 0 0 0 3px rgba(0, 217, 163, 0.2) !important;
  outline: none !important;
}

/* Checkboxes */
input[type="checkbox"].border-gray-300 {
  background: var(--dark-surface-2) !important;
  border: 1px solid var(--dark-border) !important;
}

input[type="checkbox"].border-gray-300:checked {
  background: var(--secondary-500) !important;
  border-color: var(--secondary-500) !important;
}

/* ERD Editor Buttons */
button.border-indigo-300,
button.border-green-300,
button.border-blue-300 {
  background: var(--dark-surface-2) !important;
  border: 2px solid var(--secondary-500) !important;
  color: var(--secondary-400) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-shadow: 0 0 5px rgba(0, 217, 163, 0.3) !important;
  transition: all 0.3s ease !important;
}

button.border-indigo-300:hover,
button.border-green-300:hover,
button.border-blue-300:hover {
  background: rgba(0, 217, 163, 0.1) !important;
  border-color: var(--secondary-300) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 217, 163, 0.3) !important;
}

/* Cancel Buttons */
button.border-gray-300,
a.border-gray-300 {
  background: var(--dark-surface-2) !important;
  border: 2px solid #4A5A64 !important;
  color: #8B9BA3 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
}

button.border-gray-300:hover,
a.border-gray-300:hover {
  background: rgba(74, 90, 100, 0.2) !important;
  border-color: #5A6A74 !important;
}

/* Table and Relationship Lists */
div.border.rounded-lg.p-4:has(h4:contains("테이블")),
div.border.rounded-lg.p-4:has(h4:contains("관계")) {
  background: var(--dark-surface-2) !important;
  border: 2px solid var(--dark-border) !important;
}

/* Canvas Area */
div.bg-gray-50:has(h4:contains("다이어그램")) {
  background: var(--dark-surface-2) !important;
  border: 2px solid var(--dark-border) !important;
}

/* Canvas Background */
div[data-er-diagram-editor-target="canvas"] {
  background: #1A2530 !important;
  border: 2px solid var(--secondary-500) !important;
  box-shadow: inset 0 0 20px rgba(0, 217, 163, 0.1) !important;
}

/* Zoom Controls */
div.bg-gray-100.rounded-lg {
  background: var(--dark-surface) !important;
  border: 1px solid var(--dark-border) !important;
}

div.bg-gray-100.rounded-lg button {
  background: var(--dark-surface-2) !important;
  color: var(--secondary-400) !important;
  border: none !important;
}

div.bg-gray-100.rounded-lg button:hover {
  background: rgba(0, 217, 163, 0.1) !important;
}

/* Modal Backgrounds */
div.bg-white.rounded-2xl,
div.rounded-md.bg-white {
  background: var(--dark-surface) !important;
  border: 2px solid var(--dark-border) !important;
}

/* Fix Modal Position - Move down to avoid header and make wider */
div[data-er-diagram-editor-target="tableForm"] > div.relative {
  top: 80px !important;
  margin-top: 20px !important;
  max-width: 1000px !important;
  width: 90% !important;
}

/* Modal Headers with Gradient */
div.bg-gradient-to-r.from-indigo-600.to-purple-600 {
  background: linear-gradient(135deg, var(--primary-500), var(--secondary-500)) !important;
}

/* Field Headers */
div.bg-gray-50.rounded-t-lg {
  background: var(--dark-surface-2) !important;
  border: 1px solid var(--dark-border) !important;
}

/* Field Header Labels - Align with input fields */
div.bg-gray-50.rounded-t-lg {
  padding: 12px 20px !important;
}

div.bg-gray-50.rounded-t-lg .flex {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

/* Match header columns with field row layout */
div.bg-gray-50.rounded-t-lg .flex > div:first-child {
  flex: 1 !important;
  color: #B0C4CE !important;
  font-family: 'JetBrains Mono', monospace !important;
}

div.bg-gray-50.rounded-t-lg .flex > div:nth-child(2) {
  width: 112px !important;
  color: #B0C4CE !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* PK header */
div.bg-gray-50.rounded-t-lg .flex > div:nth-child(3) {
  width: 48px !important;
  text-align: center !important;
  color: #FFD700 !important;
  font-weight: bold !important;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5) !important;
}

/* FK header */
div.bg-gray-50.rounded-t-lg .flex > div:nth-child(4) {
  width: 48px !important;
  text-align: center !important;
  color: var(--primary-400) !important;
  font-weight: bold !important;
  text-shadow: 0 0 5px rgba(0, 153, 176, 0.5) !important;
}

/* NULL header */
div.bg-gray-50.rounded-t-lg .flex > div:nth-child(5) {
  width: 48px !important;
  text-align: center !important;
  color: #8B9BA3 !important;
  font-weight: bold !important;
}

/* Empty space for delete button column */
div.bg-gray-50.rounded-t-lg .flex > div:nth-child(6) {
  width: 64px !important;
}

/* Field Container */
#tableFields {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

/* Field Row Spacing - Apply to all div children in tableFields */
#tableFields > div,
#tableFields .field-row,
.field-row,
div[id^="field-"] {
  padding: 12px 20px !important;
  margin-bottom: 12px !important;
  background: rgba(26, 37, 48, 0.7) !important;
  border: 1px solid rgba(74, 90, 100, 0.5) !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#tableFields > div:hover,
#tableFields .field-row:hover,
.field-row:hover,
div[id^="field-"]:hover {
  background: rgba(0, 217, 163, 0.08) !important;
  border-color: rgba(0, 217, 163, 0.3) !important;
  box-shadow: 0 2px 8px rgba(0, 217, 163, 0.2) !important;
}

/* Field Row Checkboxes - Ocean Theme Styling - FORCE ALL CHECKBOXES */
#tableFields input[type="checkbox"],
.field-row input[type="checkbox"],
div[data-er-diagram-editor-target="tableForm"] input[type="checkbox"],
input[type="checkbox"].field-pk,
input[type="checkbox"].field-fk,
input[type="checkbox"].field-null,
input.field-pk,
input.field-fk,
input.field-null {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  background: #3A5060 !important;
  border: 2px solid #00D9A3 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 217, 163, 0.3) !important;
  flex-shrink: 0 !important;
  margin: 0 8px !important;
}

#tableFields input[type="checkbox"]:hover,
.field-row input[type="checkbox"]:hover,
div[data-er-diagram-editor-target="tableForm"] input[type="checkbox"]:hover {
  background: #4A6070 !important;
  border-color: #00FFB3 !important;
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(0, 217, 163, 0.6) !important;
  transform: scale(1.1) !important;
}

#tableFields input[type="checkbox"]:checked,
.field-row input[type="checkbox"]:checked,
div[data-er-diagram-editor-target="tableForm"] input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #00D9A3, #00B388) !important;
  border-color: #00FFB3 !important;
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(0, 217, 163, 0.8) !important;
}

#tableFields input[type="checkbox"]:checked::after,
.field-row input[type="checkbox"]:checked::after,
div[data-er-diagram-editor-target="tableForm"] input[type="checkbox"]:checked::after {
  content: '✓' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #FFFFFF !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* PK Checkbox Special Styling */
input[type="checkbox"].field-pk:checked,
#tableFields .field-pk:checked,
#tableFields input[type="checkbox"]:nth-of-type(1):checked {
  background: linear-gradient(135deg, #FFD700, #FFA500) !important;
  border-color: #FFD700 !important;
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    0 0 15px rgba(255, 215, 0, 0.5) !important;
}

/* FK Checkbox Special Styling */
input[type="checkbox"].field-fk:checked,
#tableFields .field-fk:checked,
#tableFields input[type="checkbox"]:nth-of-type(2):checked {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700)) !important;
  border-color: var(--primary-500) !important;
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    0 0 15px rgba(0, 153, 176, 0.5) !important;
}

/* NULL Checkbox Special Styling */
input[type="checkbox"].field-null:checked,
#tableFields .field-null:checked,
#tableFields input[type="checkbox"]:nth-of-type(3):checked {
  background: linear-gradient(135deg, #6A7A84, #4A5A64) !important;
  border-color: #7A8A94 !important;
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    0 0 10px rgba(122, 138, 148, 0.3) !important;
}

/* Field input styling with better spacing */
#tableFields input[type="text"],
.field-row input[type="text"] {
  background: var(--dark-surface-2) !important;
  border: 1px solid var(--dark-border) !important;
  color: #E6F0F3 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
  flex: 1 !important;
  min-width: 150px !important;
}

#tableFields input[type="text"]:focus,
.field-row input[type="text"]:focus {
  border-color: var(--secondary-500) !important;
  box-shadow: 0 0 0 2px rgba(0, 217, 163, 0.2) !important;
  outline: none !important;
}

#tableFields select,
.field-row select {
  background: var(--dark-surface-2) !important;
  border: 1px solid var(--dark-border) !important;
  color: #E6F0F3 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
  min-width: 120px !important;
}

#tableFields select:focus,
.field-row select:focus {
  border-color: var(--secondary-500) !important;
  box-shadow: 0 0 0 2px rgba(0, 217, 163, 0.2) !important;
  outline: none !important;
}

/* Delete button in field rows */
#tableFields button.text-red-500,
#tableFields button[onclick*="removeField"],
.field-row button.text-red-500,
button.remove-field-btn {
  color: #FF6B6B !important;
  background: rgba(255, 107, 107, 0.1) !important;
  border: 1px solid rgba(255, 107, 107, 0.3) !important;
  border-radius: 4px !important;
  padding: 6px 8px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

#tableFields button.text-red-500:hover,
#tableFields button[onclick*="removeField"]:hover,
.field-row button.text-red-500:hover,
button.remove-field-btn:hover {
  color: white !important;
  background: rgba(255, 107, 107, 0.8) !important;
  border-color: #FF6B6B !important;
  transform: scale(1.05) !important;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4) !important;
}

/* Ensure all form elements in field rows are visible */
#tableFields input,
#tableFields select,
#tableFields button {
  min-height: 32px !important;
}

/* Tips and Info Text */
p.text-gray-500,
div.text-gray-500 {
  color: #8B9BA3 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
}

/* Modal Footer */
div.bg-gray-50.border-t {
  background: var(--dark-surface-2) !important;
  border-top: 1px solid var(--dark-border) !important;
}

/* Screenshot Button */
#captureScreenshot,
button.capture-btn {
  background: linear-gradient(135deg, var(--secondary-500), var(--secondary-700)) !important;
  color: white !important;
  padding: 10px 20px;
  border: 2px solid var(--secondary-400) !important;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 
    2px 2px 0 rgba(0, 217, 163, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.2s;
  cursor: pointer;
}

#captureScreenshot:hover,
button.capture-btn:hover {
  background: linear-gradient(135deg, var(--secondary-400), var(--secondary-600)) !important;
  transform: translateY(-1px);
  box-shadow: 
    3px 3px 0 rgba(0, 217, 163, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Wave Animation */
@keyframes wave {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-2px); }
  75% { transform: translateY(2px); }
}

.animate-wave {
  animation: wave 2s ease-in-out infinite;
}

/* ========================================
   ERD Diagram Canvas Ocean Theme
   ======================================== */

/* Main Canvas Container */
div[data-er-diagram-editor-target="canvas"] {
  background: linear-gradient(145deg, #0A1929 0%, #1a2332 100%) !important;
  border: 2px solid #00D9A3 !important;
  border-radius: 12px !important;
  box-shadow: 
    0 0 30px rgba(0, 217, 163, 0.2),
    inset 0 0 20px rgba(0, 217, 163, 0.05) !important;
  position: relative !important;
}

/* SVG Canvas Background */
div[data-er-diagram-editor-target="canvas"] svg {
  background: transparent !important;
}

/* Grid Pattern Styling */
div[data-er-diagram-editor-target="canvas"] svg pattern#grid line {
  stroke: #00D9A3 !important;
  stroke-opacity: 0.08 !important;
  stroke-width: 0.5px !important;
}

/* Table Container Styling */
div[data-er-diagram-editor-target="canvas"] svg .table-bg,
div[data-er-diagram-editor-target="canvas"] svg rect[stroke="#4f46e5"] {
  fill: #1a2937 !important;
  stroke: #00D9A3 !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0 4px 12px rgba(0, 217, 163, 0.4));
  rx: 8 !important;
}

/* Table Header Background */
div[data-er-diagram-editor-target="canvas"] svg rect[fill="#4f46e5"] {
  fill: linear-gradient(135deg, #00D9A3 0%, #0099B0 100%) !important;
  filter: drop-shadow(0 2px 8px rgba(0, 217, 163, 0.6));
}

/* Force header gradient with pattern */
div[data-er-diagram-editor-target="canvas"] svg g[data-table-id] rect:nth-child(3) {
  fill: #00D9A3 !important;
  opacity: 0.95 !important;
}

/* Table Name Text */
div[data-er-diagram-editor-target="canvas"] svg text[fill="white"] {
  fill: #FFFFFF !important;
  font-weight: bold !important;
  font-family: 'JetBrains Mono', monospace !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Field Name Text */
div[data-er-diagram-editor-target="canvas"] svg text[fill="#1f2937"] {
  fill: #B0C4CE !important;
  font-size: 11px !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* Field Type Text */
div[data-er-diagram-editor-target="canvas"] svg text[fill="#6b7280"] {
  fill: #00B3A0 !important;
  font-size: 10px !important;
  opacity: 0.8 !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* Alternating Row Backgrounds */
div[data-er-diagram-editor-target="canvas"] svg rect[fill="#f9fafb"] {
  fill: rgba(0, 217, 163, 0.05) !important;
}

/* Table Shadow */
div[data-er-diagram-editor-target="canvas"] svg rect[fill="black"][fill-opacity="0.1"] {
  fill: #00D9A3 !important;
  fill-opacity: 0.15 !important;
  filter: blur(4px);
}

/* Table Hover Effect */
div[data-er-diagram-editor-target="canvas"] svg g[data-table-id]:hover .table-bg,
div[data-er-diagram-editor-target="canvas"] svg g[data-table-id]:hover rect[stroke="#4f46e5"] {
  stroke: #00FFB3 !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 20px rgba(0, 255, 179, 0.8));
}

/* Relationship Lines */
div[data-er-diagram-editor-target="canvas"] svg line[stroke="#6b7280"] {
  stroke: #0099B0 !important;
  stroke-width: 2px !important;
  stroke-dasharray: 8, 4 !important;
  opacity: 0.8 !important;
}

/* Relationship Arrow Markers */
div[data-er-diagram-editor-target="canvas"] svg marker#arrowhead polygon {
  fill: #0099B0 !important;
}

/* Relationship Label Background */
div[data-er-diagram-editor-target="canvas"] svg rect[fill="white"][rx="2"] {
  fill: #0A1929 !important;
  stroke: #0099B0 !important;
  stroke-width: 1px !important;
  opacity: 0.95 !important;
}

/* Relationship Label Text */
div[data-er-diagram-editor-target="canvas"] svg text[fill="#4b5563"] {
  fill: #00D9A3 !important;
  font-size: 11px !important;
  font-weight: bold !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* Delete Button */
div[data-er-diagram-editor-target="canvas"] svg circle[fill="white"][fill-opacity] {
  fill: #FF4444 !important;
  fill-opacity: 0.8 !important;
}

div[data-er-diagram-editor-target="canvas"] svg circle[fill="white"][fill-opacity]:hover {
  fill: #FF6666 !important;
  fill-opacity: 1 !important;
}

/* Delete X Mark */
div[data-er-diagram-editor-target="canvas"] svg path[stroke="white"][stroke-linecap="round"] {
  stroke: #FFFFFF !important;
  stroke-width: 2px !important;
}

/* Cursor States */
div[data-er-diagram-editor-target="canvas"] svg g[data-table-id] {
  cursor: grab !important;
}

div[data-er-diagram-editor-target="canvas"] svg g[data-table-id]:active {
  cursor: grabbing !important;
}

/* ========================================
   Chen Notation Editor Ocean Theme
   ======================================== */

/* Page Header */
.chen-editor-page .bg-white.shadow {
  background: linear-gradient(135deg, #1a3d5c 0%, #2a4d6c 100%) !important;
  border: 2px solid #00D9A3 !important;
  box-shadow: 0 4px 20px rgba(0, 217, 163, 0.3) !important;
}

.chen-editor-page h1 {
  color: #00FFB3 !important;
  text-shadow: 0 0 10px rgba(0, 255, 179, 0.5) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

.chen-editor-page .text-gray-600 {
  color: #B0C4CE !important;
}

/* Buttons Styling */
#saveBtn,
#downloadImageBtn,
.chen-editor-page button.border-green-300,
.chen-editor-page button.border-blue-300 {
  background: linear-gradient(135deg, #00D9A3 0%, #0099B0 100%) !important;
  border: 2px solid #00FFB3 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 217, 163, 0.4) !important;
  transition: all 0.3s ease !important;
}

#saveBtn:hover,
#downloadImageBtn:hover,
.chen-editor-page button.border-green-300:hover,
.chen-editor-page button.border-blue-300:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 255, 179, 0.6) !important;
  background: linear-gradient(135deg, #00FFB3 0%, #00B3A0 100%) !important;
}

/* Back Button */
.chen-editor-page a.border-gray-300 {
  background: #1a2937 !important;
  border: 2px solid #4A5A64 !important;
  color: #8B9BA3 !important;
}

.chen-editor-page a.border-gray-300:hover {
  background: #2a3947 !important;
  border-color: #5A6A74 !important;
  color: #B0C4CE !important;
}

/* Table List Panel */
.chen-editor-page .lg\\:col-span-1 .bg-white {
  background: linear-gradient(145deg, #1a2937 0%, #2a3947 100%) !important;
  border: 2px solid #00D9A3 !important;
  box-shadow: 0 4px 20px rgba(0, 217, 163, 0.2) !important;
}

.chen-editor-page .lg\\:col-span-1 h2 {
  color: #00FFB3 !important;
  font-family: 'JetBrains Mono', monospace !important;
  text-shadow: 0 0 8px rgba(0, 255, 179, 0.4) !important;
}

/* Table Items */
.chen-editor-page .table-item {
  background: rgba(26, 37, 48, 0.7) !important;
  border: 1px solid rgba(0, 217, 163, 0.3) !important;
  transition: all 0.3s ease !important;
}

.chen-editor-page .table-item:hover {
  background: rgba(0, 217, 163, 0.1) !important;
  border-color: #00FFB3 !important;
  box-shadow: 0 2px 10px rgba(0, 217, 163, 0.3) !important;
}

.chen-editor-page .table-item h3 {
  color: #00D9A3 !important;
  font-family: 'JetBrains Mono', monospace !important;
}

.chen-editor-page .table-item .text-gray-500 {
  color: #B0C4CE !important;
}

.chen-editor-page .table-item .text-gray-400 {
  color: #8B9BA3 !important;
}

/* Add Table Button */
.chen-editor-page .add-table-btn {
  background: linear-gradient(135deg, #00D9A3 0%, #0099B0 100%) !important;
  border: 1px solid #00FFB3 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0, 217, 163, 0.4) !important;
}

.chen-editor-page .add-table-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #00FFB3 0%, #00B3A0 100%) !important;
  transform: scale(1.05) !important;
}

.chen-editor-page .add-table-btn:disabled {
  background: #4A5A64 !important;
  border-color: #3A4A54 !important;
  color: #6A7A84 !important;
  cursor: not-allowed !important;
}

/* Selected Tables Section */
.chen-editor-page #selectedTablesList {
  color: #B0C4CE !important;
}

.chen-editor-page #selectedTablesList .text-gray-700 {
  color: #00D9A3 !important;
}

.chen-editor-page #selectedTablesList button {
  color: #FF6B6B !important;
}

.chen-editor-page #selectedTablesList button:hover {
  color: #FF4444 !important;
}

/* Canvas Panel */
.chen-editor-page .lg\\:col-span-3 .bg-white {
  background: linear-gradient(145deg, #1a2937 0%, #2a3947 100%) !important;
  border: 2px solid #00D9A3 !important;
  box-shadow: 0 4px 20px rgba(0, 217, 163, 0.2) !important;
}

.chen-editor-page .lg\\:col-span-3 h2 {
  color: #00FFB3 !important;
  font-family: 'JetBrains Mono', monospace !important;
  text-shadow: 0 0 8px rgba(0, 255, 179, 0.4) !important;
}

/* Canvas Area */
#chenCanvas {
  background: linear-gradient(145deg, #0A1929 0%, #1a2332 100%) !important;
  border: 2px solid #00D9A3 !important;
  border-radius: 12px !important;
}

/* Zoom Controls Ocean Style */
#chenCanvas .absolute.top-4.right-4 {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  background: linear-gradient(135deg, #1A2838 0%, #0D1B2A 100%) !important;
  border: 2px solid #00FFB3 !important;
  border-radius: 12px !important;
  padding: 0.5rem !important;
  box-shadow: 0 4px 20px rgba(0, 255, 179, 0.2), 
              inset 0 0 20px rgba(0, 217, 163, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  z-index: 100 !important;
}

#chenCanvas .absolute.top-4.right-4 button {
  background: linear-gradient(135deg, #0D1B2A 0%, #1A2838 100%) !important;
  border: 1px solid #00D9A3 !important;
  color: #00FFB3 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  padding: 0 !important;
}

#chenCanvas .absolute.top-4.right-4 button:hover {
  background: linear-gradient(135deg, #00D9A3 0%, #00FFB3 100%) !important;
  color: #0A1929 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 0 15px rgba(0, 255, 179, 0.5) !important;
}

#chenCanvas .absolute.top-4.right-4 button svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2.5 !important;
}

#chenCanvas .absolute.top-4.right-4 #zoomLevel {
  background: linear-gradient(135deg, #0A1929 0%, #0D1B2A 100%) !important;
  border: 1px solid #0099B0 !important;
  color: #00FFB3 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  text-align: center !important;
  min-width: 50px !important;
  text-shadow: 0 0 10px rgba(0, 255, 179, 0.5) !important;
  box-shadow: 
    0 0 30px rgba(0, 217, 163, 0.2),
    inset 0 0 20px rgba(0, 217, 163, 0.05) !important;
}

/* Chen Notation SVG Elements Ocean Theme */

/* Grid Pattern */
#chenCanvas svg #grid path {
  stroke: rgba(0, 217, 163, 0.1) !important;
  stroke-width: 0.5px !important;
}

/* Entity Rectangles */
#chenCanvas svg rect.entity-rect {
  fill: #1a3d5c !important;
  stroke: #00FFB3 !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0 4px 12px rgba(0, 255, 179, 0.3));
}

#chenCanvas svg rect.entity-rect:hover {
  stroke: #00FFB3 !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 20px rgba(0, 255, 179, 0.8));
}

/* Entity Names */
#chenCanvas svg text[font-weight="bold"] {
  fill: #00FFB3 !important;
  font-family: 'JetBrains Mono', monospace !important;
  text-shadow: 0 0 10px rgba(0, 255, 179, 0.5);
}

/* Attribute Ellipses */
#chenCanvas svg ellipse.attr-ellipse {
  fill: rgba(0, 217, 163, 0.15) !important;
  stroke: #00D9A3 !important;
  stroke-width: 1.5px !important;
}

#chenCanvas svg .attribute-group:hover ellipse.attr-ellipse {
  fill: rgba(0, 255, 179, 0.25) !important;
  stroke: #00FFB3 !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0 0 10px rgba(0, 255, 179, 0.6));
}

/* Attribute Text */
#chenCanvas svg .attribute-group text {
  fill: #B0C4CE !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
}

/* Attribute Lines */
#chenCanvas svg line.attr-line {
  stroke: #0099B0 !important;
  stroke-width: 1.5px !important;
  stroke-dasharray: 3, 2 !important;
  opacity: 0.8 !important;
}

/* Primary Key Underlines */
#chenCanvas svg .attribute-group line:not(.attr-line) {
  stroke: #FFD700 !important;
  stroke-width: 2px !important;
}

/* Relationship Diamonds */
#chenCanvas svg polygon.relationship-diamond {
  fill: rgba(255, 107, 107, 0.2) !important;
  stroke: #FF6B6B !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0 2px 8px rgba(255, 107, 107, 0.4));
}

#chenCanvas svg polygon.relationship-diamond:hover {
  fill: rgba(255, 107, 107, 0.3) !important;
  stroke: #FF4444 !important;
  filter: drop-shadow(0 0 12px rgba(255, 107, 107, 0.6));
}

/* Relationship Lines */
#chenCanvas svg line.relationship-line {
  stroke: #FF6B6B !important;
  stroke-width: 2px !important;
  opacity: 0.8 !important;
}

/* Relationship Text */
#chenCanvas svg text.relationship-text {
  fill: #FFB366 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: bold !important;
  font-size: 12px !important;
  text-shadow: 0 0 8px rgba(255, 179, 102, 0.5);
}

/* Cardinality Text */
#chenCanvas svg text.relationship-cardinality {
  fill: #8B9BA3 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
}

/* SVG Grid Pattern */
#chenSvg pattern#grid path {
  stroke: #00D9A3 !important;
  stroke-opacity: 0.08 !important;
}

/* Entity Rectangles */
#chenSvg .entity-rect {
  fill: #1a2937 !important;
  stroke: #00D9A3 !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0 4px 8px rgba(0, 217, 163, 0.3));
}

#chenSvg .entity-rect:hover {
  stroke: #00FFB3 !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 6px 12px rgba(0, 255, 179, 0.5));
}

/* Entity Text */
#chenSvg text {
  fill: #FFFFFF !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* Attribute Ovals */
#chenSvg .attr-ellipse {
  fill: rgba(0, 217, 163, 0.15) !important;
  stroke: #00D9A3 !important;
  stroke-width: 1.5px !important;
}

#chenSvg .attribute-group:hover .attr-ellipse {
  fill: rgba(0, 255, 179, 0.25) !important;
  stroke: #00FFB3 !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0 2px 8px rgba(0, 255, 179, 0.5));
}

/* Attribute Lines */
#chenSvg .attr-line {
  stroke: #0099B0 !important;
  stroke-width: 1.5px !important;
  stroke-opacity: 0.8 !important;
}

/* Relationship Diamond */
#chenSvg .relationship-diamond {
  fill: #1a2937 !important;
  stroke: #FF6B6B !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0 4px 8px rgba(255, 107, 107, 0.3));
}

/* Relationship Lines */
#chenSvg .relationship-line {
  stroke: #0099B0 !important;
  stroke-width: 2px !important;
  stroke-opacity: 0.8 !important;
}

/* Zoom Controls */
.chen-editor-page .absolute.top-4.right-4 {
  background: rgba(26, 37, 48, 0.95) !important;
  border: 2px solid #00D9A3 !important;
  box-shadow: 0 4px 12px rgba(0, 217, 163, 0.3) !important;
}

.chen-editor-page .absolute.top-4.right-4 button {
  color: #00D9A3 !important;
  transition: all 0.2s ease !important;
}

.chen-editor-page .absolute.top-4.right-4 button:hover {
  background: rgba(0, 217, 163, 0.2) !important;
  color: #00FFB3 !important;
}

.chen-editor-page #zoomLevel {
  color: #00FFB3 !important;
  font-weight: bold !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* ========================================
   Interface Definitions Index - Delete Button
   ======================================== */

/* Delete button container */
.bg-gray-50 {
  background: linear-gradient(135deg, #1a2937 0%, #2a3947 100%) !important;
  border-top: 1px solid rgba(0, 217, 163, 0.2) !important;
}

/* Edit link styling */
.text-indigo-600.hover\\:text-indigo-900 {
  color: #00D9A3 !important;
  font-weight: 500 !important;
  font-family: 'JetBrains Mono', monospace !important;
  text-shadow: 0 0 5px rgba(0, 217, 163, 0.3) !important;
  transition: all 0.3s ease !important;
}

.text-indigo-600.hover\\:text-indigo-900:hover {
  color: #00FFB3 !important;
  text-shadow: 0 0 10px rgba(0, 255, 179, 0.5) !important;
  transform: translateX(2px) !important;
}

/* Delete button - Subtle danger style */
button.text-sm.text-red-600,
button.text-red-600,
form button[class*="text-red"] {
  background: transparent !important;
  color: #FF6B6B !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  font-family: 'JetBrains Mono', monospace !important;
  border: none !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
  text-decoration: none !important;
}

button.text-sm.text-red-600:hover,
button.text-red-600:hover,
form button[class*="text-red"]:hover {
  background: rgba(255, 107, 107, 0.1) !important;
  color: #FF4444 !important;
  transform: translateX(2px) !important;
  text-shadow: 0 0 5px rgba(255, 107, 107, 0.3) !important;
}

/* Delete button with warning animation */
form[action*="/interface_definitions/"] button.text-red-600:active,
button.text-red-600.hover\\:text-red-900:active {
  transform: scale(0.98) !important;
  box-shadow: 0 1px 4px rgba(255, 68, 68, 0.3) !important;
}

/* Card action area alignment */
.bg-gray-50 .flex.justify-between.items-center {
  gap: 1rem !important;
}

/* Interface definition cards - Ocean theme */
.bg-white.shadow.rounded-lg {
  background: linear-gradient(145deg, #1a2937 0%, #2a3947 100%) !important;
  border: 1px solid rgba(0, 217, 163, 0.2) !important;
  box-shadow: 0 4px 12px rgba(0, 217, 163, 0.1) !important;
}

.bg-white.shadow.rounded-lg:hover {
  border-color: rgba(0, 255, 179, 0.4) !important;
  box-shadow: 0 8px 20px rgba(0, 255, 179, 0.2) !important;
}

/* Title in cards */
.bg-white.shadow.rounded-lg h3 {
  color: #00FFB3 !important;
  text-shadow: 0 0 5px rgba(0, 255, 179, 0.3) !important;
}

/* Description text */
.bg-white.shadow.rounded-lg .text-gray-600 {
  color: #B0C4CE !important;
}

/* Meta text */
.bg-white.shadow.rounded-lg .text-gray-500 {
  color: #8B9BA3 !important;
}

/* Version badge */
.bg-blue-100.text-blue-800 {
  background: linear-gradient(135deg, #0099B0 0%, #00D9A3 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #00FFB3 !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Private badge */
.bg-gray-100.text-gray-800 {
  background: rgba(74, 90, 100, 0.5) !important;
  color: #B0C4CE !important;
  border: 1px solid rgba(176, 196, 206, 0.3) !important;
}

/* ========================================
   Like Button - Ocean Theme
   ======================================== */

/* Like button styling */
form[action*="/toggle_like"] button,
button.bg-red-500,
button.bg-gray-500,
#like_button_20 {
  background: linear-gradient(135deg, #FF6B6B 0%, #FF4757 100%) !important;
  border: 2px solid rgba(255, 107, 107, 0.5) !important;
  color: #FFFFFF !important;
  padding: 0.5rem 1rem !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-family: 'JetBrains Mono', monospace !important;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3) !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Liked state - Ocean heart glow */
form[action*="/toggle_like"] button.bg-red-500::before,
button.bg-red-500::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  animation: heartPulse 2s ease-in-out infinite;
}

/* Not liked state */
form[action*="/toggle_like"] button.bg-gray-500,
button.bg-gray-500 {
  background: linear-gradient(135deg, #4A5A64 0%, #3A4A54 100%) !important;
  border: 2px solid rgba(74, 90, 100, 0.5) !important;
  color: #B0C4CE !important;
}

/* Hover effects */
form[action*="/toggle_like"] button:hover,
button.bg-red-500:hover,
button.bg-gray-500:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4) !important;
}

form[action*="/toggle_like"] button.bg-gray-500:hover,
button.bg-gray-500:hover {
  background: linear-gradient(135deg, #5A6A74 0%, #4A5A64 100%) !important;
  border-color: rgba(0, 217, 163, 0.3) !important;
  color: #00D9A3 !important;
  box-shadow: 0 6px 20px rgba(0, 217, 163, 0.3) !important;
}

/* Heart icon animation */
form[action*="/toggle_like"] button svg,
button.bg-red-500 svg,
button.bg-gray-500 svg {
  transition: transform 0.3s ease !important;
}

form[action*="/toggle_like"] button:hover svg {
  transform: scale(1.2) !important;
}

/* Pulse animation for liked state */
@keyframes heartPulse {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 0.3;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Active/Click effect */
form[action*="/toggle_like"] button:active {
  transform: scale(0.95) !important;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3) !important;
}

/* Like count animation */
.animate-pulse {
  animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}