/*
 * Koiraparkki frontend styles.
 * Namespaced so Gutenberg/React/theme CSS cannot restyle the booking portal.
 */
#kp-booking-app,
#kp-booking-app * {
    box-sizing: border-box;
}

#kp-booking-app {
    all: initial;
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #111111 0%, #303030 100%);
    color: #f1f1f1;
    font-family: Inter, Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

#kp-booking-app::before,
#kp-booking-app::after { box-sizing: border-box; }

#kp-booking-app h2,
#kp-booking-app h3,
#kp-booking-app p,
#kp-booking-app label { margin-top: 0; }

#kp-booking-app h2,
#kp-booking-app h3 { color: #fff; }
#kp-booking-app h2 { margin-bottom: 12px; }
#kp-booking-app h3 { margin-bottom: 12px; }
#kp-booking-app p { color: #ddd; }

#kp-booking-app button,
#kp-booking-app input,
#kp-booking-app select,
#kp-booking-app textarea {
    font: inherit;
}

#kp-booking-app button {
    appearance: none;
    -webkit-appearance: none;
    text-transform: none;
}

#kp-booking-app .kp-view { width: 100%; }
#kp-booking-app .kp-card {
    background: #222;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,.3);
}

#kp-booking-app .kp-form-group { margin-bottom: 15px; }
#kp-booking-app .kp-form-group label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
    font-size: 14px;
    font-weight: 600;
}

#kp-booking-app .kp-form-group input,
#kp-booking-app .kp-form-group select {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px;
    border: 1px solid #555;
    border-radius: 5px;
    background: #000 !important;
    color: #fff !important;
    color-scheme: dark;
    font-size: 16px;
    line-height: 1.4;
}

#kp-booking-app .kp-form-group input:focus,
#kp-booking-app .kp-form-group select:focus {
    outline: 2px solid #888;
    outline-offset: 1px;
    border-color: #aaa;
}

#kp-booking-app .kp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 20px;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background .2s ease, opacity .2s ease, transform .2s ease;
}

#kp-booking-app .kp-btn:hover { transform: translateY(-1px); }
#kp-booking-app .kp-btn:disabled { opacity: .65; cursor: wait; transform: none; }
#kp-booking-app .kp-btn-primary { background: #4a90e2; color: #fff; }
#kp-booking-app .kp-btn-primary:hover { background: #357abd; }
#kp-booking-app .kp-btn-secondary { background: #555; color: #fff; }
#kp-booking-app .kp-btn-secondary:hover { background: #444; }
#kp-booking-app .kp-btn-success { background: #27ae60; color: #fff; }
#kp-booking-app .kp-btn-success:hover { background: #219653; }
#kp-booking-app .kp-btn-danger { background: #e74c3c; color: #fff; }
#kp-booking-app .kp-btn-danger:hover { background: #c0392b; }

#kp-booking-app .kp-error {
    display: block;
    margin-top: 10px;
    color: #ff8b8b;
    font-size: 14px;
}

#kp-booking-app .kp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

#kp-booking-app .kp-header h2 { margin-bottom: 0; }
#kp-booking-app .kp-service-selector { margin-bottom: 20px; }
#kp-booking-app .kp-service-selector > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#kp-booking-app table#kp_bookings_table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 10px;
    color: #eee;
}
#kp-booking-app table#kp_bookings_table th,
#kp-booking-app table#kp_bookings_table td {
    border: 1px solid #444;
    padding: 8px 12px;
    text-align: left;
    vertical-align: middle;
}
#kp-booking-app table#kp_bookings_table th { background: #333; color: #fff; }
#kp-booking-app table#kp_bookings_table td { background: #222; }
#kp-booking-app .kp-booking-actions-cell { white-space: nowrap; }
#kp-booking-app .kp-booking-actions-cell .kp-btn { min-height: 34px; padding: 6px 10px; margin: 2px; font-size: 12px; }

#kp-booking-app .kp-calendar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff !important;
    color: #333 !important;
}

#kp-booking-app .kp-cal-day {
    flex: 1 1 60px;
    min-width: 60px;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}
#kp-booking-app .kp-cal-day strong,
#kp-booking-app .kp-cal-day span { display: block; }
#kp-booking-app .kp-cal-day-green { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
#kp-booking-app .kp-cal-day-red { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
#kp-booking-app .kp-cal-day-target { outline: 2px solid #999; outline-offset: 1px; }
#kp-booking-app .kp-cal-empty { width: 100%; color: #333; }
#kp-booking-app #kp_booking_msg { color: #fff; font-size: 16px; font-weight: 700; }

