/*
  MyManzo - Summer Beach/Sea Theme
*/
:root{
  --mymanzo-teal:#10c7c7;
  --mymanzo-sand:#f6d36b;
  --mymanzo-ocean:#1877f2;
  --mymanzo-ink:#0b1b24;
  --mymanzo-ink-soft:#173140;
  --mymanzo-card:#ffffff;
  --mymanzo-shadow:0 10px 30px rgba(11,27,36,.12);
  --mymanzo-radius:18px;
}

/* Global typography + smoothing */
body, .wrap{ color: var(--mymanzo-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.mymanzo-summer{
  background: linear-gradient(135deg, rgba(16,199,199,.12), rgba(246,211,107,.14), rgba(24,119,242,.10));
  border-radius: var(--mymanzo-radius);
  padding: 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.mymanzo-wrap{ padding-top: 10px; }
.mymanzo-title{ display:flex; align-items:center; gap:10px; font-size: 28px; line-height: 1.1; margin-bottom: 14px; color: var(--mymanzo-ink); }

.mymanzo-card{
  background: var(--mymanzo-card);
  border-radius: var(--mymanzo-radius);
  box-shadow: var(--mymanzo-shadow);
  padding: 18px;
  border: 1px solid rgba(11,27,36,.06);
  margin: 16px 0;
}

.mymanzo-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.mymanzo-table-wrap{ overflow-x:auto; }

.mymanzo-form-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 10px; }
.mymanzo-form-grid label{ display:block; font-weight: 700; margin-bottom: 6px; }
.mymanzo-form-grid input, .mymanzo-form-grid select{ width: 100%; max-width: 520px; }

/* Portals: use full available width on desktop (no narrow inner container) */
.mymanzo-teacher-portal, .mymanzo-parent-portal{
  width: 100%;
  max-width: 100%;
}
.mymanzo-teacher-portal .mymanzo-form-grid input,
.mymanzo-teacher-portal .mymanzo-form-grid select,
.mymanzo-parent-portal .mymanzo-form-grid input,
.mymanzo-parent-portal .mymanzo-form-grid select{
  max-width: 100%;
}
.mymanzo-teacher-portal .mymanzo-card,
.mymanzo-parent-portal .mymanzo-card{
  width: 100%;
}

.mymanzo-upload{ display:flex; gap: 10px; flex-wrap:wrap; align-items:center; }
.mymanzo-status{ font-weight:700; color: var(--mymanzo-ink-soft); margin-left: 8px; }
.mymanzo-muted{ color: var(--mymanzo-ink-soft); margin-top: 0; }

.mymanzo-flex-between{ display:flex; align-items:center; justify-content:space-between; gap: 10px; flex-wrap:wrap; }

/* Buttons */
.mymanzo-btn, .mymanzo-btn.button, a.mymanzo-btn.button{
  border-radius: 999px !important;
  border: 1px solid rgba(11,27,36,.14) !important;
  padding: 8px 14px !important;
  height: auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  background: linear-gradient(135deg, var(--mymanzo-teal), var(--mymanzo-ocean)) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(24,119,242,.18) !important;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  position: relative;
  overflow: hidden;
}
.mymanzo-btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 32px rgba(24,119,242,.22) !important; filter: brightness(1.03); }
.mymanzo-btn:active{ transform: translateY(0); box-shadow: 0 8px 18px rgba(24,119,242,.18) !important; }
.mymanzo-btn::after{
  content:""; position:absolute; inset:-2px;
  background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.30), rgba(255,255,255,0));
  transform: translateX(-120%); transition: transform .55s ease; pointer-events:none;
}
.mymanzo-btn:hover::after{ transform: translateX(120%); }
.mymanzo-btn-outline{ background: linear-gradient(135deg, rgba(246,211,107,.22), rgba(16,199,199,.16)) !important; color: var(--mymanzo-ink) !important; border: 1px solid rgba(11,27,36,.18) !important; }

/* Preview table */
.mymanzo-preview-table{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}
.mymanzo-preview-table th, .mymanzo-preview-table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(11,27,36,.08);
  font-size: 14px;
  vertical-align: middle;
}
.mymanzo-preview-table th{
  background: rgba(16,199,199,.12);
  font-weight: 800;
  text-align: left;
}
.mymanzo-preview-table input{
  width: 90px;
}
.mymanzo-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,36,.10);
  background: rgba(246,211,107,.22);
  font-weight: 800;
}
.mymanzo-error{
  color: #b32d2e;
  font-weight: 800;
}
.mymanzo-ok{
  color: #007017;
  font-weight: 800;
}
.mymanzo-star{
  color: #d4a100;
  margin-right: 6px;
}


