/* ===========================
   THEME TOKENS (Light default)
   Toggle body.theme-dark for dark mode
   =========================== */
:root{
  --bg:#f7f8fc;
  --card:#ffffff;
  --muted:#5b6577;
  --text:#0b1220;
  --accent:#2f7cf6;
  --accent-2:#2ecc71;
  --danger:#ff5a5f;
  --border:#dfe3ee;
  --elev:#f7f9ff;
  --input:#f5f7fd;
  --chip:#f0f4ff;
  --chip-border:#d7dff0;
  --progress:#e8eefc;
}

/* Dark overrides */
body.theme-dark{
  --bg:#0b0c10;
  --card:#121318;
  --muted:#aab0bb;
  --text:#e9eef7;
  --accent:#4da3ff;
  --accent-2:#2ecc71;
  --danger:#ff5a5f;
  --border:#1f2230;
  --elev:#0f1118;
  --input:#0f1118;
  --chip:#0e1220;
  --chip-border:#1e2132;
  --progress:#0e1220;
}

/* ===========================
   GLOBAL (RTL Arabic UI)
   =========================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  direction: rtl;           /* RTL layout */
  text-align: start;
  font-family:Tajawal, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  font-size:18px;           /* Larger, readable baseline */
  line-height:1.85;
  letter-spacing:0.05px;
}

h1{font-size:28px;margin:0 0 2px 0;font-weight:800}
h2{font-size:22px;margin:0 0 2px 0;font-weight:700}

.app-header{
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:10;
  padding:18px 24px;border-bottom:1px solid var(--border);
  background:color-mix(in oklab, var(--bg) 90%, white 10%);
  backdrop-filter: blur(6px);
}

.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

.btn{
  appearance:none;border:1px solid var(--border);background:var(--elev);
  color:var(--text);padding:12px 16px;border-radius:14px;cursor:pointer;
  font-weight:700;transition:transform .05s ease, border .2s ease;
  font-size:16px;
}
.btn:hover{border-color:color-mix(in oklab, var(--border), var(--accent) 30%)}
.btn:active{transform:translateY(1px)}
.btn-danger{border-color: color-mix(in oklab, var(--danger) 40%, var(--border));background:color-mix(in oklab, var(--danger) 8%, var(--elev) 92%)}
.btn-danger:hover{border-color: color-mix(in oklab, var(--danger) 60%, var(--border))}

.file-label{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px}
.file-label input{position:absolute;inset:0;opacity:0;cursor:pointer}

.app-main{
  max-width:1280px; /* Wider page */
  margin:28px auto;
  padding:0 24px;
}

.toolbar{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:14px;flex-wrap:wrap
}
.search{
  background:var(--input);border:1px solid var(--border);border-radius:14px;
  padding:12px 14px;color:var(--text);min-width:280px;flex:1;
  font-size:17px;
}
.stats{font-size:15px;color:var(--muted)}

/* ===========================
   RESOURCES
   =========================== */
.resources-card{
  background:var(--card);border:1px solid var(--border);border-radius:18px;
  padding:16px 16px 12px;margin-bottom:18px
}
.resources-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.resources-title{display:flex;gap:10px;align-items:center}
.resources-tip{color:var(--muted);font-size:15px;margin:6px 0 12px}

.resources-list{display:flex;flex-direction:column;gap:12px}
.resource{
  background:var(--elev);border:1px solid var(--border);border-radius:14px;padding:12px;
  display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center
}
.resource input{
  background:var(--input);border:1px solid var(--border);border-radius:12px;color:var(--text);
  padding:10px 12px;width:100%;font-size:16px
}
.resource .controls{display:flex;gap:8px}

/* ===========================
   MODULES
   =========================== */
.modules-wrap{display:grid;grid-template-columns:1fr;gap:16px}

.module{
  background:var(--card);border:1px solid var(--border);border-radius:18px;padding:14px;
  display:flex;flex-direction:column;gap:14px
}

.module-header{
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center
}

.module-title{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap
}
.module-title input{
  background:var(--input);border:1px solid var(--border);border-radius:12px;color:var(--text);
  padding:10px 12px;min-width:260px;font-weight:800;font-size:18px
}
.module-actions{display:flex;gap:10px;flex-wrap:wrap}
.tag{
  font-size:13px;color:var(--muted);background:var(--chip);border:1px solid var(--chip-border);
  padding:3px 10px;border-radius:999px
}

