/**
 * Calendartrol: ONE backdrop = theme suite backdrop (html::before) only.
 * Mailtrol/Contactrol glass-island parity.
 */

html[data-trol-suite-backdrop="1"] {
  --cal-glass-fill: var(--trol-layer-listrow-transparent, color-mix(in srgb, #0a0806 38%, transparent));
  --cal-glass-fill-hover: var(--trol-layer-listrow-transparent-hover, color-mix(in srgb, var(--text, #e8eaed) 10%, var(--cal-glass-fill)));
  --cal-glass-fill-active: var(--trol-layer-listrow-transparent-active, color-mix(in srgb, var(--family-bright, #c4a574) 22%, var(--cal-glass-fill)));
  --cal-glass-edge: var(--trol-layer-listrow-transparent-edge, 0 0 0 1px rgba(255, 255, 255, 0.07));
  --cal-glass-shadow: var(--trol-layer-listrow-transparent-shadow, 0 2px 10px rgba(0, 0, 0, 0.32));
  --cal-glass-radius: 10px;
  --cal-glass-gap: 6px;
  --cal-reading-glass: var(--trol-layer-reading-pane-transparent, var(--cal-glass-fill));
  --cal-sidebar-island-glass: var(--trol-layer-sidebar-island-transparent, var(--cal-glass-fill));
  --cal-floating-island-glass: var(--trol-layer-floating-island-material, var(--cal-glass-fill));
  --cal-nav-rail-glass: var(--trol-layer-nav-rail-transparent, transparent);
  --cal-cmdbar-glass: var(--trol-layer-cmdbar-material, transparent);
  --cal-glass-inset: 8px;
}

html[data-trol-suite-backdrop="1"],
html[data-trol-suite-backdrop="1"] body {
  background-color: transparent !important;
  background-image: none !important;
}

html[data-trol-suite-backdrop="1"][data-trol-texture][data-style]:not([data-ui-theme]) .cal-shell,
html[data-trol-suite-backdrop="1"][data-trol-texture][data-style]:not([data-ui-theme]) .cal-wrap,
html[data-trol-suite-backdrop="1"][data-trol-texture][data-style]:not([data-ui-theme]) main.cal-wrap,
html[data-trol-suite-backdrop="1"][data-trol-texture][data-style]:not([data-ui-theme]) .cal-sidebar,
html[data-trol-suite-backdrop="1"][data-trol-texture][data-style]:not([data-ui-theme]) .cal-sidebar-island,
html[data-trol-suite-backdrop="1"][data-trol-texture][data-style]:not([data-ui-theme]) .trol-island-folder,
html[data-trol-suite-backdrop="1"][data-trol-texture][data-style]:not([data-ui-theme]) .trol-island-folder__body {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-trol-suite-backdrop="1"][data-trol-texture][data-style]:not([data-ui-theme]) .cal-shell::before,
html[data-trol-suite-backdrop="1"][data-trol-texture][data-style]:not([data-ui-theme]) .cal-shell::after,
html[data-trol-suite-backdrop="1"][data-trol-texture][data-style]:not([data-ui-theme]) .cal-wrap::before,
html[data-trol-suite-backdrop="1"][data-trol-texture][data-style]:not([data-ui-theme]) .cal-wrap::after,
html[data-trol-suite-backdrop="1"][data-trol-texture][data-style]:not([data-ui-theme]) main.cal-wrap::before,
html[data-trol-suite-backdrop="1"][data-trol-texture][data-style]:not([data-ui-theme]) main.cal-wrap::after,
html[data-trol-suite-backdrop="1"][data-trol-texture][data-style]:not([data-ui-theme]) .cal-sidebar::before,
html[data-trol-suite-backdrop="1"][data-trol-texture][data-style]:not([data-ui-theme]) .cal-sidebar::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
}

html[data-trol-suite-backdrop="1"] .cal-card,
html[data-trol-suite-backdrop="1"] .cal-stat,
html[data-trol-suite-backdrop="1"] .cal-table tbody tr,
html[data-trol-suite-backdrop="1"] .trol-island-folder__tab {
  background: var(--cal-glass-fill) !important;
  background-color: var(--cal-glass-fill) !important;
  background-image: none !important;
  box-shadow: var(--cal-glass-edge), var(--cal-glass-shadow) !important;
  border: none !important;
  border-radius: var(--cal-glass-radius) !important;
}

html[data-trol-suite-backdrop="1"] .cal-card,
html[data-trol-suite-backdrop="1"] .cal-stat,
html[data-trol-suite-backdrop="1"] .cal-table tbody tr {
  margin: 0 var(--cal-glass-inset) var(--cal-glass-gap) !important;
}

html[data-trol-suite-backdrop="1"] .cal-card::before,
html[data-trol-suite-backdrop="1"] .cal-card::after,
html[data-trol-suite-backdrop="1"] .cal-stat::before,
html[data-trol-suite-backdrop="1"] .cal-stat::after,
html[data-trol-suite-backdrop="1"] .cal-table tbody tr::before,
html[data-trol-suite-backdrop="1"] .cal-table tbody tr::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
}

html[data-trol-suite-backdrop="1"] .cal-table tbody tr:hover {
  background-color: var(--cal-glass-fill-hover) !important;
  box-shadow: var(--cal-glass-edge), var(--cal-glass-shadow),
    inset 0 0 0 1px color-mix(in srgb, var(--family-bright, #c4a574) 35%, transparent) !important;
  transform: none !important;
}

html[data-trol-suite-backdrop="1"] .cal-topbar {
  background:
    var(--trol-layer-topbar-material, linear-gradient(180deg,
      color-mix(in srgb, #1f1410 86%, transparent) 0%,
      color-mix(in srgb, #1f1410 82%, transparent) 100%)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--family-bright, #c4a574) 16%, transparent) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--family-bright, #c4a574) 8%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 42%, transparent) !important;
  position: relative;
  z-index: 35;
  isolation: isolate;
}

/* ===== MOBILE: glass calendar cards/rows ===== */
@media (max-width: 900px) {
  html[data-trol-suite-backdrop="1"] .cal-wrap,
  html[data-trol-suite-backdrop="1"] main.cal-wrap {
    background: var(--cal-reading-glass) !important;
    background-color: var(--cal-reading-glass) !important;
    background-image: none !important;
    box-shadow: var(--cal-glass-edge), var(--cal-glass-shadow) !important;
    border-radius: var(--cal-glass-radius) !important;
  }

  html[data-trol-suite-backdrop="1"] .cal-card,
  html[data-trol-suite-backdrop="1"] .cal-stat,
  html[data-trol-suite-backdrop="1"] .cal-table tbody tr {
    background: var(--cal-glass-fill) !important;
    background-color: var(--cal-glass-fill) !important;
    background-image: none !important;
    box-shadow: var(--cal-glass-edge), var(--cal-glass-shadow) !important;
    border-radius: var(--cal-glass-radius) !important;
    margin: 0 var(--cal-glass-inset) var(--cal-glass-gap) !important;
  }
}

/* ===== LAYER CONTRACT: nav / sidebar / floating / reading / cmdbar / tray ===== */
html[data-trol-suite-backdrop="1"] .cal-sidebar-nav {
  background-color: var(--cal-nav-rail-glass) !important;
}
html[data-trol-suite-backdrop="1"] .cal-sidebar {
  background-color: var(--cal-nav-rail-glass) !important;
}
html[data-trol-suite-backdrop="1"] .cal-sidebar-island {
  background: var(--cal-sidebar-island-glass) !important;
  background-color: var(--cal-sidebar-island-glass) !important;
}
html[data-trol-suite-backdrop="1"] .trol-island-folder__tab {
  background: var(--cal-sidebar-island-glass) !important;
  background-color: var(--cal-sidebar-island-glass) !important;
}
html[data-trol-suite-backdrop="1"] .cal-wrap {
  background: var(--cal-reading-glass) !important;
  background-color: var(--cal-reading-glass) !important;
}
html[data-trol-suite-backdrop="1"] main.cal-wrap {
  background: var(--cal-reading-glass) !important;
  background-color: var(--cal-reading-glass) !important;
}
/* LAYER CONTRACT: modal material (inherit when unset = byte-identical) */
html[data-trol-suite-backdrop="1"] .ctx-modal,
html[data-trol-suite-backdrop="1"] .ctrol-modal-card {
  background: var(--trol-layer-modal-material, inherit) !important;
  background-color: var(--trol-layer-modal-material, inherit) !important;
}
html[data-trol-suite-backdrop="1"][data-trol-island-texture] .ctx-modal,
html[data-trol-suite-backdrop="1"][data-trol-island-texture] .ctrol-modal-card {
  background-color: var(--trol-layer-modal-material, transparent) !important;
  background-image: none !important;
}

/* LAYER CONTRACT: primary / hardware buttons (inherit when unset) */
html[data-trol-suite-backdrop="1"] .day-btn:not(.day-btn-ghost):not(.day-btn-danger),
html[data-trol-suite-backdrop="1"] .pht-btn-primary,
html[data-trol-suite-backdrop="1"] .cal-btn-primary,
html[data-trol-suite-backdrop="1"] .st-btn-primary {
  background: var(--trol-layer-button-hardware-material, inherit) !important;
  background-image: var(--trol-layer-button-hardware-material, inherit) !important;
  filter: grayscale(var(--trol-layer-button-hardware-bw, 0)) !important;
}