/* ============================================
   SANDA CALCULATOR THEME – CLEAN REPLACEMENT
   Path: /public_html/calculator-app/css/sanda-theme.css
   Load AFTER app.css
   ============================================ */

:root{
  --sanda-bg:         #1a1410;
  --sanda-bg-soft:    #221c16;
  --sanda-card:       #2a221a;
  --sanda-card-2:     #241d16;
  --sanda-text:       #e8ddd0;
  --sanda-text-muted: #a89880;
  --sanda-border:     #3d3028;
  --sanda-gold:       #c9a84c;
  --sanda-gold-light: #e8c96a;
  --sanda-radius:     4px;
  --sanda-transition: 0.3s ease;
}

/* Base */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow-x: visible !important;
  color: var(--sanda-text) !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  line-height: 1.65 !important;
}

/* Remove old standalone app chrome */
.topbar,
.main-nav,
.nav-items,
.nav-help,
.settings,
.settings-menu,
.help-btn,
.brand,
.brand-link,
.brand-logo,
.brand-mark,
.brand-name,
.header,
.header-controls,
.header-spacer,
.footer,
.app-footer,
header,
footer {
  display: none !important;
}

/* Remove old wrappers */
main,
#app,
.app,
.app-wrap,
.container,
.container-fluid,
.embed-wrap,
.hero,
.hero-grid,
.hero-box,
.hero-card,
.prose,
.page-stack-tight,
main.container.app-main {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Content inset */
.tabs-wrap,
.panel {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

/* Typography */
h1, h2, h3, h4, legend {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  color: var(--sanda-text) !important;
}

p,
li,
label,
.small,
.hint,
.muted,
.constraint-hint,
.legend {
  color: var(--sanda-text-muted) !important;
}

a,
a:visited {
  color: var(--sanda-gold) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--sanda-gold-light) !important;
  text-decoration: none !important;
}

/* Tabs wrapper
   NOTE: not sticky, because app is inside iframe */
.tabs-wrap {
  position: relative !important;
  top: auto !important;
  z-index: 20 !important;
  background: linear-gradient(180deg, rgba(26,20,16,0.98), rgba(26,20,16,0.92)) !important;
  backdrop-filter: blur(8px);
  padding: 0 !important;
  margin-top: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Tabs row */
.tabs,
[role="tablist"] {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 1.5rem !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--sanda-border) !important;
  border-radius: 0 !important;
  padding: 0.45rem 0 0.7rem 8px !important;
  margin: 0 !important;
  box-shadow: none !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* FORCE tab visuals harder than app.css */
.tabs button,
.tabs .tab-btn,
[role="tablist"] > button,
[role="tab"] {
  flex: 0 0 auto !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--sanda-text-muted) !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  padding: 0.22rem 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  height: auto !important;
  min-height: 0 !important;
  transition: color var(--sanda-transition), border-color var(--sanda-transition) !important;
}

.tabs button:hover,
.tabs .tab-btn:hover,
[role="tablist"] > button:hover,
[role="tab"]:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--sanda-gold-light) !important;
  border-bottom-color: rgba(201,168,76,0.38) !important;
  box-shadow: none !important;
}

/* Active */
.tabs button[aria-selected="true"],
.tabs .tab-btn[aria-selected="true"],
[role="tab"][aria-selected="true"],
[role="tablist"] > button[aria-selected="true"],
button#tab-ring[aria-selected="true"],
button#tab-domes[aria-selected="true"],
button#tab-bangle[aria-selected="true"],
button#tab-bezel[aria-selected="true"],
button#tab-pendant[aria-selected="true"],
button#tab-decorative[aria-selected="true"] {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--sanda-gold) !important;
  border-bottom: 1px solid var(--sanda-gold) !important;
  box-shadow: none !important;
  letter-spacing: 0.18em !important;
}

/* Inactive explicit */
button#tab-ring[aria-selected="false"],
button#tab-domes[aria-selected="false"],
button#tab-bangle[aria-selected="false"],
button#tab-bezel[aria-selected="false"],
button#tab-pendant[aria-selected="false"],
button#tab-decorative[aria-selected="false"] {
  color: var(--sanda-text-muted) !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* First panel spacing */
.panel:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.panel:first-of-type .card:first-of-type {
  margin-top: 0 !important;
  padding-top: 1rem !important;
}

/* Cards and panels */
.panel,
.card,
fieldset,
.result,
.stone-detail,
.stone-helper,
.tpl-illus,
#about-modal,
#license-modal {
  background: linear-gradient(180deg, rgba(42,34,26,0.96), rgba(36,29,22,0.96)) !important;
  border: 1px solid var(--sanda-border) !important;
  border-radius: var(--sanda-radius) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18) !important;
  color: var(--sanda-text) !important;
}

.card,
.panel {
  padding: 1.35rem !important;
}

fieldset {
  padding: 1rem !important;
}

