/* ===== Variables ===== */
:root {
  --font-main:               "Lexend", sans-serif;
  --font-size-base:          0.9em;
  --letter-spacing-base:     0.05em;
  --line-height-base:        1.5em;

  --color-bg:                #122020;
  --color-text:              #c2eaea;
  --color-accent:            #00c5bd;
  --color-accent-translucent:rgba(0,250,240,0.1);
  --color-accent-border:     rgba(0,250,240,0.3);
  --color-header-bg:         rgba(0,0,0,0.7);

  --color-link:              #ddd;
  --color-highlight:         #F4511E;
  --color-highlight-hover:   #FF7043;

  --color-box-bg:            #1b2a3a;
  --color-box-border:        #2e4a63;
  --color-thumb-bg:          #333;
  --color-folder-name:       #5df;

  --color-input-bg:          rgba(0,0,0,0.7);
  --color-input-border:      rgba(0,0,0,0.1);
  --color-input-text:        #eee;

  --form-input-bg:           #1a1a1a;
  --form-input-border:       #333;
  --form-input-text:         #fff;

  --color-success:           var(--color-accent);
  --color-error:             #ff6b6b;
  --color-error-hover:       #ff3b3b;

  --btn-bg:                  #0daa92;
  --btn-bg-hover:            #26d1a9;
  --btn-bg-active:           #008c9e;
  --btn-color:               #000;
  --btn-radius:              5px;
  --btn-padding:             10px 15px;
  --btn-size:                1.1em;
  --btn-weight:              bold;
  --btn-letter-space:        1px;
  --btn-shadow:
    -1px -1px 0 rgba(255,255,255,0.2),
     1px  1px 0 rgba(255,255,255,0.5),
     0    0   5px rgba(255,255,255,0.5),
     0    0   7px rgba(255,255,255,0.5),
     0    0  10px rgba(255,255,255,0.5),
     0    0  12px rgba(255,255,255,0.5);

  --footer-bg:               rgba(0,0,0,0.7);
  --footer-text:             #fff;
  --footer-font-size:        0.9em;

  --dashboard-gap:           20px;
  --dashboard-margin-top:    50px;
  --dashboard-input-border:  #000;
}

