/* ===== GLOBAL RESET ===== */

body{
margin:0;
font-family:'Inter',sans-serif;
background:#f1f5f9;
color:#0f172a;
}

/* ===== NAVBAR ===== */

.top-navbar{

display:flex;
justify-content:flex-start;
align-items:center;
flex-wrap:wrap;
gap:12px;

padding:14px 30px;

background:#0f172a;
color:white;

box-shadow:0 2px 10px rgba(0,0,0,0.1);

}

/* Main nav links + profile — right side; PADELVERSE logo is separate on the left */
.nav-cluster{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:14px;
justify-content:flex-end;
margin-left:auto;
flex:1;
min-width:0;
}

.top-navbar > .logo-navbar-brand{
flex-shrink:0;
}

.nav-cluster .nav-dropdown-menu:not(.nav-admin-menu){
left:auto;
right:0;
}

.logo{
font-size:18px;
font-weight:600;
}

.top-navbar .logo-navbar-brand{
color:white;
text-decoration:none;
white-space:nowrap;
padding:8px 4px;
border-radius:6px;
display:inline-flex;
align-items:center;
gap:10px;
}

.logo-navbar-image{
height:34px;
width:auto;
display:block;
}

.logo-navbar-text{
font-size:16px;
font-weight:700;
letter-spacing:0.03em;
}

.top-navbar .logo-navbar-brand:hover{
background:#1e293b;
color:white;
}

.nav-menu{
display:flex;
gap:18px;
align-items:center;
}

.nav-right{
display:flex;
align-items:center;
gap:10px;
margin-left:0;
flex-shrink:0;
}

.nav-menu a{

color:#cbd5f5;
text-decoration:none;
font-size:14px;

padding:8px 10px;
border-radius:6px;

transition:0.2s;

}

.nav-dropdown{
position:relative;
}

.nav-drop-link::after{
content:" ▾";
font-size:11px;
}

.nav-drop-link{
display:inline-flex;
align-items:center;
}

.nav-dropdown-menu{
display:none;
position:absolute;
top:38px;
left:0;
min-width:190px;
background:#0f172a;
border:1px solid #334155;
border-radius:10px;
padding:8px;
box-shadow:0 12px 24px rgba(0,0,0,0.25);
z-index:99;
}

.nav-dropdown-menu a{
display:block;
padding:9px 10px;
border-radius:6px;
white-space:nowrap;
}

.nav-dropdown.open .nav-dropdown-menu{
display:block;
}

.nav-menu a:hover{

background:#1e293b;
color:white;

}

/* Calendar — distinct accent in the top bar */
.top-navbar .nav-link-calendar{
color:#5eead4;
font-weight:600;
}
.top-navbar .nav-link-calendar:hover{
background:rgba(45,212,191,0.15);
color:#99f6e4;
}

.logout{
background:#ef4444;
color:white !important;
}

/* ===== CONTENT ===== */

.main-content{
padding:14px 16px;
}

/* ===== TABLE HEADER BG ===== */
.print-table thead th {
  background: #7bdff2;
}

/* ===== CARDS ===== */

.card{

background:white;
padding:22px;
border-radius:14px;

box-shadow:
0 4px 10px rgba(0,0,0,0.05);

transition:0.25s;

}

.card:hover{
transform:translateY(-3px);
}

/* ===== STATS ===== */

.stats-cards{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-bottom:25px;

}

.card h3{
font-size:14px;
color:#64748b;
margin:0;
}

.card p{
font-size:26px;
font-weight:600;
margin-top:6px;
}

/* ===== BUTTONS ===== */

button,
.action-btn{

background:#6366f1;
color:white;

padding:10px 16px;
border:none;

border-radius:8px;
cursor:pointer;

font-size:14px;
transition:0.2s;

}

button:hover,
.action-btn:hover{

background:#4f46e5;
transform:translateY(-1px);

}

/* ===== QUICK ACTIONS ===== */

.quick-actions{
display:flex;
gap:14px;
margin:25px 0;
}

/* ===== FORMS ===== */

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}

.form-group{
display:flex;
flex-direction:column;
}

.form-group label{
font-size:13px;
margin-bottom:6px;
color:#475569;
}

.form-group input,
.form-group select,
.form-group textarea{

padding:10px;
border-radius:8px;
border:1px solid #e2e8f0;
font-size:14px;

}

.form-group input:focus,
.form-group select:focus{

outline:none;
border-color:#6366f1;
box-shadow:0 0 0 3px rgba(99,102,241,0.15);

}

/* Amount / currency fields: align value to the right */
input[type="number"]{
text-align:right;
}

/* Readonly field visual state */
.form-group input[readonly],
.form-row .input-cell input[readonly],
input[readonly].form-control,
input[readonly],
select:disabled{
background:#e0e1dd !important;
/* color:#f1f5f9 !important; */
border-color:#e0e1dd !important;
cursor:not-allowed;
}

.form-group input[readonly]::placeholder,
.form-row .input-cell input[readonly]::placeholder{
color:#cbd5e1;
}

/* ===== ROW FORM LAYOUT (label/input width control) ===== */

.form-row{
display:flex;
align-items:center;
gap:12px;
margin-bottom:14px;
--label-w:22%;
--input-w:78%;
}

