/* css/style.css */

/* 基本的なスタイルリセットや、Tailwind CSSでカバーしきれないカスタムスタイルを記述します */
body {
    margin: 0;
    line-height: 1.6;
    padding-top: 68px; /* 固定ヘッダーの高さ分（実際の高さに合わせて調整） */
}

.container {
    max-width: 1100px; /* コンテンツの最大幅を調整 */
}

/* スムーズスクロール (ページ内リンク用) */
html {
    scroll-behavior: smooth;
}

/* ハンバーガーメニュー用の追加スタイル (任意) */
/* 例えば、メニューが開いたときに背景を固定するなど */
/* .mobile-menu-open body {
    overflow: hidden;
} */

/* 必要に応じて、ここにカスタムCSSを追加してください */

/* --- ここからレスポンシブフォントサイズ調整 (モバイル向け) --- */

/* 例えば、画面幅が639px以下の場合に適用 (Tailwindのsmブレークポイント未満) */
@media (max-width: 639px) {
    body {
        font-size: 0.875rem; /* Tailwindの text-sm (通常14px) に相当 */
        /* この設定は、個別に文字サイズが指定されていない多くのテキストに影響します */
    }

    /* * HTML側で Tailwind CSS のクラス (例: text-3xl) で文字サイズが指定されている要素は、
     * CSSの詳細度や !important を使わないと上書きが難しい場合があります。
     * 以下は、h1要素 や .text-3xl クラスを持つ要素の文字サイズを上書きする例です。
     * !important を使う場合は、影響範囲をよくご確認ください。
     */

    h1, .text-3xl { /* ダッシュボードのメインタイトルなど */
        /*font-size: 1.5rem !important;  /* Tailwindの text-2xl (24px) 相当 */
        font-size: 1.25rem !important; /* Tailwindの text-xl (20px) 相当 */
        line-height: 2rem !important; /* text-2xl の line-height */
    }

    h2, .text-2xl { /* 各セクションのタイトルなど */
        font-size: 1.25rem !important; /* Tailwindの text-xl (20px) 相当 */
        line-height: 1.75rem !important; /* text-xl の line-height */
    }

    h3, .text-xl { /* カード内のタイトルなど */
        font-size: 1.125rem !important; /* Tailwindの text-lg (18px) 相当 */
        line-height: 1.75rem !important; /* text-lg の line-height */
    }
    

    /* フォーム内の主要な入力要素の文字サイズを16pxに設定 */
    form input[type="text"],
    form input[type="email"],
    form input[type="password"],
    form input[type="date"],
    form input[type="number"],
    form textarea,
    form select {
        font-size: 16px; /* iOS Safariでの自動ズームを防ぐため */
    }

    /* ダッシュボードのサマリーカード内の数値など、特に大きく感じる箇所があれば個別に対応 */
    /* 例: .dashboard-summary-value (もしこのようなクラスがあれば) */
    /* .dashboard-summary-value { font-size: 1.5rem !important; } */
    
    /* テーブル内の文字など (body の font-size が継承されることが多いですが、必要なら) */
    /* th, td { font-size: 0.75rem !important; /* text-xs (12px) 相当 */ } */

    /* モバイルメニュー内のリンク文字サイズ (ハンバーガーメニュー展開時) */
    /* 現在のモバイルメニューは text-base なので、もし小さくするなら */
    /* #mobile-menu a { font-size: 0.875rem !important; /* text-sm */ } */

    /* ボタン内の文字なども、必要に応じて調整 */
    /* button, .button { font-size: 0.875rem !important; } */
}

/* --- レスポンシブフォントサイズ調整ここまで --- */

/* --- トグルスイッチのスタイル --- */
.toggle-label {
    transition: background-color 0.2s ease-in-out;
}

.toggle-checkbox {
    transition: transform 0.2s ease-in-out;
}

.toggle-checkbox:checked {
    transform: translateX(1rem); /* 円が右に移動 */
    border-color: #3498db; /* Tailwindのprimaryカラー */
}

.toggle-checkbox:checked + .toggle-label {
    background-color: #3498db; /* Tailwindのprimaryカラー */
}

/* --- カレンダーの色分け --- */
:root {
    --calendar-sat: #007bff; /* 青色 */
    --calendar-sun: #dc3545; /* 赤色 */
    --calendar-holiday: #dc3545; /* 赤色 */
}

.dark {
    --calendar-sat: #60a5fa; /* 明るい青 */
    --calendar-sun: #f87171; /* 明るい赤 */
    --calendar-holiday: #f87171;
}

.calendar-day.saturday, .calendar-header .saturday {
    color: var(--calendar-sat);
}
.calendar-day.sunday, .calendar-header .sunday {
    color: var(--calendar-sun);
}
.calendar-day.holiday {
    color: var(--calendar-holiday);
}

/* --- ハンバーガーメニューのスクロール対応 --- */
@media (max-width: 767px) {
    #mobile-menu {
        max-height: calc(100vh - 68px); /* ヘッダーの高さを引いたビューポートの高さ */
        overflow-y: auto;
    }
}

