/* Modern Styles for Keyboard Layout Editor */
/* Replicating Yuzu Keycaps Style - TEXTURE / IMAGE BASED MODEL */

:root {
  /* Global Colors */
  --bg-color: #f9f9f9;
  --bg-secondary: #ffffff;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;
  --primary-color: #111827;
  --accent-color: #3b82f6;
  
  /* UI Variables */
  --radius-ui: 6px;
  --shadow-ui: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

body {
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* =========================================
   KEYCAP STYLING - IMAGE / TEXTURE READY
   Goal: Prepare the keycap to accept a custom image as background.
   We remove complex internal borders/shadows that would interfere.
   ========================================= */

/* 1. Reset */
.keycap .keytop {
  background-image: none !important;
  box-shadow: none !important;
  border-style: none !important;
  border: none !important;
}

.keycap .keyborder {
  box-shadow: none !important;
  border-style: none !important;
  border: none !important;
}

/* 2. The Base (Skirt) - The Container for the Image */
.keycap .keyborder {
  /* 
     This is where the user's custom model image will go.
     We set it to cover the area.
     The user's color (background-color) will show through transparent parts of the PNG.
  */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  
  /* 
     PLACEHOLDER STYLE (Until user uploads image):
     Simulate the "White Pillowed" look using pure CSS for now,
     but in a way that is easily overridden by an image.
  */
  background-color: #f4f4f5; /* Fallback color */
  border-radius: 8px !important;
  
  /* 
     Soft inner glow/shadow to mimic the pillowed shape 
     (This effectively "draws" the model if no image is present)
  */
  box-shadow: 
    inset 0 1px 1px rgba(255,255,255,0.9),  /* Top Highlight */
    inset 0 -2px 5px rgba(0,0,0,0.05),      /* Bottom Curve */
    0 2px 5px rgba(0,0,0,0.1) !important;   /* Drop Shadow */
}

/* 3. The Top (Face) - Mostly Transparent now */
.keycap .keytop {
  /* 
     Since the "Model" is now the base image, the top face 
     should be mostly transparent or just handle the legend.
  */
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  
  /* Reset transform so it covers the whole key (for legends) */
  transform: none !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* 
   SELECTION & HOVER STATES
   Blue Outline around the whole model.
*/

#keyboard .selected .keyborder {
  box-shadow:
    0 0 0 3px #8e83ff,
    0 0 8px rgba(117, 105, 255, 0.5),
    0 4px 7px rgba(31, 35, 44, 0.24) !important;
  z-index: 102;
}

#keyboard .hover:not(.selected) .keyborder {
  box-shadow:
    0 0 0 2px #a49bff,
    0 0 5px rgba(117, 105, 255, 0.3),
    0 2px 5px rgba(31, 35, 44, 0.18) !important;
  z-index: 90;
}

/* Exact 2D Cherry model layer.
   The audited source PNGs carry the keycap silhouette in their alpha channel.
   A masked color layer preserves customer-selected colors; the original
   sprite is multiplied above it to retain the sculpted top and side shading. */
#keyboard .diykeycap-cherry-model .keyborder {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none;
  isolation: isolate;
  overflow: visible;
}

#keyboard .diykeycap-cherry-model .keyborder::before,
#keyboard .diykeycap-cherry-model .keyborder::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#keyboard .diykeycap-cherry-model .keyborder::before {
  z-index: 0;
  background: var(--diykeycap-model-color, #f3f4f6);
  -webkit-mask-image: var(--diykeycap-model-image);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: var(--diykeycap-model-image);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

#keyboard .diykeycap-cherry-model .keyborder::after {
  z-index: 2;
  background-image: var(--diykeycap-model-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  mix-blend-mode: multiply;
  opacity: 0.86;
}

#keyboard .selected .diykeycap-cherry-model .keyborder {
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 0.75px #8e83ff)
    drop-shadow(0 0 1.5px #8e83ff)
    drop-shadow(0 0 4px rgba(117, 105, 255, 0.82))
    drop-shadow(0 0 7px rgba(117, 105, 255, 0.48))
    drop-shadow(0 4px 4px rgba(31, 35, 44, 0.22));
}

#keyboard .hover:not(.selected) .diykeycap-cherry-model .keyborder {
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 1px rgba(142, 131, 255, 0.92))
    drop-shadow(0 0 3px rgba(117, 105, 255, 0.44))
    drop-shadow(0 2px 3px rgba(31, 35, 44, 0.15));
}