/* ===== Global Layout ===== */
/* ===== Folders Flex Layout (Updated) ===== */
.folder-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.folder-row-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 250, 240, 0.05);
  border-radius: 8px;
  padding: 10px;
  gap: 15px;
  flex-wrap: wrap;
}
.folder-name-cell {
  flex: 1;
  font-weight: bold;
}
.folder-url {
  flex: 2;
  min-width: 200px;
}
.folder-delete {
  flex-shrink: 0;
}
.folder-preview img,
.folder-no-thumb {
  width: 70px;
  height: 70px;
  border-radius: 6px;
  border: 10px solid rgba(0,0,0,0.3);
  object-fit: cover;
}
.folder-no-thumb {
  background: #444;
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.folder-description {
  margin-top: 30px;
  background: #1e1e1e;
  border-left: 4px solid #0daa92;
  padding: 15px 20px;
  border-radius: 8px;
  font-size: 0.95em;
  color: #ddd;
}
.folder-description p {
  margin: 0 0 10px;
}

.folder-description a {
	color: var(--color-accent);
}

.folder-description a:hover {
	color: var(--color-highlight-hover);
}


.copy-wrapper {
  position: relative;
}
.copy-tooltip {
  position: absolute;
  top: -1.75em;
  right: 0;
  background: var(--color-box-bg);
  color: var(--color-text);
  padding: 4px 8px;
  font-size: 0.75em;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.copy-tooltip.show {
  opacity: 1;
}

* {
  box-sizing:         border-box;
  font-family:        var(--font-main);
}

body {
  display:            flex;
  flex-direction:     column;
  min-height:         100vh;
  background:         var(--color-bg);
  color:              var(--color-text);
  margin:             0;
  padding:            0;
  font-size:          var(--font-size-base);
  letter-spacing:     var(--letter-spacing-base);
  line-height:        var(--line-height-base);
}
main {
  flex: 1;
}
.container {
  width:              90%;
  max-width:          900px;
  min-width:          320px;
  margin:             20px auto;
  background:         var(--color-accent-translucent);
  border-radius:      20px;
  padding:            30px 20px;
}

.contact-form {
  max-width: 600px;
  margin: 20px auto;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #333;
  border-radius: 6px;
  background-color: #1a1a1a;
  color: #eee;
}

.contact-form button {
  padding: 10px 20px;
  background-color: #0daa92;
  color: black;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.contact-form button:hover {
  background-color: #11c2aa;
}


/* ===== Links ===== */
a {
  color:              var(--color-link);
  text-decoration:    none;
  transition:         color 0.7s ease-in;
}
a:hover {
  color:              var(--color-highlight);
  transition:         color 0.4s ease-out;
}

/* ===== Header ===== */
.site-header {
  display:            flex;
  justify-content:    space-between;
  align-items:        center;
  background:         var(--color-header-bg);
  padding:            15px 30px;
  border-bottom:      2px solid var(--color-accent-border);
  margin-bottom:      30px;
}
.logo a {
  font-size:          1.7em;
  color:              var(--color-accent);
  font-weight:        bold;
  margin-right:       10px;
}
.logo a:hover {
  color:              var(--color-highlight);
}
.nav-links a {
  margin-left:        10px;
  color:              var(--color-link);
}
.nav-links a:hover {
  color:              var(--color-highlight);
}
.username {
  margin-left:        18px;
  color:              #fff !important;
  font-style:         normal !important;
}
h1, h2, h3 {
  color:              #fff;
}

/* ===== Global Buttons ===== */
button {
  appearance:         none;
  border:             none;
  background:         var(--btn-bg);
  color:              var(--btn-color);
  font-family:        var(--font-main);
  font-size:          var(--btn-size);
  font-weight:        var(--btn-weight);
  letter-spacing:     var(--btn-letter-space);
  padding:            var(--btn-padding);
  border-radius:      var(--btn-radius);
  cursor:             pointer;
  margin:             5px;
  text-shadow:        var(--btn-shadow);
  transition:         background 0.3s ease, transform 0.2s ease;
}
button:hover {
  background:         var(--btn-bg-hover);
}
button:active {
  transform:          translateY(2px);
}
button.active {
  background:         var(--btn-bg-active);
}

/* ===== Forms & Profile ===== */
.profile-form {
  margin-bottom:       25px;
}
.profile-form input {
  width:               100%;
  max-width:           400px;
  margin-bottom:       10px;
  padding:             10px;
  border:              1px solid var(--form-input-border);
  border-radius:       5px;
  background:          var(--form-input-bg);
  color:               var(--form-input-text);
}
.profile-form button:not(.delete-button) {
  background:          var(--btn-bg);
  color:               var(--btn-color);
}
.profile-form button:not(.delete-button):hover {
  background:          var(--btn-bg-hover);
}
.delete-button {
  background:          var(--color-error);
  color:               var(--btn-color);
}
.delete-button:hover {
  background:          var(--color-error-hover);
}

/* ===== Footer ===== */
footer {
  margin-top:          auto;
  background:          var(--footer-bg);
  color:               var(--footer-text);
  padding:             40px 0;
  text-align:          center;
  border-top:          2px solid var(--color-accent-border);
}
.footer-links {
  margin-bottom:       20px;
}
.footer-links a {
  color:               var(--color-link);
  margin:              0 15px;
  transition:          color 0.3s ease;
}
.footer-links a:hover {
  color:               var(--color-highlight);
}
.footer-copyright {
  font-size:           var(--footer-font-size);
  color:               #bbb;
}
.footer-copyright a {
  color:               #bbb;
  text-decoration:     none;
}

/* ===== Dashboard ===== */
.dashboard-grid {
  display:            grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:                var(--dashboard-gap);
  margin-top:         var(--dashboard-margin-top);
}

.dashboard-name {
	padding-bottom: 10px;
}

/* ===== Dashboard Folder Cards ===== */
.dashboard-folder {
  background:          rgba(0, 0, 0, 0.2);
  padding:             12px;
  border-radius:       8px;
  text-align:          center;
  box-shadow:          0 1px 3px rgba(0, 0, 0, 0.2);
  display:             flex;
  flex-direction:      column;
  align-items:         center;
  justify-content:     flex-start;
}

.dashboard-img-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.dashboard-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 6px;
  border: 10px solid rgba(0,0,0,0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}

.dashboard-welcome {
  flex: 1;
  min-width: 280px;
}

.dashboard-stats-box {
  background: rgba(0, 0, 0, 0.4);
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 240px;
  max-width: 300px;
}
.dashboard-stats-box ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.dashboard-stats-box li {
  margin: 6px 0;
}


/* ===== Dashboard URL Input ===== */
.copy-url {
  width:              100%;
  font-size:          0.9em;
  padding:            4px 6px;
  border-radius:      4px;
  border:             1px solid var(--color-input-border);
  background:         var(--color-input-bg);
  color:              var(--color-input-text);
  font-family:        monospace;
  box-sizing:         border-box;
}


/* ===== Folders Page Controls & Modals ===== */
.folder-actions {
  display:            block;
  text-align:         right;
  margin-bottom:      10px;
}
.add-folder-btn {
  padding:            10px 16px;
  background:         var(--color-accent);
  color:              var(--btn-color);
  border:             none;
  border-radius:      var(--btn-radius);
  font-weight:        var(--btn-weight);
  cursor:             pointer;
}

.modal {
  display:            none;
  position:           fixed;
  top: 0; left: 0;
  width:              100%;
  height:             100%;
  background:         rgba(0,0,0,0.6);
  z-index:            999;
}
.modal-content {
  background:         rgba(0,0,0,0.8);
  color:              #ddd;
  max-width:          400px;
  margin:             100px auto;
  padding:            30px;
  border-radius:      10px;
  text-align:         center;
}

.modal-input {
  padding:            10px;
  width:              100%;
  margin:             10px 0;
  border-radius:      var(--btn-radius);
  border:             1px solid #555;
}


.folder-no-thumb {
  background:         #444;
  color:              #ccc;
  display:            flex;
  align-items:        center;
  justify-content:    center;
  text-align:         center;
}



/* ===== Index Page Layout ===== */
.home-layout {
  display:            flex;
  gap:                40px;
  align-items:        flex-start;
  justify-content:    space-between;
}

/* ===== Login Box ===== */
.login-box {
  flex:               0 0 300px;
  background:         rgba(0,255,255,0.1);
  padding:            20px;
  border-radius:      8px;
}
.login-box input {
  width:              95%;
  margin-bottom:      10px;
  padding:            8px;
}

/* footer links under login */
.login-footer {
  margin-top:         10px;
  text-align:         center;
}

/* ===== Orange Login Button ===== */
.orange-login-btn {
  width:              100%;
  padding:            10px;
  background:         var(--color-highlight);
  color:              #fff;
  border:             none;
  border-radius:      var(--btn-radius);
  font-weight:        var(--btn-weight);
  cursor:             pointer;
  transition:         background-color 0.3s ease,
                     transform        0.2s ease;
}
.orange-login-btn:hover {
  background:         var(--color-highlight-hover);
  transform:          translateY(-2px);
}
.orange-login-btn:active {
  background:         #E64A19;
  transform:          translateY(0);
}

/* ===== Toast Notifications ===== */
.toast-success {
  background-color:   #4CAF50;
  color:              #fff;
  padding:            16px;
  position:           fixed;
  top:                30px;
  left:               50%;
  transform:          translateX(-50%);
  border-radius:      8px;
  z-index:            1000;
  display:            none;
  opacity:            0;
  transition:         opacity 0.5s ease,
                      top     0.5s ease;
}

/* ===== Folder View Page Styles ===== */

.folder-view-container {
  max-width: 1000px;
  padding: 30px;
}

.folder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.add-images-btn {
  background: var(--color-folder-name);
  color: var(--btn-color);
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
}

.folder-empty {
  margin-top: 20px;
}

/* ===== Image Controls ===== */

.image-controls {
  margin: 15px 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 40px;
}

.select-all-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.select-all-checkbox {
  width: 18px;
  height: 18px;
  background-color: var(--color-accent);
  border: none;
  border-radius: 4px;
}

.selected-count {
  margin-left: 15px;
  display: none;
  align-self: center;
}

.delete-selected-btn {
  padding: 6px 12px;
  background: var(--color-highlight-hover);
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 20px;
  display: none;
  align-self: center;
}

/* ===== Image Grid & Thumbnails ===== */

.image-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.image-container {
  background-color: rgba(0,0,0,0.3);
  position: relative;
  width: 150px;
  height: 150px;
  text-align: center;
  padding: 8px;
  border-radius: 6px;
  transition: background 0.2s;
  cursor: pointer;
}

.image-container.selected {
  background-color: rgba(0, 255, 100, 0.4);
}

.image-checkbox {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 25px;
  height: 25px;
  opacity: 0;
  cursor: pointer;
}

.image-container:hover .image-checkbox {
  opacity: 1;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.4);
  pointer-events: none;
}

/* ===== Upload Page Overrides ===== */

/* hide those lists until we need them */
#errorList,
#successList {
  display: none;
}

/* dropzone is hidden until folder selected */
#dropzoneWrapper {
  display: none;
}

