@import "jquery.mobile.css";
@import "photoswipe.css";

/* ================================================================
   PIP-BOY TERMINAL — Theme Piwigo
   Base: SmartPocket 16.4.0
   Ambiance: Fallout / CRT phosphore vert
   Reference: Vault/Chrono/css/pipboy.css
   ================================================================ */


/* ================================================================
   TOKENS
   ================================================================ */
:root {
  --green-bright:  #39FF14;
  --green-mid:     #1DB308;
  --green-dim:     #0A5C0A;
  --green-surface: #071407;
  --green-border:  #1A5C1A;
  --black:         #0A0A0A;
  --danger:        #8B0000;
  --glow:          0 0 4px rgba(57,255,20,0.7);
  --glow-dim:      0 0 2px rgba(57,255,20,0.5);
  --font-title:    'VT323', monospace;
  --font-mono:     'Share Tech Mono', monospace;
}


/* ================================================================
   BASE — reset + fond global
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--black) !important;
  color: var(--green-bright) !important;
  font-family: var(--font-mono) !important;
  min-height: 100vh;
  overflow-x: hidden;
}


/* ================================================================
   CRT EFFECTS
   ================================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.06) 3px,
    rgba(0,0,0,0.06) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 55%,
    rgba(0,0,0,0.5) 100%
  );
  pointer-events: none;
  z-index: 9998;
}


/* ================================================================
   JQUERY MOBILE — SWATCH "A" OVERRIDE
   ================================================================ */

/* --- Barres header/footer --- */
.ui-bar-a,
.ui-bar-a input,
.ui-bar-a select,
.ui-bar-a textarea,
.ui-bar-a button {
  font-family: var(--font-mono) !important;
  color: var(--green-bright) !important;
  text-shadow: none !important;
}

.ui-bar-a {
  background: var(--green-surface) !important;
  border-color: var(--green-border) !important;
  border-bottom: 2px solid var(--green-border) !important;
}

.ui-bar-a .ui-link-inherit,
.ui-bar-a a.ui-link,
.ui-bar-a a.ui-link:visited,
.ui-bar-a a.ui-link:hover,
.ui-bar-a a.ui-link:active {
  color: var(--green-mid) !important;
}

/* --- Body / contenu --- */
.ui-body-a,
.ui-overlay-a,
.ui-body-a input,
.ui-body-a select,
.ui-body-a textarea,
.ui-body-a button {
  font-family: var(--font-mono) !important;
  color: var(--green-mid) !important;
  text-shadow: none !important;
}

.ui-body-a,
.ui-overlay-a {
  background: var(--black) !important;
  border-color: var(--green-border) !important;
}

.ui-body-a .ui-link-inherit { color: var(--green-mid) !important; }
.ui-body-a .ui-link,
.ui-body-a .ui-link:visited,
.ui-body-a .ui-link:hover,
.ui-body-a .ui-link:active { color: var(--green-bright) !important; }

/* --- Boutons état normal --- */
.ui-btn-up-a,
.ui-btn-up-a:visited,
.ui-btn-up-a a.ui-link-inherit {
  background: var(--green-surface) !important;
  border-color: var(--green-border) !important;
  color: var(--green-mid) !important;
  text-shadow: none !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 1px;
}

/* --- Boutons hover --- */
.ui-btn-hover-a,
.ui-btn-hover-a:visited,
.ui-btn-hover-a:hover,
.ui-btn-hover-a a.ui-link-inherit {
  background: rgba(57,255,20,0.08) !important;
  border-color: var(--green-mid) !important;
  color: var(--green-bright) !important;
  text-shadow: none !important;
  font-family: var(--font-mono) !important;
}

/* --- Boutons pressed --- */
.ui-btn-down-a,
.ui-btn-down-a:visited,
.ui-btn-down-a a.ui-link-inherit {
  background: rgba(57,255,20,0.15) !important;
  border-color: var(--green-bright) !important;
  color: var(--green-bright) !important;
  text-shadow: var(--glow-dim) !important;
  font-family: var(--font-mono) !important;
}

/* --- Dividers de liste --- */
.ui-li-divider.ui-bar-a {
  background: var(--green-surface) !important;
  border-top: 1px solid var(--green-border) !important;
  border-bottom: 1px solid var(--green-border) !important;
  color: var(--green-dim) !important;
  letter-spacing: 3px;
  font-size: 11px;
}

/* --- Icones jQuery Mobile (chevrons, etc.) --- */
.ui-icon {
  filter: brightness(0) saturate(100%) invert(72%) sepia(99%) saturate(450%) hue-rotate(72deg) brightness(107%) contrast(108%);
}

/* --- Input/select fields --- */
.ui-input-text,
.ui-select .ui-btn,
input.ui-input-text,
textarea.ui-input-text {
  background: var(--green-surface) !important;
  border-color: var(--green-border) !important;
  color: var(--green-mid) !important;
  font-family: var(--font-mono) !important;
  border-radius: 0 !important;
}

