/* Legacy page compatibility for sub-pages (jadwal, profile, dosen, etc.) */
.card-style {
    background: var(--sc-surface, #fff);
    border-radius: var(--sc-radius, 16px);
    margin: 12px 16px;
    box-shadow: var(--sc-shadow, 0 2px 12px rgba(0,0,0,0.06));
    border: 1px solid var(--sc-border, #E8ECF0);
    overflow: hidden;
}

.card-style .content,
.card-style > .d-flex.content {
    padding: 16px 20px;
}

.menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 10px;
}

.menu-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--sc-text-muted, #6B7280);
    letter-spacing: 0.5px;
}

#page .content {
    padding: 16px 20px;
}

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--sc-primary, #00875A);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    max-width: 480px;
    margin: 0 auto;
}

.header-title {
    flex: 1;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
}

.header-icon {
    color: #fff;
    font-size: 18px;
    width: 36px;
}

.page-content {
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: calc(var(--sc-nav-height, 68px) + 16px);
}

.header-clear-medium {
    padding-top: 8px;
}

.font-700 { font-weight: 700; }
.font-38 { font-size: 28px; }
.font-12 { font-size: 12px; }
.opacity-50 { opacity: 0.5; }
.mb-n1 { margin-bottom: -4px; }

.bg-highlight { background: var(--sc-primary, #00875A) !important; }
.color-highlight { color: var(--sc-primary, #00875A) !important; }
.color-white { color: #fff !important; }

.rounded-circle { border-radius: 50% !important; }
.shadow-xl { box-shadow: var(--sc-shadow-lg); }

.text-primary { color: var(--sc-primary, #00875A) !important; }

#page {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--sc-bg, #F4F6F9);
}