/* =====================================
   Artı Ofset — Admin Panel CSS
   ===================================== */
:root {
  --sidebar-bg: #ffffff;
  --sidebar-brand: #b3b4e8;
  --sidebar-text: #3c4876;
  --sidebar-icon: #9a94a7;
  --sidebar-label: #9c9fa6;
  --sidebar-active-bg: #f6f8fa;
  --sidebar-active: #fc5661;
  --primary: #fc5661;
  --primary-dark: #e84550;
  --danger: #fc5661;
  --warning: #ffc100;
  --success: #71c016;
  --info: #007bff;
  --purple: #b3b4e8;
  --pink: #ec4899;
  --topbar-btn: #fc5661;
  --dark: #3c4876;
  --gray: #9c9fa6;
  --gray-light: #f2edf3;
  --light: #f2edf3;
  --white: #ffffff;
  --border: #e9e8ef;
  --shadow: 0 0 10px 0 rgba(183,192,206,.2);
  --shadow-lg: 0 0 20px 0 rgba(183,192,206,.3);
  --radius: 4px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Lato', -apple-system, 'Segoe UI', sans-serif;
  font-size:14px;
  background:var(--light);
  color:var(--dark);
  font-size:14px;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
ul { list-style:none; }
input, select, textarea, button { font-family:inherit; font-size:14px; }

/* ============ AUTH ============ */
.auth-body {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #1e2a44, #6366f1);
  padding:20px;
}
.auth-card {
  background:var(--white);
  padding:40px;
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  max-width:420px; width:100%;
}
.auth-logo {
  text-align:center; margin-bottom:26px;
}
.auth-logo .plus {
  font-size:60px; color:var(--primary); font-weight:800;
  line-height:1;
}
.auth-logo h2 { margin-top:10px; color:#1e2a44; font-size:24px; }
.auth-logo p { color:var(--gray); margin-top:4px; font-size:14px; }

.form-group { margin-bottom:16px; }
.form-group label {
  display:block; margin-bottom:6px;
  font-weight:600; font-size:13px; color:#374151;
}
.form-control {
  width:100%; padding:11px 14px;
  border:1px solid var(--border);
  border-radius:8px; font-size:14px;
  background:var(--white);
  transition:.2s;
}
.form-control:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(99,102,241,.15);
}
textarea.form-control { min-height:120px; resize:vertical; }

.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px;
  font-weight:600; font-size:14px;
  border:none; border-radius:8px;
  cursor:pointer; transition:.2s;
}
.btn-primary { background:var(--primary); color:white; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-secondary { background:var(--topbar-btn); color:white; }
.btn-danger { background:var(--danger); color:white; }
.btn-danger:hover { background:#b52633; }
.btn-success { background:var(--success); color:white; }
.btn-info { background:var(--info); color:white; }
.btn-warning { background:var(--warning); color:white; }
.btn-block { width:100%; justify-content:center; }
.btn-sm { padding:6px 12px; font-size:12px; }

/* ============ LAYOUT ============ */
.admin-body {
  display:flex;
  min-height:100vh;
  background:var(--light);
}
.admin-sidebar {
  width:260px;
  background:var(--sidebar-bg);
  color:var(--sidebar-text);
  position:fixed; top:0; left:0; bottom:0;
  overflow-y:auto;
  z-index:100;
  transition:transform .3s;
  border-right:1px solid var(--border);
  box-shadow:0 0 30px rgba(0,0,0,.04);
}
.admin-main {
  margin-left:260px;
  flex:1;
  display:flex; flex-direction:column;
  min-height:100vh;
}
.admin-content {
  padding:24px;
  flex:1;
}
.admin-footer {
  padding:16px 24px;
  background:var(--white);
  border-top:1px solid var(--border);
  color:var(--gray);
  font-size:13px;
}

.sidebar-brand {
  padding:24px 20px;
  border-bottom:1px solid var(--border);
  text-align:center;
}
.brand-title { color:var(--sidebar-brand); font-weight:700; letter-spacing:2px; font-size:19px; }
.brand-sub { color:var(--gray); font-size:11px; margin-top:4px; letter-spacing:1px; }

.sidebar-user {
  padding:16px 20px;
  display:flex; align-items:center; gap:12px;
  border-bottom:1px solid var(--border);
}
.user-avatar {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--purple));
  display:flex; align-items:center; justify-content:center;
  color:white; font-weight:700; font-size:18px;
}
.sidebar-user strong { display:block; color:var(--sidebar-text); font-size:14px; }
.sidebar-user small { color:var(--gray); font-size:11px; }

