body{
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    background:#f5f7fb;
    color:#0f172a;
    font-size:12px;
}
a{
    color:#1f6feb;
}
a:hover,a:focus{
    color:#1a5bd6;
}

.container{
    max-width:1040px;
}
.page-header{
    margin:8px 0 14px;
    border-bottom:0;
}
.page-header h3{
    margin:0 0 6px;
    font-weight:600;
    font-size:16px;
}

.navbar{
    border-radius:0;
    margin-bottom:18px;
    background:#ffffff;
    border:0;
    box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.navbar-default .navbar-nav>li>a{
    color:#0f172a;
}
.navbar-default .navbar-nav>li>a:hover{
    color:#1f6feb;
}
.navbar-brand{
    font-weight:600;
    color:#0f172a !important;
}
.navbar-brand .brand-logo{
    height:48px;
    width:auto;
    display:inline-block;
    vertical-align:middle;
    margin-right:4px;
}
.navbar-brand .brand-text{
    display:inline-block;
    vertical-align:middle;
    line-height:1.1;
}
.navbar-brand .brand-text .title{
    display:block;
    font-size:13px;
    font-weight:700;
    letter-spacing:.2px;
}
.navbar-header{
    margin-bottom: 10px;
}

.navbar-default .navbar-toggle{
    background-color: rgba(255,255,255,0);
    border-color: transparent;
}
.navbar-default .navbar-toggle .icon-bar{
    background-color: #0f172a;
}
.navbar-default .navbar-toggle:hover .icon-bar,
.navbar-default .navbar-toggle:focus .icon-bar{
    background-color: #1f6feb;
}

.card{
    background:#fff;
    border:1px solid #e6eaf2;
    border-radius:14px;
    padding:16px;
    margin-bottom:14px;
    box-shadow:0 12px 30px rgba(15,23,42,.08);
}

h4{
    font-weight:600;
    margin-top:0;
    margin-bottom:10px;
    font-size:16px;
}
p{
    line-height:1.6;
}

.btn{
    border-radius:12px;
    padding:6px 12px;
    font-weight:100;
    font-size:12px;
}
.btn-block{
    padding:9px 8px;
}
.btn-primary{
    background:#1f6feb;
    border-color:#1f6feb;
}
.btn-primary:hover,.btn-primary:focus{
    background:#1a5bd6;
    border-color:#1a5bd6;
}
.btn-default{
    border-color:#e2e8f0;
    color:#0f172a;
    background:#ffffff;
}
.btn-default:hover,.btn-default:focus{
    border-color:#cbd5e1;
    background:#f8fafc;
    color:#0f172a;
}

.btn-sm{
    padding:4px 8px;
    border-radius:10px;
}

.form-control{
    border-radius:10px;
    border-color:#e2e8f0;
    box-shadow:none;
    height:36px;
}
.form-control.input-sm{
    height:30px;
    padding:5px 10px;
    font-size:12px;
}
.form-control:focus{
    border-color:#1f6feb;
    box-shadow:0 0 0 3px rgba(31,111,235,.15);
}

.alert{
    border-radius:12px;
    border:1px solid transparent;
}
.alert-danger{
    background:#fef2f2;
    border-color:#fecaca;
    color:#991b1b;
}
.alert-info{
    background:#eff6ff;
    border-color:#bfdbfe;
    color:#1e3a8a;
}
.alert-warning{
    background:#fffbeb;
    border-color:#fde68a;
    color:#92400e;
}

.nav-pills>li>a{
    border-radius:999px;
    padding:8px 12px;
}
.nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus{
    background:#1f6feb;
}

.muted{
    color:#64748b;
}

.table{
    background:#fff;
    font-size:13px;
}
.table>thead>tr>th{
    border-bottom:1px solid #e2e8f0;
    color:#334155;
    font-weight:600;
}
.table>tbody>tr>td{
    border-top:1px solid #eef2f7;
    vertical-align:middle;
}
.table-striped>tbody>tr:nth-of-type(odd){
    background-color:#f8fafc;
}

.label{
    border-radius:999px;
    padding:.35em .65em;
    display:inline-block;
    font-weight:600;
}

.admin-subnav{
    margin:0 0 14px;
}
.admin-layout{
    margin-top:4px;
}
.admin-sidebar{
    position:sticky;
    top:12px;
}
.admin-sidebar .nav{
    margin:0;
}
.admin-sidebar .nav>li>a{
    background:#fff;
    border:1px solid #e6eaf2;
    border-radius:12px;
    margin-bottom:8px;
    padding:9px 12px;
    color:#0f172a;
}
.admin-sidebar .nav>li>a:hover,.admin-sidebar .nav>li>a:focus{
    border-color:#cbd5e1;
    background:#f8fafc;
}
.admin-sidebar .nav>li.active>a,.admin-sidebar .nav>li.active>a:hover,.admin-sidebar .nav>li.active>a:focus{
    border-color:#1f6feb;
    background:#eff6ff;
    color:#0f172a;
}

.stepper-card{
    padding:10px;
}
.stepper{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
}
.stepper .step{
    display:flex;
    gap:8px;
    align-items:center;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid #e6eaf2;
    background:#fff;
}
.stepper .dot{
    width:20px;
    height:20px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
    background:#e2e8f0;
    color:#0f172a;
}
.stepper .label{
    font-weight:800;
    color:#0f172a;
    font-size:11px;
}
.stepper a.label{
    text-decoration:none;
}
.stepper .step.active{
    border-color:#1f6feb;
    background:#eff6ff;
}
.stepper .step.active .dot{
    background:#1f6feb;
    color:#fff;
}
.stepper .step.done{
    border-color:#bbf7d0;
    background:#f0fdf4;
}
.stepper .step.done .dot{
    background:#16a34a;
    color:#fff;
}
.stepper .step.todo{
    opacity:.7;
}

.well-soft{
    background:#f8fafc;
    border:1px solid #e6eaf2;
    border-radius:12px;
}

.session-card{
    border:1px solid #e6eaf2;
    border-radius:14px;
    background:#fff;
    box-shadow:0 10px 24px rgba(15,23,42,.08);
    padding:12px;
    margin-bottom:10px;
}
.session-card .top{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:flex-start;
}
.session-card .time{
    font-weight:200;
    font-size:12px;
}
.session-card .meta{
    margin-top:6px;
    color:#64748b;
    font-size:12px;
}
.session-card .actions{
    margin-top:12px;
    display:flex;
    gap:15px;
    align-items:center;
    flex-wrap:nowrap;
    justify-content:flex-end;
}
.session-card .btn{
    flex:0 0 auto;
    min-width:80px;
}
.session-card .mobile-select{
    flex:0 0 auto;
    width:110px;
    min-width:110px;
}

@media (max-width: 575px) {
    .session-card .actions{
        flex-wrap:wrap;
    }
    .session-card .btn{
        min-width:80px;
        flex:1;
    }
    .session-card .mobile-select{
        width:110px;
        min-width:110px;
        flex:1;
    }
}

.reserve-form{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex-wrap:nowrap;
}

.label-female{
    background:#ec4899;
}
.label-male{
    background:#2563eb;
}
.label-soft{
    background:#e2e8f0;
    color:#0f172a;
}
.label-confirmed{
    background:#16a34a;
}
.label-pending{
    background:#f59e0b;
}

/* Custom mobile select box - all screen sizes */
.mobile-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 20px !important;
    background-color: #ffffff !important;
    padding-right: 40px !important;
    padding-left: 12px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    height: 30px !important;
    line-height: 1.4 !important;
    color: #0f172a !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
    font-weight: 400 !important;
    width: 110px !important;
    min-width: 110px !important;
    white-space: nowrap !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    vertical-align: middle !important;
}