/* actual file input is hidden, we use the dropzone div */
#fileInput {
  display: none;
}

/* progress bar hidden until upload starts */
.progress-container {
  display: none;
}

/* ===== Upload Image Initial Hidden States ===== */
#up-error-list,
#up-success-list,
#up-dropzone-wrapper,
#up-file-input,
.up-progress-container {
  display: none;
}

/* ===== Upload Image Page Styles ===== */

/* Folder selection buttons */
.up-folder-button {
  background:       var(--btn-bg);
  color:            var(--btn-color);
  font-family:      var(--font-main);
  letter-spacing:   var(--btn-letter-space);
  border:           none;
  border-radius:    var(--btn-radius);
  padding:          var(--btn-padding);
  font-size:        var(--btn-size);
  font-weight:      var(--btn-weight);
  cursor:           pointer;
  margin:           5px;
  text-shadow:      var(--btn-shadow);
  transition:       background 0.3s ease, transform 0.2s ease;
}

.up-folder-button:hover {
  background:       var(--btn-bg-hover);
}
.up-folder-button.active {
  background:       var(--btn-bg-active);
}
.up-folder-button:active {
  transform:        translateY(2px);
}

#up-upload-button {
  background:       #FF7043;
  color:            #000;
  font-family:      var(--font-main);
  letter-spacing:   var(--btn-letter-space);
  border:           none;
  border-radius:    var(--btn-radius);
  padding:          var(--btn-padding);
  font-size:        var(--btn-size);
  font-weight:      var(--btn-weight);
  cursor:           pointer;
  margin-right: 	-80px;
  text-shadow:      var(--btn-shadow);
  transition:       background 0.3s ease, transform 0.2s ease;
  display:			none;
}

