/* Customer card — a dedicated, scoped visual layer. */
/* Company identity is shared by customer lists, project rows and the side panel. */
[data-customer-avatar] { position: relative; }
.customer-avatar { background: linear-gradient(135deg, #00b4d8, #0077b6); }
.customer-avatar-compact { width: 26px; height: 26px; font-size: 10px; }
[data-customer-avatar] .customer-logo-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  background: #fff;
}
[data-customer-avatar] .customer-logo-initials { line-height: 1; }
#page-customer-card {
  --customer-ink: #15374d;
  --customer-muted: #7890a2;
  --customer-line: #e2edf3;
  --customer-cyan: #009fc5;
  --customer-teal: #11bea5;
  --customer-tint: #edfafd;
  --customer-shadow: 0 18px 44px rgba(17, 61, 83, .08);
  padding: 20px 24px 32px;
  background: radial-gradient(circle at 8% 0%, #dff8f7 0, transparent 27%), linear-gradient(160deg, #f8fcfe, #f1f7fa);
}
#page-customer-card .customer-card-empty-page {
  min-height: 440px;
  border: 1px dashed #b8dce8;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--customer-shadow);
}
#page-customer-card .customer-card-page { gap: 18px; }
#page-customer-card .customer-card-hero {
  isolation: isolate;
  overflow: hidden;
  padding: 25px 28px 22px;
  color: var(--customer-ink);
  background: linear-gradient(135deg, #fff 0%, #fff 63%, #e8fbfa 100%);
  border: 1px solid #e3eff4;
  border-top: 5px solid var(--customer-cyan);
  border-radius: 20px;
  box-shadow: var(--customer-shadow);
}
#page-customer-card .customer-card-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  left: -168px;
  bottom: -285px;
  background: radial-gradient(circle, rgba(0, 180, 216, .13), transparent 67%);
}
#page-customer-card .customer-card-hero::after { height: 3px; background: linear-gradient(90deg, var(--customer-teal), var(--customer-cyan)); }
#page-customer-card .customer-card-hero-top { align-items: center; gap: 22px; }
#page-customer-card .customer-card-hero-main { gap: 14px; }
#page-customer-card .customer-logo-picker:focus-visible { outline: 2px solid var(--customer-cyan); outline-offset: 4px; }
#page-customer-card .customer-card-avatar {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--customer-cyan), var(--customer-teal));
  box-shadow: 0 10px 24px rgba(0, 159, 197, .22);
  font-size: 21px;
}
#page-customer-card .customer-logo-picker {
  position: relative;
  padding: 0;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
