/* Global box sizing */
*{box-sizing:border-box}

/* Page */
body{
margin:0;
font-family:Arial,sans-serif;
background:#f5f7fb;
color:#1f2937
}

/* Top navigation bar */
.topbar{
height:64px;
background:#111827;
color:#fff;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 24px
}

/* SPD logo */
.logo{
font-size:20px;
font-weight:700
}

/* Logged-in admin area */
.admin{
font-size:14px
}

/* Main page layout */
.layout{
display:flex;
min-height:calc(100vh - 64px)
}

/* Sidebar */
.sidebar{
width:230px;
background:#fff;
border-right:1px solid #e5e7eb;
padding:20px 12px
}

/* Sidebar links */
.sidebar a{
display:block;
padding:12px 14px;
margin:4px 0;
text-decoration:none;
color:#374151;
border-radius:8px
}

/* Sidebar hover and active state */
.sidebar a:hover,
.sidebar a.active{
background:#eef2ff;
color:#4338ca
}

/* Main content */
.main{
flex:1;
padding:28px
}

/* Dashboard cards */
.cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin:20px 0
}

/* Individual card */
.card{
background:#fff;
border:1px solid #e5e7eb;
border-radius:12px;
padding:20px
}

/* Card heading */
.card h3{
margin:0 0 10px;
font-size:14px;
color:#6b7280
}

/* Card number */
.card strong{
font-size:28px
}

/* Content panel */
.panel{
background:#fff;
border:1px solid #e5e7eb;
border-radius:12px;
padding:20px
}

/* Tables */
table{
width:100%;
border-collapse:collapse
}

/* Table cells */
th,
td{
text-align:left;
padding:13px;
border-bottom:1px solid #e5e7eb
}

/* Table headings */
th{
font-size:13px;
color:#6b7280;
background:#f9fafb
}

/* Default button */
.btn{
display:inline-block;
padding:9px 14px;
border-radius:7px;
text-decoration:none;
background:#4338ca;
color:#fff;
border:0;
cursor:pointer
}

/* Search form */
.search{
display:flex;
gap:10px;
margin-bottom:18px
}

/* Search input */
.search input{
flex:1;
padding:10px;
border:1px solid #d1d5db;
border-radius:7px
}

/* Status badge */
.badge{
padding:4px 8px;
border-radius:12px;
font-size:12px;
background:#dcfce7;
color:#166534
}

/* ============================= */
/* Action Popup / Modal */
/* ============================= */

/* Modal background */
.modal{
display:none;
position:fixed;
inset:0;
background:rgba(15,23,42,.55);
align-items:center;
justify-content:center;
padding:20px;
z-index:9999
}

/* Show modal */
.modal.show{
display:flex
}

/* Popup box */
.modal-box{
width:100%;
max-width:460px;
background:#fff;
border-radius:16px;
padding:24px;
box-shadow:0 20px 50px rgba(0,0,0,.2)
}

/* Popup title */
.modal-box h2{
margin:0 0 8px;
font-size:20px
}

/* Popup description */
.modal-message{
margin:0 0 20px;
color:#6b7280;
font-size:14px;
line-height:1.5
}

/* Popup labels */
.modal-box label{
display:block;
font-weight:600;
margin-bottom:8px
}

/* Popup textarea and select */
.modal-box textarea,
.modal-box select{
width:100%;
padding:11px;
border:1px solid #d1d5db;
border-radius:8px;
font-family:inherit;
font-size:14px
}

/* Popup action buttons */
.modal-actions{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:20px
}

/* Cancel button */
.btn-cancel{
background:#e5e7eb;
color:#374151
}

/* Dangerous actions */
.btn-danger{
background:#dc2626
}

/* ============================= */
/* Responsive Design */
/* ============================= */

/* Tablet */
@media(max-width:900px){
.sidebar{
width:190px
}

.cards{
grid-template-columns:repeat(2,1fr)
}
}

/* Mobile */
@media(max-width:600px){
.sidebar{
display:none
}

.main{
padding:15px
}

.cards{
grid-template-columns:1fr
}
}