/* ==============================================
   Blesta Portal Custom CSS - 2x2 Card Layout
   ============================================== */

/* ==============================
   Portal Boxes - 2x2 Desktop Layout
   ============================== */
@media (min-width: 768px) {
    body .portal-box.col-md-4 {
        flex: none !important;        /* neutralize Bootstrap flex */
        max-width: none !important;   /* cancel Bootstrap max-width */
        width: 50% !important;        /* force 2 per row */
        margin: 20px 0 0 0;              /* vertical spacing between rows */
    }
}

/* ==============================
   Card Styling - Full Height
   ============================== */
body .portal-box.col-md-4 .card {
    display: flex;                     /* Use flex to stretch height */
    flex-direction: column;
    height: 100%;                      /* Stretch card height to fill container */
}

/* ==============================
   Card Body Styling
   ============================== */
body .portal-box.col-md-4 .card-body {
    flex: 1;                            /* Fill card container */
    display: flex;
    flex-direction: column;
    justify-content: space-between;     /* Push content apart */
}

/* ==============================
   Force row clear
   ============================== */
body .row::after {
    content: "";
    display: table;
    clear: both;
}

/* ==============================
   Optional: Ensure cards align height per row
   ============================== */
@media (min-width: 768px) {
    body .row {
        display: flex;                  /* Flex row */
        flex-wrap: wrap;                /* Wrap to next line after 2 cards */
        align-items: stretch;           /* Stretch cards in the row to same height */
    }
}

@media (max-width: 767px) {
  [class*="col-"] {
    padding: 5px;
  }

}

/* ==============================
   Login page overrides
   Scoped to avoid global changes
   ============================== */
.card.shadow-sm {
    border-radius: 0.5rem;
}

.container-md .display-4 {
    font-weight: 700;
    color: var(--tblr-primary, #206bc4);
}

.container-md .lead {
    color: #6c757d;
}

.card .card-body .form-group label {
    font-weight: 600;
}

.card .btn-primary {
    background-color: var(--tblr-primary, #206bc4);
    border-color: rgba(0,0,0,0.05);
}

/* Hero spacing */
.container-md .display-4 + .lead {
    max-width: 520px;
}

/* Ensure card is vertically centered on larger screens */
@media (min-width: 992px) {
    .min-vh-75 { min-height: 75vh; }
}

/* Minor form polish */
.form-control { box-shadow: none; }
.form-check-label { margin-left: 0.25rem; }