* {
  box-sizing: border-box;
}


:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;

  --border: #dfe5ec;
  --border-strong: #c9d3df;

  --text: #172033;
  --muted: #6b7688;

  --accent: #3158d3;
  --accent-soft: #eef2ff;

  --success: #2f855a;
  --success-soft: #eefaf3;

  --danger: #c05656;
  --danger-soft: #fff5f5;

  --shadow:
    0 8px 24px rgba(31, 42, 68, 0.08);
}


body {
  margin: 0;

  font-family:
    Arial,
    sans-serif;

  background:
    var(--bg);

  color:
    var(--text);
}


.hidden {
  display: none !important;
}


/* =========================================================
   GLOBAL COMMAND HEADER
========================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;

  display: flex;
  align-items: stretch;
  gap: 18px;

  min-height: 88px;
  padding: 0 28px;

  background:
    linear-gradient(
      135deg,
      #101828 0%,
      #172033 55%,
      #1d2939 100%
    );

  color: #ffffff;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );

  box-shadow:
    0 4px 14px
    rgba(
      16,
      24,
      40,
      0.14
    );
}


/* =========================================================
   BRAND
========================================================= */

.command-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 13px;

  padding-right: 21px;

  border-right:
    1px solid
    rgba(
      255,
      255,
      255,
      0.13
    );
}


.command-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 46px;

  width: 46px;
  height: 46px;

  border:
    2px solid
    rgba(
      255,
      255,
      255,
      0.88
    );

  border-radius: 50%;

  color: #ffffff;

  font-size: 25px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.06em;

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

  box-shadow:
    inset 0 0 0 4px
    rgba(
      255,
      255,
      255,
      0.035
    );
}


.brand {
  min-width: 205px;
  margin-right: 0;
}


.topbar h1 {
  margin: 0;

  color: #ffffff;

  font-size: 22px;
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -0.025em;

  white-space: nowrap;
}


.topbar p {
  margin: 5px 0 0;

  color: #b7c1d1;

  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;

  white-space: nowrap;
}


/* =========================================================
   GLOBAL BUTTON BASE
========================================================= */

button {
  padding:
    10px 15px;

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

  border-radius:
    8px;

  background:
    white;

  color:
    var(--text);

  font-size:
    13px;

  font-weight:
    700;

  cursor:
    pointer;
}


button:hover:not(:disabled) {
  background:
    #eef2ff;
}


button:disabled {
  opacity:
    0.4;

  cursor:
    default;
}


/* =========================================================
   TOPBAR ACTION BUTTONS
========================================================= */

.topbar > button {
  align-self: center;

  flex: 0 0 auto;

  min-height: 38px;

  padding:
    0 13px;

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

  border-color:
    rgba(
      255,
      255,
      255,
      0.18
    );

  border-radius: 8px;

  color:
    #f8fafc;

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

  box-shadow: none;

  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}


.topbar > button:hover:not(:disabled) {
  background:
    rgba(
      255,
      255,
      255,
      0.10
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.28
    );

  color: #ffffff;
}


/* =========================================================
   WORKSPACE TABS
   GLOBAL CLIENT NAVIGATION
========================================================= */

.workspace-tabs {
  position: static;

  z-index: auto;

  display: flex;
  align-items: stretch;

  flex: 1 1 auto;

  min-width: 0;

  gap: 0;

  padding: 0;

  background:
    transparent;

  border: 0;

  overflow-x:
    auto;

  overflow-y:
    hidden;

  scrollbar-width:
    none;
}


.workspace-tabs::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   WORKSPACE TAB
========================================================= */

.workspace-tab {
  position: relative;

  display: flex;
  align-items: center;

  flex:
    1 1 150px;

  min-width:
    138px;

  max-width:
    210px;

  gap: 9px;

  padding:
    17px 13px 15px;

  border: 0;

  border-left:
    1px solid
    rgba(
      255,
      255,
      255,
      0.07
    );

  border-radius: 0;

  background:
    transparent;

  color:
    #d6dce7;

  cursor:
    pointer;

  user-select:
    none;

  transition:
    background 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease;
}


.workspace-tab:last-child {
  border-right:
    1px solid
    rgba(
      255,
      255,
      255,
      0.07
    );
}


