/* ============================================================
   Calabria Branding — Piwigo Theme Override
   Replaces orange (#ff7700 / #ffa646 / #ffa744) with
   project purple (#AE35A5 / #BE5ABE / #C85BC0).
   Applies to admin backoffice + login/standard pages.
   Edit only this file to customise or remove the branding.
   ============================================================ */

/* ----------------------------------------------------------
   LOGIN / STANDARD PAGES  (identification.php, register…)
   ---------------------------------------------------------- */

/* Page background — replace peach gradient with soft purple */
#theIdentificationPage .light,
#theRegisterPage .light,
#thePasswordPage .light,
#theProfilePage .light {
  background: linear-gradient(75.69deg, #EDD5EC 7.64%, #FAF3FA 77.87%) !important;
}

/* Piwigo logo → project logo */
#piwigo-logo {
  content: url('assets/logo-cs-nero.svg');
  width: 160px;
  height: auto;
}

/* Login / submit button */
.btn-main,
.btn.btn-main {
  background-color: #AE35A5 !important;
  color: #ffffff !important;
}

.btn-main:hover,
.btn.btn-main:hover {
  background-color: #8A298E !important;
}

/* Input focus border */
.input-container:focus-within,
.input-modal:focus-within {
  border: 1px solid #AE35A5 !important;
}

/* Link hover colour */
#theIdentificationPage .light a:hover,
#theRegisterPage .light a:hover,
#thePasswordPage .light a:hover,
#theProfilePage .light a:hover {
  color: #AE35A5 !important;
}

/* Focus accent colour (native) */
input, select, textarea {
  accent-color: #AE35A5;
}

/* Profile page edit border */
.profile-section #api_key_list .edit {
  border: 1px solid #AE35A5 !important;
}

/* ----------------------------------------------------------
   HEAD BUTTONS  (general.css component)
   ---------------------------------------------------------- */

.head-button-1 {
  background: #C85BC0 !important;
  box-shadow: 0px 2px #8A298E !important;
  color: #ffffff !important;
}

.head-button-1:hover {
  background: #AE35A5 !important;
  color: #ffffff !important;
}

.advanced-filter-close:hover {
  color: #AE35A5 !important;
}

/* ----------------------------------------------------------
   STRUCTURAL DARK → PURPLE
   (#pwgHead top bar, #menubar sidebar, hover states)
   ---------------------------------------------------------- */

/* Top header bar */
#pwgHead {
  background-color: #AE35A5 !important;
  color: #ffffff !important;
}

#pwgHead A,
#pwgHead a {
  color: #f0d0ef !important;
}

#pwgHead A:hover,
#pwgHead a:hover {
  color: #ffffff !important;
}

/* "Visita la galleria" left panel of header */
#pwgHead .visit-gallery {
  background-color: #8A298E !important;
}

#pwgHead .visit-gallery i {
  color: #d0a0cf !important;
}

/* Left sidebar */
#menubar {
  background-color: #8A298E !important;
}

#menubar ul.scroll {
  scrollbar-color: #C85BC0 #8A298E !important;
}

#menubar dt {
  color: #e0b8df !important;
}

#menubar li A,
#menubar li a {
  color: #f0d8ef !important;
}

#menubar li A:hover,
#menubar li a:hover {
  color: #ffffff !important;
}

#menubar li:hover {
  background-color: #6B1E74 !important;
}

#menubar i.open-menu {
  color: #c09abf !important;
}

/* Footer area (sits inside sidebar) */
#footer A,
#footer a {
  color: #f0d8ef !important;
}

#footer A:hover,
#footer a:hover {
  color: #ffffff !important;
}

a.admin-main {
  color: #e0b8df !important;
}

a.admin-main:hover {
  color: #ffffff !important;
}

/* Photo preview dark container — keep neutral */
#picture-preview {
  background-color: #3c3c3c !important;
}

/* ----------------------------------------------------------
   LOGO
   ---------------------------------------------------------- */

#footer a.piwigo-logo img {
  visibility: hidden;
  width: 140px;
  height: 38px;
}

