* {
  box-sizing: border-box;
}

:root {
  --primary: #173b66;
  --primary-hover: #0f2e52;
  --primary-light: #eef4fa;

  --text: #182230;
  --text-secondary: #667085;
  --border: #e5e9f0;

  --background: #f6f8fb;
  --surface: #ffffff;

  --success: #17805c;
  --success-bg: #e9f7f1;

  --warning: #b7791f;
  --warning-bg: #fff7e6;

  --danger: #c74444;
  --danger-bg: #fff0f0;

  --purple: #7556a3;
  --purple-bg: #f4f0fa;

  --radius: 14px;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Microsoft YaHei",
    Arial,
    sans-serif;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--background);
}


/* ======================================================
   LOGIN
====================================================== */

.login-view {
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at 15% 10%, #eef4fb 0, transparent 30%),
    radial-gradient(circle at 85% 90%, #edf2f8 0, transparent 30%),
    #f9fbfd;

  padding: 30px;
}

.login-brand {
  width: 420px;
  max-width: 100%;

  display: flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 24px;
}

.brand-mark {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 13px;

  background: var(--primary);
  color: white;

  font-weight: 700;
  letter-spacing: 0.5px;
}

.brand-mark.small {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 14px;
}

.brand-name {
  font-size: 22px;
  font-weight: 700;
}

.brand-subtitle {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 13px;
}

.login-card {
  width: 420px;
  max-width: 100%;

  background: white;

  padding: 34px;

  border: 1px solid var(--border);
  border-radius: 18px;

  box-shadow:
    0 10px 30px rgba(31, 50, 75, 0.08);
}

.login-title {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 8px;
}

.login-desc {
  color: var(--text-secondary);
  font-size: 14px;

  margin-bottom: 28px;
}

.login-card label {
  display: block;

  font-size: 13px;
  font-weight: 600;

  margin: 18px 0 8px;
}

.login-card input {
  width: 100%;
  height: 46px;

  padding: 0 14px;

  border: 1px solid #d8dee8;
  border-radius: 9px;

  outline: none;

  font-size: 14px;

  transition: 0.2s;
}

.login-card input:focus {
  border-color: var(--primary);

  box-shadow:
    0 0 0 3px rgba(23, 59, 102, 0.08);
}

.primary-button {
  width: 100%;
  height: 46px;

  margin-top: 24px;

  border: none;
  border-radius: 9px;

  background: var(--primary);

  color: white;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
}

.primary-button:hover {
  background: var(--primary-hover);
}

.login-error {
  min-height: 20px;

  margin-top: 12px;

  font-size: 13px;
  color: var(--danger);
}

.login-footer {
  margin-top: 28px;

  color: #98a2b3;
  font-size: 12px;
}


/* ======================================================
   LAYOUT
====================================================== */

.hidden {
  display: none !important;
}

.app-view {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;

  width: 238px;

  background: #102d4f;

  color: white;

  display: flex;
  flex-direction: column;

  padding: 24px 16px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;

  padding: 0 8px 24px;
}

.sidebar-brand-name {
  font-size: 16px;
  font-weight: 650;
}

.sidebar-brand-subtitle {
  margin-top: 2px;

  font-size: 11px;

  color: rgba(255,255,255,0.58);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;

  margin-top: 10px;
}

.nav-item {
  height: 44px;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 0 14px;

  border: 0;
  border-radius: 8px;

  background: transparent;

  color: rgba(255,255,255,0.72);

  text-align: left;
  font-size: 14px;

  cursor: pointer;
}

.nav-item:hover {
  background: rgba(255,255,255,0.07);
  color: white;
}

.nav-item.active {
  background: rgba(255,255,255,0.12);
  color: white;
  font-weight: 600;
}

.nav-icon {
  width: 20px;
  text-align: center;
}

.sidebar-bottom {
  margin-top: auto;

  border-top: 1px solid rgba(255,255,255,0.1);

  padding-top: 18px;
}

.current-user {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 4px 6px 14px;
}

.user-avatar {
  width: 38px;
  height: 38px;

  border-radius: 50%;

  background: rgba(255,255,255,0.14);

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 14px;
  font-weight: 700;
}

.current-user-info {
  min-width: 0;
}

.current-user-name {
  font-size: 13px;
  font-weight: 600;
}

.current-user-role {
  margin-top: 3px;

  font-size: 11px;

  color: rgba(255,255,255,0.55);
}

.logout-button {
  width: 100%;

  height: 36px;

  border: none;
  border-radius: 7px;

  color: rgba(255,255,255,0.66);

  background: transparent;

  cursor: pointer;
}

.logout-button:hover {
  color: white;
  background: rgba(255,255,255,0.08);
}


.main-area {
  margin-left: 238px;
  min-height: 100vh;
}

.topbar {
  height: 92px;

  padding: 20px 34px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  background: white;

  border-bottom: 1px solid var(--border);
}

.topbar h1 {
  margin: 0;

  font-size: 22px;
  font-weight: 650;
}

.page-subtitle {
  margin-top: 7px;

  color: var(--text-secondary);

  font-size: 13px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;

  color: var(--text-secondary);
  font-size: 13px;
}

.ghost-button {
  height: 34px;

  padding: 0 13px;

  border-radius: 7px;

  border: 1px solid var(--border);

  background: white;

  color: var(--text-secondary);

  cursor: pointer;
}

.ghost-button:hover {
  background: #f8fafc;
}

.content {
  padding: 28px 34px 50px;
}


/* ======================================================
   KPI
====================================================== */

.kpi-grid {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(150px, 1fr));

  gap: 14px;

  margin-bottom: 28px;
}

.kpi-card {
  background: white;

  border: 1px solid var(--border);
  border-radius: var(--radius);

  padding: 19px 20px;
}

.kpi-title {
  color: var(--text-secondary);

  font-size: 12px;
}

.kpi-value {
  margin-top: 9px;

  font-size: 27px;
  font-weight: 650;
}

.kpi-extra {
  margin-top: 6px;

  font-size: 11px;
  color: #98a2b3;
}


/* ======================================================
   PANELS
====================================================== */

.panel {
  background: white;

  border: 1px solid var(--border);
  border-radius: var(--radius);

  margin-bottom: 20px;
}

.panel-header {
  min-height: 58px;

  padding: 0 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid var(--border);
}

.panel-title {
  font-size: 15px;
  font-weight: 650;
}

.panel-subtitle {
  margin-top: 3px;

  color: var(--text-secondary);

  font-size: 12px;
}

.panel-body {
  padding: 18px 20px;
}


/* ======================================================
   TASKS
====================================================== */

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

.task-card {
  padding: 16px 17px;

  border: 1px solid var(--border);
  border-radius: 11px;

  background: white;

  display: grid;

  grid-template-columns:
    minmax(240px, 1.4fr)
    minmax(120px, .65fr)
    minmax(140px, .8fr)
    minmax(130px, .7fr);

  gap: 18px;

  align-items: center;
}

.task-title {
  font-size: 14px;
  font-weight: 620;

  margin-bottom: 6px;
}

.task-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.task-label {
  font-size: 11px;
  color: #98a2b3;

  margin-bottom: 5px;
}

.task-value {
  font-size: 13px;
}

.status-tag {
  display: inline-flex;

  align-items: center;

  padding: 5px 9px;

  border-radius: 20px;

  font-size: 11px;
  font-weight: 600;
}

.status-normal {
  color: #36618f;
  background: #eef5fc;
}

.status-success {
  color: var(--success);
  background: var(--success-bg);
}

.status-warning {
  color: var(--warning);
  background: var(--warning-bg);
}

.status-danger {
  color: var(--danger);
  background: var(--danger-bg);
}

.status-purple {
  color: var(--purple);
  background: var(--purple-bg);
}


/* ======================================================
   PROJECT
====================================================== */

.project-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(240px, 1fr));

  gap: 14px;
}

.project-card {
  background: white;

  border: 1px solid var(--border);
  border-radius: 12px;

  padding: 18px;

  transition: .15s;
}

.project-card:hover {
  border-color: #cbd5e1;

  box-shadow:
    0 5px 16px rgba(31,50,75,.06);
}

.project-code {
  font-size: 11px;

  color: #8391a3;

  margin-bottom: 8px;
}

.project-name {
  min-height: 42px;

  font-size: 14px;
  font-weight: 620;

  line-height: 1.5;
}

.project-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-top: 15px;

  font-size: 11px;
  color: var(--text-secondary);
}


/* ======================================================
   EMPTY & LOADING
====================================================== */

.loading {
  padding: 60px;

  text-align: center;

  color: var(--text-secondary);
}

.empty-state {
  padding: 42px 20px;

  text-align: center;

  color: #98a2b3;

  font-size: 13px;
}


/* ======================================================
   MOBILE
====================================================== */

@media (max-width: 1050px) {

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 760px) {

  .sidebar {
    width: 70px;
    padding: 20px 10px;
  }

  .sidebar-brand > div:last-child,
  .nav-item:not(.active) span + *,
  .current-user-info,
  .logout-button {
    display: none;
  }

  .main-area {
    margin-left: 70px;
  }

  .topbar {
    padding: 18px;
  }

  .content {
    padding: 18px;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .task-card {
    grid-template-columns: 1fr;
  }

}



/* ======================================================
   TASK INTERACTION
====================================================== */

.task-card {
  cursor: pointer;
  transition: .15s ease;
}

.task-card:hover {
  border-color: #b9c7d8;
  box-shadow: 0 4px 14px rgba(31,50,75,.06);
  transform: translateY(-1px);
}


.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;

  background: rgba(16, 34, 55, .22);

  display: flex;
  justify-content: flex-end;
}

