@charset "utf-8";

:root {
  --fw-black: 900;
  --fw-bold: 700;
  --fw-normal: 400;
  --color-white: #fefefe;
  --color-black: #18233e;
  --color-accent: #2b6fa3;
  --color-danger: #d90000;
  --color-border: #b1b7c4;
  --color-bg-light: #eff1f5;
  --transition-fast: 0.3s;
  --transition-normal: 0.5s;
  --content-width: 1200px;
  --content-padding: 20px;
}

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  word-wrap: break-word;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--fw-normal);
  line-height: 1.5;
  color: var(--color-black);
  background: var(--color-white);
  opacity: 0;
  animation: pageLoadFadeIn 0.8s ease-out forwards;
  animation-delay: 0.1s;
}

@keyframes pageLoadFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

a {
  -webkit-tap-highlight-color: transparent;
  transition: all var(--transition-fast) ease;
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  opacity: 0.7;
}

.container {
  max-width: var(--content-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

/* ========================================
   ヘッダー
   ======================================== */
.header_main {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header_main .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header_logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-black);
}

.header_logo_icon {
  width: 36px;
  height: 36px;
  background: var(--color-black);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: 14px;
  letter-spacing: -0.05em;
  flex-shrink: 0;
}

.header_logo_text {
  font-size: 18px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

.header_user_info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header_user_name {
  font-size: 14px;
  color: var(--color-black);
}

.header_logout_btn {
  font-size: 14px;
  color: var(--color-black);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 6px 16px;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-fast) ease;
}

.header_logout_btn:hover {
  background: var(--color-black);
  color: var(--color-white);
}

/* ========================================
   ログインページ
   ======================================== */
.login_page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
}

.login_wrapper {
  width: 100%;
  max-width: 420px;
}

.login_header {
  text-align: center;
  margin-bottom: 48px;
}

.login_logo_icon {
  width: 64px;
  height: 64px;
  background: var(--color-black);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: var(--fw-black);
  font-size: 22px;
  letter-spacing: -0.05em;
  margin: 0 auto 20px;
}

.login_title {
  font-size: 28px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.login_subtitle {
  font-size: 14px;
  color: #7d8398;
}

.login_form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form_group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form_label {
  font-size: 14px;
  font-weight: var(--fw-bold);
}

.form_input {
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  color: var(--color-black);
  background: var(--color-white);
  transition: border-color var(--transition-fast) ease;
  outline: none;
}

.form_input:focus {
  border-color: var(--color-black);
}

.form_input::placeholder {
  color: #c3c6d0;
}

.form_options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.form_checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.form_checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-black);
  cursor: pointer;
}

.login_btn {
  width: 100%;
  height: 52px;
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: var(--fw-bold);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.login_btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.login_btn:active {
  transform: translateY(0);
}

.login_error {
  background: #fff0f0;
  border: 1px solid var(--color-danger);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--color-danger);
  display: none;
}

.login_error.show {
  display: block;
}

.login_footer {
  text-align: center;
  margin-top: 32px;
  font-size: 13px;
  color: #9da2b3;
}

/* ========================================
   トップページ
   ======================================== */
.top_section {
  padding: 48px 0;
}

.top_greeting {
  margin-bottom: 40px;
}

.top_greeting_date {
  font-size: 14px;
  color: #7d8398;
  margin-bottom: 4px;
}

.section_heading {
  font-size: 18px;
  font-weight: var(--fw-bold);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-black);
}

/* ========================================
   作業ログ登録フォーム（top.php）
   ======================================== */
.work_log_form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.work_log_row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.work_log_field--date {
  flex: 1;
  min-width: 0;
}

.work_log_field--hours {
  flex: 0 0 auto;
}

.work_log_hours_wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.work_log_field--hours .form_select {
  width: 96px;
}

.work_log_hours_unit {
  font-size: 14px;
  color: var(--color-black);
}

/* セカンダリ（リンク用）ボタン */
.link_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 44px;
  margin-top: 24px;
  background: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: all var(--transition-fast) ease;
}

.link_btn:hover {
  background: var(--color-bg-light);
  border-color: var(--color-black);
  color: var(--color-black);
  opacity: 1;
}

/* ========================================
   マスターメニュー
   ======================================== */
.master_menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.master_menu_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  border: 1px solid var(--color-black);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-black);
  font-size: 16px;
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: all var(--transition-fast) ease;
}

.master_menu_btn:hover {
  background: var(--color-black);
  color: var(--color-white);
  opacity: 1;
}

/* ========================================
   ユーザー切替ラジオボタン（master_work_log で利用）
   ======================================== */
.user_radio_group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.user_radio_label {
  cursor: pointer;
}

.user_radio_input {
  display: none;
}

.user_radio_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  border: 1px solid var(--color-black);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-black);
  transition: all var(--transition-fast) ease;
}

.user_radio_btn:hover {
  background: var(--color-bg-light);
}

.user_radio_input:checked + .user_radio_btn {
  background: var(--color-black);
  color: var(--color-white);
}