.ui-input-text:focus,
textarea.ui-input-text:focus {
  border-color: var(--green-bright) !important;
  box-shadow: var(--glow-dim) !important;
  color: var(--green-bright) !important;
}

/* --- Checkbox/radio --- */
.ui-checkbox .ui-btn-up-a,
.ui-radio .ui-btn-up-a {
  background: var(--green-surface) !important;
  border-color: var(--green-border) !important;
}

/* --- Collapsibles --- */
.ui-collapsible-heading .ui-btn-up-a,
.ui-collapsible-heading .ui-btn-hover-a {
  border-left: none !important;
  border-right: none !important;
}

/* --- Page globale --- */
.ui-page {
  background: var(--black) !important;
}

.ui-content {
  background: var(--black) !important;
  overflow: hidden;
}

/* --- Panel (menu latéral) --- */
.ui-panel {
  background: var(--green-surface) !important;
  border-left: 1px solid var(--green-border) !important;
}

.ui-panel-inner > .ui-listview {
  margin: -15px -15px 0;
}

/* --- Popup overlay --- */
.ui-popup-screen.ui-overlay-a {
  background: rgba(0,0,0,0.85) !important;
  opacity: 1 !important;
}


/* ================================================================
   HEADER — titre galerie
   ================================================================ */
[data-role="header"] {
  position: relative;
}

[data-role="header"]::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--green-border);
  box-shadow: 0 0 8px rgba(57,255,20,0.3);
}

.title {
  margin: 10px;
  text-align: center;
  position: relative;
}

.title .ui-btn {
  margin-top: -5px;
}

.pipboy-title {
  font-family: var(--font-title) !important;
  font-size: 28px;
  letter-spacing: 6px;
  color: var(--green-bright);
  text-shadow: var(--glow);
  display: inline-block;
  vertical-align: middle;
}

.home_button { float: left; }


/* ================================================================
   LISTVIEW — catégories & navigation
   ================================================================ */
.ui-listview {
  border-radius: 0 !important;
}

.ui-li-static,
.ui-li {
  border-radius: 0 !important;
  border-color: var(--green-border) !important;
}

/* Séparateur entre items */
.ui-listview > li {
  border-bottom: 1px solid var(--green-border) !important;
}

/* Item de liste avec image (catégories) */
.ui-li-has-thumb .ui-btn-text {
  margin-left: 100px;
}

.ui-li-has-thumb img.ui-li-thumb {
  border: 1px solid var(--green-border);
}

.ui-li-has-thumb:hover img.ui-li-thumb {
  box-shadow: 0 0 12px rgba(57,255,20,0.4);
}

/* Titre et sous-titre dans liste */
.ui-li h3, .ui-li h2, .ui-li h1 {
  font-family: var(--font-title) !important;
  font-size: 20px !important;
  letter-spacing: 2px !important;
  color: var(--green-bright) !important;
  text-shadow: var(--glow-dim) !important;
}

.ui-li p, .ui-li .ui-li-desc {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  color: var(--green-dim) !important;
  letter-spacing: 1px;
  text-overflow: clip;
  white-space: normal;
}

/* Coins décoratifs sur les items de liste actifs */
.ui-li > a.ui-link-inherit {
  position: relative;
}

.ui-li > a.ui-link-inherit::before {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 8px; height: 8px;
  border-top: 1px solid var(--green-dim);
  border-left: 1px solid var(--green-dim);
  pointer-events: none;
}

.ui-li:hover > a.ui-link-inherit::before {
  border-color: var(--green-bright);
}


/* ================================================================
   THUMBNAILS — grille photos
   ================================================================ */
.thumbnails {
  list-style: none;
  padding: 0;
}

.thumbnails:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

.thumbnails li {
  float: left;
  position: relative;
  overflow: hidden;
  display: inline;
  margin-bottom: 5px;
  margin-left: 4px;
}

.thumbnails li a {
  position: absolute;
}

/* Effet Pip-Boy sur les thumbnails */
.thumbnails li img {
  display: block;
}

.thumbnails li:hover img {
}

/* Overlay au survol */
.thumbnails li::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(57,255,20,0.04);
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color 0.2s, background 0.2s;
}

.thumbnails li:hover::after {
  border-color: var(--green-dim);
  background: rgba(57,255,20,0.08);
}


/* ================================================================
   PAGE PHOTO (picture.tpl)
   ================================================================ */
#picture_page {
  text-align: center;
}

#picture_page img {
  border: 1px solid var(--green-border);
}




#PictureInfo {
  font-size: 0.8em;
  font-family: var(--font-mono);
  color: var(--green-dim);
  letter-spacing: 1px;
}

#PictureInfo * {
  font-size: 1em;
  color: var(--green-dim);
}

/* Navigation photos */
.ui-btn[data-icon="arrow-l"],
.ui-btn[data-icon="arrow-r"] {
  opacity: 0.7;
}

.ui-btn[data-icon="arrow-l"]:hover,
.ui-btn[data-icon="arrow-r"]:hover {
  opacity: 1;
}


/* ================================================================
   BARRE DE NAVIGATION (pages suivantes/précédentes)
   ================================================================ */