/* During color-slider drags, mirror the retained-canvas rendering used by the
   GeekKeyboard customizer and defer Angular/DOM rebuilding until mouseup.
   These rules remain as a fallback while model images are loading. */
#keyboard-bg.diykeycap-color-preview-key .selected .keyborder {
  background-color: var(--diykeycap-preview-color) !important;
}

#keyboard-bg.diykeycap-color-preview-key
  .selected
  .diykeycap-cherry-model
  .keyborder {
  --diykeycap-model-color: var(--diykeycap-preview-color) !important;
}

#keyboard-bg.diykeycap-color-preview-all-labels .selected .keylabel {
  color: var(--diykeycap-preview-color) !important;
}

#keyboard-bg.diykeycap-color-preview-label-0 .selected .keylabel0,
#keyboard-bg.diykeycap-color-preview-label-1 .selected .keylabel1,
#keyboard-bg.diykeycap-color-preview-label-2 .selected .keylabel2,
#keyboard-bg.diykeycap-color-preview-label-3 .selected .keylabel3,
#keyboard-bg.diykeycap-color-preview-label-4 .selected .keylabel4,
#keyboard-bg.diykeycap-color-preview-label-5 .selected .keylabel5,
#keyboard-bg.diykeycap-color-preview-label-6 .selected .keylabel6,
#keyboard-bg.diykeycap-color-preview-label-7 .selected .keylabel7,
#keyboard-bg.diykeycap-color-preview-label-8 .selected .keylabel8,
#keyboard-bg.diykeycap-color-preview-label-9 .selected .keylabel9,
#keyboard-bg.diykeycap-color-preview-label-10 .selected .keylabel10,
#keyboard-bg.diykeycap-color-preview-label-11 .selected .keylabel11 {
  color: var(--diykeycap-preview-color) !important;
}

/* Five stacked drop-shadows across 54-108 selected models are expensive to
   repaint while dragging. Keep one clear silhouette ring for live preview. */
#keyboard-bg.diykeycap-color-preview-active
  .selected
  .diykeycap-cherry-model
  .keyborder {
  filter:
    drop-shadow(0 0 1.5px #7569ff)
    drop-shadow(0 2px 2px rgba(31, 35, 44, 0.2)) !important;
}

/* Key-color drags use one retained canvas, matching the reference customizer's
   canvas render path. Hide only the selected DOM model surfaces while that
   canvas is ready; keep legends above it and preserve the exact Cherry shape. */
#keyboard-bg.diykeycap-color-preview-canvas-active
  .selected
  .diykeycap-cherry-model
  .keyborder {
  z-index: 100 !important;
  filter: none !important;
}

#keyboard-bg.diykeycap-color-preview-canvas-active
  .selected
  .diykeycap-cherry-model
  .keyborder::before,
#keyboard-bg.diykeycap-color-preview-canvas-active
  .selected
  .diykeycap-cherry-model
  .keyborder::after {
  opacity: 0 !important;
}

#keyboard-bg.diykeycap-color-preview-canvas-active .selected .keylabels {
  z-index: 105 !important;
}

#keyboard-bg .diykeycap-key-color-preview-legends .keylabels {
  color: #1f2937;
  text-shadow: none !important;
  font-weight: 500;
  font-family: 'Inter', system-ui, sans-serif !important;
  opacity: 0.9;
  z-index: 105 !important;
  pointer-events: none;
}

/* ISO Enter is one physical J-shaped cap, not two rectangular caps joined
   together. Stretch the dedicated vector (and its artwork mask) over the
   complete KLE footprint, then hide only the legacy HTML fragments. */
