#onu-booking-dashboard{
    padding:16px;
    max-width:760px;
    margin:auto;
}

/*
|--------------------------------------------------------------------------
| LOADING
|--------------------------------------------------------------------------
*/

.onu-loading-shell,
.onu-error-shell{
    padding:40px 0;
}

.onu-loading-card,
.onu-error-card{
    background:white;
    border-radius:28px;
    padding:24px;
    text-align:center;
    border:1px solid #e2e8f0;
    box-shadow:
        0 10px 30px rgba(15,23,42,.06);
}

.onu-error-title{
    font-size:18px;
    font-weight:700;
    margin-bottom:8px;
}

.onu-error-message{
    color:#64748b;
}

/*
|--------------------------------------------------------------------------
| SHELL
|--------------------------------------------------------------------------
*/

.onu-mobile-ops{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.onu-mobile-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.onu-mobile-kicker{
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    color:#0ea5e9;
    letter-spacing:.08em;
    margin-bottom:4px;
}

.onu-mobile-title{
    font-size:28px;
    font-weight:800;
    color:#0f172a;
}

.onu-live-pill{
    background:#082f49;
    color:#7dd3fc;
    border-radius:999px;
    padding:10px 14px;
    font-size:12px;
    font-weight:700;
}

/*
|--------------------------------------------------------------------------
| KPI STRIP
|--------------------------------------------------------------------------
*/

.onu-kpi-strip{
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding-bottom:4px;
    scrollbar-width:none;
}

.onu-kpi-strip::-webkit-scrollbar{
    display:none;
}

.onu-kpi-pill{
    min-width:110px;
    background:white;
    border-radius:22px;
    padding:16px;
    border:1px solid #e2e8f0;
    box-shadow:
        0 8px 20px rgba(15,23,42,.04);
    flex-shrink:0;
}

.onu-kpi-number{
    font-size:24px;
    font-weight:800;
    color:#0f172a;
    margin-bottom:4px;
}

.onu-kpi-label{
    font-size:13px;
    color:#64748b;
    font-weight:600;
}

/*
|--------------------------------------------------------------------------
| FEED
|--------------------------------------------------------------------------
*/

.onu-ops-feed{
    display:flex;
    flex-direction:column;
    gap:14px;
}

/*
|--------------------------------------------------------------------------
| CARD
|--------------------------------------------------------------------------
*/

.onu-ops-feed{
    display:flex;
    flex-direction:column;
    gap:10px;
}

/*
|--------------------------------------------------------------------------
| TILE
|--------------------------------------------------------------------------
*/

.onu-feed-tile{

    position:relative;

    display:flex;

    overflow:hidden;

    border-radius:24px;

    background:
        rgba(255,255,255,.72);

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    border:
        1px solid rgba(220,230,240,.6);

    box-shadow:
        0 10px 24px rgba(15,23,42,.04);
}

/*
|--------------------------------------------------------------------------
| RAIL
|--------------------------------------------------------------------------
*/

.onu-feed-rail{

    width:5px;

    flex-shrink:0;

    background:#0284c7;
}

.onu-feed-confirmed .onu-feed-rail{
    background:#0ea5e9;
}

.onu-feed-checked_in .onu-feed-rail{
    background:#10b981;
}

.onu-feed-pending .onu-feed-rail{
    background:#f59e0b;
}

.onu-feed-cancelled .onu-feed-rail{
    background:#ef4444;
}

/*
|--------------------------------------------------------------------------
| BODY
|--------------------------------------------------------------------------
*/

.onu-feed-body{

    flex:1;

    padding:14px;
}

/*
|--------------------------------------------------------------------------
| TOP
|--------------------------------------------------------------------------
*/

.onu-feed-top{

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    margin-bottom:6px;
}

.onu-feed-pets{

    font-size:15px;
    font-weight:800;

    color:#0f172a;
}

.onu-feed-status{

    font-size:10px;
    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#0284c7;
}

/*
|--------------------------------------------------------------------------
| META
|--------------------------------------------------------------------------
*/

.onu-feed-meta{

    font-size:13px;

    color:#64748b;

    margin-bottom:12px;
}

/*
|--------------------------------------------------------------------------
| ACTIONS
|--------------------------------------------------------------------------
*/

.onu-feed-actions{

    display:flex;

    gap:8px;
}

.onu-inline-action{

    min-height:34px;

    padding:0 14px;

    border-radius:999px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:#f1f5f9;

    color:#0f172a;

    font-size:12px;
    font-weight:700;

    text-decoration:none;
}

.onu-inline-action.primary{

    background:#0284c7;
    color:white;
}

/*
|--------------------------------------------------------------------------
| TOP
|--------------------------------------------------------------------------
*/

.onu-compact-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:14px;
}

