style(web): update travel views styles

web/src/assets/styles/views/travel-reimbursement-create-view.css

@@ -24,6 +24,7 @@
   --assistant-scale: min(1, var(--assistant-fit-scale-width), var(--assistant-fit-scale-height));
   width: calc(var(--assistant-base-width-px) * var(--assistant-scale));
   height: calc(var(--assistant-base-height-px) * var(--assistant-scale));
+  position: relative;
   display: block;
   background: transparent;
   box-shadow: none;
@@ -63,7 +64,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  padding: 22px 26px 18px;
+  padding: 22px 172px 18px 26px;
   border-bottom: 1px solid rgba(203, 213, 225, 0.78);
   background: linear-gradient(180deg, rgba(247, 250, 249, 0.82) 0%, rgba(240, 246, 244, 0.7) 100%);
 }
@@ -110,20 +111,25 @@
 }
 
 .assistant-header-actions {
+  position: absolute;
+  top: calc(22px * var(--assistant-scale));
+  right: calc(26px * var(--assistant-scale));
+  z-index: 40;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: calc(10px * var(--assistant-scale));
+  pointer-events: auto;
 }
 
 .assistant-toggle-btn,
 .session-trash-btn {
-  width: 38px;
+  width: calc(38px * var(--assistant-scale));
-  height: 38px;
+  height: calc(38px * var(--assistant-scale));
   display: grid;
   place-items: center;
   padding: 0;
   border: 1px solid rgba(248, 113, 113, 0.28);
-  border-radius: 14px;
+  border-radius: calc(14px * var(--assistant-scale));
   flex: none;
 }
 
@@ -131,7 +137,7 @@
   border-color: rgba(16, 185, 129, 0.18);
   background: rgba(245, 252, 249, 0.96);
   color: #166534;
-  font-size: 16px;
+  font-size: calc(16px * var(--assistant-scale));
   box-shadow: 0 8px 18px rgba(16, 185, 129, 0.1);
 }
 
@@ -150,7 +156,7 @@
 .session-trash-btn {
   background: rgba(254, 242, 242, 0.96);
   color: #dc2626;
-  font-size: 16px;
+  font-size: calc(16px * var(--assistant-scale));
   box-shadow: 0 8px 18px rgba(239, 68, 68, 0.12);
 }
 
@@ -165,17 +171,41 @@
   box-shadow: none;
 }
 