#up-upload-button:hover {
  background:       var(--btn-bg-hover);
}

#up-upload-button.active {
  background:       #0daa92;
}

#up-upload-button:active {
  transform:        translateY(2px);
}

.up-button-wrapper {
	width: 			100%;
}

/* Dropzone */
.up-dropzone {
  padding:          40px;
  text-align:       center;
  border-radius:    8px;
  background:       rgba(0,255,255,0.05) url('/avatarbank/assets/upload-icon.png') no-repeat center center;
  background-size:  64px;
  color:            rgba(255,255,255,0.5);
  font-size:        1.1em;
  cursor:           pointer;
  transition:       background 0.3s ease;
}
.up-dropzone.active,
.up-dropzone:hover {
  background:       rgba(0,255,255,0.2) url('/avatarbank/assets/upload-icon-active.png') no-repeat center center;
  background-size:  64px;
}

/* Header above upload area */
.up-upload-header {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  margin-bottom:    20px;
  text-align:       center;
}
.up-upload-label {
  font-size:        1.5em;
  font-weight:      bold;
  margin-bottom:    10px;
}

/* Preview thumbnails */
.up-upload-preview-item {
  display:          inline-block;
  width:            150px;
  height:           150px;
  margin:           10px;
  border:           10px solid rgba(0,0,0,0.4);
  border-radius:    6px;
  overflow:         hidden;
  position:         relative;
}
.up-upload-preview-item img {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  border:           1px solid #ddd;
}
.up-upload-remove-btn {
  position:         absolute;
  bottom:           5px;
  left:             50%;
  transform:        translateX(-50%);
  background:       var(--color-highlight);
  color:            #000;
  padding:          5px;
  border:           none;
  border-radius:    var(--btn-radius);
  cursor:           pointer;
  font-size:        0.75em;
  transition:       background-color 0.3s ease;
}
.up-upload-remove-btn:hover {
  background:       var(--color-highlight-hover);
}

/* Grid of previews */
.up-preview {
  display:          grid;
  grid-template-columns: repeat(5, 1fr);
  gap:              2px;
  margin-top:       20px;
}

