/*! KOMVOS — Unified UI */

/* =========================
   Root tokens
========================= */
:root{
  --bg:#0B0F14;        /* page background */
  --surface:#0F141B;   /* cards/header */
  --text:#E6EAF0;      /* main text */
  --muted:#94A3B8;     /* secondary text */
  --acc:#10B981;       /* buttons/accents (green) */
  --danger:#EF4444;    /* destructive */
  --link:#22D3EE;      /* content links / blue-ish */
  --teal:#1EC5B6;      /* Komvos brand teal */
  --border:#1F2933;    /* subtle borders */
  --radius:14px;       /* card radius */
  --shadow:0 0 0 1px rgba(255,255,255,.06), 0 12px 24px rgba(0,0,0,.35);
  --headerH:72px;      /* fixed header height (desktop) */
}

/* =========================
   Base + layout
========================= */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  height:100%;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,-system-ui,sans-serif;
  background:radial-gradient(circle at top,#111827 0,#020617 52%,#000 100%);
  color:var(--text);
  padding-top:var(--headerH); /* offset for fixed header */
}

/* Main content wrapper */
.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:18px 20px 40px;
  flex:1 0 auto; /* for sticky footer */
}

/* Links */
a{
  color:var(--link);
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}

/* =========================
   Topbar / Header
========================= */
.topbar,
.top{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--headerH);
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 22px;
  margin:0;
  background:var(--surface);
  box-shadow:0 2px 12px rgba(0,0,0,.35);
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.5px;
}

.badge{
  width:28px;
  height:28px;
  border-radius:8px;
  background-image:url('/komvos-favicon-pack/komvos-64.png?v=20260430b');
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  box-shadow:0 0 20px rgba(16,185,129,.4);
  pointer-events:none;
}

.nav{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Base nav links */
.nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  margin-right:8px;
  border-radius:999px;
  color:var(--teal);
  text-decoration:none;
  opacity:.9;
  font-weight:600;
  background:transparent;
  transition:.15s background-color,.15s color,.15s opacity,.15s box-shadow;
}

/* Active/hover states */
.nav a.active,
.nav a[aria-current="page"]{
  background:rgba(30,197,182,.14);
  color:var(--teal);
  font-weight:700;
  opacity:1;
  box-shadow:0 0 0 1px rgba(30,197,182,.45);
}
.nav a:hover{
  opacity:1;
  background:rgba(30,197,182,.08);
}

/* Space helper sometimes used in pages (not needed) */
.topbar-space{display:none!important}

/* Make sure clicks work everywhere */
.topbar,
.top,
.topbar *,
.top *,
.wrap,
.wrap *{
  pointer-events:auto!important;
}

/* =========================
   Cards
========================= */
.card{
  background:var(--surface);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  margin:16px 0;
  overflow:visible;
}

.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.card-title{
  font-size:1rem;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
}

.card-title span.sub{
  font-size:.82rem;
  font-weight:400;
  color:var(--muted);
}

.card-body{
  font-size:.9rem;
  color:var(--muted);
}

/* =========================
   Tables
========================= */
.table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}
.table th,
.table td{
  padding:8px 10px;
  text-align:left;
  border-bottom:1px solid rgba(15,23,42,.8);
}
.table thead th{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#9CA3AF;
  background:rgba(15,23,42,.9);
}
.table tbody tr:nth-child(odd){
  background:rgba(15,23,42,.75);
}
.table tbody tr:nth-child(even){
  background:rgba(15,23,42,.6);
}
.table tbody tr:hover{
  background:rgba(15,23,42,.95);
}

/* Wrapper for wide tables in detail panel */
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table-tight th,
.table-tight td{
  padding:6px 8px;
}

/* =========================
   Forms, inputs, buttons
========================= */
input,
select,
textarea{
  width:100%;
  padding:7px 8px;
  border-radius:8px;
  border:1px solid rgba(148,163,184,.5);
  background:#020617;
  color:var(--text);
  font-size:.88rem;
}
input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 1px rgba(34,211,238,.4);
}

