/* Michigan Tinting edit screen — brand skin.
   Charcoal + brand orange, matching michiganprotectivefilms.com.
   Decap's class names are hashed (css-xxxx-Stem), so everything here
   matches on the stable Stem with [class*="Stem"]. Decap is pinned to
   3.15.1, which keeps these stems stable. */

:root {
  --mt-orange: #FF6300;
  --mt-orange-hover: #ff7a24;
  --mt-orange-soft: rgba(255, 99, 0, 0.12);
  --mt-ink: #0B0A08;
  --mt-ink-2: #141210;
  --mt-hair: rgba(255, 255, 255, 0.09);
  --mt-text: #f5f2ec;
  --mt-dim: rgba(245, 242, 236, 0.62);
  --mt-page: #f3f1ec;
  --mt-blue-off: #ffffff;
}

/* ---------- Login ---------- */
[class*="StyledAuthenticationPage"] {
  background: var(--mt-ink) !important;
  background-image: radial-gradient(circle at 50% 30%, #1a1613 0%, var(--mt-ink) 60%) !important;
}
[class*="CustomIconWrapper"] { width: auto !important; height: auto !important; }
[class*="CustomIconWrapper"] img { max-width: 320px !important; width: 62vw !important; height: auto !important; margin-bottom: 8px !important; }
[class*="LoginButton"] {
  background: var(--mt-orange) !important; color: #fff !important; font-weight: 700 !important;
  padding: 12px 30px !important; border-radius: 999px !important; border: 0 !important;
}
[class*="LoginButton"]:hover { background: var(--mt-orange-hover) !important; }
[class*="GoBackButtonStyle"], [class*="GoBackButtonStyle"] * { color: rgba(255,255,255,.7) !important; }

/* ---------- Top bar ---------- */
[class*="AppHeader"] { background: var(--mt-ink) !important; border-bottom: 1px solid var(--mt-hair) !important; box-shadow: none !important; }
[class*="AppHeaderNavLink"], [class*="AppHeaderButton"], [class*="AppHeaderSiteLink"] { color: var(--mt-dim) !important; }
[class*="AppHeaderNavLink"]:hover, [class*="AppHeaderNavLink"][class*="active"], [class*="AppHeaderNavLink"].active,
[class*="AppHeaderButton"]:hover { color: var(--mt-orange) !important; background: transparent !important; }
[class*="AppHeaderNavLink"] svg, [class*="AppHeaderButton"] svg { color: inherit !important; }
[class*="AppHeaderSiteLink"] { border: 1px solid var(--mt-hair) !important; border-radius: 999px !important; padding: 6px 14px !important; }
[class*="AppHeaderSiteLink"]:hover { border-color: var(--mt-orange) !important; color: var(--mt-orange) !important; }

/* ---------- Page ground ---------- */
[class*="AppMainContainer"], [class*="CollectionContainer"], [class*="CollectionMain"] { background: var(--mt-page) !important; }

/* ---------- Left sidebar (the list of pages) ---------- */
[class*="SidebarContainer"] { background: var(--mt-ink-2) !important; border: 1px solid var(--mt-hair) !important; border-radius: 12px !important; box-shadow: none !important; }
[class*="SidebarHeading"] { color: var(--mt-text) !important; font-weight: 700 !important; letter-spacing: .02em !important; }
[class*="SidebarNavLink"] { color: var(--mt-dim) !important; border-left: 3px solid transparent !important; border-radius: 0 !important; }
[class*="SidebarNavLink"]:hover { color: var(--mt-text) !important; background: rgba(255,255,255,.04) !important; }
[class*="SidebarNavLink"].active, [class*="SidebarNavLink"][class*="active"] {
  color: var(--mt-orange) !important; background: var(--mt-orange-soft) !important; border-left-color: var(--mt-orange) !important;
}
[class*="SidebarNavLink"] svg { color: inherit !important; opacity: .8; }
[class*="SearchContainer"] input, [class*="SearchInput"] { background: var(--mt-ink) !important; color: var(--mt-text) !important; border: 1px solid var(--mt-hair) !important; }
[class*="SearchContainer"] input::placeholder { color: var(--mt-dim) !important; }
[class*="SearchContainer"] svg { color: var(--mt-dim) !important; }

/* ---------- Section list on the right (one card per section) ---------- */
[class*="CollectionTopContainer"] { background: #fff !important; border: 1px solid #e6e2da !important; border-radius: 12px !important; box-shadow: none !important; }
[class*="CollectionTopHeading"] { color: var(--mt-ink) !important; font-weight: 700 !important; }
[class*="CollectionTopDescription"] { color: #5a5650 !important; }
[class*="-ListCard-"] { border: 1px solid #e6e2da !important; border-radius: 12px !important; box-shadow: none !important; transition: border-color .15s, transform .15s !important; }
[class*="-ListCard-"]:hover { border-color: var(--mt-orange) !important; transform: translateY(-1px); }
[class*="ListCardTitle"] { color: var(--mt-ink) !important; font-weight: 600 !important; }
[class*="ViewControlsButton"] { color: #8a857c !important; }
[class*="ViewControlsButton"][class*="active"], [class*="ViewControlsButton"].active { color: var(--mt-orange) !important; }

/* ---------- Editor toolbar ---------- */
[class*="ToolbarContainer"] { background: #fff !important; border-bottom: 1px solid #e6e2da !important; box-shadow: none !important; }
[class*="BackCollection"] { color: #5a5650 !important; }
[class*="BackStatus"] { color: var(--mt-orange) !important; }
[class*="BackArrow"] { color: var(--mt-ink) !important; }
[class*="PublishedButton"], [class*="publishedButton"] { background: var(--mt-orange-soft) !important; color: #b34500 !important; border-color: transparent !important; }
[class*="ToolbarButton"][class*="Primary"], [class*="ToolbarButton"][class*="publish"], [class*="ToolbarButton"][class*="Publish"] {
  background: var(--mt-orange) !important; color: #fff !important; border-color: var(--mt-orange) !important;
}
[class*="ToolbarButton"][class*="Primary"]:hover { background: var(--mt-orange-hover) !important; }
[class*="PreviewLink"], [class*="ToolbarSectionMeta"] a { color: var(--mt-orange) !important; }
[class*="AvatarDropdownButton"], [class*="ToolbarSectionMeta"] [class*="AppHeaderSiteLink"] { background: var(--mt-ink) !important; color: var(--mt-text) !important; }

/* ---------- Fields ---------- */
[class*="FieldLabel"] {
  background: transparent !important; color: var(--mt-ink) !important; font-size: 13px !important; font-weight: 700 !important;
  text-transform: none !important; letter-spacing: 0 !important; padding-left: 0 !important;
}
[class*="ControlContainer"] { background: transparent !important; }
[class*="ControlHint"] { color: #6b665e !important; font-size: 13px !important; }
[class*="TextControl"], input[type="text"], textarea { border: 1px solid #ddd8ce !important; border-radius: 8px !important; font-size: 15px !important; }
[class*="TextControl"]:focus, input[type="text"]:focus, textarea:focus { border-color: var(--mt-orange) !important; box-shadow: 0 0 0 3px var(--mt-orange-soft) !important; outline: 0 !important; }
[class*="NestedObjectLabel"], [class*="TopBarContainer"] { background: #ece8e0 !important; color: var(--mt-ink) !important; }
[class*="TopBarButton"], [class*="ExpandButton"] { color: var(--mt-ink) !important; }
[class*="AddButton"] { background: var(--mt-orange) !important; color: #fff !important; border-radius: 999px !important; }
[class*="AddButton"]:hover { background: var(--mt-orange-hover) !important; }
[class*="ListItem"] { border-color: #ddd8ce !important; }
[class*="FileWidgetButton"] { background: var(--mt-ink) !important; color: var(--mt-text) !important; border-radius: 999px !important; }
[class*="FileWidgetButtonRemove"] { background: transparent !important; color: #b34500 !important; border: 1px solid #f0c9b0 !important; }
[class*="ButtonRound"] { border-color: var(--mt-orange) !important; color: var(--mt-orange) !important; }
[class*="ButtonRound"]:hover, [class*="ButtonRound"][class*="active"] { background: var(--mt-orange) !important; color: #fff !important; }

/* ---------- Panes ----------
   Decap builds the control pane FROM the preview pane's styles, so its class
   string is "PreviewPaneContainer-ControlPaneContainer". Never paint by the
   PreviewPaneContainer stem alone or the editing side goes dark too. The
   preview iframe already carries its own charcoal body. */
[class*="ControlPaneContainer"] { background: #fff !important; }
[class*="PreviewPaneFrame"] { border-left: 1px solid #e6e2da !important; }

/* ---------- Toasts / misc ---------- */
.Toastify__toast--success { background: var(--mt-orange) !important; }
a { color: var(--mt-orange); }