#keyboard .diykeycap-cherry-model.diykeycap-iso-enter-model > .keyborder:first-child {
  left: var(--diykeycap-iso-left) !important;
  top: var(--diykeycap-iso-top) !important;
  width: var(--diykeycap-iso-width) !important;
  height: var(--diykeycap-iso-height) !important;
}

#keyboard .diykeycap-cherry-model.diykeycap-iso-enter-model > .keyborder:nth-child(2),
#keyboard .diykeycap-cherry-model.diykeycap-iso-enter-model > .keyborder:nth-child(2) + div {
  display: none !important;
}

/* 4. Legends (Text) */
.keycap .keylabels {
  color: #1f2937; 
  text-shadow: none !important;
  font-weight: 500;
  font-family: 'Inter', system-ui, sans-serif !important;
  opacity: 0.9;
  z-index: 105 !important; /* Ensure text stays above border/background especially when selected */
  pointer-events: none; /* Allow clicks to pass through to the keycap container */
}

/* =========================================
   ADDITIONAL KEYCAP PICKER
   ========================================= */

.diykeycap-open-keycap-picker {
  min-height: 44px;
  padding: 10px 16px;
  font-weight: 700;
}

.diykeycap-keycap-picker-backdrop {
  position: fixed;
  z-index: 2100;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(3px);
}

/* The mobile purchase bar intentionally sits above the editing workspace.
   Raise the toolbar only while its picker is open so the fixed bottom sheet
   receives taps instead of leaking them through to Add to Cart. */
.kb-toolbar.diykeycap-picker-is-open,
body.diykeycap-extra-key-picker-open .kb-toolbar {
  z-index: 2200 !important;
}

.diykeycap-keycap-picker {
  display: flex;
  flex-direction: column;
  width: min(920px, calc(100vw - 48px));
  max-height: min(760px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid #d9dee8;
  border-radius: 20px;
  background: #fbfaf7;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
  color: #111827;
}

.diykeycap-keycap-picker-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}

.diykeycap-keycap-picker-header h3 {
  margin: 0 0 5px;
  font-size: 22px;
  font-weight: 800;
}

.diykeycap-keycap-picker-header p {
  margin: 0;
  color: #667085;
  font-size: 13px;
}

.diykeycap-keycap-picker-close {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #eef1f5;
  color: #344054;
  font-size: 18px;
}

.diykeycap-keycap-row-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 0 0 auto;
  margin: 18px 24px 0;
  overflow: hidden;
  border: 1px solid #d7dce5;
  border-radius: 12px;
  background: #fff;
}

.diykeycap-keycap-row-tabs button {
  min-height: 46px;
  border: 0;
  border-right: 1px solid #e5e7eb;
  background: #fff;
  color: #344054;
  font-weight: 800;
}

.diykeycap-keycap-row-tabs button:last-child {
  border-right: 0;
}

.diykeycap-keycap-row-tabs button.active {
  background: #111827;
  color: #fff;
}

.diykeycap-keycap-picker-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 14px 24px 24px;
}

.diykeycap-keycap-picker-hint {
  margin: 0 0 12px;
  color: #7b8190;
  font-size: 12px;
}

.diykeycap-keycap-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.diykeycap-keycap-option {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dde1e8;
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.diykeycap-keycap-option.selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
}

.diykeycap-keycap-option-hit {
  display: flex;
  width: 100%;
  min-height: 142px;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  gap: 5px;
  padding: 14px 10px 12px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: #172033;
}

.diykeycap-keycap-model {
  display: block;
  max-width: 100%;
  margin: auto;
  background-color: #f6f4ee;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-blend-mode: multiply;
  filter: drop-shadow(0 6px 7px rgba(15, 23, 42, 0.18));
}

.diykeycap-keycap-option-hit strong {
  margin-top: 5px;
  font-size: 14px;
}

.diykeycap-keycap-option-hit small {
  color: #8a91a0;
  font-size: 11px;
}

.diykeycap-keycap-quantity {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.12);
}

.diykeycap-keycap-quantity button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: #eef2ff;
  color: #1d4ed8;
}

