/* ==========================================
   Travel Expense App
   Style.html
   Modern / Mobile First
   ========================================== */


/* ==========================================
   VARIABLES
   ========================================== */

:root {

  --primary: #3157e0;
  --primary-dark: #2343bd;
  --primary-soft: #eef2ff;

  --secondary: #6c7a98;

  --success: #1ea672;
  --success-soft: #eaf9f3;

  --warning: #f59e0b;
  --warning-soft: #fff7e5;

  --danger: #e5484d;
  --danger-soft: #fff0f0;

  --purple: #7c5ce7;
  --purple-soft: #f1edff;

  --background: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #f8faff;

  --text: #172033;
  --text-soft: #5f6b82;
  --muted: #8993a8;

  --border: #e7eaf1;
  --border-strong: #d9deea;

  --shadow-sm:
    0 4px 16px rgba(30, 46, 85, 0.06);

  --shadow-md:
    0 12px 35px rgba(30, 46, 85, 0.10);

  --shadow-lg:
    0 24px 70px rgba(22, 35, 70, 0.18);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --sidebar-width: 245px;

}


/* ==========================================
   RESET
   ========================================== */

* {

  box-sizing: border-box;

  -webkit-tap-highlight-color:
    transparent;

}


html {

  min-height: 100%;

  background:
    var(--background);

}


body {

  margin: 0;

  min-height: 100vh;

  color:
    var(--text);

  background:
    var(--background);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans Thai",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 14px;

  line-height: 1.5;

  -webkit-font-smoothing:
    antialiased;

}


body.modal-open {

  overflow: hidden;

}


button,
input,
select,
textarea {

  font:
    inherit;

}


button {

  cursor: pointer;

}


button:disabled {

  cursor: not-allowed;

}


input,
select,
textarea {

  width: 100%;

  min-height: 48px;

  padding:
    11px
    13px;

  color:
    var(--text);

  background:
    #ffffff;

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

  border-radius:
    12px;

  outline: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;

}


input:focus,
select:focus,
textarea:focus {

  border-color:
    var(--primary);

  box-shadow:
    0 0 0 3px
    rgba(49, 87, 224, 0.10);

}


input:disabled {

  color:
    var(--muted);

  background:
    #f1f3f7;

}


textarea {

  min-height: 92px;

  resize: vertical;

}


select {

  appearance: none;

  -webkit-appearance: none;

  padding-right:
    38px;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      #77839a 50%
    ),
    linear-gradient(
      135deg,
      #77839a 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 18px) 21px,
    calc(100% - 13px) 21px;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat:
    no-repeat;

}


.hidden {

  display: none !important;

}


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

.app-shell {

  min-height: 100vh;

}


.main-layout {

  min-height: 100vh;

  margin-left:
    var(--sidebar-width);

}


#tripsPage,
#tripDashboard {

  min-height: 100vh;

}


/* ==========================================
   SIDEBAR
   ========================================== */

.sidebar {

  position: fixed;

  z-index: 40;

  top: 0;
  left: 0;
  bottom: 0;

  width:
    var(--sidebar-width);

  display: flex;

  flex-direction: column;

  padding:
    26px 18px;

  color:
    #ffffff;

  background:
    linear-gradient(
      165deg,
      #3157e0 0%,
      #2648c7 52%,
      #1d369a 100%
    );

  overflow-y: auto;

}


.brand {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom:
    34px;

  padding:
    0 5px;

}


.brand-icon {

  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  font-size: 21px;

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

  border:
    1px solid
    rgba(255,255,255,0.18);

  border-radius:
    14px;

}


.brand-title {

  font-size: 15px;

  font-weight: 800;

  letter-spacing:
    -0.2px;

}


.brand-subtitle {

  margin-top: 1px;

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

  font-size: 10px;

}


.sidebar-menu {

  display: flex;

  flex-direction: column;

  gap: 6px;

}


.nav-item {

  width: 100%;

  display: flex;

  align-items: center;

  gap: 11px;

  padding:
    12px 13px;

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

  background:
    transparent;

  border: 0;

  border-radius:
    13px;

  text-align: left;

  font-size: 13px;

  font-weight: 600;

  transition:
    0.18s ease;

}


.nav-item:hover {

  color:
    #ffffff;

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

}


.nav-item.active {

  color:
    #ffffff;

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

}


.nav-icon {

  width: 22px;

  display: inline-flex;

  justify-content: center;

  font-size: 16px;

}


.sidebar-footer {

  display: flex;

  gap: 11px;

  margin-top: auto;

  padding:
    15px;

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

  border:
    1px solid
    rgba(255,255,255,0.11);

  border-radius:
    17px;

}


.sidebar-footer-icon {

  font-size: 22px;

}


.sidebar-footer-title {

  margin-bottom: 3px;

  font-size: 11px;

  font-weight: 800;

}


.sidebar-footer-text {

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

  font-size: 9px;

  line-height: 1.5;

}


