/* Personalização da interface por usuário. Tokens ajustam o design system existente. */
:root { --jm-customizer-accent:#0875e1; --jm-customizer-accent-strong:#0753a0; --jm-customizer-accent-soft:#eaf4ff; }

:root[data-jm-text-size="small"] {
  --jm-type-2xs:9px; --jm-type-xs:10px; --jm-type-sm:11px; --jm-type-base:12px; --jm-type-md:13px;
  --jm-type-lg:15px; --jm-type-xl:17px; --jm-type-2xl:20px; --jm-type-3xl:22px;
}
:root[data-jm-text-size="large"] {
  --jm-type-2xs:11px; --jm-type-xs:12px; --jm-type-sm:13px; --jm-type-base:14px; --jm-type-md:15px;
  --jm-type-lg:18px; --jm-type-xl:20px; --jm-type-2xl:24px; --jm-type-3xl:27px;
}

:root[data-jm-density="compact"] {
  --jm-control-height:33px; --jm-control-height-compact:29px; --jm-control-padding-x:8px;
  --jm-control-group-gap:6px; --jm-button-padding-x:11px; --jm-button-icon-gap:6px;
}
:root[data-jm-density="comfortable"] {
  --jm-control-height:42px; --jm-control-height-compact:36px; --jm-control-padding-x:13px;
  --jm-control-group-gap:11px; --jm-button-padding-x:17px; --jm-button-icon-gap:9px;
}
:root[data-jm-content-width="focused"] .main { padding-left:34px; padding-right:34px; }
:root[data-jm-content-width="wide"] .main { padding-left:14px; padding-right:14px; }

:root[data-jm-accent="teal"] {
  --blue:#007c83; --blue-2:#0097a1; --jm-customizer-accent:#008b91; --jm-customizer-accent-strong:#006a70;
  --jm-customizer-accent-soft:#e8f7f6; --jm-control-border-focus:#42aeb0; --jm-control-focus-ring:0 0 0 3px rgba(0,139,145,.13);
}
:root[data-jm-accent="violet"] {
  --blue:#6848c7; --blue-2:#8062dc; --jm-customizer-accent:#7453d6; --jm-customizer-accent-strong:#5936b4;
  --jm-customizer-accent-soft:#f1edff; --jm-control-border-focus:#9e8be4; --jm-control-focus-ring:0 0 0 3px rgba(116,83,214,.13);
}
:root[data-jm-accent="teal"] .btn.primary,
:root[data-jm-accent="violet"] .btn.primary { background:linear-gradient(180deg,var(--jm-customizer-accent),var(--jm-customizer-accent-strong)); box-shadow:0 4px 12px color-mix(in srgb,var(--jm-customizer-accent) 20%,transparent); }
:root[data-jm-accent="teal"] .btn.primary:hover:not(:disabled),
:root[data-jm-accent="violet"] .btn.primary:hover:not(:disabled) { background:var(--jm-customizer-accent-strong); }
:root[data-jm-accent="teal"] .nav-btn.active,
:root[data-jm-accent="violet"] .nav-btn.active { background:linear-gradient(90deg,var(--jm-customizer-accent-strong),var(--jm-customizer-accent)); box-shadow:inset 3px 0 0 color-mix(in srgb,var(--jm-customizer-accent) 65%,white),0 5px 16px rgba(0,27,54,.13); }
:root[data-jm-accent="teal"] .text-link,
:root[data-jm-accent="teal"] .icon-btn,
:root[data-jm-accent="violet"] .text-link,
:root[data-jm-accent="violet"] .icon-btn { color:var(--jm-customizer-accent-strong); }

:root[data-jm-density="compact"] .sidebar nav { gap:4px; }
:root[data-jm-density="compact"] .nav-btn { min-height:36px; padding-top:7px; padding-bottom:7px; gap:9px; }
:root[data-jm-density="comfortable"] .nav-btn { min-height:48px; padding-top:13px; padding-bottom:13px; }
:root[data-jm-density="compact"] .main .panel { margin-bottom:10px; }
:root[data-jm-density="comfortable"] .main .panel { margin-bottom:18px; }
:root[data-jm-density="compact"] .main .table-wrap tbody td,
:root[data-jm-density="compact"] #section-diligencias .diligence-board-table td,
:root[data-jm-density="compact"] #section-diligencias .diligence-planning-table td,
:root[data-jm-density="compact"] #section-viagens .travel-table td,
:root[data-jm-density="compact"] #section-agenda table td { padding-top:4px; padding-bottom:4px; }
:root[data-jm-density="comfortable"] .main .table-wrap tbody td,
:root[data-jm-density="comfortable"] #section-diligencias .diligence-board-table td,
:root[data-jm-density="comfortable"] #section-diligencias .diligence-planning-table td,
:root[data-jm-density="comfortable"] #section-viagens .travel-table td,
:root[data-jm-density="comfortable"] #section-agenda table td { padding-top:10px; padding-bottom:10px; }

#section-configuracoes .settings-layout > .interface-personalizer-card { grid-column:1/-1; min-width:0; margin:0; }
#section-configuracoes .interface-personalizer-card { padding:22px; }
#section-configuracoes .interface-personalizer-icon { background:var(--jm-customizer-accent-soft); color:var(--jm-customizer-accent); }
#section-configuracoes .interface-personalizer-icon svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.interface-personalizer-form { display:grid; gap:18px; }
.interface-personalizer-editor { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); align-items:stretch; gap:18px; }
.interface-personalizer-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.interface-option-group { min-width:0; margin:0; padding:13px; border:1px solid #e0eaf3; border-radius:10px; background:#fbfdff; }
.interface-option-group legend { float:left; width:100%; margin:0 0 10px; padding:0; }
.interface-option-group legend strong,.interface-option-group legend small { display:block; }
.interface-option-group legend strong { color:#173d70; font-size:12px; }
.interface-option-group legend small { margin-top:3px; color:#7188a1; font-size:10px; line-height:1.35; }
.interface-choice-grid { clear:both; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.interface-choice { position:relative; display:flex; min-width:0; min-height:57px; align-items:center; gap:8px; padding:8px; border:1px solid #dce7f1; border-radius:8px; background:#fff; cursor:pointer; transition:border-color .15s,background .15s,box-shadow .15s; }
.interface-choice:hover { border-color:#a9cce8; background:#f7fbff; }
.interface-choice:has(input:checked) { border-color:var(--jm-customizer-accent); background:var(--jm-customizer-accent-soft); box-shadow:inset 0 0 0 1px var(--jm-customizer-accent); }
.interface-choice:focus-within { outline:3px solid color-mix(in srgb,var(--jm-customizer-accent) 20%,transparent); outline-offset:2px; }
.interface-choice input { position:absolute; width:1px; height:1px; min-height:0; margin:0; opacity:0; }
.interface-choice>span:last-child { display:grid; min-width:0; gap:3px; }
.interface-choice strong { color:#244a75; font-size:10.5px; line-height:1.2; }
.interface-choice small { color:#7890a7; font-size:9px; line-height:1.2; }
.interface-choice-indicator { width:15px; height:15px; flex:0 0 15px; border:1px solid #b8cadb; border-radius:50%; background:#fff; }
.interface-choice:has(input:checked) .interface-choice-indicator { border:4px solid var(--jm-customizer-accent); }
.interface-choice-grid-three .interface-choice { min-height:52px; }
.interface-accent-swatch { width:17px; height:17px; flex:0 0 17px; border:2px solid #fff; border-radius:50%; background:#0875e1; box-shadow:0 0 0 1px #c8d7e5; }
.interface-accent-swatch[data-accent-swatch="teal"] { background:#008b91; }
.interface-accent-swatch[data-accent-swatch="violet"] { background:#7453d6; }
.interface-width-icon { width:19px; height:14px; flex:0 0 19px; border:1px solid #8ba7c0; border-radius:3px; background:linear-gradient(90deg,#eaf2f8 18%,#fff 18% 82%,#eaf2f8 82%); }
.interface-width-icon.focused { background:linear-gradient(90deg,#d9e6f1 30%,#fff 30% 70%,#d9e6f1 70%); }
.interface-width-icon.wide { background:linear-gradient(90deg,#eaf2f8 7%,#fff 7% 93%,#eaf2f8 93%); }
.interface-live-preview { display:flex; min-width:0; flex-direction:column; padding:14px; border:1px solid #dce8f3; border-radius:11px; background:linear-gradient(145deg,#f5faff,#fff 62%); }
.interface-preview-heading { display:grid; grid-template-columns:9px auto; align-items:center; gap:3px 7px; margin-bottom:12px; }
.interface-preview-dot { width:8px; height:8px; border-radius:50%; background:#20b876; box-shadow:0 0 0 3px #e2f7ed; }
.interface-preview-heading strong { color:#284e77; font-size:11px; }
.interface-preview-heading small { grid-column:2; color:#7a91a8; font-size:9px; }
.interface-preview-canvas { display:grid; gap:9px; padding:10px; border:1px solid #e1eaf3; border-radius:9px; background:#fff; box-shadow:0 5px 18px rgba(30,76,115,.05); }
.interface-preview-nav { display:flex; align-items:center; gap:7px; padding-bottom:8px; border-bottom:1px solid #edf2f7; color:#294c72; font-size:10px; }
.interface-preview-logo { display:grid; width:20px; height:20px; place-items:center; border-radius:6px; background:var(--jm-customizer-accent-soft); color:var(--jm-customizer-accent); font-weight:800; }
.interface-preview-active { margin-left:auto; padding:4px 7px; border-radius:6px; background:var(--jm-customizer-accent-soft); color:var(--jm-customizer-accent-strong); font-size:9px; font-weight:700; }
.interface-preview-card { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px; border:1px solid #e2ebf4; border-radius:7px; }
.interface-preview-card>div { display:grid; gap:2px; }
.interface-preview-label { color:#7890a8; font-size:8px; letter-spacing:.06em; }
.interface-preview-card strong { color:#143b71; font-size:11px; }
.interface-preview-card small,.interface-preview-row small { color:#748ba3; font-size:9px; }
.interface-preview-count { padding:3px 7px; border-radius:6px; background:var(--jm-customizer-accent-soft); color:var(--jm-customizer-accent-strong); font-size:10px; font-weight:800; }
.interface-preview-row { display:flex; align-items:center; gap:8px; padding:7px 3px; border-bottom:1px solid #edf2f7; }
.interface-preview-check { display:grid; width:16px; height:16px; place-items:center; border:1px solid #9ab3c9; border-radius:4px; color:var(--jm-customizer-accent-strong); font-size:10px; }
.interface-preview-row>span:nth-child(2) { display:grid; gap:3px; }
.interface-preview-row strong { color:#375b80; font-size:9px; }
.interface-preview-task { margin-left:auto; padding:5px 8px; border-radius:6px; background:#fff3dc; color:#9b6817; font-size:9px; }
.interface-preview-button { width:100%; min-height:34px; font-size:10px!important; }
.interface-preview-caption { margin:8px 0 0; color:#7b90a6; font-size:9px; line-height:1.4; }
.interface-personalizer-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:14px; border-top:1px solid #e7eef5; }
.interface-preferences-status { display:flex; align-items:center; gap:8px; color:#258258; font-size:10.5px; line-height:1.4; }
.interface-preferences-status-icon { display:grid; width:22px; height:22px; flex:0 0 22px; place-items:center; border-radius:50%; background:#e3f7ed; color:#16824c; font-weight:800; }
.interface-preferences-status[data-state="dirty"] { color:#91610f; }
.interface-preferences-status[data-state="dirty"] .interface-preferences-status-icon { background:#fff2d9; color:#ad720e; }
.interface-preferences-status[data-state="saving"] { color:#426f9e; }
.interface-preferences-status[data-state="saving"] .interface-preferences-status-icon { background:#eaf4ff; color:#236bb3; }
.interface-preferences-status[data-state="error"] { color:#b23832; }
.interface-preferences-status[data-state="error"] .interface-preferences-status-icon { background:#fff0ee; color:#b23832; }
.interface-personalizer-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.interface-personalizer-actions .btn { min-height:40px; font-size:11px; }
.interface-personalizer-actions .btn.primary { background:var(--jm-customizer-accent); }
.interface-personalizer-actions .btn svg { width:15px; height:15px; }

@media(max-width:1080px) {
  .interface-personalizer-editor { grid-template-columns:1fr; }
  .interface-live-preview { max-width:none; }
}
@media(max-width:700px) {
  :root[data-jm-content-width="focused"] .main, :root[data-jm-content-width="wide"] .main { padding-left:12px; padding-right:12px; }
  #section-configuracoes .interface-personalizer-card { padding:16px; }
  .interface-personalizer-options { grid-template-columns:1fr; }
  .interface-personalizer-footer { align-items:stretch; flex-direction:column; }
  .interface-personalizer-actions { display:grid; grid-template-columns:1fr 1fr; }
  .interface-personalizer-actions .btn.primary { grid-column:1/-1; grid-row:1; }
  .interface-personalizer-actions .btn { white-space:normal; }
}