.form-row .label-cell{
flex:0 0 var(--label-w);
max-width:var(--label-w);
text-align:right;
}

.form-row .input-cell{
flex:0 0 var(--input-w);
max-width:var(--input-w);
}

.form-row .label-cell label{
font-size:13px;
color:#475569;
font-weight:500;
}

.form-row .input-cell input,
.form-row .input-cell select,
.form-row .input-cell textarea{
width:100%;
padding:10px;
border-radius:8px;
border:1px solid #e2e8f0;
font-size:14px;
box-sizing:border-box;
}

/* You can override widths per row inline:
   <div class="form-row" style="--label-w:18%;--input-w:82%;"> ... </div> */

.form-row.label-15{ --label-w:15%; --input-w:85%; }
.form-row.label-20{ --label-w:20%; --input-w:80%; }
.form-row.label-25{ --label-w:25%; --input-w:75%; }
.form-row.label-30{ --label-w:30%; --input-w:70%; }
.form-row.label-35{ --label-w:35%; --input-w:65%; }

/* Bootstrap-like row/col form layout (scoped to customer master) */
.customer-master .row{
display:flex;
flex-wrap:wrap;
margin:0 -6px 12px;
align-items:center;
}

.customer-master .pad{
padding:0 6px;
box-sizing:border-box;
}

.customer-master .text-right{
text-align:right;
}

.customer-master .label-control.marg{
font-size:13px;
color:#475569;
font-weight:500;
}

.customer-master .col-lg-2{ flex:0 0 16.6667%; max-width:16.6667%; }
.customer-master .col-lg-3{ flex:0 0 25%; max-width:25%; }
.customer-master .col-lg-4{ flex:0 0 33.3333%; max-width:33.3333%; }
.customer-master .col-lg-6{ flex:0 0 50%; max-width:50%; }
.customer-master .col-lg-8{ flex:0 0 66.6667%; max-width:66.6667%; }

.customer-master .row input,
.customer-master .row select,
.customer-master .row textarea{
width:100%;
padding:10px;
border-radius:8px;
border:1px solid #e2e8f0;
font-size:14px;
box-sizing:border-box;
}

.customer-master .row input[readonly]{
background:#e0e1dd !important;
border-color:#e0e1dd !important;
cursor:not-allowed;
}

@media (max-width:768px){
.form-row{
flex-direction:column;
align-items:stretch;
--label-w:100%;
--input-w:100%;
}
.form-row .label-cell{
text-align:left;
}

.customer-master .row{
margin:0 0 10px;
}

.customer-master .pad{
padding:0;
}

.customer-master .text-right{
text-align:left;
}

.customer-master .col-lg-2,
.customer-master .col-lg-3,
.customer-master .col-lg-4,
.customer-master .col-lg-6,
.customer-master .col-lg-8{
flex:0 0 100%;
max-width:100%;
}
}

/* ===== TABLE ===== */

.table{

width:100%;
border-collapse:collapse;
background:white;
border-radius:12px;
overflow:hidden;

box-shadow:0 3px 10px rgba(0,0,0,0.05);

}

.table th{

background:#f8fafc;
padding:14px;
text-align:left;
font-size:13px;

}

.table td{
padding:14px;
border-top:1px solid #f1f5f9;
}

/* Beat .table th { text-align:left } when Tailwind utilities are used (stylesheet order) */
.table thead th.text-right,
.table tbody td.text-right,
.table tfoot th.text-right,
.table tfoot td.text-right{
text-align:right;
}

.table thead th.num,
.table tbody td.num,
.table tfoot th.num,
.table tfoot td.num{
text-align:right;
}

/* ===== REGISTERS (filter card + nested detail) ===== */

.register-panel{
background:#fff;
border:1px solid #e2e8f0;
border-radius:12px;
max-width:560px;
margin-bottom:28px;
box-shadow:0 4px 14px rgba(15,23,42,0.06);
overflow:hidden;
}

.register-panel-head{
padding:14px 18px;
border-bottom:1px solid #e2e8f0;
font-weight:700;
font-size:15px;
letter-spacing:0.02em;
color:#0f172a;
background:#f8fafc;
}

.register-panel-body{
padding:18px;
display:block;
}

.register-panel-foot{
padding:14px 18px;
border-top:1px solid #e2e8f0;
background:#f8fafc;
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
}

.register-row{
display:grid;
grid-template-columns:minmax(120px,34%) 1fr;
gap:10px 16px;
align-items:center;
margin-bottom:14px;
}

.register-label{
font-size:13px;
font-weight:600;
color:#475569;
text-align:right;
}

.register-select,
.register-input{
width:100%;
max-width:320px;
padding:9px 12px;
border:1px solid #cbd5e1;
border-radius:8px;
font-size:14px;
box-sizing:border-box;
}

.register-results{
margin-top:8px;
}

.register-nested{
font-size:13px;
box-shadow:none;
margin:8px 0 4px;
background:#fafafa;
}

.register-nested th,
.register-nested td{
padding:8px 10px;
}

tr.register-detail-wrap > td{
padding:0 14px 14px;
background:#f8fafc;
border-top:none;
}

tr.register-subtotal td{
background:#f1f5f9;
font-weight:600;
}

tr.register-grand td{
background:#e0f2fe;
font-weight:700;
border-top:2px solid #bae6fd;
}

