body {
  font-family: "OpenAI Sans" !important;
  padding: 24px;
  margin: 0;
}

pre {
  padding: 5px;
  background-color: #d1d1d1 !important;
}

code {
  font-family: "OpenAI Sans Variable Scripts" !important;
}

#topBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 10px 14px;
}

#activityTracker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  align-items: start; /* Prevents cards from stretching to match the row's tallest card */
}

.activity-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.activity-card .activity-desc {
  flex-grow: 1;
  margin: 0 0 14px 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.activity-card.card-stickied {
  border: 1px solid #c29d38 !important;
  box-shadow: 0 0 6px rgba(194, 157, 56, 0.25);
}

.card-title-header {
  padding: 0.4em 7.5em 0.4em 0.5em !important;
  margin: 0 0 0.8em 0;
}

/* Indicators in top right */
.card-badges-topright {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.card-duration {
  font-size: 0.75rem;
  font-weight: bold;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.card-hidden-badge {
  font-size: 0.75rem;
  font-weight: bold;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.card-sticky-badge {
  font-size: 0.75rem;
  font-weight: bold;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: #f7e6a1 !important;
  color: #594300 !important;
  border-color: #d1b85d !important;
}

.card-visibility-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 6px;
  background: #ececec;
  color: #444;
}

.card-last-edited {
  font-size: 0.75rem;
  color: #777777;
  font-style: italic;
  margin-left: auto;
}

.user-mgmt-table {
  width: 100%;
  border-collapse: collapse;
}

.user-mgmt-table th, 
.user-mgmt-table td {
  border: 1px solid #d3d3d3;
}

.user-mgmt-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.85rem;
  padding: 2px 4px;
  white-space: nowrap;
}

/* ----------------------------------------------------
   SENSITIVE CONTENT BLUR EFFECT
---------------------------------------------------- */
.activity-desc.sensitive-blur {
  filter: blur(5px);
  user-select: none;
  cursor: pointer;
  transition: filter 0.2s ease-in-out;
}

.sensitive-container {
  position: relative;
  flex-grow: 1;
}

.sensitive-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  z-index: 3;
  text-align: center;
  padding: 8px;
}

/* ----------------------------------------------------
   FLAG ICONS
---------------------------------------------------- */
.flag-icon {
  display: inline-block;
  width: 18px;
  height: 12px;
  vertical-align: middle;
  margin-right: 6px;
  border-radius: 2px;
  box-shadow: 0 0 1px rgba(0,0,0,0.5);
  background-size: cover;
  background-position: center;
}

.flag-se {
  background-color: #005293;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 10"><rect width="16" height="10" fill="%23005293"/><rect width="2" height="10" x="5" fill="%23fecb00"/><rect width="16" height="2" y="4" fill="%23fecb00"/></svg>');
}

.flag-gb {
  background-color: #012169;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"><clipPath id="s"><path d="M0,0 v30 h60 v-30 z"/></clipPath><clipPath id="t"><path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z"/></clipPath><g clip-path="url(%23s)"><path d="M0,0 L60,30 M60,0 L0,30" stroke="%23fff" stroke-width="6"/><path d="M0,0 L60,30 M60,0 L0,30" clip-path="url(%23t)" stroke="%23c8102e" stroke-width="4"/><path d="M30,0 v30 M0,15 h60" stroke="%23fff" stroke-width="10"/><path d="M30,0 v30 M0,15 h60" stroke="%23c8102e" stroke-width="6"/></g></svg>');
}

.flag-fr {
  background-color: #002395;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600"><rect width="900" height="600" fill="%23ed2939"/><rect width="600" height="600" fill="%23fff"/><rect width="300" height="600" fill="%23002395"/></svg>');
}

.flag-de {
  background-color: #000;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3"><rect width="5" height="3" y="0" fill="%23000"/><rect width="5" height="2" y="1" fill="%23d00"/><rect width="5" height="1" y="2" fill="%23ffce00"/></svg>');
}

.flag-es {
  background-color: #aa151b;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 500"><rect width="750" height="500" fill="%23aa151b"/><rect width="750" height="250" y="125" fill="%23f1bf00"/></svg>');
}

.flag-pt {
  background-color: #006600;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400"><rect width="600" height="400" fill="%23ff0000"/><rect width="240" height="400" fill="%23006600"/><circle cx="240" cy="200" r="80" fill="%23ffff00"/><circle cx="240" cy="200" r="70" fill="none" stroke="%23000" stroke-width="6"/><path d="M205,160 h70 v45 a35,35 0 0 1 -70,0 z" fill="%23fff" stroke="%23ff0000" stroke-width="12"/></svg>');
}

.flag-ru {
  background-color: #fff;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 6"><rect width="9" height="6" fill="%23d52b1e"/><rect width="9" height="4" fill="%230039a6"/><rect width="9" height="2" fill="%23fff"/></svg>');
}

.flag-cn {
  background-color: #ee1c25;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="%23ee1c25"/><polygon points="5,2 6.18,5.62 2.05,3.38 7.95,3.38 3.82,5.62" fill="%23ffff00"/><polygon points="10,1.35 10.37,2.5 9.17,1.8 11.02,1.8 9.72,2.5" fill="%23ffff00"/><polygon points="12,3.35 12.37,4.5 11.17,3.8 13.02,3.8 11.72,4.5" fill="%23ffff00"/><polygon points="12,6.35 12.37,7.5 11.17,6.8 13.02,6.8 11.72,7.5" fill="%23ffff00"/><polygon points="10,8.35 10.37,9.5 9.17,8.8 11.02,8.8 9.72,9.5" fill="%23ffff00"/></svg>');
}

/* ----------------------------------------------------
   JQUERY UI ICONS FIX
---------------------------------------------------- */

.ui-icon {
  width: 16px !important;
  height: 16px !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 14px 14px !important;
}

.ui-icon-clock,
.ui-icon-gear,
.ui-icon-check,
.ui-icon-close,
.ui-icon-closethick,
.ui-icon-plusthick,
.ui-icon-alert,
.ui-icon-hourglass,
.ui-icon-locked,
.ui-icon-unlocked {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
}

.ui-icon-clock {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>') !important;
}

.ui-icon-gear {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>') !important;
}

.ui-icon-check {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234ca300" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>') !important;
}

.ui-icon-close,
.ui-icon-closethick {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>') !important;
}

.ui-icon-plusthick {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>') !important;
}

.ui-icon-alert {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffcf29" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>') !important;
}

.ui-icon-hourglass {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2"><path d="M5 22h14M5 2h14m-2 20v-5l-5-5 5-5V2H7v5l5 5-5 5v5z"/></svg>') !important;
}

.ui-icon-locked {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>') !important;
}

.ui-icon-pin-s {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23594300"><path d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z"/></svg>') !important;
}

/* 1. Force the button to be a centered flex container */
.card-action-btn.ui-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important; /* Remove asymmetric button padding */
  position: relative;
}

