/* Card Reports module — Phase 3 (client). Scoped entirely under .cr-*
   classes. The header (.mp-native-*) is NOT touched at all — the entry
   point lives in the app's existing "Още" bottom sheet instead (see
   .cr-sheet-badge / .cr-more-dot below), so there is zero risk to the
   name/avatar space or the bell/cart/refresh icons. */

/* small unread badge appended to the injected sheet button */
.cr-sheet-badge{
  margin-left:auto;
  background:#e53935;
  color:#fff;
  font-size:11px;
  font-weight:900;
  border-radius:999px;
  min-width:18px;
  height:18px;
  display:none;
  align-items:center;
  justify-content:center;
  padding:0 5px;
}

/* small red dot on the "Още" tab itself, so the unread state is visible
   without having to open the sheet first */
.cr-more-dot{
  display:none;
  position:absolute;
  top:2px;
  right:calc(50% - 22px);
  width:10px;
  height:10px;
  border-radius:50%;
  background:#e53935;
  border:2px solid #fff;
}

/* ---------- startup "you have a new message" popup ---------- */

#crStartupPopup{
  display:none;
  position:fixed;
  inset:0;
  z-index:100003;
  background:rgba(20,20,20,.55);
  align-items:center;
  justify-content:center;
  padding:
    calc(env(safe-area-inset-top, 0px) + 28px)
    calc(env(safe-area-inset-right, 0px) + 16px)
    calc(env(safe-area-inset-bottom, 0px) + 12px + 78px + 16px)
    calc(env(safe-area-inset-left, 0px) + 16px);
  box-sizing:border-box;
}

#crStartupPopup.open{ display:flex; }

#crStartupPopup .cr-startup-card{
  max-width:360px;
  width:100%;
  max-height:100%;
  overflow-y:auto;
  background:#fff;
  border-radius:26px;
  padding:22px 20px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  box-sizing:border-box;
}

#crStartupPopup .cr-startup-icon{
  font-size:40px;
  margin-bottom:10px;
}

#crStartupPopup h3{
  margin:0 0 10px;
  font-size:18px;
}

#crStartupPopup p{
  margin:0 0 18px;
  font-size:14px;
  color:#555;
  line-height:1.5;
}

#crStartupPopup .cr-actions{
  display:flex;
  gap:10px;
}

/* ---------- overlay + panel ---------- */

/* z-index:100000 — the app's own bottom nav (.mp-bottom-nav) and its
   backdrop use 99990/99980, so this must clear both or the nav renders on
   top of (and visually "swallows") the bottom of the panel.
   The padding below carves out a safe zone: ~28px (+ notch) at the top,
   and the bottom nav's exact real footprint (12px offset + 78px height)
   plus a 16px gap at the bottom. .cr-panel's max-height:100% is resolved
   against this already-safe zone, not the raw viewport, so the panel can
   never end up hidden behind the nav regardless of content length or
   portrait/landscape orientation. */
#crOverlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:100000;
  background:rgba(20,20,20,.55);
  align-items:center;
  justify-content:center;
  padding:
    calc(env(safe-area-inset-top, 0px) + 28px)
    calc(env(safe-area-inset-right, 0px) + 16px)
    calc(env(safe-area-inset-bottom, 0px) + 12px + 78px + 16px)
    calc(env(safe-area-inset-left, 0px) + 16px);
  box-sizing:border-box;
}

#crOverlay.open{
  display:flex;
}

#crOverlay .cr-panel{
  position:relative;
  width:100%;
  max-width:620px;
  max-height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background:#fff;
  border-radius:26px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  padding:0 0 24px;
  box-sizing:border-box;
}

