/* ==========================================
   SIBLINK Teacher PWA — Redesign Stylesheet
   Load AFTER styles.css to override
   ========================================== */

/* ==========================================
   DESIGN SYSTEM — Colors
   ========================================== */
:root {
    --pwa-primary:        #2563EB;
    --pwa-primary-light:  #EFF6FF;
    --pwa-primary-dark:   #1D4ED8;
    --bg-page:            #F8FAFC;
    --bg-card:            #FFFFFF;
    --text-primary:       #1E293B;
    --text-secondary:     #64748B;
    --text-muted:         #94A3B8;
    --pwa-success:        #10B981;
    --pwa-warning:        #F59E0B;
    --pwa-danger:         #EF4444;
    --pwa-border:         #E2E8F0;
    --gradient-blue:      linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
}

/* ==========================================
   BASE OVERRIDES
   ========================================== */
body {
    background: var(--bg-page) !important;
}

.app-shell {
    background: var(--bg-page) !important;
}

.app-content {
    padding: 0 16px 16px !important;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 16px)) !important;
}

/* ==========================================
   TYPOGRAPHY
   ========================================== */
.pwa-page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.pwa-page-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.5;
}

.pwa-section-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--pwa-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pwa-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.pwa-card-desc {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
}

.pwa-card-cta {
    font-size: 14px;
    font-weight: 600;
    color: var(--pwa-primary);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.pwa-card-cta:hover {
    text-decoration: underline;
}

.pwa-stat-number {
    font-size: 36px;
    font-weight: 800;
    color: white;
}

.pwa-stat-label {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,0.8);
}

.pwa-activity-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.pwa-activity-sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

/* ==========================================
   HEADER BAR (.pwa-header)
   ========================================== */
.pwa-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    position: sticky;
    top: 0;
    background: var(--bg-page);
    z-index: 50;
}

.pwa-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pwa-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pwa-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.pwa-header-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pwa-primary);
}

.pwa-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pwa-header-bell {
    position: relative;
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
}

.pwa-header-bell .notif-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pwa-danger);
}

.pwa-header-gear {
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
}

/* Hide old header when redesign is active */
.app-header {
    display: none !important;
}

/* ==========================================
   BOTTOM TAB BAR (.pwa-tab-bar)
   ========================================== */
.pwa-tab-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--pwa-border);
    z-index: 200;
}

.pwa-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    transition: color 0.2s;
}

.pwa-tab.active {
    color: var(--pwa-primary);
}

.pwa-tab .pwa-tab-icon {
    font-size: 22px;
    line-height: 1;
    transition: all 0.2s;
}

.pwa-tab.active .pwa-tab-icon {
    background: var(--pwa-primary);
    color: white;
    border-radius: 12px;
    padding: 6px 16px;
    font-size: 18px;
}

.pwa-tab .pwa-tab-label {
    font-size: 11px;
    font-weight: 500;
}

/* Hide old bottom tabs */
.bottom-tabs {
    display: none !important;
}

/* When sub-page is open, hide tab bar */
.pwa-tab-bar.hidden {
    display: none !important;
}

/* ==========================================
   CARDS
   ========================================== */
.pwa-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    margin-bottom: 16px;
}

.pwa-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ==========================================
   ICON CIRCLE
   ========================================== */
.icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--pwa-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.icon-circle.primary {
    background: var(--pwa-primary);
    color: white;
}

.icon-circle.green {
    background: #D1FAE5;
}

.icon-circle.purple {
    background: #EDE9FE;
}

.icon-circle.yellow {
    background: #FEF3C7;
}

/* ==========================================
   BADGE
   ========================================== */
.pwa-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
}

.pwa-badge.success {
    background: #D1FAE5;
    color: #065F46;
}

.pwa-badge.warning {
    background: #FEF3C7;
    color: #92400E;
}

.pwa-badge.info {
    background: #DBEAFE;
    color: #1E40AF;
}

