/* UTU Engine Settings reference layouts.
   Scoped entirely to General and global Sensitive Data; Application-specific
   Sensitive Data and the other Settings sections retain their existing UI. */

#settings-view #general-settings.settings-content,
#settings-view #sensitive-data-settings.settings-content{
  display:grid;
  align-content:start;
  grid-auto-rows:max-content;
  gap:11px;
  min-width:0;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
#settings-view #general-settings.settings-content.hidden,
#settings-view #sensitive-data-settings.settings-content.hidden{
  display:none!important;
}
#settings-view #general-settings .panel,
#settings-view #sensitive-data-settings .panel{
  min-width:0;
  margin:0!important;
  padding:19px 21px!important;
  border:1px solid var(--utu-stroke,#30536b)!important;
  border-radius:17px!important;
  background:var(--utu-panel,#132b3f)!important;
  box-shadow:none!important;
}
#settings-view #general-settings .eyebrow,
#settings-view #sensitive-data-settings .eyebrow{
  color:var(--utu-highlight,#14ccdd)!important;
  font-size:11px!important;
  line-height:1.4;
  font-weight:820;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin:0 0 8px;
}
#settings-view #general-settings h2,
#settings-view #sensitive-data-settings h2{
  font-size:19px!important;
  line-height:1.24;
  letter-spacing:-.025em;
  color:var(--utu-text,#f0f8ff)!important;
  margin:0 0 7px!important;
}
#settings-view #general-settings p,
#settings-view #sensitive-data-settings p{
  color:var(--utu-subtext,#a5bdcc)!important;
  line-height:1.5;
  font-size:11.5px;
}
#settings-view #sensitive-data-settings button:not(.primary){
  box-shadow:none;
}

/* GENERAL — reference rows: label and explanation left, value right. */
#settings-view #general-settings .utu-settings-general-card{
  width:100%;max-width:none!important;
  padding:23px 25px 19px!important;
}
#settings-view #general-settings .utu-general-description{
  font-size:12.5px!important;
  margin:0 0 20px!important;
}
#settings-view #general-settings .utu-settings-list{
  display:flex;flex-direction:column;
  border:1px solid var(--utu-stroke-soft,#28495e);
  border-radius:15px;overflow:hidden;
}
#settings-view #general-settings .utu-settings-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,37%);
  align-items:center;
  gap:25px;
  min-width:0;
  padding:17px 19px;
  border-bottom:1px solid var(--utu-stroke-soft,#28495e);
  background:var(--utu-panel-soft,#19364a);
}
#settings-view #general-settings .utu-settings-row:last-child{border-bottom:0;}
#settings-view #general-settings .utu-settings-row-copy{min-width:0;}
#settings-view #general-settings .utu-settings-row-copy label{
  display:block;
  width:100%;
  margin:0 0 5px;
  color:var(--utu-text,#eff8fd)!important;
  font-size:13px;font-weight:800;
}
#settings-view #general-settings .utu-settings-row-copy p{
  margin:0!important;
  max-width:82ch;
  color:var(--utu-subtext,#a0bdce)!important;
  font-size:11.5px!important;
  line-height:1.55;
}
#settings-view #general-settings .utu-settings-row-control{
  display:flex;align-items:center;justify-content:flex-end;
  min-width:0;position:relative;
}
#settings-view #general-settings .utu-settings-row-control :is(select,input){
  width:100%!important;height:39px!important;
  min-height:39px!important;
  max-width:100%!important;min-width:0!important;
  margin:0!important;
  border:1px solid var(--utu-stroke,#345870)!important;
  border-radius:9px!important;
  padding:7px 13px!important;
  color:var(--utu-text,#edf7fd)!important;
  background-color:var(--utu-panel,#152e43)!important;
  box-shadow:none!important;font-size:12px;font-weight:660;
}
#settings-view #general-settings .utu-settings-row-control select{
  appearance:none;-webkit-appearance:none;
  padding-right:34px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ebdce' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
  cursor:pointer;
}
#settings-view #general-settings .utu-settings-row-control :is(select,input):focus-visible{
  outline:2px solid var(--utu-highlight,#0abed4);
  outline-offset:2px;
}
#settings-view #general-settings .utu-settings-numeric-control input{padding-right:88px!important;}
#settings-view #general-settings .utu-settings-unit{
  position:absolute;right:14px;
  pointer-events:none;font-size:11px;
  color:var(--utu-subtext,#a9c4d3);
}
#settings-view #general-settings .utu-settings-general-footer{
  display:flex;align-items:center;justify-content:flex-end;
  margin:18px 0 0!important;padding:0;
}
#settings-view #general-settings #utu-save-general,
#settings-view #sensitive-data-settings #save-sensitive-settings{
  min-height:40px;padding:9px 18px;
  border-radius:10px!important;
  font-size:12px;font-weight:780;
}

