/* ============================================================
   PWA layer styles - School Management System
   Namespaced (sms-) so nothing here collides with app styles.
   ============================================================ */

/* ---- status pill (top banner, next to the school name) ---- */
@media print {
    .sms-pill,
    .sms-install-btn,
    .sms-queue-btn,
    .sms-toast-wrap,
    .sms-drawer { display: none !important; }
}

.sms-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
    background: #111827;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    transition: background .2s ease;
    cursor: default;
    user-select: none;
    white-space: nowrap;
    line-height: 1.35;
    flex-shrink: 0;
}

/* Inside the school banner (next to the school name) */
.school-banner .sms-pill--in-banner {
    margin-left: 12px;
}

/* Mounted in the header's right control cluster (after dark-toggle + role-tag) */
.header-controls .sms-pill--in-banner {
    margin-left: 6px;
    flex-shrink: 0;
}

/* Mounted directly in the banner (no .banner-left) or the page header:
   push it to the far right of the top bar. */
.school-banner > .sms-pill--in-banner,
.header > .sms-pill--in-banner,
.header-top > .sms-pill--in-banner {
    margin-left: auto;
}

/* No banner/header available (e.g. login page): float top-right, away from
   any bottom-left sidebar logout button. */
.sms-pill--fixed {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 9990;
}

.sms-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .55);
}

.sms-pill--online { background: #14532d; }
.sms-pill--offline { background: #7f1d1d; }
.sms-pill--offline .sms-pill-dot { background: #f87171; }
.sms-pill--checking { background: #111827; }
.sms-pill--checking .sms-pill-dot { background: #9ca3af; animation: sms-pulse 1.1s infinite; }
.sms-pill--syncing { background: #1e40af; }
.sms-pill--syncing .sms-pill-dot { background: #facc15; animation: sms-pulse 1.1s infinite; }

@keyframes sms-pulse {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(1.5); opacity: .55; }
    100% { transform: scale(1);   opacity: 1; }
}

/* ---- toasts (bottom-center) ---- */
.sms-toast-wrap {
    position: fixed;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9991;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    max-width: min(92vw, 460px);
    pointer-events: none;
}

.sms-toast {
    pointer-events: auto;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.45;
    color: #f9fafb;
    background: #1f2937;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    border-left: 4px solid #06b6d4;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    animation: sms-toast-in .25s ease;
    opacity: 1;
    transition: opacity .4s ease;
}

.sms-toast--ok     { border-left-color: #22c55e; }
.sms-toast--warn   { border-left-color: #f59e0b; }
.sms-toast--error  { border-left-color: #ef4444; }

.sms-toast--out { opacity: 0; }

@keyframes sms-toast-in {
    from { transform: translateY(10px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.sms-toast-action {
    margin-left: 8px;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 6px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.sms-toast-action:hover { background: rgba(255, 255, 255, .22); }

/* ---- install button (bottom-right) ---- */
.sms-install-btn {
    position: fixed;
    bottom: 14px;
    right: 14px;
    z-index: 9990;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 999px;
    background: #001f60;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    box-shadow: 0 4px 16px rgba(0, 31, 96, .35);
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

.sms-install-btn:hover { background: #031a65; transform: translateY(-2px); }
.sms-install-btn:active { transform: translateY(0); }

.sms-install-ico {
    font-size: 16px;
    line-height: 1;
    color: #7dd3fc;
}

@media (min-width: 760px) {
    .sms-install-btn { bottom: 18px; right: 18px; }
}

/* ---- offline queue trigger button (above install button) ---- */
.sms-queue-btn {
    position: fixed;
    bottom: 66px;
    right: 14px;
    z-index: 9990;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: none;
    border-radius: 999px;
    background: #f59e0b;
    color: #111827;
    font-size: 13.5px;
    font-weight: 700;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    box-shadow: 0 4px 16px rgba(245, 158, 11, .35);
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

.sms-queue-btn:hover { background: #fbbf24; transform: translateY(-2px); }

.sms-queue-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #7f1d1d;
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
}

@media (min-width: 760px) {
    .sms-queue-btn { bottom: 72px; right: 18px; }
}

/* ---- offline queue drawer ---- */
.sms-drawer {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(94vw, 400px);
    z-index: 9995;
    background: #ffffff;
    color: #111827;
    box-shadow: -6px 0 24px rgba(0, 0, 0, .28);
    display: flex;
    flex-direction: column;
    transform: translateX(102%);
    transition: transform .28s ease;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

.sms-drawer--open { transform: translateX(0); }

.sms-drawer-head {
    padding: 14px 16px;
    background: #001f60;
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sms-drawer-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 8px;
}

.sms-drawer-body { flex: 1; overflow-y: auto; padding: 14px; }

.sms-q-item {
    border: 1px solid #e5e7eb;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #f9fafb;
}

.sms-q-item--done { border-left-color: #22c55e; background: #f0fdf4; }
.sms-q-item--error { border-left-color: #ef4444; background: #fef2f2; }

.sms-q-title { font-weight: 700; font-size: 13.5px; margin-bottom: 2px; }
.sms-q-meta { font-size: 12px; color: #6b7280; word-break: break-word; }
.sms-q-actions { margin-top: 8px; display: flex; gap: 8px; }

.sms-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    background: #001f60;
}

.sms-btn:hover { background: #031a65; }
.sms-btn--ghost { background: #e5e7eb; color: #374151; }
.sms-btn--ghost:hover { background: #d1d5db; }

.sms-drawer-foot {
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}