.task-drawer {
  width: 520px;
  max-width: 94vw;
  height: 100vh;

  background: white;

  box-shadow: -12px 0 35px rgba(27,45,68,.16);

  overflow-y: auto;

  animation: drawerIn .18s ease;
}

@keyframes drawerIn {
  from {
    transform: translateX(30px);
    opacity: .5;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}


.drawer-header {
  position: sticky;
  top: 0;
  z-index: 2;

  min-height: 84px;

  padding: 18px 22px;

  background: white;

  border-bottom: 1px solid var(--border);

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.drawer-title {
  font-size: 18px;
  font-weight: 650;
  line-height: 1.5;
}

.drawer-project {
  margin-top: 5px;

  font-size: 12px;
  color: var(--text-secondary);
}

.drawer-close {
  width: 34px;
  height: 34px;

  border: 1px solid var(--border);
  border-radius: 8px;

  background: white;

  font-size: 18px;
  color: var(--text-secondary);

  cursor: pointer;
}

.drawer-close:hover {
  background: #f7f9fc;
}


.drawer-body {
  padding: 22px;
}


.drawer-section {
  margin-bottom: 27px;
}

.drawer-section-title {
  margin-bottom: 13px;

  font-size: 13px;
  font-weight: 650;
}


.task-progress {
  display: flex;
  align-items: flex-start;

  overflow-x: auto;

  padding: 5px 2px 12px;
}

.progress-node {
  min-width: 86px;
  position: relative;

  text-align: center;

  font-size: 10px;
  color: #98a2b3;
}

.progress-node::before {
  content: "";

  display: block;

  width: 10px;
  height: 10px;

  margin: 0 auto 7px;

  border-radius: 50%;

  background: #d7dee7;

  position: relative;
  z-index: 2;
}

.progress-node::after {
  content: "";

  position: absolute;

  top: 4px;
  left: 50%;

  width: 100%;
  height: 2px;

  background: #e1e6ed;
}

.progress-node:last-child::after {
  display: none;
}

.progress-node.done::before,
.progress-node.current::before {
  background: var(--primary);
}

.progress-node.done::after {
  background: var(--primary);
}

.progress-node.current {
  color: var(--primary);
  font-weight: 600;
}


.form-row {
  margin-bottom: 17px;
}

.form-label {
  display: block;

  margin-bottom: 7px;

  font-size: 12px;
  font-weight: 600;

  color: #475467;
}

.form-control {
  width: 100%;

  min-height: 42px;

  padding: 10px 12px;

  border: 1px solid #d8dee8;
  border-radius: 8px;

  background: white;

  font-size: 13px;

  outline: none;
}

.form-control:focus {
  border-color: var(--primary);

  box-shadow:
    0 0 0 3px rgba(23,59,102,.07);
}

textarea.form-control {
  min-height: 105px;

  resize: vertical;

  font-family: inherit;
  line-height: 1.6;
}


.drawer-info-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

  margin-bottom: 22px;
}

.drawer-info-item {
  padding: 12px;

  background: #f8fafc;

  border-radius: 9px;
}

.drawer-info-label {
  font-size: 10px;

  color: #98a2b3;

  margin-bottom: 5px;
}

.drawer-info-value {
  font-size: 12px;
}


.drawer-actions {
  display: flex;
  gap: 10px;

  margin-top: 18px;
}

.secondary-button {
  flex: 1;

  height: 42px;

  border: 1px solid #d7dee8;
  border-radius: 8px;

  background: white;

  color: #475467;

  font-weight: 600;

  cursor: pointer;
}

.secondary-button:hover {
  background: #f8fafc;
}

.drawer-actions .primary-button {
  flex: 1;
  width: auto;
  margin: 0;
  height: 42px;
}


.toast {
  position: fixed;

  right: 28px;
  bottom: 28px;

  z-index: 2000;

  padding: 12px 17px;

  border-radius: 9px;

  background: #182230;

  color: white;

  box-shadow: 0 8px 25px rgba(0,0,0,.15);

  font-size: 13px;
}



/* ======================================================
   PROJECT DETAIL
====================================================== */

.project-card {
  cursor: pointer;
}

.project-detail-drawer {
  width: 720px;
  max-width: 96vw;
  height: 100vh;

  background: white;

  box-shadow: -12px 0 35px rgba(27,45,68,.16);

  overflow-y: auto;
}

.project-tabs {
  display: flex;
  gap: 4px;

  padding: 0 22px;

  border-bottom: 1px solid var(--border);

  background: white;
}

.project-tab {
  height: 48px;

  padding: 0 16px;

  border: 0;
  border-bottom: 2px solid transparent;

  background: transparent;

  color: var(--text-secondary);

  font-size: 13px;

  cursor: pointer;
}

.project-tab:hover {
  color: var(--text);
}

.project-tab.active {
  color: var(--primary);

  border-bottom-color: var(--primary);

  font-weight: 600;
}


.project-tab-content {
  padding: 22px;
}


/* ======================================================
   TIMELINE
====================================================== */

.timeline {
  position: relative;

  padding-left: 24px;
}

.timeline::before {
  content: "";

  position: absolute;

  top: 6px;
  bottom: 6px;
  left: 7px;

  width: 1px;

  background: #dfe5ec;
}

.timeline-item {
  position: relative;

  padding: 0 0 24px 18px;
}

.timeline-item::before {
  content: "";

  position: absolute;

  left: -21px;
  top: 4px;

  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: var(--primary);

  border: 3px solid white;

  box-shadow: 0 0 0 1px #cdd7e2;
}

.timeline-time {
  margin-bottom: 4px;

  color: #98a2b3;

  font-size: 11px;
}

.timeline-title {
  font-size: 13px;
  font-weight: 620;
}

.timeline-note {
  margin-top: 6px;

  color: var(--text-secondary);

  font-size: 12px;

  line-height: 1.6;
}

.timeline-user {
  color: var(--primary);

  font-weight: 600;
}


/* ======================================================
   PROJECT BASIC INFO
====================================================== */

.basic-info-list {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;
}

.basic-info-card {
  padding: 14px;

  border-radius: 9px;

  background: #f8fafc;
}

.basic-info-label {
  margin-bottom: 6px;

  color: #98a2b3;

  font-size: 11px;
}

.basic-info-value {
  font-size: 13px;

  word-break: break-word;
}



/* ======================================================
   MODAL / CREATE FORMS
====================================================== */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  margin-bottom: 20px;
}

.toolbar-title {
  font-size: 14px;
  font-weight: 650;
}

.action-button {
  height: 38px;

  padding: 0 16px;

  border: none;
  border-radius: 8px;

  background: var(--primary);
  color: white;

  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
}

.action-button:hover {
  background: var(--primary-hover);
}


.modal-overlay {
  position: fixed;
  inset: 0;

  z-index: 3000;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 30px;

  background: rgba(16,34,55,.30);
}

.modal {
  width: 560px;
  max-width: 96vw;
  max-height: 90vh;

  overflow-y: auto;

  background: white;

  border-radius: 15px;

  box-shadow: 0 18px 55px rgba(24,34,48,.22);
}

.modal-header {
  min-height: 68px;

  padding: 17px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 17px;
  font-weight: 650;
}

.modal-subtitle {
  margin-top: 4px;

  font-size: 11px;
  color: var(--text-secondary);
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 16px 20px;

  display: flex;
  justify-content: flex-end;
  gap: 10px;

  border-top: 1px solid var(--border);

  background: #fbfcfd;
}


.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 14px;
}

.form-grid .full {
  grid-column: 1 / -1;
}

.form-help {
  margin-top: 5px;

  font-size: 11px;
  color: #98a2b3;
}

.button-cancel {
  height: 40px;

  padding: 0 17px;

  border: 1px solid var(--border);
  border-radius: 8px;

  background: white;
  color: #475467;

  cursor: pointer;
}

.button-confirm {
  height: 40px;

  padding: 0 18px;

  border: none;
  border-radius: 8px;

  background: var(--primary);
  color: white;

  font-weight: 600;

  cursor: pointer;
}

.button-confirm:disabled {
  opacity: .55;
  cursor: default;
}



/* ======================================================
   ADMIN CENTER
====================================================== */

.admin-tabs {
  display: flex;
  gap: 5px;

  margin-bottom: 20px;

  padding: 5px;

  background: white;

  border: 1px solid var(--border);
  border-radius: 10px;

  width: fit-content;
}

.admin-tab {
  height: 36px;

  padding: 0 15px;

  border: none;
  border-radius: 7px;

  background: transparent;

  color: var(--text-secondary);

  font-size: 12px;

  cursor: pointer;
}

.admin-tab:hover {
  background: #f5f7fa;
}

.admin-tab.active {
  background: var(--primary-light);

  color: var(--primary);

  font-weight: 650;
}


/* ======================================================
   ADMIN TABLE
====================================================== */

