/* =================================================================
 * Page Specific Styles for Emperor Timer (style.css)
 * ================================================================= */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1090;
    backdrop-filter: blur(3px);
}

.tool-container {
    min-height: 500px;
    transition: background-color 0.8s ease, color 0.3s ease;
}

/* --- リラックスモード（休憩時）の設定 --- */

.tool-container.mode-relax,
.tool-container.mode-relax:fullscreen {
    background-color: #1a4d38 !important;
    color: #e9ecef;
}

[data-bs-theme="light"] .tool-container.mode-relax,
[data-bs-theme="light"] .tool-container.mode-relax:fullscreen {
    background-color: #e8f5e9 !important;
    color: #1b5e20 !important;
}

[data-bs-theme="light"] .tool-container.mode-relax .text-muted,
[data-bs-theme="light"] .tool-container.mode-relax .small.text-muted {
    color: #4caf50 !important;
}

/* --- ライトモード全体の微調整 --- */
[data-bs-theme="light"] .tool-container {
    background-color: #ffffff !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
}


/* =================================================================
 * UX Improvements: フォーム視認性向上 (サイト全体統一)
 * ================================================================= */

.form-control, .form-select {
    background-color: #ffffff;
    border: 1px solid #adb5bd;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    color: var(--bs-body-color);
    transition: all 0.2s ease-in-out;
}

.form-control:hover, .form-select:hover {
    border-color: #6c757d;
}

.form-control:focus, .form-select:focus {
    background-color: #ffffff;
    border-color: #0d6efd;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05), 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid #6c757d;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #f8f9fa;
}

[data-bs-theme="dark"] .form-control:hover,
[data-bs-theme="dark"] .form-select:hover {
    border-color: #adb5bd;
    background-color: rgba(255, 255, 255, 0.09);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: rgba(255, 255, 255, 0.09);
    border-color: #86b7fe;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.input-group-text {
    background-color: #f1f3f5;
    border: 1px solid #adb5bd;
    color: #495057;
    transition: all 0.2s ease-in-out;
}

[data-bs-theme="dark"] .input-group-text {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid #6c757d;
    color: #ced4da;
}


/* =================================================================
 * タイマー表示エリア・各種コントロール
 * ================================================================= */

.timer-display-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    height: 300px;
}

.timer-input-display {
    font-family: 'DSEG7 Classic', 'Roboto', monospace;
    font-weight: 400;
    font-size: 9rem;
    color: var(--bs-body-color);
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
    text-align: center;
    width: 100%;
    max-width: 800px;
    padding: 0;
    letter-spacing: 5px;
}

.timer-input-display:disabled {
    color: var(--bs-primary);
}

.timer-controls-row {
    max-width: 900px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.timer-slider-wrapper .d-flex {
    gap: 1rem !important;
}

.timer-slider-wrapper .form-range {
    flex-grow: 1;
}

.timer-slider-wrapper .form-control {
    flex-shrink: 0;
}

#timer-presets-default {
    padding-top: 0;
    height: 100%;
}

.timer-preset-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.stopwatch-display-wrapper {
    padding: 20px 0;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: none;
    border: none;
}

.stopwatch-display {
    font-family: 'DSEG7 Classic', 'Roboto', monospace;
    font-weight: 400;
    font-size: 7rem;
    color: var(--bs-body-color);
    text-align: center;
    letter-spacing: 5px;
}

.stopwatch-millis {
    font-size: 0.7em;
    color: var(--bs-secondary-color);
}

