/* =====================================================================
   Sailing Accelerator — Front-End Design System
   Mobile-first. Covers: Status Badges · Dashboard · Calendar · Forms
   ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. Design Tokens
 * ------------------------------------------------------------------- */
:root {
    /* Brand */
    --sa-primary:            #1d3557;
    --sa-primary-light:      #2a4a73;
    --sa-primary-soft:       #e7ecf3;
    --sa-accent:             #e76f51;
    --sa-accent-hover:       #cf5d40;

    /* Semantic */
    --sa-success:            #16a34a;
    --sa-success-bg:         #dcfce7;
    --sa-success-border:     #86efac;

    --sa-error:              #dc2626;
    --sa-error-bg:           #fee2e2;
    --sa-error-border:       #fca5a5;

    --sa-warning:            #b45309;
    --sa-warning-bg:         #fef3c7;
    --sa-warning-border:     #fcd34d;

    --sa-info:               #1d4ed8;
    --sa-info-bg:            #dbeafe;
    --sa-info-border:        #93c5fd;

    /* Gray scale */
    --sa-gray-50:            #f8fafc;
    --sa-gray-100:           #f1f5f9;
    --sa-gray-200:           #e2e8f0;
    --sa-gray-300:           #cbd5e1;
    --sa-gray-400:           #94a3b8;
    --sa-gray-500:           #64748b;
    --sa-gray-600:           #475569;
    --sa-gray-700:           #334155;
    --sa-gray-800:           #1e293b;
    --sa-gray-900:           #0f172a;

    /* Calendar colours */
    --sa-cal-trip-bg:        #fef9c3;
    --sa-cal-trip-text:      #78350f;
    --sa-cal-trip-border:    #fcd34d;
    --sa-cal-charter-bg:     #ffe4e6;
    --sa-cal-charter-text:   #9f1239;
    --sa-cal-charter-border: #fda4af;
    --sa-cal-today-bg:       var(--sa-primary);
    --sa-cal-today-text:     #ffffff;

    /* Typography */
    --sa-font:               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sa-font-mono:          "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;

    /* Radius */
    --sa-r-xs:               4px;
    --sa-r-sm:               6px;
    --sa-r-md:               10px;
    --sa-r-lg:               14px;
    --sa-r-xl:               20px;
    --sa-r-pill:             999px;

    /* Shadow */
    --sa-shadow-xs:          0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    --sa-shadow-sm:          0 2px 8px rgba(0, 0, 0, .06), 0 1px 4px rgba(0, 0, 0, .04);
    --sa-shadow-md:          0 4px 16px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .04);
    --sa-shadow-lg:          0 12px 32px rgba(29, 53, 87, .10), 0 4px 12px rgba(0, 0, 0, .04);

    /* Motion */
    --sa-ease:               cubic-bezier(.25, .8, .25, 1);
    --sa-t-fast:             .12s var(--sa-ease);
    --sa-t-main:             .22s var(--sa-ease);
    --sa-t-slow:             .35s var(--sa-ease);
}


/* ---------------------------------------------------------------------
 * 2. Status Badges
 *    SA_Inquiries::get_status_badge() emits:
 *    <span class="sa-status-badge sa-status-badge--{status}">Label</span>
 *    Inline style= is removed — colours live here.
 * ------------------------------------------------------------------- */
.sa-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    padding: .25em .75em;
    border-radius: var(--sa-r-pill);
    font-family: var(--sa-font);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.5;
    transition: box-shadow var(--sa-t-fast);
}

.sa-status-badge--new {
    background: var(--sa-info-bg);
    color: var(--sa-info);
    box-shadow: 0 0 0 1px var(--sa-info-border);
}
.sa-status-badge--viewed {
    background: var(--sa-warning-bg);
    color: var(--sa-warning);
    box-shadow: 0 0 0 1px var(--sa-warning-border);
}
.sa-status-badge--accepted {
    background: var(--sa-success-bg);
    color: var(--sa-success);
    box-shadow: 0 0 0 1px var(--sa-success-border);
}
.sa-status-badge--declined {
    background: var(--sa-error-bg);
    color: var(--sa-error);
    box-shadow: 0 0 0 1px var(--sa-error-border);
}
.sa-status-badge--cancelled {
    background: var(--sa-gray-100);
    color: var(--sa-gray-600);
    box-shadow: 0 0 0 1px var(--sa-gray-300);
}


