/*
 * F-rental UI common styles
 * NOTE: iOS Safari / theme CSS の影響で、ボタン文字が消えたり太さが揃わない現象が出たため、
 *       フロント側で共通の見た目を強制します。
 */

/* Button-like elements used in the plugin */
.frental-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  padding:10px 12px;
  min-width:120px;
  height:40px;

  font-size:14px;
  font-weight:600;
  line-height:1;
  text-align:center;

  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;

  background:#fff;
  color:#111;
  text-decoration:none;

  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  -webkit-text-fill-color:#111; /* iOS Safari 対策 */
}

/* Ensure anchor/button/summary all keep visible text */
a.frental-btn,
button.frental-btn,
summary.frental-btn{
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
}

/* Primary / danger */
.frental-btn.primary{font-weight:700;}
.frental-btn.danger{border-color:rgba(255,0,0,.25);}

/* Small icon buttons (↑ ↓ etc.) */
.frental-btn[title],
.frental-btn.icon{
  min-width:40px;
  width:40px;
  padding:0;
}

/* Allow long labels to wrap nicely */
.frental-btn{white-space:nowrap;}
@media (max-width: 768px){
  .frental-btn{min-width:108px;height:40px;}
}

/* =========================================================
   Desktop/Mobile switching
   - サーバー側で両方のHTMLを出して、CSSで切り替えます
   ========================================================= */
.frental-desktop-only{display:block;}
.frental-mobile-only{display:none;}

@media (max-width: 768px){
  .frental-desktop-only{display:none !important;}
  .frental-mobile-only{display:block !important;}
}

/* =========================================================
   Mobile card UI (Admin: stores / cars)
   ========================================================= */
.frental-cardlist{display:flex;flex-direction:column;gap:12px;}
.frental-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}

/* Backward-compatible class names (already used in some shortcodes) */
.frental-mobile-cards{display:flex;flex-direction:column;gap:12px;}
.frental-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px dashed rgba(0,0,0,.12);}
.frental-card-title{font-size:16px;font-weight:800;}
.frental-kv{display:grid;grid-template-columns:110px 1fr;gap:8px 10px;font-size:14px;}
.frental-kv .k{font-weight:700;color:rgba(0,0,0,.7);}
.frental-kv .v{word-break:break-word;}
.frental-card-actions{display:flex;gap:10px;flex-wrap:wrap;}
.frental-card-actions .frental-btn{flex:1;min-width:140px;}
.frental-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px dashed rgba(0,0,0,.12);
}
.frental-card__title{font-size:16px;font-weight:800;}
.frental-card__meta{font-size:12px;color:rgba(0,0,0,.65);white-space:nowrap;}
.frental-card__body{padding:12px 14px;}
.frental-kv{display:grid;grid-template-columns:110px 1fr;gap:8px 10px;font-size:14px;}
.frental-kv dt{font-weight:700;color:rgba(0,0,0,.7);}
.frental-kv dd{margin:0;}
.frental-card__footer{
  padding:12px 14px;
  border-top:1px dashed rgba(0,0,0,.12);
}
.frental-actions-row{display:flex;gap:10px;flex-wrap:wrap;}
.frental-actions-row .frental-btn{flex:1;min-width:140px;}

/* Up/Down order controls (mobile) */
.frental-order-row{display:flex;gap:10px;align-items:center;}
.frental-order-row input[type="number"],
.frental-order-row input[type="text"]{
  flex:1;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
}

/* Status page: keep buttons inside screen */
@media (max-width: 768px){
  .frental-actions-inner{display:flex !important;flex-direction:column;gap:10px;align-items:stretch;}
  .frental-actions-inner .frental-btn{width:100%;min-width:0;}
  .frental-actions-inner details{width:100%;margin-left:0 !important;}
  .frental-actions-inner details > div{min-width:0 !important;width:100%;}
}


/* Status badge */
.frental-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  border:1px solid rgba(0,0,0,.12);
}
.frental-badge-ok{ background:rgba(0,128,0,.10); color:#0b5; border-color:rgba(0,128,0,.20); }
.frental-badge-danger{ background:rgba(220,0,0,.10); color:#c00; border-color:rgba(220,0,0,.20); }
.frental-badge-warn{ background:rgba(255,140,0,.12); color:#c60; border-color:rgba(255,140,0,.25); }
.frental-badge-muted{ background:rgba(0,0,0,.05); color:#333; border-color:rgba(0,0,0,.10); }

/* Table wrappers */
.frental-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Action area (稼働状況など) */
.frental-actions{white-space:normal !important;}
.frental-actions-inner{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}

@media (max-width: 768px){
  /*
   * Mobile-first layout
   * - テーブルは横スクロールではなく「カード表示」に変換
   * - data-label を左側の見出しとして表示
   */
  .frental-table-wrap{overflow-x:visible;}

  .frental-table{
    width:100% !important;
    min-width:0 !important;
    border-collapse:separate !important;
    border-spacing:0 12px !important;
  }
  .frental-table thead{display:none !important;}
  .frental-table tbody{display:block;}
  .frental-table tr{
    display:block;
    background:#fff;
    border:1px solid rgba(0,0,0,.10);
    border-radius:14px;
    padding:10px 12px;
    box-shadow:0 1px 0 rgba(0,0,0,.03);
  }
  .frental-table td{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    width:100% !important;
    padding:8px 0 !important;
    border-bottom:1px dashed rgba(0,0,0,.10) !important;
    word-break:break-word;
  }
  .frental-table td:last-child{border-bottom:none !important;}
  .frental-table td::before{
    content:attr(data-label);
    flex:0 0 auto;
    font-weight:700;
    font-size:12px;
    color:rgba(0,0,0,.60);
    padding-top:2px;
    white-space:nowrap;
  }

  /* form / input inside table */
  .frental-table input,
  .frental-table select,
  .frental-table textarea{max-width:100%;}

  /* action area: stack to avoid off-screen */
  .frental-actions-inner{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .frental-actions-inner > *{width:100%;}

  /* buttons: full width on mobile */
  .frental-btn{width:100%; min-width:0;}
  .frental-btn[title],
  .frental-btn.icon{width:44px; min-width:44px;}

  /* details の中身は画面幅に収める */
  details{max-width:100%;}
  details > div{min-width:0 !important; width:100% !important;}
}