.admin-table {
  width: 100%;

  border-collapse: collapse;
}

.admin-table th {
  padding: 11px 12px;

  text-align: left;

  color: #7a8797;

  font-size: 11px;
  font-weight: 600;

  background: #fafbfd;

  border-bottom: 1px solid var(--border);
}

.admin-table td {
  padding: 14px 12px;

  font-size: 12px;

  border-bottom: 1px solid var(--border);
}

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

.admin-table tr:hover td {
  background: #fbfcfd;
}

.person-name {
  font-weight: 620;
  color: var(--text);
}

.person-account {
  margin-top: 3px;

  color: #98a2b3;

  font-size: 10px;
}


/* ======================================================
   NUMBER BADGES
====================================================== */

.number-badge {
  min-width: 28px;
  height: 25px;

  padding: 0 8px;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  border-radius: 7px;

  background: #f2f5f8;

  font-weight: 620;
}

.number-badge.danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.number-badge.warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.number-badge.success {
  background: var(--success-bg);
  color: var(--success);
}


/* ======================================================
   RISK
====================================================== */

.risk-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.risk-card {
  display: grid;

  grid-template-columns:
    minmax(250px, 1.5fr)
    minmax(120px, .7fr)
    minmax(130px, .7fr)
    minmax(170px, .9fr);

  gap: 18px;

  align-items: center;

  padding: 15px 16px;

  border: 1px solid var(--border);
  border-left: 4px solid #93a4b6;

  border-radius: 9px;

  background: white;

  cursor: pointer;
}

.risk-card.danger {
  border-left-color: var(--danger);
}

.risk-card.warning {
  border-left-color: #d59a3b;
}

.risk-card.info {
  border-left-color: #6688ac;
}

.risk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;

  margin-top: 6px;
}

.risk-tag {
  padding: 3px 7px;

  border-radius: 10px;

  background: #f2f5f8;

  color: #64748b;

  font-size: 10px;
}


/* ======================================================
   APPROVAL / PROCESS
====================================================== */

.management-card {
  padding: 16px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: white;

  margin-bottom: 10px;
}

.management-card-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 9px;
}

.management-card-title {
  font-size: 13px;
  font-weight: 650;
}

.management-card-meta {
  color: var(--text-secondary);
  font-size: 11px;
}

.management-card-note {
  padding: 10px 12px;

  margin-top: 10px;

  border-radius: 7px;

  background: #f8fafc;

  color: #566375;

  font-size: 12px;

  line-height: 1.6;
}

.inline-actions {
  display: flex;
  gap: 7px;

  margin-top: 12px;
}

.small-action {
  height: 32px;

  padding: 0 12px;

  border: 1px solid var(--border);
  border-radius: 7px;

  background: white;

  color: #475467;

  font-size: 11px;
  font-weight: 600;

  cursor: pointer;
}

.small-action:hover {
  background: #f7f9fb;
}

.small-action.primary {
  border-color: var(--primary);

  background: var(--primary);

  color: white;
}

.small-action.danger {
  border-color: #f1c4c4;

  color: var(--danger);

  background: #fffafa;
}


@media (max-width: 900px) {

  .admin-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .admin-tab {
    white-space: nowrap;
  }

  .risk-card {
    grid-template-columns: 1fr;
  }

}



/* ======================================================
   ADMIN COMMAND DASHBOARD
====================================================== */

.command-kpi-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(150px, 1fr));

  gap: 13px;

  margin-bottom: 22px;
}


.command-kpi-card {
  min-height: 118px;

  padding: 18px 19px;

  background: white;

  border: 1px solid var(--border);
  border-radius: 13px;
}


.command-kpi-card.danger {
  border-color: #f0cccc;

  background: #fffafa;
}


.command-kpi-card.warning {
  border-color: #eeddbb;

  background: #fffdf8;
}


.command-kpi-title {
  color: #667085;

  font-size: 12px;
}


.command-kpi-value {
  margin-top: 8px;

  font-size: 28px;
  font-weight: 680;
}


.command-kpi-note {
  margin-top: 6px;

  color: #98a2b3;

  font-size: 10px;
}



/* ======================================================
   KEY TASKS
====================================================== */

.command-task-list {
  display: flex;

  flex-direction: column;

  gap: 8px;
}


.command-task-row {
  display: grid;

  grid-template-columns:
    minmax(210px, 1.4fr)
    minmax(90px, .55fr)
    minmax(150px, .8fr)
    minmax(180px, 1fr)
    minmax(120px, .7fr);

  gap: 16px;

  align-items: center;

  padding: 14px 15px;

  border: 1px solid var(--border);

  border-radius: 9px;

  cursor: pointer;

  transition: .15s;
}


.command-task-row:hover {
  border-color: #c7d2df;

  background: #fbfcfe;
}



/* ======================================================
   LOWER DASHBOARD
====================================================== */

.command-two-column {
  display: grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(320px, .75fr);

  gap: 18px;
}



/* ======================================================
   TEAM LOAD
====================================================== */

.load-row {
  display: grid;

  grid-template-columns:
    125px
    minmax(100px, 1fr)
    50px;

  gap: 12px;

  align-items: center;

  min-height: 48px;

  border-bottom: 1px solid #f0f2f5;
}


.load-row:last-child {
  border-bottom: none;
}


.load-person {
  min-width: 0;
}


.load-bar-wrap {
  width: 100%;

  height: 7px;

  overflow: hidden;

  border-radius: 10px;

  background: #edf1f5;
}


.load-bar {
  height: 100%;

  min-width: 4px;

  border-radius: 10px;

  background: #5f7fa2;
}


.load-level {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  height: 24px;

  padding: 0 7px;

  border-radius: 7px;

  font-size: 10px;
}


.load-level.normal {
  background: #eef6f2;

  color: #39745e;
}


.load-level.warning {
  background: #fff5e8;

  color: #9a6824;
}


.load-level.danger {
  background: #fff0f0;

  color: #b84444;
}



/* ======================================================
   PROCESS OVERVIEW
====================================================== */

.process-overview-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 9px;

  margin-bottom: 15px;
}


.process-overview-card {
  padding: 15px 8px;

  text-align: center;

  background: #f8fafc;

  border-radius: 9px;
}


.process-overview-value {
  font-size: 22px;

  font-weight: 680;
}


.process-overview-label {
  margin-top: 5px;

  color: #7b8797;

  font-size: 10px;
}


.dashboard-process-warning {
  margin-top: 9px;

  padding: 10px 12px;

  border-radius: 8px;

  background: #fff8eb;

  color: #785b2b;

  font-size: 11px;

  line-height: 1.6;
}



