/* ===== OpenWrt Custom Firmware Selector - Extended Styles ===== */
/* index.cssを継承し、カスタム機能のみを拡張 */

/* ===== CSS Variables ===== */
:root {
  /* OpenWrt Brand Colors */
  --owrt-blue: #00B5E2;
  --owrt-navy: #002B49;
  --owrt-black: #231F20;
  --owrt-gray: #212322;
  --owrt-white: #FFFFFF;
  --owrt-blue-hover: #00a3e1; 
  
  /* Light Mode Colors */
  --bg-main: #f5f5f5;
  --bg-section: #fff;
  --bg-item: #fafafa;
  --bg-item-hover: #f0f0f0;
  --bg-details: #f9f9f9;
  --bg-warning: #fff3cd;
  
  --border-main: #e0e0e0;
  --border-connection: #dee2e6;
  --border-warning: #ffeaa7;
  
  --text-main: #000;
  --text-secondary: #666;
  --text-muted: #6c757d;
  --text-header: #333;
  --text-small: #999;

  /* Base settings (index.cssから継承) */
  --input-padding: 0.8em;
  --input-border: 0.06em solid transparent;
  --input-border-radius: 0.2em;
  --input-bg-light: #f1f1f1;
  --input-bg-dark: #313135;
  --container-border-radius: 0.25em;
}

/* Dark Mode Colors */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-main: #18181b;
    --bg-section: #252528;
    --bg-item: #2a2a2d;
    --bg-item-hover: #3a3a3e;
    --bg-details: #2a2a2d;
    --bg-warning: #3d3319;
    
    --border-main: #444;
    --border-connection: #444;
    --border-warning: #5a4d1f;
    
    --text-main: #d0d0d0;
    --text-secondary: #999;
    --text-muted: #999;
    --text-header: #d0d0d0;
    --text-small: #999;
  }
}

/* ===== Settings Import/Export Bar ===== */
#settings-bar {
  width: 100%;
  background-color: #002B49;
  box-shadow: 0em 0.125em 0.25em -0.06em rgba(0, 0, 0, 0.2),
    0em 0.25em 0.3em 0em rgba(0, 0, 0, 0.14),
    0em 0.06em 0.625em 0em rgba(0, 0, 0, 0.12);
  z-index: 1000;
}

.settings-bar-content {
  padding: 0.5em 2%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.left-section {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.right-section {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-left: auto;
}

/* ASU Status Display */
.asu-status {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0.25em;
  font-size: 0.9em;
}

.status-indicator {
  font-size: 1.2em;
  line-height: 1;
}

.status-text {
  font-weight: 500;
  color: #fff;
}

/* Status Colors */
.status-checking {
  color: #ffa500;
}

.status-online {
  color: #00ff00;
}

.status-offline {
  color: #ff0000;
}

.status-error {
  color: #ff6b6b;
}

.queue-display:empty {
  display: none;
}

.settings-btn {
  background-color: #00a3e1;
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.25em;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 0.5em;
  transition: background-color 0.2s;
  box-shadow: 0em 0.06em 0.3em 0em rgba(0, 0, 0, 0.2);
}

.settings-btn:hover {
  background-color: #038fc6;
}

.settings-btn:active {
  background-color: #0080b3;
}

@media (prefers-color-scheme: dark) {
  #settings-bar {
    background-color: #001a2e;
  }
  
  .asu-status {
    background-color: rgba(0, 0, 0, 0.4);
  }
  
  .settings-btn {
    background-color: #0080b3;
  }
  
  .settings-btn:hover {
    background-color: #006a99;
  }
}

/* Mobile adjustments for Settings Bar */
@media (min-resolution: 400dpi), (max-width: 600px), (pointer: coarse) {
  .settings-bar-content {
    padding: 0.5em 1%;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
  }
  
  .left-section {
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
  }
  
  .right-section {
    width: 100%;
    gap: 0.5em;
  }
  
  .settings-btn {
    padding: 0.4em 0.8em;
    font-size: 0.9em;
    flex: 1;
  }
}

/* ===== Form Elements ===== */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--owrt-blue);
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

.form-row {
  display: flex;
  gap: 1em;
  margin-bottom: 1em;
}

.form-group {
  flex: 1;
}

.form-group label {
  display: block;
  margin-bottom: 0.25em;
  font-weight: 500;
}

