/* ===== بوابة الموظف ===== */
.portal { min-height: 100vh; display: flex; flex-direction: column;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(18, 56, 69, .10), transparent 60%),
    var(--mineral);
}
.p-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 14px clamp(16px, 4vw, 40px); padding-top: max(14px, env(safe-area-inset-top));
}
.brand { display: flex; align-items: center; gap: .75rem; }
.brand img { width: 44px; height: 44px; object-fit: contain; }
.brand strong { display: block; font-family: var(--display); font-size: 1.05rem; color: var(--petrol); }
.brand small { display: block; color: var(--muted); font-size: .82rem; }
.p-head-end { display: flex; align-items: center; gap: .6rem; }
.timer { font-size: .8rem; color: var(--muted); }
main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 8px clamp(14px, 4vw, 40px) 40px; }
.p-foot { text-align: center; padding: 14px; font-size: .8rem; color: var(--muted); padding-bottom: max(14px, env(safe-area-inset-bottom)); }

/* ---------- البوابة ---------- */
.gate { display: grid; justify-items: center; gap: 22px; padding-top: clamp(8px, 4vh, 40px); }
.gate-intro { text-align: center; max-width: 34rem; }
.gate-intro h1 { font-size: clamp(1.7rem, 4.6vw, 2.5rem); font-weight: 700; color: var(--petrol); letter-spacing: -.01em; }
.gate-intro p { color: var(--muted); margin-top: .5rem; }
.gate-help { max-width: 30rem; text-align: center; font-size: .88rem; color: var(--muted); }

