.mm-skin-default {
  --mm-widget-bg: #ffffff;
  --mm-widget-border: #e2e8f0;
  --mm-widget-radius: 16px;

  --mm-bar-bg: rgba(224, 242, 254, 0.75);
  --mm-bar-border: #bae6fd;
  --mm-bar-text: #0f172a;

  --mm-btn-text: #334155;
  --mm-btn-hover-bg: rgba(255,255,255,0.65);
  --mm-body-text: #0f172a;

  --mm-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.mm-widget {
  background: var(--mm-widget-bg);
  border: 1px solid var(--mm-widget-border);
  border-radius: var(--mm-widget-radius);
  box-shadow: var(--mm-shadow);
  overflow: hidden;
}

/* ───────────────────────────────────────────── */
/* Widget title bar = window chrome               */
/* ───────────────────────────────────────────── */

.mm-widget-bar {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--mm-bar-bg);
  border-bottom: 1px solid var(--mm-bar-border);
  color: var(--mm-bar-text);

  cursor: move;
  user-select: none;
}

/* Left side: icon + title */
.mm-widget-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Title truncates cleanly */
.mm-widget-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Icon */
.mm-widget-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Right side: window controls */
.mm-widget-actions {
  margin-left: auto;          /* ← pushes controls hard-right */
  display: flex;
  align-items: center;
  gap: 4px;

  position: relative;
  z-index: 2;                 /* stays clickable over drag area */
}

/* Minimise button */
.mm-widget-btn {
  width: 28px;
  height: 24px;

  font-size: 14px;
  line-height: 1;
  font-weight: 600;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 6px;
  color: var(--mm-btn-text);
  background: transparent;
  border: 0;
  cursor: pointer;
}



/* Gridstack item content must fill the grid item height */
.grid-stack-item-content.dashboard-widget {
  height: relative;
}

/* Widget frame must fill its parent and become a vertical flex layout */
.mm-widget {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0; /* important for nested flex + scrolling */
}

/* Title bar stays fixed */
.mm-widget-bar {
  flex: 0 0 auto;
}

/* Body grows to fill remaining height and can scroll internally */
.mm-widget-body {
  flex: 1 1 auto;
  min-height: 0;   /* important */
  overflow: auto;  /* prevents the handle drifting away visually */
}




/* Ensure the resize handle sits flush in the bottom-right corner */
.grid-stack-item-content.dashboard-widget .ui-resizable-handle.ui-resizable-se {
  right: 6px !important;
  bottom: 6px !important;
  z-index: 80 !important;

  /* Bigger grab area (invisible but makes UX feel much better) */
  width: 22px !important;
  height: 22px !important;
}

/* Optional: if anything is clipping it */
.grid-stack-item-content.dashboard-widget {
  overflow: visible;
}






/* Subtle hover feedback */
.mm-widget-btn:hover {
  background: var(--mm-btn-hover-bg);
}

/* Widget body */
.mm-widget-body {
  padding: 12px;
  color: var(--mm-body-text);
}

.mm-window-minimising {
  transition: 
    transform 220ms ease-in,
    opacity 180ms ease-in;
  transform-origin: top left;
  pointer-events: none;
}

.mm-minimise-ghost {
  position: fixed;
  z-index: 9999;
  transition: transform 220ms ease-in, opacity 180ms ease-in;
  transform-origin: top left;
  pointer-events: none;
}