.form-group input:not(.autocomplete > input):not(#versions),
.form-group select:not(#versions),
.form-group textarea {
  width: 100%;
  box-sizing: border-box; 
  margin: 0;
  background-color: var(--input-bg-light);
  color: var(--text-main);
  resize: both;
  padding: var(--input-padding);
  font-size: inherit;
  line-height: normal;
  border: var(--input-border);
  border-radius: var(--input-border-radius);
}

.form-group small {
  display: block;
  margin-top: 0.25em;
  color: var(--text-muted);
  font-size: 0.875em;
}

/* Dark mode support for form elements */
@media (prefers-color-scheme: dark) {
  .form-group input:not(.autocomplete > input):not(#versions),
  .form-group select:not(#versions),
  .form-group textarea,
  #command,
  #uci-defaults-content,
  #postinst-content,
  #asu-packages {
    background-color: var(--input-bg-dark);
    color: var(--text-main);
  }
}

/* ===== Radio Groups ===== */
.radio-group {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1em;
  margin-top: 0.5em;
  grid-template-columns: unset !important;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  white-space: nowrap;
}

.radio-group input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
}

.radio-group span {
  line-height: 1;
}

/* ===== Multi Input Container (Package Search & Commands) ===== */
.multi-input-container {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  min-height: 2.5em;
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 0.2em;
}

.multi-input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

.multi-input-item {
  flex: 1;
  border: var(--input-border);
  background-color: var(--input-bg-light);
  padding: var(--input-padding);
  border-radius: var(--input-border-radius);
  font-size: inherit;
  line-height: normal;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.multi-input-item:placeholder-shown:not(:focus) {
  opacity: 0.6;
}

/* Dark mode support for multi-input */
@media (prefers-color-scheme: dark) {
  .multi-input-item {
    background-color: var(--input-bg-dark);
    color: var(--text-main);
  }
}

/* ===== Package Search Autocomplete ===== */
#package-search-autocomplete {
  position: relative;
  margin-bottom: 1.5em;
}

.package-search-results {
  position: absolute;
  border: var(--input-border);
  border-bottom: none;
  border-top: none;
  font-size: inherit;
  z-index: 99;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: var(--bg-section);
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.package-search-results div {
  padding: var(--input-padding);
  cursor: pointer;
  border-bottom: var(--input-border);
}

.package-search-results div:hover {
  background-color: var(--owrt-blue-hover);
  color: var(--owrt-white);
}

/* Dark mode support for autocomplete */
@media (prefers-color-scheme: dark) {
  .package-search-results {
    background-color: var(--bg-section);
    border-color: var(--border-main);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }
  
  .package-search-results div {
    border-color: var(--border-main);
  }
  
  .package-search-results div:hover {
    background-color: var(--owrt-blue-hover);
    color: var(--owrt-white);
  }
}

/* ===== Textarea Elements ===== */
#command,
#uci-defaults-content,
#postinst-content,
#asu-packages {
  width: 90%;
  margin: 0;
  padding: var(--input-padding);
  border: var(--input-border);
  background-color: var(--input-bg-light);
  color: var(--text-main);
  border-radius: var(--input-border-radius);
  font-size: inherit;
  line-height: normal;
  resize: both;
}

/* Dark mode support for textarea */
@media (prefers-color-scheme: dark) {
  #command,
  #uci-defaults-content,
  #postinst-content,
  #asu-packages {
    background-color: var(--input-bg-dark);
    color: var(--text-main);
  }
}

/* ===== Details/Summary Styling ===== */
details {
  margin-top: 1em;
}

details summary {
  cursor: pointer;
  padding: 1em 0 1em 0;
  user-select: none;
  color: inherit;
  display: list-item !important;
  list-style: disclosure-closed !important;
  list-style-position: outside !important;
}

details[open] summary {
  list-style: disclosure-open !important;
}

details summary:hover {
  color: var(--owrt-blue);
}

details summary h3 {
  margin: 0;
  font-weight: 500;
}

details summary h4,
details summary h5 {
  margin: 0;
  font-weight: 500;
}

details[open] summary {
  border-bottom: none;
}

/* Webkit browsers用 */
details summary::-webkit-details-marker {
  display: inline-block !important;
}

/* Nested details (Postinst and UCI-defaults) - with working disclosure triangle */
#postinst-details summary,
#uci-defaults-details summary {
  margin-left: 1em;
  display: list-item !important;
  list-style: disclosure-closed outside !important;
}

#postinst-details[open] summary,
#uci-defaults-details[open] summary {
  list-style-type: disclosure-open !important;
}

#custom-packages-details,
#custom-scripts-details {
  margin-top: 2.0em;
  padding-left: 2.0em;
}

#custom-packages-details > summary,
#custom-scripts-details > summary {
  margin-left: -2.0em;
  padding-left: 0;
  list-style-position: outside !important;
}

/* Parent container alignment - Simple and consistent */
/* Note: Ideal values would be auto-calculated based on marker width, but using fixed values for simplicity */
#package-selector-config,
#scripts-config {
  margin-left: -1.5em;
}

