/* ==========================================================================
   Tinnitus Therapy Portal — Public Styles
   Redesigned to sit inside the TTT V2 theme.

   NOTES FOR FUTURE EDITS
   - Every class name and id is unchanged from the original stylesheet. Only
     presentation was rewritten. assets/js/public.js toggles .selected, .active,
     .dragover, .has-availability, .no-availability and .disabled — all of those
     are still styled below.
   - Colours live in the token block underneath. Change them there rather than
     hunting through the file.
   ========================================================================== */

:root {
    /* Brand — matched to the TTT V2 theme */
    --ttp-teal:        #005D6C;
    --ttp-teal-deep:   #00434E;
    --ttp-teal-dark:   #002E36;
    --ttp-aqua:        #00A9C4;
    --ttp-mist:        #D2E7EB;
    --ttp-mist-soft:   #EAF4F6;

    /* Neutrals */
    --ttp-ink:         #06272E;
    --ttp-ink-soft:    #3F5C63;
    --ttp-ink-faint:   #6E878D;
    --ttp-paper:       #FBFDFD;
    --ttp-white:       #FFFFFF;
    --ttp-line:        rgba(0, 93, 108, .14);
    --ttp-line-strong: rgba(0, 93, 108, .28);

    /* Status */
    --ttp-ok:          #1F7A5C;
    --ttp-ok-bg:       #E4F4EE;
    --ttp-ok-line:     #A9D9C7;
    --ttp-warn:        #A66300;
    --ttp-warn-bg:     #FDF2E2;
    --ttp-warn-line:   #EFCF9E;
    --ttp-bad:         #B0432C;
    --ttp-bad-bg:      #FBEBE7;
    --ttp-bad-line:    #EFC2B7;

    /* Shape + depth */
    --ttp-r-sm: 10px;
    --ttp-r:    14px;
    --ttp-r-lg: 20px;
    --ttp-shadow-sm: 0 1px 2px rgba(0, 47, 55, .05), 0 4px 14px rgba(0, 47, 55, .05);
    --ttp-shadow:    0 2px 6px rgba(0, 47, 55, .05), 0 14px 38px rgba(0, 47, 55, .09);
    --ttp-shadow-teal: 0 10px 28px rgba(0, 93, 108, .26);

    --ttp-ease: cubic-bezier(.22, .68, .32, 1);
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

.ttp-portal-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
    /* Inherit the theme's typeface rather than forcing a system stack. */
    font-family: inherit;
    color: var(--ttp-ink);
    line-height: 1.6;
}

.ttp-portal-container *,
.ttp-portal-container *::before,
.ttp-portal-container *::after { box-sizing: border-box; }

.ttp-portal-container a { text-decoration: none; }

/* --------------------------------------------------------------------------
   Authentication (login / register / reset)
   -------------------------------------------------------------------------- */

.ttp-auth-wrapper {
    max-width: 520px;
    margin: 0 auto;
    background: var(--ttp-white);
    border: 1px solid var(--ttp-line);
    border-radius: var(--ttp-r-lg);
    box-shadow: var(--ttp-shadow);
    overflow: hidden;
}

.ttp-auth-header {
    position: relative;
    background:
        radial-gradient(120% 140% at 85% 0%, rgba(0, 169, 196, .34) 0%, transparent 60%),
        linear-gradient(160deg, var(--ttp-teal) 0%, var(--ttp-teal-deep) 55%, var(--ttp-teal-dark) 100%);
    color: #fff;
    padding: 36px 26px;
    text-align: center;
}

/* Fine highlight along the top edge */
.ttp-auth-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
}

.ttp-auth-header h1 {
    margin: 0 0 6px 0;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: #fff;
}

.ttp-auth-header p {
    margin: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, .82);
}

.ttp-form-container { padding: 30px 28px; }

.ttp-form-container h2 {
    margin: 0 0 22px 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ttp-teal-deep);
}

/* The theme sets a serif for all headings. That suits the brand moment in the
   auth header, but dense application screens (records, tables, invoices) read
   better in the sans, so headings inside the portal are set explicitly. */