/* ==========================================
   TOPBAR
   ========================================== */

.topbar,
.dashboard-header {

  min-height: 108px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
    22px
    34px;

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

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

}


.topbar h1,
.dashboard-header h1 {

  margin:
    2px 0 3px;

  font-size: 23px;

  line-height: 1.2;

  letter-spacing:
    -0.5px;

}


.topbar p {

  margin: 0;

  color:
    var(--text-soft);

  font-size: 11px;

}


.eyebrow {

  color:
    var(--primary);

  font-size: 9px;

  font-weight: 800;

  letter-spacing:
    1.2px;

}


/* ==========================================
   CONTENT
   ========================================== */

.content {

  width: 100%;

  max-width:
    1380px;

  margin: 0 auto;

  padding:
    28px
    34px
    48px;

}


/* ==========================================
   HERO
   ========================================== */

.hero-card {

  position: relative;

  min-height: 240px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

  padding:
    34px
    38px;

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #3157e0 0%,
      #4e68e9 52%,
      #735fe6 100%
    );

  border-radius:
    var(--radius-xl);

  box-shadow:
    0 20px 45px
    rgba(49, 87, 224, 0.20);

  overflow: hidden;

}


.hero-card::before {

  content: "";

  position: absolute;

  width: 270px;
  height: 270px;

  top: -130px;
  right: 70px;

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

  border-radius:
    50%;

}


.hero-card::after {

  content: "";

  position: absolute;

  width: 190px;
  height: 190px;

  right: -60px;
  bottom: -90px;

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

  border-radius:
    50%;

}


.hero-content {

  position: relative;

  z-index: 2;

  max-width: 530px;

}


.hero-badge {

  width: fit-content;

  margin-bottom:
    14px;

  padding:
    6px 10px;

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

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

  border:
    1px solid
    rgba(255,255,255,0.16);

  border-radius:
    999px;

  font-size: 8px;

  font-weight: 800;

  letter-spacing:
    1px;

}


.hero-card h2 {

  margin:
    0 0 12px;

  font-size:
    clamp(27px, 3vw, 42px);

  line-height: 1.15;

  letter-spacing:
    -1.1px;

}


.hero-card p {

  max-width: 440px;

  margin: 0;

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

  font-size: 12px;

  line-height: 1.7;

}


.hero-visual {

  position: relative;

  z-index: 2;

  width: 260px;
  height: 170px;

  flex: 0 0 auto;

}


.hero-plane {

  position: absolute;

  top: 35px;
  right: 70px;

  font-size: 70px;

  transform:
    rotate(-10deg);

  filter:
    drop-shadow(
      0 15px 20px
      rgba(0,0,0,0.12)
    );

}


.hero-mini-card {

  position: absolute;

  padding:
    9px 12px;

  color:
    #26365f;

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

  border-radius:
    12px;

  box-shadow:
    var(--shadow-md);

  font-size: 10px;

  font-weight: 700;

}


.hero-mini-one {

  top: 10px;
  left: 10px;

}


.hero-mini-two {

  right: 5px;
  bottom: 16px;

}


/* ==========================================
   SECTION HEADING
   ========================================== */

.section-heading {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  margin:
    32px 2px
    16px;

}


.section-heading h2,
.expense-section-header h2,
.budget-header h2 {

  margin: 0;

  font-size: 16px;

  letter-spacing:
    -0.3px;

}


.section-heading p,
.expense-section-header p,
.budget-header p {

  margin:
    3px 0 0;

  color:
    var(--muted);

  font-size: 10px;

}


/* ==========================================
   BUTTONS
   ========================================== */

.primary-button,
.secondary-button {

  min-height: 44px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  padding:
    10px 17px;

  border-radius:
    12px;

  font-size: 11px;

  font-weight: 700;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;

}


.primary-button {

  color:
    #ffffff;

  background:
    var(--primary);

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

  box-shadow:
    0 7px 18px
    rgba(49,87,224,0.17);

}


.primary-button:hover {

  background:
    var(--primary-dark);

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

}


.primary-button:active,
.secondary-button:active {

  transform:
    scale(0.98);

}


.primary-button:disabled {

  opacity: 0.62;

}


.secondary-button {

  color:
    var(--text-soft);

  background:
    #ffffff;

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

}


.text-button {

  padding: 7px 10px;

  color:
    var(--primary);

  background:
    var(--primary-soft);

  border: 0;

  border-radius:
    10px;

  font-size: 10px;

  font-weight: 700;

}


.icon-button {

  width: 36px;
  height: 36px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  padding: 0;

  border: 0;

  border-radius:
    10px;

}


.danger-soft {

  color:
    var(--danger);

  background:
    var(--danger-soft);

}


/* ==========================================
   TRIP LIST
   ========================================== */

.trip-list {

  display: grid;

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

  gap: 18px;

}