/* SENSITIVE DATA — first card and invariant notice. */
#settings-view #sensitive-data-settings .sensitive-settings-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:17px;
}
#settings-view #sensitive-data-settings .sensitive-settings-head.compact{align-items:center;}
#settings-view #sensitive-data-settings .sensitive-settings-head>div:first-child{min-width:0;}
#settings-view #sensitive-data-settings .sensitive-settings-head p{
  max-width:115ch;margin:0!important;
}
#settings-view #sensitive-data-settings .utu-sensitive-status{
  display:inline-flex;align-items:center;white-space:nowrap;
  flex-shrink:0;min-height:27px;
  border-radius:999px;padding:5px 10px;
  font-size:10px;font-weight:770;
}
#settings-view #sensitive-data-settings .security-invariant-note{
  margin:12px 0 0!important;
  padding:10px 12px!important;
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--utu-stroke-soft,#31566c)!important;
  border-radius:10px!important;
  background:#0d1722!important;
  color:var(--utu-subtext,#adc7d6)!important;
  font-size:11px!important;line-height:1.55;
}
#settings-view #sensitive-data-settings .utu-sensitive-info-icon{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex:0 0 22px;
  border-radius:7px;background:#09556c;color:#20d7e4;
  font-size:16px;
}
#settings-view #sensitive-data-settings .utu-sensitive-section-head{
  display:flex;align-items:end;justify-content:space-between;
  flex-wrap:wrap;gap:10px;
}
#settings-view #sensitive-data-settings .utu-sensitive-section-head h2{margin:0!important;}

