/* public/style.css */

/* Ensure main action button text is WHITE in light mode */
html[data-theme="light"] {
    /* --pc: Primary Button Content color */
    /* --sc: Secondary Button Content color */
    /* --ac: Accent Button Content color */
    /* Set all to white using HSL (Hue Saturation Lightness) */
    --pc: 0 0% 100%; /* White */
    --sc: 0 0% 100%; /* White */
    --ac: 0 0% 100%; /* White */
}

/* ===== Keep ALL your existing styles below this new rule ===== */

body {
  touch-action: manipulation;
}

/* ================================== */
/* ===== iOS Input Zoom Fix ========= */
/* ================================== */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select {
  font-size: 16px !important;
}

/* ================================== */
/* ===== View Container Styling ===== */
/* ================================== */
.view-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%; /* Use 100% for better mobile compatibility */
    /* height: 100dvh; /* Consider dvh if browser support is sufficient */
    background-color: hsl(var(--b2));
    z-index: 50; /* z-index for overlay views */
    display: flex;
    flex-direction: column;
    color: hsl(var(--bc));
}

/* Specific override for main view container */
#main-view.view-container {
    position: relative; /* Override fixed positioning */
    z-index: 1; /* Lower z-index than overlay views */
    /* Use dvh for min-height to account for mobile toolbars */
    min-height: 100dvh;
    height: auto;
}


.view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid hsl(var(--b3));
    background-color: hsl(var(--b1)); /* Ensure background is opaque */
    flex-shrink: 0;
    height: 3rem;
    /* --- Make header sticky --- */
    position: sticky;
    top: 0;
    z-index: 40; /* Needs to be higher than content, lower than overlay views */
    /* ----------------------------- */
}

.view-content {
    padding: 1rem;
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0; /* Fix for flexbox overflow */
}

/* Specific padding/styles for main content area */
#main-view .main-content {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

/* Hide elements using Tailwind's 'hidden' class by default */
.hidden {
    display: none;
}

/* Ensure tabs work correctly inside the view */
.tab-pane.active {
    display: block;
}

/* Style for the file load feedback */
#adj-file-feedback, #noun-file-feedback {
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px; /* Adjust as needed */
}

/* ================================== */
/* ========== Phonetic View ========= */
/* ================================== */


#phonetic-view .view-content {
  overflow-y: auto;
  position: relative;
  padding-top: 0.75rem;
}

/* Keep sticky password styles */
.phonetic-sticky-pw {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
   /* Optional background color if needed */
   /* background-color: hsl(var(--b2)); */
}

/* Keep card wrapper styles */
.phonetic-card-wrapper {
  margin: 1.5rem auto;
  width: 100%;
  max-width: 90%;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .phonetic-card-wrapper {
    max-width: 450px;
  }
}


/* --- Modify #phonetic-output --- */
#phonetic-output {
  /* Existing styles */
  font-mono: inherit; /* Example */
  text-base: inherit; /* Example */
  md:text-lg: inherit; /* Example */
  space-y-1: inherit; /* Handled by children */
  background-color: hsl(var(--b2));
  padding: 0.75rem; /* p-3 */
  border-radius: 0.375rem; /* rounded-md */
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* shadow-md */
  line-height: 1.4;

  /* ADD THESE FOR INTERNAL SCROLLING */
  max-height: 65vh; /* Set a maximum height (e.g., 65% of viewport height) */
                    /* Adjust this value as needed */
  overflow-y: auto; /* Add vertical scrollbar ONLY if content overflows max-height */
}


/* Keep character span styles */
#modal-full-password .char-span {
  display: inline-block;
  padding: 0 0.1em;
  border-radius: 3px;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: default;
}

/* Keep list item styles */
#phonetic-output .phonetic-item {
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  display: block;
}
#phonetic-output .phonetic-item strong {
    display: inline-block;
    min-width: 1.5ch;
    text-align: center;
}

/* Keep highlight styles */
.phonetic-highlight {
  background-color: hsl(var(--p) / 0.8);
  color: hsl(var(--pc));
}
#phonetic-output .phonetic-item:hover {
    background-color: hsl(var(--b3));
}
#phonetic-output .phonetic-item.phonetic-highlight:hover {
    background-color: hsl(var(--p));
}


/* ================================== */
/* ===== Mobile Responsiveness ====== */
/* ================================== */