/* --- 目標チャレンジウィジェットのモバイル表示調整 --- */
@media (max-width: 767px) {
    .goal-slide .grid > div {
        /* 各情報ブロックの高さを揃える */
        display: flex;
        flex-direction: column;
    }

    .goal-slide .grid > div > div {
        /* ブロック内のコンテンツもflexで高さを揃える */
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .goal-slide .grid > div > div > div {
        /* ラベルと数値のペア */
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 0.25rem 0;
    }

    .goal-slide .grid > div > div > div > span {
        /* 「目標まであと」などのラベル */
        flex-shrink: 0;
        margin-right: 0.5rem;
    }

    .goal-slide .grid > div > div > div > p {
        /* 数値 */
        text-align: right;
    }

    .goal-slide .text-lg {
        font-size: 1rem !important; /* 16px */
        line-height: 1.5rem !important;
    }
    
    .goal-slide .font-bold {
        font-weight: 600; /* semi-bold */
    }

    /* ヘッダーエリアの調整 */
    .goal-slide .text-3xl {
        font-size: 1.5rem !important; /* 24px */
        line-height: 2rem !important;
    }
    
    .goal-slide .text-lg.whitespace-nowrap { /* 達成率(%) */
        font-size: 1.125rem !important; /* 18px */
    }
}


/* --- Slide Animation --- */
.slider-container {
    position: relative;
    overflow: hidden;
    /* 水平スワイプを有効にしつつ、ページの垂直スクロールを許可する */
    touch-action: pan-y;
    cursor: grab;
}

.slider-track {
    display: flex;
    /* よりスムーズなアニメーションカーブ */
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.slider-page {
    flex-shrink: 0;
    width: 100%; /* JS will override this, but it's a good default */
}

/* --- Widget Feedback Animation --- */
.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
}
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* Responsive Table for Mobile */
@media (max-width: 767px) {
    .responsive-table thead {
        display: none;
    }

    .responsive-table tr {
        display: block;
        margin-bottom: 1rem;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        padding: 0.5rem;
        border: 1px solid #e5e7eb;
    }
    
    .responsive-table td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e5e7eb;
    }

    .responsive-table tr td:last-child {
        border-bottom: none;
    }

    .responsive-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0.75rem;
        width: 45%;
        padding-right: 0.75rem;
        text-align: left;
        font-weight: 600;
        color: #4b5563; /* text-gray-600 */
    }

    /* Adjust specific columns */
    .responsive-table td[data-label="操作"] {
        text-align: center;
        padding-left: 0;
    }
     .responsive-table td[data-label="操作"]::before {
        display: none;
    }
}

/* --- Dashboard UI Framework (Uniformity Adjustments) --- */

/* Labels */
.db-label {
    font-size: 0.75rem; /* text-xs (12px) */
    font-weight: 500;
    color: #6b7280; /* text-gray-500 */
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.dark .db-label {
    color: #94a3b8; /* text-textSecondary-dark */
}

/* Values */
.db-value-hero {
    font-size: 1.5rem; /* text-2xl (24px) */
    font-weight: 700;
    line-height: 2rem;
}
@media (min-width: 640px) {
    .db-value-hero {
        font-size: 1.875rem; /* text-3xl (30px) */
    }
}

.db-value-main {
    font-size: 1.125rem; /* text-lg (18px) */
    font-weight: 700;
}
@media (min-width: 640px) {
    .db-value-main {
        font-size: 1.25rem; /* text-xl (20px) */
    }
}

.db-value-sub {
    font-size: 1rem; /* text-base (16px) */
    font-weight: 600;
}

/* Semantic Colors for Values */
.val-revenue { color: #3498db; } /* primary */
.dark .val-revenue { color: #38bdf8; }

.val-profit { color: #2ecc71; } /* secondary */
.val-eff { color: #f1c40f; }    /* accent */
.val-expense { color: #e74c3c; } /* danger */

/* Titles */
.db-section-title {
    font-size: 1.125rem; /* text-lg (18px) */
    font-weight: 600;
    color: #333333;
}
.dark .db-section-title {
    color: #f8fafc;
}
@media (min-width: 640px) {
    .db-section-title {
        font-size: 1.25rem; /* text-xl (20px) */
    }
}

/* --- App-wide UI Components (Reports & Forms) --- */

/* Generic Card */
.ui-card {
    background-color: #ffffff;
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-duration: 200ms;
}
.dark .ui-card {
    background-color: #1e293b; /* surface-dark */
}

/* Form Elements */
.ui-input {
    width: 100%;
    padding: 0.75rem; /* py-3 px-3 */
    background-color: #ffffff;
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.5rem; /* rounded-lg */
    color: #333333;
    transition-property: border-color, box-shadow;
    transition-duration: 200ms;
    outline: none;
}
.dark .ui-input {
    background-color: #1f2937; /* gray-800 */
    border-color: #4b5563; /* gray-600 */
    color: #f8fafc;
}
.ui-input:focus {
    border-color: #3498db; /* primary */
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); /* ring-2 focus:ring-primary */
}

/* Form Helper Classes */
.ui-form-group {
    margin-bottom: 1.5rem; /* mb-6 */
}

/* Table Standard Style (Matching Dashboard 'Recent Records') */
.ui-table {
    width: 100%;
    font-size: 0.875rem; /* text-sm */
    text-align: left;
}
.ui-table-thead {
    font-size: 0.75rem; /* text-xs */
    text-transform: uppercase;
    background-color: #f3f4f6; /* bg-gray-100 */
    color: #374151; /* text-gray-700 */
}
.dark .ui-table-thead {
    background-color: #1f2937; /* bg-gray-800 */
    color: #94a3b8; /* text-textSecondary-dark */
}
.ui-table-th {
    padding: 0.75rem 1rem; /* px-4 py-3 */
    font-weight: 600;
}
.ui-table-td {
    padding: 0.75rem 1rem; /* px-4 py-3 */
    border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
}
.dark .ui-table-td {
    border-color: #374151; /* border-gray-700 */
}
.ui-table-row:hover {
    background-color: #f9fafb; /* bg-gray-50 */
}
.dark .ui-table-row:hover {
    background-color: rgba(31, 41, 55, 0.5); /* dark:hover:bg-gray-800/50 */
}