@media (max-width: 1200px) {

  .command-kpi-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .command-two-column {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 850px) {

  .command-task-row {
    grid-template-columns: 1fr;
  }


  .process-overview-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}



/* ======================================================
   WEEKLY REPORT
====================================================== */

.weekly-toolbar {
  display: grid;

  grid-template-columns:
    180px 220px 1fr;

  gap: 14px;

  align-items: end;

  margin-bottom: 15px;
}


.weekly-toolbar-actions {
  display: flex;

  justify-content: flex-end;

  gap: 8px;
}


.weekly-period {
  margin-bottom: 18px;

  color: var(--text-secondary);

  font-size: 12px;
}


.weekly-company-summary {
  display: grid;

  grid-template-columns:
    repeat(5, 1fr);

  gap: 10px;

  margin-bottom: 18px;
}


.weekly-company-summary > div {
  padding: 15px;

  background: white;

  border: 1px solid var(--border);
  border-radius: 10px;
}


.weekly-company-summary span {
  display: block;

  color: var(--text-secondary);

  font-size: 11px;
}


.weekly-company-summary strong {
  display: block;

  margin-top: 6px;

  font-size: 22px;
}


.weekly-report-paper {
  background: white;

  border: 1px solid var(--border);

  border-radius: 12px;

  padding: 20px;
}


.weekly-person-details {
  border-bottom:
    1px solid var(--border);

  padding: 0 0 15px;

  margin-bottom: 15px;
}


.weekly-person-details:last-child {
  border-bottom: none;
}


.weekly-person-details summary {
  padding: 12px 0;

  cursor: pointer;

  font-weight: 650;
}


.weekly-person-report {
  padding: 5px 2px 18px;
}


.weekly-person-header {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding-bottom: 15px;

  border-bottom:
    1px solid var(--border);
}


.weekly-person-name {
  font-size: 18px;

  font-weight: 680;
}


.weekly-summary-inline {
  display: flex;

  gap: 8px;

  flex-wrap: wrap;
}


.weekly-summary-inline span {
  padding: 5px 8px;

  background: #f5f7fa;

  border-radius: 7px;

  color: #667085;

  font-size: 10px;
}


.weekly-section {
  margin-top: 22px;
}


.weekly-section-title {
  margin-bottom: 10px;

  font-size: 13px;

  font-weight: 680;
}


.weekly-section-title span {
  margin-left: 5px;

  color: #98a2b3;

  font-size: 10px;
}


.weekly-task-line,
.weekly-progress-line,
.weekly-risk-line {
  display: grid;

  grid-template-columns:
    minmax(220px, 1.4fr)
    minmax(100px, .6fr)
    minmax(180px, 1fr)
    70px;

  gap: 14px;

  align-items: center;

  min-height: 52px;

  padding: 8px 10px;

  border-bottom:
    1px solid #eef1f4;

  font-size: 11px;
}


.weekly-progress-line {
  grid-template-columns:
    minmax(250px, 1.5fr)
    minmax(130px, .7fr)
    minmax(120px, .6fr);
}


.weekly-risk-line {
  grid-template-columns:
    minmax(230px, 1.3fr)
    minmax(160px, .8fr)
    minmax(180px, 1fr);
}


.weekly-empty {
  padding: 15px;

  background: #fafbfd;

  border-radius: 7px;

  color: #98a2b3;

  font-size: 11px;
}


@media (max-width: 900px) {

  .weekly-toolbar {
    grid-template-columns: 1fr;
  }

  .weekly-toolbar-actions {
    justify-content: flex-start;
  }

  .weekly-company-summary {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .weekly-task-line,
  .weekly-progress-line,
  .weekly-risk-line {
    grid-template-columns: 1fr;
  }

}



/* ======================================================
   AI ASSISTANT
====================================================== */

.ai-assist-box {
  padding: 15px;

  margin-bottom: 20px;

  border: 1px solid #d9e2ed;
  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      #f7faff,
      #fbfcfe
    );
}


.ai-assist-header {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 15px;

  margin-bottom: 12px;
}


.ai-assist-title {
  font-size: 13px;

  font-weight: 680;
}


.ai-assist-subtitle {
  margin-top: 4px;

  color: #7b8797;

  font-size: 10px;
}


.ai-model-badge {
  padding: 4px 8px;

  border-radius: 8px;

  background: #eaf1fa;

  color: #355d89;

  font-size: 9px;

  font-weight: 650;
}


.ai-source-textarea {
  min-height: 90px !important;
}


.ai-assist-actions {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 10px;
}


.ai-human-check {
  color: #98a2b3;

  font-size: 9px;
}


.ai-result-box {
  margin-top: 12px;

  padding: 11px;

  border-radius: 8px;

  background: white;

  border: 1px solid #e4e9ef;
}


.ai-result-title {
  margin-bottom: 7px;

  font-size: 11px;

  font-weight: 680;
}


.ai-confidence {
  margin-left: 7px;

  padding: 3px 6px;

  border-radius: 7px;

  background: #eef5f1;

  color: #47725f;

  font-size: 9px;
}


.ai-warning-list {
  color: #866328;

  font-size: 10px;

  line-height: 1.8;
}


.ai-success-note {
  color: #527362;

  font-size: 10px;
}


.dashboard-ai-toolbar {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding: 13px 15px;

  margin-bottom: 14px;

  background: white;

  border: 1px solid var(--border);

  border-radius: 10px;
}


.ai-summary-modal {
  width: 760px;
}


.ai-management-result {
  margin-top: 18px;

  padding: 17px;

  border-radius: 10px;

  background: #f8fafc;

  border: 1px solid #e2e8f0;
}


.ai-summary-text {
  white-space: pre-wrap;

  margin-bottom: 15px;

  font-size: 12px;

  line-height: 1.8;

  color: #344054;
}


@media (max-width: 700px) {

  .dashboard-ai-toolbar {
    flex-direction: column;

    align-items: stretch;
  }

}



/* ======================================================
   AI FILLED FIELD
====================================================== */

.ai-filled-field {
  border-color: #9fb8d4 !important;

  background:
    linear-gradient(
      0deg,
      #f8fbff,
      #f8fbff
    ) !important;
}



/* ======================================================
   AI BATCH IMPORT
====================================================== */

.batch-ai-modal {
  width: min(1180px, 94vw);
  max-height: 92vh;
}


.batch-ai-modal .modal-body {
  overflow-y: auto;
}


.batch-source-textarea {
  min-height: 150px !important;
}


.batch-result-header {
  display: flex;

  justify-content: space-between;
  align-items: center;

  margin: 18px 0 10px;

  font-size: 12px;
}


.batch-candidate-card {
  padding: 16px;

  margin-bottom: 14px;

  border: 1px solid var(--border);
  border-radius: 11px;

  background: white;
}


.batch-candidate-card.batch-created {
  opacity: .55;

  border-color: #a9cfbd;

  background: #f7fbf9;
}


.batch-card-top {
  display: flex;

  justify-content: space-between;
  align-items: center;

  margin-bottom: 10px;
}


.batch-check-label {
  display: flex;

  align-items: center;

  gap: 7px;
}


.batch-source-fragment {
  padding: 8px 10px;

  margin-bottom: 13px;

  border-radius: 7px;

  background: #f7f9fc;

  color: #667085;

  font-size: 10px;

  line-height: 1.6;
}


.batch-form-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px 14px;
}


.batch-span-2 {
  grid-column: span 2;
}


.batch-warnings {
  padding-top: 10px;

  margin-top: 12px;

  border-top: 1px dashed #e1e6ec;
}


@media (max-width: 800px) {

  .batch-form-grid {
    grid-template-columns: 1fr;
  }

  .batch-span-2 {
    grid-column: span 1;
  }

}



/* ======================================================
   NOTIFICATION CENTER
====================================================== */

.notification-bell {
  position: fixed;

  top: 18px;
  right: 96px;

  z-index: 900;

  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border);
  border-radius: 9px;

  background: #fff;

  cursor: pointer;

  box-shadow:
    0 2px 8px
    rgba(20, 40, 70, .04);
}


.notification-bell:hover {
  background: #f8fafc;
}


.notification-bell-icon {
  font-size: 16px;
}


.notification-badge {
  position: absolute;

  top: -6px;
  right: -7px;

  min-width: 20px;
  height: 20px;

  padding: 0 5px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 2px solid white;
  border-radius: 20px;

  background: #d84e4e;

  color: #fff;

  font-size: 9px;
  font-weight: 700;
}


.notification-overlay {
  position: fixed;

  inset: 0;

  z-index: 1600;

  background:
    rgba(17, 28, 43, .20);
}


.notification-drawer {
  position: absolute;

  top: 0;
  right: 0;

  width: min(
    520px,
    95vw
  );

  height: 100%;

  display: flex;
  flex-direction: column;

  background: #f7f9fb;

  box-shadow:
    -12px 0 32px
    rgba(20, 40, 70, .13);
}


.notification-header {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  gap: 15px;

  padding: 20px;

  background: #fff;

  border-bottom:
    1px solid var(--border);
}


.notification-title {
  font-size: 17px;
  font-weight: 680;
}


.notification-subtitle {
  margin-top: 4px;

  color: #8b96a5;

  font-size: 10px;
}


.notification-header-actions {
  display: flex;

  gap: 7px;

  align-items: center;
}


.notification-summary {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 8px;

  padding: 13px 16px;

  background: #fff;

  border-bottom:
    1px solid var(--border);
}


.notification-summary > div {
  padding: 9px;

  text-align: center;

  border-radius: 8px;

  background: #f6f8fa;
}


.notification-summary span {
  display: block;

  color: #8792a1;

  font-size: 9px;
}


.notification-summary strong {
  display: block;

  margin-top: 4px;

  font-size: 17px;
}


.danger-text {
  color: #c74343;
}


.notification-filters {
  display: flex;

  gap: 5px;

  padding: 11px 16px 4px;
}


.notification-filter {
  padding: 6px 11px;

  border: 0;
  border-radius: 7px;

  background: transparent;

  color: #697586;

  font-size: 10px;

  cursor: pointer;
}


.notification-filter.active {
  background: #fff;

  color: #214b77;

  font-weight: 650;

  box-shadow:
    0 1px 5px
    rgba(30, 50, 75, .06);
}


.notification-list {
  flex: 1;

  overflow-y: auto;

  padding: 10px 16px 20px;
}


.notification-card {
  padding: 14px;

  margin-bottom: 10px;

  border: 1px solid var(--border);
  border-left: 4px solid #708aa5;
  border-radius: 9px;

  background: #fff;

  cursor: pointer;

  transition: .15s;
}


.notification-card:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 5px 14px
    rgba(30, 55, 80, .06);
}


.notification-card.danger {
  border-left-color:
    #d65353;
}


.notification-card.warning {
  border-left-color:
    #d39a3d;
}


.notification-card.info {
  border-left-color:
    #6485aa;
}


.notification-card-top {
  display: flex;

  justify-content: space-between;

  gap: 14px;
}


.notification-task-name {
  font-size: 12px;
  font-weight: 680;
}


.notification-project-name {
  margin-top: 3px;

  color: #8a96a5;

  font-size: 9px;
}


.notification-severity {
  padding: 4px 7px;

  border-radius: 7px;

  font-size: 9px;

  white-space: nowrap;
}


.notification-severity.danger {
  color: #ad3c3c;

  background: #fff0f0;
}


.notification-severity.warning {
  color: #966822;

  background: #fff5e7;
}


.notification-severity.info {
  color: #4f6f92;

  background: #edf3fa;
}


.notification-reasons {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 10px;
}


.notification-reasons span {
  padding: 4px 7px;

  border-radius: 6px;

  background: #f3f5f7;

  color: #596778;

  font-size: 9px;
}


.notification-info-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;

  margin-top: 12px;
}


.notification-info-grid span,
.notification-next-action span {
  display: block;

  margin-bottom: 3px;

  color: #98a2b3;

  font-size: 8px;
}