.ttp-portal-container h2,
.ttp-portal-container h3,
.ttp-portal-container h4,
.ttp-portal-container h5,
.ttp-portal-container h6 {
    font-family: var(--ttt-sans, inherit);
    letter-spacing: -.01em;
}

.ttp-auth-header h1 {
    font-family: var(--ttt-display, Georgia, serif);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.ttp-form-group { margin-bottom: 20px; }

.ttp-form-group label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
    color: var(--ttp-teal-deep);
    font-size: 14px;
}

.ttp-form-group input[type="text"],
.ttp-form-group input[type="email"],
.ttp-form-group input[type="password"],
.ttp-form-group input[type="date"],
.ttp-form-group input[type="time"],
.ttp-form-group input[type="number"],
.ttp-form-group input[type="tel"],
.ttp-form-group select,
.ttp-form-group textarea,
.ttp-portal-container .ttp-input,
.ttp-portal-container .ttp-textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ttp-ink);
    background: var(--ttp-white);
    border: 1px solid var(--ttp-line-strong);
    border-radius: var(--ttp-r-sm);
    transition: border-color .18s var(--ttp-ease), box-shadow .18s var(--ttp-ease);
    box-sizing: border-box;
}

.ttp-form-group textarea,
.ttp-portal-container .ttp-textarea { min-height: 130px; resize: vertical; }

.ttp-form-group input:focus,
.ttp-form-group select:focus,
.ttp-form-group textarea:focus,
.ttp-portal-container .ttp-input:focus,
.ttp-portal-container .ttp-textarea:focus {
    outline: none;
    border-color: var(--ttp-aqua);
    box-shadow: 0 0 0 4px rgba(0, 169, 196, .16);
}

.ttp-form-group input::placeholder,
.ttp-form-group textarea::placeholder { color: var(--ttp-ink-faint); opacity: 1; }

.ttp-form-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%233F5C63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 38px;
}

.ttp-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--ttp-ink-soft);
    cursor: pointer;
}

.ttp-checkbox-label input[type="checkbox"],
.ttp-checkbox-label input[type="radio"] {
    margin: 3px 0 0;
    accent-color: var(--ttp-teal);
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.ttp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.ttp-form-actions {
    margin-top: 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ttp-form-footer {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--ttp-line);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.ttp-btn {
    position: relative;
    padding: 12px 24px;
    border: none;
    border-radius: 100px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    transition: transform .3s var(--ttp-ease), box-shadow .3s var(--ttp-ease),
                background .18s var(--ttp-ease), color .18s var(--ttp-ease);
}

.ttp-btn-primary {
    background: var(--ttp-teal);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 47, 55, .12);
}

/* Sheen sweep on hover — matches the theme's buttons */
.ttp-btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .3) 48%, transparent 64%);
    transform: translateX(-120%);
    transition: transform .75s var(--ttp-ease);
}

.ttp-btn-primary:hover::before { transform: translateX(120%); }

.ttp-btn-primary:hover {
    background: var(--ttp-teal-deep);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--ttp-shadow-teal);
}

.ttp-btn-secondary {
    background: transparent;
    color: var(--ttp-teal-deep);
    box-shadow: inset 0 0 0 1.5px var(--ttp-line-strong);
}

.ttp-btn-secondary:hover {
    background: rgba(0, 93, 108, .05);
    color: var(--ttp-teal-deep);
    box-shadow: inset 0 0 0 1.5px var(--ttp-teal);
    transform: translateY(-2px);
}

