/*
================================================================================
|                                                                              |
|                         JELLYFIN CUSTOM THEME                                |
|                         Login Page Styles (loginpage.css)                    |
|                                                                              |
================================================================================
*/

/* ~~~~~~~~~~~~~~~~~~~~ LOGIN PAGE - GENERAL LAYOUT & BACKGROUND ~~~~~~~~~~~~~~~~~~~~ */

/* Styles the main container of the login page. */
#loginPage .padded-left.padded-right.padded-bottom-page {
  margin: 0 auto !important; /* Center the login box */
  background: rgba(0, 0, 0, 0.35) !important; /* Semi-transparent dark background for the box */
  width: 45em !important;       /* Fixed width for the login box */
  border-radius: 15px !important; /* Rounded corners for the login box */
}

/* Styles the overall login page. */
body:has(#loginPage) .backdropContainer {
    background: var(--background-image, url(https://i.imgur.com/Ewk3Pqw.png)) !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(0px) brightness(.2);
    animation: fadeIn 1s ease-in;
    z-index: -2;
}

#loginPage .padded-bottom-page {
    padding-bottom: 1em !important;
}

/* Defines the fade-in animation. */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ~~~~~~~~~~~~~~~~~~~~ LOGIN FORM & USER SELECTION STYLING ~~~~~~~~~~~~~~~~~~~~ */

/* Narrows the login form elements (user selection and manual login form). */
#loginPage .readOnlyContent, /* Container for user selection cards */
#loginPage form             /* Manual login form */
{
  max-width: 32em !important; /* Maximum width for form content */
  padding-top: 2em !important;  /* Top padding */
}

/* Styles the "Select User" or "Log In" title. */
#loginPage .sectionTitle {
  margin: 0 auto 1.2em !important; /* Centering and bottom margin */
  text-align: center;
  /* The following margin and padding were repeated, potentially overriding the above. Consolidating. */
  /* margin: -10px 0 0 0; */ /* This was likely an attempt to adjust based on logo, see logo section */
  /* padding: 0; */
}

/* Styles for individual user cards in the visual login form. */
#loginPage .squareCard { /* User selection cards */
    width: 10em !important;
    /* Removed redundant padding-top: 2em for #loginPage form; it's already in the group above. */
}

#loginPage .cardText {
    white-space: normal !important;
    font-weight: bold;
    text-shadow: -1px 1px 5px var(--text-color);
}
/* Styling for the user image container within user cards. */
#loginPage .cardImageContainer {
    border-radius: 50% !important; /* Circular user images */
    aspect-ratio: 1 / 1 !important;  /* Ensure a perfect circle */
    background-size: cover !important;
    background-position: center !important;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); /* Subtle white glow */
}

/* Removes default background/shadow from the card padder to let image styles show. */
#loginPage .cardPadder {
    background: none !important;
    box-shadow: none !important;
}

/* Smooth Scale & Enhanced Glow */
#loginPage .squareCard:hover .cardImageContainer {
    transform: scale(1.08) !important; /* Smoothly scale up slightly */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 0 20px var(--primary-accent-color) !important; /* Enhance white glow and add an accent glow */
}

/* ~~~~~~~~~~~~~~~~~~~~ QUICK CONNECT & MANUAL LOGIN DIALOG STYLING ~~~~~~~~~~~~~~~~~~~~ */
/* Styles the dialog box that appears for Quick Connect or Manual Password entry. */

/* Applies to the main dialog when the login page is visible. */
body:has(#loginPage:not(.hide)) .dialogContainer .formDialog {
  border-radius: 60px !important; /* Highly rounded dialog */
}

/* Styles the footer of the dialog (containing buttons). */
body:has(#loginPage:not(.hide)) .dialogContainer .formDialogFooter .emby-button {
  background-color: var(--primary-accent-color) !important; /* Accent color for dialog buttons */
  color: white !important;
}

/* Styles the header of the dialog. */
body:has(#loginPage:not(.hide)) .formDialogHeader {
  background-color: var(--primary-accent-color) !important; /* Accent color for dialog header */
  border-top-left-radius: 60px;  /* Match dialog rounding */
  border-top-right-radius: 60px; /* Match dialog rounding */
  padding: 1em;
  margin-left: .2em !important; /* Slight left margin */
  color: var(--text-color);
}

