/* KCC Compact UI 3.3.2 — additive layer after app.css and app.light.css.
   Works in BOTH themes; leaves backups, API and theme persistence untouched. */

/* Consistent controls: 34px desktop; 40px touch. Icon-only controls handled separately. */
html { --kcc-action-height:34px; --kcc-action-font:12.5px; }
html body :is(.content,.detail-sheet,.confirm-sheet) :is(
  button.primary, button.secondary, button.ghost,
  button.action-btn, a.action-btn, a.action-link,
  button.server-backup-create, button.domain-action,
  button.server-backup-refresh, button.compact
):not(.icon-btn):not(.close-btn):not(.server-pin):not(.danger):not(.kcc-theme-toggle) {
  box-sizing:border-box;
  min-height:var(--kcc-action-height);
  height:auto;
  padding:7px 11px;
  border-radius:8px;
  font-size:var(--kcc-action-font);
  line-height:1.3;
  font-weight:650;
  letter-spacing:0;
  text-decoration:none;
}
html body :is(.content,.detail-sheet,.confirm-sheet) :is(
  .page-actions,.detail-actions,.server-toolbar,.toolbar-row,
  .server-action-list,.domain-action-list,.domain-main-actions,.kcc-bulk-actions
) {gap:7px;}
html body .content :is(.primary.compact,.secondary.compact) {padding:7px 11px;}
html body :is(.content,.detail-sheet) :is(.icon-btn,.close-btn):not(.kcc-theme-toggle) {
  width:34px;height:34px;min-width:34px;min-height:34px;
  padding:4px;border-radius:8px;font-size:18px;
}
html body .topbar .icon-btn {width:36px;height:36px;min-width:36px;min-height:36px;font-size:18px;border-radius:9px;}
html body .kcc-theme-toggle{font-size:19px;}

/* Strong enough contrast for every layer inside a filled blue action. */
html[data-kcc-theme="light"] body :is(.content,.detail-sheet,.confirm-sheet,.auth-card)
  :is(button.primary,a.action-link,button.server-backup-create):not(.danger),
html[data-kcc-theme="dark"] body :is(.content,.detail-sheet,.confirm-sheet,.auth-card)
  :is(button.primary,a.action-link,button.server-backup-create):not(.danger){
  background:#216de9 !important;
  border-color:#216de9 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff;
}
html body :is(.content,.detail-sheet,.confirm-sheet,.auth-card)
  :is(button.primary,a.action-link,button.server-backup-create):not(.danger)
  :is(strong,span,small,div,b,i,svg) {
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff;
}
html body :is(.content,.detail-sheet,.confirm-sheet,.auth-card)
  button.primary.domain-action:not(.danger) small {opacity:.87;font-size:11px;}
html body .domain-action {grid-template-columns:18px minmax(0,1fr);gap:7px;min-width:0;align-items:center;}
html body .domain-action > span {font-size:15px;line-height:1;}
html body .domain-action strong {font-size:12.5px;line-height:1.22;}
html body .domain-action small {font-size:10.5px;margin-top:2px;line-height:1.25;}
html body .domain-action-list {gap:6px;}