.workspace-tab:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.045
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.07
    );

  color:
    #ffffff;
}


/* =========================================================
   ACTIVE CLIENT
========================================================= */

.workspace-tab.active {
  background:
    rgba(
      255,
      255,
      255,
      0.065
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.07
    );

  color:
    #ffffff;

  box-shadow:
    inset 0 -3px 0
    #4f7cff;
}


.workspace-tab.active::after {
  content: "";

  position: absolute;

  left: 22%;
  right: 22%;
  bottom: 0;

  height: 3px;

  border-radius:
    3px 3px 0 0;

  background:
    #4f7cff;

  box-shadow:
    0 -2px 10px
    rgba(
      79,
      124,
      255,
      0.36
    );
}


/* =========================================================
   DRAG STATES
========================================================= */

.workspace-tab.dragging {
  opacity:
    0.45;
}


.workspace-tab.drag-over {
  background:
    rgba(
      79,
      124,
      255,
      0.13
    );

  box-shadow:
    inset 0 -3px 0
    #4f7cff;
}


/* =========================================================
   WORKSPACE EMOJI
========================================================= */

.workspace-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 34px;

  width: 34px;
  height: 34px;

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

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

  border-radius:
    8px;

  font-size:
    19px;

  line-height: 1;
}


.workspace-tab.active
.workspace-tab-icon {
  background:
    rgba(
      255,
      255,
      255,
      0.08
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.10
    );
}


/* =========================================================
   WORKSPACE LABELS
========================================================= */

.workspace-tab-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  min-width:
    0;
}


.workspace-tab-name {
  overflow: hidden;

  color:
    inherit;

  font-size:
    13px;

  line-height:
    1.2;

  font-weight:
    800;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.workspace-tab-description {
  overflow: hidden;

  margin-top:
    3px;

  color:
    #9facbf;

  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    500;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.workspace-tab.active
.workspace-tab-description {
  color:
    #c7d2e5;
}


/* =========================================================
   DRAG HANDLE
========================================================= */

.workspace-drag-handle {
  margin-left:
    auto;

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

  font-size:
    11px;

  cursor:
    grab;

  transition:
    color 120ms ease;
}


.workspace-tab:hover
.workspace-drag-handle {
  color:
    rgba(
      255,
      255,
      255,
      0.52
    );
}


/* =========================================================
   RESPONSIVE GLOBAL HEADER
========================================================= */

@media
(max-width: 1150px) {

  .topbar {
    gap: 12px;

    padding:
      0 18px;
  }


  .command-brand {
    padding-right:
      15px;
  }


  .command-brand-mark {
    flex-basis:
      40px;

    width:
      40px;

    height:
      40px;

    font-size:
      22px;
  }


  .brand {
    min-width:
      180px;
  }


  .topbar h1 {
    font-size:
      19px;
  }


  .topbar p {
    font-size:
      10px;
  }


  .workspace-tab {
    min-width:
      126px;

    padding-left:
      10px;

    padding-right:
      10px;
  }


  .workspace-tab-icon {
    flex-basis:
      30px;

    width:
      30px;

    height:
      30px;

    font-size:
      17px;
  }


  .workspace-tab-name {
    font-size:
      12px;
  }


  .workspace-tab-description {
    font-size:
      9px;
  }

}


@media
(max-width: 850px) {

  .command-brand-mark {
    display:
      none;
  }


  .brand {
    min-width:
      160px;
  }


  .workspace-tab-description {
    display:
      none;
  }


  .workspace-tab {
    min-width:
      100px;
  }

}

/* =========================================================
   CONTROLS
========================================================= */

.controls {
  display: flex;

  align-items: center;

  gap: 20px;

  padding:
    17px 28px;

  background:
    white;

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


.controls input[type="search"] {
  width:
    480px;

  max-width:
    100%;

  padding:
    12px 14px;

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

  border-radius:
    9px;

  background:
    var(--surface-soft);

  font-size:
    14px;
}


.controls input[type="search"]:focus {
  outline:
    3px solid
    var(--accent-soft);

  border-color:
    var(--accent);

  background:
    white;
}


#resultCount,
#arcResultCount,
#abacoResultCount {
  color:
    var(--muted);

  font-size:
    13px;

  font-weight:
    600;
}


.workspace-status,
#recordStatus,
#arcRecordStatus,
#abacoRecordStatus {
  min-height:
    42px;

  padding:
    12px 28px;

  color:
    var(--muted);

  font-size:
    13px;

  font-weight:
    600;
}


/* =========================================================
   TABLES
========================================================= */

#tableContainer,
#arcTableContainer,
#abacoTableContainer {
  overflow:
    auto;

  margin:
    0 28px 28px;

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

  background:
    white;

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

  border-radius:
    12px;

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


table {
  width:
    100%;

  border-collapse:
    separate;

  border-spacing:
    0;

  font-size:
    13px;
}


th,
td {
  padding:
    12px 14px;

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

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

  text-align:
    left;

  vertical-align:
    middle;
}


th {
  position:
    sticky;

  top:
    0;

  z-index:
    10;

  background:
    #eef2f7;

  font-weight:
    800;
}


tbody tr {
  cursor:
    pointer;
}


tbody tr:hover {
  background:
    #f4f7ff;
}


/* =========================================================
   RECORD
========================================================= */

.record-toolbar {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  padding:
    14px 28px;

  background:
    white;

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


.record-header {
  padding:
    27px 28px;

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


.sufyl-record-header {
  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #f7f9fc
    );
}


.arc-record-header {
  background:
    linear-gradient(
      135deg,
      #f6f1e9,
      #faf8f4
    );
}


.abaco-record-header {
  background:
    linear-gradient(
      135deg,
      #eef7ff,
      #f7fbff
    );
}


.record-label {
  margin-bottom:
    6px;

  color:
    var(--accent);

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.09em;
}


.record-header h2 {
  margin: 0;

  font-size:
    29px;
}


#recordMeta,
#arcRecordMeta,
#abacoRecordMeta {
  margin-top:
    8px;

  color:
    var(--muted);

  font-size:
    14px;
}


#recordFields,
#arcRecordFields,
#abacoRecordFields {
  padding:
    0 28px 35px;
}


