@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');

/**
 * Starter Sheet Standalone Styles
 * Optimized for both screen and print
 * Uses design tokens from ttbp-tokens.css
 */

/* ── Update Banner ─────────────────────────────────────────── */
.ttbp_update_banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #2563eb;
    color: #fff;
    text-align: center;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: ttbp-banner-slide 0.3s ease-out;
}

.ttbp_update_banner:hover {
    background: #1d4ed8;
}

.ttbp_update_banner i {
    margin-right: 6px;
}

@keyframes ttbp-banner-slide {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* ── Header ────────────────────────────────────────────────── */
.ttbp-starter-header {
    background: var(--ttbp-white);
    border-bottom: 2px solid var(--ttbp-border);
    padding: var(--ttbp-sp-5) 30px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--ttbp-shadow);
}

.ttbp-starter-header-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ttbp-sp-5);
    flex-wrap: wrap;
}

.ttbp-starter-title h1 {
    margin: 0 0 5px 0;
    font-size: 28px;
    color: var(--ttbp-gray-900);
    font-weight: var(--ttbp-fw-semibold);
}

.ttbp-starter-date-display {
    margin: 0;
    font-size: var(--ttbp-fs-lg);
    color: var(--ttbp-gray-500);
    font-weight: var(--ttbp-fw-normal);
}

.ttbp-starter-controls {
    display: flex;
    gap: var(--ttbp-sp-4);
    align-items: center;
    flex-wrap: wrap;
}

/* ── Date Navigation ───────────────────────────────────────── */
.ttbp-date-nav {
    display: flex;
    gap: var(--ttbp-sp-2);
    align-items: center;
}

.ttbp-date-picker {
    padding: 8px var(--ttbp-input-px);
    border: 1px solid var(--ttbp-border);
    border-radius: var(--ttbp-input-radius);
    font-size: var(--ttbp-fs-base);
    font-family: var(--ttbp-font);
    min-width: 140px;
    text-align: center;
    cursor: pointer;
    background: var(--ttbp-white);
    transition: border-color .15s, box-shadow .15s;
}

.ttbp-date-picker:focus {
    outline: none;
    border-color: var(--ttbp-primary);
    box-shadow: var(--ttbp-input-focus);
}

/* ── Action Buttons ────────────────────────────────────────── */
.ttbp-action-buttons {
    display: flex;
    gap: var(--ttbp-sp-3);
    align-items: center;
}

.ttbp_button_secondary {
    background: var(--ttbp-gray-100);
    color: var(--ttbp-gray-900);
    border: 1px solid var(--ttbp-border);
    border-radius: var(--ttbp-btn-radius);
    padding: 0 var(--ttbp-btn-px);
    height: var(--ttbp-btn-h);
    font-size: var(--ttbp-fs-base);
    font-family: var(--ttbp-font);
    font-weight: var(--ttbp-btn-fw);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.ttbp_button_secondary:hover {
    background: var(--ttbp-gray-200);
    border-color: var(--ttbp-gray-300);
}


/* ── Primary Button ────────────────────────────────────────── */
.ttbp_button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ttbp-white);
    background: var(--ttbp-primary);
    font-size: var(--ttbp-fs-base);
    font-weight: var(--ttbp-fw-semibold);
    border: none;
    padding: 9px var(--ttbp-btn-px);
    border-radius: var(--ttbp-btn-radius);
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    font-family: var(--ttbp-font);
    letter-spacing: 0.01em;
    height: var(--ttbp-btn-h);
    white-space: nowrap;
}

.ttbp_button:hover,
.ttbp_button:focus {
    background: var(--ttbp-primary-hover);
}

.ttbp_button:active {
    opacity: 0.85;
}

/* ── Main Content Area ─────────────────────────────────────── */
.ttbp-starter-content {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px;
}

.ttbp_starter_container {
    background: transparent;
    padding: 0;
}

