/* ==========================================================
   タイムポチ
   共通CSS

   対象ページ
   ・スタッフ打刻画面 index.php
   ・スタッフログイン login_emp.php
   ・管理者ログイン login.php

   ※ 管理画面側で既に使用している汎用クラスも
      できるだけ崩さない構成にしています。
   ========================================================== */


/* ==========================================================
   1. リセット・基本設定
   ========================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    padding: 24px 16px;

    background: #f4f7fa;
    color: #263238;

    font-family:
        "Noto Sans JP",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;

    line-height: 1.6;
}


/* ==========================================================
   2. メインコンテナ
   ========================================================== */

.container,
.login-container {
    width: 100%;
    max-width: 620px;

    margin: 30px auto;
    padding: 28px 32px;

    background: #ffffff;

    border: 1px solid #e1e8ed;
    border-radius: 10px;

    box-shadow:
        0 4px 18px
        rgba(38, 50, 56, 0.07);
}

/* ログイン画面は打刻画面よりコンパクトにする */
.login-container {
    max-width: 420px;
    margin-top: 72px;
}



/* ==========================================================
   3. ログイン画面 ブランド表示
   ========================================================== */

.login-brand {
    margin-bottom: 26px;
    text-align: center;
}

.login-brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;
    margin: 0 auto 10px;

    background: #0288d1;
    color: #ffffff;

    border-radius: 12px;

    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.login-brand-name {
    display: block;

    color: #263238;

    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.login-brand-subtitle {
    display: block;

    margin-top: 2px;

    color: #78909c;

    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.login-container .login-title {
    margin-bottom: 24px;

    color: #546e7a;

    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
}

/* ==========================================================
   3. 見出し
   ========================================================== */

h1,
.login-title {
    margin-bottom: 24px;

    color: #263238;

    font-size: 1.45rem;
    font-weight: 700;

    text-align: center;
}

h2 {
    margin-top: 34px;
    margin-bottom: 14px;
    padding-bottom: 9px;

    color: #37474f;

    border-bottom: 1px solid #e3e9ed;

    font-size: 1rem;
    font-weight: 700;
}


/* ==========================================================
   4. スタッフ画面 ヘッダー
   ========================================================== */

.staff-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 22px;
}

.staff-header .staff-info {
    flex: 1;

    margin-bottom: 0;

    text-align: left;
}


/* ==========================================================
   5. スタッフ情報
   ========================================================== */

.staff-info {
    margin-bottom: 18px;
    padding: 12px 16px;

    background: #f7fafc;

    border: 1px solid #e3ebef;
    border-radius: 7px;

    text-align: center;
}

.staff-info-label {
    display: block;

    margin-bottom: 2px;

    color: #90a4ae;

    font-size: 0.7rem;
}

.staff-info-name {
    color: #37474f;

    font-size: 1rem;
    font-weight: 700;
}


/* ==========================================================
   6. ログアウト
   ========================================================== */

.logout-link {
    flex-shrink: 0;

    padding: 8px 12px;

    color: #607d8b;

    border: 1px solid #cfd8dc;
    border-radius: 6px;

    font-size: 0.78rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        background-color 0.2s,
        color 0.2s;
}

.logout-link:hover {
    background: #f4f7fa;
    color: #37474f;
}


/* ==========================================================
   7. 現在時刻
   ========================================================== */

.time-display {
    margin-bottom: 18px;
    padding: 18px 12px;

    background: #f7fafc;

    border: 1px solid #e3ebef;
    border-radius: 8px;

    color: #01579b;

    font-size: 3.2rem;
    font-weight: 500;

    letter-spacing: 2px;
    line-height: 1.2;

    text-align: center;
}


/* ==========================================================
   8. 本日の勤務状況
   ========================================================== */

.today-status {
    margin-bottom: 22px;
    padding: 18px;

    background: #f7fafc;

    border: 1px solid #e3ebef;
    border-radius: 8px;
}

.today-status-title {
    margin: 0 0 16px;
    padding: 0;

    border: none;

    color: #37474f;

    font-size: 0.95rem;

    text-align: center;
}

.today-status-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.today-status-item {
    min-width: 0;
    padding: 12px 8px;

    background: #ffffff;

    border: 1px solid #e6ecef;
    border-radius: 7px;

    text-align: center;
}

.today-status-label {
    display: block;

    margin-bottom: 6px;

    color: #90a4ae;

    font-size: 0.7rem;
    font-weight: 700;
}

.today-status-value {
    color: #37474f;

    font-size: 1rem;
    font-weight: 700;
}


/* ==========================================================
   9. 勤務状態バッジ
   ========================================================== */

.work-status {
    display: flex;
    justify-content: center;

    margin-bottom: 0;
}

.work-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 95px;

    padding: 6px 14px;

    background: #e3f2fd;
    color: #1565c0;

    border-radius: 20px;

    font-size: 0.78rem;
    font-weight: 700;
}


