/* =============================================================
   GCEO mobile prototype — المراسلات
   Figma: PXU3nFXeDPAtvIF3iHG5VY, node 8233:30564

   Token names and values below are the Figma variables reported for
   this frame, kept under their design system names so they map 1:1
   onto stc design system tokens/dist/tokens.css.
   ============================================================= */

:root {
  /* fill */
  --fill-secondary-active:      #4f008d;
  --fill-secondary-background:  #ede6f4;
  --fill-primary-background:    #ffebef;

  /* background */
  --background-primary:   #f3f3f7;
  --background-secondary: #ffffff;
  --background-invert:    #090d0f;

  /* text */
  --text-base-primary:    #090d0f;
  --text-base-secondary:  #424b53;
  --text-base-tertiary:   #687078;
  --text-base-invert:     #ffffff;
  --text-base-secondary-invert: rgba(255, 255, 255, 0.6);
  --text-primary-active:  #ff375e;
  --text-secondary-active: #4f008d;

  /* border */
  --border-base-divider:  #dfe0e6;

  /* button */
  --button-border-default:       #dfe0e6;
  --button-text-danger-default:  #ed1239;
  --button-fill-success-default: #14b861;

  /* transparent */
  --color-white-transparent-40: rgba(255, 255, 255, 0.4);
  --color-black-transparent-10: rgba(20, 26, 30, 0.1);

  /* spacing */
  --spacing-none: 0;
  --spacing-xxs:  2px;
  --spacing-xs:   4px;
  --spacing-s:    8px;
  --spacing-m:    12px;
  --spacing-l:    16px;
  --spacing-xxl:  32px;

  /* radius */
  --radius-xs: 2px;
  --radius-s:  4px;

  /* type */
  --font-family: "STC Forward", "Segoe UI", "Noto Sans Arabic", "Geeza Pro", system-ui, sans-serif;
  --font-size-xxs: 10px;  --font-line-height-xxs: 12px;
  --font-size-xs:  12px;  --font-line-height-xs:  15px;
  --font-size-sm:  14px;  --font-line-height-sm:  17px;
  --font-size-md:  16px;  --font-line-height-md:  20px;
  --font-size-xl:  20px;  --font-line-height-xl:  24px;

  /* PDF viewer chrome — the viewer's own greys, not design system */
  --pdf-canvas: #525659;
  --pdf-chrome: #323639;
  --pdf-field:  #2c2f33;
  --pdf-rule:   #717375;

  /* frame */
  --frame-width:  440px;
  --frame-height: 956px;
  --plate-height: 224px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: var(--font-family);
  background: var(--background-primary);
  color: var(--text-base-primary);
  display: grid;
  place-items: center;
  /* app-like on touch: no rubber-band scroll past the frame, no text
     selection or long-press callout on chrome */
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* -------------------------------------------------------------
   Installed to the home screen

   The OS draws the real status bar and home indicator, so the ones
   drawn in the design would double up. They stay in the layout as
   spacers sized to the actual safe areas instead.
   ------------------------------------------------------------- */
@media (display-mode: standalone) {
  .status-bar {
    height: env(safe-area-inset-top);
    min-height: env(safe-area-inset-top);
    padding: 0;
  }
  .status-bar img { display: none; }

  .home-indicator {
    height: env(safe-area-inset-bottom);
    min-height: env(safe-area-inset-bottom);
    padding: 0;
  }
  .home-indicator span { display: none; }
}

/* -------------------------------------------------------------
   Screen frame
   Desktop shows the 440x956 artboard. On a phone it fills the
   viewport and the plate keeps its drawn height.
   ------------------------------------------------------------- */
.screen {
  position: relative;
  width: var(--frame-width);
  height: var(--frame-height);
  overflow: hidden;
  background: var(--background-primary);
  display: flex;
  flex-direction: column;
}

@media (max-width: 460px), (max-height: 980px) and (pointer: coarse) {
  body { display: block; }
  .screen { width: 100%; height: 100dvh; }
}

.screen__plate {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: var(--plate-height);
  background: var(--fill-secondary-active);
}

/* -------------------------------------------------------------
   Status bar — node 8233:30586
   ------------------------------------------------------------- */
.status-bar {
  position: relative;
  flex: none;
  height: 40px;
  padding: 0 var(--spacing-l);
  padding-top: env(safe-area-inset-top);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.status-bar__time   { width: 44px;     height: 12.576px; }
.status-bar__signal { width: 78.401px; height: 13px; }

/* -------------------------------------------------------------
   Navbar — node 8233:30574
   ------------------------------------------------------------- */
.navbar {
  position: relative;
  flex: none;
  height: 76px;
  padding: 0 var(--spacing-l);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-s);
}

.navbar__user {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  min-width: 0;
}

.navbar__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: nowrap;
}

.navbar__greeting {
  margin: 0;
  font-size: var(--font-size-xxs);
  line-height: var(--font-line-height-xxs);
  color: var(--text-primary-active);
}

