/* ─── Page Cards ─────────────────────────────────────────────────────────────
   Shared layout for primary content cards with border-radius: 20px.
   Combine .page-card with a size modifier on the same element.
   ──────────────────────────────────────────────────────────────────────────── */

.page-card {
    border-radius: 20px;
}

/* login */
.page-card-xs {
    max-width: 400px;
    padding: 30px;
}

/* home */
.page-card-sm {
    max-width: 600px;
    padding: 40px;
}

/* export_success, generate_doc */
.page-card-md {
    max-width: 700px;
    padding: 40px;
}

/* admin dashboard */
.page-card-lg {
    max-width: 900px;
    padding: 32px;
}

/* manage_emails */
.page-card-xl {
    max-width: 1000px;
    padding: 32px;
}

/* manage_shipped_to, manage_sold_to */
.page-card-2xl {
    max-width: 1100px;
    padding: 35px;
}


/* ─── Admin Cards ─────────────────────────────────────────────────────────────
   Shared layout for admin list/table cards.
   Combine .admin-card with a size modifier on the same element.
   ──────────────────────────────────────────────────────────────────────────── */

.admin-card {
    border-radius: 18px;
    padding: 20px;
    font-size: 0.9rem;
}

/* vendors_upload */
.admin-card-sm {
    max-width: 720px;
}

/* vendors */
.admin-card-lg {
    max-width: 1100px;
}

/* items */
.admin-card-xl {
    max-width: 1200px;
}


/* ─── Form / Container Width Caps ────────────────────────────────────────────
   Max-width constraints on container elements (not cards).
   ──────────────────────────────────────────────────────────────────────────── */

/* vendor_add, vendor_edit */
.form-card {
    max-width: 520px;
}


/* ─── Nested Section Card ────────────────────────────────────────────────────
   Inner informational card with a softer radius (used with .bg-light).
   ──────────────────────────────────────────────────────────────────────────── */

.inner-card {
    border-radius: 16px;
}


/* ─── File Input Width Constraint ────────────────────────────────────────────
   Prevents file inputs from stretching full-width in flex containers.
   ──────────────────────────────────────────────────────────────────────────── */

.file-input-constrained {
    max-width: 320px;
}


/* ─── QR Code Image ──────────────────────────────────────────────────────────
   Fixed size for QR code display in 2FA setup.
   ──────────────────────────────────────────────────────────────────────────── */

.qr-code-img {
    width: 200px;
    height: 200px;
}


/* ─── Textarea Heights ───────────────────────────────────────────────────────
   Explicit heights for specific textarea inputs.
   ──────────────────────────────────────────────────────────────────────────── */

/* pickup_address in logistics partial */
.textarea-address {
    height: 100px;
}

/* notes in notes partial */
.textarea-notes {
    height: 80px;
}


/* ─── Clickable Sections ─────────────────────────────────────────────────────
   Applies pointer cursor to collapsible section headers.
   ──────────────────────────────────────────────────────────────────────────── */

.clickable {
    cursor: pointer;
}


/* ─── Address Table Cell ─────────────────────────────────────────────────────
   Constrains address column width in data tables.
   ──────────────────────────────────────────────────────────────────────────── */

.td-address {
    max-width: 300px;
}