@media print{
.no-print,
.top-navbar,
.nav-toggle{
display:none !important;
}
.register-panel{
display:none !important;
}
.main-content{
padding:12px !important;
}
}

.table tr:hover{
background:#f9fafb;
}

/* ===== MODAL ===== */

.modal{

display:none;
position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(15,23,42,0.5);

}

.modal-content{

background:white;
width:480px;

margin:120px auto;

padding:25px;
border-radius:14px;

animation:pop 0.25s;

}

/* Bootstrap-like search modal layout */
.searchModal{
overflow-y:auto;
padding:6px;
}

.searchModal .modal-dialog{
width:calc(100% - 16px);
max-width:1560px;
margin:12px auto;
}

.searchModal .modal-content{
width:100%;
max-width:none;
margin:0;
padding:5px 5px;
overflow:hidden;
max-height:calc(100vh - 48px);
}

.searchModal .modal-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 14px;
border-bottom:1px solid #e2e8f0;
}

.searchModal .modal-title{
margin:0;
font-size:1.05rem;
font-weight:600;
}

.searchModal .close{
border:none;
background:transparent;
font-size:22px;
line-height:1;
cursor:pointer;
color:#64748b;
}

.searchModal .modal-body{
padding:10px 14px 12px;
}

.searchModal .search-controls-row{
display:flex;
flex-wrap:wrap;
margin:0 -5px 10px;
}

.searchModal .search-controls-row > [class*="col-"]{
padding:0 5px;
box-sizing:border-box;
}

.searchModal .search-controls-row .col-lg-2{
flex:0 0 16.6667%;
max-width:16.6667%;
}

.searchModal .search-controls{
display:grid;
grid-template-columns:repeat(6, minmax(0, 1fr));
gap:10px;
margin-bottom:10px;
}

.searchModal .search-controls .form-control{
width:100%;
height:40px;
padding:8px 10px;
border:1px solid #e2e8f0;
border-radius:8px;
box-sizing:border-box;
font-size:14px;
}

.searchModal .search-controls-row .form-control{
width:100%;
height:40px;
padding:8px 10px;
border:1px solid #e2e8f0;
border-radius:8px;
box-sizing:border-box;
font-size:14px;
}

.searchModal .btn.btn-primary{
height:40px;
width:100%;
border:none;
border-radius:8px;
background:#fb6f92;
color:#fff;
cursor:pointer;
}

.searchModal .btn.btn-primary:hover{
background:#f2557a;
color:#fff;
}

.searchModal .table-responsive{
max-height:62vh;
overflow:auto;
border:1px solid #e2e8f0;
border-radius:10px;
}

.searchModal .table{
box-shadow:none;
border-radius:0;
margin:0;
}

.searchModal .search-action-bar{
display:flex;
justify-content:flex-end;
gap:8px;
margin-top:8px;
}

.searchModal .search-action-bar .btn{
height:38px;
min-width:88px;
}

.searchModal .search-action-bar .btn.btn-primary{
background:#fb6f92;
color:#fff;
border:none;
}

.searchModal .search-action-bar .btn.btn-primary:hover{
background:#f2557a;
color:#fff;
}

.searchModal .modal-footer{
padding:0;
border:none;
min-height:0;
}

