/* ── KREOMOBILA Admin Theme (from admin-dashboard.html) ───────── */
:root {
  --ui-bg: #f7f6f3;
  --ui-surface: #ffffff;
  --ui-surface-2: #f0ede8;
  --ui-text: #1c1a17;
  --ui-text-secondary: #7c786f;
  --ui-muted: #7c786f;
  --ui-border: #e5e2dc;
  --ui-border-soft: rgba(229, 226, 220, 0.7);
  --ui-accent: #c8773a;
  --ui-accent-rgb: 200, 119, 58;
  --ui-accent-soft: rgba(200, 119, 58, 0.12);
  --ui-accent-strong: #a55f28;
  --ui-success: #3a7c5b;
  --ui-shadow-sm: 0 1px 3px rgba(28, 26, 23, 0.06);
  --ui-shadow: 0 6px 18px rgba(28, 26, 23, 0.07);
  --ui-shadow-lg: 0 12px 32px rgba(28, 26, 23, 0.10);
  --ui-radius: 8px;
  --ui-radius-lg: 10px;
}

/* ── Base ─────────────────────────────────────────────────────── */
body,
#nc-root {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  font-family: "DM Sans", Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

::selection {
  background: rgba(var(--ui-accent-rgb), 0.18);
}

/* Scrollbar (Webkit) */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ui-border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-accent-rgb), 0.35); }

[class*="CollectionTopContainer"],
[class*="EditorContainer"],
[class*="PaneContainer"] {
  background: transparent !important;
}

/* Prevent Contents/Media bar from overlapping the ID field and form */
[class*="CollectionTopContainer"] {
  padding-top: 52px !important;
}
#km-existing-projects-wrap {
  margin-top: 0;
}

/* ── Header & Sidebar ─────────────────────────────────────────── */
[class*="AppHeader"],
[class*="WorkflowTop"] {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow-sm);
}

[class*="SidebarContainer"] {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: 2px 0 12px rgba(28, 26, 23, 0.04);
}

[class*="SidebarContainer"] a,
[class*="SidebarContainer"] [class*="NavLink"] {
  border-radius: 8px !important;
  transition: background 0.12s ease, color 0.12s ease;
}

[class*="SidebarContainer"] a:hover,
[class*="SidebarContainer"] [class*="NavLink"]:hover {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

/* Sidebar active item: orange accent like mockup */
[class*="SidebarContainer"] a[class*="active"],
[class*="SidebarContainer"] [class*="NavLink"][class*="active"],
[class*="SidebarContainer"] a[aria-current="true"],
[class*="SidebarContainer"] [class*="NavLink"][aria-current="true"] {
  background: #fdf0e6 !important;
  color: var(--ui-accent) !important;
  font-weight: 500 !important;
  border-left: 3px solid var(--ui-accent);
  border-radius: 0 6px 6px 0 !important;
}

/* ── Cards & Panes ────────────────────────────────────────────── */
[class*="Card"],
[class*="ControlPaneContainer"],
[class*="PreviewPaneContainer"],
[class*="Widget"] {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow);
}

[class*="Card"]:hover,
[class*="Widget"]:hover {
  border-color: rgba(var(--ui-accent-rgb), 0.28) !important;
  box-shadow: var(--ui-shadow), 0 0 0 1px rgba(var(--ui-accent-rgb), 0.08);
}

[class*="CollectionHeader"] {
  border-bottom-color: var(--ui-border) !important;
}

/* ── List entries ──────────────────────────────────────────────── */
[class*="ListCard"] {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border-soft) !important;
  border-radius: var(--ui-radius) !important;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

[class*="ListCard"]:hover {
  background: var(--ui-surface-2) !important;
  border-color: rgba(var(--ui-accent-rgb), 0.24) !important;
  box-shadow: 0 4px 14px rgba(28, 26, 23, 0.06);
}