.notification-info-grid strong {
  font-size: 10px;

  font-weight: 600;
}


.notification-next-action {
  margin-top: 11px;

  padding: 9px 10px;

  border-radius: 7px;

  background: #f8fafc;

  color: #435167;

  font-size: 10px;

  line-height: 1.55;
}


.notification-updated {
  margin-top: 9px;

  color: #a0a8b3;

  font-size: 8px;
}


.notification-empty {
  padding: 70px 20px;

  text-align: center;

  color: #8c98a7;

  font-size: 11px;
}


.notification-empty-icon {
  width: 38px;
  height: 38px;

  margin:
    0 auto 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #edf6f1;

  color: #4b8168;

  font-size: 17px;
}


.notification-footer {
  padding: 12px 16px;

  border-top:
    1px solid var(--border);

  background: #fff;

  color: #98a2b3;

  font-size: 8px;
}


@media (max-width: 700px) {

  .notification-bell {
    right: 62px;
  }

  .notification-summary {
    grid-template-columns:
      repeat(2, 1fr);
  }

}



/* ======================================================
   TODAY CENTER
====================================================== */

#today-center-host {
  margin-bottom: 20px;
}


.today-panel {
  padding: 18px;

  background: white;

  border: 1px solid var(--border);

  border-radius: 12px;
}


.today-panel-header {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  gap: 18px;

  margin-bottom: 15px;
}


.today-kpi-grid {
  display: grid;

  grid-template-columns:
    repeat(6, minmax(100px, 1fr));

  gap: 9px;

  margin-bottom: 17px;
}


.today-kpi {
  padding: 12px 13px;

  border-radius: 9px;

  background: #f7f9fb;

  border: 1px solid transparent;
}


.today-kpi span {
  display: block;

  color: #7e8a99;

  font-size: 9px;
}


.today-kpi strong {
  display: block;

  margin-top: 5px;

  font-size: 20px;
}


.today-kpi.danger {
  background: #fff6f6;

  border-color: #f1d8d8;
}


.today-kpi.warning {
  background: #fffaf1;

  border-color: #efdfbd;
}


.today-kpi.success {
  background: #f4faf7;
}


.today-action-list {
  display: flex;

  flex-direction: column;

  gap: 7px;
}


.today-action-row {
  display: grid;

  grid-template-columns:
    65px
    minmax(180px, 1.2fr)
    110px
    minmax(130px, .8fr)
    minmax(170px, 1fr)
    120px;

  gap: 14px;

  align-items: center;

  padding: 12px;

  border: 1px solid #e8ecf1;
  border-left: 3px solid #7b92aa;

  border-radius: 8px;

  cursor: pointer;
}


.today-action-row:hover {
  background: #fafbfd;
}


.today-action-row.danger {
  border-left-color: #d55353;
}


.today-action-row.warning {
  border-left-color: #cf9640;
}


.today-priority-label {
  display: inline-flex;

  padding: 4px 7px;

  border-radius: 6px;

  font-size: 9px;

  background: #edf3f8;
}


.today-priority-label.danger {
  color: #a73c3c;

  background: #fff0f0;
}


.today-priority-label.warning {
  color: #8f6427;

  background: #fff5e8;
}


.today-task-name {
  font-size: 11px;

  font-weight: 650;
}


.today-project-name {
  margin-top: 3px;

  color: #929cab;

  font-size: 8px;
}


.today-column-label {
  margin-bottom: 3px;

  color: #98a2b3;

  font-size: 8px;
}


.today-reasons {
  display: flex;

  flex-wrap: wrap;

  gap: 4px;
}


.today-reasons span {
  padding: 3px 5px;

  border-radius: 5px;

  background: #f4f6f8;

  font-size: 8px;
}


.today-empty {
  padding: 35px;

  text-align: center;

  color: #8b96a5;

  font-size: 10px;
}


.today-empty-icon {
  margin-bottom: 5px;

  font-size: 20px;

  color: #58816c;
}


/* TEAM */

.today-process-warning {
  margin-bottom: 14px;

  padding: 10px 12px;

  background: #fff7e9;

  border-radius: 8px;

  color: #765623;

  font-size: 10px;
}


.today-team-table {
  border: 1px solid #e8ecf1;

  border-radius: 9px;

  overflow: hidden;
}


.today-team-head,
.today-team-row {
  display: grid;

  grid-template-columns:
    minmax(150px, 1.5fr)
    repeat(6, minmax(70px, .7fr));

  gap: 10px;

  align-items: center;

  padding: 11px 13px;
}


.today-team-head {
  background: #f6f8fa;

  color: #748091;

  font-size: 9px;
}


.today-team-row {
  min-height: 49px;

  border-top: 1px solid #eef1f4;

  font-size: 10px;
}


.today-team-row > div:first-child {
  display: flex;

  flex-direction: column;
}


.today-team-row strong {
  font-weight: 650;
}


.today-team-row span {
  margin-top: 2px;

  color: #98a2b3;

  font-size: 8px;
}


.warning-text {
  color: #a27026;

  font-weight: 650;
}


.success-text {
  color: #4e7f66;

  font-weight: 650;
}


@media (max-width: 1100px) {

  .today-kpi-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

  .today-action-row {
    grid-template-columns:
      60px
      minmax(180px, 1fr)
      100px
      minmax(150px, 1fr);
  }

  .today-action-row
  > div:nth-child(5),
  .today-action-row
  > div:nth-child(6) {
    display: none;
  }

}


@media (max-width: 760px) {

  .today-kpi-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .today-action-row {
    grid-template-columns: 1fr;
  }

  .today-priority {
    margin-bottom: -5px;
  }

  .today-team-table {
    overflow-x: auto;
  }

  .today-team-head,
  .today-team-row {
    min-width: 700px;
  }

}



/* ======================================================
   TODAY CENTER - ADMIN COMBINED VIEW
====================================================== */

#today-center-host
> .today-panel
+ .today-panel {
  margin-top: 14px;
}



/* ======================================================
   PERSONAL TODO NOTEBOOK
====================================================== */

#personal-todo-host {
  margin-bottom: 16px;
}


.todo-panel {
  padding: 18px;

  background: #fff;

  border: 1px solid var(--border);

  border-radius: 12px;
}


.todo-header {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;

  margin-bottom: 13px;
}


.todo-summary {
  display: flex;

  gap: 16px;

  padding-bottom: 12px;

  margin-bottom: 4px;

  border-bottom: 1px solid #eef1f4;

  color: #7c8796;

  font-size: 9px;
}


.todo-summary strong {
  margin-left: 3px;

  font-size: 12px;
}


.todo-summary-red strong {
  color: #bd4141;
}


.todo-summary-yellow strong {
  color: #a37324;
}


.todo-summary-green strong {
  color: #4d8065;
}


.todo-list {
  display: flex;

  flex-direction: column;
}


.todo-row {
  display: grid;

  grid-template-columns:
    32px
    minmax(250px, 1fr)
    155px
    30px;

  gap: 10px;

  align-items: center;

  min-height: 58px;

  padding: 8px 10px;

  border-bottom: 1px solid #f0f2f5;
}


.todo-row:last-child {
  border-bottom: 0;
}


.todo-row.todo-red {
  border-left: 4px solid #d95757;
}


.todo-row.todo-yellow {
  border-left: 4px solid #d4a13e;
}


.todo-row.todo-green {
  border-left: 4px solid #55906f;
}


.todo-row.todo-none {
  border-left: 4px solid #c0c7cf;
}


.todo-checkbox-wrap {
  display: flex;

  align-items: center;
  justify-content: center;
}


.todo-checkbox-wrap input {
  width: 17px;
  height: 17px;

  cursor: pointer;
}


.todo-main {
  cursor: pointer;
}


.todo-title {
  font-size: 11px;

  font-weight: 650;
}


.todo-note {
  margin-top: 3px;

  color: #8b96a4;

  font-size: 9px;

  line-height: 1.45;
}


.todo-due {
  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 4px;
}


.todo-due strong {
  font-size: 9px;

  font-weight: 550;

  color: #667385;
}


.todo-band {
  padding: 3px 6px;

  border-radius: 5px;

  font-size: 8px;
}


.todo-band.red {
  background: #fff0f0;
  color: #b53e3e;
}


.todo-band.yellow {
  background: #fff6e7;
  color: #96691f;
}


.todo-band.green {
  background: #edf7f1;
  color: #4e7e65;
}


.todo-band.none {
  background: #f1f3f5;
  color: #7b8490;
}


.todo-more {
  width: 26px;
  height: 26px;

  border: 0;

  border-radius: 6px;

  background: transparent;

  color: #8e99a7;

  cursor: pointer;
}


.todo-more:hover {
  background: #f3f5f7;
}


.todo-empty {
  padding: 30px;

  text-align: center;

  color: #8692a1;

  font-size: 10px;
}


/* Completed */

.todo-completed-section {
  margin-top: 8px;

  border-top: 1px solid #eef1f4;
}


.todo-completed-toggle {
  padding: 10px 0;

  border: 0;

  background: transparent;

  color: #7d8998;

  font-size: 9px;

  cursor: pointer;
}