.btn,
button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 14px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-size:.86rem;
  font-weight:600;
  background:linear-gradient(135deg,#10B981,#22D3EE);
  color:#0F172A;
  box-shadow:0 12px 25px rgba(16,185,129,.3);
  transition:.15s transform,.15s box-shadow,.15s opacity,.15s background-position;
  background-size:200% 200%;
}
.btn:hover,
button:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 35px rgba(16,185,129,.35);
  background-position:100% 0;
}
.btn:active,
button:active{
  transform:translateY(0);
  box-shadow:0 10px 18px rgba(15,23,42,.8);
}

/* Ghost / secondary button */
.btn.ghost,
button.ghost{
  background:transparent;
  color:var(--muted);
  border:1px solid rgba(148,163,184,.4);
  box-shadow:none;
}
.btn.ghost:hover,
button.ghost:hover{
  color:var(--teal);
  border-color:rgba(34,211,238,.7);
  background:rgba(15,23,42,.6);
}

/* Danger button */
.btn.danger{
  background:linear-gradient(135deg,#EF4444,#F97373);
  color:#FEF2F2;
  box-shadow:0 10px 24px rgba(239,68,68,.45);
}

/* Tiny buttons inside tables (per-plugin/per-theme Update) */
.btn.xs{
  padding:4px 10px;
  font-size:.78rem;
  box-shadow:0 6px 14px rgba(16,185,129,.28);
}

/* Status badges */
.badge-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  margin-right:6px;
  border-radius:999px;
  background:rgba(148,163,184,.18);
  font-size:.8rem;
}

/* Form rows */
.form-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
}
.form-row > label{
  flex:1 1 180px;
  font-size:.86rem;
}

/* Preformatted text blocks */
pre{
  background:#020617;
  padding:10px;
  border-radius:10px;
  font-size:.8rem;
  max-height:360px;
  overflow:auto;
}

/* =========================
   Utilities
========================= */
.muted{
  color:var(--muted);
  font-size:.86rem;
}

.small{
  font-size:.8rem;
}

.mt-2{margin-top:8px}
.mt-3{margin-top:12px}
.mt-4{margin-top:16px}

.mb-0{margin-bottom:0}
.mb-2{margin-bottom:8px}
.mb-3{margin-bottom:12px}
.mb-4{margin-bottom:16px}

.flex{display:flex}
.flex-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.flex-center{
  display:flex;
  align-items:center;
  justify-content:center;
}
.gap-2{gap:8px}
.gap-3{gap:12px}