/* ── Form fields ──────────────────────────────────────────────── */
input,
textarea,
select {
  background: #ffffff !important;
  color: var(--ui-text) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  min-height: 44px;
  padding: 10px 12px !important;
  font-size: 14px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Select/dropdown: prevent left icon/overlay from hiding category text */
select {
  padding-left: 38px !important;
  padding-right: 36px !important;
}
/* Value area: push text right so it is not under the left box */
[class*="Select"] [class*="value"],
[class*="Select"] [class*="Value"],
[class*="SelectControl"] > div:first-child,
[class*="Dropdown"] [class*="control"],
[class*="control"] [class*="value"],
[class*="control"] [class*="Value"] {
  padding-left: 48px !important;
}
/* Hide the left overlay/icon that hides the first letters (Decap/react-select) */
[class*="SelectControl"] > div::before,
[class*="SelectControl"] [class*="ValueContainer"]::before,
[class*="Select"] [class*="control"]::before {
  display: none !important;
}
[class*="SelectControl"] > div > div:first-child:not([class*="Value"]):not([class*="value"]),
[class*="SelectControl"] [class*="IndicatorsContainer"] + [class*="ValueContainer"] ~ *,
[class*="SingleValue"] + *[class*="Indicator"] {
  /* leave indicators as-is; target only left-side overlay */
}
/* If the overlapping box is the first child of the control wrapper */
#nc-root [class*="Widget"] [class*="control"] > div:first-child:only-of-type {
  padding-left: 48px !important;
}
#nc-root label + div [class*="control"] {
  padding-left: 0;
}
#nc-root label + div [class*="control"] > div,
#nc-root label + div [class*="control"] [class*="ValueContainer"],
#nc-root label + div [class*="control"] [class*="value"] {
  padding-left: 52px !important;
  box-sizing: border-box !important;
}
/* Remove inner focus ring that can look like a box over the text */
[class*="SelectControl"] > div,
[class*="SelectControl"] [class*="control"] {
  box-shadow: none !important;
  outline: none !important;
}
[class*="SelectControl"]:focus-within {
  box-shadow: 0 0 0 3px var(--ui-accent-soft) !important;
  outline: none !important;
}

textarea {
  min-height: 100px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 3px var(--ui-accent-soft), 0 1px 2px rgba(10, 37, 64, 0.06) !important;
  outline: none !important;
}

label,
[class*="Label"] {
  color: var(--ui-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Buttons ──────────────────────────────────────────────────── */
button {
  border-radius: 8px !important;
  min-height: 36px;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: all 0.12s ease !important;
}

button[class*="Button"] {
  background: #ffffff !important;
  color: var(--ui-text) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow-sm);
}

button[class*="Button"]:hover {
  background: #fafcff !important;
  border-color: rgba(var(--ui-accent-rgb), 0.4) !important;
  box-shadow: 0 4px 12px rgba(10, 37, 64, 0.08);
  transform: translateY(-1px);
}

button[class*="Button"]:active {
  transform: translateY(0);
  box-shadow: var(--ui-shadow-sm);
}

button[class*="SaveButton"],
button[class*="PublishButton"] {
  background: var(--ui-accent) !important;
  color: #fff !important;
  border: 1px solid var(--ui-accent-strong) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(var(--ui-accent-rgb), 0.35);
  letter-spacing: 0.01em;
}

button[class*="SaveButton"]:hover,
button[class*="PublishButton"]:hover {
  background: var(--ui-accent-strong) !important;
  box-shadow: 0 8px 20px rgba(var(--ui-accent-rgb), 0.4);
  transform: translateY(-1px);
}

/* ── Toolbar ──────────────────────────────────────────────────── */
[class*="Toolbar"],
[class*="EditorToolbar"] {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: var(--ui-border) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── Media widget ─────────────────────────────────────────────── */
[class*="ImageControl"],
[class*="MediaLibraryCard"],
[class*="FileUpload"] {
  border-radius: var(--ui-radius) !important;
}

[class*="ImageControl"] [class*="Upload"],
[class*="FileUpload"] {
  border: 1px dashed rgba(var(--ui-accent-rgb), 0.35) !important;
  background: linear-gradient(180deg, #fafaff 0%, #f5f4ff 100%) !important;
  border-radius: var(--ui-radius) !important;
}

[class*="ImageControl"] img {
  border-radius: 8px !important;
  border: 1px solid var(--ui-border-soft);
  object-fit: cover;
}

/* ── Drag handles ─────────────────────────────────────────────── */
[class*="ListItem"] [class*="DragHandle"],
[class*="SortableItem"] [class*="DragHandle"] {
  opacity: 0.4;
  transition: opacity 0.12s ease;
}

[class*="ListItem"]:hover [class*="DragHandle"],
[class*="SortableItem"]:hover [class*="DragHandle"] {
  opacity: 0.85;
}

/* ── Gallery thumbnails ───────────────────────────────────────── */
.km-gallery-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}

.km-gallery-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ui-border-soft);
  flex: 0 0 52px;
  background: #f0f2f6;
}

.km-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.km-gallery-thumb--error {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f2f6;
}

.km-gallery-thumb--error::before {
  content: "!";
  color: var(--ui-muted);
  font-weight: 700;
  font-size: 14px;
}