/* ---------------------------------------------------------------------
 * 3. Notice Boxes  (.sa-notice)
 * ------------------------------------------------------------------- */
.sa-notice {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .85rem 1.1rem;
    border-radius: var(--sa-r-md);
    font-family: var(--sa-font);
    font-size: .9rem;
    line-height: 1.55;
    margin: 1rem 0;
}
.sa-notice--info    { background: var(--sa-info-bg);    color: var(--sa-info);    border-left: 3px solid var(--sa-info);    }
.sa-notice--success { background: var(--sa-success-bg); color: var(--sa-success); border-left: 3px solid var(--sa-success); }
.sa-notice--error   { background: var(--sa-error-bg);   color: var(--sa-error);   border-left: 3px solid var(--sa-error);   }
.sa-notice--warning { background: var(--sa-warning-bg); color: var(--sa-warning); border-left: 3px solid var(--sa-warning); }
.sa-notice a { color: inherit; text-decoration: underline; }


/* ---------------------------------------------------------------------
 * 4. AJAX / Form Message Boxes  (.sa-form-message)
 * ------------------------------------------------------------------- */
.sa-form-message {
    display: none;
    padding: .8rem 1.1rem;
    border-radius: var(--sa-r-md);
    font-family: var(--sa-font);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 1rem;
    animation: sa-slide-in var(--sa-t-main) both;
}
.sa-form-message.is-visible { display: block; }
.sa-form-message--success {
    background: var(--sa-success-bg);
    color: var(--sa-success);
    border: 1px solid var(--sa-success-border);
}
.sa-form-message--error {
    background: var(--sa-error-bg);
    color: var(--sa-error);
    border: 1px solid var(--sa-error-border);
}

@keyframes sa-slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ---------------------------------------------------------------------
 * 5. Action Buttons  (.sa-btn)
 * ------------------------------------------------------------------- */
/* Base default is solid navy — .sa-btn--primary restates it explicitly
   below (it was previously undefined entirely, rendering as a blank
   button on the login/register/profile-save forms), and --accept/
   --decline/--secondary override it with their own hardcoded color further
   down. Hardcoded hex, not var(), and !important — same reasoning as the
   .sa-card__btn fix in frontend.css: this class fights Astra's theme-wide
   `button, .button, .ast-button...` rule on every real <button> element. */
.sa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35em;
    padding: .45rem 1rem;
    border: none !important;
    border-radius: var(--sa-r-sm);
    font-family: var(--sa-font);
    font-size: .8rem;
    font-weight: 700 !important;
    letter-spacing: .01em;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--sa-t-fast), transform var(--sa-t-fast), box-shadow var(--sa-t-fast), opacity var(--sa-t-fast);
    -webkit-tap-highlight-color: transparent;
    background-color: #0a192f !important;
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.sa-btn:hover:not(:disabled) {
    background-color: #1e293b !important;
    color: #ffffff !important;
}
.sa-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}
.sa-btn:not(:disabled):active { transform: scale(.97); }

.sa-btn--primary {
    background-color: #0a192f !important;
    color: #ffffff !important;
}
.sa-btn--primary:not(:disabled):hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
}
.sa-btn--accept {
    background-color: #16a34a !important;
    color: #fff !important;
}
.sa-btn--accept:not(:disabled):hover {
    background-color: #15803d !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, .35);
}
.sa-btn--decline {
    background-color: #dc2626 !important;
    color: #fff !important;
}
.sa-btn--decline:not(:disabled):hover {
    background-color: #b91c1c !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, .35);
}
.sa-btn--secondary {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid var(--sa-gray-200);
}
.sa-btn--secondary:not(:disabled):hover {
    background-color: #e2e8f0 !important;
    color: #334155 !important;
    border-color: var(--sa-gray-300);
}

/* Final-state labels (after action taken) */
.sa-dash-final {
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}
.sa-dash-final--accepted { color: var(--sa-success); }
.sa-dash-final--declined { color: var(--sa-error);   }
.sa-dash-error {
    color: var(--sa-error);
    font-size: .78rem;
    margin-top: .25rem;
}


