/* ================================================================
 * HORIZON THEME — style.css (halaman Login / index.php)
 * Menimpa gaya lama; semua token warna mengikuti horizon.css
 * ================================================================ */

/* Komponen dasar sudah di-handle horizon.css via school_layout_styles().
   Di sini kita hanya mendefinisikan komponen KHUSUS index.php. */

/* ── Brand header (di luar card) ──────────────────────────── */
.brand-header {
    text-align   : center;
    margin-bottom: 20px;
}
.brand-header h1 {
    font-size  : 24px;
    color      : #fff;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 5px;
    text-shadow: 0 2px 10px rgba(15,23,42,.4);
}
.brand-header p {
    font-size: 14px;
    color    : rgba(255,255,255,.8);
}
.brand-icon {
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 16px rgba(99,102,241,.35));
}

/* ── Form label di halaman login ───────────────────────────── */
.form-label {
    display    : block;
    font-size  : 13px;
    font-weight: 600;
    color      : #4f46e5;
    margin-bottom: 7px;
    margin-left : 2px;
    font-family : Inter, ui-sans-serif, system-ui, sans-serif;
}

/* ── Status boxes ──────────────────────────────────────────── */
.status-box {
    padding      : 11px 15px;
    border-radius: 10px;
    font-size    : 13.5px;
    margin-top   : 16px;
    display      : flex;
    align-items  : center;
    gap          : 10px;
    line-height  : 1.45;
    font-family  : Inter, ui-sans-serif, system-ui, sans-serif;
}
.status-error   { background: #fef2f2; color: #991b1b; border: 1.5px solid #fca5a5; }
.status-success { background: #ecfdf5; color: #065f46; border: 1.5px solid #6ee7b7; }
.status-warning { background: #fffbeb; color: #92400e; border: 1.5px solid #fcd34d; }

/* ── Tombol Login ──────────────────────────────────────────── */
/* Sudah di horizon.css, ini override ukuran huruf agar display lebih tebal */
.btn-login {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .03em;
}

.btn-login:disabled {
    background   : #94a3b8 !important;
    box-shadow   : none !important;
    cursor       : not-allowed;
    transform    : none !important;
    filter       : none !important;
}

/* ── Tombol Trial ──────────────────────────────────────────── */
.btn-trial {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 100%;
    padding         : 12px;
    margin-top      : 10px;
    background-color: rgba(99,102,241,.07);
    color           : #4338ca;
    border          : 1.5px solid #c7d2fe;
    border-radius   : 12px;
    font-size       : 14px;
    font-weight     : 600;
    cursor          : pointer;
    transition      : all .22s ease;
    font-family     : 'Fredoka', sans-serif;
}
.btn-trial:hover {
    background-color: rgba(99,102,241,.13);
    border-color    : #a5b4fc;
    color           : #3730a3;
    transform       : translateY(-1px);
    box-shadow      : 0 4px 12px rgba(99,102,241,.15);
}
.btn-trial:active {
    transform : translateY(0);
    box-shadow: none;
}
.btn-trial:disabled {
    opacity   : 0.55;
    cursor    : not-allowed;
    transform : none;
    box-shadow: none;
}
.btn-trial i {
    margin-right: 7px;
    font-size   : 1.15rem;
    color       : #6366f1;
}

/* ── Quick Menu Grid ───────────────────────────────────────── */
.quick-menu {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : 10px;
    margin-top           : 24px;
    padding-top          : 18px;
    border-top           : 1px solid #e0e7ff;
}

.menu-item {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    text-decoration: none;
    color          : #6366f1;
    transition     : all .25s;
}
.menu-item:hover {
    color    : #4f46e5;
    transform: translateY(-3px);
}

.menu-icon-box {
    width          : 44px;
    height         : 44px;
    background     : #eef2ff;
    border-radius  : 12px;
    display        : flex;
    justify-content: center;
    align-items    : center;
    font-size      : 19px;
    margin-bottom  : 7px;
    transition     : all .25s;
    color          : #6366f1;
    border         : 1px solid #c7d2fe;
}
.menu-item:hover .menu-icon-box {
    background  : #e0e7ff;
    border-color: #a5b4fc;
    box-shadow  : 0 4px 12px rgba(99,102,241,.2);
}

.menu-text {
    font-size  : 10.5px;
    font-weight: 600;
    text-align : center;
    line-height: 1.25;
    color      : #4338ca;
}

/* ── App Footer ────────────────────────────────────────────── */
.app-footer {
    margin-top : 24px;
    text-align : center;
    font-size  : 12px;
    color      : #94a3b8;
    border-top : 1px solid #e0e7ff;
    padding-top: 14px;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.app-footer a {
    color         : #6366f1;
    text-decoration: none;
    font-weight   : 600;
}
.app-footer a:hover { text-decoration: underline; }

/* ── Modal popup ───────────────────────────────────────────── */
.pin-modal-overlay {
    position  : fixed;
    inset     : 0;
    background: rgba(15,23,42,.7);
    backdrop-filter: blur(5px);
    display   : flex;
    justify-content: center;
    align-items: center;
    z-index   : 9999;
    opacity   : 0;
    visibility: hidden;
    transition: all .3s ease;
}
.pin-modal-overlay.show {
    opacity   : 1;
    visibility: visible;
}
.pin-modal-box {
    background   : #fff;
    width        : 90%;
    max-width    : 390px;
    padding      : 30px 28px;
    border-radius: 20px;
    text-align   : center;
    box-shadow   : 0 24px 60px rgba(15,23,42,.25);
    transform    : scale(.9);
    transition   : transform .3s cubic-bezier(.22,1,.36,1);
}
.pin-modal-overlay.show .pin-modal-box { transform: scale(1); }

.modal-btn {
    display      : block;
    width        : 100%;
    padding      : 13px;
    margin-top   : 10px;
    border-radius: 11px;
    text-decoration: none;
    font-weight  : 700;
    font-family  : 'Fredoka', sans-serif;
    font-size    : 15px;
    border       : none;
    cursor       : pointer;
    transition   : all .22s ease;
}
.btn-primary  { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: #fff; box-shadow: 0 6px 18px rgba(99,102,241,.35); }
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-secondary { background: #f1f5f9; color: #475569; }
.btn-secondary:hover { background: #e2e8f0; }
.btn-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; }
.btn-danger   { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #fff; }

/* ── Network warning ───────────────────────────────────────── */
.network-warning-box { text-align: center; padding: 28px 20px; }
.network-icon {
    font-size    : 56px;
    color        : #ef4444;
    margin-bottom: 18px;
    animation    : pulse-red 2s infinite;
}
.network-title { font-size: 22px; color: #1e1b4b; margin-bottom: 14px; font-weight: 700; }
.network-desc  { color: #475569; font-size: 15px; line-height: 1.65; margin-bottom: 22px; }
@keyframes pulse-red {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.08); opacity: .8; }
}