@media (max-width:980px){
  .searchModal .search-controls-row .col-lg-2{
    flex:0 0 33.3333%;
    max-width:33.3333%;
  }
  .searchModal .search-controls{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width:640px){
  .searchModal .search-controls-row .col-lg-2{
    flex:0 0 100%;
    max-width:100%;
    margin-bottom:8px;
  }
  .searchModal .search-controls{
    grid-template-columns:1fr;
  }
}

@keyframes pop{
from{transform:scale(0.9);opacity:0;}
to{transform:scale(1);opacity:1;}
}

/* ===== LIVE STATUS ===== */

.live-status{
display:flex;
gap:15px;
margin-top:15px;
}

.busy-court{
background:#ef4444;
color:white;
padding:15px;
border-radius:10px;
}

.free-court{
background:#22c55e;
color:white;
padding:15px;
border-radius:10px;
}

/* ===== FILTER ===== */

.dashboard-filter{

background:white;
padding:15px;
border-radius:10px;

box-shadow:0 2px 8px rgba(0,0,0,0.05);

display:flex;
gap:10px;
align-items:center;
flex-wrap:wrap;

margin-bottom:20px;

}

.dashboard-filter input[type="date"]{
padding:10px 12px;
border-radius:8px;
border:1px solid #e2e8f0;
font-size:14px;
}

.dashboard-filter select{
padding:10px 12px;
border-radius:8px;
border:1px solid #e2e8f0;
font-size:14px;
background:#ffffff;
}

.dashboard-filter input[type="text"],
.dashboard-filter input[type="number"],
.dashboard-filter input[type="datetime-local"],
.dashboard-filter input[type="search"],
.dashboard-filter input[type="email"],
.dashboard-filter input[type="password"]{
padding:10px 12px;
border-radius:8px;
border:1px solid #e2e8f0;
font-size:14px;
background:#ffffff;
}

.dashboard-filter button,
.dashboard-filter button[type="submit"]{
border-radius:10px;
border:none;
padding:10px 22px;
font-size:14px;
font-weight:600;
letter-spacing:0.01em;
background:#4f46e5;
color:#fff;
cursor:pointer;
box-shadow:0 1px 2px rgba(15,23,42,0.08);
transition:background .15s ease, box-shadow .15s ease;
}
.dashboard-filter button:hover,
.dashboard-filter button[type="submit"]:hover{
background:#4338ca;
box-shadow:0 2px 6px rgba(79,70,229,0.35);
}
.dashboard-filter button:focus,
.dashboard-filter button[type="submit"]:focus{
outline:none;
box-shadow:0 0 0 2px #fff, 0 0 0 4px #6366f1;
}

.dashboard-filter label{
font-size:13px;
color:#475569;
font-weight:500;
}

/* ===== PAGE HEADER ===== */

.page-header{
display:flex;
flex-wrap:wrap;
align-items:flex-end;
justify-content:space-between;
gap:16px;
margin-bottom:10px;
}

.page-header h1{
margin:0;
font-size:1.05rem;
font-weight:600;
letter-spacing:-0.02em;
line-height:1.2;
}

.page-sub{
margin:2px 0 0;
font-size:11px;
color:#64748b;
max-width:520px;
line-height:1.35;
}

/* ===== NAV ===== */

.nav-toggle{
display:none;
width:44px;
height:40px;
border:none;
border-radius:8px;
background:#1e293b;
cursor:pointer;
position:relative;
flex-shrink:0;
}

.nav-toggle::before,
.nav-toggle::after{
content:"";
position:absolute;
left:11px;
right:11px;
height:2px;
background:white;
border-radius:1px;
transition:transform .2s, top .2s;
}

.nav-toggle::before{ top:13px; box-shadow:0 7px 0 white; }
.nav-toggle::after{ top:27px; }

.logo{
color:white;
text-decoration:none;
font-size:18px;
font-weight:600;
}

.nav-user{
font-size:13px;
color:#94a3b8;
padding:8px 12px;
background:#1e293b;
border-radius:8px;
white-space:nowrap;
}

.profile-chip{
display:flex;
align-items:center;
gap:8px;
background:#1e293b;
border-radius:999px;
padding:5px 10px 5px 5px;
}

.profile-chip::after{
content:" ▾";
font-size:11px;
color:#94a3b8;
}

.profile-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:28px;
height:28px;
border-radius:50%;
background:#6366f1;
color:white;
font-size:12px;
font-weight:700;
}

.nav-admin-menu{
right:0;
left:auto;
min-width:170px;
}

.logout-link{
color:#fca5a5 !important;
}

/* ===== STAT CARD VARIANTS ===== */

.stat-card{
position:relative;
overflow:hidden;
}

.stat-card::after{
content:"";
position:absolute;
top:0;
right:0;
width:80px;
height:80px;
background:linear-gradient(135deg,transparent 40%,rgba(99,102,241,0.08));
border-radius:0 0 0 100%;
}

