/* ============================================================
   STARTR — Design System
   Display: Space Grotesk (bold, geometric — echoes the logo mark)
   Body:    Inter (clean, readable, form-friendly)
   ============================================================ */
:root{
    --red:#ED1C24;
    --red-dark:#B3121A;
    --red-tint:#FDEBEC;
    --ink:#14141A;
    --ink-soft:#3A3A42;
    --slate:#6B6B76;
    --line:#EBEAE6;
    --paper:#FAFAF8;
    --white:#FFFFFF;
    --success:#1A9C4D;
    --success-tint:#E6F7EC;
    --radius-sm:8px;
    --radius:14px;
    --radius-lg:20px;
    --shadow-sm:0 1px 3px rgba(20,20,26,.06);
    --shadow:0 8px 24px rgba(20,20,26,.08);
    --shadow-lg:0 16px 40px rgba(20,20,26,.12);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--paper);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
    font-family:'Space Grotesk',sans-serif;
    color:var(--ink);
    letter-spacing:-0.02em;
    margin:0 0 8px;
}
h1{font-size:34px;font-weight:700;line-height:1.15;}
h2{font-size:22px;font-weight:700;}
h3{font-size:17px;font-weight:700;}
p{margin:0 0 8px;line-height:1.5;}
a{color:inherit;}

/* ---------- Icons ---------- */
.icon{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- Navbar ---------- */
.navbar{
    display:flex;justify-content:space-between;align-items:center;
    background:var(--white);
    padding:12px 32px;
    border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:100;
}
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}
.brand-logo{height:52px;width:auto;display:block;}
.nav-toggle{
    display:none;background:none;border:none;cursor:pointer;padding:8px;
    flex-direction:column;gap:5px;
}
.nav-toggle span{width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:.25s;}
nav{display:flex;align-items:center;gap:22px;}
nav a{text-decoration:none;color:var(--ink-soft);font-weight:600;font-size:14px;transition:color .15s;}
nav a:hover{color:var(--red);}
.btn-outline{border:1.5px solid var(--red);color:var(--red)!important;padding:8px 18px;border-radius:24px;font-size:13px!important;}
.btn-outline:hover{background:var(--red);color:var(--white)!important;}
.user-pill{background:var(--paper);border:1px solid var(--line);padding:7px 14px;border-radius:20px;font-size:13px;color:var(--slate);font-weight:600;}

/* ---------- Layout ---------- */
.container{max-width:1140px;margin:0 auto;padding:36px 24px;min-height:70vh;}