/* Align child containers to match summary position */
#package-selector-config .config-section,
#package-selector-config .package-category,
#scripts-config .config-section,
#scripts-config .package-category {
  margin-left: -1.5em;
}

#custom-packages-details > summary h3,
#custom-scripts-details > summary h3 {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

#postinst-details summary h4,
#uci-defaults-details summary h4 {
  display: inline-block;
  vertical-align: middle;
}

/* Additional info - aligned with h4 text */
#postinst-additional-info,
#uci-defaults-details summary .file-size-info {
  display: block;
  margin-top: 0.5em;
  margin-left: 0;
}

/* ===== Additional Info Displays ===== */
.additional-package-info,
.file-size-info {
  display: block !important;
  padding: 0;
  margin-top: 0.5em;
  background-color: transparent;
  border: none;
  font-size: 0.85em;
  color: var(--text-muted);
  font-weight: normal;
}

/* ===== ISP Information Display ===== */
#isp-info-row,
#isp-timezone-row,
#isp-isp-row,
#isp-as-row,
#isp-ip-row,
#isp-connection-row {
  background-color: var(--owrt-blue);
  color: var(--owrt-white);
  margin: 0.25em 0;
  padding: 0.5em 1.5em;
  border-radius: 0.2em;
}

@media (prefers-color-scheme: dark) {
  #isp-info-row,
  #isp-timezone-row,
  #isp-isp-row,
  #isp-as-row,
  #isp-ip-row,
  #isp-connection-row {
    background-color: #1a3a4a;
  }
}

/* ===== Feature Grid Components ===== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75em;
  margin-top: 1em;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em;
  border-radius: 0.2em;
  transition: background-color 0.2s;
}

.feature-item input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.feature-item label {
  margin: 0;
  cursor: pointer;
  font-weight: normal;
}

.system-management-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5em;
  margin-top: 1em;
}

/* ===== Section Containers ===== */
.config-section,
.package-category {
  margin: 0 0 1.5em 0;
  padding: 0 1em 1em 1em;
  background-color: var(--bg-section);
  border: 1px solid var(--border-main);
  border-radius: 0.25em;
  box-shadow: 0em 0.06em 0.19em 0em rgba(0, 0, 0, 0.2),
              0em 0.06em 0.06em 0em rgba(0, 0, 0, 0.14),
              0em 0.125em 0.06em -0.06em rgba(0, 0, 0, 0.12);
  color: var(--text-main);
}

.config-section h4,
.package-category h4,
#postinst-details h4,
#uci-defaults-details h4 {
  margin-top: 1em;
  margin-bottom: 1em;
  color: inherit;
}

.package-category-description,
.package-description {
  margin-bottom: 1em;
  color: var(--text-secondary);
  font-size: 0.9em;
}

.info-display {
  padding: 1em;
  background-color: var(--bg-item);
  border-radius: 0.2em;
  margin-top: 0.5em;
  white-space: pre-line;
}

/* ===== Package Components ===== */
#package-categories {
  margin: 1em 0;
}

.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.75em;
}

.package-item {
  padding: 0.5em;
  border-radius: 0.2em;
  transition: background-color 0.2s;
}

.package-item label,
.package-dependent label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
}

.package-item input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.package-link {
  color: var(--owrt-blue);
  text-decoration: none;
  font-weight: 500;
}

.package-link:hover {
  color: var(--owrt-blue);
}

.package-webui-link {
  text-decoration: none;
}

.package-webui-link:hover {
  text-decoration: none;
}

.package-dependent {
  margin-left: 1.5em;
}

/* ===== 汎用リンクスタイル ===== */
.linked-title {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}

.linked-title:hover {
  color: var(--owrt-blue);
}

#asu-server-link {
  text-decoration: none;
  color: inherit;
}

/* ===== 汎用ツールチップ（Package & Setup 共通） ===== */
.tooltip {
  position: absolute;
  bottom: 100%;
  left: 0;
  transform: translateY(-5px);
  background-color: var(--bg-section);
  color: var(--text-main);
  padding: 0.75em 1em;
  border-radius: 0.25em;
  font-size: 0.875em;
  line-height: 1.4;
  white-space: pre-wrap;
  max-width: 400px;
  min-width: 200px;
  width: max-content;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-main);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  pointer-events: none;
}

*:hover > .tooltip {
  opacity: 1;
  visibility: visible;
}

.tooltip::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 1.5em;
  border: 6px solid transparent;
  border-top-color: var(--border-main);
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 1.5em;
  border: 5px solid transparent;
  border-top-color: var(--bg-section);
  margin-top: -1px;
}