.trip-card {

  background:
    var(--surface);

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

  border-radius:
    20px;

  box-shadow:
    var(--shadow-sm);

  overflow: hidden;

  cursor: pointer;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;

}


.trip-card:hover {

  transform:
    translateY(-3px);

  box-shadow:
    var(--shadow-md);

}


.trip-cover {

  position: relative;

  height: 105px;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #dfe6ff
    );

  overflow: hidden;

}


.trip-cover-pattern {

  position: absolute;

  width: 170px;
  height: 170px;

  top: -85px;
  right: -35px;

  background:
    rgba(49,87,224,0.09);

  border-radius:
    50%;

}


.trip-country-badge {

  position: absolute;

  left: 18px;
  bottom: -22px;

  width: 48px;
  height: 48px;

  display: grid;

  place-items: center;

  background:
    #ffffff;

  border:
    4px solid
    #ffffff;

  border-radius:
    15px;

  box-shadow:
    var(--shadow-sm);

  font-size: 24px;

}


.trip-body {

  padding:
    31px
    18px
    17px;

}


.trip-title-row {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 12px;

}


.trip-title-row h3 {

  margin:
    0 0 4px;

  font-size: 15px;

  letter-spacing:
    -0.2px;

}


.trip-title-row p {

  margin: 0;

  color:
    var(--text-soft);

  font-size: 10px;

}


.trip-open-arrow {

  width: 30px;
  height: 30px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  color:
    var(--primary);

  background:
    var(--primary-soft);

  border-radius:
    9px;

}


.trip-chips {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top:
    15px;

}


.info-chip {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  padding:
    5px 8px;

  color:
    var(--text-soft);

  background:
    var(--surface-soft);

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

  border-radius:
    999px;

  font-size: 9px;

}


.trip-footer {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 12px;

  margin-top:
    17px;

  padding-top:
    14px;

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

}


.trip-footer strong {

  display: block;

  margin-top: 2px;

  font-size: 13px;

}


.trip-budget-label {

  color:
    var(--muted);

  font-size: 8px;

}


.trip-footer small {

  max-width: 110px;

  color:
    var(--muted);

  font-size: 8px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}


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

.loading-card,
.empty-state,
.expense-empty {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  min-height: 190px;

  padding: 28px;

  text-align: center;

  color:
    var(--text-soft);

  background:
    #ffffff;

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

  border-radius:
    20px;

}


.loading-card {

  flex-direction: row;

  min-height: 80px;

}


.spinner {

  width: 22px;
  height: 22px;

  border:
    3px solid
    #e3e7f2;

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

  border-radius:
    50%;

  animation:
    spinner 0.8s linear infinite;

}


@keyframes spinner {

  to {
    transform: rotate(360deg);
  }

}


.empty-icon,
.expense-empty-icon {

  margin-bottom: 4px;

  font-size: 35px;

}


.empty-state h2,
.expense-empty h3 {

  margin: 0;

  font-size: 15px;

}


.empty-state p,
.expense-empty p {

  max-width: 300px;

  margin:
    0 0 10px;

  color:
    var(--muted);

  font-size: 10px;

}


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

.dashboard-title-row {

  display: flex;

  align-items: center;

  gap: 14px;

}


.back-button {

  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  color:
    var(--text);

  background:
    #ffffff;

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

  border-radius:
    12px;

  font-size: 17px;

}


.dashboard-meta {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 6px;

  color:
    var(--text-soft);

  font-size: 10px;

}


.meta-dot {

  color:
    #c3c8d4;

}


.summary-grid {

  display: grid;

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

  gap: 13px;

}


.summary-card {

  min-width: 0;

  display: flex;

  align-items: center;

  gap: 11px;

  padding:
    17px;

  background:
    #ffffff;

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

  border-radius:
    17px;

  box-shadow:
    var(--shadow-sm);

}


.summary-icon {

  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  border-radius:
    12px;

  font-size: 18px;

}


.summary-blue {

  background:
    var(--primary-soft);

}


.summary-orange {

  background:
    var(--warning-soft);

}


.summary-green {

  background:
    var(--success-soft);

}


.summary-purple {

  background:
    var(--purple-soft);

}


.summary-label {

  margin-bottom: 3px;

  color:
    var(--muted);

  font-size: 8px;

}


.summary-value {

  font-size: 14px;

  font-weight: 800;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}


.budget-panel {

  margin-top:
    15px;

  padding:
    19px;

  background:
    #ffffff;

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

  border-radius:
    18px;

  box-shadow:
    var(--shadow-sm);

}


.budget-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

}


.budget-percent {

  color:
    var(--primary);

  font-size: 16px;

  font-weight: 800;

}


.progress-track {

  height: 9px;

  margin-top:
    15px;

  background:
    #edf0f6;

  border-radius:
    999px;

  overflow: hidden;

}


