/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%; /* 1rem = 10px */
}

body {
    font-family: "Noto Sans JP", "Noto Serif JP", 'Roboto';
    background-color: #F8F8F8;
    color: #333;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    overflow-x: hidden; /* 横スクロール防止 */
    min-height: 100vh;
}

/* Forms */
.form-group {
    margin-bottom: 30px;
    text-align: left;
}

.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #999;
    font-size: 1.6rem;
}

input[type="email"],
input[type="password"],
input[type="text"], /* time-inputもここに含む */
textarea {
    width: 100%;
    padding: 12px 16px; /* 左右のパディングを統一 */
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1.6rem;
    background: #F8F8F8;
    color: #333;
}

/* ログインフォームのアイコン付きinput用パディング */
input[type="email"],
input[type="password"] {
    padding-left: 72px; /* アイコン分の左パディング */
}

/* select要素のスタイルを再定義 (Flatpickrで不要になるため、ここでは基本的なもののみ残す) */
select {
    width: 100%;
    padding: 12px 16px; /* 上下12px, 左右16pxで統一 */
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1.6rem;
    background: #F8F8F8;
    color: #333;

    /* ブラウザのデフォルトのドロップダウン矢印を非表示にする */
    appearance: none;
    -webkit-appearance: none;
    
    /* カスタムのドロップダウン矢印を背景画像として適用 */
    background-image: url('../images/down-arrow.svg'); /* common.cssからassets/images/への相対パス */
    background-repeat: no-repeat;
    background-position: right 16px center; 
    background-size: 16px; /* 矢印のサイズ */
}

/* エラー時の入力欄のスタイル */
.input-wrapper.error input,
input.error,
select.error,
textarea.error {
    border: 1px solid #DC3545; /* エラー表示の赤色 */
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #007BFF;
    background: #fff;
}

textarea {
    min-height: 100px;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: #999;
}

/* エラーメッセージのスタイル */
.error-message {
    color: #DC3545; /* エラー表示の赤色 */
    margin-top: 16px; /* 入力欄との間隔 */
    text-align: center;
    display: none; /* 初期状態では非表示 */
}

.error-message.general-error {
    text-align: center; /* 全体エラーメッセージは中央寄せ */
    margin-top: 16px; /* ログインボタンとの間隔 */
}

/* Buttons */
.login-btn,
.submit-btn,
.add-btn {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #F8F8F8;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.login-btn:hover,
.submit-btn:hover,
.add-btn:hover {
    background: #007BFF;
    color: #fff;
    border-color: #007BFF;
}

.login-btn:focus,
.submit-btn:focus,
.add-btn:focus {
    outline: 2px solid #007BFF;
}

/* Utility */
.forgot-password {
    margin-top: 20px;
}

.forgot-password a {
    font-size: 14px;
    color: #007BFF;
    text-decoration: none;
}

.forgot-password a:hover {
    text-decoration: underline;
}

/* Layout */
.container {
    width: 100%;
    padding: 5% 8%; 
    margin: 0 auto;
    min-height: 100vh;
}

/* Flatpickr のデフォルト矢印などを非表示にする調整 */
/* これはFlatpickrが生成する要素に直接適用されるため、common.cssで定義 */
.flatpickr-calendar.arrowBottom:before,
.flatpickr.calendar.arrowBottom:after {
    display: none; /* Flatpickrのデフォルトの矢印を非表示にする */
}

/* Flatpickrの入力フィールドの見た目を調整 */
.flatpickr-input {
    background-image: none !important; /* selectの背景画像を無効化 */
    padding-right: 12px !important; /* 矢印スペースが不要になるため、右パディングを調整 */
}

/* ==================================== */
/* SP対応 (max-width: 768px) */
/* ==================================== */
@media screen and (max-width: 768px) {

    /* Containerの調整 */
    .container {
        min-width: unset; /* SPでは最小幅を解除 */
        padding: 16% 8%; /* SPでの左右パディングを調整 */
    }

    /* フォーム要素の調整 */
    .form-group {
        margin-bottom: 20px; /* SPでのマージンを調整 */
    }

    input[type="email"],
    input[type="password"],
    input[type="text"],
    textarea,
    select {
        padding: 10px 12px; /* SPでの入力欄のパディングを調整 */
        font-size: 1.4rem;
    }

    input[type="email"],
    input[type="password"] {
        padding-left: 50px; /* SPでのアイコン付き入力欄のパディングを調整 */
    }

    .input-icon {
        left: 12px; /* SPでのアイコン位置を調整 */
        font-size: 1.4rem;
    }

    .error-message {
        margin-top: 10px; /* SPでのエラーメッセージのマージンを調整 */
        font-size: 1.2rem;
    }

    /* ボタンの調整 */
    .login-btn,
    .submit-btn,
    .add-btn {
        padding: 12px; /* SPでのボタンのパディングを調整 */
        font-size: 1.4rem;
    }

    .forgot-password a {
        font-size: 12px; /* SPでのリンクのフォントサイズを調整 */
    }
}

/* ==================================== */
/* SP対応 (max-width: 480px) - さらに小さな画面向け */
/* ==================================== */
@media screen and (max-width: 480px) {
    /* Containerの調整 */
    .container {
        min-width: unset; /* SPでは最小幅を解除 */
        padding: 16% 8%; /* SPでの左右パディングを調整 */
    }

    /* フォーム要素の調整 */
    .form-group {
        margin-bottom: 20px; /* SPでのマージンを調整 */
    }

    input[type="email"],
    input[type="password"],
    input[type="text"],
    textarea,
    select {
        padding: 10px 12px; /* SPでの入力欄のパディングを調整 */
        font-size: 1.4rem;
    }

    input[type="email"],
    input[type="password"] {
        padding-left: 72px; /* SPでのアイコン付き入力欄のパディングを調整 */
    }

    .input-icon {
        left: 12px; /* SPでのアイコン位置を調整 */
        font-size: 1.4rem;
    }

    .error-message {
        margin-top: 10px; /* SPでのエラーメッセージのマージンを調整 */
        font-size: 1.2rem;
    }

    /* ボタンの調整 */
    .login-btn,
    .submit-btn,
    .add-btn {
        padding: 12px; /* SPでのボタンのパディングを調整 */
        font-size: 1.4rem;
    }

    .forgot-password a {
        font-size: 12px; /* SPでのリンクのフォントサイズを調整 */
    }
}