[data-role="footer"] {
  position: relative;
}

[data-role="footer"]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--green-border);
}

.pwg_footer h6 {
  margin: 8px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--green-dim);
  letter-spacing: 1px;
}

.pwg_footer a {
  color: var(--green-mid) !important;
}

.pwg_footer a:hover {
  color: var(--green-bright) !important;
  text-shadow: var(--glow-dim);
}


/* ================================================================
   FORMULAIRES — login, recherche, commentaires
   ================================================================ */
.errors h3, .infos h3 { float: left; margin-top: 8px; }
.errors div, .infos div { float: right; margin-top: 4px; }
.errors p, .infos p { clear: both; font-size: 85%; margin-bottom: 8px; }

.errors {
  border: 1px solid var(--danger);
  background: rgba(139,0,0,0.1);
  color: #FF4444 !important;
}

.infos {
  border: 1px solid var(--green-border);
  background: rgba(57,255,20,0.04);
  color: var(--green-mid);
}

#addComment textarea.ui-input-text {
  min-height: 100px;
}

/* Labels */
.ui-field-contain label {
  font-family: var(--font-mono) !important;
  color: var(--green-dim) !important;
  letter-spacing: 2px;
  font-size: 12px;
}

.ui-field-contain,
.ui-br {
  padding: 5px;
  border: 0 !important;
}


/* ================================================================
   IDENTIFICATION (login)
   ================================================================ */
.ui-content .ui-listview-filter input {
  background: var(--green-surface) !important;
  color: var(--green-mid) !important;
  border-color: var(--green-border) !important;
  font-family: var(--font-mono) !important;
}


/* ================================================================
   MENUBAR — panneau latéral
   ================================================================ */
#menubar .ui-collapsible-heading-toggle.ui-btn-up-a {
  background: var(--green-surface) !important;
  border-color: var(--green-border) !important;
  color: var(--green-mid) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 2px;
  font-size: 12px;
}

#menubar .ui-collapsible-heading-toggle.ui-btn-up-a:hover {
  color: var(--green-bright) !important;
  background: rgba(57,255,20,0.06) !important;
}

#more_link {
  color: var(--green-mid) !important;
  display: table-cell;
  font-size: 1.1em;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  font-family: var(--font-mono);
  letter-spacing: 2px;
}

#more_link:hover {
  color: var(--green-bright) !important;
}


/* ================================================================
   TAGS
   ================================================================ */
.ui-btn[href*="tags"] {
  font-size: 12px;
  letter-spacing: 1px;
}


/* ================================================================
   PHOTOSWIPE override
   ================================================================ */
.pswp__bg {
  background: rgba(7, 20, 7, 0.97) !important;
}

.pswp__top-bar,
.pswp__caption {
  background: rgba(7, 20, 7, 0.9) !important;
}

.pswp__button,
.pswp__counter {
  color: var(--green-mid) !important;
  opacity: 0.85;
}

.pswp__button:hover {
  color: var(--green-bright) !important;
  opacity: 1;
}

.pswp__caption__center {
  font-family: var(--font-mono) !important;
  font-size: 12px;
  color: var(--green-dim) !important;
  letter-spacing: 1px;
  text-align: center;
}


/* ================================================================
   COLORBOX (masque)
   ================================================================ */
#colorbox, #cboxOverlay, #cboxWrapper {
  display: none;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: -1;
  opacity: 0 !important;
}


/* ================================================================
   FILTRE MCS (search/filter manager)
   ================================================================ */
.mcs-side-results,
.filter-manager-popin-container,
.tags-found-popin-container,
.albums-found-popin-container {
  background: var(--green-surface) !important;
  border: 1px solid var(--green-border) !important;
  color: var(--green-mid) !important;
}

.mcs-no-result .text {
  font-family: var(--font-mono);
  color: var(--green-dim);
  letter-spacing: 3px;
}

.mcs-no-result .top {
  font-size: 14px;
  color: var(--green-mid);
  display: block;
  margin-bottom: 8px;
}

.mcs-no-result .bot {
  font-size: 11px;
  color: var(--green-dim);
  display: block;
}


/* ================================================================
   SCROLLBAR — style terminal
   ================================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--black);
}

::-webkit-scrollbar-thumb {
  background: var(--green-dim);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--green-mid);
}


/* ================================================================
   RESPONSIVE — petits ecrans
   ================================================================ */
@media (max-width: 600px) {
  .filter-manager-close, 
  .tags-found-close, 
  .albums-found-close {
    position: unset;
    align-self: end;
  }

  .filter-manager-popin-container, 
  .tags-found-popin-container, 
  .albums-found-popin-container {
    width: 100%;
  }

  .filter-word-form {
    max-height: 300px;
    overflow-y: auto;
  }

  .mcs-tags-found,
  .mcs-albums-found {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .pwg_footer {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}

/* ================================================================
   SELECTION DE TEXTE
   ================================================================ */
::selection {
  background: var(--green-dim);
  color: var(--green-bright);
}