.stat-card.accent-emerald .stat-value{ color:#059669; }
.stat-card.accent-amber .stat-value{ color:#d97706; }
.stat-card.accent-rose .stat-value{ color:#e11d48; }
.stat-card.accent-violet .stat-value{ color:#6d28d9; }

.stat-label{
font-size:13px;
color:#64748b;
font-weight:500;
margin:0;
}

.stat-value{
font-size:28px;
font-weight:700;
margin:8px 0 0;
letter-spacing:-0.02em;
}

.stat-hint{
font-size:9px;
font-weight:400;
line-height:1.35;
color:#94a3b8;
margin-top:6px;
}

/* Stat cards live inside .card; generic `.card p` uses large bold text — reset for dashboard/report KPI rows */
.card.stat-card > p.stat-label{
margin:0;
font-size:13px;
font-weight:500;
color:#64748b;
}

.card.stat-card > p.stat-value{
margin:8px 0 0;
font-size:28px;
font-weight:700;
letter-spacing:-0.02em;
}

.card.stat-card > p.stat-hint{
margin-top:6px;
font-size:9px;
font-weight:400;
line-height:1.35;
color:#94a3b8;
}

/* ===== CHARTS ===== */

.charts-row{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:22px;
margin:28px 0;
}

.chart-box{
background:white;
padding:22px;
border-radius:14px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
}

.chart-box h3{
margin:0 0 16px;
font-size:15px;
font-weight:600;
color:#334155;
}

.chart-box canvas{
max-height:280px;
}

/* ===== TABLE SECTION ===== */

.section-title{
font-size:1.15rem;
font-weight:600;
margin:32px 0 14px;
color:#0f172a;
}

.table-wrap{
overflow-x:auto;
border-radius:12px;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
}

/* ===== CARDS GRID (DASHBOARD) ===== */

.card-row{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:18px;
margin-bottom:22px;
}

/* ===== PANEL / TOOLBAR ===== */

.panel{
background:white;
padding:20px;
border-radius:14px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
margin-bottom:22px;
}

.toolbar{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:flex-end;
margin-bottom:20px;
}

.toolbar .form-group{
min-width:160px;
margin:0;
}

.toolbar button{
margin-top:22px;
}

/* ===== MODAL FORM ===== */

.modal-content{
max-width:520px;
width:calc(100% - 40px);
max-height:calc(100vh - 100px);
overflow-y:auto;
}

.modal-content h3{
margin:0 0 18px;
font-size:1.1rem;
}

.modal-content .form-group{
margin-bottom:14px;
}

.modal-content input:not([type="submit"]),
.modal-content select,
.modal-content textarea{
width:100%;
box-sizing:border-box;
margin:0;
}

.modal-content textarea{
min-height:80px;
resize:vertical;
}

.modal-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:20px;
}

.modal-actions button[type="submit"]{
flex:1;
min-width:120px;
}

.modal .btn-ghost{
background:#f1f5f9;
color:#334155;
}

.modal .btn-ghost:hover{
background:#e2e8f0;
}

.btn-ghost{
background:#f1f5f9;
color:#334155;
border:1px solid #e2e8f0;
}

.btn-ghost:hover{
background:#e2e8f0;
}

.icon-btn{
min-width:42px;
height:40px;
padding:0 10px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:17px;
line-height:1;
position:relative;
}

.has-tip::after{
content:attr(data-tip);
position:absolute;
left:50%;
bottom:calc(100% + 8px);
transform:translateX(-50%);
background:#0f172a;
color:#fff;
font-size:12px;
padding:6px 8px;
border-radius:6px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:opacity .15s ease, transform .15s ease;
z-index:20;
}

.has-tip:hover::after{
opacity:1;
transform:translateX(-50%) translateY(-2px);
}

.search-row{
cursor:pointer;
}

.record-actions{
margin-top:18px;
display:flex;
flex-wrap:wrap;
gap:10px;
}

.record-actions-centered{
justify-content:center;
}

.search-toolbar{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:12px;
margin-bottom:12px;
}

.search-field-wrap{
flex:1 1 auto;
min-width:260px;
margin:0;
display:flex;
flex-direction:column;
justify-content:flex-end;
}

.search-field-wrap label{
display:block;
margin:0 0 6px;
}

.search-actions{
display:flex;
align-items:center;
gap:8px;
margin-bottom:0;
justify-content:flex-end;
flex-wrap:nowrap;
flex:0 0 auto;
}

.search-field-wrap input{
height:40px;
}

.search-actions button{
height:40px;
min-width:82px;
display:inline-flex;
align-items:center;
justify-content:center;
margin:0;
}

.search-actions .btn-ghost{
background:#ef4444;
border-color:#ef4444;
color:#ffffff;
}

.search-actions .btn-ghost:hover{
background:#dc2626;
border-color:#dc2626;
color:#ffffff;
}

@media (max-width:720px){
.search-toolbar{
flex-direction:column;
align-items:stretch;
display:flex;
}
.search-actions{
justify-content:flex-end;
}
}

/* ===== GLOBAL RECORD BUTTON COLORS ===== */
.icon-btn:disabled,
.btn-ghost.icon-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}
/* PRIMARY NAVIGATION */
#prevRecord,
#nextRecord {
    background: #4a6cf7;
    color: #fff;
}
#prevRecord:hover,
#nextRecord:hover {
    background: #3b5be0;
}

/* SEARCH / PRINT (INFO) */
#searchRecord {
    background: #fb6f92;
    color: #fff;
}
#searchRecord:hover {
    background: #f2557a;
    color: #fff;
}

#printRecord {
    background: #a53860;
    color: #fff;
}
#printRecord:hover {
    background: #8f2f54;
    color: #fff;
}

/* ADD / SAVE (SUCCESS) */
#addRecord,
#saveRecord {
    background: #28a745;
    color: #fff;
}
#addRecord:hover,
#saveRecord:hover {
    background: #218838;
}

/* EDIT (WARNING) */
#editRecord {
    background: #ff9800;
    color: #fff;
}
#editRecord:hover {
    background: #e68900;
}

/* DELETE (DANGER) */
#deleteRecord {
    background: #d62828;
    color: #fff;
}
#deleteRecord:hover {
    background: #a61f1f;
}

/* CANCEL (SOFT ACTION) */
#cancelRecord {
    background: #6c757d;
    color: #fff;
}
#cancelRecord:hover {
    background: #5a6268;
}

/* EXIT (NEUTRAL) */
#exitRecord {
    background: #e0e0e0;
    color: #333;
}
#exitRecord:hover {
    background: #c7c7c7;
}
/* ===== BUTTONS SECONDARY ===== */