/* ========================================
   設定画面
   ======================================== */
.settings_form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings_card {
  background: var(--color-bg-light);
  border-radius: 12px;
  padding: 20px 24px;
}

.settings_card_title {
  font-size: 15px;
  font-weight: var(--fw-bold);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.settings_row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.settings_row:last-child {
  margin-bottom: 0;
}

.settings_label {
  font-size: 14px;
  font-weight: var(--fw-bold);
  min-width: 80px;
}

.form_select {
  width: 100%;
  appearance: auto;
}

.form_select--sm {
  width: 100px;
  height: 40px;
  font-size: 14px;
}

.form_input--date {
  width: auto;
  min-width: 180px;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  font-family: inherit;
}

.settings_note {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--color-bg-light);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.8;
  color: #4d5266;
}

.settings_note p {
  margin-bottom: 4px;
}

.settings_note p:last-child {
  margin-bottom: 0;
}

.settings_accordion {
  margin-bottom: 16px;
}

.settings_accordion_toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--color-black);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.settings_accordion_toggle:hover {
  background: #e3e5ea;
}

.settings_accordion_icon {
  font-size: 12px;
  transition: transform var(--transition-fast);
}

.settings_accordion_body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.settings_accordion_body.open {
  max-height: 2000px;
}

.settings_msg {
  background: #d0f0d0;
  color: #2b8a3e;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  margin-bottom: 16px;
}

/* ========================================
   マスター共通
   ======================================== */
.back_btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--color-black);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 24px;
  transition: all var(--transition-fast) ease;
}

.back_btn:hover {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
  opacity: 1;
}

.master_form_card {
  background: var(--color-bg-light);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}

.master_form_title {
  font-size: 16px;
  font-weight: var(--fw-bold);
  margin-bottom: 16px;
}

.master_form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ユーザー一覧 */
.user_list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.user_card {
  background: var(--color-bg-light);
  border-radius: 12px;
  padding: 16px 20px;
}

.user_card_view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.user_card_info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user_card_name {
  font-size: 15px;
  font-weight: var(--fw-bold);
}

.user_card_meta {
  font-size: 12px;
  color: #7d8398;
}

.user_card_actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.user_card_actions .user_edit_btn,
.user_card_actions .leave_delete_btn {
  height: 36px;
  min-width: 64px;
  padding: 0 16px;
  font-size: 13px;
  font-family: inherit;
  font-weight: var(--fw-bold);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.user_card_actions .user_edit_btn {
  background: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-black);
}

.user_card_actions .user_edit_btn:hover {
  background: var(--color-black);
  color: var(--color-white);
}

.user_card_actions .leave_delete_btn {
  background: none;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

.user_card_actions .leave_delete_btn:hover {
  background: var(--color-danger);
  color: var(--color-white);
}

.user_card_edit {
  padding-top: 8px;
}

.user_edit_actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.user_edit_actions .login_btn,
.user_edit_actions .user_cancel_btn {
  flex: 1;
  height: 40px;
  font-size: 13px;
  font-family: inherit;
  font-weight: var(--fw-bold);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user_edit_actions .login_btn {
  background: var(--color-black);
  color: var(--color-white);
  border: 1px solid var(--color-black);
}

.user_edit_actions .login_btn:hover {
  background: var(--color-white);
  color: var(--color-black);
}

.user_cancel_btn {
  background: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-border);
}

.user_cancel_btn:hover {
  background: #dadce2;
}

/* ========================================
   作業履歴（月度ナビ）
   ======================================== */
.attendance_date_nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.attendance_date_center {
  flex: 1;
  text-align: center;
}

.attendance_date_title {
  font-size: 20px;
  font-weight: var(--fw-bold);
}

.attendance_date_sub {
  font-size: 13px;
  color: #7d8398;
}

.cal_nav_btn {
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  font-size: 16px;
  font-weight: var(--fw-bold);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all var(--transition-fast) ease;
  flex-shrink: 0;
}

.cal_nav_btn:hover {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.cal_back_current_wrap {
  text-align: center;
  margin-bottom: 12px;
}

.cal_back_current {
  display: inline-flex;
  align-items: center;
  padding: 4px 16px;
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--color-black);
  text-decoration: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  line-height: 1.6;
}

.cal_back_current:hover {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

/* ========================================
   作業履歴テーブル（縦表示）
   ======================================== */
.att_table_wrap {
  width: 100%;
}

.att_vertical_table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.att_vertical_table th,
.att_vertical_table td {
  border-bottom: 1px solid var(--color-border);
  padding: 10px 12px;
  vertical-align: middle;
}

.att_vertical_table thead th {
  background: var(--color-bg-light);
  font-weight: var(--fw-bold);
  font-size: 13px;
  color: #4d5266;
  text-align: center;
  position: sticky;
  top: 80px;
  z-index: 10;
}

.att_v_th_date {
  text-align: left !important;
  width: 72px;
  min-width: 72px;
}

.att_v_td_date {
  font-weight: var(--fw-bold);
  white-space: nowrap;
  width: 72px;
  min-width: 72px;
}

.att_v_date_num {
  font-size: 15px;
  margin-right: 4px;
}

.att_v_date_week {
  font-size: 12px;
  color: #7d8398;
}

.att_v_sun .att_v_date_num,
.att_v_sun .att_v_date_week {
  color: var(--color-danger);
}

.att_v_sat .att_v_date_num,
.att_v_sat .att_v_date_week {
  color: var(--color-accent);
}

tr.att_v_sun {
  background: #fff5f5;
}

tr.att_v_sat {
  background: #f5f8ff;
}

.att_v_td_cell {
  text-align: center;
  font-size: 12px;
  color: #7d8398;
  overflow: hidden;
  word-break: break-all;
}

/* 内容列: 行頭をそろえるため左寄せ＋日付列との隙間を確保 */
.att_v_th_comment,
.att_v_td_comment {
  text-align: left !important;
  padding-left: 20px;
}

/* 時間列: 内容を圧迫しないよう幅を抑える */
.att_v_th_time,
.att_v_td_time {
  text-align: center;
  width: 88px;
  min-width: 88px;
  white-space: nowrap;
}

/* 編集列 */
.att_v_th_edit,
.att_v_td_edit {
  text-align: center;
  width: 64px;
  min-width: 64px;
  white-space: nowrap;
}

.work_log_edit_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  font-family: inherit;
  font-weight: var(--fw-bold);
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}

.work_log_edit_btn:hover {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

/* CSV出力済バッジ（時間セル横／編集列） */
.csv_exported_badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--color-white);
  background: var(--color-accent);
  border-radius: 4px;
  white-space: nowrap;
  vertical-align: middle;
}