@media (max-width: 639px) { /* Corresponds to Tailwind's 'sm' breakpoint */
  .view-content {
      padding: 0.75rem;
  }
   #main-view .main-content {
       padding-top: 0.75rem;
       padding-bottom: 1.5rem;
   }
  #main-view .max-w-md {
        padding: 1rem;
  }

  /* Reduce textarea heights on mobile */
  #settings-view #custom-adjectives-input,
  #settings-view #custom-nouns-input {
      height: 5rem;
  }
  #settings-view #base-secret-template-input {
       height: 6rem;
  }
   #secret-view #secret-template-input {
       height: 8rem;
   }

   /* Stack file/url load buttons vertically on small screens */
   #settings-view .p-4 .flex-col.sm\\:flex-row {
        flex-direction: column;
        gap: 0.5rem;
   }
   /* Adjust file load feedback on small screens */
   #adj-file-feedback, #noun-file-feedback {
       max-width: none;
       white-space: normal;
       margin-top: 0.25rem;
       text-align: left;
       width: 100%;
   }
   #settings-view label[for="adj-file-input"],
   #settings-view label[for="noun-file-input"] {
       width: 100%;
   }
    #settings-view .p-4 .flex-col.sm\\:flex-row > .flex-grow {
        width: 100%;
    }
}

/* ================================== */
/* ===== Desktop Spacing (Example) == */
/* ================================== */
/* @media (min-width: 768px) { ... } */

/* PowerShell Snippet Container Styling */
#powershell-container,
#secret-powershell-container {
  opacity: 0.9;  /* Subtle transparency */
  width: 100%;
  max-width: 100%;
}

/* Ensure consistent positioning and width across views */
#main-view #powershell-container,
#secret-view #secret-powershell-container {
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 1.5rem;
}

/* Ensure the collapse components have same style */
#powershell-container .collapse,
#secret-powershell-container .collapse {
  width: 100%;
  max-width: 42rem; /* Same as max-w-xl from Tailwind */
  margin-left: auto;
  margin-right: auto;
}

/* Style for the PowerShell code blocks */
#ps-set-password, 
#ps-change-password, 
#ps-ad-password,
#secret-ps-set-password,
#secret-ps-change-password,
#secret-ps-ad-password {
  padding: 0.5rem;
  max-height: 120px;
  overflow-y: auto;
  line-height: 1.4;
}

/* Hover effect for code blocks */
.bg-base-100:has(pre[id^="ps-"]) {
  transition: all 0.2s ease;
}

.bg-base-100:has(pre[id^="ps-"]):hover {
  box-shadow: 0 0 0 1px hsl(var(--p) / 0.3);
}

/* Copy button hover effects */
[id$="-ps-set-btn"],
[id$="-ps-change-btn"],
[id$="-ps-ad-btn"] {
  transition: all 0.15s ease;
}

[id$="-ps-set-btn"]:hover,
[id$="-ps-change-btn"]:hover,
[id$="-ps-ad-btn"]:hover {
  background-color: hsl(var(--b3));
}

/* Medium screens */
@media (min-width: 768px) {
  #main-view #powershell-container,
  #secret-view #secret-powershell-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Larger screens */
@media (min-width: 1024px) {
  #powershell-container .collapse,
  #secret-powershell-container .collapse {
    max-width: 48rem; /* Same as lg:max-w-xl */
  }
}

/* Mobile adjustments */
@media (max-width: 639px) {
  #powershell-container .collapse-title,
  #secret-powershell-container .collapse-title {
    font-size: 0.9rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
  }
  
  #ps-set-password, 
  #ps-change-password, 
  #ps-ad-password,
  #secret-ps-set-password,
  #secret-ps-change-password,
  #secret-ps-ad-password {
    font-size: 0.75rem;
    padding: 0.35rem;
    max-height: 90px;
  }
}

/* Animations for copy buttons */
[id$="-ps-set-btn"] i.fa-check,
[id$="-ps-change-btn"] i.fa-check,
[id$="-ps-ad-btn"] i.fa-check {
  animation: fade-in-out 1.5s ease;
}

@keyframes fade-in-out {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* Username input styling */
#ps-username-input,
#secret-ps-username-input {
  background-color: hsl(var(--b1));
  transition: all 0.2s ease;
  padding-right: 2rem; /* Space for the feedback icon */
}

#ps-username-input:focus,
#secret-ps-username-input:focus {
  border-color: hsl(var(--p));
  outline: none;
}

/* Feedback icon styling */
#ps-username-feedback,
#secret-ps-username-feedback {
  transition: opacity 0.3s ease;
}

/* Username input container */
.collapse-content > .mb-3 {
  display: flex;
  align-items: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed hsl(var(--b3));
}

/* Mobile adjustments for username input */
@media (max-width: 639px) {
  .collapse-content > .mb-3 {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 0.75rem;
  }
  
  .collapse-content > .mb-3 label {
    width: 100%;
  }
  
  #ps-username-input,
  #secret-ps-username-input {
    width: 100%;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  
  .relative.flex-grow {
    width: 100%;
  }