#page-customer-card .customer-logo-image {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  border-radius: inherit;
  object-fit: cover;
  background: #fff;
}
#page-customer-card .customer-logo-initials { line-height: 1; }
#page-customer-card .customer-logo-edit {
  position: absolute;
  inset-inline-end: -4px;
  bottom: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #0788af;
  box-shadow: 0 2px 6px rgba(17, 61, 83, .15);
  pointer-events: none;
}
#page-customer-card .customer-logo-edit svg { width: 12px; height: 12px; }
#page-customer-card .customer-logo-picker:hover:not(:disabled) .customer-logo-edit { background: #076c8a; }
#page-customer-card .customer-logo-picker:disabled { cursor: default; }
#page-customer-card .customer-logo-picker:disabled:not([aria-busy="true"]) .customer-logo-edit { display: none; }
#page-customer-card .customer-logo-picker[aria-busy="true"] { cursor: wait; opacity: .65; }
#page-customer-card .customer-card-kicker { color: var(--customer-cyan); font-size: 11px; letter-spacing: .02em; }
#page-customer-card .customer-card-name { color: var(--customer-ink); font-size: clamp(25px, 2.1vw, 33px); letter-spacing: -.02em; }
#page-customer-card .customer-card-sub { color: #416377; font-size: 14px; font-weight: 700; }
#page-customer-card .customer-card-meta { color: var(--customer-muted); font-size: 11px; }
#page-customer-card .customer-card-actions { gap: 8px; }
#page-customer-card .customer-period-wrap {
  border-color: #d8e9f0;
  border-radius: 10px;
  background: #f6fbfd;
  color: #547889;
  padding: 6px 9px;
}
#page-customer-card .customer-period-wrap select { border: 1px solid #d8e9f0; color: var(--customer-ink); background: #fff; }
#page-customer-card .customer-hero-edit-btn {
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #0788af, var(--customer-cyan));
  box-shadow: 0 8px 18px rgba(0, 159, 197, .2);
}
#page-customer-card .customer-hero-edit-btn:hover { background: #087eaa; }
#page-customer-card .customer-card-hero-stats { gap: 12px; margin-top: 20px; }
#page-customer-card .customer-card-hero-stat {
  position: relative;
  overflow: hidden;
  min-height: 92px;
  border-color: #e0edf3;
  border-radius: 13px;
  background: rgba(255, 255, 255, .76);
  padding: 14px 16px;
}
#page-customer-card .customer-card-hero-stat::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 4px; background: var(--customer-cyan); }
#page-customer-card .customer-card-hero-stat:nth-child(2)::before { background: #16bca1; }
#page-customer-card .customer-card-hero-stat:nth-child(3)::before { background: #8871e6; }
#page-customer-card .customer-card-hero-stat:nth-child(4)::before { background: #efa41a; }
#page-customer-card .customer-card-hero-stat-value { color: var(--customer-ink); font-size: 25px; min-height: 29px; }
#page-customer-card .customer-card-hero-stat-label { color: var(--customer-muted); font-size: 10.5px; font-weight: 700; }
#page-customer-card .customer-page-tabs {
  position: relative;
  z-index: 1;
  gap: 7px;
  padding: 0 3px;
}
#page-customer-card .customer-tab-btn {
  border-color: #dbe9ef;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: #557488;
  padding: 8px 14px;
  font-size: 11.5px;
  font-weight: 800;
  box-shadow: 0 3px 9px rgba(18, 58, 77, .035);
}
#page-customer-card .customer-tab-btn:hover { border-color: #9ad9e9; color: #087eaa; background: #fff; }
#page-customer-card .customer-tab-btn.active { border-color: transparent; background: linear-gradient(135deg, #173a55, #087eaa); color: #fff; box-shadow: 0 7px 16px rgba(11, 100, 137, .16); }
#page-customer-card .customer-profile-grid { gap: 18px; }
#page-customer-card :is(.customer-profile-panel, .customer-bi-panel, .customer-tab-shell > .panel-section) {
  border-color: #e1edf3;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--customer-shadow);
}
#page-customer-card :is(.customer-profile-panel, .customer-bi-panel) { padding: 20px; }
#page-customer-card .customer-profile-head, #page-customer-card .customer-bi-head {
  align-items: center;
  margin-bottom: 17px;
  padding-bottom: 14px;
  border-color: var(--customer-line);
}
#page-customer-card :is(.customer-profile-title, .customer-bi-title) { color: var(--customer-ink); font-size: 17px; }
#page-customer-card :is(.customer-profile-sub, .customer-bi-sub) { color: var(--customer-muted); font-size: 11px; }
#page-customer-card .customer-profile-head .row-btn { border-radius: 8px; border-color: #cdeaf2; background: #f1fbfe; color: #0787ad; }
#page-customer-card .customer-editable-detail-grid { gap: 9px; }
#page-customer-card .customer-editable-field {
  border-color: #e0edf3;
  border-radius: 11px;
  background: linear-gradient(145deg, #fff, #f7fbfd);
  padding: 12px 13px;
}
#page-customer-card .customer-editable-field:hover { border-color: #9eddec; box-shadow: 0 8px 17px rgba(0, 159, 197, .09); }
#page-customer-card .customer-editable-field-label { color: #148cac; font-size: 10px; }
#page-customer-card .customer-editable-field-value { color: var(--customer-ink); font-size: 12.5px; }
#page-customer-card .customer-editable-field-hint { color: var(--customer-muted); }
#page-customer-card .customer-bi-grid { gap: 10px; }
#page-customer-card .customer-bi-card {
  border-color: #e0edf3;
  border-top-width: 3px;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, #f8fcfd);
  padding: 13px;
}
#page-customer-card .customer-bi-label { color: #668196; }
#page-customer-card .customer-bi-value { color: var(--customer-ink); font-size: 25px; }
#page-customer-card .customer-bi-subline, #page-customer-card .customer-bi-hour-bank-meta { color: var(--customer-muted); font-size: 10.5px; }
#page-customer-card .customer-bi-hour-bank { padding: 12px; border: 1px solid #dcecf3; border-radius: 12px; background: #f8fcfe; }
#page-customer-card .customer-bi-note { border-color: #bde8f3; border-radius: 12px; background: linear-gradient(135deg, #effaff, #f0fcf9); color: #416478; font-size: 11.5px; }
#page-customer-card .customer-tab-shell { gap: 16px; }
#page-customer-card .customer-tab-shell > .panel-section { padding: 20px; }
#page-customer-card .customer-work-card, #page-customer-card .customer-contact-card,
#page-customer-card .customer-agreement-card, #page-customer-card .customer-document-card {
  border-color: #dfebf2;
  border-radius: 12px;
  box-shadow: 0 5px 13px rgba(18, 58, 77, .035);
}
#page-customer-card .customer-panel-placeholder { border-color: #cce5ee; border-radius: 14px; background: linear-gradient(145deg, #fbfeff, #f2fafc); }

@media screen and (max-width: 760px) {
  #page-customer-card { padding: 12px 12px 24px; }
  #page-customer-card .customer-card-hero { padding: 17px 16px 16px; border-radius: 16px; }
  #page-customer-card .customer-card-hero-top { gap: 14px; }
  #page-customer-card .customer-card-hero-main { gap: 10px; }
  #page-customer-card .customer-card-avatar { width: 52px; height: 52px; border-radius: 15px; }
  #page-customer-card .customer-card-actions { width: 100%; align-items: stretch; }
  #page-customer-card .customer-period-wrap, #page-customer-card .customer-hero-edit-btn { flex: 1 1 150px; justify-content: center; }
  #page-customer-card .customer-card-hero-stat { min-height: 80px; padding: 11px 12px; }
  #page-customer-card .customer-card-hero-stat-value { font-size: 21px; }
  #page-customer-card .customer-page-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: thin; }
  #page-customer-card .customer-tab-btn { flex: 0 0 auto; min-height: 38px !important; white-space: nowrap; }
  #page-customer-card :is(.customer-profile-panel, .customer-bi-panel, .customer-tab-shell > .panel-section) { border-radius: 15px; }
  #page-customer-card :is(.customer-profile-panel, .customer-bi-panel, .customer-tab-shell > .panel-section) { padding: 15px; }
}

@media screen and (max-width: 380px) {
  #page-customer-card .customer-card-hero-stats { grid-template-columns: minmax(0, 1fr); }
}