/* ==========================================================
   10. 出勤・退勤ボタン
   ========================================================== */

.buttons {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 24px;
    margin-bottom: 0;
}

.buttons button {
    width: 100%;
    min-height: 58px;

    padding: 12px 16px;

    border: none;
    border-radius: 8px;

    color: #ffffff;

    font-size: 1.05rem;
    font-weight: 700;

    letter-spacing: 0.05em;

    cursor: pointer;

    transition:
        background-color 0.2s,
        transform 0.2s,
        opacity 0.2s;
}

.buttons button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.buttons button:active:not(:disabled) {
    transform: translateY(0);
}

/* 出勤 */
#clock-in {
    background: #0288d1;
}

#clock-in:hover:not(:disabled) {
    background: #0277bd;
}

/* 退勤 */
#clock-out {
    background: #f57c00;
}

#clock-out:hover:not(:disabled) {
    background: #ef6c00;
}

/* 無効状態 */
.buttons button:disabled {
    background: #cfd8dc;
    color: #78909c;

    cursor: not-allowed;

    opacity: 0.75;
}


/* ==========================================================
   11. メッセージ
   ========================================================== */

.error-message,
.message-error,
.message-success {
    margin-bottom: 18px;
    padding: 10px 12px;

    border-radius: 6px;

    font-size: 0.8rem;
    font-weight: 700;
}

.error-message,
.message-error {
    background: #ffebee;
    color: #c62828;

    border: 1px solid #ffcdd2;
    border-left: 4px solid #e53935;
}

.message-success {
    background: #e8f5e9;
    color: #2e7d32;

    border: 1px solid #c8e6c9;

    text-align: center;
}


/* ==========================================================
   12. ログインフォーム
   ========================================================== */

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;

    margin-bottom: 6px;

    color: #546e7a;

    font-size: 0.78rem;
    font-weight: 700;
}

.form-control {
    width: 100%;
    min-height: 44px;

    padding: 9px 12px;

    background: #ffffff;
    color: #37474f;

    border: 1px solid #cfd8dc;
    border-radius: 6px;

    font: inherit;
    font-size: 0.9rem;

    outline: none;

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.form-control:focus {
    border-color: #0288d1;

    box-shadow:
        0 0 0 3px
        rgba(2, 136, 209, 0.12);
}


/* ==========================================================
   13. ログインボタン
   ========================================================== */

.login-btn,
.admin-btn {
    width: 100%;
    min-height: 46px;

    margin-top: 6px;
    padding: 10px 16px;

    background: #0288d1;
    color: #ffffff;

    border: none;
    border-radius: 6px;

    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.2s,
        transform 0.2s;
}

.login-btn:hover,
.admin-btn:hover {
    background: #0277bd;
}

.login-btn:active,
.admin-btn:active {
    transform: translateY(1px);
}


/* ==========================================================
   14. 管理者ログインで使用中のフォームクラス
   ========================================================== */

/*
 * 管理者login.phpでは manual-form が使われています。
 * 管理画面側の同名クラスに大きな影響を与えないよう、
 * ログイン用コンテナ内だけに限定します。
 */
.login-container .manual-form,
.login-page .manual-form {
    padding: 0;

    background: transparent;

    border: none;
}


/* ==========================================================
   15. 旧・勤怠履歴テーブル
   ========================================================== */

/*
 * 現在のスタッフindex.phpでは使用しません。
 * 他ページで参照している場合に崩れないよう残しています。
 */
#log-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 0.86rem;
}

#log-table th,
#log-table td {
    padding: 12px 13px;

    border-bottom: 1px solid #e6ecef;

    text-align: left;
}

#log-table th {
    background: #f7f9fa;
    color: #607d8b;

    font-size: 0.76rem;
    font-weight: 700;
}