.km-gallery-url-hidden {
  display: none !important;
}

/* ── Gallery (dropzone removed; use Add galerie + Choose image) ─── */
/* Spacing between Add button and list */
[class*="ObjectControl"] [class*="ListItem"]:first-child,
[class*="ObjectControl"] [class*="SortableItem"]:first-child {
  margin-top: 10px;
}

/* ── Media library modal ──────────────────────────────────────── */
[role="dialog"] {
  border-radius: var(--ui-radius-lg) !important;
  overflow: hidden;
}

[role="dialog"] [class*="MediaLibrary"],
[role="dialog"] [class*="AssetManager"] {
  background: #ffffff !important;
}

[role="dialog"] [class*="CardGrid"],
[role="dialog"] [class*="Grid"] {
  gap: 12px !important;
}

[role="dialog"] [class*="MediaLibraryCard"],
[role="dialog"] [class*="Asset"],
[role="dialog"] [class*="Card"] {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: #ffffff !important;
  box-shadow: var(--ui-shadow-sm);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

[role="dialog"] [class*="MediaLibraryCard"]:hover,
[role="dialog"] [class*="Asset"]:hover,
[role="dialog"] [class*="Card"]:hover {
  border-color: rgba(var(--ui-accent-rgb), 0.3) !important;
  box-shadow: 0 6px 16px rgba(var(--ui-accent-rgb), 0.12);
  transform: translateY(-1px);
}

[role="dialog"] [class*="MediaLibraryCard"] img,
[role="dialog"] [class*="Asset"] img,
[role="dialog"] [class*="Card"] img {
  border-radius: 8px !important;
  border: 1px solid var(--ui-border-soft);
}

/* ── Selected state ───────────────────────────────────────────── */
[role="dialog"] [class*="MediaLibraryCard"][aria-selected="true"],
[role="dialog"] [class*="MediaLibraryCard"][aria-pressed="true"],
[role="dialog"] [class*="MediaLibraryCard"][class*="Selected"],
[role="dialog"] [class*="MediaLibraryCard"][class*="selected"],
[role="dialog"] [class*="Asset"][aria-selected="true"],
[role="dialog"] [class*="Asset"][aria-pressed="true"],
[role="dialog"] [class*="Asset"][class*="Selected"],
[role="dialog"] [class*="Asset"][class*="selected"],
[role="dialog"] [class*="Card"][aria-selected="true"],
[role="dialog"] [class*="Card"][aria-pressed="true"],
[role="dialog"] [class*="Card"][class*="Selected"],
[role="dialog"] [class*="Card"][class*="selected"] {
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 3px var(--ui-accent-soft), 0 8px 20px rgba(var(--ui-accent-rgb), 0.14) !important;
  background: rgba(var(--ui-accent-rgb), 0.06) !important;
}

[role="dialog"] .km-media-selected {
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 3px var(--ui-accent-soft), 0 10px 24px rgba(var(--ui-accent-rgb), 0.16) !important;
  background: rgba(var(--ui-accent-rgb), 0.08) !important;
  position: relative;
}

[role="dialog"] .km-media-selected::before {
  content: "Selected";
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ui-accent);
  border-radius: 999px;
  padding: 3px 8px;
}

[role="dialog"] .km-media-selected::after {
  content: "\2713";
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ui-accent);
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  font-weight: 700;
}

[role="dialog"] .km-multi-upload-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--ui-accent-strong);
  background: rgba(var(--ui-accent-rgb), 0.08);
  border: 1px solid rgba(var(--ui-accent-rgb), 0.2);
  border-radius: 8px;
  padding: 6px 10px;
  font-weight: 500;
}

/* ── Theme overrides: align with admin-dashboard.html ──────────── */
::selection { background: rgba(var(--ui-accent-rgb), 0.18); }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: rgba(229, 226, 220, 0.95); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-accent-rgb), 0.35); }

/* Tabs (Contents / Media): orange active like mockup */
[class*="WorkflowTop"] [role="tab"],
[class*="WorkflowTop"] a[class*="Tab"],
[class*="WorkflowTop"] button[class*="Tab"] {
  color: var(--ui-text-secondary) !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
}
[class*="WorkflowTop"] [role="tab"][aria-selected="true"],
[class*="WorkflowTop"] a[class*="Tab"][class*="active"],
[class*="WorkflowTop"] a[class*="Tab"][aria-current="true"],
[class*="WorkflowTop"] button[class*="Tab"][class*="active"],
[class*="WorkflowTop"] button[class*="Tab"][aria-selected="true"] {
  color: var(--ui-accent) !important;
  border-bottom-color: var(--ui-accent) !important;
  font-weight: 600 !important;
}