/* 作業履歴アクション（CSV出力ボタンなど） */
.work_log_actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.csv_download_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--color-white);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  text-decoration: none;
  transition: all var(--transition-fast) ease;
}

.csv_download_btn:hover {
  opacity: 0.85;
  color: var(--color-white);
}

.csv_download_btn.is_loading {
  pointer-events: none;
  opacity: 0.6;
}

.csv_download_btn.is_loading::after {
  content: '';
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid var(--color-white);
  border-top-color: transparent;
  border-radius: 50%;
  animation: csvSpin 0.8s linear infinite;
}

@keyframes csvSpin {
  to { transform: rotate(360deg); }
}

/* ========================================
   編集モーダル（user_work_log）
   ======================================== */
.edit_modal_overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 14, 0.5);
  z-index: 200;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.edit_modal_overlay.active {
  display: flex;
}

.edit_modal_content {
  background: var(--color-white);
  border-radius: 12px;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
}

.edit_modal_title {
  font-size: 18px;
  font-weight: var(--fw-bold);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.edit_modal_form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.edit_modal_actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.edit_modal_actions .login_btn,
.edit_modal_actions .user_cancel_btn {
  flex: 1;
  height: 44px;
  font-size: 14px;
  font-family: inherit;
  font-weight: var(--fw-bold);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.att_v_total_label {
  font-weight: var(--fw-bold);
  font-size: 14px;
}

.att_v_td_total {
  text-align: center;
  font-weight: var(--fw-bold);
  font-size: 14px;
  background: var(--color-bg-light);
}

.att_vertical_table tfoot td {
  border-top: 2px solid var(--color-black);
  border-bottom: none;
  padding: 12px;
}

.att_vertical_table--single {
  table-layout: auto;
}

.att_vertical_table--single th,
.att_vertical_table--single td {
  padding: 8px 6px;
  font-size: 12px;
  white-space: nowrap;
}

/* ========================================
   フッター
   ======================================== */
.footer_main {
  border-top: 1px solid var(--color-border);
  padding: 20px 0;
  margin-top: auto;
}

.footer_main .container {
  display: flex;
  justify-content: center;
}

.footer_copyright {
  font-size: 12px;
  color: #9da2b3;
}

/* ========================================
   レスポンシブ
   ======================================== */
@media (max-width: 768px) {
  .header_logo_text {
    font-size: 15px;
  }

  .att_table_wrap {
    margin-left: -12px;
    margin-right: -12px;
  }

  .att_vertical_table--single th,
  .att_vertical_table--single td {
    padding: 6px 4px;
    font-size: 11px;
  }

  .att_vertical_table--single .att_v_th_date,
  .att_vertical_table--single .att_v_td_date {
    width: 48px;
    min-width: 48px;
    padding: 6px 3px;
  }

  .att_vertical_table--single .att_v_date_num {
    font-size: 11px;
  }

  .att_vertical_table--single .att_v_date_week {
    font-size: 10px;
  }

  .att_vertical_table--single .att_v_th_time,
  .att_vertical_table--single .att_v_td_time {
    width: 64px;
    min-width: 64px;
  }

  .att_vertical_table--single .att_v_th_edit,
  .att_vertical_table--single .att_v_td_edit {
    width: 52px;
    min-width: 52px;
  }

  .work_log_edit_btn {
    height: 26px;
    padding: 0 8px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .login_title {
    font-size: 24px;
  }
}