.navbar__name {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--font-line-height-md);
  color: var(--text-base-invert);
}

.avatar {
  flex: none;
  width: var(--spacing-xxl);
  height: var(--spacing-xxl);
  border: 1px solid var(--border-base-divider);
  border-radius: var(--radius-xs);
  overflow: hidden;
  display: block;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 32%;   /* matches the crop set on the Figma fill */
  display: block;
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  flex: none;
}

.icon-button {
  width: var(--spacing-xxl);
  height: var(--spacing-xxl);
  padding: var(--spacing-s);
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--color-white-transparent-40);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}
.icon-button img { width: 16px; height: 16px; display: block; }

/* -------------------------------------------------------------
   Filters — node 8233:30566
   Metric V2: selected sits on the light purple fill, the rest on
   40% white over the plate.
   ------------------------------------------------------------- */
.filters {
  position: relative;
  flex: none;
  height: 40px;
  padding: 0 var(--spacing-l);
  display: flex;
  gap: var(--spacing-m);
}

.metric {
  flex: 1 0 0;
  min-width: 0;
  padding: var(--spacing-s);
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--color-white-transparent-40);
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  cursor: pointer;
}

.metric__label {
  font-size: var(--font-size-sm);
  line-height: var(--font-line-height-sm);
  color: var(--text-base-invert);
  white-space: nowrap;
}

.metric__badge {
  padding: var(--spacing-xxs) var(--spacing-xs);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-md);
  color: var(--text-base-invert);
  white-space: nowrap;
}

.metric.is-selected {
  background: var(--fill-secondary-background);
}
.metric.is-selected .metric__label { color: var(--text-base-primary); }
.metric.is-selected .metric__badge { color: var(--text-secondary-active); }

/* -------------------------------------------------------------
   Card listing — node 8233:30570

   Starts 8px below the filters (y=164). No fill of its own — the
   purple plate runs on behind it to y=224, so the first card sits
   on the purple and reads as lifted off it.
   ------------------------------------------------------------- */
.card-listing {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: var(--spacing-s);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--spacing-l);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}
.card-listing::-webkit-scrollbar { width: 0; }

/* -------------------------------------------------------------
   Correspondence Card — node 8233:30571
   ------------------------------------------------------------- */
.card {
  flex: none;
  background: var(--background-secondary);
  border-radius: var(--radius-s);
  padding: var(--spacing-l);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
  color: inherit;
  text-decoration: none;
}
.card:active { background: var(--background-primary); }

.card__block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-s);
}

.card__status {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
}
.card__flag { width: 16px; height: 16px; display: block; }

.card__date {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-xs);
  color: var(--text-base-tertiary);
  white-space: nowrap;
}

.card__title {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--font-line-height-xl);
  color: var(--text-base-primary);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__source {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 0;
}
.card__source img { width: 16px; height: 16px; flex: none; display: block; }

.card__source-label,
.card__source-name {
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card__source-label { color: var(--text-base-tertiary); flex: none; }
.card__source-name  { color: var(--text-base-secondary); }

.card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-s);
}

.card__types,
.card__counts {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* -------------------------------------------------------------
   Badge — one component, three fills
   ------------------------------------------------------------- */
.badge {
  height: 24px;
  padding: var(--spacing-xxs) var(--spacing-s);
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-md);
  white-space: nowrap;
}
.badge img { width: 16px; height: 16px; flex: none; display: block; }

.badge--status { background: var(--fill-secondary-background); color: var(--text-secondary-active); }
.badge--type   { background: var(--fill-primary-background);   color: var(--text-primary-active); }
.badge--count  { background: var(--background-primary);        color: var(--text-base-tertiary); }

/* latin numerals keep their own order inside RTL text */
.num { direction: ltr; unicode-bidi: isolate; }

/* -------------------------------------------------------------
   Home indicator — node 8233:30584
   ------------------------------------------------------------- */
.home-indicator {
  flex: none;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
}
.home-indicator {
  justify-content: center;
  align-items: flex-end;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.home-indicator span {
  width: 134px;
  height: 5px;
  border-radius: 100px;
  background: var(--background-invert);
}

/* =============================================================
   Screen: تفاصيل المراسلة — node 8233:30598
   ============================================================= */

.screen--details {
  background: var(--background-secondary);
}

/* -------------------------------------------------------------
   Header — node 8233:33742
   Purple block carrying the status bar, the tool row, the title,
   the source line and the tag row. 196px tall as drawn.
   ------------------------------------------------------------- */
.details-header {
  position: relative;
  flex: none;
  background: var(--fill-secondary-active);
  padding-bottom: var(--spacing-s);
  display: flex;
  flex-direction: column;
}

.details-header__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* RTL: aligns to the right edge */
  gap: var(--spacing-m);
  padding: var(--spacing-s) var(--spacing-l);
}

