/* ==========================================================================
   futureglass.css - dark glassmorphism skin for EasyImage 2.8.6 (ZUI base)
   Part 1: original theme (unchanged)
   Part 2: fixes + component coverage
   ========================================================================== */

/* ---------- Part 1: original theme ---------- */

:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { min-height: 100%; background: #070a16; }
body.container {
  max-width: 1180px;
  min-height: 100vh;
  padding: 34px 26px 60px;
  color: #e7edff;
  background:
    radial-gradient(780px 440px at 0% 0%, rgba(53, 202, 255, .16), transparent 58%),
    radial-gradient(720px 480px at 100% 2%, rgba(157, 93, 255, .17), transparent 55%),
    radial-gradient(600px 440px at 45% 100%, rgba(35, 242, 190, .10), transparent 58%),
    #070a16;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
body.container::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .3; background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, black, transparent 75%); }
a { color: #8ce9ff; transition: color .2s ease; }
a:hover, a:focus { color: #c9b7ff; }
.page-header {
  margin: 0 0 24px;
  padding: 12px 16px;
  border: 1px solid rgba(174, 196, 255, .18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(28, 39, 76, .74), rgba(13, 18, 39, .75));
  box-shadow: 0 18px 48px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(18px);
}
.navbar-collapse { padding: 0; }
.nav-pills > li > a { margin: 3px; padding: 9px 14px; border: 1px solid transparent; border-radius: 10px; color: #b7c5e3; }
.nav-pills > li > a:hover, .nav-pills > li.active > a { border-color: rgba(126, 222, 255, .34); color: #effcff; background: rgba(72, 206, 255, .13); box-shadow: 0 0 22px rgba(69, 198, 255, .1); }
.label-primary { background: linear-gradient(135deg, #65dfff, #a78bfa); }
.marquee, .uploader, .nav-tabs, .tab-content {
  border: 1px solid rgba(174, 196, 255, .16) !important;
  background: linear-gradient(135deg, rgba(24, 34, 67, .74), rgba(12, 17, 37, .78)) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(16px);
}
.marquee { margin-bottom: 20px; border-radius: 14px; color: #b4c2dd; }
.marquee a { color: #a9edff; }
.uploader { padding: 22px !important; border-radius: 18px; }
.uploader-files { min-height: 245px !important; border: 1px dashed rgba(123, 223, 255, .45) !important; border-radius: 14px; background: rgba(5, 10, 27, .42); color: #8fa3c8; }
.uploader-files:hover { border-color: #81e6ff !important; background: rgba(52, 159, 255, .07); }
.uploader-actions { margin-top: 15px; }
.btn, .uploader-actions .btn { border: 1px solid rgba(143, 230, 255, .3); border-radius: 10px; color: #0a1322; font-weight: 700; background: linear-gradient(135deg, #7ce6ff, #b9a1ff); box-shadow: 0 8px 22px rgba(61, 170, 255, .15); }
.btn:hover, .btn:focus { color: #07101c; transform: translateY(-1px); background: linear-gradient(135deg, #a4f0ff, #d4b8ff); }
.btn.btn-link { color: #c8f4ff; background: rgba(64, 193, 255, .1); }
.nav-tabs { margin-top: 20px; padding: 8px 12px 0; border-radius: 16px 16px 0 0; border-bottom: 0 !important; }
.nav-tabs > li > a { margin-right: 4px; border: 1px solid transparent; border-radius: 10px 10px 0 0; color: #aebddb; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li > a:hover { border-color: rgba(127, 224, 255, .3); color: #ecfbff; background: rgba(74, 198, 255, .12); }
.tab-content { min-height: 150px; padding: 16px; border-radius: 0 0 16px 16px; }
.form-control, textarea.form-control { border: 1px solid rgba(170, 190, 255, .22); border-radius: 12px; color: #e9f0ff; background: rgba(5, 10, 27, .72); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.form-control:focus { border-color: #7fe6ff; box-shadow: 0 0 0 3px rgba(87, 205, 255, .12); }
.uploader-message { border-radius: 12px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { border: 3px solid #080b18; border-radius: 10px; background: linear-gradient(#62dcff, #a88cff); }

/* ==========================================================================
   Part 2: fixes + component coverage
   ========================================================================== */

/* --- FIX 1: footer rendered as an opaque white bar fixed to the viewport
   bottom (ZUI default rgba(255,255,255,.7) + #808080 text). Site-wide. --- */
footer.container,
footer.navbar-fixed-bottom,
.navbar-fixed-bottom {
  background: rgba(9, 14, 31, .78) !important;
  color: #8ea2c6 !important;
  border-top: 1px solid rgba(174, 196, 255, .13);
  box-shadow: 0 -12px 34px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
footer a, .navbar-fixed-bottom a { color: #9fe4ff; }
footer a:hover, .navbar-fixed-bottom a:hover { color: #c9b7ff; }
footer .text-muted, .text-muted { color: #7d90b4 !important; }

/* --- FIX 2: readonly / disabled inputs. ZUI's `.form-control[readonly]`
   forces #e5e5e5, which outranks the plain `.form-control` rule above and
   leaves near-white text on a light grey field. These are the link-copy
   boxes, so this is a legibility bug, not just a cosmetic one. --- */
.form-control[readonly],
.form-control[disabled],
textarea.form-control[readonly],
textarea.form-control[disabled],
input.form-control[readonly],
input.form-control[disabled],
fieldset[disabled] .form-control {
  color: #dfe9ff !important;
  background: rgba(5, 10, 27, .78) !important;
  border-color: rgba(170, 190, 255, .22) !important;
  opacity: 1;
  cursor: text;
}
.form-control[readonly]:focus,
textarea.form-control[readonly]:focus {
  border-color: #7fe6ff !important;
  box-shadow: 0 0 0 3px rgba(87, 205, 255, .12) !important;
}
.form-control::placeholder { color: #6f83a8; }

/* --- FIX 3: .uploader-actions carried ZUI's #f1f1f1 toolbar background,
   cutting a light grey band across the dark upload card. --- */
.uploader-actions,
.uploader .uploader-actions,
.uploader-status {
  background: transparent !important;
  border: 0 !important;
}

/* --- FIX 4: alerts. Bootstrap/ZUI pastel fills glare on the dark canvas.
   history.php shows its empty state via .alert-danger. --- */
.alert {
  border-radius: 14px;
  border: 1px solid transparent;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-shadow: none;
}
.alert-danger  { color: #ffc4bd !important; background: rgba(255, 92, 92, .10) !important; border-color: rgba(255, 120, 120, .30) !important; }
.alert-success { color: #a9f5d8 !important; background: rgba(35, 242, 190, .10) !important; border-color: rgba(52, 226, 183, .30) !important; }
.alert-info    { color: #b6e9ff !important; background: rgba(72, 206, 255, .10) !important; border-color: rgba(108, 205, 255, .30) !important; }
.alert-warning { color: #ffe0ad !important; background: rgba(255, 187, 84, .10) !important; border-color: rgba(255, 190, 96, .30) !important; }
.alert a, .alert .alert-link { color: inherit; text-decoration: underline; opacity: .92; }

/* --- Modals (link results, previews, admin confirms) --- */
.modal-content {
  color: #e2eaff;
  border: 1px solid rgba(174, 196, 255, .18) !important;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(26, 36, 71, .92), rgba(11, 16, 35, .95)) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .05);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.modal-header, .modal-footer { border-color: rgba(174, 196, 255, .13) !important; }
.modal-title { color: #edf3ff; }
.modal-backdrop, .modal-backdrop.in { background: #04060f; opacity: .70 !important; }
.close, .modal-header .close {
  color: #d3e2ff !important;
  text-shadow: none !important;
  opacity: .65;
}
.close:hover, .modal-header .close:hover { color: #ffffff !important; opacity: 1; }

/* --- Dropdowns --- */
.dropdown-menu {
  border: 1px solid rgba(174, 196, 255, .18) !important;
  border-radius: 12px;
  padding: 6px;
  background: linear-gradient(135deg, rgba(26, 36, 71, .95), rgba(11, 16, 35, .96)) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.dropdown-menu > li > a { color: #c3d2f0 !important; border-radius: 8px; padding: 7px 12px; }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a { color: #eefcff !important; background: rgba(74, 198, 255, .14) !important; }
.dropdown-menu .divider { background: rgba(174, 196, 255, .14); }

/* --- Tables (history / admin listings) --- */
.table { color: #d7e2fb; }
.table > thead > tr > th {
  color: #9fb2d6;
  border-bottom-color: rgba(174, 196, 255, .20) !important;
  font-weight: 600;
}
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td { border-top-color: rgba(174, 196, 255, .10) !important; }
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd) > td { background: rgba(255, 255, 255, .022) !important; }
.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > td { background: rgba(74, 198, 255, .08) !important; }
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th { border-color: rgba(174, 196, 255, .12) !important; }

/* --- Panels / wells / list groups --- */
.panel, .well, .list-group-item, .thumbnail {
  color: #dbe6ff;
  border: 1px solid rgba(174, 196, 255, .16) !important;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(24, 34, 67, .74), rgba(12, 17, 37, .78)) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.panel-heading, .panel-footer {
  color: #e6eeff;
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(174, 196, 255, .13) !important;
}
.panel-title { color: #edf3ff; }
.list-group-item.active { background: rgba(74, 198, 255, .14) !important; border-color: rgba(127, 224, 255, .3) !important; color: #eefcff; }

/* --- Pagination --- */
.pagination > li > a, .pagination > li > span {
  color: #b7c5e3 !important;
  background: rgba(12, 18, 38, .72) !important;
  border-color: rgba(174, 196, 255, .16) !important;
}
.pagination > li > a:hover { background: rgba(74, 198, 255, .14) !important; color: #eefcff !important; }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover {
  color: #08121f !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #65dfff, #a78bfa) !important;
}
.pagination > .disabled > a, .pagination > .disabled > span { color: #5d6c8c !important; background: rgba(12, 18, 38, .45) !important; }

/* --- Tooltips / popovers --- */
.tooltip-inner { background: rgba(14, 20, 42, .96); color: #e2ecff; border: 1px solid rgba(174, 196, 255, .18); border-radius: 8px; }
.tooltip.top .tooltip-arrow { border-top-color: rgba(14, 20, 42, .96); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: rgba(14, 20, 42, .96); }
.popover { background: linear-gradient(135deg, rgba(26,36,71,.96), rgba(11,16,35,.97)); border-color: rgba(174,196,255,.18); border-radius: 12px; color: #dfe9ff; }
.popover-title { background: rgba(255,255,255,.04); border-bottom-color: rgba(174,196,255,.13); color: #edf3ff; }

/* --- Code / badges / progress --- */
code, kbd, pre, samp {
  color: #b6e9ff;
  background: rgba(5, 10, 27, .72) !important;
  border: 1px solid rgba(174, 196, 255, .16) !important;
  border-radius: 8px;
}
.badge { background: rgba(74, 198, 255, .18); color: #d6f4ff; }
.progress { background: rgba(5, 10, 27, .6); border-radius: 10px; box-shadow: none; }
.progress-bar { background: linear-gradient(135deg, #65dfff, #a78bfa); }

/* --- Misc surfaces that would otherwise stay ZUI-light --- */
.well, .jumbotron { background: rgba(12, 18, 38, .6) !important; }
hr { border-top-color: rgba(174, 196, 255, .12); }
.input-group-addon {
  color: #b7c5e3 !important;
  background: rgba(12, 18, 38, .8) !important;
  border-color: rgba(170, 190, 255, .22) !important;
}
/* QR block: keep the code itself on white so scanners still read it */
#qr img, img[alt="Scan me!"] { background: #fff; padding: 6px; border-radius: 10px; }

@media (max-width: 767px) {
  body.container { padding: 16px 12px 36px; }
  .page-header { padding: 8px; border-radius: 14px; }
  .nav-pills > li > a { padding: 8px 10px; }
  .uploader { padding: 14px !important; border-radius: 14px; }
  .uploader-files { min-height: 185px !important; }
  footer.container, .navbar-fixed-bottom { font-size: 12px; }
}