.sidebar-section {
  padding:16px 22px 6px;
  font-size:12px;
  color:var(--sidebar-label); letter-spacing:.4px;
  font-weight:500;
}
.sidebar-nav a {
  display:flex; align-items:center; gap:13px;
  padding:11px 22px;
  color:var(--sidebar-text); font-size:14.5px;
  border-left:3px solid transparent;
  transition:.2s;
}
.sidebar-nav a i { width:22px; text-align:center; font-size:19px; line-height:1; color:var(--sidebar-icon); vertical-align:middle; }
.sidebar-nav a:hover {
  background:#f6f8fb;
  color:var(--sidebar-active);
}
.sidebar-nav a:hover i { color:var(--sidebar-active); }
.sidebar-nav a.active {
  background:var(--sidebar-active-bg);
  color:var(--sidebar-active);
  border-left-color:var(--sidebar-active);
  font-weight:500;
}
.sidebar-nav a.active i { color:var(--sidebar-active); }
.sidebar-nav .badge {
  margin-left:auto;
  background:var(--danger); color:#fff;
  padding:1px 8px; border-radius:10px;
  font-size:11px; font-weight:600;
}

/* Collapsible submenu */
.nav-group .nav-parent { cursor:pointer; }
.nav-group .nav-parent span { flex:1; }
.nav-group .nav-parent .chevron {
  margin-left:auto; font-size:11px; color:var(--gray);
  transition:transform .25s;
}
.nav-group.open .nav-parent .chevron { transform:rotate(180deg); }
.nav-group.open .nav-parent { color:var(--sidebar-active); }
.nav-group.open .nav-parent i:first-child { color:var(--sidebar-active); }
.nav-sub {
  max-height:0; overflow:hidden;
  transition:max-height .3s ease;
  background:#fafbfd;
}
.nav-group.open .nav-sub { max-height:400px; }
.nav-sub a {
  display:block; padding:9px 22px 9px 55px;
  color:var(--sidebar-text); font-size:13.5px;
  border-left:3px solid transparent;
  transition:.2s;
}
.nav-sub a::before {
  content:'\f111'; font-family:'Font Awesome 6 Free'; font-weight:900;
  font-size:5px; color:var(--gray); margin-right:10px; vertical-align:middle;
}
.nav-sub a:hover { color:var(--sidebar-active); background:#f2f6fb; }
.nav-sub a.active {
  color:var(--sidebar-active); font-weight:500;
  border-left-color:var(--sidebar-active);
  background:var(--sidebar-active-bg);
}
.nav-sub a.active::before { color:var(--sidebar-active); }

.sidebar-backdrop {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.4); z-index:99;
}
.sidebar-backdrop.visible { display:block; }

/* ============ TOPBAR ============ */
.admin-topbar {
  background:var(--white);
  border-bottom:1px solid var(--border);
  padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:50;
}
.topbar-left, .topbar-right { display:flex; align-items:center; gap:14px; }
.sidebar-toggle {
  background:none; border:none;
  font-size:20px; color:var(--dark); cursor:pointer;
  display:none;
}
.btn-view-site {
  padding:9px 18px;
  background:var(--topbar-btn);
  color:white; border-radius:6px; font-size:13.5px;
  display:inline-flex; align-items:center; gap:7px;
}
.btn-view-site:hover { background:#2d3850; }
.topbar-grid {
  width:40px; height:40px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:var(--sidebar-icon); font-size:17px;
}
.topbar-grid:hover { background:var(--light); color:var(--primary); }

.topbar-icon {
  width:38px; height:38px; border-radius:50%;
  background:var(--light);
  display:flex; align-items:center; justify-content:center;
  color:var(--gray);
}
.topbar-icon:hover { background:var(--primary); color:#fff; }

.topbar-user {
  display:flex; align-items:center; gap:10px;
}
.user-avatar-small {
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--purple));
  display:flex; align-items:center; justify-content:center;
  color:white; font-weight:700;
}
.topbar-user strong { display:block; font-size:13px; color:var(--dark); }
.topbar-user small { color:var(--gray); font-size:11px; }

/* ============ PAGE HEADER ============ */
.page-header {
  background:var(--white);
  padding:18px 22px;
  border-radius:var(--radius);
  margin-bottom:20px;
  box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px;
}
.page-header h1 { font-size:20px; color:var(--dark); font-weight:700; }
.page-header .breadcrumb {
  color:var(--gray); font-size:13px; margin-top:4px;
}
.page-header .breadcrumb i { margin:0 6px; font-size:10px; }
.page-header .breadcrumb a:hover { color:var(--primary); }

.stat-strip {
  display:flex; gap:6px; margin-left:auto;
}
.stat-pill {
  background:var(--dark); color:#fff;
  padding:6px 14px; border-radius:6px;
  font-size:13px; font-weight:600;
}
.stat-pill.pill-danger { background:var(--danger); }
.stat-pill.pill-reset { background:var(--danger); cursor:pointer; border:none; }