/* Upload button area */
.up-button-wrapper {
  width:            80%;
  margin:           0 auto;
  text-align:       right;
}
.up-button-wrapper button {
  background:       var(--color-highlight);
  color:            #fff;
  border:           none;
  border-radius:    var(--btn-radius);
  padding:          8px 14px;
  font-size:        1.1em;
  cursor:           pointer;
  transition:       background-color 0.3s ease, transform 0.2s ease;
}
.up-button-wrapper button:hover {
  background:       var(--color-highlight-hover);
  transform:        translateY(-2px);
}
.up-button-wrapper button:active {
  background:       #E64A19;
  transform:        translateY(0);
}

/* Error & success lists */
.up-error-list,
.up-success-list {
  list-style:       none;
  width:            50%;
  margin:           0 auto 20px;
  padding:          5px;
  border-radius:    var(--btn-radius);
  font-size:        0.9em;
  text-align:       center;
  box-shadow:       0 4px 8px rgba(0,0,0,0.2);
}
.up-error-list {
  background:       rgba(255,0,0,0.3);
  color:            #fff;
}
.up-success-list {
  background:       rgba(0,255,0,0.3);
  color:            #fff;
}
.up-error-list li,
.up-success-list li {
  padding:          5px;
}
.up-success-list a {
  color:            #00ff00;
  text-decoration:  none;
}

/* Progress bar */
.up-progress-container {
  width:            80%;
  height:           12px;
  background:       #1f1f1f;
  border-radius:    var(--btn-radius);
  margin:           15px auto;
  overflow:         hidden;
}
.up-progress-bar {
  width:            0;
  height:           100%;
  background:       #00bcd4;
  transition:       width 0.3s ease;
}

/* Redirect message */
.up-redirect-message {
  text-align:       center;
  color:            #00ffcc;
  font-size:        1.1em;
  margin-top:       10px;
}

/* Desktop defaults */
.burger {
  display: none;
  background: none;
  border: none;
  font-size: 1.8em;
  color: #ffffff;
  cursor: pointer;
}

/* ===== Mobile Theme Adjustments (600px and under) ===== */
@media (max-width: 600px) {
  body {
    font-size: 13px;
  }

  h1 {
    font-size: 1.2em;
  }

  h2 {
    font-size: 1em;
  }

  h3 {
    font-size: .9em;
  }

  p,
  li,
  a,
  input,
  button,
  label {
    font-size: 0.7em;
  }

	.logo {
	  font-size: 1.2em !important; /* slightly smaller */
	  flex: 0 1 auto;
	  max-width: 70%;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}

  .site-header {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 20px;
  }

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

  .burger {
    display: block;
    background: none;
    border: none;
    font-size: 2em;
    color: #fff;
    cursor: pointer;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.85);
    text-align: center;
    border-top: 1px solid #333;
    margin-top: 10px;
  }

  .nav-links.show {
    display: flex;
  }

  .navlink-block {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .dashboard-header,
  .home-layout {
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }

  .dashboard-grid,
  .image-grid,
  .up-preview {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-stats-box {
    max-width: 100%;
  }

  .login-box {
    flex: 1;
    width: 100%;
  }
  
  .dashboard-grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  gap: 20px;
}

.dashboard-folder {
  width: 100%;
}


/* ===== Mobile Adjustments: Upload Page ===== */
@media (max-width: 600px) {
  .up-upload-container {
    padding: 15px;
  }

  .up-upload-header {
    text-align: center;
  }

  .up-upload-label {
    font-size: 1.2em;
    margin-bottom: 10px;
  }

  .up-folder-button-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 10px;
  }

  .up-folder-button {
    font-size: 1em;
    padding: 10px;
  }

  .up-button-wrapper {
    text-align: center;
    margin-top: 20px;
  }

  #up-upload-button {
    width: 100%;
    font-size: 1em;
    margin-left: auto;
    margin-right: auto;
  }

  #up-dropzone {
    padding: 30px;
    font-size: 1em;
    background-size: 48px;
  }

  .up-preview {
    grid-template-columns: repeat(2, 1fr);
  }

  .up-upload-preview-item {
    width: 100px;
    height: 100px;
    margin: 6px;
  }

  .up-upload-remove-btn {
    font-size: 0.7em;
  }

  .up-error-list,
  .up-success-list {
    width: 100%;
    font-size: 0.85em;
  }

  .up-progress-container {
    height: 10px;
  }

  .folder-row-flex {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .folder-url,
  .folder-delete {
    width: 100%;
    font-size: 1em;
  }

  .folder-name-cell {
    width: 100%;
    font-size: 2em;
  }

  .folder-preview {
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  div.folder-no-thumb,
  img.folder-thumb-small {
    width: 150px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
  }
}



}