.todo-row.completed {
  opacity: .58;

  grid-template-columns:
    32px
    minmax(250px, 1fr)
    180px;
}


.todo-row.completed
.todo-title {
  text-decoration: line-through;
}


.todo-completed-time {
  text-align: right;

  color: #929cab;

  font-size: 8px;
}


/* Modal */

.todo-modal {
  width: min(
    580px,
    92vw
  );
}


.todo-quick-date {
  display: flex;

  gap: 5px;

  margin-top: 7px;
}


.todo-quick-date button {
  padding: 5px 9px;

  border: 1px solid #dce3eb;
  border-radius: 6px;

  background: #fff;

  color: #58697c;

  font-size: 9px;

  cursor: pointer;
}


.todo-quick-date button:hover {
  background: #f5f8fb;
}


.todo-footer-spacer {
  flex: 1;
}


.todo-delete-button {
  color: #ad4848;
}


@media (max-width: 760px) {

  .todo-row {
    grid-template-columns:
      28px
      1fr
      28px;
  }

  .todo-due {
    grid-column:
      2 / 3;

    align-items: flex-start;
  }

}



/* ======================================================
   DASHBOARD KPI DRILLDOWN
====================================================== */

.dashboard-clickable-kpi {
  cursor: pointer;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}


.dashboard-clickable-kpi:hover {
  transform:
    translateY(-2px);

  border-color:
    #b8c8d9 !important;

  box-shadow:
    0 6px 18px
    rgba(26, 53, 82, .08);
}


/* ======================================================
   ACTIVE TASK DRAWER
====================================================== */

.dashboard-drilldown-overlay {
  position: fixed;

  inset: 0;

  z-index: 1700;

  background:
    rgba(16, 27, 42, .22);
}


.dashboard-drilldown-drawer {
  position: absolute;

  top: 0;
  right: 0;

  width: min(
    880px,
    96vw
  );

  height: 100%;

  display: flex;
  flex-direction: column;

  background: #f7f9fb;

  box-shadow:
    -14px 0 36px
    rgba(20, 40, 70, .14);
}


.dashboard-drilldown-header {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  padding: 20px 22px;

  background: #fff;

  border-bottom:
    1px solid var(--border);
}


.dashboard-drilldown-title {
  font-size: 18px;

  font-weight: 680;
}


.dashboard-drilldown-subtitle {
  margin-top: 4px;

  color: #8995a5;

  font-size: 10px;
}


.dashboard-drilldown-summary {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 9px;

  padding: 14px 18px;

  background: #fff;

  border-bottom:
    1px solid var(--border);
}


.dashboard-drilldown-summary > div {
  padding: 10px 12px;

  border-radius: 8px;

  background: #f6f8fa;
}


.dashboard-drilldown-summary span {
  display: block;

  color: #8893a1;

  font-size: 9px;
}


.dashboard-drilldown-summary strong {
  display: block;

  margin-top: 4px;

  font-size: 18px;
}


.dashboard-drilldown-list {
  flex: 1;

  overflow-y: auto;

  padding: 15px 18px 30px;
}


.dashboard-task-row {
  display: grid;

  grid-template-columns:
    minmax(160px, 1.25fr)
    100px
    110px
    minmax(180px, 1.2fr)
    105px
    20px;

  gap: 13px;

  align-items: center;

  min-height: 73px;

  padding: 12px 13px;

  margin-bottom: 8px;

  border: 1px solid #e5eaf0;
  border-left: 4px solid #7d93aa;
  border-radius: 9px;

  background: #fff;

  cursor: pointer;

  transition: .15s ease;
}


.dashboard-task-row:hover {
  transform:
    translateY(-1px);

  border-color: #cbd6e2;

  box-shadow:
    0 4px 12px
    rgba(30, 50, 80, .05);
}


.dashboard-task-row.overdue {
  border-left-color:
    #d75454;
}


.dashboard-task-row.today {
  border-left-color:
    #d39a3e;
}


.dashboard-task-row.future {
  border-left-color:
    #6284a8;
}


.dashboard-task-main {
  min-width: 0;
}


.dashboard-task-name {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 11px;

  font-weight: 680;
}


.dashboard-task-project {
  margin-top: 4px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: #929dac;

  font-size: 8px;
}


.dashboard-task-label {
  display: block;

  margin-bottom: 3px;

  color: #9aa4b1;

  font-size: 8px;
}


.dashboard-task-row strong {
  font-size: 9px;

  font-weight: 600;
}


.dashboard-task-next {
  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  color: #4e5c6e;

  font-size: 9px;

  line-height: 1.45;
}


.dashboard-task-due {
  text-align: right;
}


.dashboard-task-due strong {
  display: block;

  margin-top: 4px;
}


.dashboard-task-risk {
  display: inline-flex;

  padding: 3px 6px;

  border-radius: 5px;

  font-size: 8px;
}


.dashboard-task-risk.overdue {
  color: #ad4040;

  background: #fff0f0;
}


.dashboard-task-risk.today {
  color: #936522;

  background: #fff5e7;
}


.dashboard-task-risk.future {
  color: #4c7097;

  background: #edf3fa;
}


.dashboard-task-risk.none {
  color: #78838f;

  background: #f1f3f5;
}


.dashboard-task-arrow {
  color: #9aa5b1;

  font-size: 20px;

  text-align: right;
}


.dashboard-drilldown-empty {
  padding: 80px 20px;

  text-align: center;

  color: #8793a1;

  font-size: 11px;
}


@media (max-width: 900px) {

  .dashboard-task-row {
    grid-template-columns:
      1fr 90px 90px;
  }


  .dashboard-task-row
  > div:nth-child(3),
  .dashboard-task-row
  > div:nth-child(4) {
    display: none;
  }


  .dashboard-drilldown-summary {
    grid-template-columns:
      repeat(2, 1fr);
  }

}



/* ======================================================
   DASHBOARD KPI INDEPENDENT DRILLDOWN
====================================================== */

.dashboard-kpi-independent-clickable {
  cursor: pointer;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}


.dashboard-kpi-independent-clickable:hover {
  transform:
    translateY(-2px);

  border-color:
    #b9c9da !important;

  box-shadow:
    0 6px 18px
    rgba(25, 50, 80, .08);
}


.dashboard-approval-row {
  display: grid;

  grid-template-columns:
    minmax(160px, 1fr)
    minmax(220px, 1.4fr)
    120px
    20px;

  gap: 16px;

  align-items: center;

  min-height: 70px;

  padding: 13px 14px;

  margin-bottom: 8px;

  border: 1px solid #e5eaf0;
  border-left: 4px solid #d39a3e;
  border-radius: 9px;

  background: #fff;

  cursor: pointer;
}


.dashboard-approval-row:hover {
  border-color: #cbd6e2;

  box-shadow:
    0 4px 12px
    rgba(30, 50, 80, .05);
}


.dashboard-approval-row
> div:first-child {
  display: flex;

  flex-direction: column;
}


.dashboard-approval-row
> div:first-child strong {
  font-size: 11px;
}


.dashboard-approval-row
> div:first-child span {
  margin-top: 3px;

  color: #909baa;

  font-size: 8px;
}


.dashboard-approval-fallback {
  padding: 70px 20px;

  text-align: center;

  color: #7d8998;

  font-size: 10px;
}


.dashboard-approval-fallback button {
  margin-top: 14px;
}



/* ======================================================
   TEAM WORKLOAD INDEPENDENT DRILLDOWN
====================================================== */

.team-workload-independent-clickable {
  cursor: pointer;

  border-radius: 7px;

  transition:
    background .15s ease,
    transform .15s ease;
}


.team-workload-independent-clickable:hover {
  background: #f5f8fb;

  transform:
    translateX(2px);
}


.team-drilldown-filters {
  display: flex;

  gap: 6px;

  padding: 11px 18px 3px;

  background: #f7f9fb;
}


.team-drilldown-filter {
  padding: 6px 11px;

  border: 1px solid transparent;

  border-radius: 7px;

  background: transparent;

  color: #677486;

  font-size: 9px;

  cursor: pointer;
}


.team-drilldown-filter:hover {
  background: #fff;
}


.team-drilldown-filter.active {
  border-color: #dce4ec;

  background: #fff;

  color: #244f7b;

  font-weight: 650;
}


.team-drilldown-task {
  display: grid;

  grid-template-columns:
    minmax(180px, 1.1fr)
    110px
    minmax(220px, 1.3fr)
    115px
    20px;

  gap: 14px;

  align-items: center;

  min-height: 72px;

  padding: 12px 13px;

  margin-bottom: 8px;

  border: 1px solid #e5eaf0;

  border-left: 4px solid #6685a7;

  border-radius: 9px;

  background: #fff;

  cursor: pointer;

  transition: .15s;
}


.team-drilldown-task:hover {
  transform: translateY(-1px);

  border-color: #c9d5e1;

  box-shadow:
    0 4px 12px
    rgba(30, 50, 80, .05);
}


.team-drilldown-task.overdue {
  border-left-color: #d65555;
}


.team-drilldown-task.today {
  border-left-color: #d39a3d;
}


.team-drilldown-task-main {
  min-width: 0;
}


.team-drilldown-task-name {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 11px;

  font-weight: 680;
}


.team-drilldown-project {
  margin-top: 4px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: #929dac;

  font-size: 8px;
}


