/*
MMD Pupil Diary
PWA styles
Version: 1.2.0
*/

/* -------------------------------------------------------
Install button
------------------------------------------------------- */

.mmd-pwa-install-button {
    position: fixed;
    right: 20px;
    bottom: 96px;
    z-index: 9999;

    background: linear-gradient(135deg,#2563eb,#1e40af);
    color: #fff;

    border: none;
    padding: 13px 20px;
    border-radius: 12px;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(0,0,0,.18),
        0 4px 10px rgba(37,99,235,.25);

    transition: all .2s ease;
}

.mmd-pwa-install-button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 30px rgba(0,0,0,.22),
        0 6px 14px rgba(37,99,235,.35);
}

.mmd-pwa-install-button:active {
    transform: translateY(0);
}


/* -------------------------------------------------------
Shared card style
------------------------------------------------------- */

.mmd-pwa-ios-hint__inner,
.mmd-pwa-push-box__inner {

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    background: rgba(255,255,255,.96);

    border-radius: 16px;

    border: 1px solid rgba(15,23,42,.08);

    box-shadow:
        0 15px 40px rgba(0,0,0,.15),
        0 4px 10px rgba(0,0,0,.05);

    padding: 16px 18px;
}


/* -------------------------------------------------------
iOS install banner
------------------------------------------------------- */

.mmd-pwa-ios-hint {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 96px;
    z-index: 9998;
}

.mmd-pwa-ios-hint__inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mmd-pwa-ios-hint__text strong {
    font-size: 16px;
}

.mmd-pwa-ios-hint__text span {
    font-size: 14px;
    color: #475569;
}

.mmd-pwa-ios-hint__steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #334155;
}

.mmd-pwa-ios-hint__step {
    display: flex;
    gap: 8px;
}