.ttp-btn-disabled,
.ttp-btn-disabled:hover {
    background: var(--ttp-mist-soft);
    color: var(--ttp-ink-faint);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.ttp-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.ttp-btn:focus-visible,
.ttp-portal-container a:focus-visible,
.ttp-portal-container input:focus-visible,
.ttp-portal-container button:focus-visible {
    outline: 3px solid var(--ttp-aqua);
    outline-offset: 2px;
}

.ttp-link {
    color: var(--ttp-teal);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.ttp-link:hover { color: var(--ttp-aqua); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Dashboard shell
   -------------------------------------------------------------------------- */

.ttp-dashboard {
    display: grid;
    grid-template-columns: 262px 1fr;
    gap: 26px;
    min-height: 500px;
    align-items: start;
}

.ttp-sidebar {
    background: var(--ttp-white);
    border: 1px solid var(--ttp-line);
    border-radius: var(--ttp-r-lg);
    box-shadow: var(--ttp-shadow-sm);
    padding: 22px;
    position: sticky;
    /* Sits clear of the theme's sticky site header. --ttt-header-h comes from
       the theme; the fallback covers the portal being used elsewhere. */
    top: calc(var(--ttt-header-h, 92px) + 24px);
}

.ttp-sidebar-header {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ttp-line);
}

.ttp-sidebar-header h3 {
    margin: 0 0 4px 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ttp-teal-deep);
}

.ttp-sidebar-header p {
    margin: 0;
    font-size: 13px;
    color: var(--ttp-ink-faint);
}

.ttp-nav { list-style: none; padding: 0; margin: 0; }
.ttp-nav li { margin-bottom: 4px; }

.ttp-nav a {
    position: relative;
    display: block;
    padding: 11px 14px;
    color: var(--ttp-ink-soft);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    border-radius: var(--ttp-r-sm);
    transition: background .18s var(--ttp-ease), color .18s var(--ttp-ease),
                padding-left .18s var(--ttp-ease);
}

.ttp-nav a:hover {
    background: var(--ttp-mist-soft);
    color: var(--ttp-teal-deep);
    padding-left: 18px;
}

.ttp-nav a.active {
    background: var(--ttp-teal);
    color: #fff;
    font-weight: 600;
}

.ttp-nav a.active:hover { background: var(--ttp-teal-deep); color: #fff; padding-left: 14px; }

.ttp-logout {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ttp-line);
}

.ttp-content {
    background: var(--ttp-white);
    border: 1px solid var(--ttp-line);
    border-radius: var(--ttp-r-lg);
    box-shadow: var(--ttp-shadow-sm);
    padding: 30px;
    min-width: 0; /* lets wide tables scroll instead of blowing out the grid */
}

.ttp-content h2 {
    margin: 0 0 22px 0;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.2;
    color: var(--ttp-teal-deep);
}

.ttp-content h3 { color: var(--ttp-teal-deep); font-weight: 600; }

.ttp-portal-header,
.ttp-header { margin-bottom: 22px; }

/* --------------------------------------------------------------------------
   Alerts + notices
   -------------------------------------------------------------------------- */

.ttp-alert,
.ttp-notice {
    padding: 15px 18px;
    border-radius: var(--ttp-r);
    margin-bottom: 20px;
    font-size: 14.5px;
}

.ttp-alert-info {
    background: var(--ttp-mist-soft);
    border-left: 3px solid var(--ttp-aqua);
    color: var(--ttp-teal-deep);
}

.ttp-alert-success {
    background: var(--ttp-ok-bg);
    border-left: 3px solid var(--ttp-ok);
    color: var(--ttp-ok);
}

.ttp-alert-warning {
    background: var(--ttp-warn-bg);
    border-left: 3px solid var(--ttp-warn);
    color: var(--ttp-warn);
}

.ttp-alert-error,
.ttp-alert-danger {
    background: var(--ttp-bad-bg);
    border-left: 3px solid var(--ttp-bad);
    color: var(--ttp-bad);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.ttp-card {
    background: var(--ttp-white);
    border: 1px solid var(--ttp-line);
    border-radius: var(--ttp-r);
    padding: 22px;
    margin-bottom: 20px;
    transition: transform .3s var(--ttp-ease), box-shadow .3s var(--ttp-ease),
                border-color .3s var(--ttp-ease);
}

.ttp-card-grid .ttp-card:hover,
.ttp-invoices-grid .ttp-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ttp-shadow);
    border-color: rgba(0, 169, 196, .4);
}

