/* shift_common.css - シフト状態共通スタイル */

.shift-bar {
    position: absolute;
    background-color: dodgerblue;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 4px;
    font-size: 0.75em;
    z-index: 10;
    overflow: visible;
    box-sizing: border-box;
    padding: 2px;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.shift-bar.withdrawn {
    background-color: #778899; /* LightSlateGray */
    color: white;
}

.shift-bar.rejected {
    background-color: #DC143C; /* Crimson */
    color: white;
    /* border: 2px solid #F44336; top_staff.htmlでは青背景に赤枠だったが、背景色変更で統一 */
}

.shift-bar.not-approved {
    background-color: lightgray;
    color: #333; /* 文字色を濃いグレーに */
}

.shift-bar.approved { /* 通常の承認済み (青) */
    background-color: dodgerblue;
    color: white;
}

.shift-bar.manually-approved {
    background-color: #4CAF50; /* 例: 緑色。staff/mypage/top_admin.html の .add-shift-btn の色を参考 */
}

/* 承認済み（〇印）の場合は、背景は青で良いが、テキストやボタンの配置で区別 */
.shift-bar.approved-with-circle {
    background-color: dodgerblue; /* 通常の承認済みと同じ青 */
    /* 必要に応じて枠線やアイコンで区別 */
}

.shift-bar .shift-time-text {
    font-size: 12px;
    text-align: center;
    margin-bottom: 5px;
    z-index: 16;
    position: relative;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-all;
}

.shift-bar .pending-status-text,
.shift-bar .approved-status-text {
    font-size: 11px;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 3px;
    z-index: 16;
    position: relative;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-all;
    color: #333;
}

.shift-bar.not-approved .pending-status-text {
    color: #555;
}

.shift-bar .approved-status-text {
    color: green;
}

.shift-bar .withdrawn-reason-text,
.shift-bar .rejection-reason-text {
    font-size: 10px;
    margin-top: 3px;
    font-style: italic;
    text-align: center;
    padding: 0 2px;
    white-space: normal;
    line-height: 1.2;
}

.change-shift-btn {
    background-color: #FF9800;
    border: none;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    z-index: 20;
    width: auto;
    min-width: 60px;
    margin: 5px 0;
}

.delete-shift-btn {
    background-color: #F44336;
    border: none;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    z-index: 20;
    width: auto;
    min-width: 60px;
    margin: 5px 0;
}

.shift-bar.short-shift .change-shift-btn,
.shift-bar.short-shift .delete-shift-btn {
    display: none !important;
}

/* 「削除済み」マーカー用のスタイル */
.shift-bar.deleted-pending {
  background-color: #F44336 !important; /* 強めの赤背景 */
  border: 2px solid #D32F2F !important; /* 少し濃い赤のボーダー */
  color: white; /* 文字色は白 */
}

/* 理由表示テキストの共通スタイル */
.reason-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 2px;
    box-sizing: border-box;
    text-align: center;
}

.reason-time-text {
    font-size: 0.85em;
    white-space: normal;
    word-break: break-all;
}

.reason-text-content {
    font-size: 0.75em;
    font-style: italic;
    margin-top: 2px;
    word-break: break-all;
    line-height: 1.2;
}

.reason-label {
    font-weight: normal;
    margin-right: 3px;
}

.reason-value {}

/* シフトバー内のテキストの色調整 */
.shift-bar.withdrawn .reason-time-text,
.shift-bar.withdrawn .reason-text-content,
.shift-bar.withdrawn .shift-time-text {
    color: white;
}

.shift-bar.rejected .reason-time-text,
.shift-bar.rejected .reason-text-content,
.shift-bar.rejected .shift-time-text {
    color: white;
}

.shift-bar.not-approved .shift-time-text,
.shift-bar.not-approved .pending-status-text {
    color: #333;
}

.shift-bar.approved .shift-time-text,
.shift-bar.approved-with-circle .shift-time-text {
    color: white;
} 

/* ★★★ 短いシフトのときは、バーの内側のボタンを非表示にする ★★★ */
.shift-bar.short-shift .shift-bar-buttons {
    display: none !important;
}

/* ★★★ シフトバー内ボタンのコンテナスタイル ★★★ */
.shift-bar-buttons {
    display: flex;
    flex-direction: column; /* ★★★ ボタンを縦に並べる ★★★ */
    align-items: center;
    justify-content: center;
    margin-top: 5px; /* 上のテキストとの間隔 */
    gap: 4px; /* ボタン間の間隔 */
    width: 100%;
}

.withdrawn-reason-text {
    font-size: 10px;
    margin-top: 3px;
    font-style: italic;
    text-align: center;
    padding: 0 2px;
    white-space: normal;
    line-height: 1.2;
}

/* フローティングアクションボタン (FAB) の共通スタイル */
.fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    /* background-color: #007bff; */ /* 各ページで色を指定するため削除 */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
    border: none;
    cursor: pointer;
    z-index: 1000;
    transition: background-color 0.3s;
}

/* ★★★ ここから吹き出し用のスタイルを追加 ★★★ */
.shift-action-tooltip {
    display: none; /* ★★★ 初期状態では非表示にする ★★★ */
    position: absolute !important;
    background-color: white !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    z-index: 100 !important;
    width: 100px !important; /* 幅を固定 */
    flex-direction: column !important; /* ボタンを縦に並べる */
    gap: 5px !important; /* ボタン間の隙間 */
}

.shift-action-tooltip.visible {
    display: flex !important; /* ★★★ 表示するときはこのクラスを付ける ★★★ */
}

.shift-action-tooltip button {
    display: block !important;
    width: 100% !important;
    padding: 5px !important;
    margin-bottom: 0 !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    border: none !important;
    color: white !important;
    cursor: pointer !important;
}

.shift-action-tooltip button:last-child {
    margin-bottom: 0;
}

.tooltip-change-btn {
    background-color: #FF9800;
}

.tooltip-change-btn:hover {
    background-color: #F57C00;
}

.tooltip-delete-btn {
    background-color: #F44336;
}

.tooltip-delete-btn:hover {
    background-color: #D32F2F;
}
/* ★★★ ここまで吹き出し用のスタイルを追加 ★★★ */

.fab:hover {
    /* ... (rest of the properties) */
}