/* Status colors */
.status-ok{color:#22C55E}
.status-warn{color:#FACC15}
.status-bad{color:#EF4444}

/* alias of .topbar */
.top{}

/* misc */
.right{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.title-site{
  font-weight:800;
}

/* =========================
   Footer + sticky behavior
========================= */
.footer{
  max-width:1120px;
  margin:24px auto 10px;
  padding:12px 18px 18px;
  font-size:.8rem;
  color:var(--muted);
  text-align:center;
  line-height:1.5;
  opacity:.8;
}
.footer a{
  color:var(--muted);
  text-decoration:none;
}
.footer a:hover{
  color:var(--teal);
  text-decoration:underline;
}

/* Small footers used in Komvos */
.foot{
  max-width:1120px;
  margin:24px auto 8px;
  padding:10px 14px;
  text-align:center;
  font-size:.8rem;
  color:var(--muted);
  opacity:.8;
  background:var(--surface);
  border-top:1px solid rgba(255,255,255,.08);
}
.wrap > .foot.small{
  margin-top:12px;
  margin-bottom:0;
  max-width:640px;
  background:#020617;
  border-radius:0 0 var(--radius) var(--radius);
}
body > .foot.small{
  margin-top:32px;
  margin-bottom:12px;
  max-width:100%;
  border-radius:0;
}
.foot a{
  color:var(--muted);
  text-decoration:none;
}
.foot a:hover{
  color:var(--teal);
  text-decoration:underline;
}

/* Sticky footer for bottom copyright */
body > .foot.small,
body > .footer{
  flex-shrink:0;
  margin-top:auto;
}

/* =========================
   Dashboard layout
========================= */
.dash-grid{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* Panels inside dashboard */
.pane-actions,
.pane-sites{
  width:100%;
}

/* Actions header spacing */
.pane-actions .actions-header{
  margin-bottom:4px;
}

/* Per-site updates count cell */
.updates-count{
  text-align:center;
  font-weight:600;
}

/* =========================
   Actions panel styling
========================= */

/* Tabs row */
.pane-actions .tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:6px 0 12px;
  font-size:.82rem;
}

.pane-actions .tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(15,23,42,.95);
  color:var(--teal);
  text-decoration:none;
  font-weight:600;
  box-shadow:0 0 0 1px rgba(30,197,182,.28);
  transition:.15s background-color,.15s box-shadow,.15s transform,.15s color;
}
.pane-actions .tab span{
  display:inline-flex;
  align-items:center;
}
.pane-actions .tab .tab-count{
  min-width:18px;
  padding:1px 7px;
  border-radius:999px;
  background:rgba(34,211,238,.24);
  font-size:.76rem;
  font-weight:700;
  color:var(--text);
}
.pane-actions .tab.active{
  background:rgba(30,197,182,.18);
  box-shadow:0 0 0 1px rgba(30,197,182,.6);
  color:var(--teal);
}
.pane-actions .tab:hover{
  background:rgba(34,211,238,.12);
  box-shadow:0 0 0 1px rgba(34,211,238,.6);
  transform:translateY(-1px);
}

/* Old "summary pills" (kept for safety if still used) */
.pane-actions .updates-strip,
.pane-actions .updates-line,
.pane-actions .updates,
.pane-actions .summary-updates{
  margin:4px 0 10px;
  font-size:.82rem;
  color:var(--muted);
}
.pane-actions .updates-strip a,
.pane-actions .updates-line a,
.pane-actions .updates a,
.pane-actions .summary-updates a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  margin-right:6px;
  border-radius:999px;
  background:rgba(15,23,42,.95);
  color:var(--teal);
  text-decoration:none;
  font-weight:600;
  gap:4px;
}
.pane-actions .updates-strip a span,
.pane-actions .updates-line a span,
.pane-actions .updates a span,
.pane-actions .summary-updates a span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  padding:1px 6px;
  border-radius:999px;
  background:rgba(34,211,238,.22);
  font-size:.76rem;
  font-weight:700;
  color:var(--text);
}
.pane-actions .updates-strip a:hover,
.pane-actions .updates-line a:hover,
.pane-actions .updates a:hover,
.pane-actions .summary-updates a:hover{
  background:rgba(34,211,238,.12);
}

/* =========================
   Responsiveness
========================= */

/* Desktop → tablet */
@media (max-width:1024px){
  .wrap{
    padding:16px 18px 32px;
  }
}

/* ===== General mobile (phones / small tablets) ===== */
@media (max-width:768px){

  :root{
    /* πιο ψηλό header γιατί είναι 2 σειρές */
    --headerH:120px;
  }

  body{
    overflow-x:hidden;  /* καμία σελίδα να μην ξεφεύγει οριζόντια */
  }

  /* Header: 2 σειρές */
  .topbar,
  .top{
    padding:10px 12px 8px;
    flex-direction:column;
    align-items:flex-start;
    row-gap:8px;
  }

  .logo{
    gap:8px;
    font-size:.98rem;
  }

  /* Λόγω mobile, λίγο πιο στενή στήλη */
  .wrap{
    width:100%;
    max-width:640px;
    margin:0 auto;
    padding:14px 14px 26px;
  }

  .card{
    margin:12px 0;
    padding:14px;
    border-radius:12px;
    box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.3);
  }

  /* Logout επάνω δεξιά */
  .topbar .nav form[action*="action=logout"],
  .top .nav form[action*="action=logout"],
  #logout{
    position:absolute;
    top:10px;
    right:12px;
    margin:0;
  }
  .topbar .nav form[action*="action=logout"] .btn,
  .top .nav form[action*="action=logout"] .btn,
  #logout .btn{
    padding:6px 10px;
    font-size:.78rem;
    white-space:nowrap;
  }

  /* 2η σειρά: Dashboard / Sites / Actions σαν pills full-width */
  .topbar .nav,
  .top .nav{
    width:100%;
    display:flex;
    flex-wrap:nowrap;
    column-gap:6px;
    justify-content:space-between;
    margin-top:4px;
  }
  .topbar .nav a,
  .top .nav a{
    flex:1 1 0;
    margin-right:0;
    text-align:center;
    justify-content:center;
    font-size:.86rem;
  }

  /* Dashboard grid σε 1 στήλη */
  .dash-grid{
    flex-direction:column;
    gap:14px;
  }

  /* Βασικά tables σε mobile: φυσιολογικά, ΟΧΙ οριζόντιο scroll παντού */
  .table{
    display:table;
    width:100%;
    overflow:visible;
    white-space:normal;
    font-size:.84rem;
  }
  .table th,
  .table td{
    padding:8px 6px;
  }
}