/* ---------------------------------------------------------------------
 * 6. Dashboard Wrapper
 * ------------------------------------------------------------------- */
.sa-dashboard {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    font-family: var(--sa-font);
    color: var(--sa-gray-800);
    -webkit-font-smoothing: antialiased;
}

.sa-dashboard__title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--sa-primary);
    margin: 1.75rem 0 .75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--sa-gray-200);
    letter-spacing: -.01em;
}
.sa-dashboard__subtitle {
    font-size: .95rem;
    font-weight: 700;
    color: var(--sa-gray-700);
    margin: 1.5rem 0 .5rem;
    letter-spacing: -.005em;
}
.sa-dashboard__empty {
    color: var(--sa-gray-400);
    font-style: italic;
    font-size: .9rem;
    padding: .5rem 0;
}


/* ---------------------------------------------------------------------
 * 7. Organizer Listings
 * ------------------------------------------------------------------- */
.sa-dash-listings {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: .75rem;
}

.sa-dash-listing-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem .9rem;
    padding: .7rem 1rem;
    background: #fff;
    border: 1px solid var(--sa-gray-200);
    border-radius: var(--sa-r-md);
    transition: border-color var(--sa-t-fast), box-shadow var(--sa-t-fast);
}
.sa-dash-listing-row:hover {
    border-color: var(--sa-gray-300);
    box-shadow: var(--sa-shadow-xs);
}

.sa-dash-listing-type {
    flex-shrink: 0;
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--sa-gray-400);
    min-width: 52px;
}
.sa-dash-listing-title {
    flex: 1;
    font-weight: 600;
    color: var(--sa-gray-800);
    text-decoration: none;
    font-size: .9rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sa-dash-listing-title:hover { color: var(--sa-primary); text-decoration: underline; }

.sa-dash-listing-status {
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: var(--sa-r-pill);
    background: var(--sa-info-bg);
    color: var(--sa-info);
}
.sa-dash-listing-status--pending  { background: var(--sa-warning-bg);  color: var(--sa-warning); }
.sa-dash-listing-status--draft    { background: var(--sa-gray-100);     color: var(--sa-gray-500); }
.sa-dash-listing-status--publish  { background: var(--sa-success-bg);   color: var(--sa-success); }

.sa-dash-listing-slots {
    font-size: .72rem;
    font-weight: 600;
    padding: .2rem .6rem;
    background: var(--sa-success-bg);
    color: var(--sa-success);
    border-radius: var(--sa-r-pill);
}

.sa-dash-listing-edit {
    flex-shrink: 0;
    margin-left: auto;
    font-size: .75rem;
    color: var(--sa-primary);
    text-decoration: none;
    font-weight: 600;
    padding: .25rem .6rem;
    border-radius: var(--sa-r-sm);
    transition: background var(--sa-t-fast);
}
.sa-dash-listing-edit:hover { background: var(--sa-primary-soft); }


/* ---------------------------------------------------------------------
 * 8. Inquiry Tables (Desktop ≥ 768px)
 * ------------------------------------------------------------------- */
.sa-dash-inquiry-list {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: 1.25rem;
}

/* Base row — 5 columns (Siuntėjas, Dėl, Col3, Statusas, Veiksmai) */
.sa-dash-inquiry-row {
    display: grid;
    grid-template-columns: 2fr 1.6fr .6fr 1.1fr 1.2fr;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    border: 1px solid var(--sa-gray-200);
    border-radius: var(--sa-r-md);
    background: #fff;
    transition: background var(--sa-t-fast), border-color var(--sa-t-fast);
}
.sa-dash-inquiry-row:not(.sa-dash-inquiry-row--header):hover {
    background: var(--sa-gray-50);
    border-color: var(--sa-gray-300);
}

/* Header row */
.sa-dash-inquiry-row--header {
    background: var(--sa-gray-100);
    border-color: var(--sa-gray-200);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sa-gray-500);
    border-radius: var(--sa-r-md) var(--sa-r-md) 0 0;
    margin-bottom: 0;
}
.sa-dash-inquiry-row--header + .sa-dash-inquiry-row { border-radius: 0; }
.sa-dash-inquiry-list > .sa-dash-inquiry-row:last-child:not(.sa-dash-inquiry-row--header) {
    border-radius: 0 0 var(--sa-r-md) var(--sa-r-md);
}