/* 2. Reset jQuery UI's absolute offsets on icon-only buttons */
.card-action-btn.ui-button .ui-icon {
  position: static !important;
  margin: 0 !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
}

.ui-icon-pencil {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>') !important;
}

.ui-icon-trash {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>') !important;
}

.card-action-btn.ui-button {
  background: #1e1e1e !important;
  border: 1px solid #333333 !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  min-width: 32px;
  height: 28px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.card-action-btn.ui-button:hover {
  background: #2b2b2b !important;
  border-color: #555555 !important;
}

.card-action-btn.ui-button .ui-icon {
  margin: 0 !important;
}

/* ----------------------------------------------------
   SQL EDITOR STYLES
---------------------------------------------------- */
.sql-preset-btn.ui-button {
  font-size: 0.75rem !important;
  padding: 2px 8px !important;
}

.sql-result-table {
  width: 100%;
  border-collapse: collapse;
  font-family: monospace;
  font-size: 0.82rem;
}

.sql-result-table th,
.sql-result-table td {
  border: 1px solid #d3d3d3;
  padding: 4px 8px;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}

.sql-result-table th {
  background-color: #efefef;
  position: sticky;
  top: 0;
  z-index: 1;
}

.sql-result-table tbody tr:nth-child(even) {
  background-color: #fbfbfb;
}

.sql-null-cell {
  color: #999;
  font-style: italic;
}