@media (prefers-color-scheme: dark) {
  .tooltip {
    background-color: var(--bg-section);
    border-color: var(--border-main);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
  
  .tooltip::after {
    border-top-color: var(--bg-section);
  }
}

/* ===== Connection Type Sections ===== */
#manual-connection-section {
  margin-top: 1em;
  padding: 1em;
  background-color: var(--bg-warning);
  border: 1px solid var(--border-warning);
  border-radius: 0.25em;
}

#internet-config {
  display: flex;
  flex-direction: column;
}

/* ===== Commands Autocomplete ===== */
#commands-autocomplete {
  position: relative;
}

#commands-autocomplete .command {
  margin-bottom: 0.5em;
}

/* ===== Build Progress Indicator ===== */
.build-progress {
  margin: 1em 0;
  padding: 1em;
  background-color: #e3f2fd;
  border: 1px solid var(--owrt-blue);
  border-radius: 0.25em;
  display: none;
}

.build-progress.active {
  display: block;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 0.5em;
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--owrt-blue);
  transition: width 0.3s ease;
}

@media (prefers-color-scheme: dark) {
  .build-progress {
    background-color: #1a3a4a;
    border-color: #0080b3;
  }
  
  .progress-bar {
    background-color: #444;
  }
  
  .progress-bar-fill {
    background-color: #0080b3;
  }
}

/* ===== Animation ===== */
details[open] > summary ~ * {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Responsive Design ===== */
/* adjust for mobile view */
@media (min-resolution: 400dpi), (max-width: 600px), (pointer: coarse) {
  .form-row {
    flex-direction: column;
  }
  
  .config-items-grid {
    grid-template-columns: 1fr !important;
  }
  
  .feature-grid,
  .system-management-grid,
  .package-grid {
    grid-template-columns: 1fr;
  }

  .radio-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
  }

  .radio-group label {
    display: flex;
    align-items: center;
    gap: 0.5em;
    white-space: normal;
    margin-bottom: 0.5em;
    min-height: 1.5em;
  }

  .radio-group input[type="radio"] {
    width: 1em;
    height: 1em;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }

  .radio-group span {
    line-height: 1.5;
    display: inline-block;
  }

  .form-group label,
  .form-row label:not(.radio-group label) {
    white-space: nowrap;
  }
  
  .multi-input-container {
    padding: 0;
    gap: 0.3em;
  }
  
  .multi-input-item {
    padding: var(--input-padding);
    font-size: inherit;
  }

  /* ISP情報を縦並びに */
  .row {
    flex-direction: column;
    padding-left: 0.5em !important;
    line-height: 1.3;
  }

  .col1,
  .col2 {
    display: block;
    width: 100%;
  }

  .col1::after {
    content: ":";
  }

  .col2 {
    padding-left: 1em;
    margin-top: 0.2em;
    word-wrap: break-word;
    word-break: break-all;
    overflow: visible;
    text-overflow: clip;
  }
  
  /* h3のアコーデオン矢印を表示領域内に収める */
  #custom-packages-details > summary,
  #custom-scripts-details > summary {
    margin-left: -1.0em !important;
    padding-left: 0 !important;
    display: list-item !important;
    list-style: disclosure-closed outside !important;
  }

  /* Parent container alignment for mobile - adjusted value */
  #package-selector-config,
  #scripts-config {
    margin-left: -1.0em;
  }
  
  /* Align child containers to match summary position */
  #package-selector-config .config-section,
  #package-selector-config .package-category,
  #scripts-config .config-section,
  #scripts-config .package-category {
    margin-left: -1.0em;
  }
  
  #custom-packages-details > summary h3,
  #custom-scripts-details > summary h3 {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
  }
  
  #custom-packages-details[open] > summary,
  #custom-scripts-details[open] > summary {
    list-style-type: disclosure-open !important;
  }

  /* Tooltip mobile adjustments */
  .tooltip {
    bottom: auto;
    top: 100%;
    transform: translateY(5px);
    max-width: 90vw;
  }
  
  .tooltip::before {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--border-main);
  }
  
  .tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--bg-section);
    margin-top: 0;
    margin-bottom: -1px;
  }
}

/* ===== Utility Classes ===== */
.text-muted {
  color: var(--text-muted);
}

.text-small {
  font-size: 0.875em;
}

.mt-1 { margin-top: 0.5em; }
.mt-2 { margin-top: 1em; }
.mt-3 { margin-top: 1.5em; }
.mb-1 { margin-bottom: 0.5em; }
.mb-2 { margin-bottom: 1em; }
.mb-3 { margin-bottom: 1.5em; }

.p-1 { padding: 0.5em; }
.p-2 { padding: 1em; }
.p-3 { padding: 1.5em; }