/* Sultan Motors — Admin Panel — Redesigned UI */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');

:root {
  --primary:       #0f1117;
  --primary-light: #1a1d27;
  --accent:        #c9a84c;
  --accent-light:  #e2bc68;
  --accent-dim:    rgba(201,168,76,.12);
  --white:         #ffffff;
  --surface:       #f6f7fb;
  --surface-2:     #eef0f6;
  --card-bg:       #ffffff;
  --border:        #e4e6ef;
  --text-primary:  #0f1117;
  --text-secondary:#5a5f7a;
  --text-muted:    #9599b0;
  --success:       #12a671;
  --success-bg:    rgba(18,166,113,.1);
  --warning:       #d08b2d;
  --warning-bg:    rgba(208,139,45,.1);
  --danger:        #e03b3b;
  --danger-bg:     rgba(224,59,59,.1);
  --info:          #2563eb;
  --info-bg:       rgba(37,99,235,.1);
  --sidebar-w:     260px;
  --topbar-h:      64px;
  --radius:        12px;
  --radius-sm:     8px;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow:        0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:     0 12px 40px rgba(0,0,0,.14);
  --transition:    .18s cubic-bezier(.4,0,.2,1);
  --font:          'DM Sans','Segoe UI',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--surface);color:var(--text-primary);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%}
button{cursor:pointer;font-family:var(--font)}
input,select,textarea{font-family:var(--font)}

/* ── LAYOUT ── */
.admin-wrapper{display:flex;min-height:100vh}

/* ════ SIDEBAR ════ */
.admin-sidebar{
  width:var(--sidebar-w);background:var(--primary);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:200;
  overflow-y:auto;scrollbar-width:none;
  border-right:1px solid rgba(255,255,255,.04)
}
.admin-sidebar::-webkit-scrollbar{display:none}

.sidebar-logo{
  padding:22px 20px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:12px
}
.sidebar-logo img{height:42px;width:auto}
.sidebar-logo-text .name{font-size:13px;font-weight:700;color:#fff;letter-spacing:.3px}
.sidebar-logo-text .sub{font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-top:1px}

.sidebar-nav{padding:14px 10px;flex:1}
.nav-group{margin-bottom:6px}
.nav-label{
  font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:1.5px;color:rgba(255,255,255,.2);
  padding:10px 10px 5px
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;font-size:13px;font-weight:500;
  color:rgba(255,255,255,.5);border-radius:var(--radius-sm);
  transition:all var(--transition);margin-bottom:1px
}
.nav-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.9)}
.nav-item.active{
  background:linear-gradient(135deg,rgba(201,168,76,.22),rgba(201,168,76,.06));
  color:var(--accent);font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(201,168,76,.18)
}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.8}
.nav-item.active svg{opacity:1}
.nav-badge{
  margin-left:auto;background:var(--danger);
  color:#fff;font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:20px;
  animation:pulse-badge 2.5s infinite
}
@keyframes pulse-badge{0%,100%{box-shadow:0 0 0 0 rgba(224,59,59,.4)}50%{box-shadow:0 0 0 5px rgba(224,59,59,0)}}

.sidebar-footer{
  padding:14px 10px 18px;
  border-top:1px solid rgba(255,255,255,.06)
}
.sidebar-footer a{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:var(--radius-sm);
  font-size:12px;color:rgba(255,255,255,.35);
  transition:all var(--transition)
}
.sidebar-footer a:hover{background:rgba(255,255,255,.06);color:var(--accent)}
.sidebar-user{
  display:flex;align-items:center;gap:10px;
  padding:10px;margin-top:6px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06)
}
.sidebar-user .avatar{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  color:var(--primary);font-weight:800;font-size:12px;
  display:flex;align-items:center;justify-content:center
}
.sidebar-user .info .uname{font-size:12px;font-weight:600;color:rgba(255,255,255,.75)}
.sidebar-user .info .urole{font-size:10px;color:rgba(255,255,255,.28)}

/* ════ MAIN ════ */
.admin-main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh}