/* =========================================================
   SECTIONS
========================================================= */

.crm-section {
  margin-bottom:
    28px;
}


.crm-section-title {
  margin:
    0 0 11px;

  color:
    #364152;

  font-size:
    14px;

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;
}


.crm-field-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        280px,
        1fr
      )
    );

  gap:
    14px;
}


.field-card {
  padding:
    15px;

  background:
    white;

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

  border-radius:
    11px;

  box-shadow:
    0 4px 14px
    rgba(
      31,
      42,
      68,
      0.05
    );
}


.field-label {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    8px;

  color:
    var(--muted);

  font-size:
    12px;

  font-weight:
    800;
}


.field-column {
  padding:
    3px 7px;

  border-radius:
    999px;

  background:
    var(--accent-soft);

  color:
    var(--accent);

  font-size:
    10px;
}
.field-card input[type="text"],
.field-card input[type="number"],
.field-card input[type="date"],
.field-card input[type="datetime-local"],
.field-card textarea {
  width:
    100%;

  padding:
    10px 11px;

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

  border-radius:
    7px;

  background:
    var(--surface-soft);

  color:
    var(--text);

  font:
    inherit;
}


.field-card input:focus,
.field-card textarea:focus {
  outline:
    3px solid
    var(--accent-soft);

  border-color:
    var(--accent);

  background:
    white;
}


.field-card textarea {
  min-height:
    125px;

  resize:
    vertical;
}


.notes-field {
  grid-column:
    1 / -1;
}


/* =========================================================
   CHECKBOX
========================================================= */

.checkbox-control {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-height:
    44px;

  padding:
    10px 12px;

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

  border-radius:
    8px;

  background:
    var(--surface-soft);

  font-size:
    14px;

  font-weight:
    700;

  cursor:
    pointer;
}


.checkbox-control input {
  width:
    20px;

  height:
    20px;

  accent-color:
    var(--accent);
}


/* =========================================================
   READ ONLY
========================================================= */

.readonly-field {
  background:
    #f4f6f8;

  border-style:
    dashed;
}


.readonly-value {
  min-height:
    41px;

  padding:
    10px 11px;

  border-radius:
    7px;

  background:
    #edf1f5;

  color:
    #5f6878;

  white-space:
    pre-wrap;

  word-break:
    break-word;
}