#footer a.piwigo-logo {
  background-image: url('assets/logo-calabria-straordinaria-neg.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  display: inline-block;
  width: 150px;
  overflow: visible; 
  height: 150px;
}

#footer {
  overflow: visible;      /* o aumenta height/min-height */
  min-height: 160px; 
}

/* ----------------------------------------------------------
   BUTTONS  (.buttonLike / input[type="submit"] / reset)
   ---------------------------------------------------------- */

.buttonLike,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  background-color: #C85BC0 !important;
  color: #ffffff !important;
}

.buttonLike:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  background-color: #AE35A5 !important;
  color: #ffffff !important;
}

/* album-creation loading button */
#albumCreationLoading {
  background-color: #C85BC0 !important;
  color: #ffffff !important;
}

/* ----------------------------------------------------------
   DROPDOWN MENUS  (gradient header bar)
   ---------------------------------------------------------- */

.dropdown {
  background: linear-gradient(130deg, #AE35A5 0%, #BE5ABE 100%) !important;
}

.dropdown::after {
  border-color: transparent transparent #AE35A5 transparent !important;
}

/* ----------------------------------------------------------
   SLIDER  (e.g. quality slider)
   ---------------------------------------------------------- */

.slider-bar-wrapper .ui-slider-horizontal .ui-slider-handle {
  background-color: #C85BC0 !important;
  border-color: #C85BC0 !important;
}

.slider-bar-wrapper .ui-slider-horizontal .ui-slider-range {
  background-color: #C85BC0 !important;
}

/* ----------------------------------------------------------
   PAGINATION  (selected page dot)
   ---------------------------------------------------------- */

.selected-pagination {
  background: #C85BC0 !important;
}

/* ----------------------------------------------------------
   PLUGIN MANAGER  (action hover)
   ---------------------------------------------------------- */

.pluginActionLevel1:hover {
  background-color: #AE35A5 !important;
}

.pluginMiniBox.plugin-active .pluginActionsSmallIcons a span:hover {
  background: #AE35A5 !important;
}

/* ----------------------------------------------------------
   ALBUM / CATEGORY  ACTIONS
   ---------------------------------------------------------- */

.albumActions a:hover span {
  color: #AE35A5 !important;
}

.cat-modify-infos .cat-modify-info-title {
  color: #C85BC0 !important;
}

/* ----------------------------------------------------------
   THEMES  (activate button)
   ---------------------------------------------------------- */

.themeActions a:nth-child(1) {
  background-color: #E0A0DC !important;
  color: #ffffff !important;
}
.themeActions a:nth-child(1):hover {
  background-color: #AE35A5 !important;
  color: #ffffff !important;
}

/* ----------------------------------------------------------
   TAGS
   ---------------------------------------------------------- */

.tag-container .tag-box[data-selected='1'] .select-checkbox,
.delete-size-check:hover .select-checkbox,
.delete-size-check[data-selected='1'] .select-checkbox {
  background-color: #C85BC0 !important;
}

.tag-container .tag-box .tag-rename span:hover {
  color: #BE5ABE !important;
}

.tag-header #add-tag span.icon-cancel-circled:hover {
  color: #AE35A5 !important;
}

/* add-tag confirm button */
.tag-header .add-tag-confirm,
.tag-add-button {
  background-color: #C85BC0 !important;
}

/* ----------------------------------------------------------
   BATCH MANAGER
   ---------------------------------------------------------- */

#batchManagerGlobal a.removeFilter:hover::before {
  color: #C85BC0 !important;
}

.selection-mode-tag .selection-other-tags,
.comments-and-others {
  color: #C85BC0 !important;
}

/* ----------------------------------------------------------
   COMMENTS
   ---------------------------------------------------------- */

.comment-validate:hover {
  background-color: #AE35A5 !important;
}

.comment-paging-current {
  color: #C85BC0 !important;
}

/* ----------------------------------------------------------
   PRIVACY  LABELS
   ---------------------------------------------------------- */

.privacy-label-container span {
  color: #C85BC0 !important;
}

