:root{
  --ucla-blue:#2774AE;
  --ucla-gold:#FFD100;
  --ucla-orange:#FF6A13;
  --sidebar-width:260px;
  --sidebar-collapsed:72px;
}

.epssd-header-strip{height:56px;background:var(--ucla-blue);}
.epssd-apps-wrap{min-height:100vh;background:#fff;}

.epssd-sidebar{
  width:var(--sidebar-width);
  border-right:1px solid #e6e6e6;
  background:#fff;
  transition:width .2s ease;
  /* Prevent the main content/cards from ever overlaying the sidebar toggle */
  position:relative;
  z-index:1000;
  flex:0 0 auto;
}
.epssd-sidebar.collapsed{width:var(--sidebar-collapsed);}
.epssd-sidebar .hide-on-collapse{display:block;}
.epssd-sidebar.collapsed .hide-on-collapse{display:none;}
.epssd-sidebar .show-on-collapse{display:none;}
.epssd-sidebar.collapsed .show-on-collapse{display:block;}

.epssd-home-link{font-weight:700;font-size:1.25rem;text-decoration:none;color:#111;}

.epssd-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;text-decoration:none;color:#111;}
.epssd-nav a.active{background:#eef5ff;font-weight:600;}

.epssd-btn-plain{border:1px solid #e6e6e6;background:#fff;border-radius:10px;padding:6px 10px;}

.epssd-content{width:100%;overflow:auto;flex:1 1 auto;min-width:0;}

/* Cards */
.epssd-card{border:1px solid #e8e8e8;border-radius:12px;}
.epssd-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);}
.epssd-app-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#f4f4f4;}

/* Login */
.epssd-login-wrap{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;}
.epssd-login-card{max-width:520px;width:100%;margin-top:80px;}

/* v2 login template classes (used by page-login.php) */
.epssapps-login-wrap{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:0 16px;}
.epssapps-login-card{max-width:480px;width:100%;margin-top:80px;}

/* Admin */
.epssd-admin-table tr{cursor:grab;}
.epssd-admin-table tr.dragging{opacity:.5;}

/* In-dashboard admin UI */
.epssapps-admin-tabs{display:flex;gap:10px;margin:0 0 18px;flex-wrap:wrap;}
.epssapps-admin-tabs a{padding:8px 12px;border:1px solid #d0d0d0;border-radius:8px;text-decoration:none;}
.epssapps-admin-tabs a.is-active{background:#2774ae;color:#fff;border-color:#2774ae;}
.epssapps-admin-msg{margin: 0 0 16px;padding:10px 12px;border:1px solid #d9e6f2;background:#f5fbff;border-radius:8px;}
.epssapps-admin-controls{display:flex;gap:10px;align-items:center;margin: 0 0 14px;}
.epssapps-btn{appearance:none;border:1px solid #c9c9c9;background:#fff;border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:600;}
.epssapps-btn:hover{background:#f5f5f5;}
.epssapps-btn-primary{background:#2774ae;border-color:#2774ae;color:#fff;}
.epssapps-btn-primary:hover{background:#1f5f8c;}
.epssapps-btn-danger{background:#fff;border-color:#e3b0b0;color:#a40000;}
.epssapps-btn-danger:hover{background:#fff2f2;}
.epssapps-small{font-size:12px;color:#666;}
.epssapps-admin-form{border:1px solid #e5e5e5;border-radius:12px;padding:14px;margin: 0 0 16px;background:#fff;}
.epssapps-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.epssapps-admin-grid .full{grid-column:1/-1;}
.epssapps-admin-form label{display:block;font-weight:600;margin:0 0 6px;}
.epssapps-admin-form input,.epssapps-admin-form select,.epssapps-admin-form textarea{width:100%;padding:8px 10px;border:1px solid #d3d3d3;border-radius:8px;}
.epssapps-admin-form textarea{min-height:70px;}
.epssapps-admin-form-actions{display:flex;gap:10px;align-items:center;justify-content:flex-start;margin-top:10px;}
.epssapps-admin-table{width:100%;border-collapse:separate;border-spacing:0;}
.epssapps-admin-table th,.epssapps-admin-table td{padding:10px;border-bottom:1px solid #eee;vertical-align:top;}
.epssapps-admin-table th{font-weight:700;background:#fafafa;}
.epssapps-admin-row-actions{display:flex;gap:8px;align-items:center;}
.epssapps-admin-delete-form{display:inline;}

@media (max-width: 800px){
  .epssapps-admin-grid{grid-template-columns:1fr;}
}

/* Emergency Contacts */
.epssapps-contacts-table .epssapps-contacts-main td{border-bottom:0;}
.epssapps-contacts-detail td{
  padding-top:0;
  background: #fbfbfb;
}
.epssapps-contacts-detail-grid{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.epssapps-contacts-detail-label{
  min-width:160px;
  font-weight:700;
  color:#333;
}
.epssapps-contacts-detail-fields{
  display:grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap:6px 18px;
  width:100%;
}
.epssapps-contacts-k{
  font-weight:600;
  color:#333;
}
@media (max-width: 1100px){
  .epssapps-contacts-detail-fields{grid-template-columns: repeat(2, minmax(180px, 1fr));}
}
@media (max-width: 700px){
  .epssapps-contacts-detail-grid{flex-direction:column;}
  .epssapps-contacts-detail-label{min-width:auto;}
  .epssapps-contacts-detail-fields{grid-template-columns:1fr;}
}

/* Emergency Contacts (Card Layout - aligned grid) */
.epssapps-ecards{
  display:grid;
  grid-template-columns: 1fr; /* one card per row */
  gap:32px;
  padding: 10px 0;
}

/* Emergency Contacts (Fast index list) */
.epssapps-ec-index{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding: 10px 0;
}
.epssapps-ec-index-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:14px 16px;
  box-shadow: 0 2px 4px -2px rgba(0,0,0,0.05);
}
.epssapps-ec-index-name{
  font-weight:600;
  color:#0f172a;
}
.epssapps-ec-index-actions{
  flex: 0 0 auto;
}

/* Individual card */
.epssapps-ecard{
  background-color:#ffffff;
  border-radius:12px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
  border:1px solid #e2e8f0;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:24px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.epssapps-ecard:hover{
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10);
}

/* Block containers inside card */
.epssapps-ecard-block{
  background-color:#f8fafc;
  border-radius:8px;
  padding:16px;
  border:1px solid #f1f5f9;
  overflow-x:auto;
}
.epssapps-ecard-section-title{
  font-size:1.05rem;
  font-weight:700;
  color:#0f172a;
  margin: 0 0 16px 0;
  display:flex;
  align-items:center;
  gap:8px;
}
.epssapps-ecard-section-title::before{
  content:"";
  display:inline-block;
  width:4px;
  height:16px;
  background-color:#3b82f6;
  border-radius:4px;
}

/* ===== Employee grid (top block) ===== */
.epssapps-ecard-grid-emp{
  display:grid;
  grid-template-columns:
    minmax(150px, 1.5fr)
    minmax(100px, 1fr)
    minmax(130px, 1.2fr)
    minmax(180px, 1.8fr)
    minmax(180px, 1.5fr)
    minmax(130px, 1.2fr);
  gap:16px;
}
.epssapps-ecard-grid-emp > div{ min-width:0; }

/* ===== Primary/Secondary Contact lines (NAME: VALUE in one line) ===== */
/* Your PHP now outputs one column of "NAME: value" lines, so keep it simple */
.epssapps-ecard-mini-row{
  display:block; /* IMPORTANT: do NOT make mini-row a grid */
}

.epssapps-ecard-mini-labels{
  display:block;
}

.epssapps-ecard-mini-labels > div{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 0;              /* vertical spacing between rows */
  border-bottom:1px solid #e2e8f0;
  white-space:normal;          /* allow long values (emails) to wrap if needed */
}

.epssapps-ecard-mini-labels > div:last-child{
  border-bottom:0;
}

/* The label (before colon) */
.epssapps-ec-k{
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:#64748b;
  font-weight:700;
  flex:0 0 140px;              /* label column width */
}

/* The value (after label) */
.epssapps-ec-v{
  font-size:0.95rem;
  color:#0f172a;
  font-weight:700;             /* keep bold if you like */
  flex:1 1 auto;
  min-width:0;
  word-break:break-word;       /* emails/long strings won’t overflow */
}

/* Typography & spacing (Employee block only) */
.epssapps-ecard-h{
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:#64748b;
  font-weight:600;
  border-bottom:1px solid #e2e8f0;
  padding-bottom:6px;
  margin-bottom:-4px;
}

.epssapps-ecard-v{
  font-size:0.95rem;
  color:#1e293b;
  padding-top:4px;
}
.epssapps-ecard-v b{
  color:#0f172a;
  font-size:1.05rem;
}
.epssapps-ecard-v.small{
  font-size:0.85rem;
  line-height:1.4;
  word-break:break-word;
}

/* Responsive: allow horizontal scroll rather than breaking alignment */
@media (max-width: 900px){
  .epssapps-ecard{ padding:16px; }
  .epssapps-ecards{ gap:20px; }
  .epssapps-ec-k{ flex-basis:120px; }
}

/* Emergency Contacts: lazy details + pagination */
.epssapps-ec-index-card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:18px;
  box-shadow:0 6px 20px rgba(15,23,42,.06);
  padding:16px;
}

.epssapps-ec-index-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-bottom:10px;
}

.epssapps-ec-index-search input{
  width:min(360px, 100%);
  padding:.55rem .8rem;
  border:1px solid rgba(0,0,0,.12);
  border-radius:.75rem;
  background:#fff;
}

.epssapps-ec-index-table{ width:100%; }
.epssapps-ec-index-row{
  display:grid;
  grid-template-columns: 1fr 160px;
  gap:12px;
  align-items:center;
  padding:10px 8px;
  border-top:1px solid #f1f5f9;
}
.epssapps-ec-index-row--head{
  border-top:none;
  padding-top:6px;
  padding-bottom:12px;
}
.epssapps-ec-index-row--head .epssapps-ec-index-col{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#64748b;
  font-weight:700;
}
.epssapps-ec-index-name{
  font-weight:650;
  color:#0f172a;
}
.epssapps-ec-index-action{ text-align:right; }

.epssapps-ec-index-row:not(.epssapps-ec-index-row--head):hover{
  background:#f8fafc;
  border-radius:12px;
}
.epssapps-ec-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.45rem .8rem;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:.6rem;
  cursor:pointer;
  font-weight:600;
}
.epssapps-ec-toggle[aria-expanded="true"]{
  opacity:.9;
}
.epssapps-ec-details{
  margin-top: .9rem;
}
.epssapps-ec-details.is-loading{
  opacity:.7;
}

.epssapps-pagination{
  margin-top: 1.25rem;
}
.epssapps-pagination__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.epssapps-pagination__link{
  text-decoration:none;
  padding:.4rem .7rem;
  border:1px solid rgba(0,0,0,.12);
  border-radius:.6rem;
  background:#fff;
}
.epssapps-pagination__meta{
  font-weight:600;
  opacity:.85;
}
.epssapps-pagination__spacer{ display:inline-block; width:5.5rem; }