.admin-topbar{
  position:sticky;top:0;z-index:100;
  height:var(--topbar-h);
  background:rgba(246,247,251,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px
}
.topbar-title{font-size:16px;font-weight:700;color:var(--text-primary)}
.topbar-right{display:flex;align-items:center;gap:12px}
.topbar-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  color:var(--primary);font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px var(--accent-dim)
}
.topbar-user-name{font-size:13px;font-weight:600;color:var(--text-primary)}

.admin-content{padding:28px;flex:1}

/* ════ PAGE HEADER ════ */
.page-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:24px;flex-wrap:wrap;gap:12px
}
.page-title{font-size:21px;font-weight:700;color:var(--text-primary)}
.page-sub{font-size:13px;color:var(--text-muted);margin-top:2px}

/* ════ STAT CARDS ════ */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{
  background:var(--card-bg);border-radius:var(--radius);
  padding:20px 22px;border:1px solid var(--border);
  box-shadow:var(--shadow-sm);overflow:hidden;position:relative;
  transition:transform var(--transition),box-shadow var(--transition)
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat-card-accent{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-light))}
.stat-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:12px}
.stat-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted);margin-bottom:5px}
.stat-value{font-size:30px;font-weight:700;color:var(--text-primary);line-height:1}
.stat-change{font-size:12px;color:var(--text-muted);margin-top:5px}
.stat-change.up{color:var(--success)}
.stat-change.down{color:var(--danger)}

/* ════ TABLES ════ */
.admin-table-wrap{
  background:var(--card-bg);border-radius:var(--radius);
  border:1px solid var(--border);box-shadow:var(--shadow-sm);overflow:hidden
}
.table-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);
  flex-wrap:wrap;gap:10px
}
.table-title{font-size:14px;font-weight:700;color:var(--text-primary)}
.admin-table{width:100%;border-collapse:collapse;font-size:13px}
.admin-table th{
  text-align:left;padding:10px 16px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  color:var(--text-muted);background:var(--surface);
  border-bottom:1px solid var(--border);white-space:nowrap
}
.admin-table td{
  padding:12px 16px;border-bottom:1px solid var(--surface-2);
  vertical-align:middle;color:var(--text-primary)
}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tbody tr{transition:background var(--transition)}
.admin-table tbody tr:hover td{background:var(--surface)}
.admin-table .car-thumb{width:62px;height:42px;object-fit:cover;border-radius:6px;background:var(--surface-2)}
.admin-table .no-thumb{width:62px;height:42px;border-radius:6px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-muted)}

/* ════ STATUS BADGES ════ */
.status-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:20px;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap
}
.status-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.status-available,.status-active,.status-confirmed,.status-replied,.status-accepted{background:var(--success-bg);color:var(--success)}
.status-reserved,.status-pending,.status-reviewing,.status-offered,.status-warning{background:var(--warning-bg);color:var(--warning)}
.status-sold,.status-archived,.status-completed,.status-closed,.status-inactive{background:var(--surface-2);color:var(--text-muted)}
.status-draft,.status-read,.status-info{background:var(--info-bg);color:var(--info)}
.status-new,.status-cancelled,.status-declined,.status-danger{background:var(--danger-bg);color:var(--danger)}