legend {
  padding: 0 0.45rem !important;
  color: var(--sanda-text) !important;
}

/* Inputs */
input,
select,
textarea {
  width: 100%;
  background: rgba(26,20,16,0.92) !important;
  color: var(--sanda-text) !important;
  border: 1px solid var(--sanda-border) !important;
  border-radius: var(--sanda-radius) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--sanda-text-muted) !important;
  opacity: 0.82 !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--sanda-gold) !important;
  box-shadow: 0 0 0 1px rgba(201,168,76,0.24) !important;
}

/* Buttons */
button,
button.action,
button.print,
button.secondary,
button.reset,
button.ghost,
.action,
.print,
.secondary,
.reset,
.ghost,
.btn,
.btn-primary,
.btn-secondary,
.actions button,
.btnrow button,
.btn-row button,
.row > button {
  background: transparent !important;
  color: var(--sanda-text) !important;
  border: 1px solid var(--sanda-border) !important;
  border-radius: var(--sanda-radius) !important;
  box-shadow: none !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  line-height: 1.1 !important;
}

button:hover,
button.action:hover,
button.print:hover,
button.secondary:hover,
button.reset:hover,
button.ghost:hover,
.action:hover,
.print:hover,
.secondary:hover,
.reset:hover,
.ghost:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.actions button:hover,
.btnrow button:hover,
.btn-row button:hover,
.row > button:hover {
  background: rgba(201,168,76,0.08) !important;
  color: var(--sanda-gold) !important;
  border-color: var(--sanda-gold) !important;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* Stones */
button.stone-card,
.stone-card {
  background: rgba(70,108,98,0.82) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

button.stone-card:hover,
.stone-card:hover {
  border-color: rgba(201,168,76,0.55) !important;
  background: rgba(70,108,98,0.92) !important;
}

.stone-card[aria-selected="true"] {
  box-shadow: 0 0 0 1px rgba(201,168,76,0.55) inset !important;
}

/* Mini previews */
#rw-templatePreview,
#bz-mini,
#cl-mini,
#pd-mini,
#fl-mini,
#cat-mini {
  background: rgba(26,20,16,0.92) !important;
  border: 1px dashed var(--sanda-border) !important;
  color: var(--sanda-text-muted) !important;
}

/* Overlays */
#about-overlay,
#license-overlay {
  background: rgba(0,0,0,0.65) !important;
}

@media (max-width: 768px) {
  .tabs-wrap,
  .panel {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  .card,
  .panel {
    padding: 1rem !important;
  }

  .tabs,
  [role="tablist"] {
    gap: 1rem !important;
    padding-left: 4px !important;
  }

  .tabs button,
  .tab-btn,
  [role="tab"] {
    font-size: 0.76rem !important;
  }
}


/* TAB POLISH */

.tabs,
[role="tablist"] {
  gap: 1.2rem !important;
}

.tabs button,
.tabs .tab-btn,
[role="tablist"] > button,
[role="tab"] {
  font-size: 0.78rem !important;
  letter-spacing: 0.10em !important;
}

.tabs button[aria-selected="true"],
.tabs .tab-btn[aria-selected="true"],
[role="tab"][aria-selected="true"],
[role="tablist"] > button[aria-selected="true"] {
  border-bottom: 1px solid var(--sanda-gold) !important;
  box-shadow: none !important;
}


/* Reduce top gap above calculator tabs */
main.container.app-main,
.app-main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.tabs-wrap {
  padding-top: 0 !important;
  margin-top: -14px !important;
}

/* === HARD TEXT OVERRIDE FOR RIGHT PANEL / DETAILS === */
.stone-detail,
.stone-detail *,
.stone-helper,
.stone-helper *,
.tpl-illus,
.tpl-illus * {
  color: var(--sanda-text) !important;
}

/* labels / keys slightly muted */
.stone-detail .kv .k,
.tpl-illus .cap,
.small,
.hint,
.constraint-hint {
  color: var(--sanda-text-muted) !important;
}


/* Pendant mini sketch – force gold lines instead of black */
#pd-mini svg,
#pd-mini svg * {
  stroke: var(--sanda-gold) !important;
  color: var(--sanda-gold) !important;
}

#pd-mini svg path,
#pd-mini svg rect,
#pd-mini svg circle,
#pd-mini svg ellipse,
#pd-mini svg line,
#pd-mini svg polyline,
#pd-mini svg polygon {
  stroke: var(--sanda-gold) !important;
  fill: none !important;
}

/* if any dots/hinge markers should be filled */
#pd-mini svg .filled,
#pd-mini svg [fill]:not([fill="none"]) {
  fill: var(--sanda-gold) !important;
}

body {
  --sanda-gold-glow: rgba(201,168,76,0.25);
}

#pd-mini svg {
  filter: drop-shadow(0 0 6px var(--sanda-gold-glow));
}