/* Material Design v2 - Blue & White, Grid cards 3-column */
:root{
  --primary:#1e88e5;
  --primary-700:#1565c0;
  --surface:#ffffff;
  --bg:#f4f8ff;
  --text:#0f1720;
  --muted:#6b7280;
  --radius:12px;
  --elevation-1: 0 1px 3px rgba(16,24,40,0.08);
  --elevation-2: 0 6px 20px rgba(16,24,40,0.12);
}

/* Typography */
body { font-family: 'Roboto', Arial, sans-serif; background:var(--bg); color:var(--text); margin:0; padding:0; }

/* Trigger button */
.jcm-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:10px; border:none; cursor:pointer;
  background:linear-gradient(90deg,var(--primary),var(--primary-700));
  color:#fff; font-weight:600; box-shadow:var(--elevation-1);
  transition:transform .12s ease, box-shadow .12s ease;
}
.jcm-btn:active{ transform:translateY(1px); }
.jcm-btn .material-icons { font-size:18px; }

/* Modal overlay */
.jcm-modal{ display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; background:rgba(15,23,32,0.35); padding:24px; }
.jcm-modal[aria-hidden="false"]{ display:flex; }

/* Modal card */
.jcm-modal-content{
  width:100%; max-width:980px; background:var(--surface); border-radius:16px; padding:22px; box-shadow:var(--elevation-2);
  transform:translateY(8px); opacity:0; transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .2s;
}
.jcm-modal[aria-hidden="false"] .jcm-modal-content{ transform:none; opacity:1; }

.jcm-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.jcm-header h3{ margin:0; font-size:20px; font-weight:700; color:var(--text); }
.jcm-close{ background:transparent; border:none; font-size:24px; cursor:pointer; color:var(--muted); }

/* Filters - modern selects */
.jcm-filters{ display:flex; gap:12px; align-items:center; margin-bottom:18px; flex-wrap:wrap; }
.jcm-select-wrap{ position:relative; }
.jcm-select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding:10px 12px; border-radius:8px; border:1px solid rgba(15,23,32,0.06);
  background:linear-gradient(180deg,#fff,#fbfdff); min-width:120px; font-weight:500; box-shadow:var(--elevation-1);
}
.jcm-select:focus{ outline:none; box-shadow:0 6px 20px rgba(30,136,229,0.12); border-color:var(--primary-700); }

/* Filter button */
.jcm-filter-btn{
  padding:10px 14px; border-radius:10px; border:none; cursor:pointer;
  background:transparent; color:var(--primary-700); font-weight:700; border:1px solid rgba(30,136,229,0.12);
  transition:background .12s, transform .12s;
}
.jcm-filter-btn:hover{ background:rgba(30,136,229,0.04); transform:translateY(-2px); }

/* Results grid */
#jcm-results{ margin-top:8px; }
.jcm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:start; }
@media (max-width:900px){ .jcm-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .jcm-grid{ grid-template-columns:1fr; } }

.jcm-card{
  background:var(--surface); border-radius:12px; padding:14px; box-shadow:var(--elevation-1);
  display:flex; flex-direction:column; gap:8px; transition:transform .14s ease, box-shadow .14s ease;
}
.jcm-card:hover{ transform:translateY(-6px); box-shadow:0 14px 32px rgba(16,24,40,0.10); }

.jcm-card .title{ font-weight:700; font-size:15px; color:var(--text); }
.jcm-card .meta{ font-size:13px; color:var(--muted); display:flex; gap:8px; align-items:center; justify-content:space-between; }
.jcm-card .actions{ display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:8px; }

.jcm-download{
  padding:8px 12px; border-radius:8px; text-decoration:none; font-weight:700; border:1px solid rgba(30,136,229,0.12);
  background:linear-gradient(180deg,#fff,#f6fbff); color:var(--primary-700);
  transition:transform .12s, box-shadow .12s;
}
.jcm-download:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(30,136,229,0.08); }

/* Empty / loading */
.empty{ padding:24px; text-align:center; color:var(--muted); font-weight:500; }

/* Admin small tweaks */
#jcm_pdf_url{ padding:8px; border-radius:6px; border:1px solid #eef6ff; background:#fbfdff; width:60%; }
#jcm_upload_btn, #jcm_remove_btn{ margin-left:8px; }

/* Utilities */
.small{ font-size:13px; color:var(--muted); }