@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

/*
  هوية توثيق المطور لسجل الطالب الذكي.
  هذا الملف خاص بعرض الشاشة فقط حتى تبقى قواعد طباعة السجل الأصلية كما هي حرفيًا.
*/
@media screen {
  html,body{font-family:"IBM Plex Sans Arabic","Cairo",Tahoma,Arial,sans-serif}

  :root {
    --primary:#235cbd;
    --primary-2:#3739b9;
    --primary-soft:#eef1fa;
    --purple:#7243db;
    --purple-soft:#f3effd;
    --gold:#b87508;
    --danger:#cf4056;
    --ink:#181b31;
    --muted:#6f7487;
    --line:#e1e5ef;
    --bg:#f4f6fb;
    --card:#fff;
    --shadow:0 20px 60px rgba(19,24,67,.11);
  }

  .cloud-sync-status{
    min-height:42px;display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--line);
    border-radius:12px;background:#fff;color:var(--muted);font-size:10px;font-weight:800;white-space:nowrap
  }
  .cloud-sync-status i{width:8px;height:8px;border-radius:50%;background:#b87508;box-shadow:0 0 0 3px rgba(184,117,8,.10)}
  .cloud-sync-status.is-cloud i{background:#148862;box-shadow:0 0 0 3px rgba(20,136,98,.11)}
  .cloud-sync-status.is-saving i{background:#235cbd;box-shadow:0 0 0 3px rgba(35,92,189,.11)}
  .cloud-sync-status.is-local i{background:#b87508}

  .welcome-strip{background:radial-gradient(circle at 10% 10%,rgba(226,88,170,.25),transparent 34%),linear-gradient(135deg,#10163c 0%,#235cbd 53%,#7243db 100%)}
  .btn.primary{background:linear-gradient(135deg,#235cbd,#3739b9 52%,#7243db);box-shadow:0 10px 24px rgba(55,57,185,.20)}
  .side-box{background:linear-gradient(145deg,#10163c,#3739b9 64%,#7243db)}
  .flow-step-btn.active{border-color:#c8cff1;box-shadow:0 11px 28px rgba(55,57,185,.10)}


  .record-tools-access{margin:12px 0 18px;display:flex;justify-content:flex-start}
  .record-tool-access-btn{
    width:min(520px,100%);display:grid!important;grid-template-columns:46px minmax(0,1fr) 30px!important;
    align-items:center!important;gap:11px!important;padding:12px 14px!important;border:1px solid #dddff0!important;
    border-radius:17px!important;background:linear-gradient(135deg,#fff,#f7f5fe)!important;text-align:right!important;
    color:var(--ink)!important;box-shadow:0 8px 24px rgba(19,24,67,.045);
  }
  .record-tool-access-btn:hover{border-color:#c9cbea!important;background:linear-gradient(135deg,#f9faff,#f3effd)!important}
  .record-tool-access-btn.active{border-color:#bfc6ed!important;background:linear-gradient(135deg,#eef1fa,#f3effd)!important;box-shadow:0 10px 26px rgba(55,57,185,.10)}
  .record-tool-access-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#eef1fa,#f1eafd);color:#7243db;font-size:21px;font-weight:900}
  .record-tool-access-copy{display:grid;gap:2px;min-width:0}
  .record-tool-access-copy small{font-size:10px;color:#7243db;font-weight:800}
  .record-tool-access-copy b{font-size:13px;color:var(--ink)}
  .record-tool-access-copy em{font-size:10px;color:var(--muted);font-style:normal;white-space:normal}
  .record-tool-access-arrow{font-size:19px;color:#7243db;font-weight:900}

  body.tawtheq-embedded{background:var(--bg);min-height:0}
  body.tawtheq-embedded .app-shell{display:block;min-height:0}
  body.tawtheq-embedded .sidebar{display:none!important}
  body.tawtheq-embedded .main{padding:18px 18px 26px;max-width:none;width:100%}
  body.tawtheq-embedded .topbar{position:static;margin:0 0 15px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 10px 34px rgba(21,28,76,.045)}
  body.tawtheq-embedded .topbar .eyebrow{color:var(--purple)}
  body.tawtheq-embedded .workflow-progress{margin-top:0}
  body.tawtheq-embedded .record-sheet{box-shadow:0 10px 34px rgba(21,28,76,.045)}

  @media(max-width:900px){
    body.tawtheq-embedded .main{padding:12px}
    body.tawtheq-embedded .topbar{padding:15px;align-items:stretch}
    body.tawtheq-embedded .top-selectors{width:100%;flex-wrap:wrap}
    body.tawtheq-embedded .cloud-sync-status{width:100%;justify-content:center}
  }
}

@media screen {
  body{background:linear-gradient(180deg,#f8f9fd 0,#f1f3fa 100%)}
  .workflow-progress{border-color:#dfe3ec;box-shadow:0 10px 30px rgba(19,24,67,.055)}
  .flow-step-btn:hover{background:#f8f9fd;border-color:#e1e5ef}
  .flow-step-btn.active{background:linear-gradient(135deg,#eef1fa 0,#f3effd 100%);border-color:#c8cff1;box-shadow:0 7px 18px rgba(55,57,185,.09)}
  .flow-step-index{background:#eef1fa}
  .flow-step-btn.active .flow-step-index{box-shadow:0 6px 14px rgba(55,57,185,.18)}
  .flow-step-btn.is-complete:not(.active) .flow-step-index{background:#edf0ff;color:var(--primary-2)}
  .flow-connector{background:linear-gradient(90deg,#d9def3,#e9e1f8)}
  .purpose-card{border-color:#e1e5ef;box-shadow:0 7px 20px rgba(19,24,67,.04)}
  .class-summary-icon{background:linear-gradient(135deg,#eef1fa,#f3effd)}
  .active-context-bar{border-color:#d9deeb;background:linear-gradient(90deg,#f3f5fb,#faf8fe)}
  .guided-footer{border-color:#e1e5ef}
  .record-table th{background:linear-gradient(180deg,#eef2ff,#e5e9fb);color:#17275d}
  .record-table.striped tbody tr:nth-child(even){background:#fafbff}
}