.progress-bar {

  width: 0;

  height: 100%;

  background:
    linear-gradient(
      90deg,
      #3157e0,
      #6479ed
    );

  border-radius:
    inherit;

  transition:
    width 0.35s ease;

}


.progress-bar.over-budget {

  background:
    var(--danger);

}


/* ==========================================
   EXPENSE SECTION
   ========================================== */

.expense-section {

  margin-top:
    17px;

  padding:
    20px;

  background:
    #ffffff;

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

  border-radius:
    20px;

  box-shadow:
    var(--shadow-sm);

}


.expense-section-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-bottom:
    15px;

}


.expense-list {

  display: flex;

  flex-direction: column;

}


.expense-item {

  position: relative;

  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr)
    auto
    32px;

  align-items: center;

  gap: 11px;

  min-height: 72px;

  padding:
    12px
    4px;

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

  cursor: pointer;

  transition:
    background 0.15s ease;

}


.expense-item:last-child {

  border-bottom: 0;

}


.expense-item:hover {

  background:
    var(--surface-soft);

}


.expense-category-icon {

  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  background:
    var(--surface-soft);

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

  border-radius:
    12px;

  font-size: 19px;

}


.expense-main {

  min-width: 0;

}


.expense-title-row {

  display: flex;

  align-items: center;

  gap: 7px;

  min-width: 0;

}


.expense-title {

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 12px;

}


.receipt-indicator {

  flex: 0 0 auto;

  padding:
    2px 6px;

  color:
    var(--primary);

  background:
    var(--primary-soft);

  border-radius:
    999px;

  font-size: 8px;

}


.expense-meta {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 4px;

  color:
    var(--muted);

  font-size: 8px;

}


.expense-amount {

  min-width: 95px;

  text-align: right;

}


.expense-amount strong {

  display: block;

  font-size: 12px;

}


.expense-amount span {

  display: block;

  margin-top: 2px;

  color:
    var(--muted);

  font-size: 8px;

}


.expense-delete {

  width: 30px;
  height: 30px;

  display: grid;

  place-items: center;

  padding: 0;

  color:
    #a4aaba;

  background:
    transparent;

  border: 0;

  border-radius:
    9px;

  font-size: 17px;

}


.expense-delete:hover {

  color:
    var(--danger);

  background:
    var(--danger-soft);

}


/* ==========================================
   MODAL
   ========================================== */

.modal-overlay {

  position: fixed;

  z-index: 100;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  padding:
    20px;

  background:
    rgba(15, 23, 42, 0.46);

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);

}


.modal-card {

  width: 100%;

  max-width: 620px;

  max-height:
    calc(100vh - 40px);

  padding:
    23px;

  background:
    #ffffff;

  border-radius:
    24px;

  box-shadow:
    var(--shadow-lg);

  overflow-y: auto;

  overscroll-behavior:
    contain;

}


.expense-modal-card {

  max-width: 680px;

}


.modal-drag-handle {

  display: none;

}


.modal-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 15px;

  margin-bottom:
    21px;

}


.modal-title-group {

  display: flex;

  align-items: center;

  gap: 11px;

}


.modal-icon {

  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  background:
    var(--primary-soft);

  border-radius:
    13px;

  font-size: 19px;

}


.modal-header h2 {

  margin:
    0 0 2px;

  font-size: 17px;

  letter-spacing:
    -0.3px;

}


.modal-header p {

  margin: 0;

  color:
    var(--muted);

  font-size: 9px;

}


.modal-close {

  width: 36px;
  height: 36px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  padding: 0;

  color:
    var(--text-soft);

  background:
    var(--surface-soft);

  border: 0;

  border-radius:
    11px;

  font-size: 21px;

}


/* ==========================================
   FORMS
   ========================================== */

.form-group {

  min-width: 0;

  margin-bottom:
    15px;

}


.form-group > label,
.manual-rate-row > label {

  display: block;

  margin-bottom:
    6px;

  color:
    #3e4960;

  font-size: 9px;

  font-weight: 700;

}


.form-row {

  display: grid;

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

  gap: 12px;

}


.form-section-title {

  margin:
    20px 0
    11px;

  color:
    var(--text);

  font-size: 11px;

  font-weight: 800;

}


.form-section-title:first-of-type {

  margin-top: 0;

}


.form-section-title-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-top:
    7px;

}


.form-section-title-row .form-section-title {

  margin-bottom: 2px;

}


.form-section-description {

  color:
    var(--muted);

  font-size: 8px;

}


.field-hint {

  margin-top: 5px;

  color:
    var(--muted);

  font-size: 8px;

  line-height: 1.5;

}


.form-error {

  margin-bottom:
    15px;

  padding:
    10px 12px;

  color:
    #a83237;

  background:
    var(--danger-soft);

  border:
    1px solid
    #ffd4d5;

  border-radius:
    11px;

  font-size: 9px;

}


