/* ============================================================
   REUSABLE UI COMPONENTS
   ============================================================ */

/* Cards */
.page-center-container {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}

.page-card {
    width: min(550px, 92%);
    background: linear-gradient( to bottom, #f7fbfe 0%, #f0f7fc 60%, #e8f3fa 100% );
    padding: 2rem 2.5rem;
    border: 3px solid #2F4F4F; /* matches menu bar */
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

@media (min-width: 1800px) {
    .page-card {
        width: min(750px, 92%);
    }
}

.page-title {
    margin-bottom: 1rem;
    font-size: 2rem;
    color: #003366;
}

.page-card p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Links */
.login-link {
    font-weight: bold;
    color: #003366;
    text-decoration: underline;
}

    .login-link:hover {
        color: #0056b3;
    }

/* Icons & buttons */
.cad-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #eef3f8;
    border: 1px solid #bcc7d3;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 11px;
    cursor: pointer;
    color: #003366;
}

    .cad-icon-btn:hover {
        background-color: #d6e2ef;
    }

.cad-action-icon {
    font-size: 20px;
    color: #0056b3;
    cursor: pointer;
}

    .cad-action-icon:hover {
        color: dodgerblue;
    }