/* Three-column built-in policy grid; icons, names, hint and compact controls. */
#settings-view #sensitive-data-settings .sensitive-policy-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
#settings-view #sensitive-data-settings .sensitive-policy-item{
  min-width:0;
  display:grid;grid-template-columns:27px minmax(0,1fr) 132px;
  gap:9px;align-items:center;
  border:1px solid var(--utu-stroke-soft,#2d4c62)!important;
  border-radius:10px!important;
  background:#0d1722!important;
  padding:8px 9px!important;
}
#settings-view #sensitive-data-settings .utu-sensitive-type-icon{
  display:grid;place-items:center;
  width:27px;height:28px;
  color:var(--utu-highlight,#45d7e7);
  background:var(--utu-panel,#113144);
  border-radius:8px;
}
#settings-view #sensitive-data-settings .utu-sensitive-type-icon svg{width:17px;height:17px;}
#settings-view #sensitive-data-settings .utu-sensitive-rule-label{
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
#settings-view #sensitive-data-settings .utu-sensitive-rule-label strong{
  color:var(--utu-text,#eaf4fc)!important;font-size:11.5px;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#settings-view #sensitive-data-settings .utu-sensitive-rule-label small{
  font-size:9.7px;line-height:1.3;
  color:var(--utu-subtext,#a6bfce)!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#settings-view #sensitive-data-settings .sensitive-policy-item select{
  width:100%;min-width:0;min-height:29px!important;height:29px!important;
  padding:4px 8px!important;font-size:10px!important;font-weight:720;
  border-radius:7px!important;
  color:var(--utu-text,#eaf5fc)!important;
  border:1px solid var(--utu-stroke,#315970)!important;
  background:#101e2d!important;
}
#settings-view #sensitive-data-settings .sensitive-policy-item select:disabled{
  opacity:1!important;cursor:not-allowed;
  color:var(--utu-subtext,#b9c9d5)!important;
}

/* Rule tables. Hidden controls preserve the stable save/test API contract. */
#settings-view #sensitive-data-settings .utu-sensitive-table-scroll{
  width:100%;max-width:100%;min-width:0;
  overflow-x:auto;margin-top:12px;
  border-radius:11px;
}
#settings-view #sensitive-data-settings :is(.sensitive-field-header,.utu-sensitive-field-display){
  display:grid;grid-template-columns:minmax(185px,2fr) minmax(90px,.75fr) minmax(120px,1fr) 90px;
  gap:10px;align-items:center;
  min-width:530px;
}
#settings-view #sensitive-data-settings :is(.sensitive-pattern-header,.utu-sensitive-pattern-display){
  display:grid;grid-template-columns:minmax(110px,1fr) minmax(160px,1.6fr) 100px 120px 90px;
  gap:10px;align-items:center;
  min-width:690px;
}
#settings-view #sensitive-data-settings .sensitive-rule-header{
  margin:0!important;padding:7px 11px!important;
  background:#122334!important;
  color:var(--utu-subtext,#aec4d3)!important;
  font-size:9.5px!important;font-weight:820;letter-spacing:.09em;
}
#settings-view #sensitive-data-settings .sensitive-global-backing[hidden]{display:none!important;}
#settings-view #sensitive-data-settings .sensitive-global-entry{
  border:1px solid var(--utu-stroke-soft,#2e4d63);
  background:#0d1722;
  margin:5px 0 0;border-radius:9px;
}
#settings-view #sensitive-data-settings .utu-sensitive-table-row{
  padding:7px 10px;
  min-height:36px;
  color:var(--utu-text,#e8f5fc);
  font-size:11px;line-height:1.35;
}
#settings-view #sensitive-data-settings .utu-sensitive-table-row>span{
  display:block;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#settings-view #sensitive-data-settings .utu-sensitive-pattern-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--utu-subtext,#c9deeb)!important;
}
#settings-view #sensitive-data-settings .utu-sensitive-row-actions{
  display:flex!important;align-items:center;justify-content:flex-end;gap:4px;
}
#settings-view #sensitive-data-settings .utu-sensitive-row-actions button{
  min-width:28px;min-height:27px;
  padding:3px!important;
  border-radius:7px!important;border:0!important;
  background:transparent!important;color:var(--utu-subtext,#a1c4d6)!important;
  font-size:16px!important;font-weight:650;
}
#settings-view #sensitive-data-settings .utu-sensitive-row-actions button svg{
  display:block;width:16px;height:16px;
  margin:auto;stroke:currentColor;
}
#settings-view #sensitive-data-settings .utu-sensitive-row-actions button:hover{
  background:var(--utu-panel-hover,#23506a)!important;
  color:var(--utu-text,#fff)!important;
}
#settings-view #sensitive-data-settings .utu-sensitive-table-empty{
  padding:16px;text-align:center;color:var(--utu-subtext,#a5bed0);
  border:1px dashed var(--utu-stroke,#355e76);border-radius:10px;
  font-size:11px;
}
#settings-view #sensitive-data-settings .utu-sensitive-add-button{
  min-height:33px;padding:6px 12px;
  border:1px solid var(--utu-stroke,#3b5f75)!important;
  border-radius:9px!important;
  background:#0d1722!important;
  color:var(--utu-text,#e9f5fc)!important;
  font-size:11px;font-weight:770;
  white-space:nowrap;
}

/* Bottom row: sanitizer preview and five-row audit table, equal columns. */
#settings-view #sensitive-data-settings .utu-sensitive-bottom-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;align-items:stretch;min-width:0;
}
#settings-view #sensitive-data-settings .utu-sensitive-bottom-grid>.panel{
  height:100%;min-width:0;
}
#settings-view #sensitive-data-settings .utu-sensitive-application-label{
  display:flex;flex-direction:column;
  gap:4px;margin:12px 0 10px;
  color:var(--utu-text,#eaf5fc);
  font-size:10.5px;font-weight:760;
}
#settings-view #sensitive-data-settings .utu-sensitive-application-label select{
  height:31px!important;min-height:31px!important;
  width:100%;font-size:11px!important;
  border:1px solid var(--utu-stroke,#365e76)!important;
  background:#101e2d!important;
  color:var(--utu-text,#eff9fe)!important;
  border-radius:8px!important;
}
#settings-view #sensitive-data-settings .utu-sensitive-preview-pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;align-items:stretch;
}
#settings-view #sensitive-data-settings .utu-sensitive-preview-label{
  min-width:0;display:flex;flex-direction:column;
  gap:7px;color:var(--utu-text,#edf7ff);
  font-size:10.5px;font-weight:760;
}
#settings-view #sensitive-data-settings .sanitizer-test-input,
#settings-view #sensitive-data-settings .sanitizer-test-result{
  height:125px;min-height:125px;max-height:125px;
  border:1px solid var(--utu-stroke,#345973)!important;
  border-radius:9px!important;
  background:#101e2d!important;
  color:var(--utu-text,#edf7fc)!important;
  padding:9px!important;
  margin:0!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;line-height:1.45;
}
#settings-view #sensitive-data-settings .sanitizer-test-input{
  width:100%;resize:vertical;max-height:none;
}
#settings-view #sensitive-data-settings .sanitizer-test-result{
  overflow:auto;display:flex;flex-direction:column;
}
#settings-view #sensitive-data-settings .sanitizer-test-meta{
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  padding:0 0 6px;margin:0;
  background:transparent!important;
  color:var(--utu-subtext,#adc9d7)!important;
  font-size:9.5px;
}
#settings-view #sensitive-data-settings .sanitizer-test-output{
  flex:1;margin:0;padding:0!important;
  background:transparent!important;color:var(--utu-highlight,#71e6d7)!important;
  white-space:pre-wrap;word-break:break-word;
  font-size:10px;line-height:1.5;
}
#settings-view #sensitive-data-settings .utu-sensitive-test-actions{
  display:flex;justify-content:flex-start;gap:8px;
  margin:10px 0 0!important;
}
#settings-view #sensitive-data-settings .utu-sensitive-test-actions button{
  min-height:32px;border-radius:9px!important;
  padding:6px 12px;font-size:11px;font-weight:700;
}
#settings-view #sensitive-data-settings .security-audit-card{margin:0!important;}
#settings-view #sensitive-data-settings .security-audit-table-wrap{
  width:100%;margin-top:12px;overflow-x:auto;
}
#settings-view #sensitive-data-settings .security-audit-table{
  width:100%;border-collapse:collapse;font-size:10px;
}
#settings-view #sensitive-data-settings .security-audit-table th{
  padding:8px 7px!important;text-align:left;
  color:var(--utu-subtext,#b5c9d6)!important;
  background:#122334!important;
  font-size:9.5px;font-weight:790;letter-spacing:.07em;
}
#settings-view #sensitive-data-settings .security-audit-table td{
  min-height:32px;padding:8px 7px!important;
  border-bottom:1px solid var(--utu-stroke-soft,#2d4f63)!important;
  color:var(--utu-text,#e9f5fb)!important;
  overflow-wrap:anywhere;font-size:10px;line-height:1.45;
}
#settings-view #sensitive-data-settings .security-audit-table td:first-child{
  white-space:nowrap;color:var(--utu-subtext,#b1c5d3)!important;
}
#settings-view #sensitive-data-settings .security-audit-table td:nth-child(2){
  white-space:normal;
}
#settings-view #sensitive-data-settings .utu-sensitive-audit-pagination{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;
  margin-top:12px;
  color:var(--utu-subtext,#aec3d0);
  font-size:10px;
}
#settings-view #sensitive-data-settings .utu-security-audit-pages{
  display:flex;align-items:center;gap:4px;
}
#settings-view #sensitive-data-settings .utu-security-audit-pages button{
  display:grid;place-items:center;
  width:27px;height:27px;min-width:27px;
  border:1px solid var(--utu-stroke-soft,#2b536b)!important;
  border-radius:7px!important;
  background:#0d1722!important;
  color:var(--utu-subtext,#b4cedc)!important;
  padding:0!important;font-size:11px;font-weight:690;
}
#settings-view #sensitive-data-settings .utu-security-audit-pages button[aria-current="page"]{
  color:#e8fbff!important;background:#006f88!important;
  border-color:#14cde0!important;
}
#settings-view #sensitive-data-settings .utu-security-audit-pages button:disabled{opacity:.36;cursor:default;}
#settings-view #sensitive-data-settings .utu-sensitive-save-bar{
  display:flex;justify-content:flex-end;
  padding:0 0 3px;margin:0!important;
}