.ttbp_starter_group {
    background: var(--ttbp-white);
    border-radius: var(--ttbp-radius-xl);
    padding: 10px;
    margin-bottom: 12px;
    box-shadow: var(--ttbp-shadow);
    border-left: 4px solid var(--ttbp-primary);
}

.ttbp_teetime {
    font-size: var(--ttbp-fs-3xl);
    font-weight: 800;
    color: var(--ttbp-primary);
    display: block;
    margin-bottom: var(--ttbp-sp-5);
    padding-bottom: var(--ttbp-sp-3);
    border-bottom: 1px solid var(--ttbp-gray-100);
}

/* ── Booking Card ──────────────────────────────────────────── */
.ttbp_single_booking {
    background: var(--ttbp-white);
    border: 1px solid var(--ttbp-border);
    border-radius: var(--ttbp-radius-lg);
    display: grid;
    grid-template-columns: 2fr 1fr;
    padding: 0;
    margin-bottom: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--ttbp-shadow-sm);
    transition: box-shadow .15s;
}

.ttbp_single_booking:hover {
    box-shadow: var(--ttbp-shadow);
}

.ttbp_single_booking:last-child {
    margin-bottom: 0;
}

.ttbp_booking_section {
    padding: 8px 10px;
}

.ttbp_booking_section:last-child {
    border-right: none;
}

.ttbp_booking_section h3 {
    font-size: var(--ttbp-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ttbp-gray-500);
    margin: 0 0 4px 0;
    font-weight: var(--ttbp-fw-bold);
    display: flex;
    align-items: center;
    gap: var(--ttbp-sp-1);
}

/* ── Card Header (Time + Badges) ──────────────────────────── */
.ttbp_card_header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--ttbp-border);
    background: var(--ttbp-gray-50);
}

.ttbp_card_time {
    font-size: 18px;
    font-weight: 800;
    color: var(--ttbp-primary);
    margin-right: auto;
}

.ttbp_badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--ttbp-radius-sm);
    font-size: 12px;
    font-weight: var(--ttbp-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.ttbp_badge_holes {
    background: var(--ttbp-primary-light);
    color: var(--ttbp-primary);
}

.ttbp_badge_ride {
    background: var(--ttbp-gray-100);
    color: var(--ttbp-gray-700);
}

.ttbp_badge_squeeze {
    background: #fff3cd;
    color: #856404;
}

.ttbp_badge_blocked {
    background: var(--ttbp-gray-200);
    color: var(--ttbp-gray-600);
}

/* ── Phone Icon Toggle ────────────────────────────────────── */
.ttbp_phone_icon {
    cursor: pointer;
    color: var(--ttbp-gray-400);
    font-size: 16px;
    flex-shrink: 0;
    transition: color .15s;
    min-width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ttbp_phone_icon:hover {
    color: var(--ttbp-primary);
}

.ttbp_phone_reveal {
    font-size: var(--ttbp-fs-xs);
    white-space: nowrap;
}

.ttbp_phone_reveal a {
    color: var(--ttbp-primary);
    text-decoration: none;
}

/* ── Blocked Booking Card ─────────────────────────────────── */
.ttbp_blocked_booking {
    border-left: 4px solid var(--ttbp-gray-300);
    opacity: 0.75;
}

.ttbp_blocked_booking .ttbp_card_header {
    background: var(--ttbp-gray-100);
}

/* ── Input Styling ─────────────────────────────────────────── */
.ttbp_input_group {
    margin-bottom: var(--ttbp-sp-3);
}

.ttbp_input_group label {
    display: block;
    font-size: var(--ttbp-fs-xs);
    color: var(--ttbp-gray-400);
    margin-bottom: var(--ttbp-sp-1);
    font-weight: var(--ttbp-fw-semibold);
}

.ttbp_editable {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--ttbp-border);
    border-radius: var(--ttbp-input-radius);
    font-size: 14px;
    font-family: var(--ttbp-font);
    transition: border-color .15s, box-shadow .15s, background .15s;
    background: var(--ttbp-gray-50);
    color: var(--ttbp-gray-700);
}

.ttbp_editable:focus {
    background: var(--ttbp-white);
    border-color: var(--ttbp-primary);
    box-shadow: var(--ttbp-input-focus);
    outline: none;
}

/* ── Row Group for compact selects ─────────────────────────── */
.ttbp_row_group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ttbp-sp-3);
}

