.dashboard-default-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    /* align-items: stretch; */
    /* width: 100%; */
    margin: 1.5rem;
    gap: 1.5rem;
}

.dashboard-default-container-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* height: 100%; */
    padding: 1.5rem;
    gap: 1rem;

    text-align: center;
    background-image: var(--gradient-light);
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
}

@media screen and (max-width: 1200px) {

    /* Change column layout */
    .dashboard-default-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 768px) {

    /* Change column layout to stack */
    .dashboard-default-container {
        grid-template-columns: 1fr;
    }
}









/* ============================
   FORM STYLING
   ============================ */

/* Messages */
.form-container-item p {
    margin: 0.5rem 0;
    text-align: center;
}

.form-container-item p.error {
    color: #ff6b6b;
}

.form-container-item p.info {
    color: #6bffb3;
}

/* Forms */
.form-container-item form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Pins the button/link to the bottom of the card regardless of how much
   room the h1/p text above it takes up, so every card in the same grid
   row lines its button up on the same horizontal line instead of each
   button sitting wherever its own text happens to end (2026-09-21). Only
   has an effect when the card is taller than its own content, i.e. a grid
   row where a sibling card's text is longer - a lone card (e.g. the
   Bug Report form) is unaffected. */
.form-container-item {
    margin-top: auto;
}

/* Labels */
.form-container-item label {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    gap: 0.3rem;
}

/* Inputs */
.form-container-item input {
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius1);
    border: 0.125rem solid var(--border-colour);
    background: var(--background-dark);
    color: white;
    font-size: 1rem;

    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-container-item input:focus {
    outline: none;
    border-color: var(--highlight-colour);
    box-shadow: 0 0 8px var(--glow-colour);
}

/* Buttons (shared). Also applies to any plain <a> inside a
   .form-container-item - e.g. the Donate link below, which just goes
   straight to an external URL and doesn't need a real <form> - so every
   normal link on these dashboard-style pages automatically looks like the
   other buttons, with no extra class needed. */
.form-container-item button,
.form-container-item a {
    display: inline-block;
    padding: 0.7rem 1rem;
    border-radius: var(--radius1);
    border: 0.125rem solid var(--highlight-colour);
    background: var(--gradient-main);
    color: white;
    font-family: var(--font-display);
    font-size: 1.25rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.form-container-item button:hover,
.form-container-item a:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px var(--glow-colour);
}

/* Discord button – slight accent difference */
.form-container-item form[action*="discord"] button {
    background: var(--gradient-accent);
}

/* Divider text */
.form-container-item>p:last-of-type {
    margin-top: 1.5rem;
    opacity: 0.85;
}



/* ============================================================
   QUICK-LINK CARDS - COMPACT VARIANT (members_dashboard.php only)

   Scoped via the extra ".dashboard-quicklinks" class on top of the shared
   ".dashboard-default-container" / ".dashboard-default-container-item"
   classes above, which are also used - unmodified - by
   members_3d_prints.php, members_account.php, members_admin_dashboard.php,
   members_admin_message_form.php and members_bug_report.php. Compound
   selectors here beat both the shared rules above and root.css's global
   "p, li, ul { font-size: 1.15rem; }" rule without needing !important.
   ============================================================ */

.dashboard-default-container.dashboard-quicklinks {
    /* Same width/centring as .member-messages-panel (css/member_messages.css)
       so the quick-link grid lines up with the Announcements panel above it
       instead of spanning the full page width. */
    width: calc(100% - 3rem);
    max-width: 900px;
    grid-template-columns: repeat(4, 1fr);
    margin: 1.5rem auto;
    gap: 1rem;
}

@media screen and (max-width: 700px) {
    .dashboard-default-container.dashboard-quicklinks {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 420px) {
    .dashboard-default-container.dashboard-quicklinks {
        grid-template-columns: 1fr;
    }
}

.dashboard-quicklinks .dashboard-default-container-item {
    padding: 1rem;
    gap: 0.6rem;
}

.dashboard-quicklinks .dashboard-default-container-item h1,
.dashboard-quicklinks .dashboard-default-container-item h2.os-h1 {
    font-size: 1.3rem;
}

.dashboard-quicklinks .dashboard-default-container-item p {
    font-size: 0.9rem;
    margin: 0;
}

.dashboard-quicklinks .form-container-item button,
.dashboard-quicklinks .form-container-item a {
    padding: 0.5rem 0.9rem;
    font-size: 1rem;
}



/* ============================================================
   PANEL CARDS - MODERN VARIANT (Account, Admin Dashboard)

   Opt-in via ".os-panels" on the .dashboard-default-container. Gives the
   old centred cards the Supply Chain panel look: headings as small
   uppercase section titles, left-aligned text, small muted labels over
   full-width 40px fields, standard-size buttons, and content that starts
   at the top of the card instead of floating in the middle.
   ============================================================ */

.dashboard-default-container.os-panels {
    align-items: start;
}

.os-panels > .dashboard-default-container-item {
    align-items: stretch;
    text-align: left;
    gap: 0.85rem;
    padding: 1.15rem 1.3rem;
    border-color: var(--border-colour);
    min-width: 0;
}

.os-panels > .dashboard-default-container-item h1,
.os-panels .form-container-item > h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    color: var(--highlight-colour);
}

.os-panels p,
.os-panels .form-container-item p {
    margin: 0;
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--muted);
}

.os-panels .form-container-item p.error {
    color: #ff6b6b;
}

.os-panels .form-container-item p.info {
    color: #6bffb3;
}

.os-panels .form-container-item {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0;
}

.os-panels .form-container-item form {
    gap: 0.85rem;
}

.os-panels .form-container-item label {
    gap: 0.35rem;
    font-size: var(--label-size);
    font-weight: 600;
    color: var(--muted);
    text-align: left;
}

.os-panels .form-container-item input,
.os-panels .form-container-item select {
    width: 100%;
    box-sizing: border-box;
    height: var(--control-h);
    padding: 0 0.8rem;
    border-width: 1px;
    font-size: 0.95rem;
}

.os-panels .form-container-item button,
.os-panels .form-container-item a {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control-h);
    padding: 0 1.2rem;
    font-size: 1rem;
}

.os-panels .form-container-item button:hover,
.os-panels .form-container-item a:hover {
    transform: none;
}

/* Destructive actions (Delete Account / Delete User) */
.os-panels .form-container-item button.delete-account,
.os-panels .form-container-item button.delete-btn {
    background: linear-gradient(135deg, #4a0000, #8b0000);
    border-color: #ff4444;
}

.os-panels .form-container-item button.delete-account:hover,
.os-panels .form-container-item button.delete-btn:hover {
    box-shadow: 0 0 10px #ff4444;
}

.os-panels .os-panel-warn {
    color: #ffb4b4;
}


/* ---------------- 2026-09-23: "something has changed here" ----------------
   A quiet yellow outline on a dashboard card when that page has something
   this member would want to know about: a competition open for entries or
   voting, one of their own reports moved to In Progress, or unread Supply
   Chain notifications. A card with nothing new is left exactly as it was,
   so the yellow actually means something. Yellow rather than the theme
   colour on purpose - it has to stand out whichever theme is on. */
.dashboard-default-container-item.needs-attention {
    border-color: #f0b429;
    box-shadow: 0 0 12px rgba(240, 180, 41, 0.35);
}

.dashboard-default-container-item.needs-attention h1 {
    color: #f0b429;
}

.dash-flag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    border: 1px solid #f0b429;
    border-radius: 999px;
    background: rgba(240, 180, 41, 0.12);
    color: #f0b429;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}