/* Mobile admin shortcode */
.kp-mobile-admin {
    box-sizing: border-box;
    max-width: 980px;
    margin: 24px auto;
    padding: 16px;
    color: #1f2933;
    font-family: Inter, Roboto, Arial, sans-serif;
}
.kp-mobile-admin *,
.kp-mobile-admin *::before,
.kp-mobile-admin *::after { box-sizing: border-box; }
.kp-mobile-admin__header { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:16px; }
.kp-mobile-admin__header h2,
.kp-mobile-admin-notice h2 { margin:0 0 6px; color:#111827; font-size:26px; line-height:1.2; }
.kp-mobile-admin__header p,
.kp-mobile-admin-notice p { margin:0; color:#5f6b7a; }
.kp-mobile-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:16px 0; }
.kp-mobile-tabs a,
.kp-mobile-button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:8px 12px; border:1px solid #cfd7df; border-radius:6px; background:#fff; color:#1f2933; text-decoration:none; font-size:14px; font-weight:700; line-height:1.2; cursor:pointer; }
.kp-mobile-tabs a.is-active,
.kp-mobile-button-primary { background:#1f6fb2; border-color:#1f6fb2; color:#fff; }
.kp-mobile-panel,
.kp-mobile-admin-notice { background:#f6f8fa; border:1px solid #d9e1e8; border-radius:8px; padding:14px; }
.kp-mobile-filter { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-items:end; margin-bottom:14px; }
.kp-mobile-filter-single { grid-template-columns:minmax(0,1fr) 140px; }
.kp-mobile-filter label span { display:block; margin-bottom:4px; color:#243447; font-size:14px; font-weight:700; }
.kp-mobile-filter select,
.kp-mobile-filter input[type="search"],
.kp-mobile-filter button { width:100%; min-height:42px; }
.kp-mobile-filter select,
.kp-mobile-filter input[type="search"] { border:1px solid #cfd7df; border-radius:6px; background:#fff; color:#1f2933; padding:8px 10px; font-size:16px; }
.kp-mobile-card-list,
.kp-mobile-calendar-list { display:grid; gap:10px; }
.kp-mobile-search-results { display:grid; gap:8px; margin-bottom:14px; }
.kp-mobile-result { display:grid; gap:2px; padding:12px; border:1px solid #d9e1e8; border-radius:8px; background:#fff; color:#1f2933; text-decoration:none; }
.kp-mobile-result:hover,
.kp-mobile-result.is-active { border-color:#1f6fb2; background:#eef6fd; }
.kp-mobile-result strong { color:#111827; font-size:16px; }
.kp-mobile-result span { color:#64748b; font-size:13px; overflow-wrap:anywhere; }
.kp-mobile-selected-dog { margin-top:14px; }
.kp-mobile-card,
.kp-mobile-day,
.kp-mobile-empty { background:#fff; border:1px solid #d9e1e8; border-radius:8px; padding:14px; }
.kp-mobile-card__top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px; }
.kp-mobile-card h3 { margin:0; color:#111827; font-size:18px; line-height:1.25; }
.kp-mobile-card dl,
.kp-mobile-day dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; margin:0; }
.kp-mobile-card dl div,
.kp-mobile-day dl div { min-width:0; }
.kp-mobile-card dt,
.kp-mobile-day dt { color:#64748b; font-size:12px; font-weight:800; margin-bottom:2px; text-transform:uppercase; }
.kp-mobile-card dd,
.kp-mobile-day dd { margin:0; color:#1f2933; overflow-wrap:anywhere; }
.kp-mobile-status,
.kp-mobile-badge,
.kp-mobile-day span { display:inline-flex; align-items:center; border-radius:999px; padding:4px 8px; background:#eef2f6; color:#1f2933; font-size:12px; font-weight:800; text-transform:capitalize; white-space:nowrap; }
.kp-status-confirmed { background:#e9f8ed; color:#137333; }
.kp-status-cancelled { background:#fdecec; color:#b3261e; }
.kp-mobile-month-nav { display:grid; grid-template-columns:90px 1fr 90px; gap:8px; align-items:center; margin:4px 0 14px; text-align:center; }
.kp-mobile-month-nav strong { color:#111827; }
.kp-mobile-day { display:grid; grid-template-columns:minmax(112px,.8fr) 1.2fr; gap:12px; align-items:center; }
.kp-mobile-day > div:first-child { display:grid; gap:6px; }
.kp-mobile-day.is-blocked { border-color:#d63638; background:#fff7f7; }
.kp-mobile-day.is-blocked span { background:#fdecec; color:#b3261e; }

@media (max-width: 782px) {
    #kp-booking-app { margin:20px auto; padding:14px; }
    #kp-booking-app .kp-header { align-items:flex-start; flex-direction:column; }
    #kp-booking-app .kp-card { padding:15px; }
    #kp-booking-app table#kp_bookings_table { display:block; overflow-x:auto; white-space:nowrap; }
    .kp-mobile-admin { margin:0 auto; padding:12px; }
    .kp-mobile-tabs,
    .kp-mobile-filter,
    .kp-mobile-filter-single { grid-template-columns:1fr; }
    .kp-mobile-tabs { position:sticky; top:0; z-index:10; background:#fff; padding:8px 0; }
    .kp-mobile-card dl,
    .kp-mobile-day,
    .kp-mobile-day dl { grid-template-columns:1fr; }
    .kp-mobile-month-nav { grid-template-columns:76px 1fr 76px; }
    .kp-mobile-month-nav .kp-mobile-button { padding-inline:6px; }
}