/* =========================================================
   SAVE STATES
========================================================= */

.saving {
  opacity:
    0.6;
}


.saved {
  border-color:
    #8dc9a4 !important;

  background:
    var(--success-soft) !important;
}


.save-error {
  border-color:
    #e1a3a3 !important;

  background:
    var(--danger-soft) !important;
}


/* =========================================================
   SEARCHABLE DROPDOWN
========================================================= */

.searchable-dropdown {
  position:
    relative;

  width:
    100%;
}


.searchable-dropdown-input {
  width:
    100% !important;

  padding:
    10px 34px 10px 11px !important;

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

  border-radius:
    7px !important;

  background:
    var(--surface-soft) !important;

  font:
    inherit !important;

  font-weight:
    600 !important;
}


.searchable-dropdown::after {
  content:
    "⌄";

  position:
    absolute;

  top:
    10px;

  right:
    11px;

  color:
    var(--muted);

  pointer-events:
    none;
}


.searchable-dropdown-menu {
  position:
    absolute;

  top:
    calc(100% + 5px);

  left:
    0;

  right:
    0;

  z-index:
    1000;

  max-height:
    260px;

  overflow-y:
    auto;

  padding:
    5px;

  background:
    white;

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

  border-radius:
    9px;

  box-shadow:
    0 12px 28px
    rgba(
      31,
      42,
      68,
      0.16
    );
}


.searchable-dropdown-option {
  padding:
    9px 10px;

  border-radius:
    6px;

  font-size:
    13px;

  cursor:
    pointer;
}


.searchable-dropdown-option:hover,
.searchable-dropdown-option.highlighted {
  background:
    var(--accent-soft);

  color:
    var(--accent);
}


.searchable-dropdown-empty {
  padding:
    12px;

  color:
    var(--muted);

  text-align:
    center;

  font-size:
    12px;
}


/* =========================================================
   CONTACT DATE RANGE
========================================================= */

.field-card:has(.datetime-range-control) {
  grid-column:
    span 2;
}

.datetime-range-control {
  display:
    grid;

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

  gap:
    12px;
}


.datetime-range-group {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


.datetime-range-label {
  color:
    var(--muted);

  font-size:
    10px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.05em;
}


/* =========================================================
   UNDO / REDO
========================================================= */

.crm-history-controls {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  margin-right:
    12px;
}


.crm-history-controls button {
  min-width:
    82px;

  padding:
    9px 12px;

  border-color:
    rgba(
      255,
      255,
      255,
      0.22
    );

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

  color:
    white;
}


.crm-history-controls button:hover:not(:disabled) {
  background:
    rgba(
      255,
      255,
      255,
      0.16
    );
}


.crm-history-status {
  margin-left:
    5px;

  color:
    #cbd5e1;

  font-size:
    11px;

  white-space:
    nowrap;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media
(max-width: 700px) {

  .datetime-range-control {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   ARC GROVE — PHONE / GOOGLE MEET
========================================================= */

.arc-interaction-project {
  width: 100%;
}

.arc-interaction-shell {
  background: #ffffff;
  border: 1px solid #dfe5ec;
  border-radius: 14px;
  padding: 20px;
}

.arc-interaction-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  margin-bottom: 18px;
}

.arc-interaction-header h2 {
  margin: 3px 0 5px;
  font-size: 20px;
}

.arc-interaction-header p {
  margin: 0;

  color: #6b7688;
  font-size: 13px;
}

.arc-interaction-eyebrow {
  color: #7a8494;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.arc-interaction-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.arc-interaction-context-grid {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(150px, 1fr)
    );
  gap: 10px;
  margin-bottom: 14px;
}


.arc-interaction-context-grid
.arc-interaction-field {
  margin-bottom: 0;
}


.arc-interaction-context-grid select {
  width: 100%;
  min-height: 40px;

  padding: 9px 10px;

  border:
    1px solid #ccd4df;

  border-radius: 8px;

  background: #ffffff;
  color: #172033;

  font: inherit;
  font-size: 12px;
}


.arc-interaction-context-grid select:focus {
  outline: none;

  border-color: #3158d3;

  box-shadow:
    0 0 0 2px
    rgba(49, 88, 211, 0.08);
}


.arc-interaction-output-panel {
  margin-top: 4px;
}


@media (max-width: 900px) {

  .arc-interaction-context-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(150px, 1fr)
      );
  }

}