.pwa-badge.danger {
    background: #FEE2E2;
    color: #991B1B;
}

/* ==========================================
   ACCENT CARD (Gradient Blue)
   ========================================== */
.pwa-accent-card {
    background: var(--gradient-blue);
    border-radius: 20px;
    padding: 24px;
    color: white;
    margin-bottom: 16px;
}

.pwa-accent-card-light {
    background: var(--pwa-primary-light);
    border-radius: 20px;
    padding: 24px;
    color: var(--text-primary);
    margin-bottom: 16px;
}

/* ==========================================
   GRID CARDS (2 columns)
   ========================================== */
.pwa-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.pwa-grid-item {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.pwa-grid-item:active {
    transform: scale(0.97);
}

.pwa-grid-item .icon-circle {
    margin: 0 auto 8px;
}

.pwa-grid-item .pwa-grid-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.pwa-grid-item .pwa-grid-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ==========================================
   DISABLED STATE
   ========================================== */
.pwa-disabled {
    opacity: 0.45;
    pointer-events: none;
    position: relative;
}

.pwa-coming-soon {
    font-size: 10px;
    font-weight: 600;
    color: var(--pwa-primary);
    background: var(--pwa-primary-light);
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
    margin-top: 6px;
}

/* ==========================================
   ACTIVITY LIST
   ========================================== */
.pwa-activity-list {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 4px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    margin-bottom: 16px;
}

.pwa-activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--pwa-border);
}

.pwa-activity-item:last-child {
    border-bottom: none;
}

.pwa-activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--pwa-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.pwa-activity-content {
    flex: 1;
    min-width: 0;
}

.pwa-activity-time {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ==========================================
   SECTION HEADER (with "Lihat Semua")
   ========================================== */
.pwa-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    margin-top: 8px;
}

.pwa-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.pwa-section-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--pwa-primary);
    cursor: pointer;
    background: none;
    border: none;
    text-decoration: none;
}

/* ==========================================
   BUTTONS (redesign overrides)
   ========================================== */
.pwa-btn-primary {
    background: var(--pwa-primary);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.pwa-btn-primary:hover {
    background: var(--pwa-primary-dark);
}

.pwa-btn-outline {
    background: transparent;
    color: var(--pwa-primary);
    border: 1.5px solid var(--pwa-primary);
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.pwa-btn-outline-white {
    background: transparent;
    color: white;
    border: 1.5px solid rgba(255,255,255,0.5);
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.pwa-btn-outline-white:hover {
    background: rgba(255,255,255,0.15);
}

/* ==========================================
   SETTINGS PAGE REDESIGN
   ========================================== */
.pwa-profile-card {
    text-align: center;
    padding: 24px 20px;
}

.pwa-profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--pwa-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 12px;
}

.pwa-profile-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.pwa-profile-role {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.pwa-profile-email {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.pwa-settings-list {
    padding: 0;
}

.pwa-settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--pwa-border);
    cursor: pointer;
}

.pwa-settings-item:last-child {
    border-bottom: none;
}

.pwa-settings-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pwa-settings-item-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.pwa-settings-item-label {
    font-size: 15px;
    color: var(--text-primary);
}

.pwa-settings-item-arrow {
    font-size: 14px;
    color: var(--text-muted);
}

.pwa-logout-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    margin-top: 16px;
    text-align: center;
}

.pwa-logout-btn {
    background: none;
    border: none;
    color: var(--pwa-danger);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    padding: 8px;
}

/* ==========================================
   SUB-PAGE PATTERN
   ========================================== */
.pwa-sub-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    position: sticky;
    top: 0;
    background: var(--bg-page);
    z-index: 50;
}

.pwa-sub-back {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
}

.pwa-sub-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    text-align: center;
}

/* When sub-page is open, hide the main pwa-header */
.beranda-sub-page:not([style*="display:none"]):not([style*="display: none"]) ~ .pwa-redesign-header-spacer {
    display: none;
}