/* Extra small phones */
@media (max-width:480px){
  .wrap{
    max-width:600px;
    padding:12px 10px 22px;
  }
  .badge{
    width:20px;
    height:20px;
  }
  input,
  button,
  select{
    font-size:16px; /* avoid iOS zoom */
  }
  pre{
    max-height:280px;
  }
  .footer{
    padding:10px 10px 18px;
    font-size:.76rem;
  }
}

/* ===== Mobile: ΜΟΝΟ οι λίστες sites να σκρολάρουν οριζόντια ===== */

@media (max-width:768px){

  /* DASHBOARD: λίστα sites */
  #sites{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  #sites .table{
    min-width:640px;
    white-space:nowrap;
  }

  /* SITES.PHP: wrapper γύρω από το "Connected sites" table */
  .sites-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .sites-scroll .table{
    min-width:640px;
    white-space:nowrap;
  }

  /* ACTIONS: αφήνουμε τα tables να δουλεύουν φυσιολογικά */
  .pane-actions .table{
    min-width:0;
    white-space:normal;
  }
}

/* ===== Mobile: only the sites lists scroll horizontally ===== */
@media (max-width:768px){

  /* DASHBOARD: sites list */
  #sites{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  #sites .table{
    min-width:640px;
    white-space:nowrap;
  }

  /* SITES.PHP: Connected sites list */
  .sites-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .sites-scroll .table{
    min-width:640px;
    white-space:nowrap;
  }

  /* ACTIONS: keep tables normal */
  .pane-actions .table{
    min-width:0;
    white-space:normal;
  }
}