.arc-interaction-input-panel,
.arc-interaction-output-panel {
  min-width: 0;

  background: #f8fafc;
  border: 1px solid #e1e6ed;
  border-radius: 12px;

  padding: 16px;
}

.arc-interaction-field {
  margin-bottom: 14px;
}

.arc-interaction-field:last-child {
  margin-bottom: 0;
}

.arc-interaction-field label {
  display: block;

  margin-bottom: 6px;

  color: #566174;

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

.arc-interaction-field input,
.arc-interaction-field textarea {
  width: 100%;

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

  padding: 10px;

  background: #ffffff;
  color: #172033;

  font: inherit;
  font-size: 13px;
}

.arc-interaction-field textarea {
  min-height: 118px;
  resize: vertical;
}

.arc-interaction-input-panel
.arc-interaction-field
textarea {
  min-height: 280px;
}

.arc-interaction-field input:focus,
.arc-interaction-field textarea:focus {
  outline: none;

  border-color: #3158d3;

  box-shadow:
    0 0 0 2px
    rgba(49, 88, 211, 0.08);
}

.arc-interaction-field textarea[readonly],
.arc-interaction-field input[readonly] {
  background: #ffffff;
}

/* =========================================================
   ARC GROVE — CALL / MEETING TYPE
========================================================= */

.arc-interaction-type {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-bottom: 0;
}


.arc-interaction-type-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  min-height: 42px;

  padding:
    9px 18px;

  border:
    1px solid #d8dee8;

  border-radius: 9px;

  background: #ffffff;

  color: #344054;

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

  cursor: pointer;

  box-shadow:
    0 1px 2px
    rgba(16, 24, 40, 0.03);
}


.arc-interaction-type-button:hover {
  background: #f8fafc;

  border-color: #c7d0dc;
}


.arc-interaction-type-button.active {
  background: #ffffff;

  border-color: #b9c5d4;

  color: #101828;

  box-shadow:
    0 2px 5px
    rgba(16, 24, 40, 0.08);
}

/* =========================================================
   ARC GROVE — INTERACTION TOP AREA
========================================================= */

.arc-interaction-top {
  display: grid;

  grid-template-columns:
    minmax(300px, 0.38fr)
    minmax(620px, 0.62fr);

  gap: 22px;

  align-items: stretch;

  margin-bottom: 18px;
}


.arc-interaction-top-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-width: 0;

  padding:
    4px 0;
}


.arc-interaction-top-right {
  min-width: 0;
}


.arc-interaction-top-right
.arc-dimension-converter {
  height: 100%;

  margin-top: 0;

  padding: 15px 17px;

  background: #ffffff;

  border:
    1px solid #dce3ec;

  border-radius: 13px;

  box-shadow:
    0 3px 10px
    rgba(16, 24, 40, 0.06);
}


@media (max-width: 1050px) {

  .arc-interaction-top {
    grid-template-columns:
      1fr;
  }

}

/* =========================================================
   ARC GROVE — DIMENSION CONVERTER
========================================================= */

.arc-dimension-converter {
  margin-top: 18px;

  padding: 14px;

  border:
    1px solid #dfe5ec;

  border-radius: 10px;

  background:
    #ffffff;
}


.arc-dimension-header {
  margin-bottom: 12px;
}


.arc-dimension-header strong {
  display: block;

  color:
    #172033;

  font-size: 13px;
}


.arc-dimension-header span {
  display: block;

  margin-top: 3px;

  color:
    #7a8494;

  font-size: 11px;
}


.arc-dimension-table {
  display: grid;

  grid-template-columns:
    90px
    minmax(90px, 1fr)
    minmax(150px, 1.35fr)
    minmax(110px, 1fr);

  gap: 8px;

  align-items: center;
}


.arc-dimension-row {
  display: contents;
}


.arc-dimension-heading {
  color:
    #667085;

  font-size: 10px;

  font-weight: 800;

  text-transform: uppercase;
}


.arc-dimension-name {
  color:
    #344054;

  font-size: 12px;

  font-weight: 800;
}