.ttp-card-disabled {
    opacity: .62;
    background: var(--ttp-paper);
    position: relative;
}

.ttp-card-disabled::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0, 93, 108, .03) 10px,
        rgba(0, 93, 108, .03) 20px
    );
    pointer-events: none;
    border-radius: inherit;
}

.ttp-card-header {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ttp-line);
}

.ttp-card-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ttp-teal-deep);
}

.ttp-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.ttp-empty-state {
    text-align: center;
    padding: 46px 20px;
    color: var(--ttp-ink-faint);
}

.ttp-empty-icon { font-size: 40px; margin-bottom: 12px; opacity: .55; }

/* --------------------------------------------------------------------------
   Calendar
   -------------------------------------------------------------------------- */

.ttp-calendar { margin: 20px 0; max-width: 100%; }

.ttp-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 10px;
}

.ttp-calendar-prev,
.ttp-calendar-next {
    background: var(--ttp-white);
    border: 1px solid var(--ttp-line-strong);
    color: var(--ttp-teal-deep);
    padding: 9px 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    border-radius: 100px;
    white-space: nowrap;
    transition: background .18s var(--ttp-ease), border-color .18s var(--ttp-ease),
                color .18s var(--ttp-ease);
}

.ttp-calendar-prev:hover,
.ttp-calendar-next:hover {
    background: var(--ttp-teal);
    border-color: var(--ttp-teal);
    color: #fff;
}

.ttp-calendar-month {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ttp-teal-deep);
    text-align: center;
    flex: 1;
}

.ttp-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    max-width: 440px;
    margin: 0 auto;
}

.ttp-calendar-day-name {
    text-align: center;
    font-weight: 600;
    padding: 6px 2px;
    color: var(--ttp-ink-faint);
    font-size: 11px;
}

.ttp-calendar-day {
    aspect-ratio: 1;
    border: 1px solid var(--ttp-line);
    border-radius: var(--ttp-r-sm);
    padding: 4px 2px;
    text-align: center;
    cursor: pointer;
    transition: background .18s var(--ttp-ease), border-color .18s var(--ttp-ease),
                transform .18s var(--ttp-ease), color .18s var(--ttp-ease);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    min-height: 40px;
    position: relative;
    color: var(--ttp-ink);
}

.ttp-calendar-day:hover:not(.disabled):not(.no-availability) {
    border-color: var(--ttp-teal);
    background: var(--ttp-mist-soft);
    transform: scale(1.07);
}

.ttp-calendar-day.disabled {
    opacity: .32;
    cursor: not-allowed;
    background: var(--ttp-paper);
    color: var(--ttp-ink-faint);
}

.ttp-calendar-day.disabled:hover {
    border-color: var(--ttp-line);
    background: var(--ttp-paper);
    transform: none;
}

/* Availability indicators — the red/green meaning is preserved, just tuned to
   sit comfortably beside the teal palette. */
.ttp-calendar-day.no-availability {
    background: var(--ttp-bad-bg);
    border-color: var(--ttp-bad-line);
    color: var(--ttp-bad);
    cursor: not-allowed;
    opacity: .75;
}

.ttp-calendar-day.no-availability:hover {
    background: var(--ttp-bad-bg);
    border-color: var(--ttp-bad-line);
    transform: none;
}

.ttp-calendar-day.has-availability {
    background: var(--ttp-ok-bg);
    border-color: var(--ttp-ok-line);
    color: var(--ttp-ok);
    font-weight: 600;
}

.ttp-calendar-day.has-availability:hover {
    background: #D3EDE3;
    border-color: var(--ttp-ok);
}

.ttp-calendar-day.selected {
    background: var(--ttp-teal) !important;
    color: #fff !important;
    border-color: var(--ttp-teal) !important;
    font-weight: 700;
    transform: scale(1.09);
    box-shadow: var(--ttp-shadow-teal);
}