/* ── Players Grid ──────────────────────────────────────────── */
.ttbp_players_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.ttbp_player_row {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--ttbp-gray-50);
    padding: 6px 8px;
    border-radius: var(--ttbp-input-radius);
    border: 1px solid var(--ttbp-border);
    transition: border-color .15s;
    min-height: 40px;
}

.ttbp_player_row:hover {
    border-color: var(--ttbp-gray-300);
}

.ttbp_player_row.ttbp_slot_extra {
    opacity: 0.6;
}

.ttbp_player_row input.ttbp_player_name {
    background: transparent;
    border: none;
    padding: 4px 0;
    font-size: 15px;
    font-weight: var(--ttbp-fw-medium);
    font-family: var(--ttbp-font);
    flex: 1;
    min-width: 0;
}

.ttbp_player_row input.ttbp_cart_inline {
    background: transparent;
    border: none;
    border-left: 1px solid var(--ttbp-border);
    padding: 4px 6px;
    font-size: 14px;
    font-family: var(--ttbp-font);
    width: 60px;
    flex-shrink: 0;
    text-align: center;
}

.ttbp_player_row input:focus {
    background: transparent;
    box-shadow: none;
    outline: none;
}

/* ── Payment Toggle ────────────────────────────────────────── */
.ttbp_pay_toggle {
    cursor: pointer;
    font-size: 18px;
    color: var(--ttbp-gray-300);
    transition: color .15s, transform .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 28px;
    min-height: 28px;
}

.ttbp_pay_toggle.paid {
    color: var(--ttbp-success);
}

.ttbp_pay_toggle:hover,
.ttbp_pay_toggle:active {
    transform: scale(1.2);
}

/* ── Players List Section ──────────────────────────────────── */
.ttbp_players_list {
    border-right: 3px solid var(--ttbp-gray-400);
}

