/* Minecraft Theme - Survival + Creativity + Modular Systems */
/* Design: Earthy materials, layered contrast, grid-driven, blocky feel */

/* Fallback mono font - must be first */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* Minecraft Fonts */
@font-face {
  font-family: 'Minecraft';
  src: url('../fonts/minecraft_default.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Minecraft Alt';
  src: url('../fonts/minecraft_alt.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Minecraft Illager';
  src: url('../fonts/minecraft_illageralt.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html[data-color="minecraft"]{ --brand-h:122; }

/* Core Palette - Dark Theme */
html[data-theme="dark"][data-color="minecraft"]{
  --bg: #3D2B1A;                    /* Dirt Brown Dark */
  --card: rgba(45, 32, 18, 0.75);   /* Transparent Dirt */
  --text: #F2F2F2;                  /* Wool White */
  --muted: #D2B48C;                 /* Desert Sand */
  --line: #6B4F2A;                  /* Dirt Brown */
  --surface-2: rgba(55, 40, 22, 0.7);
  --surface-3: rgba(65, 48, 28, 0.7);
  --grass-green: #4CAF50;
  --dirt-brown: #6B4F2A;
  --stone-gray: #8D8F92;
  --ocean-blue: #2E6F95;
  --desert-sand: #D2B48C;
  --nether-red: #8C1D18;
  --end-purple: #6A4C93;
}

/* Core Palette - Light Theme */
html[data-theme="light"][data-color="minecraft"]{
  --bg: #C4A574;                    /* Light Dirt/Sand */
  --card: rgba(210, 180, 140, 0.7); /* Transparent Sand */
  --text: #1A1A1A;                  /* Bedrock Black */
  --muted: #5C4420;                 /* Dark Dirt */
  --line: #6B4F2A;                  /* Dirt Brown */
  --surface-2: rgba(200, 170, 130, 0.7);
  --surface-3: rgba(190, 160, 120, 0.7);
  --grass-green: #4CAF50;
  --dirt-brown: #6B4F2A;
  --stone-gray: #8D8F92;
  --ocean-blue: #2E6F95;
  --desert-sand: #D2B48C;
  --nether-red: #8C1D18;
  --end-purple: #6A4C93;
}

/* Background Video Element - More visible */
html[data-color="minecraft"] .minecraft-video-bg{
  display: block !important;
}

.minecraft-video-bg{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
}

html[data-theme="light"][data-color="minecraft"] .minecraft-video-bg{
  opacity: 0.5;
}

/* Typography - Use Minecraft Default for everything */
html[data-color="minecraft"],
html[data-color="minecraft"] body,
html[data-color="minecraft"] *{
  font-family: 'Minecraft', monospace;
}

html[data-color="minecraft"] .clock,
html[data-color="minecraft"] #clockOut{
  font-family: 'Minecraft', monospace !important;
  font-weight: 400;
  letter-spacing: 0.05em;
}

html[data-color="minecraft"] .countdown,
html[data-color="minecraft"] #elapsedOut,
html[data-color="minecraft"] #leftOut,
html[data-color="minecraft"] #nextInOut{
  font-family: 'Minecraft', monospace !important;
}

/* Background - Dirt brown gradient, transparent to show video */
html[data-color="minecraft"] body{
  background: linear-gradient(180deg, rgba(61, 43, 26, 0.6) 0%, rgba(45, 32, 18, 0.6) 100%);
}

html[data-theme="light"][data-color="minecraft"] body{
  background: linear-gradient(180deg, rgba(196, 165, 116, 0.5) 0%, rgba(180, 150, 100, 0.5) 100%);
}

/* Container - Transparent, blocky */
html[data-color="minecraft"] .container{
  border: 2px solid #6B4F2A;
  border-radius: 2px;
  background: rgba(45, 32, 18, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
  padding-top: 32px;
  padding-bottom: 32px;
}

html[data-theme="light"][data-color="minecraft"] .container{
  background: rgba(210, 180, 140, 0.65);
}

/* Cards - Transparent block style */
html[data-color="minecraft"] .card{
  border: 2px solid #6B4F2A;
  border-radius: 2px;
  background: rgba(55, 40, 22, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 150ms ease;
}

html[data-color="minecraft"] .card:hover{
  border-color: #4CAF50;
  transform: translateY(-2px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
  background: rgba(55, 40, 22, 0.75);
}

html[data-theme="light"][data-color="minecraft"] .card{
  background: rgba(220, 190, 150, 0.6);
}

html[data-theme="light"][data-color="minecraft"] .card:hover{
  background: rgba(220, 190, 150, 0.75);
}

/* Themed cards - Grass green accent, semi-transparent */
html[data-color="minecraft"] .themed-card::before{
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.85), rgba(56, 142, 60, 0.8));
}

html[data-color="minecraft"] .themed-card{
  color: #F2F2F2;
  border: 2px solid #4CAF50;
  border-radius: 2px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
}

html[data-color="minecraft"] .themed-card .label,
html[data-color="minecraft"] .themed-card .muted,
html[data-color="minecraft"] .themed-card #currentName,
html[data-color="minecraft"] .themed-card #currentRoom,
html[data-color="minecraft"] .themed-card #currentTimeRange,
html[data-color="minecraft"] .themed-card #elapsedOut,
html[data-color="minecraft"] .themed-card #leftOut,
html[data-color="minecraft"] .themed-card #nextName,
html[data-color="minecraft"] .themed-card #nextRoom,
html[data-color="minecraft"] .themed-card #nextTimeRange,
html[data-color="minecraft"] .themed-card #nextInOut,
html[data-color="minecraft"] .themed-card #untilOut{
  color: #F2F2F2 !important;
}

/* Dark mode clock styling */
html[data-theme="dark"][data-color="minecraft"] #clockOut{
  color: #4CAF50;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"][data-color="minecraft"] .label,
html[data-theme="dark"][data-color="minecraft"] .muted,
html[data-theme="dark"][data-color="minecraft"] #dateOut,
html[data-theme="dark"][data-color="minecraft"] #schoolState{
  color: #D2B48C;
}

/* Light mode clock styling */
html[data-theme="light"][data-color="minecraft"] #clockOut{
  color: #388E3C;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"][data-color="minecraft"] .label,
html[data-theme="light"][data-color="minecraft"] .muted,
html[data-theme="light"][data-color="minecraft"] #dateOut,
html[data-theme="light"][data-color="minecraft"] #schoolState{
  color: #5C4420;
}