.ttp-calendar-day.today {
    border-color: var(--ttp-aqua);
    border-width: 2px;
    font-weight: 700;
}

.ttp-calendar-legend {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 14px;
    padding: 11px;
    background: var(--ttp-paper);
    border: 1px solid var(--ttp-line);
    border-radius: var(--ttp-r-sm);
    font-size: 12px;
    color: var(--ttp-ink-soft);
    flex-wrap: wrap;
    max-width: 440px;
    margin-inline: auto;
}

.ttp-calendar-legend-item { display: flex; align-items: center; gap: 7px; }

.ttp-calendar-legend-box {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1px solid;
}

.ttp-calendar-legend-box.available {
    background: var(--ttp-ok-bg);
    border-color: var(--ttp-ok-line);
}

.ttp-calendar-legend-box.unavailable {
    background: var(--ttp-bad-bg);
    border-color: var(--ttp-bad-line);
}

/* --------------------------------------------------------------------------
   Time slots
   -------------------------------------------------------------------------- */

.ttp-time-slots { margin-bottom: 20px; }

.ttp-time-slots h3 {
    font-size: 17px;
    margin-bottom: 12px;
    color: var(--ttp-teal-deep);
    font-weight: 600;
}

.ttp-time-slots-wrapper {
    background: var(--ttp-paper);
    border: 1px solid var(--ttp-line-strong);
    border-radius: var(--ttp-r);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--ttp-shadow-sm);
}

.ttp-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 9px;
    margin-top: 12px;
}

.ttp-time-slot {
    padding: 12px 8px;
    border: 1px solid var(--ttp-line-strong);
    border-radius: var(--ttp-r-sm);
    background: var(--ttp-white);
    color: var(--ttp-ink);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: background .18s var(--ttp-ease), border-color .18s var(--ttp-ease),
                transform .18s var(--ttp-ease), box-shadow .18s var(--ttp-ease),
                color .18s var(--ttp-ease);
}

.ttp-time-slot:hover {
    border-color: var(--ttp-teal);
    background: var(--ttp-mist-soft);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 93, 108, .14);
}

.ttp-time-slot.selected {
    background: var(--ttp-teal);
    color: #fff;
    border-color: var(--ttp-teal);
    font-weight: 700;
    transform: translateY(-2px);
    box-shadow: var(--ttp-shadow-teal);
}

.ttp-current-time {
    font-size: 13px;
    color: var(--ttp-ink-faint);
}

/* --------------------------------------------------------------------------
   File upload
   -------------------------------------------------------------------------- */

.ttp-file-upload,
.ttp-file-upload-zone {
    border: 2px dashed var(--ttp-line-strong);
    border-radius: var(--ttp-r);
    padding: 34px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s var(--ttp-ease), background .18s var(--ttp-ease);
    background: var(--ttp-paper);
    color: var(--ttp-ink-soft);
}

.ttp-file-upload:hover,
.ttp-file-upload-zone:hover {
    border-color: var(--ttp-teal);
    background: var(--ttp-mist-soft);
}

.ttp-file-upload.dragover {
    border-color: var(--ttp-aqua);
    background: var(--ttp-mist-soft);
    border-style: solid;
    box-shadow: 0 0 0 4px rgba(0, 169, 196, .14);
}

.ttp-file-upload input[type="file"] { display: none; }

.ttp-file-upload #upload-prompt { cursor: pointer; user-select: none; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.ttp-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14.5px;
}

.ttp-table th,
.ttp-table td {
    padding: 13px 12px;
    text-align: left;
    border-bottom: 1px solid var(--ttp-line);
}

.ttp-table th {
    background: var(--ttp-mist-soft);
    font-weight: 600;
    color: var(--ttp-teal-deep);
    font-size: 13px;
}

.ttp-table th:first-child { border-top-left-radius: var(--ttp-r-sm); }
.ttp-table th:last-child  { border-top-right-radius: var(--ttp-r-sm); }

.ttp-table tr:hover { background: var(--ttp-paper); }

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.ttp-badge {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
}