.diykeycap-keycap-quantity span {
  min-width: 28px;
  text-align: center;
  font-weight: 800;
}

.diykeycap-keycap-picker-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}

.diykeycap-keycap-picker-footer .btn {
  min-height: 44px;
  border-radius: 10px;
  font-weight: 750;
}

@media (max-width: 767px) {
  .diykeycap-keycap-picker-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .diykeycap-keycap-picker {
    width: 100%;
    max-height: calc(100dvh - 72px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 22px 22px 0 0;
  }

  .diykeycap-keycap-picker-header {
    padding: 18px 16px 14px;
  }

  .diykeycap-keycap-picker-header h3 {
    font-size: 18px;
  }

  .diykeycap-keycap-row-tabs {
    margin: 12px 16px 0;
  }

  .diykeycap-keycap-picker-scroll {
    padding: 12px 16px 18px;
  }

  .diykeycap-keycap-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .diykeycap-keycap-option-hit {
    min-height: 130px;
    padding-right: 6px;
    padding-left: 6px;
  }

  .diykeycap-keycap-picker-footer {
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  }

  .diykeycap-keycap-picker-footer .btn-primary {
    flex: 1 1 auto;
  }
}


/* =========================================
   UI & LAYOUT (Toolbar & Buttons)
   ========================================= */

/* Navbar - Clean White */
.navbar-inverse {
  background-color: white;
  border-bottom: 1px solid #f3f4f6;
  box-shadow: none;
}
.navbar-inverse .navbar-brand { color: var(--text-primary); font-weight: 700; }
.navbar-inverse .navbar-nav > li > a { color: var(--text-secondary); }
.navbar-inverse .navbar-nav > li > a:hover { color: var(--text-primary); background: transparent; }

/* Main Container */
#wrap {
  background-color: var(--bg-color);
  padding-top: 20px;
}
#body_all { max-width: 100%; padding: 0 20px; }

/* Keyboard Area */
#keyboard {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 40px;
}
#keyboard-bg {
  box-shadow: none; 
  background: transparent !important; 
}

/* 
   TOOLBAR BUTTONS - Matching the Image 
   [Add Key] [Delete Keys] [Undo] [Redo] [Cut] [Copy] [Paste]
*/

.btn {
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  border: 1px solid #e5e7eb;
  background-color: white;
  color: #374151;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  margin-right: 4px;
}

.btn:hover {
  background-color: #f9fafb;
  border-color: #d1d5db;
}

/* [Add Key] - Dark Navy */
.btn-primary {
  background-color: #111827;
  border-color: #111827;
  color: white;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #1f2937;
  border-color: #1f2937;
  color: white;
}

/* [Delete Keys] - Red/Pink */
.btn-danger {
  background-color: #fca5a5; /* Light Red/Pink */
  border-color: #fca5a5;
  color: #7f1d1d;
}
.btn-danger:hover {
  background-color: #f87171;
  border-color: #f87171;
  color: white;
}

/* Icons within buttons */
.fa {
  margin-right: 4px;
  color: inherit;
}

/* Button Groups - Remove default joining */
.btn-group > .btn {
  margin-left: 4px;
  border-radius: 6px !important; /* Force rounded corners on all */
}
.btn-group {
  margin-right: 8px;
}

/* Tabs */
.nav-tabs { border-bottom: 1px solid var(--border-color); margin-top: 20px; }
.nav-tabs > li > a { border: none; color: var(--text-secondary); border-radius: var(--radius-ui); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover {
  border: 1px solid var(--border-color);
  border-bottom-color: white;
  color: var(--text-primary);
  font-weight: 600;
  background-color: white;
}
#tab-content {
  border: 1px solid var(--border-color);
  border-top: none;
  background: white;
  border-bottom-left-radius: var(--radius-ui);
  border-bottom-right-radius: var(--radius-ui);
  padding: 20px;
}

/* Form Elements */
.form-control {
  border-radius: var(--radius-ui);
  border-color: #d1d5db;
  box-shadow: none;
}
.form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}