.modal-actions {

  position: sticky;

  bottom: -23px;

  display: flex;

  justify-content: flex-end;

  gap: 9px;

  margin:
    23px -23px -23px;

  padding:
    15px
    23px
    19px;

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

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

  backdrop-filter:
    blur(8px);

}


/* ==========================================
   LOCATIONS
   ========================================== */

.location-row {

  display: grid;

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

  gap: 8px;

  margin-bottom:
    8px;

}


.remove-location {

  width: 40px;
  height: 48px;

  padding: 0;

  color:
    var(--danger);

  background:
    var(--danger-soft);

  border: 0;

  border-radius:
    11px;

  font-size: 18px;

}


/* ==========================================
   CATEGORY PICKER
   ========================================== */

.category-picker {

  display: grid;

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

  gap: 8px;

}


.category-option {

  min-height: 72px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  padding:
    9px
    5px;

  color:
    var(--text-soft);

  background:
    #ffffff;

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

  border-radius:
    13px;

  font-size: 9px;

  font-weight: 600;

  transition:
    0.15s ease;

}


.category-option:hover {

  border-color:
    #c8d1f7;

  background:
    var(--surface-soft);

}


.category-option.active {

  color:
    var(--primary);

  background:
    var(--primary-soft);

  border-color:
    #b9c5fb;

  box-shadow:
    inset 0 0 0 1px
    rgba(49,87,224,0.05);

}


.category-option-icon {

  font-size: 23px;

  line-height: 1;

}


.category-loading,
.category-empty {

  grid-column:
    1 / -1;

  padding:
    18px;

  color:
    var(--muted);

  background:
    var(--surface-soft);

  border-radius:
    12px;

  text-align: center;

  font-size: 9px;

}


/* ==========================================
   LIVE EXCHANGE RATE
   ========================================== */

.live-rate-box {

  padding:
    14px;

  background:
    linear-gradient(
      145deg,
      #f8faff,
      #f4f7ff
    );

  border:
    1px solid
    #dfe5fa;

  border-radius:
    16px;

}


.live-rate-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

}


.live-rate-main {

  min-width: 0;

}


.live-rate-label {

  margin-bottom: 3px;

  color:
    var(--muted);

  font-size: 8px;

  font-weight: 600;

}


#liveRateDisplay {

  display: block;

  color:
    var(--primary);

  font-size: 16px;

  font-weight: 800;

  line-height: 1.3;

  word-break: break-word;

}


.rate-refresh-button {

  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  padding: 0;

  color:
    var(--primary);

  background:
    #ffffff;

  border:
    1px solid
    #dce3fb;

  border-radius:
    12px;

  box-shadow:
    0 4px 12px
    rgba(49,87,224,0.08);

  font-size: 20px;

  transition:
    transform 0.15s ease,
    background 0.15s ease;

}


.rate-refresh-button:hover {

  background:
    var(--primary-soft);

}


.rate-refresh-button:disabled {

  opacity: 0.45;

}


.rate-refresh-button.loading {

  animation:
    rateSpin
    0.75s
    linear
    infinite;

}


@keyframes rateSpin {

  to {
    transform: rotate(360deg);
  }

}


.manual-rate-row {

  margin-top:
    12px;

  padding-top:
    12px;

  border-top:
    1px solid
    #e1e6f6;

}


.manual-rate-row input {

  min-height: 44px;

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

}


/* ==========================================
   CONVERSION PREVIEW
   ========================================== */

.conversion-preview {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin:
    -2px 0
    16px;

  padding:
    13px
    15px;

  color:
    var(--text-soft);

  background:
    var(--success-soft);

  border:
    1px solid
    #d1f1e4;

  border-radius:
    14px;

}


.conversion-preview span {

  font-size: 9px;

}


.conversion-preview strong {

  color:
    #16845b;

  font-size: 14px;

  text-align: right;

}


/* ==========================================
   RECEIPT UPLOAD
   ========================================== */

.receipt-upload-box {

  min-height: 78px;

  display: flex !important;

  align-items: center;

  gap: 12px;

  margin-bottom:
    9px !important;

  padding:
    13px;

  color:
    var(--text-soft) !important;

  background:
    var(--surface-soft);

  border:
    1px dashed
    #cbd3e4;

  border-radius:
    14px;

  cursor: pointer;

  transition:
    0.15s ease;

}


.receipt-upload-box:hover {

  color:
    var(--primary) !important;

  background:
    var(--primary-soft);

  border-color:
    #aebcf4;

}


.receipt-upload-icon {

  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  background:
    #ffffff;

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

  border-radius:
    12px;

  font-size: 19px;

}


.receipt-upload-box strong {

  display: block;

  color:
    var(--text);

  font-size: 10px;

}


.receipt-upload-box span {

  display: block;

  margin-top: 2px;

  color:
    var(--muted);

  font-size: 8px;

}


.new-receipt-preview {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding:
    10px;

  background:
    var(--success-soft);

  border:
    1px solid
    #d1f1e4;

  border-radius:
    12px;

}