/* Parent Portal Tabs */
.mymanzo-tabs{display:flex;gap:8px;flex-wrap:wrap;}
.mymanzo-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.6);text-decoration:none;border:1px solid rgba(0,0,0,.08);transition:transform .15s ease, box-shadow .15s ease;}
.mymanzo-tab:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(0,0,0,.08);}
.mymanzo-tab-active{background:rgba(0,180,180,.12);border-color:rgba(0,180,180,.25);}


/* ============================================================
 * Consistent buttons + icon spacing
 * ============================================================ */
.mymanzo-btn i { margin-right: 8px; }

/* ============================================================
 * Admin cards (Shortcodes/Settings)
 * ============================================================ */
.mymanzo-admin-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.mymanzo-admin-card{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(11,27,36,.10);
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(11,27,36,.08);
  overflow:hidden;
}
.mymanzo-card-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(6,185,198,.18), rgba(24,119,242,.12));
  border-bottom: 1px solid rgba(11,27,36,.08);
}
.mymanzo-card-header-title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 14px;
}
.mymanzo-card-header-title i{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(11,27,36,.10);
}
.mymanzo-pill{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,27,36,.10);
  font-weight: 700;
  font-size: 12px;
  color: var(--mymanzo-ink);
}
.mymanzo-admin-card-body{
  padding: 12px 14px 14px 14px;
}

/* =========================================================
   Icon system + colorful accents (FontAwesome + emojis)
   ========================================================= */
.mymanzo-btn i{ margin-right:8px; }

/* Icon wrapper (badge + emoji) */
.mymanzo-icon{
  display:inline-flex;
  align-items:center;
  gap:8px;
  vertical-align:middle;
}
.mymanzo-icon-badge{
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(0,196,204,.22), rgba(255,210,92,.28));
  border: 1px solid rgba(16,42,42,.12);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.mymanzo-icon-badge i{
  font-size:14px;
  color: var(--mymanzo-ink);
}
.mymanzo-emoji{
  font-size: 13px;
  line-height: 1;
  opacity: .9;
}

/* Card gradients + subtle shine */
.mymanzo-card,
.mymanzo-admin-card{
  position:relative;
  overflow:hidden;
}
.mymanzo-card::before,
.mymanzo-admin-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(135deg, rgba(0,196,204,.18), rgba(255,210,92,.22), rgba(0,140,255,.14));
  opacity:.85;
  pointer-events:none;
}
.mymanzo-card > * ,
.mymanzo-admin-card > *{
  position:relative;
  z-index:1;
}

/* Lift on hover (subtle, mobile-safe) */
.mymanzo-card:hover,
.mymanzo-admin-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}
.mymanzo-card,
.mymanzo-admin-card{
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Card header styling with badge circles */
.mymanzo-card h1,
.mymanzo-card h2,
.mymanzo-card h3,
.mymanzo-title{
  display:flex;
  align-items:center;
  gap:10px;
}
.mymanzo-card h1 .mymanzo-icon,
.mymanzo-card h2 .mymanzo-icon,
.mymanzo-card h3 .mymanzo-icon,
.mymanzo-title .mymanzo-icon{
  flex:0 0 auto;
}

/* Section headers inside custom header blocks */
.mymanzo-card-header{
  display:flex;
  align-items:center;
  gap:10px;
}
.mymanzo-card-header .mymanzo-icon-badge{
  width:30px;
  height:30px;
}

/* Keep text readable */
.mymanzo-card, .mymanzo-admin-card{
  color: var(--mymanzo-ink);
}

/* Prevent icon/emoji wrapping on small screens */
@media (max-width:480px){
  .mymanzo-emoji{ display:none; }
  .mymanzo-icon{ gap:6px; }
  .mymanzo-icon-badge{ width:26px; height:26px; }
}

/* Smaller icon badges inside buttons */
.mymanzo-btn .mymanzo-icon-badge{
  width:22px;
  height:22px;
  box-shadow:none;
}
.mymanzo-btn .mymanzo-icon-badge i{ font-size:12px; }
.mymanzo-btn .mymanzo-emoji{ display:none; }

/* Buttons: small shine */
.mymanzo-btn{
  position:relative;
  overflow:hidden;
}
.mymanzo-btn::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-30%;
  width:40%;
  height:220%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
  transform: rotate(18deg);
  opacity:0;
}
.mymanzo-btn:hover::after{
  opacity:.7;
  left:110%;
  transition: left .55s ease, opacity .2s ease;
}


/* Bulk import UI */
.mymanzo-upload-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items:end;
}
.mymanzo-upload-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.mymanzo-btn-secondary{
  background:#fff;
}
.mymanzo-import-summary{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.65);
}
.mymanzo-last-import{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.04);
}
@media (max-width: 720px){
  .mymanzo-upload-grid{ grid-template-columns: 1fr; }
  .mymanzo-upload-actions{ width:100%; }
  .mymanzo-upload-actions .mymanzo-btn{ width:100%; justify-content:center; }
}