/* ── Ops & Tracking Section ────────────────────────────────── */
.ttbp_ops_tracking {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

/* ── Turn Times Grid ───────────────────────────────────────── */
.ttbp_turn_times {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

button.turn_btn {
    padding: 2px 4px;
    height: 30px;
    font-size: 12px;
    flex: 1;
}

/* ── Pace Display ──────────────────────────────────────────── */
.ttbp_pace_display {
    display: flex;
    gap: 4px;
    background: var(--ttbp-gray-100);
    padding: 4px 6px;
    border-radius: var(--ttbp-radius-lg);
    justify-content: space-between;
}

.pace_item {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.pace_item span {
    font-size: 9px;
    color: var(--ttbp-gray-400);
    font-weight: var(--ttbp-fw-bold);
}

.pace_item strong {
    font-size: 13px;
    color: var(--ttbp-gray-900);
}

.pace_item.total strong {
    color: var(--ttbp-primary);
}

/* ── Notes Section ────────────────────────────────────────── */
.ttbp_booking_notes {
    grid-column: 1 / -1;
    background: var(--ttbp-gray-50);
    border-top: 1px solid var(--ttbp-border);
    padding: 6px 10px;
}

.ttbp_booking_notes textarea {
    height: 44px;
    resize: none;
    font-size: 14px;
    padding: 6px 8px;
    line-height: 1.4;
}

/* ── Animated Feedback ─────────────────────────────────────── */
.ttbp_saving {
    opacity: 0.7;
    pointer-events: none;
}

.ttbp_save_success {
    border-color: var(--ttbp-success);
    background: var(--ttbp-primary-light);
}

.ttbp_save_error {
    border-color: var(--ttbp-danger);
    background: var(--ttbp-danger-light);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ttbp_single_booking {
        grid-template-columns: 1fr;
    }

    .ttbp_players_list {
        border-right: none;
        border-bottom: 1px solid var(--ttbp-border);
    }

    .ttbp_players_grid {
        grid-template-columns: 1fr;
    }

}

/* ── Print Styles ──────────────────────────────────────────── */
.ttbp_print_only {
    display: none;
}

@media print {
    @page {
        margin: 1cm;
        size: A4 landscape;
    }

    body {
        background: white;
        font-size: 9pt;
    }

    .ttbp-starter-header,
    .ttbp_starter_container,
    .ttbp-starter-header-content,
    .no-print,
    .ttbp_update_banner {
        display: none;
    }

    .ttbp-starter-content {
        padding: 0;
        max-width: 100%;
    }

    .ttbp_print_only {
        display: block;
    }

    .ttbp_print_only * {
        visibility: visible;
    }

    /* Print Header */
    .ttbp_print_header {
        text-align: center;
        margin-bottom: 12px;
    }

    .ttbp_print_header h1 {
        font-size: 18pt;
        margin: 0;
        color: #000;
    }

    .ttbp_print_header h2 {
        font-size: 12pt;
        margin: 2px 0 0 0;
        color: #444;
        font-weight: normal;
    }

    .ttbp_print_header h3 {
        font-size: 11pt;
        margin: 2px 0 0 0;
        color: #666;
        font-weight: normal;
    }

    /* 3-Column Newspaper Flow */
    .ttbp_print_columns {
        column-count: 3;
        column-gap: 12px;
        column-fill: auto;
    }

    /* Per Tee Time Block */
    .ttbp_print_block {
        break-inside: avoid;
        border: 1px solid #999;
        margin-bottom: 6px;
        font-size: 8pt;
    }

    .ttbp_print_block_blocked {
        opacity: 0.6;
    }

    /* Header Row — 3-column grid matching player rows */
    .ttbp_print_block_header {
        display: grid;
        grid-template-columns: 60px 1fr 60px;
        align-items: center;
        border-bottom: 1px solid #999;
        font-weight: bold;
        font-size: 8pt;
        padding: 2px 4px;
    }

    .ttbp_pb_time {
        font-size: 9pt;
        font-weight: bold;
    }

    .ttbp_pb_block_name {
        font-size: 8pt;
        font-weight: bold;
        color: #000;
        text-align: center;
    }

    .ttbp_pb_info {
        font-size: 7pt;
        font-weight: normal;
        color: #444;
        text-align: right;
        justify-self: end;
        grid-column: 3;
    }

    /* Player Rows — 3 columns: time | name | cart */
    .ttbp_print_player_row {
        display: grid;
        grid-template-columns: 60px 1fr 60px;
        border-top: 1px solid #ccc;
        min-height: 22px;
    }

    .ttbp_print_player_row.ttbp_print_row_alt {
        background: #f5f5f5;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .ttbp_print_player_row span {
        padding: 1px 4px;
        border-right: 1px solid #ddd;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ttbp_print_player_row span:last-child {
        border-right: none;
    }

    .ttbp_time_hint {
        font-size: 7pt;
        font-weight: normal;
        color: #bbb;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .ttbp_pb_time_cell {
        /* Blank for hand-writing times */
    }

    .ttbp_pb_cart_cell {
        text-align: center;
    }

    .ttbp_pb_name_cell {
        font-weight: 500;
    }

    /* Notes Row */
    .ttbp_print_notes_row {
        display: flex;
        align-items: center;
        gap: 4px;
        border-top: 1px solid #ccc;
        padding: 1px 4px;
        min-height: 16px;
    }

    .ttbp_pb_notes_label {
        font-size: 7pt;
        font-weight: bold;
        color: #666;
        flex-shrink: 0;
    }

    .ttbp_pb_notes_line {
        flex: 1;
        border-bottom: 1px solid #ccc;
        min-height: 10px;
    }
}

/* ── Screen Player Meta ────────────────────────────────────── */
.ttbp_player_meta {
    display: flex;
    gap: 4px;
    margin-left: auto;
    align-items: center;
    font-size: 12px;
    flex-shrink: 0;
}

.ttbp_p_amount {
    font-weight: var(--ttbp-fw-semibold);
    color: var(--ttbp-gray-700);
}

.ttbp_p_status {
    padding: 2px 6px;
    border-radius: var(--ttbp-radius-sm);
    background: var(--ttbp-gray-100);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: var(--ttbp-fw-medium);
}

.ttbp_p_status.paid {
    background: #dcfce7;
    color: #16a34a;
    border: 1px solid #86efac;
    font-weight: var(--ttbp-fw-bold);
}

.ttbp_p_status.due {
    background: var(--ttbp-danger-light);
    color: var(--ttbp-danger);
    border: 1px solid #ffd8d8;
}

/* ── Walking Label (online view) ───────────────────────────── */
.ttbp_walk_label {
    border-left: 1px solid var(--ttbp-border);
    padding: 4px 6px;
    font-size: 13px;
    font-style: italic;
    color: var(--ttbp-gray-400);
    width: 60px;
    flex-shrink: 0;
    text-align: center;
}

.ttbp_empty_booking {
    border-style: dashed;
    background: var(--ttbp-gray-50);
}

/* ── Empty Slot ────────────────────────────────────────────── */
.ttbp_empty_slot {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ttbp-gray-50);
    border-style: dashed;
    min-height: 80px;
}

.ttbp_empty_label {
    color: var(--ttbp-gray-400);
    font-weight: var(--ttbp-fw-medium);
    font-style: italic;
    font-size: var(--ttbp-fs-base);
}

/* ── Check-in Toggle ───────────────────────────────────────── */
.ttbp_checkin_toggle {
    cursor: pointer;
    font-size: 18px;
    color: var(--ttbp-gray-300);
    flex-shrink: 0;
    transition: color .15s, transform .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
}

.ttbp_checkin_toggle.checked_in {
    color: #2563eb;
}

.ttbp_checkin_toggle:hover,
.ttbp_checkin_toggle:active {
    transform: scale(1.2);
    color: #3b82f6;
}

/* ── Blocked Event Card (Event/League/Outing — full card with badge) ── */
.ttbp_blocked_event {
    border-left: 4px solid var(--ttbp-gray-300);
}

.ttbp_blocked_event .ttbp_card_header {
    background: var(--ttbp-gray-100);
}

/* ============================================================
   THEME COMPATIBILITY — starter sheet full width
   Many WordPress themes constrain .entry-content/.page-content
   to a narrow max-width. These overrides ensure the starter
   sheet fills the available space inside a shortcode page.
   ============================================================ */
.ttbp_starter_container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ttbp-starter-content {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.ttbp-starter-header {
    width: 100%;
    box-sizing: border-box;
}

/* Common theme wrappers that restrict width — reset for starter sheet */
.entry-content .ttbp_starter_container,
.page-content .ttbp_starter_container,
.wp-block-group .ttbp_starter_container,
.has-global-padding .ttbp_starter_container,
.alignfull .ttbp_starter_container,
.wp-block-group.alignfull .ttbp_starter_container {
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

.entry-content .ttbp-starter-content,
.page-content .ttbp-starter-content,
.wp-block-group .ttbp-starter-content,
.has-global-padding .ttbp-starter-content,
.alignfull .ttbp-starter-content {
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* Mobile: true full width */
@media (max-width: 768px) {
    .ttbp_starter_container,
    .ttbp-starter-content,
    .entry-content .ttbp_starter_container,
    .entry-content .ttbp-starter-content,
    .page-content .ttbp_starter_container,
    .page-content .ttbp-starter-content {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: var(--ttbp-sp-3);
        padding-right: var(--ttbp-sp-3);
    }
}