#log-table td {
    color: #455a64;
}

#log-table tbody tr:nth-child(even) {
    background: #fafcfd;
}

#log-table tbody tr:hover {
    background: #f4f9fc;
}


/* ==========================================================
   16. スマホ
   ========================================================== */

@media (max-width: 600px) {

    body {
        padding: 10px;
    }

    .container,
    .login-container {
        margin: 8px auto;
        padding: 20px 16px;

        border-radius: 8px;
    }

    .login-container {
        margin-top: 32px;
    }

    .login-brand {
        margin-bottom: 22px;
    }

    .login-brand-mark {
        width: 44px;
        height: 44px;
        margin-bottom: 8px;

        border-radius: 10px;

        font-size: 1.15rem;
    }

    .login-brand-name {
        font-size: 1.2rem;
    }

    .login-brand-subtitle {
        font-size: 0.68rem;
    }

    h1,
    .login-title {
        margin-bottom: 20px;

        font-size: 1.2rem;
    }

    h2 {
        margin-top: 28px;

        font-size: 0.95rem;
    }

    .staff-header {
        align-items: stretch;
    }

    .staff-header .staff-info {
        padding: 10px 12px;
    }

    .logout-link {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .time-display {
        padding: 18px 8px;

        font-size: 2.8rem;
    }

    .today-status-grid {
        grid-template-columns: 1fr;
    }

    /* 打刻ボタンはスマホでは縦並び */
    .buttons {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .buttons button {
        min-height: 56px;

        font-size: 1rem;
    }

    #log-table th,
    #log-table td {
        padding: 10px 7px;

        font-size: 0.78rem;
    }

    #log-table th {
        font-size: 0.7rem;
    }
}


/* ==========================================================
   17. 小型スマホ
   ========================================================== */

@media (max-width: 400px) {

    .time-display {
        font-size: 2.45rem;
    }

    .container,
    .login-container {
        padding: 18px 13px;
    }
}

/* ==========================================================
   オフライン画面
   ========================================================== */

.offline-container {
    width: 100%;
    max-width: 520px;

    margin: 60px auto;

    padding: 36px 32px;

    background: #ffffff;

    border: 1px solid #e1e8ed;
    border-radius: 10px;

    box-shadow:
        0 4px 18px
        rgba(38, 50, 56, 0.07);

    text-align: center;
}


.offline-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin: 0 auto 18px;

    background: #fff3e0;
    color: #ef6c00;

    border-radius: 50%;

    font-size: 1.5rem;
    font-weight: 700;
}


.offline-title {
    margin-bottom: 16px;

    color: #263238;

    font-size: 1.25rem;
}


.offline-message {
    margin-bottom: 14px;

    color: #455a64;

    font-size: 0.95rem;
    line-height: 1.8;
}


.offline-guide {
    margin-bottom: 26px;

    color: #78909c;

    font-size: 0.82rem;
    line-height: 1.8;
}


.offline-retry-btn {
    width: 100%;
    min-height: 46px;

    padding: 10px 16px;

    background: #0288d1;
    color: #ffffff;

    border: none;
    border-radius: 6px;

    font-size: 0.9rem;
    font-weight: 700;

    cursor: pointer;
}


.offline-retry-btn:hover {
    background: #0277bd;
}


@media (max-width: 600px) {

    .offline-container {
        margin: 20px auto;

        padding: 28px 20px;
    }

    .offline-title {
        font-size: 1.1rem;
    }
}

/* ==========================================================
   公開デモログイン
   ========================================================== */

.demo-login-box {
    margin-bottom: 24px;
    padding: 16px;
    background: #f7f9fb;
    border: 1px solid #dfe6ec;
    border-radius: 8px;
    text-align: center;
}

.demo-login-title {
    margin-bottom: 6px;
    color: #263238;
    font-size: 0.9rem;
    font-weight: 700;
}

.demo-login-info {
    margin-bottom: 12px;
    color: #607d8b;
    font-size: 0.78rem;
    line-height: 1.7;
}

.demo-login-btn {
    width: 100%;
    min-height: 42px;
    padding: 9px 14px;
    background: #1e3a5f;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
}

.demo-login-btn:hover:not(:disabled) {
    background: #16304f;
}

.demo-login-btn:disabled {
    cursor: wait;
    opacity: 0.65;
}