:root {
  color-scheme: light;
  font-family: "Segoe UI", "Yu Gothic UI", sans-serif;
  color: #263238;
  background: #f5f7fb;
}

* { box-sizing: border-box; }
body { margin: 0; background: #f5f7fb; color: #263238; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.header {
  position: sticky; top: 0; z-index: 100;
  min-height: 52px; padding: 8px 20px;
  display: flex; align-items: center; justify-content: space-between;
  background: #3f51b5; color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
}
.tool-title { margin: 0; font-size: 1.4rem; }
.header-buttons { display: flex; align-items: center; gap: 8px; }
.header-buttons button {
  padding: 7px 12px; border: 0; border-radius: 5px;
  background: #fff; color: #303f9f; font-weight: 600;
}
.header-buttons button:hover { background: #e8eaf6; }
.logout-form { margin: 0; }
.mobile-menu-toggle, .mobile-create-toggle, .mobile-card-summary { display: none; }

.tab-menu { display: flex; padding-left: 12px; background: #fff; border-bottom: 1px solid #d9deea; }
.tab-button {
  padding: 13px 22px 10px; border: 0; border-bottom: 3px solid transparent;
  background: transparent; color: #546e7a; font-weight: 700;
}
.tab-button.active { color: #303f9f; border-bottom-color: #3f51b5; }
.tab-content { display: none; }
.tab-content.active { display: block; }

.info-panel {
  position: sticky; top: 52px; z-index: 50;
  display: flex; justify-content: flex-end; padding: 10px 20px;
  background: rgba(255,255,255,.96); border-bottom: 1px solid #d9deea;
}
.info-panel-right-area, .compare-time, .compare-time-area, .filter-toggle { display: flex; align-items: center; }
.info-panel-right-area { gap: 18px; }
.compare-time { gap: 14px; }
.compare-time-area { gap: 5px; white-space: nowrap; }
.time_input_area { width: 64px; text-align: right; }
.filter-toggle { gap: 5px; white-space: nowrap; }

.section-heading { display: flex; justify-content: space-between; padding: 18px 20px 0; }
.section-heading h2 { margin: 0 0 4px; font-size: 1.15rem; }
.section-heading p { margin: 0; color: #607d8b; font-size: .9rem; }
.task-table-wrapper { width: 100%; padding: 12px 20px 24px; overflow-x: auto; }

#task-table, #insight-table {
  width: 100%; min-width: 1280px; table-layout: fixed; border-collapse: collapse;
  background: #fff; box-shadow: 0 2px 8px rgba(35,47,62,.10);
}
#insight-table { min-width: 820px; }
#task-table th, #task-table td, #insight-table th, #insight-table td {
  border: 1px solid #d9deea; padding: 5px 6px; font-size: 12px; vertical-align: middle;
}
#task-table th, #insight-table th { padding: 8px 6px; background: #3f51b5; color: #fff; }
#task-table td:first-child, #insight-table td:first-child, #insight-table td:nth-child(5) { text-align: center; }
#task-table th, #task-table td,
#task-table td:not(:nth-child(4)):not(:nth-child(11)) .cell-input,
#task-table td:not(:nth-child(4)):not(:nth-child(11)) input,
#task-table td:not(:nth-child(4)):not(:nth-child(11)) select {
  text-align: center;
}
#task-table td:not(:nth-child(4)):not(:nth-child(11)) select {
  text-align-last: center;
}
#task-table th:nth-child(4), #task-table td:nth-child(4),
#task-table th:nth-child(11), #task-table td:nth-child(11),
#task-table td:nth-child(4) .cell-input, #task-table td:nth-child(11) .cell-input,
#task-table td:nth-child(4) input, #task-table td:nth-child(11) input {
  text-align: left;
}
#insight-table td:nth-child(2), #insight-table td:nth-child(2) select {
  text-align: center;
  text-align-last: center;
}