.add-btn{
background:linear-gradient(135deg,#6366f1,#4f46e5);
color:white;
border:none;
padding:10px 18px;
border-radius:8px;
font-size:14px;
font-weight:500;
cursor:pointer;
box-shadow:0 2px 8px rgba(99,102,241,0.35);
transition:transform .2s, box-shadow .2s;
}

.add-btn:hover{
transform:translateY(-1px);
box-shadow:0 4px 14px rgba(99,102,241,0.4);
}

.table button,
.table .editBtn,
.table .deleteBtn{
padding:6px 12px;
border-radius:6px;
border:none;
font-size:13px;
cursor:pointer;
margin-right:6px;
}

.table .editBtn{
background:#e0e7ff;
color:#4338ca;
}

.table .deleteBtn{
background:#fee2e2;
color:#b91c1c;
}

/* ===== BOOKING SLOTS ===== */

.slots{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:16px;
}

.slot{
padding:12px 16px;
border-radius:10px;
font-size:14px;
font-weight:500;
cursor:default;
transition:transform .15s;
}

.slot.booked{
background:#fee2e2;
color:#991b1b;
border:1px solid #fecaca;
}

.slot.available{
background:#ecfdf5;
color:#047857;
border:1px solid #a7f3d0;
cursor:pointer;
}

.slot.available:hover{
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(4,120,87,0.2);
}

/* ===== SEARCH INPUT (TOOLBAR) ===== */

input#searchCustomer,
.toolbar input[type="text"]{
padding:10px 14px;
border-radius:8px;
border:1px solid #e2e8f0;
font-size:14px;
min-width:220px;
}

/* ===== REPORT CARDS ===== */

.report-links{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:18px;
}

.report-card{
display:block;
padding:22px;
background:white;
border-radius:14px;
text-decoration:none;
color:#0f172a;
font-weight:600;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
transition:transform .2s, box-shadow .2s;
}

.report-card:hover{
transform:translateY(-3px);
box-shadow:0 8px 24px rgba(0,0,0,0.08);
}

/* ===== BADGES ===== */

.badge{
display:inline-block;
padding:4px 10px;
border-radius:999px;
font-size:12px;
font-weight:600;
}

.badge-success{ background:#dcfce7; color:#166534; }
.badge-warn{ background:#fef3c7; color:#92400e; }
.badge-muted{ background:#f1f5f9; color:#475569; }

/* ===== LOGIN (shared) ===== */

.login-page{
min-height:100vh;
display:grid;
grid-template-columns:1fr 1fr;
margin:0;
font-family:'Inter',sans-serif;
background:#0f172a;
}

.login-hero{
background:linear-gradient(145deg,#1e1b4b 0%,#312e81 45%,#0f172a 100%);
color:white;
padding:48px;
display:flex;
flex-direction:column;
justify-content:center;
position:relative;
overflow:hidden;
}

.login-hero::before{
content:"";
position:absolute;
inset:-40%;
background:radial-gradient(circle at 30% 20%,rgba(99,102,241,0.35),transparent 55%),
  radial-gradient(circle at 70% 80%,rgba(34,197,94,0.12),transparent 45%);
pointer-events:none;
}

.login-hero-inner{
position:relative;
z-index:1;
max-width:420px;
}

.login-hero h1{
font-size:2rem;
font-weight:700;
margin:0 0 16px;
letter-spacing:-0.03em;
line-height:1.2;
}

.login-hero p{
margin:0;
font-size:15px;
line-height:1.65;
color:rgba(255,255,255,0.78);
}

.login-panel{
display:flex;
align-items:center;
justify-content:center;
padding:40px 24px;
background:#f8fafc;
}

.login-card{
width:100%;
max-width:400px;
background:white;
padding:40px 36px;
border-radius:16px;
box-shadow:0 25px 50px -12px rgba(15,23,42,0.2);
}

.login-brand{
margin:0 0 6px;
font-size:1.35rem;
font-weight:800;
letter-spacing:-0.02em;
color:#0f172a;
}

.login-card h2{
margin:0 0 8px;
font-size:1.5rem;
font-weight:700;
color:#0f172a;
}

.login-card .login-lead{
margin:0 0 28px;
font-size:14px;
color:#64748b;
}

.login-card .form-group{
margin-bottom:18px;
}

.login-card label{
display:block;
font-size:13px;
font-weight:500;
color:#475569;
margin-bottom:6px;
}

.login-card input[type="email"],
.login-card input[type="password"]{
width:100%;
box-sizing:border-box;
padding:12px 14px;
border:1px solid #e2e8f0;
border-radius:10px;
font-size:15px;
transition:border-color .2s, box-shadow .2s;
}

.login-card input:focus{
outline:none;
border-color:#6366f1;
box-shadow:0 0 0 3px rgba(99,102,241,0.2);
}

.login-card .login-submit{
width:100%;
padding:14px;
margin-top:8px;
background:linear-gradient(135deg,#6366f1,#4f46e5);
color:white;
border:none;
border-radius:10px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:transform .15s, box-shadow .2s;
}

.login-card .login-submit:hover{
transform:translateY(-1px);
box-shadow:0 8px 20px rgba(99,102,241,0.4);
}

.login-card .error{
min-height:22px;
margin-bottom:12px;
font-size:14px;
color:#dc2626;
text-align:center;
}

@media (max-width:900px){
.login-page{
grid-template-columns:1fr;
}
.login-hero{
min-height:200px;
padding:32px 24px;
}
}

@media (max-width:768px){
.top-navbar{
flex-wrap:wrap;
gap:12px;
padding:12px 14px;
}

.nav-toggle{
display:block;
margin-left:auto;
}

.nav-cluster{
width:100%;
margin-left:0;
flex-direction:column;
align-items:stretch;
order:3;
}

.top-navbar > .logo-navbar-brand{
order:1;
}

.top-navbar > .nav-toggle{
order:2;
}

.nav-cluster .nav-right{
order:-1;
width:100%;
justify-content:flex-end;
}

.nav-cluster .nav-dropdown-menu:not(.nav-admin-menu){
left:0;
right:auto;
}

.logo{
font-size:16px;
}

.logo-navbar-image{
height:28px;
}

.logo-navbar-text{
display:none;
}

.nav-menu{
display:none;
width:100%;
flex-direction:column;
align-items:stretch;
gap:4px;
padding:8px 0 12px;
border-top:1px solid #1e293b;
margin-top:4px;
}

.nav-dropdown{
width:100%;
}

.nav-drop-link{
display:flex;
width:100%;
justify-content:space-between;
box-sizing:border-box;
}

.nav-dropdown-menu{
position:static;
display:none;
background:#111827;
border:1px solid #334155;
box-shadow:none;
padding:6px;
margin:4px 0 8px;
min-width:0;
width:100%;
box-sizing:border-box;
}

.nav-dropdown.open .nav-dropdown-menu{
display:block;
}

.nav-right{
margin-left:0;
width:100%;
display:flex;
justify-content:flex-end;
}

.nav-menu.is-open{
display:flex;
}

.nav-user{
text-align:center;
}

.profile-chip{
width:100%;
justify-content:flex-start;
}

.nav-admin{
width:100%;
}

.nav-admin-menu{
right:auto;
left:0;
}
}

/* ===== DASHBOARD SIDEBAR ===== */

.dashboard-layout{
display:grid;
grid-template-columns:220px minmax(0,1fr);
gap:28px;
align-items:start;
width:100%;
}

.dash-aside{
position:sticky;
top:20px;
background:white;
border-radius:14px;
padding:20px;
box-shadow:0 4px 14px rgba(15,23,42,0.07);
border:1px solid #e2e8f0;
}

.dash-aside-title{
margin:0 0 14px;
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.07em;
color:#64748b;
}

.dash-aside-nav{
display:flex;
flex-direction:column;
gap:8px;
}

.dash-aside-link{
display:block;
padding:12px 14px;
border-radius:10px;
background:#f8fafc;
color:#1e293b;
text-decoration:none;
font-size:14px;
font-weight:500;
border:1px solid #e2e8f0;
transition:background .2s,border-color .2s,color .2s;
}

.dash-aside-link:hover{
background:#eef2ff;
border-color:#c7d2fe;
color:#4338ca;
}

.dash-main{
min-width:0;
}

@media (max-width:960px){
.dashboard-layout{
grid-template-columns:1fr;
}
.dash-aside{
position:relative;
top:0;
}
.dash-aside-nav{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.dash-aside-title{
grid-column:1/-1;
}
}

/* ===== CALENDAR GRID ===== */

.calendar-wrap{
margin-bottom:24px;
}

.calendar-table{
width:100%;
border-collapse:collapse;
font-size:13px;
background:white;
}

.calendar-table th,
.calendar-table td{
border:1px solid #e2e8f0;
padding:10px 8px;
text-align:center;
vertical-align:middle;
}

.cal-court-col,
.cal-court-name{
text-align:left;
font-weight:600;
background:#f8fafc;
white-space:nowrap;
}

.cal-slot-head{
font-size:11px;
font-weight:600;
color:#475569;
line-height:1.3;
}

.cal-booked{
background:#fef2f2;
color:#991b1b;
font-weight:500;
}

.cal-available{
background:#ecfdf5;
color:#065f46;
font-weight:600;
cursor:pointer;
}

.cal-available:hover{
background:#a7f3d0;
}

/* Pickle / pickel courts — light yellow column tint (vs padel green free cells) */
.calendar-table th.cal-pickle-col{
background:#fefce8;
color:#854d0e;
border-color:#fde047;
}
.cal-cell.cal-pickle.cal-available{
background:#fef9c3;
color:#854d0e;
border-color:#facc15;
}
.cal-cell.cal-pickle.cal-available:hover{
background:#fef08a;
}
/* Pickle booked: orange emphasis (padel uses red .cal-booked) */
.cal-cell.cal-pickle.cal-booked{
background:#ffedd5;
color:#9a3412;
font-weight:500;
border-color:#fb923c;
}
.cal-cell.cal-pickle.cal-slot-selected{
background:#fef08a !important;
outline-color:#ca8a04;
}

.cal-cell{
min-width:72px;
}

/* ===== RANGE PRESETS ===== */

.range-preset{
padding:8px 12px;
border-radius:8px;
border:1px solid #c7d2fe;
background:#eef2ff;
color:#3730a3;
cursor:pointer;
font-size:13px;
font-weight:600;
}

.range-preset:hover{
background:#ddd6fe;
border-color:#a5b4fc;
}

/* ===== STAFF MODAL ===== */

.staff-modal-content{
max-width:560px;
}
.staff-modal-head{
display:flex;
justify-content:flex-end;
align-items:center;
margin-bottom:14px;
min-height:28px;
}
.staff-modal-head .panel-form-mode-label{
display:inline-block;
}

.staff-modules-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:8px;
}

.staff-module-item{
display:flex;
align-items:center;
gap:8px;
font-weight:400;
font-size:14px;
padding:8px 10px;
border:1px solid #e2e8f0;
border-radius:8px;
background:#f8fafc;
}

.staff-profile-panel{
padding:18px;
}

.staff-profile-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:14px;
}

.staff-profile-title{
margin:0;
font-size:18px;
font-weight:600;
}

.staff-top-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
margin-bottom:12px;
}

.staff-perm-label{
font-size:14px;
font-weight:600;
color:#334155;
margin-bottom:8px;
display:block;
}

@media (max-width:980px){
  .staff-top-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:640px){
  .staff-top-grid,
  .staff-modules-grid{
    grid-template-columns:1fr;
  }
}

/* ===== PANEL FORM MODE (Add / Edit badge, top-right) ===== */

.panel-form-mode-bar{
display:flex;
justify-content:flex-end;
align-items:center;
margin-bottom:12px;
min-height:28px;
}
.panel-form-mode-label{
display:none;
font-size:12px;
font-weight:600;
letter-spacing:0.04em;
text-transform:uppercase;
padding:6px 14px;
border-radius:9999px;
background:#dbeafe;
color:#1d4ed8;
border:1px solid #93c5fd;
}
.panel-form-mode-label.is-visible{
display:inline-block;
}
.panel-form-mode-label.is-edit{
background:#fef3c7;
color:#b45309;
border-color:#fcd34d;
}

/* Transaction entry line tables: stack sub-label under header (incl. GST) without blowing column width */
.padel-tx-lines-table thead th{
vertical-align:bottom;
line-height:1.25;
}
.padel-tx-lines-table thead th .padel-th-sub{
display:block;
font-size:10px;
font-weight:400;
color:#64748b;
margin-top:2px;
white-space:normal;
}
.padel-tx-lines-table thead th.text-right .padel-th-sub{
text-align:right;
}

/* Search modals: title left, close right (Tailwind preflight breaks Bootstrap .close float) */
.searchModal .modal-header{
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
gap:12px;
}
.searchModal .modal-header .close{
float:none;
margin:0;
padding:0;
flex-shrink:0;
}
.searchModal .modal-header .modal-title{
margin:0;
flex:1;
min-width:0;
text-align:left;
}

/* ===== LOGO THEME OVERRIDES (PADELVERSE BLUE + LIME) ===== */
:root{
--brand-blue:#0f47c3;
--brand-blue-dark:#0a3593;
--brand-blue-soft:#dce8ff;
--brand-lime:#c9ea39;
--brand-lime-dark:#9fbe1f;
}

.top-navbar{
background:var(--brand-blue);
}

.top-navbar .logo-navbar-brand:hover,
.top-navbar .nav-menu a:hover{
background:var(--brand-blue-dark);
}

.top-navbar .nav-link-calendar{
color:var(--brand-lime);
}

.top-navbar .nav-link-calendar:hover{
background:rgba(201,234,57,0.16);
color:#ecfccb;
}

.nav-toggle,
.nav-user,
.profile-chip,
.nav-dropdown-menu{
background:var(--brand-blue-dark);
}

button,
.action-btn,
.dashboard-filter button,
.dashboard-filter button[type="submit"],
.searchModal .btn.btn-primary,
.searchModal .search-action-bar .btn.btn-primary,
#prevRecord,
#nextRecord{
background:var(--brand-blue);
}

button:hover,
.action-btn:hover,
.dashboard-filter button:hover,
.dashboard-filter button[type="submit"]:hover,
.searchModal .btn.btn-primary:hover,
.searchModal .search-action-bar .btn.btn-primary:hover,
#prevRecord:hover,
#nextRecord:hover{
background:var(--brand-blue-dark);
}

.form-group input:focus,
.form-group select:focus,
.login-card input:focus{
border-color:var(--brand-blue);
box-shadow:0 0 0 3px rgba(15,71,195,0.18);
}

.login-hero{
background:linear-gradient(145deg,var(--brand-blue-dark) 0%,var(--brand-blue) 52%,#06307d 100%);
}

.login-card .login-submit{
background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-dark));
}

.login-card .login-submit:hover{
box-shadow:0 8px 20px rgba(15,71,195,0.38);
}

.add-btn{
background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-dark));
box-shadow:0 2px 8px rgba(15,71,195,0.35);
}