/* ============ ALERTS ============ */
.alert {
  padding:12px 18px; border-radius:8px;
  margin-bottom:16px; display:flex; gap:8px; align-items:center;
  font-weight:500;
}
.alert-success { background:#d4edda; color:#155724; border-left:4px solid var(--success); }
.alert-error { background:#f8d7da; color:#721c24; border-left:4px solid var(--danger); }
.alert-info { background:#d1ecf1; color:#0c5460; border-left:4px solid var(--info); }
.alert-help {
  background:var(--topbar-btn); color:#fff;
  padding:14px 18px; border-radius:8px; margin-bottom:20px;
  display:flex; justify-content:space-between; align-items:center;
}

/* ============ STATS CARDS ============ */
.stats-cards {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:16px; margin-bottom:20px;
}
.stat-card {
  background:var(--white);
  padding:20px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative;
}
.stat-card .label { color:var(--gray); font-size:13px; margin-bottom:4px; }
.stat-card .value {
  font-size:26px; font-weight:800;
  display:flex; justify-content:space-between; align-items:center;
}
.stat-card .value .count { font-size:14px; color:var(--gray); font-weight:500; }
.stat-card .bar {
  height:6px; background:var(--gray-light); border-radius:3px;
  margin-top:12px; overflow:hidden;
}
.stat-card .bar-fill { height:100%; border-radius:3px; }
.stat-card .sub {
  display:flex; justify-content:space-between; align-items:center;
  color:var(--gray); font-size:12px; margin-top:8px;
}
.stat-card.online .value { color:var(--success); }
.stat-card.online .bar-fill { background:var(--success); }
.stat-card.today .value { color:var(--primary); }
.stat-card.today .bar-fill { background:var(--primary); }
.stat-card.yesterday .value { color:var(--danger); }
.stat-card.yesterday .bar-fill { background:var(--danger); }
.stat-card.month .value { color:var(--warning); }
.stat-card.month .bar-fill { background:var(--warning); }

/* ============ WIDGETS ============ */
.widget {
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:20px;
  overflow:hidden;
}
.widget-header {
  padding:18px 22px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.widget-header h3 {
  display:flex; align-items:center; gap:10px;
  font-size:16px; color:var(--dark);
}
.widget-header h3 .icon-box {
  width:40px; height:40px; border-radius:8px;
  background:linear-gradient(135deg, var(--primary), var(--purple));
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}
.widget-header h3 small { display:block; color:var(--gray); font-size:12px; font-weight:400; }
.widget-body { padding:22px; }
.widget-actions { display:flex; gap:8px; }

/* ============ TABLES ============ */
.table-wrap {
  overflow-x:auto;
}
.table {
  width:100%; border-collapse:collapse; background:var(--white);
}
.table th, .table td {
  padding:12px 14px; text-align:left;
  border-bottom:1px solid var(--border);
  font-size:13.5px;
}
.table th {
  background:var(--light); color:var(--dark);
  font-weight:700; font-size:12px; text-transform:uppercase;
  letter-spacing:.5px;
}
.table tbody tr:hover { background:var(--light); }
.table .empty { text-align:center; color:var(--gray); padding:36px; }

.status-badge {
  padding:4px 10px; border-radius:12px; font-size:12px; font-weight:600;
  display:inline-block;
}
.status-preparing, .status-open, .status-new { background:#fff3cd; color:#856404; }
.status-processing, .status-replied { background:#d1ecf1; color:#0c5460; }
.status-completed { background:#d4edda; color:#155724; }
.status-cancelled, .status-closed { background:#f8d7da; color:#721c24; }

.action-btns { display:flex; gap:5px; }
.action-btns .btn {
  padding:6px 8px; font-size:12px; border-radius:5px;
}
.action-btns form { display:inline; }

/* ============ FORMS SECTION ============ */
.card {
  background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px; margin-bottom:20px;
}
.card-title {
  font-size:16px; font-weight:700; color:var(--dark);
  margin-bottom:16px; padding-bottom:12px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:8px;
}

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-row-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }

.checkbox-wrap {
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
  cursor:pointer;
}
.checkbox-wrap input { width:16px; height:16px; cursor:pointer; }

.two-col { display:grid; grid-template-columns:2fr 1fr; gap:20px; }
.two-col-even { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* ============ NOTES ============ */
.notes-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:14px;
}
.note-card {
  padding:16px; border-radius:10px;
  box-shadow:var(--shadow);
  min-height:160px;
}
.note-card h4 { margin-bottom:8px; color:#333; }
.note-card p { color:#555; font-size:13px; white-space:pre-wrap; }
.note-card .note-actions { margin-top:12px; text-align:right; }

/* ============ RESPONSIVE ============ */
@media (max-width: 992px) {
  .admin-sidebar { transform:translateX(-100%); }
  .admin-sidebar.open { transform:translateX(0); }
  .admin-main { margin-left:0; }
  .sidebar-toggle { display:block; }
  .form-row, .form-row-3, .two-col, .two-col-even { grid-template-columns:1fr; }
}