:root {
  --bg: #081523;
  --panel: rgba(10, 25, 40, 0.92);
  --card: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.1);
  --text: #eef5fb;
  --text-soft: #b9c9d9;
  --muted: #7c95ac;
  --accent: #ffb23f;
  --accent-strong: #ff8d30;
  --success: #4bde9b;
  --danger: #ff8f8f;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow: 0 24px 60px rgba(3, 8, 16, 0.38);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255, 178, 63, 0.18), transparent 24%),
    linear-gradient(180deg, #06111b 0%, #0b1b2b 100%);
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .16em; color: var(--accent); font-weight: 700; }

.admin-shell { min-height: 100vh; padding: 18px; }

.login-screen { min-height: calc(100vh - 36px); display: grid; place-items: center; }
.login-card,
.admin-card,
.admin-sidebar,
.admin-topbar,
.preview-frame iframe,
.delivery-status,
.request-item,
.session-item,
.chat-bubble {
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.login-card {
  width: min(1080px, 100%);
  display: grid;
  grid-template-columns: .9fr .8fr;
  gap: 28px;
  padding: 34px;
  border-radius: 32px;
  background: var(--panel);
}

.login-logo { max-width: 280px; }
.login-copy p { color: var(--text-soft); line-height: 1.7; }
.login-copy h1, .admin-topbar h2, .card-header h3 { font-family: 'Space Grotesk', sans-serif; margin: 0; }
.login-form, .field-grid, .status-list, .request-list, .session-list, .chat-log { display: grid; gap: 16px; }
.login-form label, .field-grid label { display: grid; gap: 8px; }

input, textarea, select {
  width: 100%;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 14px;
}

.password-mask-input {
  display: none;
  letter-spacing: 0.22em;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

textarea { resize: vertical; }

.login-form button,
.sidebar-actions button,
.chat-actions button,
.form-actions button,
.admin-chat-form button {
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 700;
  color: #08131d;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
}

.sidebar-actions .ghost { background: rgba(255,255,255,.07); color: var(--text); border: 1px solid var(--border); }
.login-result.error, .inline-result.error { color: var(--danger); }
.inline-result.success { color: var(--success); }

.admin-app {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 18px;
}

.admin-sidebar,
.admin-topbar,
.admin-card {
  background: var(--panel);
  border-radius: var(--radius-xl);
}

.admin-sidebar {
  padding: 20px;
  display: grid;
  gap: 22px;
  align-self: start;
  position: sticky;
  top: 18px;
}

.sidebar-brand { display: flex; gap: 14px; align-items: center; }
.sidebar-brand img { width: 58px; height: 58px; object-fit: contain; }
.sidebar-brand strong { display: block; }
.sidebar-brand span { color: var(--muted); font-size: 14px; }

.sidebar-nav, .sidebar-actions { display: grid; gap: 10px; }
.sidebar-nav button {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text-soft);
  text-align: left;
  padding: 14px 16px;
  border-radius: 16px;
}
.sidebar-nav button.active {
  background: rgba(255,178,63,.15);
  color: var(--text);
  border-color: rgba(255,178,63,.35);
}

.admin-main { display: grid; gap: 18px; min-width: 0; }
.admin-topbar {
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.delivery-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
}
.delivery-status span {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: var(--text-soft);
  font-size: 13px;
}

.tab-panel { display: none; gap: 18px; }
.tab-panel.active { display: grid; }

.stats-grid, .admin-grid.two {
  display: grid;
  gap: 18px;
}
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chat-layout { grid-template-columns: 360px 1fr; }

.stats-grid article,
.status-item,
.request-item,
.session-item,
.chat-bubble {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.stats-grid article { padding: 18px; }
.stats-grid span { display: block; color: var(--muted); font-size: 13px; }
.stats-grid strong { display: block; margin-top: 12px; font-size: 2rem; }

.admin-card { padding: 22px; min-width: 0; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.status-list { gap: 10px; }
.status-item { padding: 14px; display: grid; gap: 6px; }
.status-item strong { color: var(--text); }
.status-item span { color: var(--text-soft); line-height: 1.6; }

.field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-grid .full, .toggle-row { grid-column: 1 / -1; }
.toggle-row { display: flex; flex-wrap: wrap; gap: 12px; }
.toggle-row label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
}

.request-list, .session-list, .chat-log { max-height: 68vh; overflow: auto; }
.request-item { padding: 16px; display: grid; gap: 12px; }
.request-item .meta, .request-item .chips { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 13px; }
.request-item footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.request-item select { max-width: 200px; }
.request-item .photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.request-item .photos a {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  color: var(--text-soft);
}

.session-item { padding: 14px; display: grid; gap: 8px; }
.session-item.active { border-color: rgba(255,178,63,.45); }
.session-item.unread { background: rgba(255,178,63,.08); }

.chat-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.chat-log { display: grid; gap: 12px; padding-right: 4px; }
.chat-bubble { padding: 14px; max-width: 90%; }
.chat-bubble.customer { justify-self: end; background: rgba(255,178,63,.15); }
.chat-bubble.admin { background: rgba(72,222,155,.14); }
.chat-bubble.ela { background: rgba(255,255,255,.06); }
.chat-bubble strong { display: block; margin-bottom: 6px; text-transform: capitalize; }
.chat-bubble small { display: block; margin-top: 8px; color: var(--muted); }

.admin-chat-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 14px; }
.preview-frame { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.preview-frame iframe { width: 100%; min-height: 720px; border: 0; background: #fff; }
.form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }

/* ── CHAT STATUS BUTTONS ── */
.chat-status-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.chat-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text-soft);
  font-weight: 600;
  transition: all .18s;
}
.chat-status-btn:hover { background: rgba(255,255,255,.08); }
.chat-status-btn.active-status { border-color: var(--accent); background: rgba(255,178,63,.15); color: var(--text); }
.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-online { background: #22c55e; }
.dot-mesgul { background: #f59e0b; }
.dot-kapali { background: #ef4444; }

/* ── QUOTE FORM ── */
.quote-form { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 14px; margin-top: 4px; }
.quote-form-header { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin-bottom: 2px; }
.btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
}
.btn-sm:hover { background: rgba(255,178,63,.15); border-color: rgba(255,178,63,.35); color: var(--text); }

/* ── ANIMATIONS ── */
@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
@keyframes bounce-in {
  0% { transform: translateY(-8px); opacity: 0; }
  60% { transform: translateY(2px); }
  100% { transform: translateY(0); opacity: 1; }
}
.session-item.unread .meta span:first-child { animation: pulse-badge .9s ease-in-out infinite; }
.request-item { animation: bounce-in .25s ease; }

@media (max-width: 1200px) {
  .stats-grid, .admin-grid.two, .chat-layout, .field-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  .login-card, .admin-app { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; }
  .admin-topbar { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .admin-shell { padding: 10px; }
  .login-card, .admin-sidebar, .admin-card, .admin-topbar { padding: 18px; }
  .sidebar-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar-nav button { text-align: center; }
  .admin-chat-form { grid-template-columns: 1fr; }
}

/* === DELIVERY STATUS BADGES + TOOLTIPS === */
.ds-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:999px;font-size:12px;font-weight:600;position:relative;cursor:default;border:1px solid transparent;transition:all .2s}
.ds-badge.ds-ok{background:rgba(75,222,155,.12);border-color:rgba(75,222,155,.25);color:#4bde9b}
.ds-badge.ds-warn{background:rgba(255,178,63,.12);border-color:rgba(255,178,63,.25);color:#ffb23f}
.ds-badge .ds-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ds-ok .ds-dot{background:#4bde9b;animation:pulse-green 2s infinite}
.ds-warn .ds-dot{background:#ffb23f;animation:pulse-orange 2s infinite}
@keyframes pulse-green{0%,100%{box-shadow:0 0 0 3px rgba(75,222,155,.25)}50%{box-shadow:0 0 0 6px rgba(75,222,155,.08)}}
@keyframes pulse-orange{0%,100%{box-shadow:0 0 0 3px rgba(255,178,63,.25)}50%{box-shadow:0 0 0 6px rgba(255,178,63,.08)}}
.ds-help{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.15);font-size:10px;font-weight:800;cursor:pointer;position:relative;flex-shrink:0;color:rgba(255,255,255,.7)}
.ds-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);right:0;width:280px;background:#0d2035;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:12px 14px;font-size:12px;font-weight:400;color:var(--text-soft);line-height:1.6;z-index:200;box-shadow:0 16px 40px rgba(0,0,0,.5);white-space:normal;text-align:left;pointer-events:none}
.ds-help:hover .ds-tooltip,.ds-help:focus .ds-tooltip{display:block}
/* === PROFESSIONAL CHAT UI v2 === */
.chat-status-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 18px;margin-bottom:16px}
.chat-status-result{font-size:13px;color:var(--success);margin-left:auto}
.chat-layout-v2{display:grid;grid-template-columns:300px 1fr;gap:16px;height:calc(100vh - 230px);min-height:500px}
.chat-sidebar-v2{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;flex-direction:column;overflow:hidden}
.chat-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:14px}
.chat-count{background:var(--accent);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;min-width:22px;text-align:center}
.session-list-v2{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px}
.sess-empty{padding:32px;text-align:center;color:var(--muted);font-size:13px}
.session-item{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;cursor:pointer;transition:background .15s;border:1px solid transparent}
.session-item:hover{background:rgba(255,255,255,.06)}
.session-item.active{background:rgba(249,115,22,.1);border-color:rgba(249,115,22,.25)}
.sess-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff}
.sess-body{flex:1;min-width:0}
.sess-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.sess-top strong{font-size:13px}
.sess-time{font-size:11px;color:var(--muted)}
.sess-preview{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.sess-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sess-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.sess-meta span{font-size:11px;color:var(--muted)}
.sess-badge{font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px;background:rgba(249,115,22,.2);color:#f97316}
.sess-badge.ai-paused{background:rgba(139,92,246,.2);color:#a78bfa}
.sess-status-pill{font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.chat-main-v2{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;flex-direction:column;overflow:hidden}
.chat-header-v2{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);min-height:68px;flex-shrink:0}
.chat-header-v2 .sess-avatar{width:36px;height:36px;font-size:13px}
.chat-header-placeholder{color:var(--muted);font-size:14px}
.chat-action-bar{display:flex;gap:8px;padding:10px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;background:rgba(0,0,0,.15)}
.chat-act-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;border:1px solid transparent;background:rgba(255,255,255,.08);color:var(--text-soft);transition:all .15s;cursor:pointer}
.chat-act-btn:hover{background:rgba(255,255,255,.14);color:var(--text)}
.act-claim{border-color:rgba(249,115,22,.3);color:#f97316;background:rgba(249,115,22,.1)}.act-claim:hover{background:rgba(249,115,22,.2)}
.act-pause{border-color:rgba(234,179,8,.3);color:#eab308;background:rgba(234,179,8,.1)}.act-pause:hover{background:rgba(234,179,8,.2)}
.act-resume{border-color:rgba(75,222,155,.3);color:#4bde9b;background:rgba(75,222,155,.1)}.act-resume:hover{background:rgba(75,222,155,.2)}
.act-close{border-color:rgba(255,143,143,.3);color:#ff8f8f;background:rgba(255,143,143,.1)}.act-close:hover{background:rgba(255,143,143,.2)}
.chat-log-v2{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.chat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--muted);gap:10px}
.chat-empty-icon{font-size:40px;opacity:.5}
.bubble-row{display:flex}
.row-left{justify-content:flex-start}.row-right{justify-content:flex-end}
.chat-bubble-v2{max-width:72%;padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.6;border:1px solid transparent}
.bubble-customer{background:rgba(249,115,22,.15);border-color:rgba(249,115,22,.2);border-bottom-right-radius:4px}
.bubble-ai{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.2);border-bottom-left-radius:4px}
.bubble-admin{background:rgba(75,222,155,.12);border-color:rgba(75,222,155,.2);border-bottom-left-radius:4px}
.bubble-label{font-size:11px;font-weight:700;margin-bottom:4px;opacity:.7;text-transform:capitalize}
.bubble-text{word-break:break-word}
.bubble-time{font-size:10px;margin-top:6px;opacity:.5;text-align:right}
.chat-input-v2{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--border);background:rgba(0,0,0,.1);flex-shrink:0}
.chat-input-v2 input{flex:1;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:12px;padding:10px 14px;color:var(--text)}
.chat-input-v2 input:focus{outline:none;border-color:rgba(249,115,22,.4);background:rgba(255,255,255,.08)}
.chat-send-btn{width:42px;height:42px;border-radius:12px;background:var(--accent);border:none;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.chat-send-btn:hover{background:var(--accent-strong)}
/* === CUSTOMER CARDS === */
.customers-layout{display:grid;grid-template-columns:1fr 380px;gap:16px}
.customer-list{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 200px);overflow-y:auto;padding-right:4px}
.customer-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:14px;transition:border-color .15s}
.customer-card:hover{border-color:rgba(249,115,22,.3)}
.cust-avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff}
.cust-body{flex:1;min-width:0}
.cust-name{font-weight:700;font-size:14px}
.cust-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:3px}
.cust-meta span{font-size:12px;color:var(--muted)}
.cust-actions{display:flex;gap:6px;flex-wrap:wrap;flex-shrink:0}
.cust-btn{font-size:12px;font-weight:600;padding:5px 11px;border-radius:8px;border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;transition:all .15s}
.cust-btn.wa{background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.3);color:#25d366}.cust-btn.wa:hover{background:rgba(37,211,102,.2)}
.cust-btn.mail{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.3);color:#60a5fa}.cust-btn.mail:hover{background:rgba(59,130,246,.2)}
.cust-btn.notif{background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.3);color:#f97316}.cust-btn.notif:hover{background:rgba(249,115,22,.2)}
.btn-refresh{font-size:13px;padding:6px 14px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text-soft)}
.btn-outline{padding:8px 16px;border-radius:10px;background:transparent;border:1px solid var(--border);color:var(--text-soft);font-size:13px}
.btn-primary{padding:8px 20px;border-radius:10px;background:var(--accent);border:none;color:#fff;font-weight:700;font-size:13px}
.btn-primary:hover{background:var(--accent-strong)}
.form-label{display:grid;gap:6px;font-size:13px}
/* === SHIPMENT MODAL === */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal-overlay.open{display:flex}
.modal-box{background:#0d1f30;border:1px solid rgba(255,255,255,.15);border-radius:24px;padding:28px;width:420px;max-width:95vw;box-shadow:0 32px 80px rgba(0,0,0,.6)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.modal-header h3{font-size:18px;margin:0}
.modal-close{background:rgba(255,255,255,.08);border:none;color:var(--text);width:30px;height:30px;border-radius:8px;font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.modal-sub{font-size:14px;color:var(--muted);margin:0 0 20px}
.shipment-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ship-btn{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:16px;padding:18px 10px;cursor:pointer;text-align:center;transition:all .2s;color:var(--text)}
.ship-btn:hover{transform:translateY(-2px);border-color:rgba(249,115,22,.4);background:rgba(249,115,22,.08)}
.ship-icon{font-size:28px;margin-bottom:8px}
.ship-label{font-size:13px;font-weight:700}
.ship-sub{font-size:11px;color:var(--muted);margin-top:4px}
/* === SLIDER img fix === */
.slide-item-img{width:100%;height:160px;object-fit:cover;border-radius:12px;display:block}
/* === RESPONSIVE === */
@media(max-width:1100px){.chat-layout-v2{grid-template-columns:1fr;height:auto}.chat-sidebar-v2{max-height:300px}.customers-layout{grid-template-columns:1fr}}