/* Charter table — swap col3 to 1fr (date, not participant count) */
.sa-dash-inquiry-list--charters .sa-dash-inquiry-row {
    grid-template-columns: 2fr 1.6fr 1fr 1.1fr 1.2fr;
}

/* Member table — 4 columns (no actions) */
.sa-dashboard--member .sa-dash-inquiry-row {
    grid-template-columns: 2fr .55fr 1fr 1.1fr;
}

/* Cell base */
.sa-dash-cell {
    font-size: .875rem;
    color: var(--sa-gray-700);
    overflow: hidden;
    min-width: 0;
}
.sa-dash-cell strong { color: var(--sa-gray-900); }
.sa-dash-cell a { color: var(--sa-primary); text-decoration: none; font-weight: 500; }
.sa-dash-cell a:hover { text-decoration: underline; }

/* Actions cell */
.sa-dash-actions {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Member view — type badges */
.sa-dash-type-badge {
    display: inline-block;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .15em .55em;
    border-radius: var(--sa-r-xs);
    margin-bottom: 3px;
}
.sa-dash-type--trip    { background: var(--sa-info-bg);    color: var(--sa-info);    }
.sa-dash-type--charter { background: #ede9fe;               color: #6d28d9;           }


/* ---------------------------------------------------------------------
 * 9. Dashboard — Mobile Cards  (< 768px)
 * ------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* Hide the header row entirely */
    .sa-dash-inquiry-row--header { display: none !important; }

    /* All row types become a single-column card */
    .sa-dash-inquiry-row,
    .sa-dash-inquiry-list--charters .sa-dash-inquiry-row,
    .sa-dashboard--member .sa-dash-inquiry-row {
        grid-template-columns: 1fr !important;
        gap: 0;
        padding: 0;
        border-radius: var(--sa-r-md);
        overflow: hidden;
    }

    /* Each cell is a flex row with a label prefix via data-label */
    .sa-dash-cell {
        display: flex;
        align-items: flex-start;
        gap: .6rem;
        padding: .55rem .9rem;
        border-bottom: 1px solid var(--sa-gray-100);
        font-size: .85rem;
        min-height: 38px;
    }
    .sa-dash-cell:last-child { border-bottom: none; }

    /* data-label="Siuntėjas" → ::before pseudo label */
    .sa-dash-cell[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        width: 90px;
        font-size: .68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--sa-gray-400);
        padding-top: .1rem;
    }

    /* Actions cell — full row button strip */
    .sa-dash-actions {
        padding: .65rem .9rem;
        gap: .5rem;
    }
    .sa-btn { flex: 1; justify-content: center; }

    /* Listings also stack */
    .sa-dash-listing-row { flex-wrap: wrap; gap: .4rem; }
    .sa-dash-listing-title { min-width: 100%; }
    .sa-dash-listing-edit { margin-left: 0; }
}


/* ---------------------------------------------------------------------
 * 10. Boat Availability Calendar
 * ------------------------------------------------------------------- */
.sa-boat-calendar {
    max-width: 480px;
    margin: 1.5rem auto;
    font-family: var(--sa-font);
    background: #fff;
    border: 1px solid var(--sa-gray-200);
    border-radius: var(--sa-r-lg);
    overflow: hidden;
    box-shadow: var(--sa-shadow-sm);
    transition: opacity var(--sa-t-main);
    -webkit-font-smoothing: antialiased;
}
.sa-boat-calendar--loading {
    opacity: .5;
    pointer-events: none;
}

/* Header bar */
.sa-boat-cal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.1rem;
    background: var(--sa-primary);
    color: #fff;
    user-select: none;
}
.sa-boat-cal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-align: center;
    flex: 1;
}

/* Navigation arrows */
.sa-boat-cal__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--sa-r-sm);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    transition: background var(--sa-t-fast), border-color var(--sa-t-fast), transform var(--sa-t-fast);
    -webkit-tap-highlight-color: transparent;
}
.sa-boat-cal__nav:hover:not(:disabled) {
    background: rgba(255, 255, 255, .28);
    border-color: rgba(255, 255, 255, .4);
    transform: scale(1.08);
}
.sa-boat-cal__nav:active:not(:disabled) { transform: scale(.95); }
.sa-boat-cal__nav:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* 7-column grid */
.sa-boat-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--sa-gray-200);
}