/* Parent links chips */
.mymanzo-parent-links-inline{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.mymanzo-parent-links-label{
  font-weight:700;
  margin-right:4px;
  display:flex;
  align-items:center;
}
.mymanzo-parent-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.08);
  font-size:13px;
}
.mymanzo-parent-chip-mini{
  font-size:11px;
  opacity:.75;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.05);
}
.mymanzo-btn-danger{
  border-color: rgba(179,45,46,.25);
}

.mymanzo-alert{ padding:10px 12px; border-radius:14px; margin:10px 0; }
.mymanzo-alert-error{ background: rgba(255, 82, 82, .12); border:1px solid rgba(255, 82, 82, .25); }
.mymanzo-alert-success{ background: rgba(0, 200, 150, .10); border:1px solid rgba(0, 200, 150, .22); }

.mymanzo-alert-info{ background: rgba(0, 150, 255, .10); border:1px solid rgba(0, 150, 255, .18); }

.mymanzo-admin-title{ display:flex; align-items:center; gap:10px; }


/* Attendance toggles */
.mymanzo-att-toggle{ display:flex; gap:6px; }
.mymanzo-att-btn{
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.75);
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 800;
  cursor:pointer;
  min-width:44px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.mymanzo-att-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,0.12); }
.mymanzo-att-btn.is-active{ background: rgba(0,0,0,0.08); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15); }
.mymanzo-att-btn.p.is-active{ background: rgba(0, 200, 140, 0.18); }
.mymanzo-att-btn.a.is-active{ background: rgba(255, 90, 90, 0.18); }

/* Exam Schedule */
.mymanzo-exam-table td{ vertical-align: middle; }
.mymanzo-exam-table input[type="date"]{
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.75);
}
.mymanzo-exam-table .mymanzo-btn{ white-space: nowrap; }

/* Attendance Calendar */
.mymanzo-calendar{width:100%;border-collapse:separate;border-spacing:6px;margin-top:6px}
.mymanzo-calendar th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;opacity:.75;text-align:center}
.mymanzo-calendar td{background: rgba(255,255,255,0.7); border:1px solid rgba(0,0,0,0.08); border-radius:14px; min-width:44px; height:54px; vertical-align:top; padding:8px; text-align:left}
.mymanzo-calendar td.is-empty{background: transparent; border:0;}
.mymanzo-calendar td .num{font-weight:900; font-size:13px}
.mymanzo-calendar td .tag{margin-top:6px; display:inline-block; font-weight:800; font-size:11px; padding:2px 8px; border-radius:999px; background: rgba(0,0,0,0.06)}
.mymanzo-calendar td.is-absent{background: rgba(255, 60, 60, 0.14); border-color: rgba(255, 60, 60, 0.22)}
.mymanzo-calendar td.is-absent .tag{background: rgba(255, 60, 60, 0.20)}
.mymanzo-calendar td.is-present{background: rgba(0, 200, 140, 0.10); border-color: rgba(0, 200, 140, 0.18)}
.mymanzo-calendar td.is-present .tag{background: rgba(0, 200, 140, 0.16)}



/* ============================================================
   Admin-wide polish (applies only on MyManzo admin pages)
   ============================================================ */

