/* ========================================
   «عروضي» as a documents grid (on top of account.css)
   pages/portal/my-decks.html
======================================== */

.md-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* «عرض جديد» tile */
.md-new {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  min-height: 260px;
  border: 2px dashed #b9cfd4;
  border-radius: 16px;
  background: #ffffff;
  color: var(--a-navy);
  text-align: center;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}

.md-new:hover { border-color: var(--a-mint); background: #f2fcfa; }

.md-new-plus {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--a-mint);
  color: var(--a-navy-2);
  font-size: 26px;
  font-weight: 700;
}

.md-new strong { font-size: 17px; }
.md-new small { color: var(--a-muted); font-size: 13px; }

/* Cards */
.md-card { position: relative; cursor: pointer; }
.md-card:focus-visible { outline: 3px solid var(--a-mint); outline-offset: 2px; }
.md-card .acc-deck-body { padding-bottom: 18px; }
.md-card.is-open { border-color: var(--a-mint); box-shadow: 0 0 0 1px var(--a-mint); }

.md-badge {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--a-mint);
  color: var(--a-navy-2);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 52, 75, .18);
}

.md-more {
  position: absolute;
  bottom: 14px;
  inset-inline-end: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--a-muted);
  cursor: pointer;
}

.md-more svg { width: 20px; height: 20px; fill: currentColor; }
.md-more:hover, .md-more[aria-expanded="true"] { border-color: var(--a-line); background: var(--a-soft); color: var(--a-navy); }

.md-menu {
  position: absolute;
  bottom: 54px;
  inset-inline-end: 12px;
  z-index: 5;
  display: grid;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--a-line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(0, 52, 75, .16);
}

.md-menu button {
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--a-ink);
  font-family: inherit;
  font-size: 14px;
  text-align: start;
  cursor: pointer;
}

.md-menu button:hover, .md-menu button:focus-visible { outline: 0; background: var(--a-soft); color: var(--a-navy); }
.md-menu button.is-danger { color: #a3271b; }
.md-menu button.is-danger:hover { background: #fff3f1; }
.md-menu hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--a-line); }

.md-empty { grid-column: span 2; }

/* Rename dialog */
.md-dialog { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.md-dialog[hidden] { display: none; }
.md-dialog-backdrop { position: absolute; inset: 0; background: rgba(0, 30, 44, .55); }

.md-dialog-box {
  position: relative;
  display: grid;
  gap: 16px;
  width: min(440px, 100%);
  padding: 26px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 30px 70px rgba(0, 30, 44, .3);
}

.md-dialog-box h2 { margin: 0; color: var(--a-navy); font-size: 19px; }

.md-dialog-box input {
  height: 46px;
  padding: 0 14px;
  border: 1px solid #c9d6da;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
}

.md-dialog-box input:focus { outline: 0; border-color: var(--a-navy); box-shadow: 0 0 0 3px rgba(0, 206, 183, .25); }
.md-dialog-actions { display: flex; gap: 10px; }

@media (max-width: 640px) {
  .md-empty { grid-column: auto; }
  .md-new { min-height: 140px; }
}

/* The «⋯» menu may extend past the card */
.md-card { overflow: visible; }
.md-card .acc-cover { border-radius: 15px 15px 0 0; overflow: hidden; }
.md-card .md-menu { bottom: 52px; }