.arc-dimension-table input {
  width: 100%;

  padding:
    8px 9px;

  border:
    1px solid #ccd4df;

  border-radius: 7px;

  background:
    #ffffff;

  color:
    #172033;

  font-size: 12px;
}


.arc-feet-inch-group {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 6px;
}


.arc-dimension-table input:focus {
  outline: none;

  border-color:
    #3158d3;

  box-shadow:
    0 0 0 2px
    rgba(
      49,
      88,
      211,
      0.08
    );
}


@media (
  max-width: 760px
) {

  .arc-dimension-table {
    grid-template-columns:
      75px
      1fr;
  }


  .arc-dimension-heading {
    display: none;
  }


  .arc-dimension-row {
    display: grid;

    grid-column:
      1 / -1;

    grid-template-columns:
      75px
      1fr;

    gap: 7px;

    padding:
      8px 0;

    border-bottom:
      1px solid #eef1f5;
  }

}

/* =========================================================
   ARC GROVE — CLIENT SEARCH RESULTS
========================================================= */

.arc-client-search-results {
  display: none;

  max-height: 220px;
  overflow-y: auto;

  margin-top: 5px;

  background: #ffffff;
  border: 1px solid #dfe5ec;
  border-radius: 8px;

  box-shadow:
    0 8px 22px
    rgba(23, 32, 51, 0.08);
}

.arc-client-search-results.open {
  display: block;
}

.arc-client-search-result {
  padding: 9px 10px;

  border-bottom: 1px solid #eef1f5;

  cursor: pointer;
}

.arc-client-search-result:last-child {
  border-bottom: none;
}

.arc-client-search-result:hover {
  background: #f5f7fb;
}

.arc-client-search-result-name {
  font-size: 13px;
  font-weight: 700;
}

.arc-client-search-result-meta {
  margin-top: 2px;

  color: #7a8494;
  font-size: 11px;
}

.arc-client-context {
  margin-top: 8px;

  padding: 10px 12px;

  border:
    1px solid #dfe5ec;

  border-radius: 8px;

  background:
    #ffffff;
}


.arc-client-context strong {
  display: block;

  color:
    #172033;

  font-size: 12px;
}


.arc-client-context-meta {
  margin-top: 4px;

  color:
    #667085;

  font-size: 10px;

  line-height: 1.5;
}

.arc-client-context-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 9px;
}


.arc-client-context-button {
  padding:
    7px 10px;

  border:
    1px solid #ccd4df;

  border-radius: 7px;

  background:
    #ffffff;

  color:
    #344054;

  font-size: 10px;

  font-weight: 800;

  cursor: pointer;
}


.arc-client-context-button:hover {
  background:
    #f5f7fb;

  border-color:
    #aeb8c6;
}

/* =========================================================
   ARC GROVE — MANGO
========================================================= */

.arc-mango-action {
  display: flex;
  justify-content: flex-end;

  margin-top: 4px;
}

.arc-mango-button {
  padding: 10px 18px;

  border: none;
  border-radius: 8px;

  background: #3158d3;
  color: #ffffff;

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

  cursor: pointer;
}

.arc-mango-button:hover {
  opacity: 0.92;
}

.arc-mango-button:disabled {
  opacity: 0.55;
  cursor: wait;
}


/* =========================================================
   ARC GROVE — KNOWLEDGE BASE
========================================================= */

.arc-knowledge-shell {
  background: #ffffff;
  border: 1px solid #dfe5ec;
  border-radius: 14px;

  padding: 20px;
}

.arc-knowledge-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;

  margin-bottom: 18px;
}

.arc-knowledge-header h2 {
  margin: 3px 0 5px;

  font-size: 20px;
}

.arc-knowledge-header p {
  margin: 0;

  color: #6b7688;
  font-size: 13px;
}

