@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@8..144,100..1000&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap");

/* Prevent Alpine.js x-cloak flash on page load */
[x-cloak] {
  display: none !important;
}

/* Main CSS Variables for Cyberpunk Dashboard */
:root {
  --bg-primary: #050816;
  --bg-secondary: #0b1020;
  --bg-card: #111827;
  --bg-surface: #080b18;
  --border-color: #1f2937;
  --neon-green: #00ff9c;
  --cyan: #00e5ff;
  --purple: #8b5cf6;
  --pink-danger: #ff3b81;
  --warning-yellow: #facc15;
  --text-primary: #e5e7eb;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-strong: #ffffff;
  --font-sans: "Google Sans Flex", "Google Sans", "Noto Sans Thai", sans-serif;
  --font-mono: var(--font-sans);
}

:root[data-theme="light"] {
  --bg-primary: #f4f7fb;
  --bg-secondary: #e8eef6;
  --bg-card: #ffffff;
  --bg-surface: #f8fbff;
  --border-color: #c9d5e5;
  --neon-green: #008f63;
  --cyan: #007c91;
  --purple: #6d43d5;
  --pink-danger: #d61f69;
  --warning-yellow: #b88900;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-strong: #020617;
}

/* Global resets and layout styling */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  background-image:
    linear-gradient(rgba(18, 24, 48, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 24, 48, 0.15) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: center;
  overflow-x: hidden;
}

:root[data-theme="light"] body {
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.16) 1px, transparent 1px);
}

/* Strict Flat Corners - FORCE NO ROUNDED CORNERS */
*,
*::before,
*::after {
  border-radius: 0px !important;
}

.font-sans {
  font-family: var(--font-sans) !important;
}

.font-mono {
  font-family: var(--font-sans) !important;
}

/* Title Glitch Animations */
.cyber-glitch-text {
  position: relative;
  font-family: var(--font-sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cyber-glitch-text::after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 var(--pink-danger);
  top: 0;
  color: var(--text-primary);
  background: var(--bg-primary);
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim {
  0% {
    clip: rect(12px, 9999px, 66px, 0);
  }
  10% {
    clip: rect(4px, 9999px, 80px, 0);
  }
  20% {
    clip: rect(85px, 9999px, 5px, 0);
  }
  30% {
    clip: rect(50px, 9999px, 98px, 0);
  }
  40% {
    clip: rect(10px, 9999px, 30px, 0);
  }
  50% {
    clip: rect(92px, 9999px, 12px, 0);
  }
  60% {
    clip: rect(35px, 9999px, 85px, 0);
  }
  70% {
    clip: rect(2px, 9999px, 55px, 0);
  }
  80% {
    clip: rect(78px, 9999px, 20px, 0);
  }
  90% {
    clip: rect(15px, 9999px, 90px, 0);
  }
  100% {
    clip: rect(55px, 9999px, 42px, 0);
  }
}

/* Glowing Tactical card and button effects */
.cyber-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cyber-card:hover {
  border-color: rgba(0, 229, 255, 0.4);
}

.cyber-card-active {
  border-color: var(--cyan) !important;
}

/* Cyber Button Styling */
.cyber-btn {
  font-family: var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--cyan);
  background-color: rgba(0, 229, 255, 0.05);
  color: var(--cyan);
  transition: all 0.2s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cyber-btn:hover {
  background-color: var(--cyan);
  color: #000000;
}

.cyber-btn-disabled {
  border-color: var(--border-color);
  background-color: rgba(31, 41, 55, 0.1);
  color: var(--text-secondary);
  cursor: not-allowed;
}

.cyber-btn-pink {
  border-color: var(--pink-danger);
  background-color: rgba(255, 59, 129, 0.05);
  color: var(--pink-danger);
}

.cyber-btn-pink:hover {
  background-color: var(--pink-danger);
  color: #000000;
}

.cyber-btn-green {
  border-color: var(--neon-green);
  background-color: rgba(0, 255, 156, 0.05);
  color: var(--neon-green);
}

.cyber-btn-green:hover {
  background-color: var(--neon-green);
  color: #000000;
}

/* Custom form inputs completely flat styling */
.cyber-input {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  transition: all 0.2s ease;
}

.cyber-input:focus {
  border-color: var(--cyan) !important;
  outline: none !important;
}

/* SweetAlert overrides flat styling */
.swal2-popup {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-sans) !important;
  box-shadow: none !important;
}

.swal2-title {
  font-family: var(--font-sans) !important;
  text-transform: uppercase !important;
  color: var(--text-primary) !important;
  letter-spacing: 0.05em !important;
}

.swal2-confirm {
  background-color: rgba(0, 229, 255, 0.1) !important;
  border: 1px solid var(--cyan) !important;
  color: var(--cyan) !important;
  font-family: var(--font-sans) !important;
  text-transform: uppercase !important;
}

.swal2-confirm:hover {
  background-color: var(--cyan) !important;
  color: #000000 !important;
}

.swal2-cancel {
  background-color: rgba(255, 59, 129, 0.1) !important;
  border: 1px solid var(--pink-danger) !important;
  color: var(--pink-danger) !important;
  font-family: var(--font-sans) !important;
  text-transform: uppercase !important;
}

.swal2-cancel:hover {
  background-color: var(--pink-danger) !important;
  color: #000000 !important;
}

/* Frappe Gantt Chart Custom Flat Styling Overrides */
.gantt .bar {
  fill: rgba(0, 229, 255, 0.25) !important;
  stroke: var(--cyan) !important;
  stroke-width: 1 !important;
}

.gantt .bar-progress {
  fill: var(--cyan) !important;
}

.gantt .bar-label {
  fill: var(--text-strong) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  paint-order: stroke !important;
  stroke: var(--bg-primary) !important;
  stroke-width: 3px !important;
}

.gantt .grid-header {
  fill: var(--bg-secondary) !important;
  stroke: var(--border-color) !important;
}

.gantt .grid-row {
  fill: var(--bg-card) !important;
  stroke: var(--border-color) !important;
}

.gantt .tick {
  stroke: var(--border-color) !important;
}

.gantt .arrow {
  stroke: var(--pink-danger) !important;
  stroke-width: 1.5 !important;
  fill: none !important;
}

.gantt .upper-text {
  fill: var(--text-primary) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  stroke: none !important;
}

.gantt .lower-text {
  fill: var(--text-secondary) !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  stroke: none !important;
}

.gantt .handle {
  fill: var(--purple) !important;
}

/* Custom terminal scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cyan);
}

/* Blinking terminal cursor */
.cyber-cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background-color: var(--cyan);
  animation: cursor-blink 1s infinite steps(2, start);
  vertical-align: middle;
}