/* Styles the title text within the dialog header. */
body:has(#loginPage:not(.hide)) .formDialogHeaderTitle {
  font-size: 1.5em;
  font-weight: bold;
}

/* Styles the inner content area of the dialog. */
body:has(#loginPage:not(.hide)) .dialogContentInner {
  padding-top: 2em;
  font-weight: bold;
}

/* ~~~~~~~~~~~~~~~~~~~~ HIDING DEFAULT ELEMENTS ~~~~~~~~~~~~~~~~~~~~ */

/* Hide "Manual Login" and "Forgot Password" buttons on the main user selection screen. */
/*#loginPage .raised.cancel.block.btnManual.emby-button,
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
    display: none;
}*/

/* Hide the default header (including hamburger menu) on the login page. */
body:has(#loginPage:not(.hide)) .headerTop {
    display: none !important;
}

/* Adjusts padding for standalone pages when the header is hidden. */
body:has(#loginPage:not(.hide)) .standalonePage {
    padding-top: 1em !important;
}

/* ~~~~~~~~~~~~~~~~~~~~ LOGO REPLACEMENT FOR "PLEASE SIGN IN" ~~~~~~~~~~~~~~~~~~~~ */
/* Replaces the default "Please sign in" H1 text with a logo. */

/* General style for H1 elements on the login page (targets the "Please sign in" text). */
#loginPage h1 {
  color: #ffffff00; /* Make text transparent */
  overflow: hidden;
  white-space: nowrap;
  display: block !important;
  height: 80px;       /* Set height for logo container */
  line-height: normal;
  margin: 10px auto !important; /* Centering and vertical margin */
  text-align: center !important;
  position: relative;
  padding: 20px 0 10px 0;
  border: none;
}

/* Uses a pseudo-element to display the logo. */
#loginPage h1::before {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 80px !important;
  background: var(--logo) no-repeat center center !important; /* Uses --logo variable from theme.css/color scheme */
  background-size: contain !important;
  text-indent: 0; /* Reset text indent if any */
}

/* Adjusts the .sectionTitle (used for "Select User" / "Log In") when the logo is replacing H1.
   This was previously further up, combined here for clarity with the logo replacement. */
#loginPage .sectionTitle {
  margin: -10px auto 1.2em !important; /* Negative top margin to pull it up slightly, adjust as needed */
  text-align: center;
  padding: 0;
}

/* ~~~~~~~~~~~~~~~~~~~~ DISCLAIMER & FOOTER TEXT ~~~~~~~~~~~~~~~~~~~~ */

/* Styles the login disclaimer text if present. */
.loginDisclaimer p {
    text-align: left !important;
    font-size: 100% !important;
    text-shadow: -1px 1px 12px var(--text-color); /* White text shadow for readability */
}

/* Adds a custom footer message to the login page. */
#loginPage::after {
  content: var(--footer-message, "");
  display: block;
  text-align: center;
  font-size: 1em;
  color: #fff;
  opacity: 0.5; /* Subtle text */
  text-shadow: -1px 1px 5px black;
  margin-top: 1em;
}

/* ~~~~~~~~~~~~~~~~~~~~ MANUAL LOGIN FORM CUSTOMIZATIONS ~~~~~~~~~~~~~~~~~~~~ */
/* Styles specific to the fields and buttons on the manual login form (username/password). */

/* Hides original text of labels and buttons to replace with ::after pseudo-elements. */
#loginPage .checkboxLabel,
#loginPage button.emby-button[type="submit"] span,
#loginPage button.emby-button[type="button"].btnCancel span,
#loginPage button.emby-button[type="button"].btnQuick span {
  font-size: 0;
}

/* Styles input field labels (e.g., "User", "Password"). */
#loginPage .inputLabel {
    color: var(--primary-accent-color);
    font-weight: bolder;
}

