.existing-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .75rem;
}

.existing-attachments strong {
  flex-basis: 100%;
  color: var(--navy);
}

.existing-attachments a {
  padding: 7px 9px;
  border: 1px solid #cfe1e1;
  border-radius: 6px;
  color: var(--teal-dark);
  text-decoration: none;
}

.existing-attachments a:hover {
  background: var(--teal-soft);
}

.existing-attachment-item {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px;
  border: 1px solid #dbe6e8;
  border-radius: 7px;
  background: #fff;
}
.existing-attachment-item a { flex: 1; overflow-wrap: anywhere; }
.existing-attachment-item div { display: flex; gap: 7px; }
.existing-attachment-item button { border: 0; background: transparent; color: var(--teal-dark); font: inherit; font-weight: 800; cursor: pointer; }
.attachment-file.is-replacement { color: #8a6200; font-weight: 800; }
.upload-progress { display: grid; gap: 8px; margin-top: 14px; padding: 12px; border: 1px solid #cfe1e1; border-radius: 7px; background: #fff; }
.upload-progress[hidden] { display: none; }
.upload-progress div { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .72rem; }
.upload-progress strong { color: var(--teal-dark); }
.upload-progress progress { width: 100%; height: 10px; accent-color: var(--teal); }
.container-detail-list { display: grid; gap: 12px; }
.container-detail-list section { display: grid; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--subtle); }
.attachment-links { display: flex; flex-wrap: wrap; gap: 8px; }
.attachment-download { display: grid; min-width: 180px; gap: 3px; padding: 9px 11px; border: 1px solid #cfe1e1; border-radius: 7px; background: #fff; color: var(--teal-dark); text-decoration: none; }
.attachment-download span, .attachment-download small { color: var(--muted); font-size: .65rem; }
.attachment-download strong { overflow-wrap: anywhere; font-size: .72rem; }
.attachment-download small { color: var(--teal-dark); font-weight: 800; }
.attachment-empty { color: var(--muted); font-size: .7rem; }
.delete-phrase { display: block; margin: 12px 0 16px; padding: 12px; border: 1px dashed var(--danger); border-radius: 7px; background: var(--danger-soft); color: var(--danger); direction: ltr; text-align: center; font-size: 1.05rem; font-weight: 900; letter-spacing: 2px; user-select: all; }

.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #f7f9fa; }
.login-card { width: min(430px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.login-copy { margin: 24px 0 20px; color: var(--muted); font-size: .82rem; line-height: 1.8; }
.login-card form { display: grid; gap: 17px; }
.login-hint { margin-top: 18px; color: var(--muted); font-size: .7rem; }
.profile-bar { display: flex; align-items: center; gap: 9px; margin-right: auto; color: var(--muted); font-size: .72rem; }
.profile-name { color: var(--navy); font-weight: 800; }
.profile-role { padding: 4px 7px; border-radius: 5px; background: var(--teal-soft); color: var(--teal-dark); }
.profile-action { padding: 3px 0; border: 0; background: transparent; color: var(--teal-dark); font-size: .7rem; font-weight: 700; }
#presets-open {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #f0c36a;
  border-radius: 7px;
  background: #fff5d8;
  color: #7b5600;
  box-shadow: 0 8px 20px rgba(167, 120, 10, .13);
}
#presets-open:hover {
  background: #ffedb8;
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(184, 65, 75, .10); }
.field-error { display: block; margin-top: 5px; color: var(--danger); font-size: .67rem; font-weight: 600; }
.pending-row { background: #fff9dc; }
.pending-row:hover { background: #fff4bf; }
.status-badge { display: inline-flex; padding: 5px 7px; border-radius: 5px; background: var(--teal-soft); color: var(--teal-dark); font-size: .65rem; font-weight: 700; white-space: nowrap; }
.status-badge.pending { background: #fff0b9; color: #8a6200; }
.status-badge.deleted { background: var(--danger-soft); color: var(--danger); }
.row-actions { display: flex; align-items: center; gap: 8px; min-width: 190px; white-space: nowrap; }
.danger-text { color: var(--danger) !important; }
.verify-action { color: #8a6200; }
.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.users-list { display: grid; gap: 8px; margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--line); }
.user-item { display: flex; justify-content: space-between; padding: 9px; border-radius: 6px; background: var(--subtle); font-size: .74rem; }
.user-item span { color: var(--muted); }
.danger-button { min-height: 45px; border: 1px solid var(--danger); border-radius: 7px; padding: 0 17px; background: var(--danger); color: #fff; font-size: .82rem; font-weight: 800; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 55vh; overflow: auto; margin-top: 20px; }
.detail-item { display: grid; gap: 4px; padding: 10px; border: 1px solid #edf1f3; border-radius: 6px; }
.detail-item span { color: var(--muted); font-size: .68rem; }
.detail-item strong { color: var(--navy); font-size: .76rem; line-height: 1.7; white-space: pre-wrap; }
.attachments-detail { grid-column: 1 / -1; }
.attachments-detail a { color: var(--teal-dark); font-size: .75rem; text-decoration: none; }

@media (max-width: 640px) {
  .existing-attachment-item { align-items: stretch; flex-direction: column; }
  .attachment-download { min-width: 100%; }
}
.range-select { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .7rem; }
.range-select select { min-height: 33px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); }
.range-select.is-disabled { opacity: .5; }
.range-select select:disabled { cursor: not-allowed; }
.check-toggle { display: flex; align-items: center; gap: 8px; min-height: 45px; padding: 0 12px; border: 1px solid #cfe1e1; border-radius: 7px; background: var(--teal-soft); color: var(--teal-dark); font-size: .75rem; font-weight: 700; }
.check-toggle input { accent-color: var(--teal); }
.field-category { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; margin-top: 7px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--navy); }
.field-category strong { font-size: .82rem; }
.field-category small { color: var(--muted); font-size: .68rem; }
.list-head-actions .small { white-space: nowrap; }
.form-action-buttons { display: flex; align-items: center; gap: 9px; }
.mode-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.mode-option { min-height: 78px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--navy); text-align: right; }
.mode-option strong, .mode-option small { display: block; }
.mode-option strong { font-size: .83rem; }
.mode-option small { margin-top: 6px; color: var(--muted); font-size: .69rem; line-height: 1.7; }
.mode-option.is-active { border-color: var(--teal); background: var(--teal-soft); box-shadow: 0 0 0 2px rgba(8,127,121,.08); }
.mode-panel { display: none; }
.mode-panel.is-active { display: block; }
.conditional-note { margin-top: 15px; padding: 10px 12px; border-radius: 6px; background: var(--subtle); color: var(--muted); font-size: .73rem; }
.lookup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 13px; }
.lookup-row .secondary-button { min-width: 145px; }
.parent-context { margin-top: 15px; padding: 12px 14px; border: 1px solid #bfe1dc; border-radius: 7px; background: var(--teal-soft); color: var(--teal-dark); }
.parent-context div { display: flex; flex-wrap: wrap; gap: 7px 18px; align-items: baseline; }
.parent-context strong { font-size: .8rem; }
.parent-context span { color: #46706f; font-size: .72rem; }
.span-two { grid-column: span 2; }
.nested-section { margin: 22px 0 0; padding: 20px; box-shadow: none; background: #fbfdfd; }
.hierarchy-form {
  display: grid;
  gap: 14px;
}
.hierarchy-form .form-section {
  margin-bottom: 0;
}
.parent-details {
  margin-top: 14px;
  border: 1px solid #dfe8eb;
  border-radius: 8px;
  background: #fbfcfc;
}
.parent-details summary {
  padding: 12px 14px;
  color: var(--navy);
  cursor: pointer;
  font-size: .76rem;
  font-weight: 800;
}
.parent-details #customs-parent-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 14px;
}
.parent-details .row-action {
  margin: 0 14px 14px;
}
.mini-table {
  display: grid;
  gap: 10px;
}
.mini-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid #e8eff0;
  border-radius: 8px;
  background: #fbfdfd;
  overflow-x: auto;
}
#charges-table .mini-row {
  grid-template-columns: repeat(4, minmax(130px, 1fr)) auto;
}
.customs-tag {
  background: #e7f1ff !important;
  color: #24507e;
}
.customs-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  padding: 0 !important;
}
.customs-pill {
  min-height: 28px;
  border: 1px solid #b9d4f0;
  border-radius: 6px;
  background: #eef6ff;
  color: #24507e;
  padding: 0 9px;
  font-size: .7rem;
  font-weight: 800;
}
.customs-pill.muted {
  border-color: #d9e5e8;
  background: #f6f9fa;
  color: var(--muted);
}
.preset-modal {
  width: min(760px, calc(100% - 30px));
}
.preset-browser {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.preset-browser-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.preset-browser-head > div {
  display: flex;
  gap: 8px;
}
.preset-browser-head input,
.preset-browser-head select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 10px;
  color: var(--ink);
}
.preset-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding-left: 4px;
}
.preset-item {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid #edf1f3;
  border-radius: 7px;
  background: #fbfdfd;
}
.preset-item div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.preset-item strong {
  color: var(--navy);
  font-size: .76rem;
}
.preset-item span,
.preset-item p {
  color: var(--muted);
  font-size: .69rem;
  line-height: 1.7;
}
.preset-item p {
  margin: 0;
  white-space: pre-wrap;
}
.preset-actions {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}
.hierarchy-tree { display: grid; gap: 13px; }
.hierarchy-booking, .hierarchy-project { border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.hierarchy-booking[open] > summary, .hierarchy-project[open] > summary { border-bottom: 1px solid var(--line); }
.hierarchy-tree summary { display: grid; grid-template-columns: auto minmax(170px, 1fr) auto auto; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; }
.hierarchy-tree summary::-webkit-details-marker { display: none; }
.tree-icon { color: var(--teal); font-size: .92rem; }
.tree-title { min-width: 0; }
.tree-title strong, .tree-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-title strong { color: var(--navy); font-size: .86rem; }
.tree-title small { margin-top: 4px; color: var(--muted); font-size: .7rem; }
.summary-actions { justify-self: end; }
.booking-meta { display: flex; flex-wrap: wrap; gap: 8px; padding: 11px 18px; background: #fbfcfc; color: var(--muted); font-size: .7rem; }
.booking-meta span { padding: 4px 7px; border-radius: 5px; background: #eef5f5; }
.booking-meta .missing-note { background: #fff3cf; color: #8a6200; }
.project-list { display: grid; gap: 10px; padding: 13px 18px 18px; }
.hierarchy-project { border-radius: 7px; box-shadow: none; }
.hierarchy-project summary { padding: 12px 14px; grid-template-columns: auto minmax(130px, 1fr) auto auto; }
.container-list { display: grid; gap: 7px; padding: 9px 13px 13px; background: #fbfdfd; }
.container-row { display: grid; grid-template-columns: minmax(150px, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e8eff0; border-radius: 6px; background: #fff; }
.container-row strong, .container-row small { display: block; }
.container-row strong { color: var(--teal-dark); font-size: .77rem; }
.container-row small { margin-top: 3px; color: var(--muted); font-size: .67rem; }
.tree-empty { margin: 0; padding: 12px; color: var(--muted); font-size: .73rem; }
.status-badge.incomplete { background: #fff0cf; color: #986500; }
.incomplete { background: #fffaf0; }
@media (max-width: 900px) { .mode-picker { grid-template-columns: 1fr; } .hierarchy-tree summary { grid-template-columns: auto minmax(120px, 1fr) auto; } .hierarchy-tree .summary-actions { grid-column: 2 / -1; justify-self: start; } .container-row { grid-template-columns: minmax(130px, 1fr) auto; } .container-row .row-actions { grid-column: 1 / -1; } }
@media (max-width: 900px) { .parent-details #customs-parent-summary { grid-template-columns: 1fr; } .mini-row, #charges-table .mini-row { grid-template-columns: repeat(2, minmax(120px, 1fr)); } .mini-row .remove-mini-row { justify-self: start; } .preset-browser-head { align-items: stretch; flex-direction: column; } .preset-browser-head > div { flex-direction: column; } }
@media (max-width: 620px) { .lookup-row { grid-template-columns: 1fr; } .lookup-row .secondary-button { width: 100%; } .span-two { grid-column: auto; } .hierarchy-tree summary { grid-template-columns: auto minmax(0, 1fr); } .hierarchy-tree summary > .status-badge { grid-column: 2; justify-self: start; } .hierarchy-tree .summary-actions { grid-column: 2; } .container-row { grid-template-columns: 1fr; } .container-row .status-badge, .container-row .row-actions { grid-column: auto; justify-self: start; } }
@media (max-width: 620px) { .list-head-actions { flex-wrap: wrap; } .list-head-actions .small { flex: 1 1 100%; } .field-category { align-items: start; flex-direction: column; gap: 4px; } }
@media (max-width: 620px) { .form-action-buttons { width: 100%; } .form-action-buttons button { flex: 1; } }
@media (max-width: 900px) { .profile-bar { margin-right: 0; } }
@media (max-width: 620px) { .profile-bar { flex-wrap: wrap; justify-content: flex-end; } .detail-grid { grid-template-columns: 1fr; } .attachments-detail { grid-column: auto; } .two-col { grid-template-columns: 1fr; } .login-card { padding: 25px; } }

/* Kermanshahi King Apple brand system */
:root {
  --ink: #202822;
  --muted: #657168;
  --subtle: #f2f4ef;
  --line: #d8ded4;
  --teal: #930500;
  --teal-dark: #6f0300;
  --teal-soft: #fff0ef;
  --navy: #700400;
  --shadow: 0 18px 54px rgba(84, 12, 9, .1);
}

body,
.login-screen {
  background: #f5f7f4;
}

.brand-logo {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  object-fit: contain;
}

.login-card .brand-logo {
  width: 72px;
  height: 72px;
  flex-basis: 72px;
}

.login-card {
  border-top: 4px solid var(--teal);
}

.login-card .brand-lockup,
.topbar .brand-lockup {
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--teal);
}

.login-card .brand-lockup h1,
.topbar .brand-lockup h1,
.login-card .brand-lockup .eyebrow,
.topbar .brand-lockup .eyebrow {
  color: #f9fafb;
}

.login-card .brand-lockup .eyebrow,
.topbar .brand-lockup .eyebrow {
  opacity: .8;
}

.topbar {
  margin-bottom: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.eyebrow,
h2,
.section-kicker {
  letter-spacing: 0;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.filter-row input:focus,
.filter-row select:focus {
  border-color: #78967b;
  box-shadow: 0 0 0 3px rgba(36, 61, 41, .11);
}

#presets-open {
  border-color: #d9aaa8;
  background: #fff0ef;
  color: var(--teal-dark);
  box-shadow: 0 8px 20px rgba(84, 12, 9, .1);
}

#presets-open:hover {
  background: #ffe2df;
}

@media (max-width: 620px) {
  .brand-logo {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  .topbar .brand-lockup {
    width: 100%;
  }
}