.cell-input, .new-task-row input, .new-task-row select, .new-task-row textarea {
  width: 100%; min-width: 0; padding: 5px 6px; border: 1px solid transparent;
  border-radius: 3px; background: transparent; color: inherit;
}
.cell-input:hover, .cell-input:focus,
.new-task-row input:focus, .new-task-row select:focus, .new-task-row textarea:focus {
  border-color: #9fa8da; background: #fff; outline: none;
}
textarea.cell-input, #new-insight-content {
  min-height: 0; overflow-y: hidden; resize: none; line-height: 1.4;
}
.new-task-row td { background: #f3f5ff; }
.date-input-group { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 3px; align-items: center; }
.date-picker-button {
  min-width: 34px; min-height: 30px; padding: 2px; border: 1px solid transparent;
  border-radius: 3px; background: transparent; line-height: 1;
}
.date-picker-button:hover, .date-picker-button:focus { border-color: #9fa8da; background: #fff; outline: none; }
.date-picker-proxy { position: absolute; right: 0; bottom: 0; width: 1px !important; height: 1px; opacity: 0; pointer-events: none; }
.field-error { display: block; margin-top: 3px; color: #c62828; font-size: 11px; line-height: 1.3; }
.saving { opacity: .72; }
.save-error { box-shadow: inset 0 0 0 2px #c62828; }
.task-level-high { color: #c62828; font-weight: 700; }

.table_blue_btn, .category-item button, .category-add-row button {
  border: 0; border-radius: 4px; padding: 5px 9px; background: #3f51b5; color: #fff;
}
.table_blue_btn:hover, .category-item button:hover, .category-add-row button:hover { background: #283593; }
.delete_btn { border: 0; border-radius: 4px; padding: 5px 8px; background: #616161 !important; color: #fff !important; }
.delete_btn:hover { background: #303030 !important; }

.gray-out td { background: #eceff1 !important; color: #78909c; }
.due-today td { background: #d8f5dd !important; }
.overdue td { background: #ffe1e3 !important; }
.wait td { background: #e3effa !important; }
.gray-out .cell-input, .due-today .cell-input, .overdue .cell-input, .wait .cell-input { background: transparent; }

.modal_overlay {
  position: fixed; inset: 0; z-index: 1000; padding: 24px;
  background: rgba(14,24,40,.52); overflow: auto;
}
.modal_content {
  position: relative; width: min(1100px, 96vw); margin: 3vh auto; padding: 22px;
  max-height: 90vh; overflow-y: auto; border-radius: 8px; background: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.modal_content h2 { margin-top: 0; }
.close_button { position: absolute; top: 8px; right: 12px; border: 0; background: transparent; font-size: 28px; color: #546e7a; }
.category-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.category-panel { min-width: 0; }
.category-panel h3 { margin: 4px 0 10px; font-size: 1rem; }
.category-list { display: grid; gap: 7px; margin-bottom: 10px; }
.category-item, .category-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 5px; }
.category-add-row { grid-template-columns: minmax(0, 1fr) auto; padding-top: 8px; border-top: 1px solid #e0e5ef; }
.category-item input, .category-add-row input { min-width: 0; width: 100%; padding: 6px; border: 1px solid #c5cad4; border-radius: 4px; }

.backup-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-right: 44px; }
.backup-heading h2 { margin-bottom: 4px; }
.backup-heading p { margin: 0 0 18px; color: #607d8b; }
.backup-run-btn { min-height: 38px; white-space: nowrap; }
.backup-run-btn:disabled { cursor: wait; opacity: .6; }
.backup-config-message { margin: 4px 0 14px; padding: 10px 12px; border-radius: 5px; background: #fff3e0; color: #8a4b08; }
.backup-table-wrapper { max-width: 100%; overflow-x: auto; }
#backup-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#backup-table th, #backup-table td { padding: 9px; border: 1px solid #d9deea; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
#backup-table th { background: #3f51b5; color: #fff; }
#backup-table th:nth-child(1) { width: 170px; }
#backup-table th:nth-child(2), #backup-table th:nth-child(3) { width: 90px; }
#backup-table th:nth-child(4) { width: 100px; }
.backup-success { color: #2e7d32; font-weight: 700; }
.backup-failed { color: #c62828; font-weight: 700; }

.notification {
  position: fixed; top: 20px; left: 50%; z-index: 2000;
  transform: translate(-50%, -8px); opacity: 0;
  padding: 11px 20px; border-radius: 6px; background: #2e7d32; color: #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,.22); transition: opacity .2s, transform .2s;
}
.notification.error { background: #c62828; }
.notification.show { opacity: 1; transform: translate(-50%, 0); }
.notification a { color: #fff; font-weight: 700; }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: linear-gradient(135deg, #e8eaf6, #f5f7fb); }
.login-card { width: min(390px, 100%); padding: 30px; border-radius: 10px; background: #fff; box-shadow: 0 10px 35px rgba(39,52,100,.18); }
.login-card h1 { margin: 0 0 8px; color: #303f9f; }
.login-card > p { margin: 0 0 22px; color: #607d8b; }
.login-form { display: grid; gap: 16px; }
.login-form label { display: grid; gap: 5px; font-size: .9rem; font-weight: 600; }
.login-form input { width: 100%; padding: 9px; border: 1px solid #bbc2cf; border-radius: 5px; }
.login-form .table_blue_btn { width: 100%; padding: 10px; font-size: 1rem; }
.form-error { margin-bottom: 16px; padding: 10px; border-radius: 5px; background: #ffebee; color: #b71c1c; }

@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .header { position: sticky; min-height: 56px; padding: 7px 12px; }
  .tool-title { font-size: 1.2rem; }
  .mobile-menu-toggle {
    display: block; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.8);
    border-radius: 5px; background: transparent; color: #fff; font-weight: 700;
  }
  .header-buttons {
    display: none; position: absolute; top: 56px; right: 8px; width: min(260px, calc(100vw - 16px));
    padding: 10px; border-radius: 0 0 7px 7px; background: #303f9f;
    box-shadow: 0 8px 18px rgba(0,0,0,.24);
  }
  .header-buttons.mobile-open { display: grid; gap: 8px; }
  .header-buttons button, .logout-form, .logout-form button { width: 100%; min-height: 44px; }
  .tab-menu { padding: 0; }
  .tab-button { flex: 1; min-height: 44px; padding-inline: 8px; }

  .info-panel { position: static; padding: 10px 12px; }
  .info-panel-right-area { width: 100%; align-items: stretch; gap: 10px; }
  .compare-time { justify-content: space-between; gap: 8px; }
  .compare-time-area { font-size: .86rem; }
  .time_input_area { width: 58px; min-height: 40px; }
  .filter-toggle { min-height: 40px; justify-content: flex-end; }
  .section-heading { padding: 16px 12px 0; }

  .mobile-create-toggle {
    display: block; width: calc(100% - 24px); min-height: 46px; margin: 14px 12px 4px;
    border: 0; border-radius: 6px; background: #3f51b5; color: #fff; font-weight: 700;
  }
  .task-table-wrapper { padding: 8px 12px 22px; overflow: visible; }
  #task-table, #insight-table { display: block; width: 100%; min-width: 0; background: transparent; box-shadow: none; }
  #task-table colgroup, #insight-table colgroup, #task-table thead, #insight-table thead { display: none; }
  #task-table tbody, #insight-table tbody { display: flex; flex-direction: column; gap: 10px; width: 100%; }

  #task-table tr, #insight-table tr {
    position: relative; display: block; width: 100%; border: 1px solid #d9deea; border-radius: 8px;
    background: #fff; box-shadow: 0 2px 7px rgba(35,47,62,.10); overflow: hidden;
  }
  #task-table tr[hidden], #insight-table tr[hidden] { display: none !important; }
  #task-table td, #insight-table td {
    display: none; width: 100%; min-width: 0; padding: 9px 11px; border: 0;
    border-bottom: 1px solid #e3e7ef; font-size: 14px; text-align: left;
  }
  #task-table .task-row > td:nth-child(4), #insight-table .insight-row > td:nth-child(3) { display: block; }
  #task-table .mobile-expanded > td, #insight-table .mobile-expanded > td,
  #task-table .new-task-row.mobile-open > td, #insight-table .new-task-row.mobile-open > td {
    display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 8px;
  }
  #task-table td::before, #insight-table td::before {
    content: attr(data-label); color: #546e7a; font-size: .8rem; font-weight: 700; text-align: left;
  }
  #task-table .card-actions, #insight-table .card-actions { grid-template-columns: 1fr; }
  #task-table .new-task-row.mobile-open > td.card-actions,
  #insight-table .new-task-row.mobile-open > td.card-actions { grid-template-columns: 1fr; }
  #task-table .card-actions::before, #insight-table .card-actions::before { display: none; }
  #task-table .card-actions button, #insight-table .card-actions button { width: 100%; }

  .mobile-card-summary { display: grid; gap: 7px; width: 100%; }
  .mobile-card-summary strong { font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere; }
  .mobile-card-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; color: #607d8b; font-size: .82rem; }
  .mobile-card-summary button { min-height: 44px; margin-top: 2px; border: 1px solid #9fa8da; border-radius: 5px; background: #fff; color: #303f9f; font-weight: 700; }
  .task-row:not(.mobile-expanded) td:nth-child(4) > .cell-input,
  .insight-row:not(.mobile-expanded) td:nth-child(3) > .cell-input { display: none; }
  .mobile-expanded > td:first-child { padding-top: 62px !important; }
  .mobile-expanded .mobile-card-summary {
    position: absolute; z-index: 2; top: 8px; right: 10px; display: block;
    width: 104px; margin: 0;
  }
  .mobile-expanded .mobile-card-summary > div { display: none; }
  .mobile-expanded .mobile-card-summary button { width: 100%; margin: 0; }
  .mobile-expanded td:nth-child(4) > .cell-input,
  .mobile-expanded td:nth-child(3) > .cell-input { display: block; }

  .cell-input, .new-task-row input, .new-task-row select, .new-task-row textarea,
  .table_blue_btn, .delete_btn { min-height: 44px; padding: 9px; font-size: 16px; }
  .date-input-group { grid-template-columns: minmax(0, 1fr) 44px; }
  .date-picker-button { min-height: 44px; }
  #task-table td > .field-error { grid-column: 2; }
  textarea.cell-input, #new-insight-content { min-height: 44px; }
  .new-task-row { display: none !important; order: -1; }
  .new-task-row.mobile-open { display: block !important; }
  .new-task-row > td:first-child { border-top: 0; }
  .gray-out td, .due-today td, .overdue td, .wait td { background: transparent !important; }
  .gray-out, .due-today, .overdue, .wait { border-left-width: 6px !important; }
  .gray-out { border-left-color: #90a4ae !important; }
  .due-today { border-left-color: #43a047 !important; }
  .overdue { border-left-color: #e53935 !important; }
  .wait { border-left-color: #42a5f5 !important; }

  .category-columns { grid-template-columns: 1fr; }
  .modal_overlay { padding: 0; }
  .modal_content { width: 100%; min-height: 100%; max-height: 100vh; margin: 0; padding: 18px 12px 28px; border-radius: 0; }
  .close_button {
    position: sticky; z-index: 2; top: 0; float: right; width: 44px; height: 44px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.18);
  }
  .category-item { grid-template-columns: minmax(0, 1fr) 64px 64px; }
  .category-item input, .category-add-row input, .category-item button, .category-add-row button { min-height: 44px; }
  .backup-heading { display: block; padding-right: 48px; }
  .backup-run-btn { width: 100%; min-height: 46px; margin-bottom: 12px; }
  .backup-table-wrapper { overflow: visible; }
  #backup-table, #backup-table tbody { display: block; width: 100%; }
  #backup-table thead { display: none; }
  #backup-table tr { display: block; margin-bottom: 10px; padding: 8px; border: 1px solid #d9deea; border-radius: 7px; }
  #backup-table td { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; width: 100%; padding: 6px; border: 0; }
  #backup-table td::before { content: attr(data-label); color: #546e7a; font-size: .8rem; font-weight: 700; }
}

@media (max-width: 390px) {
  .compare-time { align-items: flex-end; flex-direction: column; }
  #task-table .mobile-expanded > td, #insight-table .mobile-expanded > td,
  #task-table .new-task-row.mobile-open > td, #insight-table .new-task-row.mobile-open > td {
    grid-template-columns: 88px minmax(0, 1fr);
  }
}