/* ══════════════════════════════════════════
   ISLAMIC HUB — components.css
   Overlay, Settings Drawer, Modal, Toast, Notifications
   ══════════════════════════════════════════ */

/* ═══ OVERLAY ═══ */
.overlay{
  display:none;position:fixed;inset:0;z-index:299;
  background:rgba(0,0,0,0.5);backdrop-filter:blur(2px);
  transition:opacity .3s;
}
.overlay.active{display:block}

/* ═══ SETTINGS DRAWER ═══ */
.settings-drawer{
  position:fixed;right:-320px;top:0;width:300px;height:100%;z-index:300;
  background:var(--bg-mid);border-left:1px solid var(--border);
  transition:right .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
  box-shadow:-8px 0 40px rgba(0,0,0,0.4);
}
.settings-drawer.open{right:0}
.drawer-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 18px 14px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:inherit;z-index:10;
}
.drawer-title{font-family:'Cinzel',serif;font-size:16px;font-weight:700;color:var(--gold)}
.drawer-close{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface);color:var(--text-soft);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.drawer-close:hover{background:var(--surface-2);color:var(--text)}
.drawer-body{padding:16px}

.setting-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 12px;border-radius:13px;background:var(--surface);
  border:1px solid var(--border);margin-bottom:10px;
}
.setting-label{font-size:14px;font-weight:600;color:var(--text);margin-bottom:2px}
.setting-desc{font-size:11px;color:var(--text-muted)}
.setting-section-title{
  font-size:10px;font-weight:700;letter-spacing:2px;color:var(--gold);
  text-transform:uppercase;padding:14px 4px 6px;
}
.setting-select{
  width:100%;padding:10px 14px;border-radius:11px;
  background:var(--surface-2);border:1px solid var(--border);
  color:var(--text);font-family:'Rajdhani',sans-serif;font-size:13px;
  outline:none;cursor:pointer;margin-bottom:10px;
}

/* Toggle Switch */
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-track{
  position:absolute;inset:0;border-radius:24px;
  background:var(--surface-3);border:1px solid var(--border);
  cursor:pointer;transition:all .3s;
}
.toggle-track::after{
  content:'';position:absolute;left:3px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;border-radius:50%;background:var(--text-muted);
  transition:all .3s;
}
.toggle-switch input:checked + .toggle-track{background:rgba(0,212,170,.2);border-color:var(--teal)}
.toggle-switch input:checked + .toggle-track::after{left:23px;background:var(--teal)}

/* Drawer Jamaat */
.drawer-jamaat-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;border-radius:11px;background:var(--surface);
  border:1px solid var(--border);margin-bottom:6px;
}
.dj-label{font-size:13px;font-weight:600;color:var(--yellow-led)}
.dj-input{
  background:transparent;border:1px solid var(--border);
  border-radius:8px;padding:4px 8px;
  color:var(--blue-led);font-family:'Rajdhani',sans-serif;font-size:14px;
  outline:none;cursor:pointer;max-width:110px;
}
body.light-mode .dj-input{color:#0044cc}

/* About Box */
.about-box{
  text-align:center;padding:20px;border-radius:16px;
  background:var(--surface);border:1px solid var(--border);
  margin-top:6px;
}
.about-logo{font-size:36px;margin-bottom:8px}
.about-name{font-family:'Cinzel',serif;font-size:18px;font-weight:700;color:var(--gold)}
.about-ver{font-size:12px;color:var(--text-muted);margin:4px 0}
.about-author{font-size:13px;color:var(--text-soft)}
.about-author strong{color:var(--gold)}

/* ═══ ALERT MODAL ═══ */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;
}
.modal-overlay.active{display:flex}
.modal-box{
  background:var(--modal-bg);border:1px solid var(--border);
  border-radius:22px;padding:32px 28px;max-width:320px;width:90%;
  text-align:center;animation:modalPop .3s cubic-bezier(.34,1.56,.64,1) both;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
@keyframes modalPop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.modal-icon{font-size:48px;margin-bottom:12px}
.modal-title{font-family:'Cinzel',serif;font-size:18px;font-weight:700;color:var(--gold);margin-bottom:8px}
.modal-msg{font-size:14px;color:var(--text-soft);line-height:1.6;margin-bottom:20px}
.modal-actions{display:flex;gap:10px}
.modal-btn{
  flex:1;padding:12px;border-radius:12px;border:none;
  font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;
}
.modal-btn.primary{background:linear-gradient(135deg,var(--gold),var(--gold-dim));color:#000}
.modal-btn.primary:hover{opacity:.9}
.modal-btn.secondary{background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted)}
.modal-btn.secondary:hover{color:var(--text)}

/* ═══ TOAST ═══ */
.toast-container{
  position:fixed;top:76px;right:16px;z-index:600;
  display:flex;flex-direction:column;gap:8px;max-width:300px;
  pointer-events:none;
}
.toast{
  padding:12px 16px;border-radius:14px;
  font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:600;
  opacity:0;transform:translateX(40px);transition:all .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events:auto;border:1px solid;backdrop-filter:blur(12px);
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.toast.show{opacity:1;transform:translateX(0)}
.toast-success{background:rgba(0,212,100,.12);border-color:rgba(0,212,100,.3);color:#00d464}
.toast-warning{background:rgba(255,180,0,.1);border-color:rgba(255,180,0,.3);color:#ffb400}
.toast-info{background:rgba(100,150,255,.1);border-color:rgba(100,150,255,.3);color:#8aabff}
.toast-prayer{background:rgba(201,168,76,.12);border-color:rgba(201,168,76,.3);color:var(--gold-light)}
.toast-error{background:rgba(255,50,50,.1);border-color:rgba(255,50,50,.3);color:#ff6464}

/* ═══ NOTIFICATION PANEL ═══ */
.notif-panel{
  position:fixed;top:68px;right:16px;width:280px;z-index:200;
  background:var(--bg-mid);border:1px solid var(--border);
  border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,0.4);
  overflow:hidden;max-height:360px;overflow-y:auto;
}
.notif-panel-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--border);
  font-size:13px;font-weight:700;color:var(--gold);
  position:sticky;top:0;background:var(--bg-mid);
}
.notif-panel-header button{
  font-size:11px;color:var(--text-muted);background:none;border:none;cursor:pointer;
  font-family:'Rajdhani',sans-serif;font-weight:600;
}
.notif-item{
  padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.04);
}
.notif-msg{font-size:13px;font-weight:600;margin-bottom:3px}
.notif-time{font-size:10px;color:var(--text-muted)}
.notif-success .notif-msg{color:#00d464}
.notif-warning .notif-msg{color:#ffb400}
.notif-prayer .notif-msg{color:var(--gold)}
.notif-info .notif-msg{color:#8aabff}
.notif-empty{padding:20px;text-align:center;color:var(--text-muted);font-size:13px}