/*
 * ============================================================
 * Link Biz - 管理者ページスタイル
 * ============================================================
 */

/* -------------------------------------------------------
   ページ共通
   ------------------------------------------------------- */
.admin-page {
    max-width: 64rem;
}

.admin-page .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

/* -------------------------------------------------------
   ユーザーテーブル
   ------------------------------------------------------- */
.user-table-wrap {
    background: var(--bg-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.user-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.user-table thead {
    background: var(--bg-muted);
    border-bottom: 1px solid var(--border-color);
}

.user-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 700;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.user-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

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

.user-table tbody tr:hover {
    background: var(--bg-muted);
}

/* ユーザー名セル */
.user-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar-sm {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--border-radius-full);
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.user-cell-name {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.user-cell-kana {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* アクションボタングループ */
.user-table-actions {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

/* ステータストグル */
.user-status-toggle {
    cursor: pointer;
    transition: opacity var(--transition);
}

.user-status-toggle:hover {
    opacity: 0.8;
}

/* -------------------------------------------------------
   モバイル用カードレイアウト（テーブルの代替）
   ------------------------------------------------------- */
@media (max-width: 768px) {
    .user-table thead { display: none; }

    .user-table,
    .user-table tbody,
    .user-table tr,
    .user-table td {
        display: block;
        width: 100%;
    }

    .user-table tr {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-color);
    }

    .user-table td {
        padding: 0.25rem 0;
        border: none;
    }

    .user-table td::before {
        content: attr(data-label);
        font-size: var(--font-size-xs);
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: .04em;
        display: block;
        margin-bottom: 0.15rem;
    }

    .user-table td:first-child::before { content: none; }
}

/* -------------------------------------------------------
   ユーザーフォーム（作成・編集モーダル内）
   ------------------------------------------------------- */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------
   統計カード（将来の拡張用）
   ------------------------------------------------------- */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--bg-surface);
    border-radius: var(--border-radius-lg);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stat-card-icon.blue   { background: var(--color-primary-light); color: var(--color-primary); }
.stat-card-icon.green  { background: #ecfdf5; color: var(--color-success); }
.stat-card-icon.yellow { background: #fffbeb; color: var(--color-warning); }

.stat-card-value {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-card-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}


/* -------------------------------------------------------
   国民の祝日パネル（営業日設定）
   ------------------------------------------------------- */
.pub-holiday-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(16rem, 1fr));
    gap                   : .4rem;
}

.pub-holiday-item {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : .5rem;
    padding         : .45rem .75rem;
    border          : 1px solid var(--border-color);
    border-radius   : var(--border-radius);
    background      : var(--bg-surface);
    transition      : background var(--transition);
}

.pub-holiday-item:hover { background: var(--bg-muted); }

.pub-holiday-registered {
    background   : var(--bg-muted);
    border-color : #d1fae5;
}

.pub-holiday-info {
    display     : flex;
    align-items : center;
    gap         : .5rem;
    min-width   : 0;
}

.pub-holiday-date {
    font-size   : var(--font-size-xs);
    font-weight : 700;
    color       : var(--color-danger);
    white-space : nowrap;
    flex-shrink : 0;
}

.pub-holiday-name {
    font-size     : var(--font-size-sm);
    color         : var(--text-primary);
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

/* -------------------------------------------------------
   営業日設定 カレンダー (hcal)
   ------------------------------------------------------- */
.hcal-card  { padding: 1rem 1rem .5rem; }

/* 2ヶ月横並びレイアウト */
.hcal-two-months {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 1rem;
    margin-bottom         : 1rem;
}

/* 月タイトル（2ヶ月表示時の各月） */
.hcal-month-title {
    font-size     : var(--font-size-base);
    font-weight   : 700;
    color         : var(--text-primary);
    text-align    : center;
    margin-bottom : .5rem;
    padding-bottom: .4rem;
    border-bottom : 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .hcal-two-months {
        grid-template-columns: 1fr;
    }
}

/* ナビ */
.hcal-nav {
    display     : flex;
    align-items : center;
    gap         : .5rem;
    flex-wrap   : wrap;
    margin-bottom: .75rem;
}

/* month ピッカー */
.hcal-month-input {
    width       : auto;
    min-width   : 9.5rem;
    max-width   : 12rem;
    font-weight : 700;
    text-align  : center;
    cursor      : pointer;
    padding     : .4rem .65rem;
    font-size   : var(--font-size-sm);
    /* ブラウザ標準のカレンダーアイコンを活かす */
    background  : var(--bg-surface);
}
.hcal-month-input::-webkit-calendar-picker-indicator {
    cursor  : pointer;
    opacity : .7;
}
.hcal-month-input:focus {
    border-color : var(--color-primary);
    box-shadow   : 0 0 0 3px rgba(79,70,229,.12);
}

/* 曜日ヘッダー */
.hcal-weekdays {
    display               : grid;
    grid-template-columns : repeat(7, 1fr);
    background            : var(--bg-muted);
    border                : 1px solid var(--border-color);
    border-bottom         : none;
    border-radius         : var(--border-radius) var(--border-radius) 0 0;
}
.hcal-weekday {
    padding         : .4rem;
    text-align      : center;
    font-size       : var(--font-size-xs);
    font-weight     : 700;
    text-transform  : uppercase;
    letter-spacing  : .05em;
    color           : var(--text-secondary);
}
.hcal-weekday.sun { color: #ef4444; }
.hcal-weekday.sat { color: var(--color-primary); }

/* 日付グリッド */
.hcal-days {
    display               : grid;
    grid-template-columns : repeat(7, 1fr);
    border                : 1px solid var(--border-color);
    border-radius         : 0 0 var(--border-radius) var(--border-radius);
    overflow              : hidden;
}

/* 各日付セル */
.hcal-cell {
    min-height  : 5rem;
    border-right: 1px solid var(--border-color);
    border-bottom:1px solid var(--border-color);
    padding     : .35rem .4rem;
    cursor      : pointer;
    transition  : background var(--transition);
    position    : relative;
}
.hcal-cell:nth-child(7n)     { border-right: none; }
.hcal-cell:hover             { background: var(--color-primary-light); }
.hcal-cell.hcal-selected     { background: var(--color-primary-light);
                                box-shadow: inset 0 0 0 2px var(--color-primary); }

/* 休業・土日・祝日の背景 */
.hcal-cell.hcal-off          { background: #fff5f5; }
.hcal-cell.hcal-off:hover,
.hcal-cell.hcal-off.hcal-selected { background: #fee2e2; }
.hcal-cell.hcal-sat          { background: var(--color-primary-light); }
.hcal-cell.hcal-sat:hover,
.hcal-cell.hcal-sat.hcal-selected { background: #dbeafe; }
.hcal-cell.hcal-half         { background: #fffbeb; }

/* 他月 */
.hcal-cell.other-month { opacity: .45; pointer-events: none; }

/* セル上部（日付数字 + マーカー） */
.hcal-cell-top {
    display     : flex;
    align-items : center;
    justify-content: space-between;
    margin-bottom: .2rem;
}

/* 日付数字 */
.hcal-num {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 1.65rem;
    height          : 1.65rem;
    font-size       : var(--font-size-sm);
    font-weight     : 700;
    border-radius   : 50%;
    line-height     : 1;
}

/* 今日 */
.hcal-num.hcal-num-today {
    background : var(--color-primary);
    color      : #fff;
}

/* 日曜・祝日・全日休業の文字色 */
.hcal-cell.hcal-off   .hcal-num { color: #ef4444; }
/* 土曜の文字色 */
.hcal-cell.hcal-sat   .hcal-num { color: var(--color-primary); }

/* 登録済みマーカー（dot） */
.hcal-marker {
    width         : .55rem;
    height        : .55rem;
    border-radius : 50%;
    background    : var(--color-danger);
    flex-shrink   : 0;
}
.hcal-marker.hcal-marker-half { background: var(--color-warning); }

/* 祝日・ルール名ラベル */
.hcal-label {
    font-size     : .67rem;
    font-weight   : 600;
    color         : #ef4444;
    line-height   : 1.3;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
    margin-top    : .1rem;
}
.hcal-cell.hcal-sat .hcal-label  { color: var(--color-primary); }
.hcal-cell:not(.hcal-off):not(.hcal-sat) .hcal-label { color: var(--text-secondary); }

/* -------------------------------------------------------
   選択日パネル
   ------------------------------------------------------- */
.hcal-day-panel { margin-top: 1rem; }

/* 国民の祝日バナー行 */
.hcal-pubhol-row {
    display     : flex;
    align-items : center;
    gap         : .5rem;
    padding     : .6rem .75rem;
    background  : #fff5f5;
    border-radius: var(--border-radius);
    font-size   : var(--font-size-sm);
    color       : #991b1b;
    margin-bottom: .5rem;
    border      : 1px solid #fecaca;
}

/* ルールレコード一覧 */
.hcal-records-list {
    display        : flex;
    flex-direction : column;
    gap            : .4rem;
}
.hcal-record-item {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : .75rem;
    padding         : .6rem .75rem;
    border          : 1px solid var(--border-color);
    border-radius   : var(--border-radius);
    background      : var(--bg-surface);
}
.hcal-record-info {
    display     : flex;
    align-items : center;
    gap         : .5rem;
    flex-wrap   : wrap;
    flex        : 1;
    min-width   : 0;
}
.hcal-record-name {
    font-size   : var(--font-size-sm);
    font-weight : 600;
    color       : var(--text-primary);
}
.hcal-record-note {
    font-size : var(--font-size-xs);
    color     : var(--text-muted);
}

/* レスポンシブ */
@media (max-width: 640px) {
    .hcal-cell  { min-height: 3.5rem; }
    .hcal-label { display: none; }
}