/* ---------- Hero ---------- */
.hero{
    background:var(--ink);
    color:var(--white);
    border-radius:var(--radius-lg);
    padding:40px 36px;
    margin-bottom:28px;
    position:relative;
    overflow:hidden;
}
.hero::after{
    content:'';position:absolute;right:-60px;top:-60px;width:260px;height:260px;
    background:radial-gradient(circle,rgba(237,28,36,.35),transparent 70%);
    pointer-events:none;
}
.hero h1{color:var(--white);position:relative;}
.hero .eyebrow{
    display:inline-block;color:var(--red);font-weight:700;font-size:12px;
    letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;
}
.hero p{color:#C7C7CE;max-width:520px;position:relative;}
.hero-stats{display:flex;gap:28px;margin-top:22px;flex-wrap:wrap;position:relative;}
.hero-stat .num{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:var(--white);}
.hero-stat .label{font-size:12px;color:#9C9CA6;}

/* ---------- Cards ---------- */
.card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:22px;
    box-shadow:var(--shadow-sm);
    margin-bottom:18px;
}

/* ---------- Filter bar ---------- */
.filter-bar{
    display:flex;gap:8px;flex-wrap:nowrap;align-items:center;
    background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
    padding:10px;margin-bottom:10px;overflow-x:auto;
}
.filter-bar input[type="text"]{flex:1 1 160px;min-width:120px;}
.filter-bar select{flex:0 1 130px;min-width:100px;}
.filter-bar input[type="text"],
.filter-bar select{width:auto;margin:0;padding:9px 11px;font-size:13.5px;}
.filter-bar .btn,.filter-bar .btn-ghost{margin-top:0;white-space:nowrap;flex-shrink:0;padding:9px 16px;font-size:13.5px;}
.btn-ghost{
    background:var(--paper);color:var(--ink-soft);border:1px solid var(--line);
    padding:11px 20px;border-radius:24px;font-weight:600;font-size:14px;cursor:pointer;
    display:inline-flex;align-items:center;gap:6px;transition:.15s;
}
.btn-ghost:hover{border-color:var(--red);color:var(--red);}
.filter-msg{font-size:13px;color:var(--slate);margin:0 0 14px;min-height:16px;}
.filter-clear{font-size:13px;color:var(--slate);text-decoration:underline;white-space:nowrap;flex-shrink:0;}

/* ---------- Bike grid & cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;}
.bike-card{
    background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s;
    display:flex;flex-direction:column;padding:0;
}
.bike-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.bike-media{position:relative;background:var(--line);}
.bike-media img{width:100%;height:150px;object-fit:cover;display:block;}
.bike-price-tag{
    position:absolute;top:10px;right:10px;background:var(--ink);color:var(--white);
    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;
    padding:5px 11px;border-radius:20px;
}
.bike-price-tag b{color:var(--red);}
.bike-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:6px;flex:1;}
.bike-body h3{font-size:16px;margin-bottom:0;}
.bike-model{color:var(--slate);font-size:12.5px;margin:0;}
.chip-row{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0;}
.chip{
    display:inline-flex;align-items:center;background:var(--paper);border:1px solid var(--line);
    padding:3px 9px;border-radius:20px;font-size:11px;color:var(--ink-soft);font-weight:600;
}
.chip.chip-red{background:var(--red-tint);color:var(--red-dark);border-color:transparent;}
.bike-owner{font-size:12px;color:var(--slate);margin-top:2px;}
.bike-card .btn{width:100%;text-align:center;margin-top:10px;}

.status-available{color:var(--success);font-weight:700;font-size:13px;}
.status-booked{color:var(--red);font-weight:700;font-size:13px;}

/* ---------- Forms ---------- */
form label{display:block;margin:14px 0 6px;font-weight:600;font-size:13.5px;color:var(--ink-soft);}
form input,form select,form textarea{
    width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
    font-size:14px;font-family:inherit;color:var(--ink);background:var(--white);transition:border-color .15s;
}
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--red);}
form input::placeholder{color:#A6A6AE;}

.btn{
    background:var(--red);color:var(--white);border:none;padding:12px 26px;border-radius:24px;
    font-weight:700;cursor:pointer;font-size:14.5px;margin-top:16px;font-family:inherit;
    transition:background .15s,transform .1s;display:inline-block;text-decoration:none;text-align:center;
}
.btn:hover{background:var(--red-dark);}
.btn:active{transform:scale(.98);}

.alert{padding:13px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:14px;font-weight:500;}
.alert-error{background:var(--red-tint);color:var(--red-dark);border:1px solid #F5B5B5;}
.alert-success{background:var(--success-tint);color:#1A7C3F;border:1px solid #A6E3C0;}

.fare-box{background:var(--ink);color:var(--white);border-radius:var(--radius);padding:20px;margin-top:16px;}
.fare-box .amount{font-family:'Space Grotesk',sans-serif;font-size:34px;font-weight:700;color:var(--red);}

/* ---------- Tables → responsive cards on mobile ---------- */
.table-wrap{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
table{width:100%;border-collapse:collapse;}
table th,table td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:13.5px;}
table th{background:var(--ink);color:var(--white);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;}
table tr:last-child td{border-bottom:none;}

.badge{padding:4px 11px;border-radius:20px;font-size:11.5px;font-weight:700;display:inline-block;}
.badge-pending{background:#FFF3CD;color:#856404;}
.badge-confirmed{background:var(--success-tint);color:#155724;}
.badge-ongoing{background:#CCE5FF;color:#004085;}
.badge-completed{background:#E2E3E5;color:#383D41;}
.badge-cancelled{background:var(--red-tint);color:var(--red-dark);}

.slab-table{margin-top:10px;font-size:13px;}
.footer{text-align:center;padding:24px;color:var(--slate);font-size:13px;border-top:1px solid var(--line);margin-top:20px;}

.actions{display:flex;gap:8px;flex-wrap:wrap;}
.action-btn{padding:7px 15px;border-radius:16px;border:none;font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;}
.action-btn.confirm{background:var(--success-tint);color:#1A7C3F;}
.action-btn.confirm:hover{background:var(--success);color:#fff;}
.action-btn.cancel{background:var(--red-tint);color:var(--red-dark);}
.action-btn.cancel:hover{background:var(--red);color:#fff;}

.empty-state{text-align:center;padding:50px 20px;color:var(--slate);}
.empty-state .icon{width:36px;height:36px;margin:0 auto 12px;display:block;opacity:.5;}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 860px) {
    nav{
        position:fixed;top:64px;left:0;right:0;background:var(--white);
        flex-direction:column;align-items:stretch;gap:0;
        border-bottom:1px solid var(--line);box-shadow:var(--shadow);
        max-height:0;overflow:hidden;transition:max-height .25s ease;
        padding:0 20px;
    }
    nav.open{max-height:480px;padding:10px 20px 18px;}
    nav a{padding:12px 4px;border-bottom:1px solid var(--line);font-size:15px;}
    nav a:last-of-type{border-bottom:none;}
    .btn-outline{text-align:center;margin-top:10px;}
    .user-pill{margin:6px 0;text-align:center;}
    .nav-toggle{display:flex;}
}

@media (max-width: 640px) {
    .container{padding:20px 14px;}
    .navbar{padding:10px 16px;}
    .brand-logo{height:40px;}
    h1{font-size:24px;}
    .hero{padding:26px 20px;border-radius:var(--radius);}
    .hero-stats{gap:18px;}
    .hero-stat .num{font-size:18px;}

    .filter-bar{
        flex-wrap:wrap;overflow-x:visible;padding:10px;gap:8px;
    }
    .filter-bar input[type="text"]{flex:1 1 100%;order:1;}
    .filter-bar select[name="type"]{flex:1 1 calc(50% - 4px);order:2;}
    .filter-bar select[name="radius"]{flex:1 1 calc(50% - 4px);order:3;}
    .filter-bar .btn-ghost{flex:1 1 calc(50% - 4px);order:4;justify-content:center;}
    .filter-bar .btn{flex:1 1 calc(50% - 4px);order:5;justify-content:center;}
    .filter-bar .filter-clear{flex:1 1 100%;order:6;text-align:center;}
    .filter-bar input[type="text"],
    .filter-bar select{max-width:none;}

    .grid{grid-template-columns:repeat(2,1fr);gap:10px;}
    .bike-media img{height:100px;}
    .bike-body{padding:10px;gap:4px;}
    .bike-body h3{font-size:13px;}
    .bike-model{font-size:10.5px;}
    .chip{font-size:9.5px;padding:2px 7px;}
    .bike-price-tag{font-size:11px;padding:4px 8px;top:6px;right:6px;}
    .bike-owner{font-size:10.5px;}
    .bike-card .btn{padding:9px;font-size:12px;margin-top:8px;}

    /* Tables collapse into stacked cards */
    .table-wrap{border:none;background:none;}
    table, thead, tbody, th, td, tr{display:block;}
    table thead{display:none;}
    table tr{
        background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
        margin-bottom:12px;padding:12px 14px;
    }
    table td{
        border:none;padding:6px 0;display:flex;justify-content:space-between;align-items:center;
        gap:10px;font-size:13px;text-align:right;
    }
    table td::before{
        content:attr(data-label);font-weight:700;color:var(--slate);font-size:11px;
        text-transform:uppercase;letter-spacing:.03em;text-align:left;
    }
    table td:empty{display:none;}
}