.progress{
  height:12px;background:var(--progress);border:1px solid var(--border);border-radius:999px;overflow:hidden
}
.progress > div{
  height:100%;
  background: var(--accent); /* Solid color (no gradient) */
  width:0%;
}

.lesson-list{display:flex;flex-direction:column;gap:12px}
.lesson{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  background:var(--elev);border:1px solid var(--border);border-radius:14px;padding:12px
}
.lesson .title{
  display:flex;align-items:center;gap:10px
}
.lesson .title input[type="text"]{
  background:var(--input);border:1px solid var(--border);border-radius:12px;color:var(--text);
  padding:10px 12px;width:100%;font-size:16px
}
.lesson .controls{display:flex;gap:8px}
.icon-btn{
  border:1px solid var(--border);background:var(--elev);color:var(--text);cursor:pointer;
  border-radius:12px;padding:10px;display:grid;place-items:center;font-size:18px
}
.icon-btn:hover{border-color:color-mix(in oklab, var(--border), var(--accent) 30%)}
.icon-danger{background:color-mix(in oklab, var(--danger) 8%, var(--elev) 92%);border-color:color-mix(in oklab, var(--danger) 40%, var(--border))}
.icon-success{background:color-mix(in oklab, var(--accent-2) 8%, var(--elev) 92%);border-color:color-mix(in oklab, var(--accent-2) 40%, var(--border))}

.notes{
  background:var(--input);border:1px solid var(--border);border-radius:12px;color:var(--text);
  padding:12px 14px;width:100%;min-height:48px;resize:vertical;font-size:16px
}
.inline-help{font-size:14px;color:var(--muted);margin: -2px 0 2px 0}

/* Footer */
.app-footer{max-width:1280px;margin:24px auto;padding:0 24px;color:var(--muted);font-size:14px}

/* Wider screens */
@media (min-width: 1000px){
  .modules-wrap{grid-template-columns:1fr 1fr}
}
@media (min-width: 1500px){
  .modules-wrap{grid-template-columns:1fr 1fr 1fr}
}

/* --- Force single-column layout for modules on all viewports --- */
/* Keep English comments in code per your request. */
.modules-wrap { 
  grid-template-columns: 1fr !important; 
}

/* In case older media queries exist, override them too */
@media (min-width: 1000px) { 
  .modules-wrap { grid-template-columns: 1fr !important; } 
}
@media (min-width: 1500px) { 
  .modules-wrap { grid-template-columns: 1fr !important; } 
}



/* ===== Clearer lesson/notes separation ===== */
/* Container that groups a lesson header + its notes panel */
.lesson-item{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;           /* keep children edges clean */
}

/* Make the header look like a header strip */
.lesson-item .lesson{
  background: var(--elev);
  border: 0;
  border-radius: 0;
  padding: 14px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto; /* checkbox | title | controls */
  gap: 12px;
  align-items: center;
  border-bottom: 1px dashed var(--border);
}

/* Title input inside header */
.lesson-item .lesson .title input{
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  width: 100%;
  font-size: 16px;
}

/* Notes panel (hidden by default) */
.lesson-notes{
  display: none;
  background: color-mix(in oklab, var(--input) 85%, white 15%);
  padding: 12px 14px;
  border-inline-start: 4px solid var(--accent); /* right edge in RTL */
}

/* Open state shows notes */
.lesson-item.open .lesson-notes{ display: block; }

/* Small helper label above textarea */
.lesson-notes .inline-help{
  margin-top: 0;
  margin-bottom: 6px;
  color: var(--muted);
}

/* Notes textarea inside panel */
.lesson-notes .notes{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 56px;
}

/* Notes toggle chip */
.notes-toggle{
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
}

/* Give more vertical air between lesson items */
.lesson-list{
  display: flex;
  flex-direction: column;
  gap: 16px; /* more gap than before */
}

/* While dragging, keep visual feedback on the whole item */
.lesson-item.dragging{
  opacity: .85;
  outline: 1px dashed color-mix(in oklab, var(--accent) 50%, var(--border));
}