/* الإعدادات (sheikh/settings.js), in the navy design: the parts listed on the start side in their groups (an icon square,
   the name and a short line), the open part beside them under a navy icon; white cards on a soft shadow, a rule per row
   with its number on the end side, navy pills. Fields use .field from sheikh.css; errors .err from interview.css. The
   content parts (content.css) take their buttons, fields and chips from here. أسانيدي's styles are at the end. */
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); }   /* every sheikh page */
.st-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: start; }

/* the list of parts */
.st-nav { position: sticky; top: 16px; display: flex; flex-direction: column; padding: 10px 10px 12px; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); }
.st-group { margin: 0; padding: 14px 12px 6px; font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--ink-3); }
.st-group:first-child { padding-top: 6px; }
.st-nav a { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 10px; border-radius: 14px; color: var(--ink); text-decoration: none; transition: background-color 150ms ease-out; }
.st-nav a + a { margin-top: 2px; }
.st-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--fill); color: var(--ink-2); }
.st-lt { min-width: 0; display: flex; flex-direction: column; }
.st-lt b { font-size: var(--text-base); font-weight: 700; line-height: 1.35; }
.st-lt small { font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--ink-3); }
.st-nav a[aria-current="page"] { background: var(--navy-wash); box-shadow: inset 0 0 0 1px #DCE3F3; }
.st-nav a[aria-current="page"] .st-ic { background: var(--grad); color: var(--on-accent); box-shadow: 0 8px 16px -10px rgba(22, 41, 92, .7); }
.st-nav a[aria-current="page"] b { color: var(--brand); }
@media (hover: hover) and (pointer: fine) { .st-nav a:not([aria-current="page"]):hover { background: var(--fill); } }

/* the open part */
.st-panel { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.st-panel-head { display: flex; align-items: center; gap: 14px; }
.st-head-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--on-accent); box-shadow: var(--shadow-navy); }
.st-panel-head h2 { margin: 0; font-size: var(--text-2xl); font-weight: 800; line-height: 1.3; }
.st-panel-head p { margin: 2px 0 0; font-size: 14.5px; }
.st-grid { align-items: start; gap: 20px; }
.st-wide { grid-column: 1 / -1; }
.st-panel .i-card { gap: 14px; padding: 20px 22px 22px; }
.st-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.st-card-head h3, .st-panel .i-card > h3, .st-panel .sec-head h3 { margin: 0; font-size: var(--text-lg); font-weight: 700; line-height: 1.35; }
.st-card-head p { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--ink-3); }

/* fields (here and in أسانيدي's form): the label bold over a soft field that turns white with a navy ring on focus */
:is(.st-panel, .lb-add) .field { gap: 7px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
:is(.st-panel, .lb-add) .field label { font-size: 14.5px; color: var(--ink); }
:is(.st-panel, .lb-add) .field small { font-size: var(--text-sm); font-weight: 500; color: var(--ink-3); }
:is(.st-panel, .lb-add) .field :is(input, select, textarea) { height: 46px; padding: 0 14px; border-radius: var(--radius-md); background: var(--fill); font-weight: 400; transition: border-color 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out; }
:is(.st-panel, .lb-add) .field textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.7; }
:is(.st-panel, .lb-add) .field :is(input, select, textarea):focus { background: var(--surface); }
:is(.st-panel, .lb-add) .err { font-weight: 500; }

/* buttons: pills; a plain one soft navy, the main one the navy gradient */
.st-panel .btn { height: 44px; padding: 0 18px; font-size: 14.5px; font-weight: 700; }
.st-panel .btn:not(.primary) { border-color: transparent; background: var(--brand-soft); color: var(--brand); }
.st-panel .btn:not(.primary):hover { background: #DDE3F4; }
.st-panel .btn[disabled] { background: var(--fill-2); color: #8E96AE; box-shadow: none; opacity: 1; cursor: not-allowed; }
.st-panel .icon-btn { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); }
.st-panel .icon-btn:hover { background: var(--navy-wash); color: var(--brand); }
.st-panel .icon-btn[aria-label^="احذف"]:hover { background: var(--danger-bg); color: var(--danger); }
/* chips */
.st-panel .tag { height: 24px; padding: 0 10px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.st-panel .tag svg { width: 13px; height: 13px; }

/* الحساب */
.st-pw-open { align-self: flex-start; }
.st-pw { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: var(--fill); }
.st-pw .field :is(input) { background: var(--surface); }
.st-panel .btn.st-out { align-self: flex-start; background: var(--danger-bg); color: var(--danger); }
.st-panel .btn.st-out:hover { background: #F7DCDC; }

/* التذكيرات: an on/off switch (a button with aria-pressed), and the room's fixed time */
.st-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 64px; padding: 12px 0; border: 0; background: none; text-align: start; color: var(--ink); }
.st-switch + .st-switch { border-top: 1px solid var(--line); }
.st-switch span { display: flex; flex-direction: column; line-height: 1.5; }
.st-switch b { font-size: 15.5px; font-weight: 700; }
.st-switch small { font-size: 13.5px; color: var(--ink-3); }
.st-switch i { position: relative; flex: none; width: 46px; height: 28px; border-radius: var(--radius-pill); background: var(--fill-2); transition: background-color 200ms ease; }
.st-switch i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(16, 27, 58, .25); transition: transform 200ms cubic-bezier(.23, 1, .32, 1); }
.st-switch[aria-pressed="true"] i { background: var(--navy-2); }
.st-switch[aria-pressed="true"] i::after { transform: translateX(-18px); }   /* to the end side (the page is right to left) */
.st-fixed { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--fill); font-size: var(--text-md); line-height: 1.5; color: var(--ink-2); }
.st-fixed svg { flex: none; color: var(--ink-3); }
.st-chip { margin-inline-start: auto; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }

/* ملاحظات الجلسة: the two styles as choice cards */
.st-radios { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.st-radios legend { padding: 0; margin-bottom: 8px; font-size: var(--text-md); color: var(--ink-2); }
.st-radio { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--fill); cursor: pointer; transition: background-color 150ms ease-out, box-shadow 150ms ease-out; }
.st-radio:has(input:checked) { background: var(--navy-wash); box-shadow: inset 0 0 0 1.5px var(--navy-2); }
.st-radio input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--navy-2); }
.st-radio span { display: flex; flex-direction: column; line-height: 1.5; }
.st-radio b { font-size: var(--text-base); font-weight: 700; }
.st-radio small { font-size: 13.5px; color: var(--ink-3); }
.st-reset { align-self: flex-start; }

/* a number rule: its name and meaning on the start side, the number, its unit and range on the end; rows edge to edge */
.st-rules { display: flex; flex-direction: column; margin-inline: -22px; }
.st-rule { display: grid; grid-template-columns: minmax(0, 1fr) 210px; align-items: center; gap: 6px 28px; padding: 16px 22px; }
.st-rule + .st-rule { border-top: 1px solid var(--line); }
.st-rule-t label { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.st-help { margin: 3px 0 0; font-size: var(--text-md); font-weight: 400; line-height: 1.55; color: var(--ink-2); }
.st-rule .err { grid-column: 1 / -1; }
.st-num { display: grid; grid-template-columns: 88px auto; justify-content: start; align-items: center; gap: 4px 10px; }
.st-panel .st-num input { width: 88px; height: 48px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--fill); text-align: center; font-size: 19px; font-weight: 800; color: var(--ink); transition: border-color 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out; }
.st-panel .st-num input:focus { outline: none; border-color: var(--navy-2); background: var(--surface); box-shadow: 0 0 0 4px var(--brand-soft); }
.st-num > span { font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.st-num > small { grid-column: 1 / -1; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
/* the four rules worked through on one session */
.st-example { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--navy-wash); box-shadow: inset 0 0 0 1px #E1E7F5; font-size: 14.5px; line-height: 1.7; color: var(--ink); }
.st-example svg { flex: none; margin-top: 4px; color: var(--brand); }
.st-example b { font-weight: 800; color: var(--brand); }

/* طاقتك: the two numbers side by side, sessions a week per section as soft pills, and the full/open line */
.st-cap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-cap-grid .st-rule { grid-template-columns: minmax(0, 1fr) auto; }
.st-cap-grid .st-rule + .st-rule { border-top: 0; box-shadow: inset -1px 0 0 var(--line); }
.st-week { min-width: 0; margin: 0 -22px; padding: 0 22px; border: 0; border-top: 1px solid var(--line); }
.st-week legend { float: right; width: 100%; padding: 16px 0 2px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.st-week > .st-help { clear: both; margin: 0; }
.st-week-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; margin-top: 12px; }
.st-sec { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; min-height: 56px; padding: 6px; padding-inline-start: 14px; border-radius: 14px; background: var(--fill); }
.st-sec label { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.st-sec b { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.st-sec small { font-size: var(--text-xs); color: var(--ink-3); }
.st-sec .st-num { display: block; }
.st-panel .st-sec .st-num input { width: 52px; height: 42px; padding: 0; font-size: var(--text-input); background: var(--surface); }
.st-sec .err { flex-basis: 100%; padding-bottom: 4px; }
.st-sec input[aria-invalid="true"] { border-color: var(--danger); }
.st-state { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--live-soft); color: var(--live); font-size: 14.5px; line-height: 1.6; }
.st-state svg { flex: none; margin-top: 3px; }
.st-state b { font-weight: 800; }
.st-state.full { background: var(--amber-bg); color: var(--amber); }

/* the save bar: a white pill under the part, held in view while the part scrolls */
.st-actions { position: sticky; bottom: 16px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px; padding-inline-start: 22px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: 0 0 0 1px rgba(16, 27, 58, .07), 0 2px 4px rgba(16, 27, 58, .04), 0 14px 30px -14px rgba(16, 27, 58, .22); }
.st-actions p { display: flex; align-items: center; gap: 8px; margin: 0; }
.st-actions p svg { flex: none; color: var(--brand); }
.st-panel .st-actions .btn { height: 52px; padding: 0 22px; font-size: var(--text-input); }

@media (prefers-reduced-motion: reduce) { .st-switch i, .st-switch i::after { transition: none; } }
@media (max-width: 1100px) {
  .st-layout { grid-template-columns: minmax(0, 1fr); }
  .st-nav { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
  .st-group { grid-column: 1 / -1; }
  .st-nav a + a { margin-top: 0; }
  .st-week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* settings.js listOnly: the parts as an iOS list on #/settings, a part alone on #/settings/part (its name on the top bar) */
  .st-layout.list-only .st-panel, .st-layout:not(.list-only) .st-nav, .st-panel-head h2 { display: none; }
  .st-nav { grid-template-columns: minmax(0, 1fr); padding: 6px; }
  .st-nav a { min-height: 56px; }
  .st-panel .i-card { padding: 18px 16px; }
  .st-rules { margin-inline: -16px; }
  .st-rule { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .st-cap-grid { grid-template-columns: minmax(0, 1fr); }
  .st-cap-grid .st-rule + .st-rule { box-shadow: inset 0 1px 0 var(--line); }
  .st-week { margin-inline: -16px; padding-inline: 16px; }
  .st-week-grid { grid-template-columns: minmax(0, 1fr); }   /* a section's name stays on one or two lines */
  .st-actions { gap: 8px; border-radius: 20px; padding: 10px 12px; }
  .st-actions p { font-size: var(--text-sm); }
  .st-actions .btn { width: 100%; }
}

/* ---------- أسانيدي (sheikh/library.js draws the trial's, sheikh/asaneed.js the real side's; library.css has their
   first styles). Each file a card with its page drawn on a soft band (until the file itself opens), the kind as a chip,
   «عرض» a soft navy pill; the trial's «أضف» a dashed tile, the real side's a form beside the files. ---------- */
.lb-split { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.lb-grid { gap: 16px; }
.lb-split .lb-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.lb-grid .lb-doc { position: relative; overflow: hidden; gap: 10px; padding: 172px 18px 18px; border-radius: 20px; transition: box-shadow 200ms ease; }
.lb-grid .lb-doc::before { content: ""; position: absolute; inset: 0 0 auto; height: 156px; background: var(--fill); border-bottom: 1px solid var(--line); }
/* the page: cream paper in a double gold frame, a navy mark and a title line, lines of text, a seal */
.lb-grid .lb-doc::after {
  content: ""; position: absolute; top: 18px; left: calc(50% - 43px); width: 86px; height: 120px; border-radius: 5px; transform: rotate(-2deg);
  background:
    radial-gradient(circle, var(--brand-hover) 0 3.5px, #F2E4B4 4px 6px, transparent 6.5px) center 12px / 14px 14px no-repeat,
    linear-gradient(var(--brand-hover), var(--brand-hover)) center 31px / 34px 4px no-repeat,
    linear-gradient(#E5DCC2, #E5DCC2) center 45px / 50px 2.5px no-repeat,
    linear-gradient(#E5DCC2, #E5DCC2) center 54px / 56px 2.5px no-repeat,
    linear-gradient(#E5DCC2, #E5DCC2) center 63px / 42px 2.5px no-repeat,
    linear-gradient(#E5DCC2, #E5DCC2) center 72px / 30px 2.5px no-repeat,
    radial-gradient(circle, #F2E4B4 0 6.5px, #C9A95A 7px 8px, transparent 8.5px) right 12px bottom 12px / 18px 18px no-repeat,
    #FBF8EE;
  box-shadow: inset 0 0 0 5px #FBF8EE, inset 0 0 0 6.8px #C9A95A, inset 0 0 0 9px #FBF8EE, inset 0 0 0 9.8px #D8C27A,
    0 0 0 1px rgba(16, 27, 58, .07), 0 10px 20px -12px rgba(16, 27, 58, .5);
}
.lb-grid .lb-doc:nth-child(even)::after { transform: rotate(2deg); }
@media (hover: hover) and (pointer: fine) { .lb-grid .lb-doc:hover { box-shadow: 0 0 0 1px rgba(16, 27, 58, .07), 0 2px 4px rgba(16, 27, 58, .04), 0 14px 30px -14px rgba(16, 27, 58, .22); } }
.lb-grid .lb-doc-top { flex-wrap: wrap; }
.lb-grid .lb-doc-top small { font-size: 13.5px; font-weight: 500; color: var(--ink-3); }
.lb-grid .lb-doc .tag { height: 24px; padding: 0 10px; font-size: 12.5px; font-weight: 700; background: #E3F0FA; color: #1F6AA5; }   /* سند */
.lb-grid .lb-doc .tag.ok { background: var(--brand-soft); color: var(--brand); }                                                    /* إجازة */
.lb-grid .lb-doc-top > .tag + .tag { background: var(--fill-2); color: var(--ink-2); }                                                     /* «أضفته الحين» */
.lb-grid .lb-doc h3 { font-size: 16.5px; font-weight: 700; line-height: 1.5; }
.lb-grid .lb-doc .muted-p { line-height: 1.6; }
.lb-grid .lb-file { font-size: var(--text-md); }
.lb-grid .lb-file svg { color: var(--ink-3); }
.lb-grid .lb-doc .i-row { margin-top: auto; padding-top: 4px; }
.lb-grid .lb-doc .btn { height: 36px; padding: 0 16px; border: 0; font-size: 14.5px; font-weight: 700; }
.lb-grid .lb-doc .btn.primary { flex: 1; background: var(--brand-soft); color: var(--brand); box-shadow: none; }
.lb-grid .lb-doc .btn.primary:hover { background: #DDE3F4; filter: none; }
.lb-grid .lb-doc .btn[disabled] { background: var(--fill-2); color: #8E96AE; opacity: 1; }
.lb-grid .lb-dl { font-size: 12.5px; color: var(--ink-3); }
.lb-grid .btn.lb-remove { flex: none; width: 40px; padding: 0; background: transparent; color: var(--ink-3); }
.lb-grid .btn.lb-remove:hover { background: var(--danger-bg); color: var(--danger); }
/* the trial's «أضف إجازة أو سند»: a dashed tile */
.lb-grid .lb-upload { gap: 8px; border: 1.5px dashed #BFC8DC; border-radius: 20px; background: var(--fill); box-shadow: none; transition: border-color 150ms ease-out, background-color 150ms ease-out; }
.lb-grid .lb-upload:hover, .lb-grid .lb-upload:focus-within { border-color: var(--navy-2); background: var(--navy-wash); }
.lb-grid .lb-up-icon { width: 52px; height: 52px; border: 0; background: var(--surface); box-shadow: var(--shadow); }
.lb-grid .lb-upload b { font-size: var(--text-base); font-weight: 700; color: var(--brand); }
.lb-grid .lb-upload small { font-size: 13.5px; font-weight: 500; color: var(--ink-3); }
.lb-note { margin: 0; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); font-size: 14.5px; line-height: 1.6; }
.lb-note svg { flex: none; margin-top: 3px; }
/* the real side: the form beside the files */
.lb-side { display: flex; flex-direction: column; gap: 14px; }
.lb-add { gap: 16px; padding: 20px 22px 22px; }
.lb-add h2 { margin: 0; font-size: var(--text-lg); font-weight: 700; }
.lb-add .field textarea { min-height: 76px; }
.lb-add .err { margin: 0; }
.lb-drop { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1.5px dashed #BFC8DC; border-radius: 14px; background: var(--fill); color: var(--brand); cursor: pointer; transition: border-color 150ms ease-out, background-color 150ms ease-out; }
.lb-drop:hover, .lb-drop:focus-within { border-color: var(--navy-2); background: var(--navy-wash); }
.lb-drop:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.lb-drop-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow); }
.lb-drop b { display: block; font-size: var(--text-base); overflow-wrap: anywhere; }
.lb-drop small { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink-3); }
.lb-add .btn.primary { height: 52px; font-size: var(--text-input); font-weight: 700; }
.lb-add .btn.primary[disabled] { opacity: .6; cursor: progress; }
.lb-empty { align-items: center; gap: 8px; padding: 36px 20px; text-align: center; }
.lb-empty b { font-size: var(--text-base); }
.lb-empty-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
@media (max-width: 1100px) { .lb-split { grid-template-columns: minmax(0, 1fr); } }

/* «صفحتك عند الطلاب» (settings.js profileCard): his photo beside its button, his CV in a tall field */
.st-prof { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.st-profile textarea { min-height: 260px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); font-size: var(--text-input); line-height: 1.8; resize: vertical; }