/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Inter',sans-serif;
  background:#f8fafc;
  color:#1f2937;
  line-height:1.6;
}

/* HEADER */
.header {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: #fff;
  padding: 16px;
  position: sticky; top:0; z-index:10;
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
}
.header-content {
  display:flex; align-items:center; justify-content:space-between;
  max-width:1280px; margin:0 auto;
}
.header h1 { font-size:1.5rem; font-weight:700; }
.header-user {
  display:flex; align-items:center; gap:12px;
  font-size:0.875rem; font-weight:500;
}
.header-profile-pic {
  width:40px; height:40px; border-radius:50%;
  object-fit:cover; border:2px solid #fff;
}
.menu-btn {
  background:none; border:none; color:#fff;
  cursor:pointer; padding:8px;
}
.menu-icon { width:28px; height:28px; }

/* UTILITIES */
.hidden { display:none !important; }

/* LAYOUT */
.container { display:flex; min-height:calc(100vh - 60px); }
.sidebar {
  width:240px; background:#1f2937; color:#fff;
  padding:20px; position:fixed; height:100%; top:60px;
  transition:transform .3s ease; z-index:9;
}
.sidebar-hidden { transform:translateX(-100%); }
.sidebar nav button {
  display:block; width:100%; text-align:left;
  padding:12px 16px; color:#e5e7eb; background:none; border:none;
  border-radius:8px; cursor:pointer; margin-bottom:8px;
  transition: background .2s, transform .2s;
}
.sidebar nav button:hover {
  background:#374151; transform:translateX(4px);
}
.main {
  flex:1; padding:24px; max-width:1280px; margin:0 auto;
}

/* LOGIN PAGE */
.login-container {
  display:flex; align-items:center; justify-content:center;
  min-height:calc(100vh - 60px);
  background:url('https://images.unsplash.com/photo-1523240790739-1e2a0a5cb937')
    no-repeat center/cover;
  background-blend-mode: overlay;
  background-color: rgba(0,0,0,0.3);
}
.login-card {
  background:#fff; padding:32px; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
  width:100%; max-width:450px;
  transition:transform .3s, box-shadow .3s;
}
.login-card:hover {
  transform:translateY(-6px);
  box-shadow:0 12px 32px rgba(0,0,0,0.2);
}
.login-card h2 {
  text-align:center; font-size:2rem; font-weight:700;
  margin-bottom:24px; color:#1e3a8a;
}

/* TABS */
.tabs {
  display:flex; justify-content:center; margin-bottom:24px;
  position:relative; background:#e5e7eb; border-radius:12px;
  padding:6px; box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
.tab {
  flex:1; padding:12px 16px; cursor:pointer;
  color:#4b5563; font-size:0.875rem; font-weight:600;
  text-align:center; border-radius:8px; position:relative; z-index:1;
  transition: color .3s, background .3s, transform .2s;
}
.tab:hover {
  color:#fff;
  background:linear-gradient(135deg,#3b82f6,#1e40af);
  transform:translateY(-2px);
}
.tab.tab-active {
  color:#fff;
  background:linear-gradient(135deg,#3b82f6,#1e40af);
  box-shadow:0 4px 8px rgba(0,0,0,0.15);
  transform:scale(1.05);
}
.tabs::before {
  content:''; position:absolute; top:6px; bottom:6px;
  background:linear-gradient(135deg,#3b82f6,#1e40af);
  border-radius:8px;
  transition:transform .3s, width .3s;
  z-index:0;
}
/* adjust highlighter width for 3 vs 2 tabs */
.tabs[data-group="staff"]::before {
  width:calc(33.333% - 12px);
}
.tabs[data-group="family"]::before {
  width:calc(50% - 12px);
}

/* FORM */
.form-group { margin-bottom:20px; }
.form-group label {
  display:block; font-size:0.875rem; font-weight:500;
  color:#374151; margin-bottom:8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:10px;
  border:1px solid #d1d5db; border-radius:8px;
  font-size:1rem; transition:border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline:none;
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,0.2);
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

/* BUTTON */
.btn {
  width:100%; padding:12px; background:#3b82f6;
  color:#fff; border:none; border-radius:8px;
  font-size:1rem; font-weight:500; cursor:pointer;
  transition:background .3s, transform .3s, box-shadow .3s;
}
.btn:hover {
  background:#2563eb; transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(0,0,0,0.15);
}
.btn:active { transform:translateY(0); }

/* CARD & DASHBOARD */
.dashboard { padding:100px; }
.card {
  background:#fff; padding:20px; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  margin-bottom:20px;
}
.card h3 { font-size:1.5rem; color:#1e3a8a; margin-bottom:15px; }
.card h4 { font-size:1.2rem; color:#1e3a8a; margin-bottom:15px; }
.card p { font-size:0.95rem; line-height:1.5; margin-bottom:8px; }
.profile-pic {
  width:100px; height:100px; border-radius:50%;
  object-fit:cover; margin-bottom:15px; border:3px solid #3b82f6;
}
.chart { max-height:300px; margin-top:20px; }

/* Specific styles for user account management */
.user-account-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.user-account-item:last-child {
    border-bottom: none;
}
.user-account-item .user-details {
    flex-grow: 1;
}
.user-account-item .user-details p {
    margin: 0;
    font-size: 0.9em;
}
.user-account-item .user-actions button {
    width: auto;
    padding: 6px 12px;
    font-size: 0.8em;
    margin-left: 10px;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    position: relative;
}
.modal-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #1e3a8a;
}
.modal-content .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
}
.role-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.role-item:last-child {
    border-bottom: none;
}
.role-item .role-details {
    flex-grow: 1;
}
.role-item .role-details p {
    margin: 0;
    font-size: 0.9em;
}
.role-item .role-actions button {
    width: auto;
    padding: 6px 12px;
    font-size: 0.8em;
    margin-left: 10px;
}

/* Styles for academic management */
.academic-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.academic-item:last-child {
    border-bottom: none;
}
.academic-item .academic-details {
    flex-grow: 1;
}
.academic-item .academic-details p {
    margin: 0;
    font-size: 0.9em;
}
.academic-item .academic-actions button {
    width: auto;
    padding: 6px 12px;
    font-size: 0.8em;
    margin-left: 10px;
}