.cr-panel .cr-head{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  background:linear-gradient(135deg,#ffd900,#fff08a);
  border-radius:26px 26px 0 0;
}

@media(min-width:700px){
  .cr-panel .cr-head{ border-radius:26px 26px 0 0; }
}

.cr-panel .cr-head h2{
  margin:0;
  font-size:18px;
  font-weight:900;
  color:#111;
}

.cr-panel .cr-close{
  border:none;
  background:#fff;
  width:34px;
  height:34px;
  border-radius:50%;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  color:#111;
}

.cr-body{
  padding:18px;
}

.cr-screen{ display:none; }
.cr-screen.active{ display:block; }

.cr-intro-text{
  font-size:14px;
  color:#555;
  line-height:1.5;
  margin:0 0 16px;
}

.cr-home-buttons{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cr-home-buttons button{
  width:100%;
  padding:16px;
  border-radius:16px;
  border:2px solid #eee;
  background:#fafafa;
  font-size:15px;
  font-weight:800;
  color:#111;
  cursor:pointer;
  text-align:left;
  display:flex;
  align-items:center;
  gap:10px;
}

.cr-home-buttons button .cr-unread-dot{
  margin-left:auto;
  background:#e53935;
  color:#fff;
  font-size:11px;
  font-weight:900;
  border-radius:999px;
  min-width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 6px;
}

.cr-back-link{
  display:inline-block;
  margin-bottom:14px;
  font-size:13px;
  font-weight:800;
  color:#666;
  cursor:pointer;
}

.cr-type-choices{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:18px;
}

.cr-type-choice{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  border:2px solid #eee;
  border-radius:14px;
  cursor:pointer;
  font-size:14px;
  font-weight:700;
  color:#222;
}

.cr-type-choice.checked{
  border-color:#ffd900;
  background:#fffbe6;
}

.cr-type-choice input{
  width:20px !important;
  min-height:0 !important;
  height:20px;
  margin:0;
}

.cr-date-row{
  display:flex;
  gap:10px;
  margin-bottom:8px;
}

.cr-date-field{
  flex:1;
  min-width:0;
}

.cr-date-field label{
  display:block;
  font-size:12px;
  font-weight:800;
  color:#777;
  margin-bottom:4px;
}

.cr-date-field input{
  width:100% !important;
  min-height:48px !important;
  border-radius:12px !important;
  border:2px solid #ddd !important;
  background:#fff !important;
  font-size:14px;
  padding:0 12px;
  box-sizing:border-box;
  cursor:pointer;
}

.cr-error{
  color:#c62828;
  font-size:13px;
  font-weight:700;
  margin:10px 0;
  display:none;
}

.cr-error.show{ display:block; }

.cr-actions{
  margin-top:18px;
  display:flex;
  gap:10px;
}

.cr-btn{
  flex:1;
  padding:14px;
  border-radius:14px;
  border:none;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
}

.cr-btn-primary{ background:#111; color:#fff; }
.cr-btn-secondary{ background:#eee; color:#111; }

.cr-summary-box{
  background:#fafafa;
  border-radius:14px;
  padding:16px;
  font-size:14px;
  line-height:1.8;
  margin-bottom:8px;
}

.cr-summary-box b{ color:#111; }

.cr-success{
  text-align:center;
  padding:20px 6px;
}

.cr-success .cr-success-icon{
  font-size:52px;
  margin-bottom:10px;
}

.cr-success h3{
  margin:0 0 10px;
  font-size:19px;
}

.cr-success p{
  font-size:14px;
  color:#555;
  line-height:1.6;
  margin:0 0 6px;
}

/* ---------- calendar ---------- */

.cr-cal-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:100010;
  background:rgba(0,0,0,.45);
  align-items:center;
  justify-content:center;
  padding:
    calc(env(safe-area-inset-top, 0px) + 28px)
    calc(env(safe-area-inset-right, 0px) + 16px)
    calc(env(safe-area-inset-bottom, 0px) + 12px + 78px + 16px)
    calc(env(safe-area-inset-left, 0px) + 16px);
  box-sizing:border-box;
}

.cr-cal-overlay.open{ display:flex; }

.cr-cal-box{
  box-sizing:border-box;
  max-height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background:#fff;
  border-radius:20px;
  padding:16px;
  width:100%;
  max-width:340px;
  margin:0 16px;
  box-shadow:0 20px 50px rgba(0,0,0,.3);
}

.cr-cal-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.cr-cal-nav button{
  border:none;
  background:#f4f5f7;
  width:32px;
  height:32px;
  border-radius:50%;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
}

.cr-cal-nav .cr-cal-title{
  font-weight:900;
  font-size:15px;
}

.cr-cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
  text-align:center;
}

.cr-cal-grid .cr-cal-dow{
  font-size:11px;
  font-weight:800;
  color:#999;
  padding:4px 0;
}

.cr-cal-grid .cr-cal-day{
  padding:8px 0;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  color:#222;
}

.cr-cal-grid .cr-cal-day.empty{ visibility:hidden; cursor:default; }
.cr-cal-grid .cr-cal-day.disabled{ color:#ccc; cursor:not-allowed; }
.cr-cal-grid .cr-cal-day.selected{ background:#111; color:#fff; }
.cr-cal-grid .cr-cal-day:not(.disabled):not(.empty):hover{ background:#f4f5f7; }

/* ---------- requests list ---------- */

.cr-request-card{
  border:1px solid #eee;
  border-radius:14px;
  padding:14px;
  margin-bottom:10px;
}

.cr-request-card .cr-rc-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  font-weight:800;
  color:#111;
  margin-bottom:6px;
}

.cr-request-card .cr-rc-meta{
  font-size:12px;
  color:#777;
  margin-bottom:8px;
}

.cr-badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  color:#fff;
}

.cr-st-new{background:#607d8b;}
.cr-st-processing{background:#1976d2;}
.cr-st-waiting_information{background:#f9a825;}
.cr-st-answered{background:#2e7d32;}
.cr-st-completed{background:#455a64;}
.cr-st-rejected{background:#c62828;}

.cr-request-card .cr-rc-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.cr-request-card .cr-rc-actions button{
  padding:8px 14px;
  border-radius:10px;
  border:none;
  background:#111;
  color:#fff;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

/* ---------- messages ---------- */

.cr-msg{
  border-left:4px solid #ddd;
  background:#fafafa;
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:12px;
}

.cr-msg.admin{ border-color:#2e7d32; }
.cr-msg.user{ border-color:#1976d2; }

.cr-msg .cr-msg-from{
  font-size:12px;
  font-weight:900;
  color:#2e7d32;
  margin-bottom:6px;
}

.cr-msg.user .cr-msg-from{ color:#1976d2; }

.cr-msg .cr-msg-body{
  font-size:15.5px;
  line-height:1.75;
  letter-spacing:.1px;
  color:#222;
}

.cr-msg .cr-msg-body p{ margin:0 0 8px; }
.cr-msg .cr-msg-body ul, .cr-msg .cr-msg-body ol{ margin:0 0 8px; padding-left:20px; }
.cr-msg .cr-msg-body h3, .cr-msg .cr-msg-body h4{ margin:0 0 8px; }
.cr-msg .cr-msg-body a{ color:#1565c0; }

.cr-msg .cr-msg-time{
  font-size:11px;
  color:#999;
  margin-top:8px;
}

.cr-attachment{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  padding:6px 10px;
  margin:6px 6px 0 0;
  font-size:12px;
  cursor:pointer;
}

.cr-reply-box{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed #ddd;
}

.cr-reply-label{
  font-size:12px;
  font-weight:800;
  color:#a06a00;
  margin-bottom:6px;
}

.cr-reply-input{
  width:100%;
  box-sizing:border-box;
  min-height:80px;
  padding:10px;
  border-radius:8px;
  border:1px solid #ccc;
  font-size:14px;
  font-family:inherit;
  resize:vertical;
}

.cr-reply-error{
  font-size:12px;
  color:#c62828;
  font-weight:700;
  margin-top:4px;
  min-height:16px;
}

.cr-reply-btn{
  margin-top:6px;
  padding:9px 16px;
  border-radius:8px;
  border:none;
  background:#111;
  color:#fff;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
}

.cr-reply-btn:disabled{
  opacity:.6;
  cursor:default;
}

.cr-empty-note{
  text-align:center;
  color:#999;
  font-size:13px;
  padding:24px 10px;
}

.cr-loading{
  text-align:center;
  color:#999;
  font-size:13px;
  padding:20px;
}

.cr-toast{
  position:fixed;
  left:16px;
  right:16px;
  bottom:24px;
  z-index:100020;
  background:#111;
  color:#fff;
  border-left:5px solid #ffd900;
  border-radius:10px;
  padding:14px 16px;
  font-size:14px;
  font-weight:700;
  text-align:center;
  box-shadow:0 14px 35px rgba(0,0,0,.3);
}

/* ---------- inline attachment viewer (image/PDF) ----------
   Renders a fetched blob directly in-page via <img>/<iframe> — no
   window.open, no navigation, nothing a restricted TWA session could
   block. Same safe-area-aware centering as the main panel/calendar. */

#crViewerOverlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:100001;
  background:rgba(10,10,10,.9);
  align-items:center;
  justify-content:center;
  padding:
    calc(env(safe-area-inset-top, 0px) + 20px)
    calc(env(safe-area-inset-right, 0px) + 16px)
    calc(env(safe-area-inset-bottom, 0px) + 12px + 78px + 16px)
    calc(env(safe-area-inset-left, 0px) + 16px);
  box-sizing:border-box;
}

#crViewerOverlay.open{ display:flex; }

#crViewerOverlay .cr-viewer-box{
  position:relative;
  width:100%;
  height:100%;
  max-width:900px;
  display:flex;
  box-sizing:border-box;
}

#crViewerOverlay .cr-viewer-close{
  position:absolute;
  top:-8px;
  right:-8px;
  z-index:2;
  width:38px;
  height:38px;
  border-radius:50%;
  border:none;
  background:#fff;
  color:#111;
  font-size:20px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}

#crViewerOverlay .cr-viewer-loading{
  margin:auto;
  color:#fff;
  font-size:14px;
  font-weight:700;
  text-align:center;
  padding:0 20px;
}

#crViewerOverlay .cr-viewer-img{
  max-width:100%;
  max-height:100%;
  margin:auto;
  border-radius:10px;
  object-fit:contain;
  display:block;
}

#crViewerOverlay .cr-viewer-frame{
  flex:1;
  width:100%;
  border:none;
  border-radius:10px;
  background:#fff;
}