/* Day-of-week header */
.sa-boat-cal__dow {
    background: var(--sa-gray-50);
    padding: .55rem .2rem;
    font-size: .65rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--sa-gray-400);
    user-select: none;
}

/* Day cells — base */
.sa-boat-cal__day {
    background: #fff;
    min-height: 52px;
    padding: .35rem .25rem .25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    cursor: default;
    transition: background var(--sa-t-fast);
    position: relative;
}
.sa-boat-cal__day--empty {
    background: var(--sa-gray-50);
}

/* Day number */
.sa-boat-cal__day-num {
    font-size: .8rem;
    font-weight: 600;
    color: var(--sa-gray-800);
    line-height: 1;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background var(--sa-t-fast), color var(--sa-t-fast);
}

/* Day label (event name, clipped) */
.sa-boat-cal__day-label {
    font-size: .52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0 .15rem;
}

/* Today */
.sa-boat-cal__day--today .sa-boat-cal__day-num {
    background: var(--sa-cal-today-bg);
    color: var(--sa-cal-today-text);
    font-weight: 800;
}

/* Trip booked — soft amber/yellow */
.sa-boat-cal__day--trip {
    background: var(--sa-cal-trip-bg);
    cursor: help;
}
.sa-boat-cal__day--trip .sa-boat-cal__day-num { color: var(--sa-cal-trip-text); }
.sa-boat-cal__day--trip .sa-boat-cal__day-label { color: var(--sa-cal-trip-text); }
.sa-boat-cal__day--trip:hover { background: #fef08a; }

/* Charter booked — soft coral/rose */
.sa-boat-cal__day--charter {
    background: var(--sa-cal-charter-bg);
    cursor: help;
}
.sa-boat-cal__day--charter .sa-boat-cal__day-num { color: var(--sa-cal-charter-text); }
.sa-boat-cal__day--charter .sa-boat-cal__day-label { color: var(--sa-cal-charter-text); }
.sa-boat-cal__day--charter:hover { background: #fecdd3; }

/* Trip explicitly marked "booked" — solid red, clearly unavailable */
.sa-boat-cal__day--booked {
    background: var(--sa-error-bg);
    cursor: help;
}
.sa-boat-cal__day--booked .sa-boat-cal__day-num { color: var(--sa-error); }
.sa-boat-cal__day--booked .sa-boat-cal__day-label { color: var(--sa-error); font-weight: 800; }
.sa-boat-cal__day--booked:hover { background: var(--sa-error-border); }

/* Legend */
.sa-boat-cal__legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    padding: .7rem 1rem;
    background: var(--sa-gray-50);
    border-top: 1px solid var(--sa-gray-200);
    font-size: .72rem;
    color: var(--sa-gray-600);
}
.sa-boat-cal__legend-dot {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: var(--sa-r-xs);
    flex-shrink: 0;
    vertical-align: middle;
}
.sa-boat-cal__legend-dot--trip    { background: var(--sa-cal-trip-bg);    border: 1px solid var(--sa-cal-trip-border);    }
.sa-boat-cal__legend-dot--charter { background: var(--sa-cal-charter-bg); border: 1px solid var(--sa-cal-charter-border); }
.sa-boat-cal__legend-dot--booked  { background: var(--sa-error-bg);       border: 1px solid var(--sa-error-border);       }
.sa-boat-cal__legend-dot--free    { background: #fff;                      border: 1px solid var(--sa-gray-300);           }
.sa-boat-cal__legend-label { font-weight: 600; }

/* Calendar responsive */
@media (max-width: 400px) {
    .sa-boat-cal__day { min-height: 40px; }
    .sa-boat-cal__day-label { display: none; }
    .sa-boat-cal__day-num { font-size: .75rem; }
}


/* ---------------------------------------------------------------------
 * 11. Forms  (.sa-form-wrapper · .sa-form)
 * ------------------------------------------------------------------- */
.sa-form-wrapper {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid var(--sa-gray-200);
    border-radius: var(--sa-r-lg);
    box-shadow: var(--sa-shadow-sm);
    font-family: var(--sa-font);
}

@media (max-width: 600px) {
    .sa-form-wrapper { padding: 1.1rem; border-radius: var(--sa-r-md); }
}

.sa-form-wrapper h3 {
    margin: 0 0 1.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sa-primary);
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--sa-gray-200);
}