.onu-compact-pets{
    font-size:18px;
    font-weight:800;
    color:#0f172a;
    margin-bottom:4px;
}

.onu-compact-owner{
    font-size:14px;
    color:#64748b;
}

/*
|--------------------------------------------------------------------------
| STATUS
|--------------------------------------------------------------------------
*/

.onu-mini-status{
    border-radius:999px;
    padding:8px 12px;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    white-space:nowrap;
}

.onu-status-pending{
    background:#fef3c7;
    color:#92400e;
}

.onu-status-confirmed{
    background:#dbeafe;
    color:#1d4ed8;
}

.onu-status-checked_in{
    background:#dcfce7;
    color:#166534;
}

.onu-status-checked_out{
    background:#e2e8f0;
    color:#334155;
}

.onu-status-cancelled{
    background:#fee2e2;
    color:#991b1b;
}

/*
|--------------------------------------------------------------------------
| DATES
|--------------------------------------------------------------------------
*/

.onu-compact-dates{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:600;
    color:#334155;
    margin-bottom:14px;
}

.onu-arrow{
    opacity:.5;
}

/*
|--------------------------------------------------------------------------
| OPERATIONAL CHIP
|--------------------------------------------------------------------------
*/

.onu-operational-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:999px;
    background:#ecfeff;
    color:#0369a1;
    padding:8px 12px;
    font-size:12px;
    font-weight:700;
    margin-bottom:14px;
}

/*
|--------------------------------------------------------------------------
| PETS
|--------------------------------------------------------------------------
*/

.onu-service-inline{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:16px;
}

.onu-pet-chip{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:999px;
    padding:8px 12px;
    font-size:12px;
    font-weight:700;
    color:#334155;
}

.onu-empty-chip{
    font-size:12px;
    color:#94a3b8;
}

/*
|--------------------------------------------------------------------------
| ACTIONS
|--------------------------------------------------------------------------
*/

.onu-compact-actions{
    display:flex;
    gap:10px;
}

.onu-action{
    flex:1;
    min-height:44px;
    border-radius:16px;
    border:none;
    background:#e2e8f0;
    color:#0f172a;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:14px;
}

.onu-action.primary{
    background:#0284c7;
    color:white;
}

/*
|--------------------------------------------------------------------------
| EMPTY
|--------------------------------------------------------------------------
*/

.onu-empty-feed{
    background:white;
    border-radius:28px;
    padding:40px 20px;
    text-align:center;
    color:#64748b;
    border:1px solid #e2e8f0;
}

/*
|--------------------------------------------------------------------------
| FAB
|--------------------------------------------------------------------------
*/

.onu-fab{
    position:fixed;
    right:22px;
    bottom:22px;
    width:62px;
    height:62px;
    border-radius:50%;
    background:#0284c7;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    text-decoration:none;
    box-shadow:
        0 20px 40px rgba(2,132,199,.35);
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:640px){

    #onu-booking-dashboard{
        padding:12px;
    }

    .onu-mobile-title{
        font-size:22px;
    }

    .onu-kpi-pill{
        min-width:95px;
    }
}