.team-drilldown-label {
  display: block;

  margin-bottom: 3px;

  color: #98a2b3;

  font-size: 8px;
}


.team-drilldown-task strong {
  font-size: 9px;

  font-weight: 600;
}


.team-drilldown-next {
  overflow: hidden;

  display: -webkit-box;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  color: #4e5c6e;

  font-size: 9px;

  line-height: 1.45;
}


.team-drilldown-due {
  text-align: right;
}


.team-drilldown-due strong {
  display: block;

  margin-top: 4px;
}


.team-drilldown-due-badge {
  display: inline-flex;

  padding: 3px 6px;

  border-radius: 5px;

  background: #edf3fa;

  color: #4f7092;

  font-size: 8px;
}


.team-drilldown-due-badge.overdue {
  background: #fff0f0;

  color: #ae4141;
}


.team-drilldown-due-badge.today {
  background: #fff5e7;

  color: #956722;
}


.team-drilldown-due-badge.none {
  background: #f1f3f5;

  color: #7e8995;
}


.team-drilldown-arrow {
  text-align: right;

  color: #9aa5b1;

  font-size: 20px;
}


@media (max-width: 900px) {

  .team-drilldown-task {
    grid-template-columns:
      1fr
      100px
      20px;
  }


  .team-drilldown-task
  > div:nth-child(2),
  .team-drilldown-task
  > div:nth-child(3) {
    display: none;
  }

}



/* ======================================================
   TASK EDITOR V2
====================================================== */

.task-editor-v2-panel {
  margin: 18px 0;

  padding: 16px 0;

  border-top:
    1px solid #e7ebf0;

  border-bottom:
    1px solid #e7ebf0;
}


.task-editor-v2-heading {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  margin-bottom: 12px;
}


.task-editor-v2-title {
  font-size: 11px;

  font-weight: 700;

  color: #1c2d40;
}


.task-editor-v2-subtitle {
  margin-top: 2px;

  font-size: 8px;

  color: #8a96a5;
}


.task-editor-v2-info-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 9px;

  margin-bottom: 13px;
}


.task-editor-v2-info {
  padding: 10px 11px;

  border-radius: 8px;

  background: #f7f9fb;
}


.task-editor-v2-info span {
  display: block;

  margin-bottom: 4px;

  color: #8995a4;

  font-size: 8px;
}


.task-editor-v2-info strong {
  display: block;

  color: #253548;

  font-size: 10px;

  font-weight: 650;
}


.task-editor-v2-field {
  margin-bottom: 12px;
}


.task-editor-v2-field label {
  display: block;

  margin-bottom: 6px;

  color: #586779;

  font-size: 9px;

  font-weight: 600;
}


.task-editor-v2-field input,
.task-editor-v2-field select,
.task-editor-v2-field textarea {
  width: 100%;

  box-sizing: border-box;

  border: 1px solid #d9e1e9;

  border-radius: 7px;

  background: #fff;

  color: #26384a;

  font-size: 10px;

  outline: none;
}


.task-editor-v2-field input,
.task-editor-v2-field select {
  height: 38px;

  padding: 0 10px;
}


.task-editor-v2-field textarea {
  min-height: 72px;

  padding: 9px 10px;

  resize: vertical;
}


.task-editor-v2-field input:focus,
.task-editor-v2-field select:focus,
.task-editor-v2-field textarea:focus {
  border-color: #7392b4;

  box-shadow:
    0 0 0 2px
    rgba(60, 100, 145, .08);
}


.task-editor-v2-save {
  width: 100%;

  height: 40px;

  margin-top: 3px;

  border: 0;

  border-radius: 7px;

  background: #183f69;

  color: #fff;

  font-size: 10px;

  font-weight: 650;

  cursor: pointer;
}


.task-editor-v2-save:hover {
  background: #13375e;
}


.task-editor-v2-save:disabled {
  opacity: .65;

  cursor: wait;
}


.task-editor-v2-readonly {
  padding: 9px 11px;

  border-radius: 7px;

  background: #f5f7f9;

  color: #7f8995;

  font-size: 9px;
}


.task-editor-v2-panel
.hidden {
  display: none;
}



/* ======================================================
   TASK DETAIL LEGACY STATUS CLEANUP
====================================================== */

.task-legacy-status-editor-hidden {
  display: none !important;
}



/* ======================================================
   TASK DETAIL LAYOUT V4
====================================================== */


/*
 * 原状态字段仅隐藏视觉，
 * 控件仍保留供旧后台确认逻辑读取。
 */
.task-v4-hidden-original-status {
  display: none !important;
}


/*
 * 原“下一步动作”textarea
 * 同样保留DOM但视觉隐藏。
 */
.task-v4-hidden-original-action {
  display: none !important;
}


.task-v4-next-action-field {
  margin-top: 14px;
  margin-bottom: 15px;
}


.task-v4-label {
  display: block;

  margin-bottom: 7px;

  color: #556577;

  font-size: 9px;

  font-weight: 600;
}


.task-v4-control {
  width: 100%;

  box-sizing: border-box;

  border: 1px solid #d8e0e9;

  border-radius: 7px;

  background: #fff;

  color: #26384a;

  font-size: 10px;

  outline: none;
}


select.task-v4-control {
  height: 39px;

  padding: 0 10px;
}


textarea.task-v4-control {
  min-height: 72px;

  margin-top: 9px;

  padding: 9px 10px;

  resize: vertical;
}


.task-v4-control:focus {
  border-color: #6d8eaf;

  box-shadow:
    0 0 0 2px
    rgba(50, 90, 130, .08);
}


.task-v4-custom-action-wrap.hidden {
  display: none;
}



/* ======================================================
   FINAL TASK EXECUTION V5
====================================================== */

.task-execution-v5-panel {
  padding: 18px 0;

  border-top:
    1px solid #e5eaf0;

  border-bottom:
    1px solid #e5eaf0;
}


.task-v5-heading {
  margin-bottom: 14px;

  color: #23364a;

  font-size: 12px;

  font-weight: 700;
}


.task-v5-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;
}


.task-v5-field {
  margin-bottom: 13px;
}


.task-v5-field label {
  display: block;

  margin-bottom: 6px;

  color: #536477;

  font-size: 9px;

  font-weight: 600;
}


.task-v5-field select,
.task-v5-field input,
.task-v5-field textarea {
  width: 100%;

  box-sizing: border-box;

  border:
    1px solid #d7e0e9;

  border-radius: 7px;

  background: #fff;

  color: #26394c;

  outline: none;

  font-size: 10px;
}


.task-v5-field select,
.task-v5-field input {
  height: 40px;

  padding:
    0 10px;
}


.task-v5-field textarea {
  min-height: 76px;

  padding:
    10px;

  resize: vertical;
}


.task-v5-field select:focus,
.task-v5-field input:focus,
.task-v5-field textarea:focus {
  border-color:
    #6289ae;

  box-shadow:
    0 0 0 2px
    rgba(50, 90, 135, .08);
}


.task-v5-readonly {
  min-height: 40px;

  display: flex;

  align-items: center;

  box-sizing: border-box;

  padding:
    0 11px;

  border-radius:
    7px;

  background:
    #f5f7f9;

  color:
    #536274;

  font-size:
    10px;
}


.task-v5-manual.hidden {
  display: none;
}


.task-v5-confirm {
  width: 100%;

  height: 42px;

  border: 0;

  border-radius: 7px;

  background:
    #173f6b;

  color: #fff;

  font-size:
    10px;

  font-weight:
    650;

  cursor:
    pointer;
}


.task-v5-confirm:hover {
  background:
    #12375f;
}


.task-v5-confirm:disabled {
  opacity: .62;

  cursor:
    wait;
}


.task-v5-permission-note {
  margin-top: 10px;

  padding:
    9px 10px;

  border-radius:
    7px;

  background:
    #f5f7f9;

  color:
    #7e8997;

  font-size:
    9px;
}



/* ======================================================
   GLOBAL HOUR TIME PICKER
====================================================== */

.reehor-native-datetime-hidden {
  display: none !important;
}


.reehor-hour-picker {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(150px, 1fr)
    105px
    72px;

  gap: 7px;

  align-items: center;
}


.reehor-hour-picker-date,
.reehor-hour-picker-hour {
  width: 100%;

  height: 39px;

  box-sizing: border-box;

  border:
    1px solid #d7e0e9;

  border-radius:
    7px;

  background:
    #fff;

  color:
    #26394c;

  font-size:
    10px;

  outline:
    none;
}


.reehor-hour-picker-date {
  padding:
    0 9px;
}


.reehor-hour-picker-hour {
  padding:
    0 9px;
}


.reehor-hour-picker-date:focus,
.reehor-hour-picker-hour:focus {
  border-color:
    #6289ae;

  box-shadow:
    0 0 0 2px
    rgba(
      50,
      90,
      135,
      .08
    );
}


.reehor-hour-picker-confirm {
  height: 39px;

  border: 0;

  border-radius:
    7px;

  background:
    #173f6b;

  color:
    #fff;

  font-size:
    10px;

  font-weight:
    650;

  cursor:
    pointer;

  transition:
    background .15s ease;
}


.reehor-hour-picker-confirm:hover {
  background:
    #12375f;
}