.sa-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.sa-form-row {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.sa-form-row label,
.sa-form-row__label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--sa-gray-700);
    display: block;
}
.sa-form-row label .required { color: var(--sa-error); margin-left: 2px; }

/* Input / textarea / select */
.sa-form input[type="text"],
.sa-form input[type="email"],
.sa-form input[type="tel"],
.sa-form input[type="number"],
.sa-form input[type="date"],
.sa-form input[type="url"],
.sa-form input[type="password"],
.sa-form select,
.sa-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .75rem 1rem;                 /* min 12px vertical for touch */
    font-size: .9rem;
    font-family: var(--sa-font);
    color: var(--sa-gray-800);
    background: var(--sa-gray-50);
    border: 1.5px solid var(--sa-gray-300);
    border-radius: var(--sa-r-md);
    outline: none;
    transition: border-color var(--sa-t-fast), background var(--sa-t-fast), box-shadow var(--sa-t-fast);
    -webkit-appearance: none;
    appearance: none;
    min-height: 46px;                     /* comfortable tap target */
}

.sa-form input[type="text"]:focus,
.sa-form input[type="email"]:focus,
.sa-form input[type="tel"]:focus,
.sa-form input[type="number"]:focus,
.sa-form input[type="date"]:focus,
.sa-form input[type="url"]:focus,
.sa-form input[type="password"]:focus,
.sa-form select:focus,
.sa-form textarea:focus {
    border-color: var(--sa-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(29, 53, 87, .12);
}

.sa-form input::placeholder,
.sa-form textarea::placeholder { color: var(--sa-gray-400); }

.sa-form textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.55;
}

/* Custom select arrow */
.sa-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    padding-right: 2.5rem;
}

/* Row group (2 cols on desktop) */
.sa-form-row-group {
    display: flex;
    gap: 1rem;
}
.sa-form-row-half { flex: 1; min-width: 0; }

@media (max-width: 540px) {
    .sa-form-row-group { flex-direction: column; gap: .75rem; }
}

/* Submit button */
.sa-form .sa-form-submit,
.sa-form [type="submit"] {
    align-self: flex-start;
    padding: .8rem 1.75rem;
    font-size: .95rem;
    font-weight: 700;
    background: var(--sa-primary);
    color: #fff;
    border: none;
    border-radius: var(--sa-r-md);
    cursor: pointer;
    min-height: 48px;
    transition: background var(--sa-t-fast), box-shadow var(--sa-t-fast), transform var(--sa-t-fast);
    -webkit-tap-highlight-color: transparent;
}
.sa-form .sa-form-submit:hover,
.sa-form [type="submit"]:hover {
    background: var(--sa-primary-light);
    box-shadow: 0 4px 12px rgba(29, 53, 87, .25);
}
.sa-form .sa-form-submit:active,
.sa-form [type="submit"]:active { transform: scale(.98); }

@media (max-width: 540px) {
    .sa-form .sa-form-submit,
    .sa-form [type="submit"] { align-self: stretch; }
}

/* Hint text below inputs */
.sa-form-hint {
    font-size: .78rem;
    color: var(--sa-gray-500);
    margin-top: -.15rem;
}


/* ---------------------------------------------------------------------
 * 12. Responsive Utilities
 * ------------------------------------------------------------------- */
@media (min-width: 768px) {
    /* Slightly larger dashboard title on wider screens */
    .sa-dashboard__title { font-size: 1.45rem; }

    /* Listing rows have consistent column widths */
    .sa-dash-listing-row { flex-wrap: nowrap; }
}

@media (max-width: 480px) {
    .sa-dashboard { padding-left: .6rem; padding-right: .6rem; }
    .sa-boat-calendar { margin-left: 0; margin-right: 0; border-radius: var(--sa-r-md); }
}