/* ===== Komvos v3 additions ===== */
.notice-banner{
  margin:0 0 16px;
  padding:10px 14px;
  border-radius:12px;
  font-size:.9rem;
  box-shadow:var(--shadow);
}
.notice-banner.ok{background:rgba(16,185,129,.12); color:#D1FAE5;}
.notice-banner.warn{background:rgba(250,204,21,.12); color:#FEF3C7;}
.notice-banner.err{background:rgba(239,68,68,.12); color:#FEE2E2;}

.two-col{display:grid;grid-template-columns:minmax(320px, 420px) 1fr;gap:20px;align-items:start;}
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px;}
.mini-stat{background:#020617;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;}
.mini-label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.subpanel{background:#020617;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;}
.row-actions{display:flex;flex-wrap:wrap;gap:6px;}
.pagination-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;}
.comments-toolbar{display:grid;grid-template-columns:180px 1fr auto;gap:10px;margin-bottom:12px;}
.pane-body h3{margin:0 0 10px;}

@media (max-width: 980px){
  .two-col{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .comments-toolbar{grid-template-columns:1fr;}
}
@media (max-width: 640px){
  .stats-grid{grid-template-columns:1fr;}
}

/* ===== Komvos dashboard v20260410b ===== */
.table-wrap-sites{
  overflow-x:visible;
}

.table-sites{
  table-layout:fixed;
  width:100%;
}

/* Site / Group / Counts / Action */
.table-sites th:nth-child(1),
.table-sites td:nth-child(1){
  width:32%;
}

.table-sites th:nth-child(2),
.table-sites td:nth-child(2){
  width:32%;
}

.table-sites th:nth-child(3),
.table-sites td:nth-child(3){
  width:16%;
}

.table-sites th:nth-child(4),
.table-sites td:nth-child(4){
  width:20%;
}

.site-name-wrap,
.site-card-title-wrap{
  min-width:0;
}

.site-name,
.site-card-title,
#actions-title{
  display:block;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.site-name-link,
.site-card-title{
  text-decoration:none;
}

.site-url{
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.35;
}

/* Group column: keep normal words intact */
.site-group{
  overflow-wrap:normal;
  word-break:normal;
  white-space:normal;
  font-size:.80rem;
  line-height:1.25;
}

/* Prevent awkward mid-word breaking specifically inside the Group column */
.table-sites td:nth-child(2){
  overflow-wrap:normal;
  word-break:normal;
}

.table-sites td:nth-child(2) .site-group{
  display:block;
  max-width:100%;
}

.site-counts-cell{
  vertical-align:top;
}

.site-action-cell{
  vertical-align:top;
}

.site-action-cell .btn{
  white-space:nowrap;
  min-width:72px;
  justify-content:center;
}

.count-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:flex-start;
}

.count-chip-row.compact{
  gap:5px;
}

.count-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(148,163,184,.14);
  border:1px solid rgba(148,163,184,.18);
  font-size:.70rem;
  line-height:1;
  white-space:nowrap;
}

.count-chip strong{
  font-size:.72rem;
  color:var(--text);
}

.count-chip.is-active{
  background:rgba(30,197,182,.14);
  border-color:rgba(30,197,182,.45);
  color:var(--teal);
}

.count-chip-label{
  font-weight:600;
  letter-spacing:.02em;
}

.summary-bubble{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  background:#020617;
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  text-decoration:none;
}

.summary-bubble span{
  font-size:.85rem;
  color:var(--muted);
  font-weight:600;
}

.summary-bubble strong{
  font-size:1rem;
  color:var(--text);
}

.summary-bubble.is-active{
  border-color:rgba(30,197,182,.5);
  box-shadow:0 0 0 1px rgba(30,197,182,.22) inset;
}

.summary-bubble:hover{
  text-decoration:none;
  background:rgba(15,23,42,.9);
}

.count-bubble-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.overview-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.sites-cards{
  display:none;
}

.site-card{
  background:#020617;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:14px;
  margin-bottom:12px;
  box-shadow:0 10px 22px rgba(0,0,0,.24);
}

.site-card-head{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:flex-start;
}

.site-card-title{
  font-weight:800;
  color:var(--text);
}

.site-card-title:hover{
  color:var(--teal);
}

.site-card-group{
  margin:10px 0 12px;
}

/* Give the Sites table more real estate on desktop */
.two-col{
  grid-template-columns:minmax(520px,54%) minmax(0,1fr);
}

.pane-actions{
  min-width:0;
}

.pane-sites{
  min-width:0;
}

.pane-actions .tabs{
  row-gap:8px;
}

.pane-actions .tab{
  max-width:100%;
}

.pane-actions .tab span:first-child{
  overflow-wrap:anywhere;
  word-break:break-word;
}

@media (max-width:1100px){
  .two-col{grid-template-columns:minmax(320px,43%) minmax(0,1fr);}
}
@media (max-width:980px){
  .count-bubble-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .sites-desktop{display:none;}
  .sites-cards{display:block;}
  .two-col{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .count-bubble-grid{grid-template-columns:1fr;}
  .site-card-head{flex-direction:column;align-items:stretch;}
  .site-card-head .btn{width:100%;}
  .overview-actions .btn{width:100%;}
  .pane-actions .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .pane-actions .tab{justify-content:space-between;}
}
@media (max-width:480px){
  .pane-actions .tabs{grid-template-columns:1fr;}
}

/* ===== Komvos phase2 merged utility classes ===== */
.stack{display:flex;flex-direction:column;}
.gap-3{gap:12px;}
.grid-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
label{display:block;margin:0 0 6px;font-size:.85rem;color:var(--muted);}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.82rem;}
@media (max-width: 760px){
  .grid-two{grid-template-columns:1fr;}
}

/* ===== Komvos 20260411e site-edit regression fix ===== */
.table-sites th:nth-child(1), .table-sites td:nth-child(1){width:38%;}
.table-sites th:nth-child(2), .table-sites td:nth-child(2){width:18%;}
.table-sites th:nth-child(3), .table-sites td:nth-child(3){width:24%;}
.table-sites th:nth-child(4), .table-sites td:nth-child(4){width:20%;}
.site-counts-cell{min-width:0;}
.site-counts-cell .count-chip-row.compact{gap:4px;}
.site-counts-cell .count-chip{padding:3px 6px;gap:4px;font-size:.7rem;}
.site-counts-cell .count-chip strong{font-size:.72rem;}
.site-action-cell{vertical-align:top;}
.site-action-stack{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;}
.site-action-stack .btn{white-space:nowrap;}
.sites-mobile,.sites-cards{display:none !important;}
@media (max-width:900px){
  .sites-desktop{display:none !important;}
  .sites-mobile,.sites-cards{display:block !important;}
  .table-wrap-sites{display:none !important;}
}

/* =========================
   Settings page
========================= */
.stack{display:flex;flex-direction:column}
.settings-shell{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;align-items:start}
.settings-nav{display:flex;flex-direction:column;gap:8px;position:sticky;top:calc(var(--headerH) + 16px)}
.settings-nav-link{display:block;padding:10px 12px;border-radius:12px;background:rgba(15,23,42,.85);color:var(--muted);box-shadow:0 0 0 1px rgba(148,163,184,.14);font-weight:600}
.settings-nav-link:hover{color:var(--teal);text-decoration:none;background:rgba(15,23,42,.95)}
.settings-nav-link.active{color:var(--teal);background:rgba(30,197,182,.12);box-shadow:0 0 0 1px rgba(30,197,182,.45)}
.settings-content{min-width:0}
.card.subtle{background:#0b1220;border:1px solid rgba(255,255,255,.06);box-shadow:none}
.form-grid{display:grid;gap:12px}
.form-grid.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid.one-col{grid-template-columns:minmax(0,1fr)}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:.9rem}
.check{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;font-size:.88rem}
.check.inline{display:inline-flex!important}
.check input{width:auto}
.toolbar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.toolbar-row.left{justify-content:flex-start}
.toolbar-row.spread{justify-content:space-between}
.compact-top{margin-top:12px}
.compact-buttons .btn{padding:6px 12px;font-size:.8rem}
.wrap-buttons{flex-wrap:wrap}
.user-card{padding:14px;border-radius:12px;background:rgba(2,6,23,.72);box-shadow:0 0 0 1px rgba(255,255,255,.04)}
.user-card-list{display:flex;flex-direction:column;gap:12px}
.danger-block{border-color:rgba(239,68,68,.25)}
.notice-banner{display:block;padding:12px 14px;border-radius:14px;margin-bottom:14px;font-weight:600}
.notice-banner.ok{background:linear-gradient(90deg, rgba(16,185,129,.16), rgba(34,211,238,.12));color:#bdf9e7}
.notice-banner.err{background:linear-gradient(90deg, rgba(239,68,68,.16), rgba(249,115,115,.10));color:#fecaca}
@media (max-width: 980px){
  .settings-shell{grid-template-columns:1fr}
  .settings-nav{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 768px){
  .form-grid.two-col{grid-template-columns:1fr}
  .settings-nav{grid-template-columns:1fr}
}

/* ===== Komvos 20260429 comments + pending action UI ===== */
.count-chip.is-active.is-pending-action,
.summary-bubble.is-active.is-pending-action,
.mini-stat.is-pending-action.is-active{
  background:rgba(249,115,22,.16);
  border-color:rgba(249,115,22,.55);
  color:#FDBA74;
  box-shadow:0 0 0 1px rgba(249,115,22,.22) inset;
}
.count-chip.is-active.is-pending-action strong,
.summary-bubble.is-active.is-pending-action strong,
.mini-stat.is-pending-action.is-active strong{color:#FDBA74;}
.count-chip.is-active.is-backup-count,
.summary-bubble.is-active.is-backup-count,
.mini-stat.is-backup-count.is-active{
  background:rgba(59,130,246,.14);
  border-color:rgba(59,130,246,.48);
  color:#BFDBFE;
  box-shadow:0 0 0 1px rgba(59,130,246,.18) inset;
}
.count-chip.is-active.is-backup-count strong,
.summary-bubble.is-active.is-backup-count strong,
.mini-stat.is-backup-count.is-active strong{color:#BFDBFE;}
.comments-toolbar-wp,
.comments-bulkbar{display:grid;grid-template-columns:180px minmax(180px,1fr) auto;gap:10px;align-items:center;margin-bottom:10px;}
.comments-bulkbar{grid-template-columns:180px auto minmax(90px,1fr);justify-content:start;}
.comments-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.comments-table{min-width:920px;}
.comment-check-cell{width:42px;text-align:center;}
.comment-row-actions{min-width:260px;}
.comment-excerpt{max-width:440px;overflow-wrap:anywhere;word-break:break-word;}
.comment-status{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:rgba(148,163,184,.14);border:1px solid rgba(148,163,184,.18);font-size:.76rem;font-weight:700;line-height:1;}
.comment-status.status-approved{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.45);color:#A7F3D0;}
.comment-status.status-unapproved,
.comment-status.status-pending,
.comment-status.status-hold{background:rgba(249,115,22,.16);border-color:rgba(249,115,22,.50);color:#FDBA74;}
.comment-status.status-spam{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.50);color:#FECACA;}
.comment-status.status-trash{background:rgba(148,163,184,.16);border-color:rgba(148,163,184,.38);color:#CBD5E1;}
.comment-edit-row.is-hidden{display:none;}
.comment-quick-edit-panel{background:rgba(15,23,42,.88);border:1px solid rgba(148,163,184,.16);border-radius:14px;padding:14px;}
.grid-full{grid-column:1/-1;}
.btn.danger-soft{color:#FECACA;border-color:rgba(239,68,68,.45);}
.btn.danger-soft:hover{background:rgba(239,68,68,.14);}
.site-visit{text-decoration:none;}
@media (max-width:700px){
  .comments-toolbar-wp,
  .comments-bulkbar{grid-template-columns:1fr;}
  .comments-bulkbar .btn{width:100%;}
}

/* ===== Komvos 20260429b: site open vs visit actions ===== */
.site-external-link::after{content:' ↗';font-size:.8em;color:var(--muted);font-weight:700;}
.site-action-stack .site-open-newtab,
.site-action-stack .site-visit{text-decoration:none;}
.site-action-stack .site-open-newtab{padding-inline:10px;}
.site-card-actions{justify-content:flex-start;}
@media (max-width:640px){
  .site-card-actions{width:100%;}
  .site-card-actions .btn{width:100%;justify-content:center;}
}


/* Komvos logo reliability patch 20260430b */
.logo .badge,
.topbar .logo .badge,
.top .logo .badge{
  width:28px !important;
  height:28px !important;
  border-radius:8px !important;
  background-image:url('/komvos-favicon-pack/komvos-64.png?v=20260430b') !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:contain !important;
  background-color:rgba(16,185,129,.12) !important;
  box-shadow:0 0 20px rgba(16,185,129,.40) !important;
}


/* Komvos rescue logo reliability patch */
.logo .badge,
.topbar .logo .badge,
.top .logo .badge{
  width:28px !important;
  height:28px !important;
  display:inline-block !important;
  background-image:url('/komvos-favicon-pack/komvos-64.png?v=20260430r2') !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:contain !important;
  background-color:rgba(16,185,129,.10) !important;
}


/* ===== Komvos header logo img fix 20260501a ===== */
.logo{
  color:var(--text);
  text-decoration:none !important;
}

.logo:hover{
  color:var(--text);
  text-decoration:none !important;
}

.brand-mark{
  width:28px;
  height:28px;
  display:block;
  flex:0 0 28px;
  border-radius:8px;
  object-fit:cover;
  box-shadow:0 0 20px rgba(16,185,129,.40);
}

.logo .badge{
  display:none !important;
}