/* ════ BUTTONS ════ */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;border:1.5px solid transparent;
  transition:all var(--transition);cursor:pointer;white-space:nowrap
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  color:var(--primary);box-shadow:0 2px 8px rgba(201,168,76,.28)
}
.btn-primary:hover{box-shadow:0 4px 16px rgba(201,168,76,.4);transform:translateY(-1px)}
.btn-dark{background:var(--primary);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.14)}
.btn-dark:hover{background:#1e2130;transform:translateY(-1px)}
.btn-outline{background:var(--card-bg);color:var(--text-primary);border-color:var(--border)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.btn-danger{background:transparent;color:var(--danger);border-color:rgba(224,59,59,.25)}
.btn-danger:hover{background:var(--danger-bg);border-color:var(--danger)}
.btn-success{background:var(--success);color:#fff;box-shadow:0 2px 8px rgba(18,166,113,.22)}
.btn-success:hover{background:#0f9260;transform:translateY(-1px)}
.btn-sm{padding:6px 13px;font-size:12px}
.btn-xs{padding:3px 9px;font-size:11px;border-radius:6px;font-weight:600}
.action-btns{display:flex;gap:5px;flex-wrap:wrap;align-items:center}

/* ════ FORMS ════ */
.form-card{
  background:var(--card-bg);border-radius:var(--radius);
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
  padding:24px;margin-bottom:20px
}
.form-card-title{
  font-size:14px;font-weight:700;color:var(--text-primary);
  margin-bottom:20px;padding-bottom:14px;
  border-bottom:1px solid var(--surface-2);
  display:flex;align-items:center;gap:8px
}
.form-card-title::before{
  content:'';width:3px;height:16px;
  border-radius:2px;background:var(--accent);display:inline-block
}
.form-group{margin-bottom:16px}
.form-label{
  display:block;font-size:11px;font-weight:700;
  color:var(--text-secondary);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.5px
}
.form-control{
  width:100%;padding:10px 13px;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:13px;color:var(--text-primary);background:var(--card-bg);
  transition:border-color var(--transition),box-shadow var(--transition)
}
.form-control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,168,76,.1)}
.form-control::placeholder{color:var(--text-muted)}
select.form-control{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239599b0' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px
}
textarea.form-control{resize:vertical;min-height:90px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.form-hint{font-size:11px;color:var(--text-muted);margin-top:4px}
.form-check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;color:var(--text-secondary)}
.form-check input{accent-color:var(--accent);width:15px;height:15px}
.form-section-label{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:var(--text-muted);margin:20px 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--surface-2)
}

/* Feature checkboxes */
.features-check-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.feature-check-item{
  display:flex;align-items:center;gap:7px;
  padding:7px 10px;border-radius:7px;
  border:1.5px solid var(--border);font-size:12px;cursor:pointer;
  transition:all var(--transition);color:var(--text-secondary)
}
.feature-check-item:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.feature-check-item input[type=checkbox]{accent-color:var(--accent)}
.feature-check-item:has(input:checked){border-color:var(--accent);background:var(--accent-dim);color:var(--text-primary);font-weight:600}

/* ════ ALERTS ════ */
.alert{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 16px;border-radius:var(--radius-sm);
  font-size:13px;margin-bottom:16px;
  animation:slideDown .25s ease
}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.alert-success{background:var(--success-bg);color:var(--success);border:1px solid rgba(18,166,113,.2)}
.alert-error  {background:var(--danger-bg); color:var(--danger); border:1px solid rgba(224,59,59,.2)}
.alert-info   {background:var(--info-bg);   color:var(--info);   border:1px solid rgba(37,99,235,.2)}
.alert-warning{background:var(--warning-bg);color:var(--warning);border:1px solid rgba(208,139,45,.2)}

/* ════ FILTER BAR ════ */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filter-bar .form-control{width:auto}
.search-input{min-width:200px}

/* ════ PAGINATION ════ */
.pagination{
  display:flex;gap:4px;align-items:center;justify-content:flex-end;
  padding:14px 20px;border-top:1px solid var(--surface-2)
}
.page-btn{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);border:1px solid var(--border);
  font-size:12px;font-weight:600;color:var(--text-secondary);
  transition:all var(--transition)
}
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ════ STATUS SELECT ════ */
.status-select{
  padding:5px 10px;border-radius:6px;border:1.5px solid var(--border);
  font-size:11px;font-weight:600;background:var(--card-bg);color:var(--text-primary);
  transition:border-color var(--transition);cursor:pointer
}
.status-select:focus{outline:none;border-color:var(--accent)}

/* ════ UPLOAD ════ */
.upload-zone{
  border:2px dashed var(--border);border-radius:var(--radius-sm);
  padding:24px;text-align:center;cursor:pointer;
  transition:all var(--transition);background:var(--surface)
}
.upload-zone:hover{border-color:var(--accent);background:var(--accent-dim)}

/* ════ MOBILE ════ */
@media(max-width:960px){
  .admin-sidebar{transform:translateX(-100%);transition:transform .25s ease}
  .admin-sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .admin-main{margin-left:0}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .form-row,.form-row-3{grid-template-columns:1fr}
  .admin-table-wrap{overflow-x:auto}
  #sidebarToggle{display:flex!important}
  .features-check-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .stats-grid{grid-template-columns:1fr}
  .admin-content{padding:16px}
  .admin-topbar{padding:0 16px}
}