/* Improve text readability while shrinking oversized data cells. */
html body :is(.server-detail-grid,.domain-info-grid,.detail-grid) {gap:6px;}
html body :is(.server-detail-grid,.domain-info-grid,.detail-grid) > .kv,
html body .detail-body .kv {
  min-height:0;
  padding:7px 10px;
  border-radius:8px;
}
html body .kv b,
html body .kv .kv-label b {
  font-size:11.5px;
  line-height:1.25;
  margin-bottom:3px;
  font-weight:600;
}
html body .kv > span,
html body .kv > .kv-value,
html body .kv .kv-label ~ span {
  font-size:14px;
  line-height:1.32;
  font-weight:550;
  overflow-wrap:anywhere;
}
html body .kv-label{margin-bottom:3px;min-width:0;}
html body .server-detail-grid .kv {display:flex;flex-direction:column;justify-content:center;}
html[data-kcc-theme="light"] body .kv b,
html[data-kcc-theme="light"] body .kv .kv-label b{color:#50637e;}
html[data-kcc-theme="light"] body .kv > span{color:#17253f;}
html[data-kcc-theme="light"] body :is(.server-detail-grid,.domain-info-grid,.detail-grid) > .kv,
html[data-kcc-theme="light"] body .detail-body .kv{background:#fff;border-color:#e3eaf3;}
html[data-kcc-theme="dark"] body :is(.server-detail-grid,.domain-info-grid,.detail-grid) > .kv{
  background:#0b192c;border-color:#243a56;
}

/* Reduce outer padding, group spacing and especially huge backup boxes. */
html body :is(.domain-main-pane,.account-main-pane,.server-main-pane,.domain-list-pane,.account-list-pane,.server-list-pane){padding:10px;}
html body .domain-detail-section {margin-top:10px;padding-top:10px;}
html body .domain-section-title {margin-bottom:6px;font-size:11px;letter-spacing:.06em;}
html body :is(.domain-pane-head,.server-main-head){margin-bottom:8px;}
html body :is(.server-backup-card,.server-access-card){padding:11px;margin-top:11px;border-radius:10px;}
html body .server-backup-stat {padding:8px 10px;border-radius:8px;}
html body .server-backup-stats {gap:6px;margin-top:8px;}
html body .server-backup-stat-value {margin-top:4px;font-size:14px;}
html body .server-backup-entry {padding:10px;border-radius:9px;}
html body .server-backup-history-head{margin-top:9px;}
html body .server-backup-footer{margin-top:7px;}
html body .server-access-row{padding:8px 0;gap:8px;}
html body .cpanel-access-list {gap:6px;margin-top:8px;}
html body .cpanel-access-row {padding:8px 10px;gap:9px;border-radius:8px;}
html body .cpanel-access-row strong {font-size:13px;margin-top:3px;}
html body .form-field{gap:4px;}
html body .form-grid {gap:8px;margin:6px 0 10px;}
html body :is(.form-field input,.form-field select,.toolbar input,.toolbar select,.search input,.domain-filters select) {
  min-height:36px;padding:8px 10px;border-radius:8px;
  font-size:13px !important;
}
html body .search input{padding-left:34px;}
html body .search::before{left:11px;top:7px;}
html body .card{padding:11px;border-radius:11px;}
html body .section-head{margin:11px 2px 7px;}
html body .section-head h3{font-size:14px;}
html body .badge {padding:3px 7px;font-size:11px;}
html body :is(.list-item,.domain-row,.account-row,.server-row){padding:9px 10px;border-radius:9px;}
html body .meta{font-size:11.5px;line-height:1.38;}

/* Special cases: do not force full-width launch buttons to fixed height. */
html body .kcc-bulk-actions .primary {min-height:38px;}
html body .kcc-bulk-server-row{padding:8px 10px;}
html body .kcc-bulk-warning{font-size:11.5px;padding:8px 10px;}
html body .kcc-bulk-choices{max-height:340px;}

/* Avoid squeezing long action text on phones. Controls remain good touch targets. */
@media (max-width:700px){
  html {--kcc-action-height:40px;--kcc-action-font:12.5px;}
  html body :is(.content,.detail-sheet,.confirm-sheet)
    :is(button.primary,button.secondary,button.ghost,button.action-btn,a.action-btn,a.action-link,button.server-backup-create,button.domain-action):not(.icon-btn):not(.close-btn):not(.server-pin){
    min-height:40px;padding:9px 10px;white-space:normal;
  }
  html body .server-workspace.mobile-detail-open .server-detail-grid .kv,
  html body .domain-workspace.mobile-detail-open .domain-info-grid .kv {
    min-height:0 !important;padding:8px 9px !important;border-radius:8px !important;
  }
  html body .server-workspace.mobile-detail-open .server-detail-grid .kv > span,
  html body .domain-workspace.mobile-detail-open .domain-info-grid .kv > span{font-size:13.5px !important;}
  html body .domain-workspace.mobile-detail-open .domain-info-grid .kv b{font-size:11px !important;}
  html body .server-workspace.mobile-detail-open .server-detail-grid .kv-label{font-size:11.5px !important;margin-bottom:3px;}
  html body :is(.form-field input,.form-field select,.toolbar input,.toolbar select,.search input,.domain-filters select){font-size:16px !important;min-height:40px;}
  html body .server-toolbar > button{font-size:12px;padding:7px 6px;}
  html body .domain-action small{font-size:10px;}
}