.arc-knowledge-sync-status {
  flex-shrink: 0;

  padding: 7px 10px;

  background: #eef2f7;
  border-radius: 7px;

  color: #566174;

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

.arc-knowledge-base-mount {
  min-height: 360px;
}

.arc-knowledge-loading {
  display: flex;
  flex-direction: column;

  gap: 6px;

  padding: 28px;

  background: #f8fafc;
  border: 1px dashed #ccd4df;
  border-radius: 10px;

  color: #566174;

  text-align: center;
}

.arc-knowledge-loading strong {
  color: #172033;
  font-size: 14px;
}

.arc-knowledge-loading span {
  font-size: 12px;
}


/* =========================================================
   ARC GROVE — RESPONSIVE
========================================================= */

@media (
  max-width: 1050px
) {

  .arc-interaction-grid {
    grid-template-columns: 1fr;
  }

}

.arc-interaction-client-grid {
  display: grid;

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

  gap: 12px;

  align-items: start;
}


.arc-interaction-client-grid
.arc-interaction-field {
  position: relative;
}


@media (max-width: 800px) {

  .arc-interaction-client-grid {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   STICKY CLIENT-SPECIFIC TOOLBARS
   Sits directly below the global Client Command Center header
========================================================= */


/* =========================================================
   SUFYL — REGISTRANTS / SALES
========================================================= */

#sufylProjectTabs {
  position: sticky;
  top: 88px;
  z-index: 85;

  background: #f8fafc;

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

  box-shadow:
    0 3px 8px
    rgba(16, 24, 40, 0.045);
}


/* =========================================================
   ARC GROVE — COMPACT STICKY COMMAND BAR
========================================================= */

#arcGroveProjectTabs {
  position: sticky;
  top: 88px;
  z-index: 85;

  display: flex;
  align-items: center;
  flex-wrap: nowrap;

  width: 100%;
  min-height: 58px;

  gap: 6px;

  margin: 0 !important;
  padding: 9px 14px;

  background:
    rgba(248, 250, 252, 0.98);

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

  box-shadow:
    0 3px 8px
    rgba(16, 24, 40, 0.045);

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;
}


#arcGroveProjectTabs::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   ARC GROVE — PRIMARY PROJECT TABS
========================================================= */

#arcGroveProjectTabs
.project-tab {
  flex: 0 0 auto;

  min-height: 38px;

  padding:
    0 12px;

  border:
    1px solid
    #d7dee8;

  border-radius:
    999px;

  background:
    #ffffff;

  color:
    #475467;

  font-size:
    12px;

  font-weight:
    800;

  white-space:
    nowrap;

  box-shadow:
    0 1px 2px
    rgba(16, 24, 40, 0.03);
}


#arcGroveProjectTabs
.project-tab:hover {
  background:
    #f7f9fc;

  border-color:
    #c6d0dc;
}


#arcGroveProjectTabs
.project-tab.active {
  background:
    #3158d3;

  border-color:
    #3158d3;

  color:
    #ffffff;

  box-shadow:
    0 4px 10px
    rgba(49, 88, 211, 0.18);
}


/* =========================================================
   ARC GROVE — SEARCH ICON
========================================================= */

#arcCompactSearchButton {
  appearance: none;

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

  flex: 0 0 36px;

  width: 36px;
  height: 36px;

  min-width: 36px;
  min-height: 36px;

  padding: 0;

  border:
    1px solid
    #cbd5e1;

  border-radius:
    8px;

  background:
    #ffffff;

  color:
    #344054;

  font-size:
    13px;

  cursor: pointer;

  box-shadow:
    0 1px 2px
    rgba(16, 24, 40, 0.03);
}


#arcCompactSearchButton:hover,
#arcCompactSearchButton[aria-expanded="true"] {
  background:
    #f5f7ff;

  border-color:
    #8ea5ed;
}


/* =========================================================
   ARC GROVE — FILTER GROUP
========================================================= */

#arcRelationshipBar {
  display: inline-flex;
  align-items: center;

  flex: 0 0 auto;

  gap: 5px;

  margin:
    0 0 0 4px;

  white-space:
    nowrap;
}


/* =========================================================
   ARC GROVE — FILTER PILLS
========================================================= */

#arcGroveProjectTabs
.arc-rel-filter {
  appearance: none;

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

  flex: 0 0 auto;

  min-height: 34px;

  padding:
    0 9px;

  border:
    1px solid
    #d6dde7;

  border-radius:
    999px;

  background:
    #ffffff;

  color:
    #475467;

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    800;

  white-space:
    nowrap;

  cursor:
    pointer;

  box-shadow:
    0 1px 2px
    rgba(16, 24, 40, 0.025);
}


#arcGroveProjectTabs
.arc-rel-filter:hover:not(.active) {
  background:
    #f7f9fc;

  border-color:
    #c5ceda;
}