/* ----------------------------------------------------------
   RATINGS
   ---------------------------------------------------------- */

.rating-star-container span i {
  color: #AE35A5 !important;
}

/* ----------------------------------------------------------
   MOVE CATEGORY
   ---------------------------------------------------------- */

.move-cat-container .move-cat-toogler {
  color: #AE35A5 !important;
}

.cat-move-order-popin .close-popin:hover {
  color: #C85BC0 !important;
}

/* ----------------------------------------------------------
   GROUP RENAME
   ---------------------------------------------------------- */

.group-rename .validate {
  background-color: #C85BC0 !important;
}

.group-rename .icon-ok:hover {
  background-color: #AE35A5 !important;
}

/* ----------------------------------------------------------
   USER MANAGER  (selected row / icons)
   ---------------------------------------------------------- */

.user-container.container-selected .user-container-checkbox.user-list-checkbox .select-checkbox {
  background-color: #C85BC0 !important;
}

.edit-user-icons .icon-trash-1:hover::before,
.king-of-this-piwigo {
  color: #C85BC0 !important;
}

.selected-associate-item .remove-associate:hover {
  color: #AE35A5 !important;
}

/* ----------------------------------------------------------
   ACTIVITY  CHART  LEGEND
   ---------------------------------------------------------- */

.activity-chart #week-4-legend ~ span div {
  background-color: #BE5ABE !important;
}

/* ----------------------------------------------------------
   STORAGE  CHART
   ---------------------------------------------------------- */

.storage-chart span:nth-child(1),
.storage-chart-legend div:nth-child(1) span {
  background-color: #BE5ABE !important;
}

/* ----------------------------------------------------------
   POPIN  CONFIRM  BUTTON  (generic)
   ---------------------------------------------------------- */

.popin-confirm,
.confirm-button,
.fancybox-button--confirm {
  background-color: #C85BC0 !important;
  color: #ffffff !important;
}

/* ----------------------------------------------------------
   ACTIVE  NAV  BADGES  (small counter bubbles)
   ---------------------------------------------------------- */

.badgeNumber,
.count-badge,
span.badge {
  background: #AE35A5 !important;
}

/* ----------------------------------------------------------
   PICTURE PAGE  (picture.php — #thePicturePage)
   Overrides orange (#ff7700) from neon_orange skin
   ---------------------------------------------------------- */

/* Toolbar action icons (Photo sizes, Download, Slideshow…) */
a .pwg-icon,
a .pwg-icon:hover {
  color: #AE35A5 !important;
}

/* Switcher link icons — neon_orange uses !important here */
#downloadSwitchLink,
#derivativeSwitchLink,
#sortOrderLink {
  color: #AE35A5 !important;
}

/* Star rating icons */
.uc-icon-star-filled,
.uc-icon-star {
  color: #AE35A5 !important;
}

/* Checkmark indicator in derivative / download switcher boxes */
.switchCheck {
  color: #AE35A5 !important;
}

/* Links in image-info table and sidebar */
.imageInfoTable a,
.imageInfoTable a:hover,
.wide #imageInfos a,
.wide #imageInfos a:hover {
  color: #AE35A5 !important;
}

/* Breadcrumb / title-area links */
.titrePage a,
.titrePage a:hover,
#thePicturePage .titrePage a,
#thePicturePage .titrePage a:hover {
  color: #AE35A5 !important;
}

/* Colour of text inside .titrePage switchBox */
.titrePage .switchBox {
  color: #AE35A5 !important;
}

/* Badge inside page title */
.titrePage h2 span.badge,
.badge {
  background-color: #AE35A5 !important;
  color: #ffffff !important;
}

/* Comment section links */
.commentsList a,
.commentsList a:hover {
  color: #AE35A5 !important;
}

/* Copyright footer link hover */
#copyright a:hover {
  color: #AE35A5 !important;
}

/* Notification link hover */
.notification a:hover {
  color: #AE35A5 !important;
}

/* Frontend menubar: selected item and dropdown-menu link hover */
#menubar li.selected > a {
  color: #ffffff !important;
}

#menubar dd a:hover {
  color: #ffffff !important;
}