.new-receipt-preview > div:first-child {

  min-width: 0;

  display: flex;

  align-items: center;

  gap: 9px;

}


#newReceiptIcon {

  font-size: 21px;

}


.receipt-file-info {

  min-width: 0;

}


.receipt-file-info strong {

  display: block;

  max-width: 330px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 9px;

}


.receipt-file-info span {

  display: block;

  margin-top: 2px;

  color:
    var(--muted);

  font-size: 8px;

}


/* ==========================================
   SAVED RECEIPTS
   ========================================== */

.existing-receipt-section {

  margin-top:
    13px;

}


.receipt-section-title {

  margin-bottom: 7px;

  color:
    var(--text-soft);

  font-size: 9px;

  font-weight: 700;

}


#existingReceiptList {

  display: flex;

  flex-direction: column;

  gap: 7px;

}


.saved-receipt-item {

  display: grid;

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

  align-items: center;

  gap: 8px;

  padding:
    7px;

  background:
    var(--surface-soft);

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

  border-radius:
    12px;

}


.saved-receipt-open {

  min-width: 0;

  display: flex;

  align-items: center;

  gap: 9px;

  padding: 3px;

  color:
    var(--text);

  background:
    transparent;

  border: 0;

  text-align: left;

}


.saved-receipt-icon {

  width: 34px;
  height: 34px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  background:
    #ffffff;

  border-radius:
    9px;

  font-size: 16px;

}


.saved-receipt-info {

  min-width: 0;

}


.saved-receipt-info strong {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 9px;

}


.saved-receipt-info small {

  display: block;

  margin-top: 2px;

  color:
    var(--muted);

  font-size: 7px;

}


/* ==========================================
   SUCCESS
   ========================================== */

.success-card {

  max-width: 390px;

  padding:
    31px;

  text-align: center;

}


.success-icon {

  width: 62px;
  height: 62px;

  display: grid;

  place-items: center;

  margin:
    0 auto
    14px;

  color:
    #ffffff;

  background:
    var(--success);

  border-radius:
    50%;

  font-size: 27px;

  font-weight: 800;

  box-shadow:
    0 12px 25px
    rgba(30,166,114,0.20);

}


.success-card h2 {

  margin:
    0 0 6px;

  font-size: 18px;

}


.success-card p {

  margin:
    0 0 16px;

  color:
    var(--text-soft);

  font-size: 10px;

}


.success-trip-id {

  margin-bottom:
    17px;

  padding:
    12px;

  background:
    var(--surface-soft);

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

  border-radius:
    12px;

}


.success-trip-id span {

  display: block;

  margin-bottom: 3px;

  color:
    var(--muted);

  font-size: 8px;

}


.success-trip-id strong {

  color:
    var(--primary);

  font-size: 12px;

}


.success-button {

  width: 100%;

}


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

.mobile-bottom-nav,
.mobile-fab {

  display: none;

}


/* ==========================================
   TABLET
   ========================================== */

@media (
  max-width: 1100px
) {

  .trip-list {

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

  }


  .summary-grid {

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

  }


  .hero-visual {

    width: 210px;

  }

}


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

