/* ============================================================
   print-center.css — PDF & Print Center (Phase 10). NEW file.
   Self-contained; inherits app theme tokens when present.
   ============================================================ */
.pc {
  --s: var(--c-surface, #fff); --bd: var(--c-border, #e6e6ef);
  --pri: var(--c-primary, #5b6bff); --acc: var(--c-accent, #ff6b9d);
  --mut: var(--c-muted, #8a8aa3); --danger: var(--c-danger, #ff5a5a);
  font-family: "Noto Kufi Arabic", system-ui, sans-serif; color: #2b2b3a; background: var(--c-bg, #f6f4ff);
  min-height: 100%; position: relative;
}
.pc * { box-sizing: border-box; }
@keyframes pcPop { 0% { opacity: 0; transform: scale(.94); } 100% { opacity: 1; transform: scale(1); } }
.pc .anim-pop { animation: pcPop .24s ease both; }

/* header */
.pc-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--s); border-bottom: 1px solid var(--bd); flex-wrap: wrap; }
.pc-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.pc-brand__logo { font-size: 24px; } .pc-brand__title { color: var(--acc); font-size: 18px; }
.pc-search { flex: 1; min-width: 160px; }
.pc-search__input { width: 100%; font: inherit; padding: 11px 16px; border-radius: 30px; border: 2px solid var(--bd); background: var(--c-bg, #f6f4ff); outline: none; }
.pc-queuebtn { font: inherit; font-weight: 700; background: var(--pri); color: #fff; border: none; border-radius: 30px; padding: 10px 18px; cursor: pointer; }

/* body */
.pc-body { display: flex; align-items: flex-start; }
.pc-sidebar { width: 210px; flex: none; padding: 14px 10px; border-inline-end: 1px solid var(--bd); background: var(--s); min-height: calc(100vh - 66px); }
.pc-side__h { font-size: 12px; font-weight: 700; color: var(--mut); margin: 4px 8px 10px; }
.pc-side { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; border: none; background: transparent; border-radius: 12px; padding: 11px 12px; cursor: pointer; font: inherit; font-weight: 700; margin-bottom: 3px; }
.pc-side:hover { background: var(--c-bg, #f2f4ff); }
.pc-side.is-active { background: var(--pri); color: #fff; }
.pc-side__t { flex: 1; } .pc-side__c { font-size: 12px; opacity: .8; }

.pc-mainarea { flex: 1; min-width: 0; padding: 14px 18px 40px; }
.pc-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pc-filters__lbl { font-size: 13px; font-weight: 700; color: var(--mut); }
.pc-chip { font: inherit; font-size: 13px; font-weight: 700; border: 2px solid var(--bd); background: var(--s); border-radius: 30px; padding: 7px 13px; cursor: pointer; }
.pc-chip.is-on { background: var(--pri); color: #fff; border-color: var(--pri); }

.pc-selbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pc-selbar:not(:empty) { background: #eef1ff; border: 1px solid var(--bd); border-radius: 14px; padding: 8px 12px; margin-bottom: 12px; }
.pc-selbar__n { font-weight: 700; color: var(--pri); }

/* grid + cards */
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.pc-card { background: var(--s); border: 1px solid var(--bd); border-radius: 18px; padding: 8px; box-shadow: 0 6px 16px var(--c-shadow, rgba(91,107,255,.1)); cursor: pointer; transition: transform .14s ease; }
.pc-card:hover { transform: translateY(-3px); }
.pc-card__thumb { position: relative; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pc-card__emoji { font-size: 46px; position: absolute; opacity: .8; }
.pc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; opacity: 0; transition: opacity .3s ease; background: #fff; }
.pc-card__img.is-loaded { opacity: 1; }
.pc-card__title { font-weight: 700; font-size: 14px; margin-top: 8px; text-align: center; }
.pc-card__row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; gap: 6px; }
.pc-badge { font-size: 11px; font-weight: 700; color: var(--mut); background: var(--c-bg, #f2f4ff); border-radius: 20px; padding: 3px 9px; }
.pc-check { position: absolute; top: 6px; inset-inline-start: 6px; width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--pri); background: #fff; color: var(--pri); cursor: pointer; font-weight: 700; }
.pc-check.is-on { background: var(--pri); color: #fff; }
.pc-heart { position: absolute; top: 6px; inset-inline-end: 6px; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(255,255,255,.85); cursor: pointer; font-size: 14px; }
.pc-qbtn { font: inherit; font-size: 11px; font-weight: 700; border: 2px solid var(--bd); background: var(--s); color: var(--pri); border-radius: 20px; padding: 4px 9px; cursor: pointer; }
.pc-qbtn.is-in { background: #e3f8ee; border-color: #57c98a; color: #2e8b57; }

.pc-emptybig { text-align: center; color: var(--mut); padding: 60px; }
.pc-emptybig__e { font-size: 48px; }

/* buttons */
.pc-btn { font: inherit; font-weight: 700; border: 2px solid var(--bd); background: var(--s); border-radius: 30px; padding: 9px 15px; cursor: pointer; }
.pc-btn--primary { background: var(--pri); color: #fff; border-color: var(--pri); }
.pc-btn--danger { color: var(--danger); border-color: #ffd0d0; }
.pc-iconbtn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--bd); background: var(--s); cursor: pointer; font-size: 16px; }

/* queue slide panel */
.pc-queuewrap { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.pc-queuewrap.is-open { pointer-events: auto; background: rgba(20,20,40,.35); }
.pc-queue { position: absolute; inset-block: 0; inset-inline-end: 0; width: 340px; max-width: 90vw; background: var(--s); border-inline-start: 1px solid var(--bd); box-shadow: -10px 0 30px rgba(0,0,0,.15); padding: 14px; overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; }
[dir="rtl"] .pc-queue { transform: translateX(-100%); }
.pc-queuewrap.is-open .pc-queue { transform: none; }
.pc-queue__head { display: flex; align-items: center; gap: 8px; }
.pc-queue__head h3 { margin: 0; flex: 1; color: var(--acc); font-size: 17px; }
.pc-qcount { font-size: 12px; color: var(--mut); font-weight: 700; }
.pc-queue__label { font-size: 12px; font-weight: 700; color: var(--mut); margin: 14px 0 6px; }
.pc-qlist { display: flex; flex-direction: column; gap: 6px; }
.pc-qrow { display: flex; align-items: center; gap: 6px; background: var(--c-bg, #f6f7ff); border: 1px solid var(--bd); border-radius: 12px; padding: 6px 8px; }
.pc-qrow__e { font-size: 20px; } .pc-qrow__t { flex: 1; font-size: 13px; font-weight: 700; }
.pc-qmini { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--bd); background: var(--s); cursor: pointer; }
.pc-qmini:disabled { opacity: .35; } .pc-qmini--x { color: var(--danger); }
.pc-qactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pc-qactions .pc-btn { padding: 8px 12px; font-size: 13px; }

/* settings */
.pc-settings { display: flex; flex-direction: column; gap: 8px; }
.pc-set { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-set__lbl { font-size: 13px; font-weight: 700; color: var(--mut); min-width: 84px; }
.pc-set__val { font-weight: 700; color: var(--pri); font-size: 12px; }
.pc-seg { display: flex; gap: 4px; }
.pc-seg__b { font: inherit; font-size: 12px; font-weight: 700; border: 2px solid var(--bd); background: var(--s); border-radius: 20px; padding: 6px 11px; cursor: pointer; }
.pc-seg__b.is-on { background: var(--pri); color: #fff; border-color: var(--pri); }
.pc-range { flex: 1; accent-color: var(--pri); }

/* preview modal */
.pc-backdrop { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20,20,40,.5); opacity: 0; transition: opacity .2s ease; }
.pc-backdrop.is-open { opacity: 1; }
.pc-preview { background: var(--s); border-radius: 20px; width: 100%; max-width: 900px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.pc-preview__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--bd); }
.pc-preview__head h3 { margin: 0; color: var(--acc); }
.pc-preview__body { display: flex; gap: 16px; padding: 16px; overflow: auto; }
.pc-preview__settings { width: 240px; flex: none; }
.pc-preview__pages { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; align-content: start; }
.pc-page { background: #f2f4ff; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.pc-page__img { width: 100%; display: block; background: #fff; }
.pc-page__no { text-align: center; font-size: 12px; color: var(--mut); padding: 4px; font-weight: 700; }
.pc-skel { aspect-ratio: 3/4; background: linear-gradient(100deg,#e9ecff 30%,#f4f6ff 50%,#e9ecff 70%); background-size: 200% 100%; animation: pcShim 1.2s infinite; }
@keyframes pcShim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.pc-preview__actions { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--bd); flex-wrap: wrap; }
.pc-empty { color: var(--mut); font-size: 13px; padding: 12px; text-align: center; }

@media (max-width: 780px) {
  .pc-sidebar { display: none; }
  .pc-preview__body { flex-direction: column; } .pc-preview__settings { width: auto; }
  .pc-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}