/* Category symbol icon in frontend menubar */
#mbCategories .albSymbol {
  color: #f0d8ef !important;
}

/* Mobile: category actions and tag-page icons */
.categoryActions a .pwg-icon,
#theTagsPage a .pwg-icon,
#theTagsPage a:hover .pwg-icon {
  color: #AE35A5 !important;
}

/* Calendar: items and today hover */
.calItem {
  border-color: #AE35A5 !important;
}

.calItem a,
.calItem:hover,
.date_today:hover {
  color: #AE35A5 !important;
}

/* Tag cloud and tag-list links */
#menuTagCloud a,
#fullTagCloud span a:hover,
.tagLine td a:hover,
.tagLevel5 {
  color: #AE35A5 !important;
}

/* Search results links */
.search_results a,
.search_results a:hover {
  color: #AE35A5 !important;
}

/* ----------------------------------------------------------
   FRONTEND DARK BACKGROUNDS → PURPLE
   Replaces dark/black regions from dark skins (newspaper,
   quartz, etc.) on the picture page and category pages.
   ---------------------------------------------------------- */

/* Top breadcrumb / header bar on picture page */
#imageHeaderBar {
  background-color: #AE35A5 !important;
}

#imageHeaderBar .browsePath,
#imageHeaderBar h2,
#imageHeaderBar .imageNumber {
  color: #ffffff !important;
}

#imageHeaderBar .browsePath a {
  color: #f0d0ef !important;
}

#imageHeaderBar .browsePath a:hover {
  color: #ffffff !important;
}

/* Page title bar (.titrePage) on all frontend pages */
.titrePage {
  background-color: #AE35A5 !important;
  color: #ffffff !important;
}

.titrePage h2,
.titrePage h2 a {
  color: #f0d0ef !important;
}

.titrePage h2 a:hover {
  color: #ffffff !important;
}

/* Thumbnail category legend (text overlay on thumbnails) */
.albLegend {
  color: #ffffff !important;
}

/* Right metadata panel (wide and narrow layout) */
#imageInfos,
.wide #imageInfos {
  background-color: #5B1060 !important;
  color: #f0d8ef !important;
}

#imageInfos h3,
.wide #imageInfos h3,
.wide .imageInfoTable h3 {
  color: #ffffff !important;
}

.imageInfo dt,
.wide .imageInfo dt {
  color: #d0a0cf !important;
}

/* Toolbar bar — keep white but ensure text visible */
#imageToolBar {
  background-color: #ffffff !important;
}

/* ----------------------------------------------------------
   LOGIN PAGE  — split diagonale: hero a sinistra, form a destra
   hero.jpg viene impostato come sfondo del body (layer base);
   il container .light applica un gradiente diagonale
   trasparente -> viola che rivela la foto a sinistra
   e copre con il colore del brand sulla destra.
   ---------------------------------------------------------- */

/* Hero image come sfondo a tutto schermo */
#theIdentificationPage,
#theRegisterPage,
#thePasswordPage {
  background-image: url('assets/hero.jpg') !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
}

/* Gradiente diagonale: trasparente (sx) -> viola brand (dx) */
#theIdentificationPage .light,
#theRegisterPage .light,
#thePasswordPage .light {
  max-width: 100vw !important;
  min-height: 100vh !important;
  padding-right: 42vw !important;
  box-sizing: border-box !important;
  background: linear-gradient(
    108deg,
    #FAF3FA               20%,
    #EDD5EC               42%,
    rgba(237,213,236,0.85) 52%,
    transparent           65%,
    transparent          100%
  ) !important;
}

/* Mobile: nessuna foto, solo gradiente viola */
@media (max-width: 900px) {
  #theIdentificationPage,
  #theRegisterPage,
  #thePasswordPage {
    background-image: none !important;
  }

  #theIdentificationPage .light,
  #theRegisterPage .light,
  #thePasswordPage .light {
    padding-right: 0 !important;
    background: linear-gradient(75.69deg, #EDD5EC 7.64%, #FAF3FA 77.87%) !important;
  }
}