/* ═══════════════════════════════════════════════════════════════════
   🎨 GLOBAL UI TRANSPARENCY
   ═══════════════════════════════════════════════════════════════════ */

/* Main browser window */
#main-window,
#navigator-toolbox,
#browser,
#browser-panel,
#sidebar-box {
  background-color: rgba(0, 54, 54, 0.3) !important;
}

/* Toolbars (tab bar, nav bar, bookmarks bar) */
#TabsToolbar,
#nav-bar,
#PersonalToolbar,
.toolbar-items {
  background-color: rgba(0, 54, 54, 0.3) !important;
  background-image: none !important;
}

/* Sidebar */
#sidebar {
  background-color: rgba(0, 54, 54, 0.3) !important;
}

/* Menus & popups */
menupopup,
panelview,
.panel-subview-body,
.popup-internal-box {
  background-color: rgba(0, 54, 54, 0.3) !important;
}

/* URL bar dropdown */
#urlbar-background,
.urlbarView {
  background-color: rgba(0, 54, 54, 0.3) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   🎨 CSS VARIABLES & THEME OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */

/* Remove forced opaque themes */
:root {
  --toolbar-bgcolor: transparent !important;
  --lwt-accent-color: transparent !important;
  --lwt-toolbar-field-background-color: rgba(0,54,54,0.3) !important;
  --toolbar-field-background-color: rgba(0, 15, 15, 0.3) !important;
  --toolbar-field-focus-background-color: rgba(0, 67, 68, 1) !important;
  --tabs-navbar-separator-color: rgba(0, 0, 0, 0) !important;
}

.tabbrowser-tab[selected="true"] .tab-background,
.tabbrowser-tab[multiselected="true"] .tab-background {
  background-color: rgba(0, 67, 68, 0.3) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   🙈 HIDE UI ELEMENTS
   ═══════════════════════════════════════════════════════════════════ */

/* Hide the normal tab bar */
#TabsToolbar {
  visibility: collapse !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Hide the bookmarks / personal toolbar */
#PersonalToolbar {
  visibility: collapse !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Hide all sidebar headers (History, Bookmarks, etc.) */
/* For old sidebar (sidebar.revamp: false) */
#sidebar-header {
  display: none !important;
}

/* For new revamped sidebar (sidebar.revamp: true) - Firefox 146+ */
#sidebar-panel-header {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   URL SETTINGS
   ═══════════════════════════════════════════════════════════════════ */

/* Always show full URL, even when focused */
#urlbar[focused] #urlbar-input,
#urlbar:not([focused]) #urlbar-input {
  text-align: left !important;
}

/* Disable URL reveal-on-hover behavior */
#urlbar-input {
  overflow: visible !important;
}


#identity-box.extensionPage:has(label[value*="Startpage"]) {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   📏 COMPACT TOP BAR
   ═══════════════════════════════════════════════════════════════════ */

/* Make navigation bar taller than URL bar */
#nav-bar {
  max-height: 40px !important;
  min-height: 40px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Set font size to 13px for top bar elements */
#nav-bar,
#nav-bar * {
  font-size: 13px !important;
}

/* Compact URL bar */
#urlbar,
#urlbar-input {
  font-size: 13px !important;
  min-height: 28px !important;
}

/* Compact toolbar buttons */
#nav-bar toolbarbutton {
  padding: 2px !important;
}

/* Compact URL bar container */
#urlbar-container {
  max-height: 28px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BACKPLATE
   ═══════════════════════════════════════════════════════════════════ */

/* userChrome.css */

/* 1) Set the variable Firefox uses for the tab/content backplate */
:root {
  --tabpanel-background-color: rgba(0, 54, 54, 0.3) !important;
}

/* 2) Override the actual elements that paint behind the page */
#browser,
.browserContainer,
#tabbrowser-tabpanels,
#tabbrowser-tabbox {
  background: rgba(0, 54, 54, 0.3) !important;
  background-color: rgba(0, 54, 54, 0.3) !important;
  background-image: none !important;
}

/* 3) Make the browser element itself not reintroduce another backdrop */
browser[type="content-primary"],
browser[type="content"] {
  background: transparent !important;
  background-color: transparent !important;
}