.add-btn:hover{
box-shadow:0 4px 14px rgba(15,71,195,0.4);
}

.dash-aside-link:hover{
background:var(--brand-blue-soft);
border-color:#b8ccff;
color:var(--brand-blue-dark);
}

.panel-form-mode-label{
background:#e8f7ac;
color:#506d00;
border-color:#cfe88a;
}

/* Keep original page look; only form card is customized */
body.login-page{
background:#0f172a !important;
}

body.login-page .login-hero{
background:linear-gradient(145deg,#1e1b4b 0%,#312e81 45%,#0f172a 100%) !important;
}

body.login-page .login-hero::before{
background:radial-gradient(circle at 30% 20%,rgba(99,102,241,0.35),transparent 55%),
  radial-gradient(circle at 70% 80%,rgba(34,197,94,0.12),transparent 45%) !important;
}

body.login-page .login-panel{
background:#f8fafc !important;
backdrop-filter:none;
}

/* Login form card background (inside the form box) */
body.login-page .login-card{
background:#063EAD !important;
color:#ffffff;
}

body.login-page .login-card h2,
body.login-page .login-card .login-brand,
body.login-page .login-card label{
color:#ffffff !important;
}

body.login-page .login-card .login-lead{
color:rgba(255,255,255,0.88) !important;
}

body.login-page .login-card input[type="text"],
body.login-page .login-card input[type="email"],
body.login-page .login-card input[type="password"]{
background:rgba(255,255,255,0.96);
color:#0f172a;
}