.mymanzo-admin-page #wpcontent { padding-left: 0; }
.mymanzo-admin-page .wrap { padding: 18px 22px 28px; }
.mymanzo-admin-page .wrap > h1{
  display:flex; align-items:center; gap:12px;
  padding: 18px 18px;
  background: linear-gradient(135deg, rgba(16,199,199,.16), rgba(24,119,242,.10), rgba(246,211,107,.18));
  border:1px solid rgba(11,27,36,.08);
  border-radius: var(--mymanzo-radius);
  box-shadow: var(--mymanzo-shadow);
  margin: 6px 0 16px;
  font-weight: 900;
}
.mymanzo-admin-page .wrap > h1 .dashicons{
  width: 38px; height: 38px; line-height: 38px;
  border-radius: 999px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(16,199,199,.14);
  color: var(--mymanzo-ink);
  box-shadow: 0 8px 18px rgba(11,27,36,.10);
}
.mymanzo-admin-page .wrap h2, .mymanzo-admin-page .wrap h3{
  font-weight: 900;
  color: var(--mymanzo-ink);
}
.mymanzo-admin-page .notice, .mymanzo-admin-page div.updated, .mymanzo-admin-page div.error{
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(11,27,36,.08);
  border-left-width: 6px;
  overflow: hidden;
}
.mymanzo-admin-page .wp-list-table,
.mymanzo-admin-page table.widefat{
  border-radius: var(--mymanzo-radius);
  overflow: hidden;
  border: 1px solid rgba(11,27,36,.10);
  box-shadow: 0 10px 22px rgba(11,27,36,.08);
  background: rgba(255,255,255,.9);
}
.mymanzo-admin-page .wp-list-table th,
.mymanzo-admin-page table.widefat th{
  background: rgba(16,199,199,.10);
  color: var(--mymanzo-ink);
  font-weight: 900;
}
.mymanzo-admin-page .wp-list-table tr:nth-child(even) td,
.mymanzo-admin-page table.widefat tr:nth-child(even) td{
  background: rgba(24,119,242,.035);
}
.mymanzo-admin-page input[type="text"],
.mymanzo-admin-page input[type="number"],
.mymanzo-admin-page input[type="date"],
.mymanzo-admin-page input[type="email"],
.mymanzo-admin-page select,
.mymanzo-admin-page textarea{
  border-radius: 12px;
  border: 1px solid rgba(11,27,36,.14);
  box-shadow: 0 6px 16px rgba(11,27,36,.06);
  padding: 10px 12px;
}
.mymanzo-admin-page input[type="text"]:focus,
.mymanzo-admin-page input[type="number"]:focus,
.mymanzo-admin-page input[type="date"]:focus,
.mymanzo-admin-page input[type="email"]:focus,
.mymanzo-admin-page select:focus,
.mymanzo-admin-page textarea:focus{
  border-color: rgba(16,199,199,.55);
  box-shadow: 0 10px 22px rgba(16,199,199,.18);
  outline: none;
}
.mymanzo-admin-page .button,
.mymanzo-admin-page .button-primary{
  border-radius: 999px !important;
  padding: 7px 14px !important;
  height: auto !important;
  display:inline-flex; align-items:center; gap:8px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.mymanzo-admin-page .button:hover,
.mymanzo-admin-page .button-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(11,27,36,.14);
  filter: saturate(1.05);
}
.mymanzo-admin-page .button .dashicons,
.mymanzo-admin-page .button-primary .dashicons{
  width:auto; height:auto; line-height:1;
  margin-top: 0;
}


/* Learner list chips (Attendance Calendar) */
.mymanzo-learner-grid{display:flex;flex-wrap:wrap;gap:8px;}
.mymanzo-learner-chip{border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:999px;padding:8px 12px;cursor:pointer;display:flex;gap:8px;align-items:center;}
.mymanzo-learner-chip.is-active{box-shadow:0 0 0 3px rgba(0,128,128,.18);}
.mymanzo-learner-name{font-weight:600;}
.mymanzo-learner-adm{opacity:.75;font-size:12px;}

/* === Profile photos + classmates grid === */
.mymanzo-profile-round{
  width:64px;
  height:64px;
  border-radius:999px;
  object-fit:cover;
  background:#f3f3f3;
  border:2px solid rgba(0,0,0,.08);
}
.mymanzo-profile-blank{
  background:linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
}
.mymanzo-portal-greeting{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.mymanzo-greeting-line{ font-weight:700; font-size:1.05rem; }
.mymanzo-classmates-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap:14px;
}
.mymanzo-classmate-card{
  text-align:center;
  padding:8px 6px;
}
.mymanzo-classmate-photo{
  width:76px;
  height:76px;
  margin:0 auto 8px;
}
.mymanzo-classmate-name{
  font-size:.9rem;
  line-height:1.2;
  word-break:break-word;
}
.mymanzo-photo-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999999;
  padding:18px;
}
.mymanzo-photo-modal.is-open{ display:flex; }
.mymanzo-photo-modal-inner{
  background:#fff;
  border-radius:14px;
  padding:14px;
  max-width:92vw;
  max-height:92vh;
  position:relative;
}
#mymanzoPhotoModalImg{
  max-width:85vw;
  max-height:78vh;
  border-radius:14px;
}
.mymanzo-photo-close{
  position:absolute;
  top:8px;
  right:10px;
  border:0;
  background:transparent;
  font-size:28px;
  cursor:pointer;
}
.mymanzo-photo-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.mymanzo-photo-field{ margin:14px 0; }
.mymanzo-photo-label{ font-weight:700; margin-bottom:6px; }


/* Teacher portal quick links icon grid */
.mymanzo-quickgrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:14px;
  margin-top:8px;
}
.mymanzo-quickcard{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none !important;
  background: rgba(255,255,255,.85);
  border: 2px solid rgba(11,27,36,.08);
  border-radius: 18px;
  padding: 14px 12px;
  box-shadow: 0 8px 18px rgba(11,27,36,.08);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.mymanzo-quickcard:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(11,27,36,.12);
  border-color: rgba(16,199,199,.35);
}
.mymanzo-quickimg{
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 18px;
  display:block;
}
.mymanzo-quicklabel{
  margin-top:10px;
  font-weight:800;
  color: var(--mymanzo-ink);
  text-align:center;
  letter-spacing:.2px;
}
@media (max-width: 480px){
  .mymanzo-quickimg{ width: 120px; height: 120px; }
}