/* الظرف */
.envelope {
  --flap: 132px;
  position: relative; width: min(470px, 100%);
  perspective: 1100px; margin-top: 10px;
}
.env-front {
  position: relative; z-index: 2;
  background: var(--paper); border: 1px solid #cfd8d5; border-radius: var(--r-md);
  padding: calc(var(--flap) + 34px) clamp(20px, 6vw, 40px) 28px;
  box-shadow: var(--shadow), 0 30px 60px -40px rgba(18, 56, 69, .6);
  overflow: hidden;
}
/* خطوط طيّ الظرف السفلية */
.env-front::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 62%; pointer-events: none;
  background:
    linear-gradient(to top right, transparent calc(50% - .6px), rgba(18, 56, 69, .09) 50%, transparent calc(50% + .6px)) left / 50% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - .6px), rgba(18, 56, 69, .09) 50%, transparent calc(50% + .6px)) right / 50% 100% no-repeat;
}
.env-form { position: relative; }
.env-flap {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: var(--flap);
  background: linear-gradient(180deg, var(--petrol-2), var(--petrol));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: var(--r-md) var(--r-md) 0 0;
  transform-origin: top center; transition: transform .75s cubic-bezier(.6, .05, .3, 1), z-index 0s .38s;
}
.env-seal {
  position: absolute; z-index: 4; top: calc(var(--flap) - 40px); left: 50%; width: 80px; height: 80px;
  transform: translateX(-50%); transition: transform .45s ease-in, opacity .45s;
  filter: drop-shadow(0 6px 8px rgba(94, 24, 18, .35));
}
.env-seal img { width: 100%; height: 100%; }
.env-letter {
  position: absolute; z-index: 1; left: 7%; right: 7%; top: 18px; height: 70%;
  background: #fff; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.12);
  padding: 22px 20px; display: grid; gap: 10px; align-content: start;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1) .45s;
}
.env-letter i { display: block; height: 7px; border-radius: 4px; background: #e4ebe8; }
.env-letter i:nth-child(1) { width: 55%; background: var(--petrol); opacity: .7; }
.env-letter i:nth-child(3) { width: 80%; } .env-letter i:nth-child(5) { width: 65%; }
.envelope.is-open .env-seal { transform: translateX(-50%) scale(.2) rotate(-40deg); opacity: 0; }
.envelope.is-open .env-flap { transform: rotateX(180deg); z-index: 0; }
.envelope.is-open .env-letter { transform: translateY(-62%); z-index: 1; }
.envelope.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

.btn-block { width: 100%; padding: .75em 1em; font-size: 1rem; }
#empNo, #code { font-size: 1.25rem; text-align: center; letter-spacing: .08em; padding: .6em; font-family: var(--display); }
#code { letter-spacing: .25em; }
.greet { text-align: center; margin-bottom: .8rem; font-size: 1.05rem; }
.greet b { font-family: var(--display); color: var(--petrol); }
.small { font-size: .85rem; color: var(--muted); margin: -.3rem 0 .9rem; }
.linkish { display: block; margin: .8rem auto 0; background: none; border: 0; color: var(--petrol); font: inherit; font-size: .88rem; text-decoration: underline; cursor: pointer; }
.gate-msg { min-height: 1.4em; margin: .8rem 0 0; text-align: center; font-size: .9rem; color: var(--bad); font-weight: 500; }

/* ---------- المكتب ---------- */
.desk { display: grid; grid-template-columns: 300px 1fr; grid-template-areas: "profile viewer" "drawer viewer"; gap: 22px; align-items: start; }
.desk.enter { animation: deskIn .5s ease-out; }
@keyframes deskIn { from { opacity: 0; transform: translateY(14px); } }
.profile { grid-area: profile; background: var(--petrol); color: #fff; border-radius: var(--r-md); padding: 22px; position: relative; overflow: hidden; }
.profile::after { content: ""; position: absolute; width: 180px; height: 180px; left: -60px; bottom: -80px; border-radius: 50%; border: 22px solid rgba(227, 167, 47, .14); }
.profile h2 { font-size: 1.35rem; font-weight: 700; }
.profile .muted { color: #b8cdd3; margin: .25rem 0 0; }
.facts { margin: 18px 0 0; display: grid; gap: 10px; position: relative; z-index: 1; }
.facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .5rem; border-top: 1px solid rgba(255,255,255,.12); padding-top: 8px; }
.facts dt { color: #9fb9c0; font-size: .82rem; }
.facts dd { margin: 0; font-weight: 500; }
.facts dd.num { font-family: var(--display); color: var(--flare); font-size: 1.05rem; text-align: right; }

.drawer { grid-area: drawer; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; }
.drawer h3 { font-size: .95rem; color: var(--muted); font-weight: 500; margin-bottom: 10px; }
.months { display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.month {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  font: inherit; text-align: start; padding: .6em .8em; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--ink);
}
.month:hover { background: var(--mineral); }
.month[aria-selected=true] { background: #fff; border-color: var(--petrol); box-shadow: inset -4px 0 0 var(--flare); }
.month b { font-family: var(--display); font-weight: 600; }
.month small { color: var(--muted); font-size: .78rem; }
.month .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--flare); }
.empty { color: var(--muted); font-size: .9rem; padding: .5rem; }

.viewer { grid-area: viewer; min-width: 0; }
.v-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.v-bar h3 { font-size: 1.25rem; color: var(--petrol); }
.v-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet-wrap { background: #cfd8d5; border-radius: var(--r-md); padding: clamp(8px, 2vw, 18px); overflow: auto; max-height: calc(100vh - 170px); min-height: 320px; }
.sheet { display: grid; gap: 14px; justify-items: center; }
.sheet canvas { background: #fff; box-shadow: 0 6px 22px -10px rgba(0, 0, 0, .45); max-width: none; }
.sheet .pdf-frame { width: 100%; height: calc(100vh - 210px); min-height: 520px; border: 0; background: #fff; border-radius: 4px; }
.sheet .state { padding: 60px 10px; text-align: center; color: var(--muted); }

@media (max-width: 860px) {
  .desk { grid-template-columns: 1fr; grid-template-areas: "profile" "drawer" "viewer"; }
  .months { display: flex; overflow-x: auto; max-height: none; padding-bottom: 4px; }
  .month { flex: none; width: auto; gap: .8rem; }
  .sheet-wrap { max-height: none; }
}
@media (max-width: 420px) {
  .envelope { --flap: 104px; }
  .env-seal { width: 66px; height: 66px; top: calc(var(--flap) - 33px); }
  .facts div { grid-template-columns: 6.5rem 1fr; }
}
@media print {
  .p-head, .p-foot, .profile, .drawer, .v-bar { display: none !important; }
  .desk { display: block; } .sheet-wrap { background: none; padding: 0; max-height: none; overflow: visible; }
}