.mmd-pwa-ios-hint__step-no {
    width: 20px;
    height: 20px;
    border-radius: 50%;

    background: #2563eb;
    color: #fff;

    font-size: 12px;
    font-weight: 600;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.mmd-pwa-ios-hint__actions {
    margin-top: 6px;
}

.mmd-pwa-ios-hint__dismiss {
    background: #0f172a;
    color: #fff;

    border: none;
    border-radius: 10px;

    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.mmd-pwa-ios-hint__close {
    position: absolute;
    top: 8px;
    right: 10px;

    background: transparent;
    border: none;

    font-size: 22px;
    color: #64748b;
    cursor: pointer;
}

/* ======================================================
   Premium Push Notification Banner
   ====================================================== */

.mmd-pwa-push-box{
  position:fixed;
  left:12px;
  right:12px;
  bottom:20px;
  z-index:9998;

  display:flex;
  justify-content:center;
  pointer-events:none;
}

.mmd-pwa-push-box__inner{

  pointer-events:auto;

  max-width:640px;
  width:100%;

  display:flex;
  align-items:center;
  gap:16px;

  padding:18px 18px;

  border-radius:20px;

  background:rgba(255,255,255,.96);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  border:1px solid rgba(0,0,0,.08);

  box-shadow:
    0 18px 50px rgba(0,0,0,.22),
    0 6px 18px rgba(0,0,0,.08);

  animation:mmdPushSlide .35s ease;
}

.mmd-pwa-push-box__icon{

  width:44px;
  height:44px;

  border-radius:12px;

  background:#0f172a;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  color:#fff;
  font-size:20px;
}

.mmd-pwa-push-box__text{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.mmd-pwa-push-box__text strong{
  font-size:15px;
  font-weight:700;
}

.mmd-pwa-push-box__text span{
  font-size:13px;
  opacity:.75;
}

.mmd-pwa-push-box__actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.mmd-pwa-push-button{

  border-radius:12px;
  border:none;

  padding:11px 16px;

  font-size:14px;
  font-weight:600;

  cursor:pointer;

  background:#0f172a;
  color:#fff;

  transition:all .15s ease;
}

.mmd-pwa-push-button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.mmd-pwa-push-dismiss{
  font-size:13px;
  color:#64748b;
  background:transparent;
  border:none;
  cursor:pointer;
}

.mmd-pwa-push-dismiss:hover{
  color:#0f172a;
}


/* Slide animation */

@keyframes mmdPushSlide{
  from{
    transform:translateY(20px);
    opacity:0;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}


/* ======================================================
   Mobile layout
   ====================================================== */

@media (max-width:640px){

  .mmd-pwa-push-box{
    left:10px;
    right:10px;
    bottom:16px;
  }

  .mmd-pwa-push-box__inner{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:16px;
  }

  .mmd-pwa-push-box__actions{
    width:100%;
  }

  .mmd-pwa-push-button{
    width:100%;
  }

}

/* -------------------------------------------------------
Push buttons
------------------------------------------------------- */

.mmd-pwa-push-button {

    border-radius: 10px;
    border: none;

    padding: 10px 14px;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    background: linear-gradient(135deg,#0f172a,#1e293b);
    color: #fff;

    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

.mmd-pwa-push-button.is-enabled {
    background: linear-gradient(135deg,#16a34a,#15803d);
}

.mmd-pwa-push-button.is-disabled {
    background: #94a3b8;
}

.mmd-pwa-push-dismiss {

    background: transparent;
    border: none;

    font-size: 13px;
    color: #64748b;

    cursor: pointer;
}

.mmd-pwa-push-dismiss:hover {
    color: #0f172a;
}


/* -------------------------------------------------------
Responsive tweaks
------------------------------------------------------- */

@media (max-width: 767px) {

    .mmd-pwa-install-button {
        left: 16px;
        right: 16px;
        bottom: 110px;
        width: auto;
        text-align: center;
    }

    .mmd-pwa-ios-hint {
        bottom: 110px;
    }

    .mmd-pwa-push-box {
        bottom: 200px;
    }

    .mmd-pwa-push-box__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .mmd-pwa-push-button {
        width: 100%;
    }

}

@media (min-width: 768px) {

    .mmd-pwa-ios-hint {
        left: auto;
        right: 20px;
        bottom: 20px;
        width: 360px;
    }

    .mmd-pwa-install-button {
        right: 20px;
        bottom: 20px;
    }

    .mmd-pwa-push-box {
        left: auto;
        right: 20px;
        bottom: 90px;
        width: 420px;
    }

}

/* ======================================================
Portal Home – Premium header
====================================================== */

.mmd-pd-home .mmd-pd__page-title{
  font-size:28px;
  font-weight:750;
  letter-spacing:-0.02em;
  line-height:1.15;
}

.mmd-pd-home .mmd-pd__subtitle{
  font-size:14px;
  opacity:.7;
}

.mmd-pd-home .mmd-pd-muted{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.55;
}

/* reduce padding on welcome card */

.mmd-pd-home .mmd-pd-card:first-child{
  padding:18px 18px !important;
}

/* tighten spacing */

.mmd-pd-home .mmd-pd-card{
  border-radius:16px;
}

/* nicer stat cards */

.mmd-pd-home .mmd-pd-card__title{
  font-size:13px;
  font-weight:600;
  opacity:.7;
}

.mmd-pd-home .mmd-pd-card strong{
  font-weight:750;
}

/* ======================================================
Premium dashboard stat cards
====================================================== */

.mmd-pd-home .mmd-pd-card{

  position:relative;

  border-radius:18px;

  padding:18px 18px;

  border:1px solid rgba(0,0,0,.06);

  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85));

  box-shadow:
    0 6px 18px rgba(0,0,0,.06);

  transition:all .18s ease;
}

.mmd-pd-home .mmd-pd-card:hover{
  transform:translateY(-2px);
  box-shadow:
    0 14px 30px rgba(0,0,0,.10);
}

/* stat titles */

.mmd-pd-home .mmd-pd-card__title{

  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.65;
  margin-bottom:4px;
}

/* stat numbers */

.mmd-pd-home .mmd-pd-card strong,
.mmd-pd-home .mmd-pd-card div[style*="font-size:24px"]{

  font-size:26px !important;
  font-weight:750;
  letter-spacing:-0.02em;
}

/* stat meta text */

.mmd-pd-home .mmd-pd-card__muted{
  font-size:13px;
  opacity:.7;
}

/* subtle highlight stripe */

.mmd-pd-home .mmd-pd-card:before{

  content:"";

  position:absolute;
  left:0;
  top:0;
  bottom:0;

  width:4px;

  border-radius:18px 0 0 18px;

  background:linear-gradient(
    180deg,
    rgba(59,130,246,.9),
    rgba(37,99,235,.6)
  );
}