/* Reset + base */
:root{
  --bg: #2b3952;
  --card: #0b1220;
  --muted: #9aa4b2;
  --accent-1: #6d28d9; /* deep violet */
  --accent-2: #7c5cff; /* lilac */
  --glass: rgba(255,255,255,0.06);
  --glass-2: rgba(255,255,255,0.03);
  --radius: 14px;
  --soft-shadow: 0 6px 20px rgba(2,6,23,0.6);
  color-scheme: dark;
}

/* Light Theme Override */
body.light {
  --bg: #f7f8fb;
  --card: #ffffff;
  --muted: #6b7280;
  --accent-1: #4f46e5;
  --accent-2: #7c5cff;
  --glass: rgba(79,70,229,0.06);
  --glass-2: rgba(0,0,0,0.03);
  --soft-shadow: 0 6px 18px rgba(99,102,241,0.07);
  color-scheme: light;
  background: ghostwhite;
}

/* Smooth transitions for theme toggle */
html, body, header, main, footer, .card, .tabs, .content {
  transition:
    background 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* === RESET & BASE === */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
html, body { height: 100%; }
body { min-height: 100vh; background: linear-gradient(180deg, var(--bg), #071028); padding: 1.2rem; display: flex; flex-direction: column; gap: 1rem; color: var(--muted); }

/* Header */
header{display:flex;flex-direction: row ;justify-content:space-between;align-items:center;gap:1rem}
.brand{display:flex;align-items:center;gap:0.9rem}
.logo img {width:56px;height:56px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));box-shadow:var(--soft-shadow);color:white;font-weight:700;font-size:1.1rem}
h1{font-size:1.15rem;color:var(--muted);line-height:1}
header p{font-size:0.85rem;color:var(--muted);opacity:0.9}

/* Right controls */
.controls{display:flex;align-items:center;gap:0.6rem}
.search{display:flex;align-items:center;background:var(--glass);padding:0.35rem;border-radius:10px;gap:0.4rem;min-width:180px}
.search input{border:0;background:transparent;padding:0.45rem 0.25rem;outline:none;color:inherit}
.icon-btn{border:0;background:transparent;padding:0.45rem;border-radius:8px;cursor:pointer}
.icon-btn:focus{outline:2px solid rgba(124,92,255,0.18)}

/* Layout */
main{display:grid;grid-template-columns:260px 1fr;gap:1rem;align-items:start}

/* Sidebar tabs */
.tabs{background:var(--card);padding:1rem;border-radius:var(--radius);box-shadow:var(--soft-shadow);min-height:180px}
.tabs h2{font-size:0.95rem;color:var(--muted);margin-bottom:0.6rem}
.subject-list{display:flex;flex-direction:column;gap:0.45rem}
.subject{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;padding:0.45rem;border-radius:10px;background:var(--glass-2);cursor:pointer;border:1px solid transparent}
.subject:hover{transform:translateX(4px)}
.subject.active{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:white;border-color:rgba(255,255,255,0.06)}
.subject .meta{font-size:0.85rem;color:inherit;opacity:0.95}
.subject .count{font-weight:600;font-size:0.82rem}

/* Add subject */
.add-subject{display:flex;gap:0.4rem;margin-top:0.8rem}
.add-subject input{flex:1;padding:0.45rem;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:transparent;color:inherit}
.btn-primary{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:white;border:0;padding:0.45rem 0.6rem;border-radius:10px;cursor:pointer}

/* Content */
.content{background:var(--card);padding:1rem;border-radius:var(--radius);box-shadow:var(--soft-shadow);min-height:300px}
.content-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:0.8rem}
.content-header h3{margin:0;color:var(--muted)}
.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.9rem}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:0.9rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column;gap:0.6rem;border: 1px solid rgba(125, 92, 255, 0.211);}
.card a{font-weight:600;color:var(--accent-2);text-decoration:none}
.card p{font-size:0.85rem;color:var(--muted)}
.tag{display:inline-block;font-size:0.75rem;padding:0.22rem 0.45rem;border-radius:999px;background:rgba(255,255,255,0.03);font-weight:600}
.card .actions{display:flex;gap:0.5rem;margin-top:auto;align-items:center}
.btn-ghost{border:1px solid rgba(255,255,255,0.04);padding:0.35rem 0.6rem;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}

/* Footer */
footer{display:flex;justify-content:center;padding:0.6rem;border-radius:10px;color:var(--muted)}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.6);z-index:60}
.modal.show{display:flex}
.modal-card{width:100%;max-width:520px;background:var(--card);padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.modal-card h4{margin-bottom:0.6rem;color:var(--muted);font-size: 20px;font-weight: 600;}
.form-row{display:flex;flex-direction: column;gap:0.6rem}
.form-row input,textarea{flex:1;padding:0.6rem;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:transparent;color:inherit}
.form-row label {font-size: 14px;}

/* Responsive Mobile*/
@media (max-width:900px){
  main{grid-template-columns:1fr;}
  .resource-grid{grid-template-columns:1fr}
  .logo{width:48px;height:48px}
  .search{min-width:120px}
  /* Header */
  header{flex-direction: column;}
}

/* Tiny accessibility + motion */
:where(.subject, .card, .btn-primary, .icon-btn){transition:all 220ms cubic-bezier(.2,.9,.2,1)}
a:focus,button:focus,input:focus{outline:2px solid rgba(124,92,255,0.18);outline-offset:2px}

/* delete buttons */
.delete-btn{
  margin-left: 0.6rem;
  background: #f87171; /* red */
  color: white;
  border: none;
  padding: 0.2rem 0.4rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.85rem;
}
.delete-btn:hover{ background: #ef4444; }
.delete-subject-btn{ background: #f87171; color: white; border: none; padding: 0.2rem 0.4rem; border-radius: 5px; cursor: pointer; font-size: 0.85rem; }
.delete-subject-btn:hover{ background: #ef4444; }

.card:hover,
.card:focus-within {
  transform: translateX(4px);
  /* subtle lift shadow to match the subjects' hover feel */
  /* https://smoothshadows.com/#djEsMiw1LDAuMDgsMjQsMzIsMCwjMDMwNzEyLCNmM2Y0ZjYsI2ZmZmZmZiwy */
box-shadow: 0px 1px 1px rgba(3, 7, 18, 0.08),
  0px 5px 4px rgba(3, 7, 18, 0.06),
  0px 12px 9px rgba(3, 7, 18, 0.05),
  0px 20px 15px rgba(3, 7, 18, 0.03),
  0px 32px 24px rgba(3, 7, 18, 0.02);

  /* keep smooth motion (already defined globally, but safe to reinforce) */
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms cubic-bezier(.2,.9,.2,1);
}
