/* ============================================================
   Silicon Mappers Admin — sm-admin.css
   Only non-Tailwind styles: tokens, scrollbar, transitions,
   third-party overrides (sm-select, Toast, CKEditor, pagination)
   ============================================================ */

/* ── Design Tokens ───────────────────────────────────────── */
:root {
  --sm-bg:        #f8f8f6;
  --sm-surface:   #ffffff;
  --sm-border:    #e8e5de;
  --sm-text:      #1a1a18;
  --sm-muted:     #6b6b63;
  --sm-shadow:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sm-shadow-md: 0 4px 20px rgba(0,0,0,.08);
}

/* ── Base ────────────────────────────────────────────────── */
html { background: var(--sm-bg); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ── Custom Scrollbar ────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc9c1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #b5b1a8; }

/* ── Sidebar ─────────────────────────────────────────────── */
#sidebar { transition: width 220ms cubic-bezier(.4,0,.2,1); overflow: hidden; will-change: width; }
#sidebar.collapsed { width: 64px; }
#sidebar .nav-text, #sidebar .nav-label, #sidebar .nav-arrow, #sidebar .sidebar-logo-full {
  transition: opacity 150ms ease, width 150ms ease;
  white-space: nowrap; overflow: hidden;
}
#sidebar.collapsed .nav-text,
#sidebar.collapsed .nav-label,
#sidebar.collapsed .nav-arrow,
#sidebar.collapsed .sidebar-logo-full { opacity: 0; width: 0; }

/* details/summary treeview reset */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* ── Material Symbols ────────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
  font-size: 18px;
  line-height: 1;
  vertical-align: -4px;
  display: inline-block;
  user-select: none;
  flex-shrink: 0;
}
@keyframes ms-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ms-spin { animation: ms-spin 1s linear infinite; }

/* ── sm-select (custom searchable dropdown) ──────────────── */
.sm-select-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.sm-select-wrapper.w-full { display: block; width: 100%; }

.sm-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  min-width: 140px;
  height: 38px;
  padding: 0 8px 0 12px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--sm-text);
  cursor: pointer;
  text-align: left;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  white-space: nowrap;
  overflow: hidden;
}
.sm-select-btn:hover { border-color: #94a3b8; }
.sm-select-wrapper.is-open .sm-select-btn {
  border-color: #64748b;
  box-shadow: 0 0 0 3px rgba(30,41,59,.07);
  outline: none;
}

.sm-select-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sm-select-label.is-placeholder { color: #94a3b8; }

.sm-select-chevron {
  flex-shrink: 0;
  font-size: 18px !important;
  color: #94a3b8;
  transition: transform 180ms cubic-bezier(.4,0,.2,1);
}
.sm-select-wrapper.is-open .sm-select-chevron { transform: rotate(180deg); }

/* Dropdown panel */
.sm-select-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: var(--sm-shadow-md);
  z-index: 9000;
  overflow: hidden;
}
.sm-select-wrapper.is-open .sm-select-dropdown { display: block; }
.sm-select-dropdown.is-above { top: auto; bottom: calc(100% + 4px); }

/* Search */
.sm-select-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid #f1f5f9;
}
.sm-select-search-icon {
  font-size: 15px !important;
  color: #94a3b8;
  flex-shrink: 0;
  vertical-align: 0 !important;
}
.sm-select-search {
  flex: 1;
  padding: 5px 8px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  outline: none;
  color: var(--sm-text);
  background: #f8fafc;
  transition: border-color 150ms ease, background 150ms ease;
}
.sm-select-search:focus { border-color: #94a3b8; background: #fff; }

/* Options list */
.sm-select-list {
  list-style: none;
  padding: 4px;
  margin: 0;
  max-height: 220px;
  overflow-y: auto;
}
.sm-select-option {
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  color: #334155;
  transition: background 80ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sm-select-option:hover,
.sm-select-option.kb-focus { background: #f1f5f9; color: #1e293b; }
.sm-select-option.is-selected { background: #f1f5f9; color: #1e293b; font-weight: 500; }
.sm-select-option.is-placeholder { color: #94a3b8; }
.sm-select-mark { background: #dbeafe; color: #1e40af; border-radius: 2px; padding: 0 1px; font-style: normal; }
.sm-select-empty { padding: 10px; font-size: 13px; color: #94a3b8; text-align: center; cursor: default; }

/* ── jQuery Toast Overrides ──────────────────────────────── */
.jq-toast-wrap { font-family: 'Inter', sans-serif !important; z-index: 9999; }
.jq-toast-single {
  border-radius: 10px !important;
  box-shadow: var(--sm-shadow-md) !important;
  font-size: 13px !important;
  padding: 14px 18px !important;
  min-width: 240px !important;
  line-height: 1.5 !important;
}
.jq-toast-single h2 { font-size: 14px !important; font-weight: 700 !important; margin-bottom: 4px !important; }
.close-jq-toast-single { font-size: 16px !important; top: 10px !important; right: 12px !important; }
.jq-toast-loader { border-radius: 0 0 10px 10px !important; height: 3px !important; }

/* ── CKEditor ────────────────────────────────────────────── */
.ck.ck-editor__editable_inline { min-height: 220px; border-color: #cbd5e1 !important; font-size: 14px; }
.ck.ck-toolbar { border-color: #cbd5e1 !important; background: #f8fafc !important; }
.ck.ck-editor__top .ck-sticky-panel .ck-toolbar { border-radius: 8px 8px 0 0 !important; }
.ck.ck-editor__main > .ck-editor__editable { border-radius: 0 0 8px 8px !important; }

/* ── Image Preview ───────────────────────────────────────── */
.image-preview-wrapper { position: relative; display: inline-block; }
.image-preview-wrapper img { border-radius: 8px; border: 1px solid #e2e8f0; object-fit: cover; display: block; }

/* ── Laravel Pagination ──────────────────────────────────── */
.pagination { display: flex; gap: 4px; padding: 0; margin: 0; list-style: none; align-items: center; flex-wrap: wrap; }
.pagination li a,
.pagination li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 10px;
  font-size: 13px; font-weight: 500;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 7px;
  color: #475569; text-decoration: none; transition: all 120ms ease;
}
.pagination li a:hover { background: #f8fafc; border-color: #cbd5e1; color: #1e293b; }
.pagination li.active > a,
.pagination li.active > span { background: #1e293b; border-color: #1e293b; color: #fff; }
.pagination li.disabled > a,
.pagination li.disabled > span { opacity: 0.45; pointer-events: none; cursor: default; }

/* ── Utility ─────────────────────────────────────────────── */
::selection { background: #dbeafe; color: #1e293b; }