.reehor-hour-picker-confirm.confirmed {
  background:
    #39785a;
}


.reehor-hour-picker-confirm:disabled,
.reehor-hour-picker-date:disabled,
.reehor-hour-picker-hour:disabled {
  cursor:
    not-allowed;

  opacity:
    .6;
}


.reehor-hour-picker-date:disabled,
.reehor-hour-picker-hour:disabled {
  background:
    #f4f6f8;
}


@media (
  max-width: 700px
) {

  .reehor-hour-picker {
    grid-template-columns:
      1fr
      90px;
  }


  .reehor-hour-picker-confirm {
    grid-column:
      1 / -1;
  }

}



/* ======================================================
   TASK EXECUTION V6 FINAL
====================================================== */

.task-v6-legacy-hidden {
  display: none !important;
}


.task-execution-v6-panel {
  padding: 18px 0;

  border-top:
    1px solid #e5eaf0;

  border-bottom:
    1px solid #e5eaf0;
}


.task-v6-title {
  margin-bottom: 14px;

  color: #23364a;

  font-size: 12px;

  font-weight: 700;
}


.task-v6-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;
}


.task-v6-field {
  margin-bottom: 13px;
}


.task-v6-field label {
  display: block;

  margin-bottom: 6px;

  color: #536477;

  font-size: 9px;

  font-weight: 600;
}


.task-v6-field select,
.task-v6-field input,
.task-v6-field textarea {
  width: 100%;

  box-sizing: border-box;

  border:
    1px solid #d7e0e9;

  border-radius: 7px;

  background: #fff;

  color: #26394c;

  font-size: 10px;

  outline: none;
}


.task-v6-field select,
.task-v6-field input {
  height: 40px;

  padding: 0 10px;
}


.task-v6-field textarea {
  min-height: 76px;

  padding: 10px;

  resize: vertical;
}


.task-v6-readonly {
  min-height: 40px;

  display: flex;

  align-items: center;

  padding: 0 11px;

  box-sizing: border-box;

  border-radius: 7px;

  background: #f5f7f9;

  color: #536274;

  font-size: 10px;
}


.task-v6-field.hidden {
  display: none;
}


.task-v6-confirm {
  width: 100%;

  height: 42px;

  border: 0;

  border-radius: 7px;

  background: #173f6b;

  color: #fff;

  font-size: 10px;

  font-weight: 650;

  cursor: pointer;
}


.task-v6-confirm:hover {
  background: #12375f;
}


.task-v6-confirm:disabled {
  opacity: .6;

  cursor: not-allowed;
}


.task-v6-readonly-note {
  margin-top: 9px;

  padding: 9px 10px;

  border-radius: 7px;

  background: #f5f7f9;

  color: #7f8a97;

  font-size: 9px;
}



/* ======================================================
   FINAL TASK ACTIONS
====================================================== */

.task-actions-final-panel {
  margin: 16px 0;
  padding: 16px 0;

  border-top:
    1px solid #e3e9ef;

  border-bottom:
    1px solid #e3e9ef;
}


.task-actions-final-title {
  margin-bottom: 11px;

  color: #24384c;

  font-size: 11px;

  font-weight: 700;
}


.task-actions-final-buttons {
  display: grid;

  grid-template-columns:
    minmax(0,1fr) 110px;

  gap: 8px;
}


.task-actions-complete,
.task-actions-primary-full {
  min-height: 40px;

  border: 0;

  border-radius: 7px;

  background: #173f6b;

  color: #fff;

  font-size: 10px;

  font-weight: 650;

  cursor: pointer;
}


.task-actions-primary-full {
  width: 100%;
}


.task-actions-delete {
  min-height: 40px;

  border:
    1px solid #d8b3b3;

  border-radius: 7px;

  background: #fff;

  color: #a44343;

  font-size: 10px;

  cursor: pointer;
}


.task-actions-final-state {
  padding: 10px 12px;

  border-radius: 7px;

  font-size: 11px;

  font-weight: 700;
}


.task-actions-final-state.completed {
  background: #edf7f1;

  color: #387157;
}


.task-actions-final-state.deleted {
  background: #f8eded;

  color: #a44747;
}


.task-actions-final-meta {
  margin: 8px 0 12px;

  color: #788596;

  font-size: 9px;
}


.task-actions-final-modal-overlay {
  position: fixed;

  inset: 0;

  z-index: 10000;

  display: flex;

  justify-content: center;

  align-items: center;

  background:
    rgba(17,30,45,.35);
}


.task-actions-final-modal {
  width: min(
    430px,
    calc(100vw - 30px)
  );

  box-sizing: border-box;

  padding: 21px;

  border-radius: 11px;

  background: #fff;
}


.task-actions-final-modal h3 {
  margin: 0;

  color: #20354a;

  font-size: 15px;
}


.task-actions-final-modal h3.danger {
  color: #a44141;
}


.task-actions-final-name {
  margin-top: 10px;

  padding: 10px 12px;

  border-radius: 7px;

  background: #f5f7f9;

  font-size: 10px;

  font-weight: 650;
}


.task-actions-final-modal p {
  color: #758395;

  font-size: 9px;

  line-height: 1.6;
}


.task-actions-final-modal label {
  display: block;

  margin: 13px 0 6px;

  font-size: 9px;

  font-weight: 600;
}


.task-actions-final-modal textarea {
  width: 100%;

  min-height: 90px;

  box-sizing: border-box;

  padding: 10px;

  border:
    1px solid #d7e0e9;

  border-radius: 7px;

  resize: vertical;
}


.task-actions-final-modal-buttons {
  display: flex;

  justify-content: flex-end;

  gap: 8px;

  margin-top: 18px;
}


.task-actions-final-modal-buttons button {
  min-width: 90px;

  min-height: 37px;

  border:
    1px solid #d7dfe7;

  border-radius: 7px;

  background: #fff;

  cursor: pointer;
}


.task-actions-final-modal-buttons .primary {
  border: 0;

  background: #173f6b;

  color: #fff;
}


.task-actions-final-modal-buttons .danger-button {
  border: 0;

  background: #a74444;

  color: #fff;
}



/* ======================================================
   FINAL PROJECT ACTIONS
====================================================== */

.project-actions-final-panel {
  margin: 18px 0 8px;

  padding: 16px 0;

  border-top:
    1px solid #e3e9ef;
}


.project-actions-title {
  margin-bottom: 11px;

  color: #24384c;

  font-size: 11px;

  font-weight: 700;
}


.project-actions-button-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    110px;

  gap: 8px;
}


.project-actions-complete {
  min-height: 40px;

  border: 0;

  border-radius: 7px;

  background: #173f6b;

  color: #fff;

  font-size: 10px;

  font-weight: 650;

  cursor: pointer;
}


.project-actions-complete:disabled {
  background: #9aaabd;

  cursor: not-allowed;
}


.project-actions-delete,
.project-actions-delete-full {
  min-height: 40px;

  border:
    1px solid #d8b3b3;

  border-radius: 7px;

  background: #fff;

  color: #a44343;

  font-size: 10px;

  cursor: pointer;
}


.project-actions-delete-full {
  width: 100%;

  margin-top: 10px;
}


.project-actions-note {
  margin-top: 8px;

  padding: 8px 10px;

  border-radius: 6px;

  background: #f5f7f9;

  color: #7b8795;

  font-size: 9px;
}


.project-actions-state {
  padding: 10px 12px;

  border-radius: 7px;

  font-size: 11px;

  font-weight: 700;
}


.project-actions-state.completed {
  background: #edf7f1;

  color: #387157;
}


.project-actions-state.deleted {
  background: #f8eded;

  color: #a44747;
}


/* modal */

.project-actions-final-modal-overlay {
  position: fixed;

  inset: 0;

  z-index: 10000;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    rgba(17, 30, 45, .35);
}


.project-actions-final-modal {
  width: min(
    440px,
    calc(100vw - 30px)
  );

  box-sizing: border-box;

  padding: 21px;

  border-radius: 11px;

  background: #fff;
}


.project-actions-modal-title {
  color: #20354a;

  font-size: 15px;

  font-weight: 700;
}


.project-actions-modal-title.danger {
  color: #a44141;
}


.project-actions-project-name {
  margin-top: 10px;

  padding: 10px 12px;

  border-radius: 7px;

  background: #f5f7f9;

  font-size: 10px;

  font-weight: 650;
}


.project-actions-help,
.project-actions-warning {
  margin-top: 12px;

  color: #758395;

  font-size: 9px;

  line-height: 1.65;
}


.project-actions-warning {
  color: #995050;
}


.project-actions-task-list {
  margin: 10px 0 0;

  padding-left: 20px;

  color: #59697b;

  font-size: 9px;

  line-height: 1.8;
}


.project-actions-modal-buttons {
  display: flex;

  justify-content: flex-end;

  gap: 8px;

  margin-top: 18px;
}


.project-actions-modal-buttons button {
  min-width: 90px;

  min-height: 37px;

  border:
    1px solid #d7dfe7;

  border-radius: 7px;

  background: #fff;

  cursor: pointer;
}


.project-actions-modal-buttons .primary {
  border: 0;

  background: #173f6b;

  color: #fff;
}


.project-actions-modal-buttons .danger-button {
  border: 0;

  background: #a74444;

  color: #fff;
}