/* Custom text for the "Remember me" checkbox label. */
#loginPage .checkboxLabel::after {
  content: "記住密碼 📝";
  font-size: 15px !important; /* Ensure this doesn't inherit font-size: 0 */
  font-family: inherit;
  color: #fff;
}

/* Styles input fields on the manual login form. */
#loginPage .emby-input {
  color: var(--primary-accent-color); /* Text color inside input */
  transition: all 0.3s ease-in-out;
  border-radius: 5px;
  padding: 12px;
  background-color: #fff; /* White background for inputs */
  border: 1px solid #ddd; /* Light gray border */
}

/* Hover effect for the "Remember me" checkbox container. */
#loginPage .checkboxContainer:hover {
  color:  var(--primary-accent-color) !important; /* Changes label color on hover */
}

/* Custom text and styling for the "Sign In" (submit) button. */
#loginPage button.emby-button[type="submit"] span::after {
  content: "登入 🌀" !important;
  font-size: 16px !important;
  font-family: inherit;
}
#loginPage button.emby-button[type="submit"] {
  background-color: #28a745a8 !important; /* Semi-transparent green */
  color: var(--text-color) !important;
}
#loginPage button.emby-button[type="submit"]:hover {
  background-color: #28a745 !important; /* Solid green on hover */
  color: white !important;
  transition: background-color 0.3s ease, transform 0.3s ease;
  transform: scale(1.05); /* Slight scale effect */
}

/* Custom text and styling for the "Cancel" button. */
#loginPage button.emby-button[type="button"].btnCancel span::after {
  content: "取消 ☠️" !important;
  font-size: 16px !important;
  font-family: inherit;
}
#loginPage button.emby-button[type="button"].btnCancel {
  background-color: #dc3545a8 !important; /* Semi-transparent red */
  color: var(--text-color) !important;
}
#loginPage button.emby-button[type="button"].btnCancel:hover {
  background-color: #dc3545 !important; /* Solid red on hover */
  color: white !important;
  transition: background-color 0.3s ease, transform 0.3s ease;
  transform: scale(1.05);
}

/* Custom text and styling for the "Quick Connect" button. */
#loginPage button.emby-button[type="button"].btnQuick span::after {
  content: "Quick Connect 🔗" !important;
  font-size: 16px !important;
  font-family: inherit;
  color: var(--text-color) !important;
}
#loginPage button.emby-button[type="button"].btnQuick {
  background-color: var(--primary-accent-color) !important; /* Uses theme accent color */
}

#loginPage button.emby-button[type="button"].btnQuick:hover {
  background-color: var(--secondary-accent-color) !important; /* Could use a slightly darker/brighter shade on hover */
  color: white !important;
  transition: background-color 0.3s ease, transform 0.3s ease;
  transform: scale(1.05);
}

/* ~~~~~~~~~~~~~~~~~~~~ MANUAL LOGIN FORM - Show User Image and Hide Username ~~~~~~~~~~~~~~~~~~~~ */
/* works only with custom javascript that sets the user image in the container and hides username*/

/* Style for the image container */
#userProfileImageContainer {
    text-align: center;
}

/* Style for the image itself */
#userProfileImageContainer img {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--secondary-accent-color);
}


/* ~~~~~~~~~~~~~~~~~~~~ RESPONSIVE STYLING (MAX-WIDTH: 600px) ~~~~~~~~~~~~~~~~~~~~ */
@media (max-width: 600px) {
  /* Adjusts form and container widths for small screens. */
  #loginPage .readOnlyContent,
  #loginPage form {
      max-width: 90% !important;
  }
  #loginPage .padded-left.padded-right.padded-bottom-page {
      width: 95% !important;
      padding: 1em !important; /* Reduce padding on small screens */
  }

  /* Centers user cards on small screens. */
  #loginPage .users .itemsContainer {
    justify-content: center !important;
  }

  /* Adjusts user card size and margin for better layout on small screens. */
  #loginPage .squareCard {
    width: 30% !important; /* Smaller width for user cards */
    margin: 1% !important;  /* Small margin around cards */
  }

  /* Adjusts logo size on small screens. */
  #loginPage h1::before {
      height: 60px; /* Smaller height for the logo */
  }
}