.lap-list-wrapper {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.lap-list-wrapper table {
    font-weight: 400;
}

.lap-list-wrapper thead.sticky-top {
    top: 0;
}

.digital-date-display {
    color: var(--bs-secondary-color);
    font-weight: 300;
    letter-spacing: 1px;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
}

/* =================================================================
 * ★ アナログ時計 (デザイン完全リニューアル)
 * ================================================================= */

.analog-clock-wrapper {
    padding: 20px 0;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* --- モダン時計（デフォルト: スマートでフラット） --- */
.analog-clock {
    width: 375px;
    height: 375px;
    border: 2px solid var(--bs-border-color); /* モダンは細く控えめな枠線 */
    border-radius: 50%;
    position: relative;
    background-color: var(--bs-body-bg); /* 背景に馴染ませる */
    box-shadow: var(--bs-box-shadow-sm);
    transition: all 0.3s ease;
}

.hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: background-color 0.3s ease;
}

.hour-hand {
    width: 6px;
    height: 110px;
    background-color: var(--bs-body-color);
    margin-left: -3px;
    z-index: 10;
}

.minute-hand {
    width: 4px;
    height: 140px;
    background-color: var(--bs-body-color);
    margin-left: -2px;
    z-index: 11;
}

.second-hand {
    width: 2px;
    height: 160px;
    background-color: var(--bs-danger);
    margin-left: -1px;
    z-index: 12;
}

.center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background-color: var(--bs-danger);
    border: 2px solid var(--bs-body-bg);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 13;
}

.marker {
    position: absolute;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--bs-secondary-color); /* モダンは少し薄めの色 */
}

.marker-12 { top: 15px; left: 50%; transform: translateX(-50%); }
.marker-6 { bottom: 15px; left: 50%; transform: translateX(-50%); }
.marker-3 { top: 50%; right: 20px; transform: translateY(-50%); }
.marker-9 { top: 50%; left: 20px; transform: translateY(-50%); }


/* --- クラシック時計 (重厚・立体感・セリフ体) --- */
.analog-clock.clock-classic {
    background-color: #fcfbf7 !important; /* 常にアイボリーホワイトの文字盤 */
    border: 12px solid #2c2c2c !important; /* 太くて重厚感のある黒枠 */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.15), 0 15px 30px rgba(0, 0, 0, 0.2) !important; /* 立体的な影 */
}

.analog-clock.clock-classic .marker {
    font-family: 'Times New Roman', Times, serif !important; /* クラシックなセリフ体 */
    font-weight: bold !important;
    font-size: 2.2rem !important;
    color: #1a1a1a !important; /* 濃い黒 */
}

/* クラシックモードは針も太く重厚にする */
.analog-clock.clock-classic .hour-hand {
    width: 8px !important;
    height: 100px !important;
    margin-left: -4px !important;
    background-color: #1a1a1a !important;
    border-radius: 4px !important; /* 針の形を少し変える */
}

.analog-clock.clock-classic .minute-hand {
    width: 6px !important;
    height: 130px !important;
    margin-left: -3px !important;
    background-color: #1a1a1a !important;
    border-radius: 3px !important;
}

.analog-clock.clock-classic .second-hand {
    background-color: #b30000 !important; /* 少し暗いクラシックレッド */
}

.analog-clock.clock-classic .center-dot {
    width: 16px !important;
    height: 16px !important;
    background-color: #d4af37 !important; /* 真鍮・ゴールド風 */
    border: 3px solid #1a1a1a !important;
}


/* =================================================================
 * レスポンシブ調整
 * ================================================================= */

@media (max-width: 767px) {
    .timer-input-display { font-size: 6rem; max-width: 100%; letter-spacing: 3px; }
    .stopwatch-display { font-size: 5rem; letter-spacing: 3px; }
    .timer-display-wrapper { height: 250px; }
    .analog-clock-wrapper, .stopwatch-display-wrapper { height: 250px; }
    .analog-clock { width: 300px; height: 300px; }
    .timer-controls-row>div { max-width: 100%; flex-basis: 100%; }
    .timer-controls-row .col-md-6:nth-child(1) { order: -2; }
    .timer-controls-row .col-md-6:nth-child(2) { order: -1; }
    #timer-presets-default { padding-top: 1rem; justify-content: center !important; }
}