/* Custom rule Add/Edit dialog. No backdrop dismiss; validation is on submit. */
#sensitive-rule-dialog.utu-sensitive-rule-dialog:not(.hidden){
  position:fixed;inset:0;z-index:2400;
  display:grid;place-items:center;padding:20px;
  background:rgba(4,15,26,.77);
  backdrop-filter:blur(10px);
}
#sensitive-rule-dialog.utu-sensitive-rule-dialog.hidden{display:none!important;}
#sensitive-rule-dialog .utu-sensitive-dialog-card{
  width:min(540px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;
  padding:21px;
  border:1px solid var(--utu-stroke,#3b6178)!important;
  border-radius:17px;
  background:var(--utu-panel,#152d41)!important;
  color:var(--utu-text,#f0f8ff)!important;
  box-shadow:0 25px 70px rgba(0,0,0,.4);
}
#sensitive-rule-dialog .utu-sensitive-dialog-header{
  display:flex;justify-content:space-between;gap:13px;align-items:flex-start;
}
#sensitive-rule-dialog .utu-sensitive-dialog-header h3{
  font-size:18px;margin:0 0 15px;color:var(--utu-text);
}
#sensitive-rule-dialog .utu-sensitive-dialog-header>button{
  font-size:24px;border:1px solid var(--utu-stroke);
  border-radius:9px;min-width:34px;min-height:34px;
  padding:0;background:var(--utu-panel-soft);color:var(--utu-text);
}
#sensitive-rule-dialog .utu-sensitive-dialog-fields{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;
}
#sensitive-rule-dialog .utu-sensitive-dialog-fields label{
  display:flex;flex-direction:column;gap:6px;
  min-width:0;font-size:11px;font-weight:720;
}
#sensitive-rule-dialog .utu-sensitive-dialog-fields label:has(input){grid-column:1/-1;}
#sensitive-rule-dialog .utu-sensitive-dialog-fields :is(input,select){
  width:100%;max-width:100%;min-height:37px;
  padding:7px 10px;border-radius:9px;
  background:var(--utu-panel-soft)!important;
  border:1px solid var(--utu-stroke)!important;
  color:var(--utu-text)!important;
}
#sensitive-rule-dialog .utu-sensitive-dialog-hint{
  font-size:11px;margin:12px 0;color:var(--utu-subtext);
}
#sensitive-rule-dialog .actions{display:flex;gap:9px;justify-content:flex-end;}
#sensitive-rule-dialog .actions button{min-height:37px;padding:7px 13px;border-radius:9px;}