/* Pills - Transparent block badge */
html[data-color="minecraft"] .pill{
  border: 2px solid #6B4F2A;
  background: rgba(45, 32, 18, 0.7);
  color: #F2F2F2;
  font-family: 'Minecraft', monospace;
  font-weight: 700;
  border-radius: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

html[data-theme="light"][data-color="minecraft"] .pill{
  background: rgba(107, 79, 42, 0.3);
  color: #1A1A1A;
  border-color: #5C4420;
}

/* Progress bar - Grass green */
html[data-color="minecraft"] .progress{
  background: linear-gradient(90deg, #4CAF50, #388E3C);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

html[data-color="minecraft"] .progress-wrap{
  background: rgba(107, 79, 42, 0.4);
  border: 2px solid #6B4F2A;
  border-radius: 0;
}

/* Buttons - Primary Action/Craft style */
html[data-color="minecraft"] .btn{
  background: #4CAF50;
  color: #1A1A1A;
  border: 2px solid #388E3C;
  font-family: 'Minecraft', monospace;
  font-weight: 700;
  border-radius: 2px;
  transition: all 150ms ease;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

html[data-color="minecraft"] .btn:hover{
  background: #388E3C;
  transform: translateY(-2px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
}

/* Secondary buttons */
html[data-color="minecraft"] .icon-btn{
  border: 2px solid transparent;
  transition: all 150ms ease;
  border-radius: 2px;
}

html[data-color="minecraft"] .icon-btn:hover{
  background: rgba(107, 79, 42, 0.3);
  border-color: #6B4F2A;
  transform: translateY(-2px);
}

/* Status badges - Blocky */
html[data-color="minecraft"] .status--current{
  background: #4CAF50;
  color: #1A1A1A;
  border: 2px solid #388E3C;
  font-family: 'Minecraft', monospace;
  font-weight: 700;
  border-radius: 0;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

html[data-color="minecraft"] .status--next{
  background: rgba(45, 32, 18, 0.8);
  color: #F2F2F2;
  border: 2px solid #6B4F2A;
  font-family: 'Minecraft', monospace;
  font-weight: 700;
  border-radius: 0;
}

html[data-color="minecraft"] .status--done{
  background: rgba(107, 79, 42, 0.3);
  color: #8D8F92;
  text-decoration: line-through;
}

/* Chips - Block style */
html[data-color="minecraft"] .chip{
  border: 2px solid #6B4F2A;
  font-family: 'Minecraft', monospace;
  transition: all 150ms ease;
  border-radius: 2px;
  background: rgba(45, 32, 18, 0.5);
}

html[data-color="minecraft"] .chip[aria-pressed="true"]{
  background: rgba(76, 175, 80, 0.3);
  border-color: #4CAF50;
  color: #4CAF50;
}

html[data-color="minecraft"] .chip:hover{
  border-color: #4CAF50;
  transform: translateY(-2px);
  background: rgba(76, 175, 80, 0.2);
}

/* Schedule table - Grid style, transparent */
html[data-color="minecraft"] .schedule{
  font-family: 'Minecraft', monospace;
}

html[data-color="minecraft"] .schedule th{
  border-bottom: 4px solid #4CAF50;
  color: #F2F2F2;
  font-family: 'Minecraft', monospace;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(45, 32, 18, 0.5);
}

html[data-color="minecraft"] .schedule tr.active{
  background: linear-gradient(90deg, rgba(76, 175, 80, 0.3), rgba(76, 175, 80, 0.1), transparent);
  border-left: 4px solid #4CAF50;
}

html[data-color="minecraft"] .schedule td{
  border-bottom: 2px solid rgba(107, 79, 42, 0.4);
}

html[data-color="minecraft"] .schedule tbody tr{
  background: rgba(45, 32, 18, 0.3);
}

html[data-color="minecraft"] .schedule tbody tr:hover{
  background: rgba(55, 40, 22, 0.5);
}

/* Dialogs/Modals - Transparent blocky frame */
html[data-color="minecraft"] dialog{
  border: 2px solid #6B4F2A;
  border-radius: 2px;
  background: rgba(45, 32, 18, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.4);
}

html[data-theme="light"][data-color="minecraft"] dialog{
  background: rgba(210, 180, 140, 0.9);
}

html[data-color="minecraft"] dialog::backdrop{
  background: rgba(26, 18, 10, 0.85);
}

html[data-color="minecraft"] .modal-header{
  border-bottom: 4px solid #4CAF50;
}

html[data-color="minecraft"] .modal-header strong{
  font-family: 'Minecraft', monospace;
  color: #4CAF50;
  letter-spacing: 0.02em;
}

/* Onboarding - Spawn point */
html[data-color="minecraft"] .onboard-title{
  font-family: 'Minecraft', monospace !important;
  color: #4CAF50 !important;
  letter-spacing: 0.02em;
}

html[data-color="minecraft"] .onboard-card{
  border: 2px solid #6B4F2A;
  background: rgba(45, 32, 18, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.4);
  border-radius: 2px;
}

html[data-theme="light"][data-color="minecraft"] .onboard-card{
  background: rgba(210, 180, 140, 0.85);
}

/* Scrollbar - Dirt style */
html[data-color="minecraft"] ::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #6B4F2A, #4A3518);
  border: 1px solid #3D2B1A;
  border-radius: 0;
}

html[data-color="minecraft"] ::-webkit-scrollbar-track{
  background: rgba(45, 32, 18, 0.5);
}

/* Section strata pattern - transparent */
html[data-color="minecraft"] section:nth-child(odd){
  background: rgba(45, 32, 18, 0.3);
}

html[data-color="minecraft"] section:nth-child(even){
  background: rgba(55, 40, 22, 0.3);
}

/* Navigation-style elements */
html[data-color="minecraft"] .tabs,
html[data-color="minecraft"] nav{
  border-bottom: 2px solid #6B4F2A;
}

html[data-color="minecraft"] .tab{
  color: #F2F2F2;
  font-family: 'Minecraft', monospace;
  transition: all 150ms ease;
}

html[data-color="minecraft"] .tab:hover{
  color: #4CAF50;
}

html[data-color="minecraft"] .tab[aria-selected="true"]{
  color: #4CAF50;
  border-bottom: 4px solid #4CAF50;
}

/* Quick action buttons - Crafting style */
html[data-color="minecraft"] .quick-action{
  border: 2px solid #6B4F2A;
  background: rgba(45, 32, 18, 0.5);
  color: #D2B48C;
  font-family: 'Minecraft', monospace;
  transition: all 150ms ease;
  border-radius: 2px;
}

html[data-color="minecraft"] .quick-action:hover{
  background: rgba(107, 79, 42, 0.4);
  border-color: #D2B48C;
  transform: translateY(-2px);
}

html[data-color="minecraft"] .quick-action.danger{
  border-color: #8C1D18;
  color: #D9534F;
}

html[data-color="minecraft"] .quick-action.danger:hover{
  background: rgba(140, 29, 24, 0.3);
}

/* Tips section */
html[data-color="minecraft"] section:last-of-type{
  border: 2px solid #6B4F2A;
  border-radius: 2px;
  background: rgba(45, 32, 18, 0.5);
}

/* Kiosk mode styling */
html[data-color="minecraft"] .kiosk-modal-content{
  border: 2px solid #4CAF50;
  background: rgba(45, 32, 18, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 2px;
}

html[data-color="minecraft"] .kiosk-modal-title{
  font-family: 'Minecraft', monospace;
  color: #4CAF50;
}

html[data-color="minecraft"] .kiosk-key{
  background: rgba(55, 40, 22, 0.8);
  border: 2px solid #6B4F2A;
  color: #F2F2F2;
  font-family: 'JetBrains Mono', monospace;
  transition: all 150ms ease;
  border-radius: 2px;
}

html[data-color="minecraft"] .kiosk-key:hover{
  background: #4CAF50;
  border-color: #388E3C;
  color: #1A1A1A;
  transform: translateY(-2px);
}

html[data-color="minecraft"] .kiosk-pin-dot{
  background: #6B4F2A;
  border-color: #4CAF50;
  border-radius: 0;
}

html[data-color="minecraft"] .kiosk-pin-dot.filled{
  background: #4CAF50;
}

/* Editor blocks */
html[data-color="minecraft"] .blocks-container{
  border: 2px dashed #6B4F2A;
  background: rgba(45, 32, 18, 0.4);
  border-radius: 2px;
}

/* Day over message */
html[data-color="minecraft"] .dayover-message{
  border: 2px solid #4CAF50;
  background: rgba(45, 32, 18, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'Minecraft', monospace;
  border-radius: 2px;
}

/* Input fields - Transparent blocky */
html[data-color="minecraft"] input,
html[data-color="minecraft"] select,
html[data-color="minecraft"] textarea{
  border: 2px solid #6B4F2A;
  border-radius: 2px;
  background: rgba(45, 32, 18, 0.7);
  color: #F2F2F2;
  font-family: 'Minecraft', monospace;
}

html[data-color="minecraft"] input:focus,
html[data-color="minecraft"] select:focus,
html[data-color="minecraft"] textarea:focus{
  border-color: #4CAF50;
  outline: none;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
}

html[data-theme="light"][data-color="minecraft"] input,
html[data-theme="light"][data-color="minecraft"] select,
html[data-theme="light"][data-color="minecraft"] textarea{
  background: rgba(220, 190, 150, 0.7);
  color: #1A1A1A;
}

/* Selection highlight */
html[data-color="minecraft"] ::selection{
  background: rgba(76, 175, 80, 0.5);
  color: #F2F2F2;
}

/* Links */
html[data-color="minecraft"] a{
  color: #4CAF50;
}

html[data-color="minecraft"] a:hover{
  color: #6FCF73;
}

/* Help text */
html[data-color="minecraft"] .help{
  color: #D2B48C;
  font-family: 'Minecraft', monospace;
}

/* Kbd elements - Dirt button style */
html[data-color="minecraft"] .kbd{
  background: rgba(55, 40, 22, 0.8);
  border: 2px solid #6B4F2A;
  color: #F2F2F2;
  font-family: 'JetBrains Mono', monospace;
  border-radius: 2px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

/* Dividers - Solid color bands, never dotted */
html[data-color="minecraft"] hr,
html[data-color="minecraft"] .divider{
  border: none;
  height: 4px;
  background: #4CAF50;
}