#arcGroveProjectTabs
.arc-rel-filter.active {
  background:
    #101828;

  border-color:
    #101828;

  color:
    #ffffff;
}


/* =========================================================
   ARC GROVE — SHORT RECENT BUTTONS
========================================================= */

#arcGroveProjectTabs
.arc-recent-filter {
  min-width:
    35px;

  padding:
    0 8px;
}


/* =========================================================
   ARC GROVE — RECENT LABEL
========================================================= */

.arc-compact-recent-label {
  flex:
    0 0 auto;

  margin-left:
    0;

  color:
    #667085;

  font-size:
    10px;

  font-weight:
    800;

  white-space:
    nowrap;
}


/* =========================================================
   ARC GROVE — VERTICAL DIVIDERS
========================================================= */

.arc-compact-divider {
  display:
    block;

  flex:
    0 0 1px;

  width:
    1px;

  height:
    27px;

  margin:
    0 3px;

  background:
    #d9e0e8;
}


/* =========================================================
   ARC GROVE — NEW INTAKE
========================================================= */

#arcGroveProjectTabs
.arc-new-intake-button {
  appearance:
    none;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  flex-shrink:
    0;

  min-height:
    36px;

  margin:
    0 0 0 auto;

  padding:
    0 12px;

  border:
    1px solid
    #101828;

  border-radius:
    8px;

  background:
    #101828;

  color:
    #ffffff;

  font-size:
    11px;

  font-weight:
    850;

  white-space:
    nowrap;

  cursor:
    pointer;

  box-shadow:
    0 2px 5px
    rgba(16, 24, 40, 0.12);
}


#arcGroveProjectTabs
.arc-new-intake-button:hover {
  background:
    #1d2939;

  border-color:
    #1d2939;
}

/* =========================================================
   ARC GROVE — OLD SEARCH ROW
   HIDDEN UNLESS SEARCH IS OPEN
========================================================= */

#arcListView
> .controls.arc-compact-controls {
  display:
    none;

  min-height:
    0;

  margin:
    0;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  box-shadow:
    none;
}


#arcListView
> .controls.arc-compact-controls.arc-search-open {
  display:
    flex;

  align-items:
    center;

  padding:
    10px 20px;

  background:
    #ffffff;

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


/* =========================================================
   EXPANDING SEARCH FIELD
========================================================= */

.arc-compact-search-wrap {
  display:
    none;

  position:
    relative;

  width:
    min(
      640px,
      100%
    );
}


.arc-compact-search-wrap.open {
  display:
    block;
}


#arcListView
.arc-compact-search-input,
#arcListView
input.arc-compact-search-input {
  width:
    100%;

  max-width:
    none;

  min-height:
    42px;

  padding:
    9px 42px 9px 13px;

  border:
    1px solid
    #cbd5e1;

  border-radius:
    9px;

  background:
    #ffffff;

  color:
    #172033;

  font-size:
    13px;
}


.arc-compact-search-close {
  position:
    absolute;

  top:
    50%;

  right:
    6px;

  transform:
    translateY(-50%);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    30px;

  height:
    30px;

  min-width:
    30px;

  min-height:
    30px;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    #667085;

  font-size:
    20px;

  line-height:
    1;
}


.arc-compact-search-close:hover {
  background:
    #f2f4f7;
}


/* =========================================================
   RESULT COUNT
   Not shown in the compact design
========================================================= */

#arcListView
> .controls.arc-compact-controls
#arcResultCount {
  display:
    none;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
  max-width: 1180px
) {

  #arcGroveProjectTabs {
    padding-left:
      14px;

    padding-right:
      14px;
  }


  #arcRelationshipBar {
    margin-left:
      4px;
  }

}


/* =========================================================
   ABACO — SEARCH BAR
========================================================= */

#abacoListView > .controls {
  position: sticky;
  top: 88px;
  z-index: 85;

  background: #ffffff;

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

  box-shadow:
    0 3px 8px
    rgba(16, 24, 40, 0.045);
}

/* =========================================================
   ARC GROVE — HIDE BACKGROUND SYSTEM STATUS BANNER
   Priority + Zoho sync continue working silently.
========================================================= */

#arcGroveWorkspace .arc-pipeline-priority-banner {
  display: none !important;
}