.mobile-select:focus {
    border-color: #1f6feb !important;
    box-shadow: 0 0 0 2px rgba(31,111,235,0.2) !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%231f6feb' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
}

.mobile-select::-ms-expand {
    display: none !important;
}

/* Disabled gender select styling */
.mobile-select:disabled {
    background-color: #f8fafc !important;
    color: #64748b !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

.mobile-select:disabled:hover {
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
}

.mobile-select:disabled:focus {
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23cbd5e1' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
    .mobile-date-input {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        height: 36px !important;
        font-size: 14px !important;
        padding: 6px 12px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        background-color: #ffffff !important;
        color: #0f172a !important;
        box-shadow: none !important;
        outline: none !important;
        cursor: pointer !important;
        font-weight: 400 !important;
        line-height: 1.2 !important;
    }
    
    .mobile-date-input:focus {
        border-color: #1f6feb !important;
        box-shadow: 0 0 0 2px rgba(31,111,235,0.2) !important;
    }
    
    .mobile-date-input:hover {
        border-color: #cbd5e1 !important;
    }
    
    /* Hide default date picker icon in some browsers */
    .mobile-date-input::-webkit-calendar-picker-indicator {
        opacity: 1 !important;
        cursor: pointer !important;
        width: 20px !important;
        height: 20px !important;
    }
    
    .mobile-date-input::-webkit-inner-spin-button,
    .mobile-date-input::-webkit-outer-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }
}