.ttp-badge-pending   { background: var(--ttp-warn-bg);   color: var(--ttp-warn); }
.ttp-badge-accepted  { background: var(--ttp-ok-bg);     color: var(--ttp-ok); }
.ttp-badge-completed { background: var(--ttp-ok-bg);     color: var(--ttp-ok); }
.ttp-badge-rejected  { background: var(--ttp-bad-bg);    color: var(--ttp-bad); }
.ttp-badge-cancelled { background: var(--ttp-bad-bg);    color: var(--ttp-bad); }
.ttp-badge-warning   { background: var(--ttp-warn-bg);   color: var(--ttp-warn); }
.ttp-badge-scheduled { background: var(--ttp-mist-soft); color: var(--ttp-teal); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .ttp-dashboard { grid-template-columns: 1fr; gap: 18px; }
    .ttp-sidebar { position: static; }

    /* On a phone the menu reads better as a horizontal strip than a tall list. */
    .ttp-nav { display: flex; flex-wrap: wrap; gap: 6px; }
    .ttp-nav li { margin-bottom: 0; }
    .ttp-nav a { padding: 9px 14px; font-size: 14px; }
    .ttp-nav a:hover { padding-left: 14px; }
}

@media (max-width: 768px) {
    .ttp-form-row { grid-template-columns: 1fr; }
    .ttp-card-grid { grid-template-columns: 1fr; }

    .ttp-content { padding: 20px 16px; }
    .ttp-form-container { padding: 24px 20px; }
    .ttp-auth-header { padding: 30px 20px; }
    .ttp-auth-header h1 { font-size: 26px; }

    .ttp-calendar-grid { gap: 4px; }
    .ttp-calendar-day { font-size: 13px; min-height: 38px; padding: 4px 2px; }
    .ttp-calendar-day-name { font-size: 11px; padding: 5px 2px; }
    .ttp-calendar-month { font-size: 15px; }
    .ttp-calendar-prev, .ttp-calendar-next { font-size: 12px; padding: 8px 12px; }

    .ttp-slot-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 7px; }
    .ttp-time-slot { padding: 11px 6px; font-size: 13.5px; }

    .ttp-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        font-size: 13.5px;
    }
    .ttp-table th, .ttp-table td { padding: 10px 10px; }

    /* Full-width buttons stack more predictably than a squeezed row. */
    .ttp-form-actions { flex-direction: column-reverse; align-items: stretch; }
    .ttp-form-actions .ttp-btn { width: 100%; }
}

@media (max-width: 480px) {
    .ttp-portal-container { padding: 0; }
    .ttp-calendar-grid { max-width: 100%; gap: 3px; }
    .ttp-calendar-day { font-size: 12.5px; min-height: 36px; }
    .ttp-calendar-day-name { font-size: 10px; }
    .ttp-calendar-legend { font-size: 11px; gap: 12px; }
    .ttp-card { padding: 18px; }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ttp-portal-container *,
    .ttp-portal-container *::before,
    .ttp-portal-container *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
    }

    .ttp-calendar-day:hover:not(.disabled):not(.no-availability),
    .ttp-calendar-day.selected,
    .ttp-time-slot:hover,
    .ttp-time-slot.selected,
    .ttp-btn:hover,
    .ttp-card:hover { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Print — patients often print confirmations and invoices
   -------------------------------------------------------------------------- */

@media print {
    .ttp-sidebar, .ttp-logout, .ttp-btn { display: none !important; }
    .ttp-dashboard { grid-template-columns: 1fr; }
    .ttp-content, .ttp-card { box-shadow: none !important; border-color: #ccc !important; }
}

/* Insurance-funded patients: Invoices & Payments is greyed out. */
.ttp-nav li.ttp-nav-disabled span {
    display: block;
    padding: 11px 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: #a0aec0;
    cursor: not-allowed;
    opacity: .65;
}
@media (max-width: 782px) {
    .ttp-nav li.ttp-nav-disabled span { padding: 9px 14px; font-size: 14px; }
}