/* Shared workspace polish: desktop density, mobile touch targets and clear hierarchy. */
:root {
  --background: #f3f6f8;
  --border: #dbe3e6;
  --shadow-sm: 0 3px 16px rgba(20, 43, 35, .045);
  --radius-lg: 16px;
}

.page-shell { min-width: 0; padding-bottom: 2rem; }
.page-hero {
  background: linear-gradient(115deg, #fff 45%, #eef7f2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.page-hero h1 { letter-spacing: -.035em; }
.surface-card { background: #fff; box-shadow: var(--shadow-sm); }
.card-heading, .section-heading { gap: .85rem; }
.card-heading h2, .section-heading h2 { font-size: 1.1rem; letter-spacing: -.02em; }
.section-icon { border-radius: 12px; background: #eaf5ef; color: var(--primary); }
.field { min-width: 0; }
.field > span { font-size: .8rem; font-weight: 600; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  max-width: 100%;
  border-radius: 9px;
  border-color: var(--border);
  background-color: #fbfcfd;
}
.field input:focus, .field select:focus, .field textarea:focus {
  background-color: #fff;
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.btn { border-radius: 9px; font-weight: 600; }
.btn-primary { box-shadow: 0 2px 4px rgba(18, 63, 50, .12); }
.button-row { flex-wrap: wrap; gap: .6rem; }
.table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
.clients-directory-table thead th { background: #f4f7f8; color: #465c53; }
.clients-directory-table tbody tr:hover { background: #f6fbf8; }
.pagination { flex-wrap: wrap; gap: .4rem; }

#resultImportCard, #phoneRemovalQueue { padding: clamp(1rem, 2vw, 1.5rem); }
#resultImportCard { border-top: 3px solid #2e8960; scroll-margin-top: 6rem; }
#resultImportCard .eyebrow { color: #567168; font-size: .68rem; letter-spacing: .12em; }
#resultImportCard .card-heading { display: flex; align-items: center; margin-bottom: 1.2rem; }
.import-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.5rem; }
.import-guidance { color: var(--text-muted); font-size: .875rem; line-height: 1.65; }
.import-guidance p:first-child { margin-top: 0; }
#resultImportForm { padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: #f8fafb; min-width: 0; }
#resultImportFile { padding: .85rem; border: 1px dashed #9fb9ad; width: 100%; background: #fff; }
#resultImportFile::file-selector-button { border: 0; border-radius: 6px; background: #e7f2ec; color: #123f32; padding: .6rem .75rem; margin-right: .65rem; cursor: pointer; }
.inline-feedback:empty { display: none; }

#phoneRemovalDetails > summary { display: flex; align-items: center; gap: .65rem; cursor: pointer; font-weight: 700; list-style: none; min-height: 44px; }
#phoneRemovalDetails > summary::-webkit-details-marker { display: none; }
#phoneRemovalDetails > summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; color: var(--primary); }
#phoneRemovalDetails[open] > summary::after { content: "−"; }
.admin-area-label { background: #edf3f0; color: #395e4e; border-radius: 6px; font-size: .65rem; padding: .25rem .5rem; letter-spacing: .03em; }
#phoneRemovalDetails > p { color: var(--text-muted); font-size: .875rem; }
#phoneRemovalDetails > .button-row { align-items: end; margin-block: 1rem; }
#phoneRemovalRows { overflow-x: auto; border-radius: 10px; }
#phoneRemovalRows table { width: 100%; min-width: 740px; border-collapse: collapse; }
#phoneRemovalRows th { background: #f3f6f8; text-align: left; font-size: .75rem; color: #52645c; }
#phoneRemovalRows th, #phoneRemovalRows td { padding: .8rem; border-bottom: 1px solid var(--border); }
#phoneRemovalRows td { font-size: .85rem; vertical-align: middle; }
#phoneRemovalRows .btn { margin-block: .2rem; }
#phoneRemovalDialog { border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
#phoneRemovalDialog h2 { font-size: 1.2rem; margin-top: 0; }
#phoneRemovalDialog > p { color: var(--text-muted); font-size: .875rem; }

@media (max-width: 900px) {
  .import-workspace { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .clients-directory-table tbody tr { box-shadow: 0 2px 6px rgba(20, 43, 35, .04); }
  .clients-directory-table .contact-cell { min-width: 0; }
}
@media (max-width: 600px) {
  .page-shell { padding-inline: .75rem; }
  .page-hero { padding: 1.1rem; border-radius: 14px; }
  .page-hero h1 { font-size: 1.5rem; }
  .surface-card { border-radius: 14px; }
  .filters-grid, .users-form-grid, .whatsapp-config-grid, .editor-grid { grid-template-columns: minmax(0, 1fr); }
  .field-span-2 { grid-column: 1 / -1; }
  .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { font-size: 16px; min-height: 44px; }
  .btn, .page-btn { min-height: 44px; }
  .clients-directory-table .contact-cell { height: 40px; gap: .3rem; }
  .clients-directory-table .contact-cell .contact-action { flex-basis: 36px; width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
  .clients-directory-table tbody td.col-contact { grid-template-columns: minmax(4.5rem, 25%) minmax(0, 1fr); gap: .4rem; }
  #phoneRemovalDetails > summary { flex-wrap: wrap; font-size: .9rem; }
  .admin-area-label { display: none; }
  #phoneRemovalDialog { width: calc(100% - 1rem); max-height: calc(100dvh - 2rem); border-radius: 16px; padding: 1.1rem; }
  #resultImportForm .button-row > * { width: 100%; white-space: normal; }
}