@media (max-width: 576px) {
    .timer-input-display { font-size: 4rem; letter-spacing: 2px; }
    .stopwatch-display { font-size: 3rem; letter-spacing: 2px; }
    #timer-panel .btn-lg, #stopwatch-panel .btn-lg, #pomo-panel .btn-lg { display: block; width: 100% !important; margin: 0.5rem 0 !important; }
    #timer-alarm-stop-btn { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* =================================================================
 * フルスクリーン時の設定
 * ================================================================= */

.tool-container:fullscreen {
    background-color: var(--bs-card-bg) !important;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.tool-container:fullscreen .card-body {
    flex-grow: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tool-container:fullscreen .tab-content {
    flex-grow: 1;
    height: 100%;
}

.tool-container:fullscreen .card-header,
.tool-container:fullscreen .card-footer {
    display: none;
}

.tool-container:fullscreen .tab-pane:not(.active) {
    display: none !important;
}

.tool-container:fullscreen .tab-pane.active {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.tool-container:fullscreen .tab-pane.active:not(#section-panel):not(#pomo-panel)>*:not(.timer-display-wrapper):not(.stopwatch-display-wrapper):not(.analog-clock-wrapper):not(.d-flex):not(.progress):not(.digital-date-display) {
    display: none !important;
}

.tool-container:fullscreen .progress {
    display: block !important;
    flex-grow: 0;
    flex-shrink: 0;
    width: 90%;
    max-width: 1000px;
    margin: 2vmin auto !important;
    padding: 0;
    height: 2vmin !important;
}

.tool-container:fullscreen #timer-progress-bar {
    height: 100%;
}

.tool-container:fullscreen .timer-display-wrapper,
.tool-container:fullscreen .stopwatch-display-wrapper,
.tool-container:fullscreen .analog-clock-wrapper {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.tool-container:fullscreen .tab-pane.active>.d-flex {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    padding: 2rem 0 1rem 0;
}

.tool-container:fullscreen #stopwatch-panel .d-flex:not(.my-3) { display: none !important; }

.tool-container:fullscreen #clock-panel .digital-date-display {
    display: flex !important;
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    padding: 0.5rem 0 0.5rem 0;
    justify-content: center;
    text-align: center;
}

.tool-container:fullscreen .btn-lg { min-height: 50px; font-size: 1.25rem; padding: 0.5rem 1rem; height: auto !important; min-width: 120px; }
.tool-container:fullscreen #timer-alarm-stop-btn { min-height: 50px; width: auto !important; font-size: 1.25rem; padding: 0.5rem 1rem; }
.tool-container:fullscreen .timer-input-display { font-size: 24vmin; max-width: 95%; letter-spacing: 5px; }
.tool-container:fullscreen .stopwatch-display { font-size: 20vmin; letter-spacing: 5px; }
.tool-container:fullscreen .stopwatch-millis { font-size: 0.7em; }
.tool-container:fullscreen .digital-date-display { font-size: 4vmin; }

/* フルスクリーン時計のレスポンシブ化 */
.tool-container:fullscreen .analog-clock { width: 55vmin; height: 55vmin; border-width: 1vmin; }
.tool-container:fullscreen .analog-clock.clock-classic { border-width: 3vmin !important; } /* クラシックは太枠維持 */

.tool-container:fullscreen .hand { border-top-left-radius: 2vmin; border-top-right-radius: 2vmin; }
.tool-container:fullscreen .hour-hand { width: 1.5vmin; height: 30%; margin-left: -0.75vmin; }
.tool-container:fullscreen .minute-hand { width: 1vmin; height: 40%; margin-left: -0.5vmin; }
.tool-container:fullscreen .second-hand { width: 0.5vmin; height: 45%; margin-left: -0.25vmin; }
.tool-container:fullscreen .center-dot { width: 3vmin; height: 3vmin; border-width: 0.5vmin; }
.tool-container:fullscreen .marker { font-size: 6vmin; }
.tool-container:fullscreen .marker-12 { top: 1vmin; }
.tool-container:fullscreen .marker-6 { bottom: 1vmin; }
.tool-container:fullscreen .marker-3 { right: 2.5vmin; }
.tool-container:fullscreen .marker-9 { left: 2.5vmin; }

/* クラシックフルスクリーン時の特別な上書き */
.tool-container:fullscreen .analog-clock.clock-classic .hour-hand { width: 2vmin !important; margin-left: -1vmin !important; }
.tool-container:fullscreen .analog-clock.clock-classic .minute-hand { width: 1.5vmin !important; margin-left: -0.75vmin !important; }
.tool-container:fullscreen .analog-clock.clock-classic .center-dot { width: 4vmin !important; height: 4vmin !important; }

/* --- Section Timer & Pomodoro Styles --- */

#section-panel .timer-input-display,
#pomo-panel .timer-input-display {
    font-family: 'DSEG7 Classic', 'Roboto', monospace;
    font-weight: 400;
    font-size: 8rem;
    color: var(--bs-body-color);
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
    text-align: center;
    width: 100%;
    padding: 0;
    letter-spacing: 5px;
}

#section-panel .timer-input-display.text-danger,
#pomo-panel .timer-input-display.text-danger { color: var(--bs-danger) !important; }
#section-current-title.text-danger,
#pomo-current-title.text-danger { color: var(--bs-danger) !important; }
#section-list-body tr.table-active,
#pomo-list-body tr.table-active { background-color: var(--bs-primary-bg-subtle); font-weight: bold; }

/* 進行・ポモドーロタイマーのフルスクリーン調整 */
.tool-container:fullscreen #section-panel.active>.text-center.mb-2,
.tool-container:fullscreen #pomo-panel.active>.text-center.mb-2 { display: block !important; font-size: 2rem; padding-top: 1rem; flex-grow: 0; flex-shrink: 0; }
.tool-container:fullscreen #section-panel.active,
.tool-container:fullscreen #pomo-panel.active { display: flex !important; flex-direction: column; overflow: hidden !important; }
.tool-container:fullscreen #section-panel.active>.timer-display-wrapper,
.tool-container:fullscreen #pomo-panel.active>.timer-display-wrapper,
.tool-container:fullscreen #section-panel.active>.progress,
.tool-container:fullscreen #pomo-panel.active>.progress,
.tool-container:fullscreen #section-panel.active>.row:not(.section-list-row),
.tool-container:fullscreen #pomo-panel.active>.row:not(.section-list-row),
.tool-container:fullscreen #section-panel.active>.d-flex,
.tool-container:fullscreen #pomo-panel.active>.d-flex { flex-shrink: 0; }
.tool-container:fullscreen #section-panel.active .card.bg-light,
.tool-container:fullscreen #pomo-panel.active .card.bg-light,
.tool-container:fullscreen #section-panel.active hr.my-4,
.tool-container:fullscreen #pomo-panel.active hr.my-4 { display: none !important; }
.tool-container:fullscreen .section-list-row { display: flex !important; flex-grow: 1; min-height: 0; margin-bottom: 0 !important; padding-bottom: 1rem; overflow: hidden; }
.tool-container:fullscreen .section-list-row>.col-lg-8 { width: 90% !important; max-width: 1200px !important; margin: 0 auto; height: 100%; display: flex; flex-direction: column; }
.tool-container:fullscreen .section-table-wrapper { overflow-y: auto !important; flex-grow: 1; margin-bottom: 0.5rem; border: 1px solid var(--bs-border-color); }
.tool-container:fullscreen #section-display,
.tool-container:fullscreen #pomo-display { font-size: 15vmin; }

.section-table-wrapper { background-color: var(--bs-body-bg); }
.section-table-wrapper thead th { background-color: var(--bs-body-bg); color: var(--bs-body-color); box-shadow: 0 1px 0 var(--bs-border-color); border-bottom: none; }
.tool-container.mode-relax .section-table-wrapper,
.tool-container.mode-relax .section-table-wrapper thead th { background-color: var(--bs-body-bg); }