/* Light theme follows the same layout and preserves contrast. */
:root[data-theme="light"] #settings-view #general-settings .utu-settings-row{
  background:#f0f7fb;border-color:#d5e6ef;
}
:root[data-theme="light"] #settings-view #general-settings .utu-settings-row-control :is(input,select){
  background-color:white!important;color:#264a5d!important;border-color:#bed7e4!important;
}
:root[data-theme="light"] #settings-view #sensitive-data-settings :is(
  .sensitive-policy-item,.sensitive-global-entry,.security-invariant-note,
  .sanitizer-test-input,.sanitizer-test-result){
  background:#f1f8fc!important;border-color:#c8deeb!important;
}
:root[data-theme="light"] #settings-view #sensitive-data-settings .utu-sensitive-rule-label strong,
:root[data-theme="light"] #settings-view #sensitive-data-settings .utu-sensitive-table-row,
:root[data-theme="light"] #settings-view #sensitive-data-settings .utu-sensitive-preview-label,
:root[data-theme="light"] #settings-view #sensitive-data-settings .utu-sensitive-application-label,
:root[data-theme="light"] #settings-view #sensitive-data-settings .security-audit-table td{
  color:#23495f!important;
}
:root[data-theme="light"] #settings-view #sensitive-data-settings .sensitive-policy-item select,
:root[data-theme="light"] #settings-view #sensitive-data-settings .utu-sensitive-application-label select{
  background:#fff!important;color:#21485e!important;border-color:#b8d4e3!important;
}
:root[data-theme="light"] #settings-view #sensitive-data-settings .security-audit-table th,
:root[data-theme="light"] #settings-view #sensitive-data-settings .sensitive-rule-header{
  background:#e6f2f9!important;color:#42677a!important;
}
:root[data-theme="light"] #settings-view #sensitive-data-settings .sanitizer-test-output{
  color:#087c72!important;
}

/* Fit responsive widths without forcing three tiny columns. */
@media(max-width:1450px){
  #settings-view #sensitive-data-settings .sensitive-policy-item{
    grid-template-columns:22px minmax(0,1fr) 113px;gap:7px;
  }
  #settings-view #sensitive-data-settings .sensitive-policy-item select{
    font-size:9.5px!important;
  }
}
@media(max-width:1180px){
  #settings-view #sensitive-data-settings .sensitive-policy-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #settings-view #sensitive-data-settings .utu-sensitive-bottom-grid{
    grid-template-columns:minmax(0,1fr);
  }
}
@media(max-width:780px){
  #settings-view #general-settings .utu-settings-row{
    grid-template-columns:minmax(0,1fr);
    gap:11px;padding:14px;
  }
  #settings-view #sensitive-data-settings .sensitive-policy-grid{
    grid-template-columns:1fr;
  }
  #settings-view #sensitive-data-settings .sensitive-settings-head{
    flex-direction:column;gap:9px;
  }
  #settings-view #sensitive-data-settings .utu-sensitive-preview-pair{
    grid-template-columns:1fr;
  }
  #settings-view #general-settings .utu-settings-general-card,
  #settings-view #sensitive-data-settings .panel{padding:15px!important;}
}
@media(max-width:460px){
  #settings-view #sensitive-data-settings .sensitive-policy-item{
    grid-template-columns:24px minmax(0,1fr) 115px;
  }
  #sensitive-rule-dialog .utu-sensitive-dialog-fields{grid-template-columns:1fr;}
}