/*-----------------------------------------------------------------------------
 * Main.css
 * Definitions for site wide common styles like the main layout, basic
 * interface elements like uttons.
 *-----------------------------------------------------------------------------
 */

/* Theme variables are defined in themes.css */

/* Reset some defaults */
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

*, *::before, *::after { font-family: inherit; }

/* full-viewport layout */
html, body {
   height: 100%;
   margin: 0;
   padding: 0;
 }

/* keep page from scrolling, only inner content scrolls */
body {
   display: flex;
   flex-direction: column;
   overflow: hidden;
   font-family: var(--body-font);
   font-size: var(--body-size);
   font-weight: var(--body-weight);
   background-color: var(--bg-page);
   color: var(--text-primary);
}

/* Site header, further styling in menu.css */
header {
   width: 100%;
   padding: 6px 0px;
   margin: 0;
   background-color: var(--bg-header);
   box-shadow: var(--shadow-md);
}

/* Main fills the rest of the page, consisting of a main-header (can be omitted) and main-content */
main {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   min-height: 0; /* important so children can shrink and scroll */
   max-width: var(--main-width);
   margin: 0 auto;      /* center on the page */
   padding: 16px;
   width:100%;   /* Otherwise, if there's not enough content, will be too small */
   /*background-color: red;*/
}

main.wide-view {
   max-width: max(var(--main-width), calc((100vh - 180px) * 16 / 9 + 32px));
}

@supports (height: 100dvh) {
   main.wide-view {
      max-width: max(var(--main-width), calc((100dvh - 180px) * 16 / 9 + 32px));
   }
}

main.wide-view .main-header {
   max-width: calc(var(--main-width) - 32px);
   width: 100%;
   margin-left: auto;
   margin-right: auto;
}

/* Header inside main (non-scrolling) */
.main-header {
   flex: 0 0 auto;
   margin-top: 16px;
   margin-bottom: 16px;     
   display: flex;
   justify-content: space-between;
   align-items: center;
}

/* The scrollable area of main */
.main-content {
    flex: 1 1 auto;
    min-height: 0;            /* critical for flexbox scrolling */
    overflow-y: auto;         /* enables scrolling */
    -webkit-overflow-scrolling: touch;
    /*padding: 12px;*/
    background: var(--bg-page);
  }

  /* hide scrollbars visually if you want (but keep scrolling) */
  .main-content::-webkit-scrollbar { width: 0; height: 0; }
  .main-content { scrollbar-width: none; } /* firefox */


/* Dimmed main class */
.dimmed {
  filter: brightness(50%);
  transition: filter 0.3s ease;
}  

/* Layout */   /* TODO: this is used by search too => make main-header with title and toolbar 
.collection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    */

/* Title */
.collection-title {
  font-family: var(--title-font);
  font-size: var(--title-size);
  font-variant: small-caps;
  font-weight: var(--title-weight);
  letter-spacing: 0;
}

/* Toolbar */
.collection-toolbar {
   display: flex;
   gap: 0px;
   align-items: center;
}  



/*-----------------------------------------------------------------------------------------------------*/
/* Overlay */
.overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--overlay-backdrop);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;          /* make sure it’s higher than other elements */
}

/* Show overlay when active */
.overlay.active {
  display: flex;
}

/* Popup box */
.login-popup {
  background      : var(--bg-card);
  padding         : 20px;
  border-radius   : 0px;
  width           : 300px;
  box-shadow      : var(--shadow-md);
}

.login-popup input {
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
}

.close-btn {
  float: right;
  cursor: pointer;
  font-size: var(--popup-size);
}



.table-common {
  border-collapse: collapse; 
}


/*-------------------------------------------------------------------------------------*/
/* Buttons: normal text buttons and icons */

.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font: inherit;
   cursor: pointer;
   border: none;
   background: none;
   transition: background-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}

.button.text {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    background-color: var(--accent-color);; /*#007bff;*/
    color: var(--text-on-accent);
}

.button.text.disabled {
    background-color: gray;
}

.button.text.small {
    font-size: var(--button-sm-size);
}

.button.check {
   /* Default is: unchecked */
   border: 1px solid;
   border-color: var(--accent-color);
   background-color: var(--bg-card);
   color: var(--accent-color);
}


.button.check.checked {
   border: 1px solid;
   border-color: var(--accent-color);; /*#007bff;*/
   background-color:var(--accent-color);
   color: var(--text-on-accent);
}


.button.text:hover {
    filter: brightness(90%);
}

.button.text.small {
   font-size: var(--button-sm-size);
   padding: 0.3rem 0.7rem;
}

.button.green {
  background-color: var(--success-color);
}
.button.red {
  background-color: var(--error-color);
}
.button.blue {
  background-color: #007bff;
}
.button.gray {
  background-color: #ccc;
  cursor:default;
}

.button.icon {
   background: none;
   border: none;
   padding: 0px;
   cursor: pointer;
   color: var(--text-muted);
   font-size: var(--icon-md);
   transition: color 0.2s ease;
   margin-left: 15px;
}

.button.icon:hover {
   color: var(--text-secondary);
   /*background-color: none;*/
}

.button.icon.active {
    color: var(--accent-color);
    /*background-color: none;*/
}

.button.icon .dropdown-arrow {
   font-size: var(--label-size);
   opacity: 0.7;
   margin-left: 2px;
}

.button.icon i {
   font-size: var(--icon-md);
}







.button.fixed-width {
   width: 80px;
}


/* Fullscreen overlay, hidden by default */
.thumb-overlay {
  display: none;                /* hidden initially */
  position: fixed;              /* stay in viewport */
  top: 0;
  left: 0;
  width: 100vw;                 /* full width */
  height: 100vh;                /* full height */
  background: var(--overlay-dark); /* semi-transparent background */
  justify-content: center;      /* horizontal centering */
  align-items: center;          /* vertical centering */
  z-index: 9999;
  display: flex;                /* enable flex layout when JS sets display */
}

/* The white content box inside overlay */
.thumb-overlay-content {
  background: var(--bg-card);
  padding: 20px;
  border-radius: 8px;
  max-width: 800px; /*90%;               /* limit width to 90% of viewport */
  max-height: 80%;              /* limit height */
  overflow: auto;               /* scroll if content is taller than max-height */
  text-align: center;
  box-sizing: border-box;
}

#thumb-photo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.admin-thumb {
  width: 200px;
  margin: 5px;
  border: 2px solid transparent;
  cursor: pointer;
}
.admin-thumb:hover {
  border-color: var(--accent-color);
  transform: scale(1.05);
}

#thumb-close {
  float: right;
  font-size: var(--hero-size);
  cursor: pointer;
}

.albumtype-dropdown {
   width: 200px;
}