.details-header__bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.details-header__tools {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
}

.details-header__divider {
  width: 1px;
  height: 16px;
  background: var(--color-white-transparent-40);
  flex: none;
}

/* counter bubble on the attachment and comment buttons */
.icon-button--counted { position: relative; overflow: visible; }

.counter {
  position: absolute;
  top: 2px;
  right: 2px;               /* pinned top-right in both directions, as drawn */
  width: 14px;
  height: 14px;
  border-radius: 100px;
  background: #e9eaeb;
  color: #181d27;
  font-size: 7.78px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
}
.counter--coral {
  background: #ff385e;
  color: var(--text-base-invert);
}

.details-header__title {
  width: 100%;
  margin: 0;
  font-size: var(--font-size-xl);
  line-height: var(--font-line-height-xl);
  font-weight: 400;
  color: var(--text-base-invert);
  text-align: right;
}

.details-header__source {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 0;
}
.details-header__source img { width: 16px; height: 16px; flex: none; display: block; }

.details-header__source-label,
.details-header__source-name {
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.details-header__source-label { color: var(--text-base-secondary-invert); flex: none; }
.details-header__source-name  { color: var(--text-base-invert); }

.details-header__meta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-s);
}

.details-header__tags {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
}
.details-header__flag { width: 16px; height: 16px; display: block; flex: none; }

.details-header__date {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-xs);
  color: var(--text-base-secondary-invert);
  white-space: nowrap;
}

/* -------------------------------------------------------------
   PDF Reader — node 8233:30601
   Viewer chrome, not app UI: its greys are the viewer's own and
   are deliberately outside the design system palette.
   ------------------------------------------------------------- */
/* 631px at the drawn 440x956. On a shorter phone it gives height back
   rather than pushing the action bar off the screen. */
.pdf-reader {
  position: relative;
  flex: 1 1 631px;
  min-height: 0;
  margin: var(--spacing-l) var(--spacing-l) var(--spacing-m);
  border-radius: var(--radius-s);
  background: var(--pdf-canvas);
  overflow: hidden;
}

.pdf-toolbar {
  position: absolute;
  inset-inline: 0;
  top: 0;
  background: var(--pdf-chrome);
  padding: 16.239px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4.06px 2.03px rgba(0, 0, 0, 0.25));
  z-index: 1;
  /* the full control set needs 371px; narrower than that it scrolls
     rather than losing the outer controls */
  overflow-x: auto;
  scrollbar-width: none;
}
.pdf-toolbar::-webkit-scrollbar { display: none; }

.pdf-toolbar__scope {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  margin: auto;
}

.pdf-pagination {
  display: flex;
  align-items: center;
  gap: 2.871px;
}

.pdf-zoom {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
}

.pdf-field,
.pdf-toolbar__text {
  font-family: "Open Sans", var(--font-family);
  font-weight: 600;
  font-size: 10.048px;
  line-height: normal;
  color: var(--text-base-invert);
  white-space: nowrap;
}
.pdf-field {
  background: var(--pdf-field);
  border-radius: 0.718px;
  padding: 0 5.024px;
}

.pdf-toolbar__rule {
  width: 0.718px;
  height: 11.483px;
  background: var(--pdf-rule);
  flex: none;
}

.pdf-toolbar__icon {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  display: flex;
  flex: none;
}
.pdf-toolbar__icon img { width: 16px; height: 16px; display: block; }
.pdf-toolbar__icon--lg img { width: 17.224px; height: 17.224px; }

/* Scrolls under the toolbar. At 440 the page lands at its drawn
   top of 73.07px within the reader; below that it scales to fit. */
.pdf-pages {
  position: absolute;
  inset-inline: 0;
  top: 49.7px;
  bottom: 0;
  overflow: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-s);
  padding: 23.37px 16.045px;
}
.pdf-pages::-webkit-scrollbar { width: 0; }

.pdf-page {
  width: 375.911px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 375.911 / 541.41;
  object-fit: cover;
  flex: none;
  display: block;
}

/* -------------------------------------------------------------
   Actions — node 8233:30624
   ------------------------------------------------------------- */
.actions-bar {
  flex: none;
  height: 80px;
  background: var(--background-secondary);
  border-top: 1px solid var(--border-base-divider);
  padding: var(--spacing-l) var(--spacing-m);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.actions-bar__group {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
}

.btn {
  height: 48px;
  padding: var(--spacing-m) var(--spacing-l);
  border: 0;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-s);
  font-family: inherit;
  font-size: var(--font-size-md);
  line-height: var(--font-line-height-md);
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
}
.btn img { width: 24px; height: 24px; flex: none; display: block; }

.btn--outline {
  background: var(--background-secondary);
  border: 1px solid var(--button-border-default);
  color: var(--text-base-primary);
}
.btn--danger  { color: var(--button-text-danger-default); }
.btn--success {
  background: var(--button-fill-success-default);
  color: var(--text-base-invert);
}