@keyframes cursor-blink {
  to {
    visibility: hidden;
  }
}

/* Slide-over Drawer styles */
.drawer-panel {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background-color: var(--bg-card);
  border-left: 2px solid var(--border-color);
}

/* Theme overrides for Tailwind utility classes used across the app */
.bg-cyberBg {
  background-color: var(--bg-primary) !important;
}
.bg-cyberBgSec {
  background-color: var(--bg-secondary) !important;
}
.bg-cyberCard {
  background-color: var(--bg-card) !important;
}
.bg-\[\#050816\] {
  background-color: var(--bg-primary) !important;
}
.bg-\[\#0B1020\] {
  background-color: var(--bg-secondary) !important;
}
.bg-\[\#111827\] {
  background-color: var(--bg-card) !important;
}
.bg-\[\#080B18\] {
  background-color: var(--bg-surface) !important;
}
.border-cyberBorder {
  border-color: var(--border-color) !important;
}
.text-cyberGreen {
  color: var(--neon-green) !important;
}
.text-cyberCyan {
  color: var(--cyan) !important;
}
.text-cyberPurple {
  color: var(--purple) !important;
}
.text-cyberPink {
  color: var(--pink-danger) !important;
}
.text-cyberYellow {
  color: var(--warning-yellow) !important;
}

.text-white {
  color: var(--text-strong) !important;
}
.text-gray-200,
.text-gray-300 {
  color: var(--text-primary) !important;
}
.text-gray-400,
.text-gray-500 {
  color: var(--text-secondary) !important;
}
.text-gray-600 {
  color: var(--text-muted) !important;
}
.text-black {
  color: #000000 !important;
}

input,
textarea,
select,
button {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-sans) !important;
}

header,
aside,
footer,
main,
section,
article {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

/* Keep the whole UI flat */
.cyber-card,
.bg-cyberCard,
.bg-cyberBgSec,
.swal2-popup,
[class*="shadow-"] {
  box-shadow: none !important;
}

/* Better light theme coverage for hardcoded dark surfaces */
:root[data-theme="light"] .bg-cyberCyan\/5,
:root[data-theme="light"] .bg-cyberPink\/5,
:root[data-theme="light"] .bg-cyberPurple\/5,
:root[data-theme="light"] .bg-cyberYellow\/5,
:root[data-theme="light"] .bg-cyberGreen\/5 {
  filter: saturate(0.9);
}

:root[data-theme="light"] .file\:bg-cyberCyan::file-selector-button {
  background-color: var(--cyan) !important;
  color: #ffffff !important;
}

/* Tactical Badges with dynamic theme variable adaptation */
.badge-cyber-cyan {
  background-color: color-mix(in srgb, var(--cyan) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--cyan) 30%, transparent) !important;
  color: var(--cyan) !important;
}
.badge-cyber-green {
  background-color: color-mix(
    in srgb,
    var(--neon-green) 12%,
    transparent
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--neon-green) 30%,
    transparent
  ) !important;
  color: var(--neon-green) !important;
}
.badge-cyber-yellow {
  background-color: color-mix(
    in srgb,
    var(--warning-yellow) 12%,
    transparent
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--warning-yellow) 30%,
    transparent
  ) !important;
  color: var(--warning-yellow) !important;
}
.badge-cyber-purple {
  background-color: color-mix(
    in srgb,
    var(--purple) 12%,
    transparent
  ) !important;
  border-color: color-mix(in srgb, var(--purple) 30%, transparent) !important;
  color: var(--purple) !important;
}
.badge-cyber-pink {
  background-color: color-mix(
    in srgb,
    var(--pink-danger) 12%,
    transparent
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--pink-danger) 30%,
    transparent
  ) !important;
  color: var(--pink-danger) !important;
}
.badge-cyber-slate {
  background-color: color-mix(
    in srgb,
    var(--text-secondary) 12%,
    transparent
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--text-secondary) 30%,
    transparent
  ) !important;
  color: var(--text-secondary) !important;
}