/* موادي - أنماط عامة */
:root{
  --green:#4CAF50;
  --blue:#2196F3;
  --red:#F44336;
  --yellow:#FFC107;
  --bg:#0f1216;
  --card:#171b21;
  --muted:#9aa4b2;
  --text:#e8eef7;
  --shadow: 0 8px 20px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Tajawal", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:linear-gradient(180deg, #0e1116, #11161d 30%, #0f1216);
  color:var(--text);
}

/* Header */
.app-header{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  background:#0f1319e0; backdrop-filter: blur(8px);
  border-bottom:1px solid #1f2630;
}
.app-header h1{margin:0; font-size:1.2rem; font-weight:700}
.back-btn, .edit-btn{
  background:#131923; color:var(--text);
  border:1px solid #202635;
  padding:8px 10px; border-radius:999px; cursor:pointer;
  box-shadow: var(--shadow);
  opacity:.9;
}
.back-btn:hover, .edit-btn:hover{opacity:1}
.back-btn{visibility:hidden} /* visible inside subject view */

/* Views */
.view{padding:16px; max-width:980px; margin:0 auto}
.hidden{display:none}

/* Subjects grid */
.subjects{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
}
.subject-card{
  display:flex; align-items:center; gap:12px;
  padding:14px; border-radius:18px; color:white;
  box-shadow: var(--shadow);
  cursor:pointer;
  transform: translateY(0);
  transition: transform .15s ease, opacity .2s ease;
}
.subject-card:hover{transform: translateY(-2px); opacity:.95}
.subject-icon{font-size:28px}
.subject-name{font-size:1.05rem; font-weight:700}
.subject-meta-line{font-size:.85rem; opacity:.9}

/* Tabs */
.tabs{display:flex; gap:8px; margin:10px 0 14px}
.tab{
  flex:1; padding:10px; border-radius:12px; border:1px solid #283040;
  background:#121722; color:#dbe7ff; cursor:pointer; font-weight:700;
}
.tab.active{outline:2px solid #3a455a}

/* Tab color accents */
.tab[data-color="green"].active{background:#12331a}
.tab[data-color="blue"].active{background:#102b47}
.tab[data-color="red"].active{background:#3a1412}
.tab[data-color="yellow"].active{background:#3a300f}

/* Lists inside tabs */
.item-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
}
.note-card, .pdf-card, .audio-card, .image-card, .bucket-card{
  background:#141a24; border:1px solid #263042;
  border-radius:16px; padding:12px; box-shadow: var(--shadow);
  position:relative; cursor:pointer;
}
.note-card h4{margin:0 0 6px}
.note-card p{margin:0; color:var(--muted); font-size:.95rem; line-height:1.5; max-height:3.6em; overflow:hidden}

/* Bucket */
.bucket-card{display:flex; align-items:center; gap:10px; font-weight:700}
.bucket-color{width:16px; height:16px; border-radius:4px; border:1px solid #0003}

/* PDF */
.pdf-card{display:flex; align-items:center; gap:10px; font-weight:700}

/* Audio */
.audio-card{display:flex; align-items:center; gap:10px; justify-content:space-between}
.audio-time{font-feature-settings:"tnum" 1; font-variant-numeric: tabular-nums; color:#cbd6e7}

/* Images */
.image-grid{
  display:grid; gap:8px;
  grid-template-columns: repeat(auto-fill, minmax(110px,1fr));
}
.image-card{padding:0; overflow:hidden}
.image-card img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:1/1}

/* Fullscreen image */
.fullscreen{
  position:fixed; inset:0; background:rgba(0,0,0,.9);
  display:flex; align-items:center; justify-content:center;
  z-index:50;
}
.fullscreen img{max-width:95vw; max-height:95vh}

/* Floating add button */
.fab{
  position:fixed; right:16px; bottom:16px; z-index:10;
  width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg, #5865f2, #4dd0e1);
  color:white; border:none; font-size:30px; line-height:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  cursor:pointer;
}

/* Modal */
.modal{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.55); z-index:20}
.modal-card{
  width:min(560px, 92vw);
  background:#0f141c; border:1px solid #2a3446; border-radius:18px; padding:16px;
  box-shadow: var(--shadow);
}
.modal-card h2{margin-top:0}
.modal-card label{display:block; margin:10px 0 6px; color:#bac6da}
.modal-card input, .modal-card textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #263042; background:#0c1118; color:var(--text);
}
.icon-grid, .level-grid, .color-grid{
  display:grid; gap:8px; grid-template-columns: repeat(8, 1fr);
}
.icon-opt, .level-opt, .color-opt{
  padding:10px; border-radius:10px; border:1px solid #2a3346; background:#121826; color:var(--text);
  cursor:pointer;
}
.color-opt{height:34px; padding:0; border:2px solid #172033}
.icon-opt.selected, .level-opt.selected, .color-opt.selected, .color-opt:focus{outline:2px solid #79a6ff}

.modal-actions{display:flex; gap:8px; justify-content:flex-start; margin-top:12px}
.btn{padding:10px 14px; border-radius:12px; border:1px solid #2b3448; background:#141a24; color:var(--text); cursor:pointer}
.btn.primary{background:#1b2636}
.btn.danger{background:#2a1616; border-color:#4a2a2a}

/* Subject meta on top of subject view */
.subject-top{margin:6px 0 8px}
.subject-meta{font-size:.95rem; color:#b7c5d8}

/* Utilities */
.center{display:grid; place-items:center}
.small{font-size:.85rem; color:#9cb0cc}