/*
 * assets/css/style.css
 *
 * mypage/・gw1dxjttq4d2k5/（管理画面）共通の見た目調整。
 *
 * 色は全てcontent.cssの:root変数を参照する（伏鳳確認済み・全画面の色遣いを統一し、
 * 今後の配色変更はcontent.cssの:root一箇所で完結するようにするための対応）。
 * このファイル自体には色を直接書かない。@importで読み込むことで、
 * このstyle.cssしかリンクしていない既存の全ページにも自動的に変数が届く
 * （各PHPファイルの<link>タグを1つずつ編集する必要が無い）。
 *
 * 既存のPHPファイルのHTML構造（<label>テキスト<br><input></label> 等）は
 * 変更せずに、CSSだけでレイアウトを整えている。
 */

@import url("content.css");

* {
    box-sizing: border-box;
}

body {
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    color: var(--content-text);
    background: var(--content-bg);
    margin: 0;
    padding: 24px 16px 60px;
    max-width: 960px;
    margin: 0 auto;
}

/* 管理画面のテーブル（注文一覧・商品一覧等）は列数が多く、960pxでは狭すぎて
   セル内の折り返しが激しくなるため、幅広の表示用クラスを別途用意する
   （伏鳳確認済み・注文一覧の幅の見直し対応）。 */
body.admin-wide {
    max-width: 1400px;
}

h1 {
    font-size: 22px;
    margin: 8px 0 20px;
    border-bottom: 2px solid var(--content-accent);
    padding-bottom: 8px;
    color: var(--content-text);
}

/* ページ上部の「○○様｜ポイント残高｜ログアウト」バー */
.page-header {
    background: var(--content-card-bg);
    border: 1px solid var(--content-border);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--content-text-sub);
    margin-bottom: 16px;
}
.page-header a {
    color: var(--content-accent-dark);
    text-decoration: none;
    margin-left: 4px;
}
.page-header a:hover {
    text-decoration: underline;
}

/* フォーム */
form {
    background: var(--content-card-bg);
    border: 1px solid var(--content-border);
    border-radius: 8px;
    padding: 20px 24px;
}

/* ボタン・セレクトボックス1つだけの「インラインフォーム」は、
   通常のform（白背景・枠線・余白）を継承させず、地の文と同じ見た目にする。
   このクラスを付けたform要素だけに適用される（他のformには影響しない）。 */
form.inline {
    display: inline;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0 4px 0 0;
}
form.inline select,
form.inline input {
    display: inline-block;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 6px 8px;
}

form p {
    margin: 0 0 16px;
}

form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--content-text-sub);
    margin-bottom: 14px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
    display: block;
    width: 100%;
    max-width: 360px;
    margin-top: 6px;
    padding: 9px 10px;
    font-size: 14px;
    border: 1px solid var(--content-border);
    border-radius: 4px;
    background: var(--content-card-bg);
    color: var(--content-text);
    font-family: inherit;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--content-accent);
    box-shadow: 0 0 0 2px rgba(224, 130, 74, 0.2);
}

button,
input[type="submit"] {
    display: inline-block;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--content-accent);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    /* 170番: ボタンを複数並べたとき（マイページの操作ボタン列、管理画面の
       編集/削除ボタン等）に、要素ごとに隙間がバラつかないよう、ボタン自体に
       右・下方向の余白を持たせて統一する（伏鳳確認済み・「一番下のボタンの
       間隔が一定ではない」との指摘への対応）。<a>で囲まれている・disabledで
       ある・form.inlineの中にある、いずれの場合でもボタン自身に付く余白なので
       常に同じ間隔になる。単独で使うボタンの右側に生じる余白は、実害が
       無いため許容する。 */
    margin: 0 8px 8px 0;
}
button:hover,
input[type="submit"]:hover {
    background: var(--content-accent-dark);
}
button:disabled {
    background: #ccc;
    color: #888;
    cursor: not-allowed;
}
button:disabled:hover {
    background: #ccc;
}

/* 一覧テーブル（admin/orders.php, mypage/subscriptions.php で使用） */
table {
    border-collapse: collapse;
    width: 100%;
    background: var(--content-card-bg);
    margin-top: 10px;
}
th, td {
    border: 1px solid var(--content-border);
    padding: 8px 10px;
    font-size: 13px;
    text-align: left;
    color: var(--content-text);
}
th {
    background: var(--content-bg);
}

/* エラーメッセージ */
p[style*="color:red"] {
    background: #fdecea;
    border: 1px solid #f5c6c0;
    border-radius: 4px;
    padding: 10px 14px;
}