@media (
  max-width: 760px
) {

  :root {

    --sidebar-width: 0px;

  }


  body {

    padding-bottom:
      calc(
        72px +
        env(safe-area-inset-bottom)
      );

  }


  .sidebar {

    display: none;

  }


  .main-layout {

    margin-left: 0;

  }


  .topbar,
  .dashboard-header {

    position: sticky;

    z-index: 30;

    top: 0;

    min-height: auto;

    padding:
      calc(
        13px +
        env(safe-area-inset-top)
      )
      16px
      13px;

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

    backdrop-filter:
      blur(12px);

    -webkit-backdrop-filter:
      blur(12px);

  }


  .topbar h1,
  .dashboard-header h1 {

    font-size: 19px;

  }


  .topbar p {

    font-size: 9px;

  }


  .desktop-create-button,
  .dashboard-add-button {

    display: none;

  }


  .content {

    padding:
      15px
      14px
      28px;

  }


  /* HERO */

  .hero-card {

    min-height: 185px;

    padding:
      23px
      21px;

    border-radius:
      22px;

  }


  .hero-card h2 {

    font-size: 26px;

  }


  .hero-card p {

    max-width: 310px;

    font-size: 10px;

  }


  .hero-visual {

    display: none;

  }


  .section-heading {

    margin-top: 25px;

  }


  /* TRIPS */

  .trip-list {

    grid-template-columns:
      1fr;

    gap: 12px;

  }


  .trip-card {

    display: grid;

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

    min-height: 145px;

  }


  .trip-cover {

    height: auto;

    min-height: 100%;

  }


  .trip-country-badge {

    left: 50%;
    bottom: auto;
    top: 50%;

    width: 49px;
    height: 49px;

    transform:
      translate(
        -50%,
        -50%
      );

  }


  .trip-body {

    min-width: 0;

    padding:
      15px
      14px;

  }


  .trip-title-row h3 {

    font-size: 14px;

  }


  .trip-footer {

    margin-top: 12px;

  }


  /* DASHBOARD */

  .dashboard-header {

    align-items: center;

  }


  .dashboard-title-row {

    min-width: 0;

  }


  .dashboard-title-info {

    min-width: 0;

  }


  .dashboard-title-info h1 {

    max-width:
      calc(100vw - 100px);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }


  .back-button {

    width: 36px;
    height: 36px;

  }


  .summary-grid {

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

    gap: 9px;

  }


  .summary-card {

    min-height: 80px;

    padding: 12px;

  }


  .summary-icon {

    width: 35px;
    height: 35px;

    font-size: 16px;

  }


  .summary-value {

    font-size: 12px;

  }


  .budget-panel {

    padding: 15px;

  }


  .expense-section {

    padding:
      15px
      12px;

  }


  .expense-add-desktop {

    display: none;

  }


  /* EXPENSE ITEM */

  .expense-item {

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

    gap: 9px;

    min-height: 76px;

    padding:
      11px
      2px;

  }


  .expense-category-icon {

    width: 36px;
    height: 36px;

    font-size: 17px;

  }


  .expense-delete {

    position: absolute;

    top: 2px;
    right: -2px;

    width: 26px;
    height: 26px;

    opacity: 0.65;

  }


  .expense-amount {

    min-width: 82px;

    padding-right: 4px;

  }


  .expense-amount strong {

    font-size: 11px;

  }


  .expense-title {

    font-size: 11px;

  }


  /* MOBILE BOTTOM NAV */

  .mobile-bottom-nav {

    position: fixed;

    z-index: 70;

    left: 0;
    right: 0;
    bottom: 0;

    display: grid;

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

    min-height:
      calc(
        62px +
        env(safe-area-inset-bottom)
      );

    padding:
      6px
      65px
      calc(
        5px +
        env(safe-area-inset-bottom)
      );

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

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

    box-shadow:
      0 -5px 22px
      rgba(30,46,85,0.07);

    backdrop-filter:
      blur(12px);

    -webkit-backdrop-filter:
      blur(12px);

  }


  .mobile-nav-item {

    min-width: 70px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 1px;

    padding: 4px;

    color:
      var(--muted);

    background:
      transparent;

    border: 0;

    border-radius:
      10px;

  }


  .mobile-nav-item span {

    font-size: 17px;

  }


  .mobile-nav-item small {

    font-size: 8px;

    font-weight: 600;

  }


  .mobile-nav-item.active {

    color:
      var(--primary);

  }


  /* MOBILE FAB */

  .mobile-fab {

    position: fixed;

    z-index: 80;

    left: 50%;
    bottom:
      calc(
        30px +
        env(safe-area-inset-bottom)
      );

    width: 54px;
    height: 54px;

    display: grid;

    place-items: center;

    padding: 0;

    color:
      #ffffff;

    background:
      linear-gradient(
        145deg,
        #3157e0,
        #4c68ea
      );

    border:
      5px solid
      var(--background);

    border-radius:
      50%;

    box-shadow:
      0 10px 24px
      rgba(49,87,224,0.30);

    transform:
      translateX(-50%);

    font-size: 26px;

    line-height: 1;

  }


  /* MODAL = BOTTOM SHEET */

  .modal-overlay {

    align-items: flex-end;

    padding: 0;

  }


  .modal-card {

    width: 100%;

    max-width: none;

    max-height:
      calc(
        94dvh -
        env(safe-area-inset-top)
      );

    padding:
      12px
      16px
      0;

    border-radius:
      24px
      24px
      0
      0;

    box-shadow:
      0 -12px 40px
      rgba(20,30,60,0.18);

  }


  .modal-drag-handle {

    width: 38px;
    height: 4px;

    display: block;

    margin:
      0 auto
      13px;

    background:
      #d9dde6;

    border-radius:
      999px;

  }


  .modal-header {

    margin-bottom: 17px;

  }


  .modal-icon {

    width: 38px;
    height: 38px;

  }


  .modal-header h2 {

    font-size: 16px;

  }


  .modal-close {

    width: 34px;
    height: 34px;

  }


  .modal-actions {

    bottom: 0;

    margin:
      21px
      -16px
      0;

    padding:
      12px
      16px
      calc(
        13px +
        env(safe-area-inset-bottom)
      );

  }


  .modal-actions button {

    min-height: 48px;

  }


  /* FORM MOBILE */

  input,
  select,
  textarea {

    /*
     * 16px ป้องกัน Safari iPhone
     * zoom ตอน focus input
     */

    font-size: 16px;

  }


  .form-group > label,
  .manual-rate-row > label {

    font-size: 10px;

  }


  .form-row {

    gap: 9px;

  }


  /* CATEGORY */

  .category-picker {

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

    gap: 7px;

  }


  .category-option {

    min-height: 69px;

    font-size: 9px;

  }


  /* FX */

  .live-rate-box {

    padding: 12px;

  }


  #liveRateDisplay {

    font-size: 14px;

  }


  .rate-refresh-button {

    width: 40px;
    height: 40px;

  }


  .conversion-preview {

    padding:
      11px
      12px;

  }


  .conversion-preview strong {

    font-size: 12px;

  }


  /* RECEIPT */

  .receipt-upload-box {

    min-height: 73px;

  }


  .receipt-file-info strong {

    max-width:
      calc(100vw - 145px);

  }

}