+.assistant-close-btn,
 .close-btn {
-  width: 38px;
+  position: relative;
-  height: 38px;
+  width: calc(38px * var(--assistant-scale));
+  height: calc(38px * var(--assistant-scale));
   display: grid;
   place-items: center;
+  padding: 0;
+  flex: none;
   border: 1px solid rgba(193, 204, 216, 0.92);
-  border-radius: 14px;
+  border-radius: calc(14px * var(--assistant-scale));
   background: rgba(248, 251, 251, 0.94);
   color: #475569;
-  font-size: 16px;
+  font-size: calc(16px * var(--assistant-scale));
   box-shadow: 0 8px 18px rgba(148, 163, 184, 0.18);
+  cursor: pointer;
+  pointer-events: auto;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.assistant-close-btn {
+  z-index: 30;
+  pointer-events: auto;
+}
+
+.assistant-close-btn i {
+  pointer-events: none;
+}
+
+.assistant-close-btn:hover,
+.close-btn:hover {
+  background: rgba(241, 245, 249, 0.98);
+  border-color: rgba(148, 163, 184, 0.34);
+  color: #0f172a;
 }
 
 .assistant-layout {
@@ -3291,15 +3321,21 @@
   }
 
   .assistant-header-actions {
-    width: 100%;
+    top: 18px;
+    right: 18px;
+    gap: 10px;
+    width: auto;
     justify-content: space-between;
   }
 
   .assistant-toggle-btn,
   .session-trash-btn,
-  .assistant-header-actions .close-btn {
+  .assistant-close-btn,
+  .close-btn {
     width: 40px;
     height: 40px;
+    border-radius: 14px;
+    font-size: 16px;
   }
 
   .assistant-layout {

web/src/assets/styles/views/travel-request-detail-view.css

@@ -32,270 +32,189 @@
 
 .detail-hero {
   display: grid;
-  gap: 14px;
+  gap: 10px;
-  padding: 18px 22px 20px;
+  padding: 18px 24px 18px;
+  border: 1px solid #edf2f7;
+  background:
+    radial-gradient(circle at 100% 100%, rgba(45, 212, 191, .18), transparent 18%),
+    radial-gradient(circle at 92% 92%, rgba(125, 211, 252, .14), transparent 24%),
+    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
+  overflow: visible;
 }
 
-.hero-topline {
+.progress-card {
+  padding: 18px 22px 20px;
+  border: 1px solid #edf2f7;
+  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
+}
+
+.hero-banner {
   display: grid;
-  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.12fr);
+  gap: 0;
-  gap: 18px;
+}
+
+.hero-banner-main {
+  display: grid;
+  grid-template-columns: minmax(260px, 1.1fr) minmax(0, 2fr);
   align-items: center;
-  padding-bottom: 14px;
+  gap: 16px;
-  border-bottom: 1px solid #e5eaf0;
+  min-height: 104px;
 }
 
 .applicant-card {
   display: grid;
-  grid-template-columns: 48px minmax(0, 1fr);
+  grid-template-columns: 88px minmax(0, 1fr);
-  align-items: start;
+  align-items: center;
-  gap: 12px;
+  gap: 18px;
   min-width: 0;
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
 }
 
 .portrait {
-  width: 44px;
+  width: 88px;
-  height: 44px;
+  height: 88px;
-  display: grid;
+  overflow: hidden;
-  place-items: center;
+  border: 1px solid #e2e8f0;
-  border: 1px solid #dde6ef;
+  border-radius: 999px;
-  border-radius: 10px;
+  background: linear-gradient(180deg, #eff6ff 0%, #ecfeff 100%);
-  background: #f3f6fa;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
-  color: #0f766e;
-  font-size: 18px;
-  font-weight: 800;
 }
 
-.applicant-card h2 {
+.portrait img {
-  display: flex;
+  width: 100%;
-  flex-wrap: wrap;
+  height: 100%;
-  align-items: center;
+  display: block;
-  gap: 8px;
+  object-fit: cover;
-  color: #0f172a;
-  font-size: 17px;
-  font-weight: 800;
-  line-height: 1.35;
-}
-
-.applicant-card h2 span {
-  margin-left: 0;
-  padding: 2px 8px;
-  border: 1px solid #dbe4ee;
-  border-radius: 6px;
-  background: #fff;
-  color: #475569;
-  font-size: 11px;
-  font-weight: 700;
-}
-
-.applicant-card p {
-  margin-top: 4px;
-  color: #64748b;
-  font-size: 12px;
-  line-height: 1.5;
 }
 
 .applicant-copy {
   min-width: 0;
-}
-
-.applicant-meta {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
-  gap: 8px 14px;
-  margin-top: 10px;
 }
 
-.applicant-meta-item {
+.applicant-name-row {
-  min-width: 0;
+  display: flex;
-  display: grid;
+  flex-wrap: wrap;
-  gap: 3px;
+  align-items: center;
+  gap: 8px;
 }
 
-.applicant-meta-item span {
+.applicant-card h2 {
-  color: #94a3b8;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: .03em;
-  text-transform: uppercase;
-}
-
-.applicant-meta-item strong {
   color: #0f172a;
-  font-size: 12px;
+  font-size: 20px;
-  font-weight: 700;
+  font-weight: 900;
-  line-height: 1.45;
+  line-height: 1.2;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
-.hero-stat-strip {
+.identity-badge {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0;
-  overflow: hidden;
-  border: 1px solid #e5eaf0;
-  border-radius: 10px;
-  background: #fff;
-}
-
-.hero-stat {
-  display: grid;
-  align-content: center;
-  gap: 6px;
-  min-width: 0;
-  padding: 12px 16px;
-  border: 0;
-  border-left: 1px solid #eef2f7;
-  border-radius: 0;
-  background: transparent;
-}
-
-.hero-stat:first-child {
-  border-left: 0;
-}
-
-.hero-stat span {
-  color: #64748b;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: .03em;
-  text-transform: uppercase;
-}
-
-.hero-stat strong {
-  color: #0f172a;
-  font-size: 17px;
-  font-weight: 800;
-  line-height: 1.35;
-}
-
-.hero-stat.emphasis strong {
-  font-size: 22px;
-}
-
-.hero-stat b {
   display: inline-flex;
   align-items: center;
-}
+  min-height: 24px;
-
+  padding: 0 9px;
-.risk-pill,
+  border-radius: 999px;
-.state-pill,
+  background: #ecfdf5;
-.approval-pill {
+  border: 1px solid rgba(16, 185, 129, .16);
-  width: max-content;
+  color: #10b981;
-  max-width: 100%;
+  font-size: 11px;
-  padding: 4px 10px;
-  border-radius: 6px;
-  font-size: 12px;
   font-weight: 800;
-  line-height: 1.4;
 }
 
-.state-pill.info,
+.applicant-meta-line {
-.approval-pill.info,
+  display: flex;
-.risk-pill.info {
+  flex-wrap: wrap;
-  background: #eff6ff;
+  gap: 8px 0;
-  color: #2563eb;
 }
 
-.state-pill.success,
+.applicant-meta-line span {
-.approval-pill.success,
+  min-width: 0;
-.risk-pill.success,
+  position: relative;
-.risk-pill.low {
+  display: inline-flex;
-  background: #dcfce7;
+  align-items: center;
-  color: #059669;
+  gap: 6px;
-}
-
-.state-pill.warning,
-.approval-pill.warning,
-.risk-pill.warning,
-.risk-pill.medium {
-  background: #fff7ed;
-  color: #ea580c;
-}
-
-.state-pill.danger,
-.approval-pill.danger,
-.risk-pill.danger,
-.risk-pill.high {
-  background: #fef2f2;
-  color: #dc2626;
-}
-
-.state-pill.draft,
-.approval-pill.draft {
-  background: #fffbeb;
-  color: #d97706;
-}
-
-.risk-pill.neutral {
-  background: #f1f5f9;
   color: #475569;
-}
-
-.countdown {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: #f97316 !important;
-}
-
-.hero-summary-panel {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0;
-  border-top: 1px solid #e5eaf0;
-  border-bottom: 1px solid #e5eaf0;
-}
-
-.hero-summary-item {
-  min-width: 0;
-  display: grid;
-  gap: 5px;
-  align-content: center;
-  padding: 12px 14px;
-  border: 0;
-  border-right: 1px solid #eef2f7;
-  border-radius: 0;
-  background: transparent;
-}
-
-.hero-summary-item:last-child {
-  border-right: 0;
-}
-
-.hero-summary-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: #64748b;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: .03em;
-  text-transform: uppercase;
-}
-
-.hero-summary-icon {
-  color: #64748b;
-  font-size: 12px;
-}
-
-.hero-summary-item strong {
-  display: block;
-  color: #0f172a;
   font-size: 13px;
-  font-weight: 800;
   line-height: 1.5;
 }
 
+.applicant-meta-line span + span {
+  margin-left: 16px;
+}
+
+.applicant-meta-line span + span::before {
+  content: "•";
+  position: absolute;
+  left: -10px;
+  color: #cbd5e1;
+  font-size: 12px;
+}
+
+.applicant-meta-line em {
+  font-style: normal;
+  color: #64748b;
+}
+
+.applicant-meta-line strong {
+  color: #0f172a;
+  font-weight: 800;
+}
+
+.hero-fact-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 0;
+}
+
+.hero-fact {
+  display: grid;
+  align-content: center;
+  gap: 8px;
+  min-width: 0;
+  min-height: 92px;
+  padding: 8px 22px;
+  background: transparent;
+  border-left: 1px solid #eaf0f6;
+}
+
+.hero-fact:first-child {
+  border-left: 0;
+}
+
+.hero-fact-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: .03em;
+  text-transform: uppercase;
+}
+
+.hero-fact-label i {
+  font-size: 15px;
+  color: #94a3b8;
+}
+
+.hero-fact strong {
+  color: #0f172a;
+  font-size: 16px;
+  font-weight: 800;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.hero-fact strong.amount {
+  font-size: 22px;
+  font-weight: 900;
+}
+
+.hero-fact strong.status {
+  color: #f97316;
+}
+
 .progress-block {
-  padding-top: 16px;
+  padding-top: 0;
-  border-top: 1px solid #e5eaf0;
+  border-top: 0;
 }
 
 .progress-head {
@@ -1621,25 +1540,19 @@
 .detail-modal-leave-to .detail-modal { transform: translateY(8px); opacity: 0; }
 
 @media (max-width: 1320px) {
-  .detail-hero {
+  .hero-banner-main {
-    gap: 14px;
+    grid-template-columns: 1fr;
+    gap: 16px;
+    min-height: 0;
   }
 
-  .hero-summary-panel {
+  .hero-fact-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(5, minmax(132px, 1fr));
+    overflow-x: auto;
   }
 
-  .hero-summary-item {
+  .hero-fact {
-    border-right: 1px solid #eef2f7;
+    min-width: 132px;
-    border-bottom: 1px solid #eef2f7;
-  }
-
-  .hero-summary-item:nth-child(2n) {
-    border-right: 0;
-  }
-
-  .hero-summary-item:nth-last-child(-n + 2) {
-    border-bottom: 0;
   }
 
   .detail-expense-table {
@@ -1661,32 +1574,69 @@
 }
 
 @media (max-width: 760px) {
-  .detail-hero { gap: 12px; padding: 16px; }
+  .detail-hero { gap: 10px; padding: 16px; }
+  .progress-card { padding: 16px; }
 
-  .hero-topline {
+  .applicant-card {
-    grid-template-columns: 1fr;
+    grid-template-columns: 60px minmax(0, 1fr);
-    gap: 14px;
+    gap: 12px;
   }
 
-  .applicant-meta {
+  .portrait {
+    width: 60px;
+    height: 60px;
+  }
+
+  .applicant-copy {
+    gap: 8px;
+  }
+
+  .applicant-card h2 {
+    font-size: 16px;
+  }
+
+  .applicant-meta-line {
+    display: grid;
+    gap: 6px;
+  }
+
+  .applicant-meta-line span + span {
+    margin-left: 0;
+  }
+
+  .applicant-meta-line span + span::before {
+    content: none;
+  }
+
+  .hero-fact-grid {
     grid-template-columns: 1fr 1fr;
+    gap: 0;
+    overflow: hidden;
+    border-top: 1px solid #edf2f7;
   }
 
-  .hero-stat-strip {
+  .hero-fact {
-    grid-template-columns: 1fr;
+    min-width: 0;
-  }
+    min-height: 78px;
-
+    padding: 14px 12px 12px;
-  .hero-stat {
     border-left: 0;
-    border-top: 1px solid #eef2f7;
+    border-bottom: 1px solid #edf2f7;
   }
 
-  .hero-stat:first-child {
+  .hero-fact:nth-child(2n) {
-    border-top: 0;
+    border-left: 1px solid #edf2f7;
   }
 
-  .hero-summary-panel {
+  .hero-fact:last-child:nth-child(odd) {
-    grid-template-columns: 1fr 1fr;
+    grid-column: 1 / -1;
+  }
+
+  .hero-fact:nth-last-child(-n + 2) {
+    border-bottom: 0;
+  }
+
+  .hero-fact strong {
+    white-space: normal;
   }
 
   .detail-card {