/* Primary CTA: "+ New" button orange (Decap may use AddButton, NewButton, or similar) */
button[class*="AddButton"],
button[class*="NewButton"],
a[class*="AddButton"],
a[class*="NewButton"],
[class*="CollectionTop"] a[href*="new"],
[class*="CollectionHeader"] a[href*="new"] {
  background: var(--ui-accent) !important;
  color: #fff !important;
  border: 1px solid var(--ui-accent-strong) !important;
  font-weight: 600 !important;
}
button[class*="AddButton"]:hover,
button[class*="NewButton"]:hover,
a[class*="AddButton"]:hover,
a[class*="NewButton"]:hover,
[class*="CollectionTop"] a[href*="new"]:hover,
[class*="CollectionHeader"] a[href*="new"]:hover {
  background: var(--ui-accent-strong) !important;
  color: #fff !important;
}

[class*="CollectionHeader"] [class*="Heading"],
[class*="CollectionHeader"] h1,
[class*="CollectionHeader"] h2 {
  font-family: "Playfair Display", serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

[class*="Card"]:hover,
[class*="Widget"]:hover {
  border-color: rgba(var(--ui-accent-rgb), 0.28) !important;
  box-shadow: var(--ui-shadow), 0 0 0 1px rgba(var(--ui-accent-rgb), 0.08) !important;
}

[class*="ListCard"]:hover {
  border-color: rgba(var(--ui-accent-rgb), 0.24) !important;
  box-shadow: 0 4px 14px rgba(28, 26, 23, 0.06) !important;
}

button[class*="Button"]:hover {
  background: var(--ui-bg) !important;
  border-color: rgba(var(--ui-accent-rgb), 0.4) !important;
  box-shadow: 0 4px 12px rgba(28, 26, 23, 0.08) !important;
}

button[class*="SaveButton"],
button[class*="PublishButton"] {
  box-shadow: 0 6px 16px rgba(var(--ui-accent-rgb), 0.22) !important;
}

button[class*="SaveButton"]:hover,
button[class*="PublishButton"]:hover {
  box-shadow: 0 10px 22px rgba(var(--ui-accent-rgb), 0.28) !important;
}

[class*="ImageControl"] [class*="Upload"],
[class*="FileUpload"] {
  border-color: rgba(var(--ui-accent-rgb), 0.32) !important;
  background: linear-gradient(180deg, #ffffff 0%, rgba(var(--ui-accent-rgb), 0.07) 100%) !important;
}

[role="dialog"] [class*="MediaLibraryCard"]:hover,
[role="dialog"] [class*="Asset"]:hover,
[role="dialog"] [class*="Card"]:hover {
  border-color: rgba(var(--ui-accent-rgb), 0.32) !important;
  box-shadow: 0 6px 16px rgba(var(--ui-accent-rgb), 0.12) !important;
}

[role="dialog"] [class*="MediaLibraryCard"][aria-selected="true"],
[role="dialog"] [class*="MediaLibraryCard"][aria-pressed="true"],
[role="dialog"] [class*="MediaLibraryCard"][class*="Selected"],
[role="dialog"] [class*="MediaLibraryCard"][class*="selected"],
[role="dialog"] [class*="Asset"][aria-selected="true"],
[role="dialog"] [class*="Asset"][aria-pressed="true"],
[role="dialog"] [class*="Asset"][class*="Selected"],
[role="dialog"] [class*="Asset"][class*="selected"],
[role="dialog"] [class*="Card"][aria-selected="true"],
[role="dialog"] [class*="Card"][aria-pressed="true"],
[role="dialog"] [class*="Card"][class*="Selected"],
[role="dialog"] [class*="Card"][class*="selected"] {
  box-shadow: 0 0 0 3px var(--ui-accent-soft), 0 8px 20px rgba(var(--ui-accent-rgb), 0.14) !important;
  background: rgba(var(--ui-accent-rgb), 0.08) !important;
}

[role="dialog"] .km-media-selected {
  box-shadow: 0 0 0 3px var(--ui-accent-soft), 0 10px 24px rgba(var(--ui-accent-rgb), 0.16) !important;
  background: rgba(var(--ui-accent-rgb), 0.10) !important;
}

[role="dialog"] .km-multi-upload-hint {
  background: rgba(var(--ui-accent-rgb), 0.08) !important;
  border-color: rgba(var(--ui-accent-rgb), 0.2) !important;
}