/* ==========================================
   SMALL PHONE
   ========================================== */

@media (
  max-width: 430px
) {

  .hero-card {

    min-height: 175px;

  }


  .hero-card h2 {

    font-size: 23px;

  }


  .summary-card {

    gap: 8px;

  }


  .summary-icon {

    width: 32px;
    height: 32px;

  }


  .summary-label {

    font-size: 7px;

  }


  .summary-value {

    font-size: 11px;

  }


  /*
   * Expense form:
   * Amount + Currency ยังอยู่ 2 ช่อง
   * แต่ FX + Date แยกเป็นแนวตั้ง
   * เพื่อไม่ให้ FX box บีบ
   */

  .expense-modal-card .form-row:nth-of-type(2) {

    grid-template-columns:
      1fr;

  }


  .expense-amount {

    min-width: 76px;

  }


  .expense-meta {

    max-width:
      calc(100vw - 190px);

  }


  .mobile-bottom-nav {

    padding-left: 45px;

    padding-right: 45px;

  }

}


/* ==========================================
   VERY SMALL PHONE
   ========================================== */

@media (
  max-width: 350px
) {

  .content {

    padding-left: 10px;

    padding-right: 10px;

  }


  .summary-grid {

    grid-template-columns:
      1fr;

  }


  .category-picker {

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

  }


  .form-row {

    grid-template-columns:
      1fr;

  }


  .expense-item {

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

  }


  .expense-amount {

    grid-column:
      2;

    min-width: 0;

    text-align: left;

  }

}


/* ==========================================
   DESKTOP FORM ENHANCEMENTS
   ========================================== */

@media (
  min-width: 761px
) {

  .modal-card::-webkit-scrollbar {

    width: 6px;

  }


  .modal-card::-webkit-scrollbar-thumb {

    background:
      #d7dce8;

    border-radius:
      999px;

  }


  .modal-card::-webkit-scrollbar-track {

    background:
      transparent;

  }

}


/* ==========================================
   REDUCED MOTION
   ========================================== */

@media (
  prefers-reduced-motion: reduce
) {

  *,
  *::before,
  *::after {

    scroll-behavior: auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

  }

}

/* Final responsive guardrails: mobile-first, desktop preserved. */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
.main-layout { min-width: 0; }
.content { width: 100%; min-width: 0; }
.trip-list, .summary-grid { min-width: 0; }
.trip-card, .trip-card-button { min-width: 0; max-width: 100%; }
@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .content { width: 100%; padding-left: 14px; padding-right: 14px; }
  .topbar { gap: 10px; padding-left: 16px; padding-right: 16px; }
  .topbar h1 { font-size: 21px; }
  .hero-card { min-height: 190px; padding: 25px 22px; }
  .hero-visual { opacity: .28; transform: scale(.78); transform-origin: right center; }
  .trip-list, .summary-grid { grid-template-columns: 1fr; }
  .trip-list { display: grid; width: 100%; min-width: 0; }
  .trip-card, .trip-card-button { width: 100%; min-width: 0; box-sizing: border-box; }
  .trip-card-button { display: block; text-align: left; overflow-wrap: anywhere; }
  .expense-item { grid-template-columns: 42px minmax(0, 1fr); }
  .expense-amount { grid-column: 2; text-align: left; }
  .expense-actions { grid-column: 2; justify-content: flex-end; }
  .form-row { grid-template-columns: 1fr; }
  .modal-card { width: min(100% - 20px, 560px); max-height: 90vh; }
  input, select, textarea, button { font-size: 16px; }
  .mobile-bottom-nav { display: flex; }
  .mobile-fab { display: grid; }
}

@media (min-width: 761px) {
  .content { width: min(100%, 1380px); }
  .trip-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 761px) {
  .content { width: calc(100% - 68px); max-width: 1380px; box-sizing: border-box; margin-left: auto; margin-right: auto; }
  .main-layout { width: calc(100% - var(--sidebar-width)); box-sizing: border-box; overflow-x: hidden; }
  .main-layout { margin-left: var(--sidebar-width); }
  .main-layout > section > .content { margin-left: 0; margin-right: 0; width: 100%; max-width: none; }
  .hero-content { margin-left: 0; }
}