/* ==========================================
   BERANDA TAB REDESIGN
   ========================================== */
.pwa-beranda-greeting {
    padding: 8px 0 16px;
}

.pwa-beranda-date {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Blue underline decoration */
.pwa-title-underline {
    width: 40px;
    height: 3px;
    background: var(--pwa-primary);
    border-radius: 2px;
    margin-top: 8px;
}

/* Avatar circles row */
.pwa-avatar-row {
    display: flex;
    align-items: center;
    gap: -4px;
}

.pwa-avatar-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pwa-primary-light);
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-left: -6px;
}

.pwa-avatar-circle:first-child {
    margin-left: 0;
}

.pwa-avatar-more {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 6px;
}

/* Green dot indicator */
.pwa-green-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pwa-success);
    display: inline-block;
}

/* ==========================================
   FULL-WIDTH CARD WITH ARROW
   ========================================== */
.pwa-card-arrow {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pwa-card-arrow-right {
    font-size: 20px;
    color: var(--text-muted);
    margin-left: auto;
    flex-shrink: 0;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 375px) {
    .pwa-grid-2 {
        gap: 8px;
    }
    .pwa-grid-item {
        padding: 12px;
    }
    .pwa-accent-card {
        padding: 20px;
    }
    .pwa-stat-number {
        font-size: 30px;
    }
}

/* ==========================================
   HIDE OLD TAB SUB-TABS ON REDESIGN VIEWS
   ========================================== */
.pwa-redesign-view .sub-tabs {
    display: none;
}

/* Show sub-tabs only when sub-page is active */
.pwa-redesign-view.pwa-subpage-active .sub-tabs {
    display: flex;
}

/* ==========================================
   TOOLS TAB — Landing/Sub-page Toggle
   ========================================== */
/* When landing view is active: hide sub-tabs, sub-pages, and back btn */
#pageTools.pwa-tools-landing .sub-tabs,
#pageTools.pwa-tools-landing .tools-sub-page,
#pageTools.pwa-tools-landing .pwa-tools-back {
    display: none !important;
}

/* When landing view is NOT active: hide landing view */
#pageTools:not(.pwa-tools-landing) .pwa-landing-view {
    display: none !important;
}

/* ==========================================
   SISWA TAB — Landing/Sub-page Toggle
   ========================================== */
#pageSiswa.pwa-siswa-landing .sub-tabs,
#pageSiswa.pwa-siswa-landing .siswa-sub-page,
#pageSiswa.pwa-siswa-landing .pwa-siswa-back {
    display: none !important;
}

#pageSiswa:not(.pwa-siswa-landing) .pwa-landing-view {
    display: none !important;
}

/* ==========================================
   AKADEMIK TAB — Landing/Sub-page Toggle
   ========================================== */
#pageAkademik.pwa-akademik-landing .sub-tabs,
#pageAkademik.pwa-akademik-landing .sub-tabs-scroll,
#pageAkademik.pwa-akademik-landing .sub-page,
#pageAkademik.pwa-akademik-landing .pwa-akademik-back {
    display: none !important;
}

#pageAkademik:not(.pwa-akademik-landing) .pwa-landing-view {
    display: none !important;
}

/* ==========================================
   SUB-PAGE: Hide tab bar when sub-page open
   ========================================== */
/* When settings page is visible, hide tab bar and header */
#pageSettings.active ~ .pwa-tab-bar,
#pageSettings[style*="display: block"] ~ .pwa-tab-bar,
#pageSettings[style*="display:block"] ~ .pwa-tab-bar {
    display: none !important;
}

/* Beranda sub-page styling */
.beranda-sub-page {
    /* sub-pages get their own back button styling */
}

/* When beranda sub-page is open, main header hides via JS */

/* ==========================================
   TAB SYNC — Active state for new tab bar
   ========================================== */
/* The new tab bar active state is managed by onclick + class toggle.
   We add a small script in-page to keep both tab bars in sync. */