/* /style/style.css — TempoSolx panel (mobil uyumlu) */
/* Palet: ana yeşil #2e7e33, turuncu #f6a316, yardımcı yeşil #91a825 */

:root{
  --pri:#2e7e33;      /* ana yeşil */
  --accent:#f6a316;   /* ana turuncu */
  --help:#91a825;     /* yardımcı yeşil */
  --white:#ffffff;

  --bg:#f6f7fb;
  --card:#ffffff;
  --line:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;

  --ok:#2e7e33;
  --warn:#b45309;
  --err:#b91c1c;

  --shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(16,24,40,.06);
}

/* ====== Temel ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1200px;margin:18px auto;padding:0 16px}
.page-title{margin:0 0 12px 0;font-size:22px;font-weight:800;letter-spacing:.2px}

/* Üst logo & başlık (sayfa başı) */
.topbar{
  margin-bottom:16px;
  display:flex;
  flex-direction:column;        /* logo → tarih → başlık */
  align-items:center;
  gap:6px;
}
.logo-wrap{display:flex;justify-content:center;margin-bottom:0}
.logo-wrap .logo{height:44px}
.titlebar{display:flex;align-items:center;justify-content:center}
.titlebar .title{font-size:20px;font-weight:700}

/* ====== Yardımcılar ====== */
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.muted{color:var(--muted)}
.divider{height:1px;background:var(--line);margin:14px 0}

/* ====== Etiketler ====== */
.pill{border:1px solid var(--line);padding:4px 8px;border-radius:999px;background:#fff;font-size:12px;white-space:nowrap}
.pill-muted{color:var(--muted)}
.pill-ok{color:var(--ok)}
.pill-warn{color:var(--warn)}
.pill-err{color:var(--err)}
.badge{padding:3px 10px;border-radius:999px;font-size:12px;line-height:18px;border:1px solid rgba(46,126,51,.25);background:rgba(46,126,51,.08);color:var(--ok)}

/* ====== Buton & Input ====== */
.btn{
  appearance:none;border-radius:12px;cursor:pointer;padding:10px 14px;
  border:1px solid var(--line);background:#f9fafb;color:var(--text);
  transition:transform .02s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover{filter:brightness(0.98)}
.btn:active{transform:translateY(1px)}
.btn:focus{outline:0; box-shadow:0 0 0 3px rgba(246,163,22,.25)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-primary{background:var(--pri);color:#fff;border-color:var(--pri)}
.btn-soft{background:#fff;color:var(--pri);border-color:var(--pri)}

.input{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}

/* ====== Uyarı ====== */
.alert-warn{color:#fff;background:var(--accent);border:1px solid #e7a23c;padding:10px 12px;border-radius:12px;margin-bottom:12px}

/* ====== Toast ====== */
.toast{position:fixed;right:14px;top:14px;background:#111;color:#fff;padding:10px 12px;border-radius:10px;opacity:.95;z-index:200}
.toast.ok{background:var(--pri)}
.toast.err{background:#b91c1c}

/* ====== Cihaz grid & kartlar ====== */
.dev-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:560px){ .dev-grid{ grid-template-columns:1fr 1fr } }
@media (min-width:1000px){ .dev-grid{ grid-template-columns:1fr 1fr 1fr } }

.dev-card{
  border:1px solid var(--line);background:#fff;border-radius:16px;padding:14px;
  display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease, transform .02s ease, border-color .2s ease;
}
.dev-card:hover{ box-shadow:var(--shadow); border-color:#dcdfe6 }
.dev-card:active{ transform:translateY(1px) }
.dev-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dev-name{font-weight:800;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-actions{display:flex;gap:8px;flex-wrap:wrap}
.dev-footer{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px dashed var(--line);border-radius:12px;background:#fcfcfd}
.footer-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.footer-value{font-weight:700}

/* ====== Kart/Panel genel ====== */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.card .hd{padding:10px 12px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center;justify-content:space-between}
.card .bd{padding:12px}
.is-active{ outline:2px solid rgba(46,126,51,.35); outline-offset:2px; border-radius:14px }

/* ====== Detay sayfası (cihaz_detay.php) ====== */
.detail-wrap .topbar{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:8px}
.detail-wrap .logo{height:44px;width:auto;display:block}
.detail-wrap .back-btn{display:inline-flex;align-items:center;gap:8px}
.detail-wrap .cmd-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0 10px 0}
.detail-wrap .btn-cmd{padding:10px 8px;font-weight:700;border-radius:12px;border:1px solid var(--line);cursor:pointer}
.detail-wrap .btn-start{background:var(--pri);color:#fff;border-color:var(--pri)}
.detail-wrap .btn-stop{background:var(--accent);color:#fff;border-color:var(--accent)}
.detail-wrap .btn-reset{background:var(--help);color:#fff;border-color:var(--help)}
.detail-wrap .btn-param{background:#fff;color:var(--pri);border-color:var(--pri)}
.detail-wrap .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:900px){ .detail-wrap .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} }
@media (min-width:1200px){ .detail-wrap .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} }
.detail-wrap .kv{border-left:4px solid var(--accent);}
.detail-wrap .k{color:var(--accent);}
.detail-wrap .v{margin-top:6px;font-size:18px;font-weight:800}

/* ====== Print ====== */
@media print{
  .btn,.badge,.pill,.alert-warn{ display:none !important }
  .wrap{ max-width:100%; margin:0; padding:0 }
  body{ background:#fff }
  .dev-card, .kv{ break-inside:avoid }
}

/* ====== Sol Menü (desktop) ====== */
.sidebar-fixed{
  position:fixed;top:0;left:0;bottom:0;width:260px;background:var(--pri);color:#fff;
  padding:18px 14px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;z-index:200;
}
.content-with-sidebar{ margin-left:260px; min-height:100vh; background:var(--bg) }

.sbf-user{ padding:10px 10px 12px; border-radius:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12) }
.sbf-name{ font-weight:700; font-size:15px; line-height:1.2 }
.sbf-sub{ margin-top:4px; font-size:12px; opacity:.9 }
.sbf-menu{ display:flex; flex-direction:column; gap:6px }
.sbf-link{
  display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none;
  padding:10px 12px; border-radius:10px; border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease, filter .15s ease;
}
.sbf-link:hover{ filter:brightness(0.95); border-color:rgba(255,255,255,.2) }
.sbf-link.active{ background:#fff; color:var(--pri); border-color:#fff }
.sbf-link svg{ flex-shrink:0; width:20px; height:20px; color:#fff; margin-right:8px; vertical-align:middle }
.sbf-link span{ display:inline-block; vertical-align:middle }

/* ====== Hamburger & Overlay (varsayılan: gizli) ====== */
.hamburger-btn{
  position:fixed; top:12px; right:12px;
  z-index:220;
  width:46px; height:40px; border:1px solid rgba(255,255,255,.35);
  border-radius:12px; background:var(--pri);
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  box-shadow:var(--shadow);
}
.hamburger-btn span{
  width:26px; height:4px;
  background:#fff;
  border-radius:999px;
}
.sidebar-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:150; display:none }

/* ====== Mobil: off-canvas ====== */
@media (max-width:900px){
  .hamburger-btn{ display:flex }
  .content-with-sidebar{ margin-left:0 }
  .sidebar-fixed{
    transform:translateX(-100%); transition:transform .25s ease; width:260px;
  }
  body.sidebar-open .sidebar-fixed{ transform:translateX(0) }
  body.sidebar-open .sidebar-overlay{ display:block }
}

/* ====== Modal (Kullanıcı İşlemleri) ====== */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  display:none; align-items:center; justify-content:center; z-index:260;
}
.modal-backdrop.show{ display:flex }
.modal{
  width:min(640px,92vw); background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow);
}
.modal .hd{ padding:12px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between }
.modal .bd{ padding:14px; display:grid; gap:12px }
.modal .ft{ padding:12px 14px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end }

/* Form grid (responsive) */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
@media (max-width:640px){ .grid-2{ grid-template-columns:1fr } }
.form-row{ display:flex; flex-direction:column; gap:6px }
.form-row label{ font-size:12px; color:var(--muted) }

/* === cihaz_detay.php — Kutuları biraz daha kısa ve ince === */
.detail-wrap .grid{
  display: grid !important;
  gap: 22px !important;
  grid-template-columns: repeat(2, 1fr) !important;
}
@media (min-width: 900px){
  .detail-wrap .grid{
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 1000px;
    margin-inline: auto;
  }
}

.detail-wrap .kv{
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 70px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, var(--pri) 0%, var(--accent) 100%) border-box;
  box-shadow: 0 2px 5px rgba(0,0,0,.05);
}

.detail-wrap .k{
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 3px;
}

.detail-wrap .v{
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

/* ====== Tarih chip (her ekranda logo ile başlık arasında) ====== */
.page-opened-at{
  position: static;
  margin: 4px 0;
  padding: 6px 12px;
  background: #fff;
  color: #222;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border-radius: 10px;
  font: 500 13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  letter-spacing: .2px;
  white-space: nowrap;
  text-align: center;
}
@media (prefers-color-scheme: dark){
  .page-opened-at{
    background:#1f1f1f;
    color:#e9e9e9;
    border-color:rgba(255,255,255,.14);
  }
}

/* ====== Detay üst bölge hizalama (geri butonu + başlık + komutlar) ====== */
.titlebar{ display:flex; align-items:center; justify-content:center; }
.title.crumb{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:20px;
  font-weight:800;
  line-height:1.25;
  margin:0;
}
.title.crumb br{ display:none; }          /* HTML’deki <br><br> görünmesin */
.title.crumb .btn.btn-soft{
  font-weight:700;
  border-radius:12px;
  padding:10px 14px;
  border-color:var(--pri);
  color:var(--pri);
  background:#fff;
  box-shadow:var(--shadow);
}

.cmd-bar{
  display:flex !important;
  grid-template-columns:none !important;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:10px 0 6px;
}
.btn-cmd{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  font-weight:700;
  cursor:pointer;
}
.btn-start{ background:var(--pri); color:#fff; border-color:var(--pri); }
.btn-stop { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-reset{ background:var(--help); color:#fff; border-color:var(--help); }

@media (max-width:640px){
  .title.crumb{ font-size:18px; gap:8px; }
  .cmd-bar{ gap:8px; }
}

/* ====== Auth/Login/Register sayfaları ====== */
.card {
  max-width: 480px;
  margin: 48px auto;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  padding: 24px;
}
.title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px 0;
}
.alert {
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid transparent;
}
.alert-error {
  background: #ffe9e9;
  border-color: #ffbcbc;
  color: #b00020;
}
.alert-success {
  background: #e9ffef;
  border-color: #b8f7c8;
  color: #1b5e20;
}
.field-label {
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
}
.field-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-bottom: 14px;
  outline: none;
}
.submit-btn {
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 10px;
  background: var(--pri);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.submit-btn:hover{
  filter: brightness(0.95);
}
.small-muted {
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
}


  /* Sadece canlı uyarı bandı için: tepeye yapışmayı iptal et */
  #liveBanner {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    width: auto;
    margin: 12px 0 8px 0;   /* butonların altı, tablo üstü boşluk */
    display: none;          /* JS açıp kapatacak */
  }


/* ===================== */
/*  Admin > Kullanıcılar */
/*  Sayfa kapsamı: sadece .page-admin-users altında çalışır */
/* ===================== */

.page-admin-users .topbar .title{ font-size:22px; font-weight:700; }

/* Form kartı ortada, genişliği kontrollü */
.page-admin-users .users-form{
  max-width: 960px;
  margin: 0 auto 20px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Liste kartı: sidebar’dan sağ kenara kadar TAM genişlik */
.page-admin-users .users-list{
  max-width: none;
  width: 100%;
  margin: 0 0 24px 0;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* İç kapsayıcı genişlik kısıtını kaldır (yalnızca bu sayfa) */
.page-admin-users .content-with-sidebar .wrap{
  max-width: none;          /* global kısıtı kaldır */
  padding-left: 20px;
  padding-right: 24px;
}

/* Tablo ve kaydırma davranışı */
.page-admin-users .users-list .table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-admin-users .users-list .table{
  width: 100%;
  table-layout: auto;        /* sütunlar doğal yayılsın */
  border-collapse: collapse;
}

.page-admin-users .users-list thead th{
  font-weight:700; font-size:13px; color:#374151;
  padding:10px 12px; border-bottom:1px solid #e5e7eb;
}

.page-admin-users .users-list tbody td{
  padding:8px 12px; border-bottom:1px solid #f1f5f9;
  vertical-align: middle;
}

/* Tablo içi input’lar okunur boyutta */
.page-admin-users .users-list td .input{
  min-width: 180px;
  height: 36px;
  padding: 6px 10px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
}

/* Form grid ve butonlar (yalnız bu sayfa) */
.page-admin-users .users-form .op-form{
  display:grid; gap:12px; align-items:end;
  grid-template-columns: repeat(6, 1fr) 140px; /* 6 alan + buton */
}
@media (max-width:1100px){
  .page-admin-users .users-form .op-form{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:720px){
  .page-admin-users .users-form .op-form{ grid-template-columns: 1fr; }
}

.page-admin-users .btn{ padding:10px 14px; border-radius:10px; border:1px solid #e5e7eb; background:#f9fafb; }
.page-admin-users .btn:hover{ background:#f3f4f6; }
.page-admin-users .btn.btn-primary{ background:#1f2937; color:#fff; border-color:#1f2937; }
.page-admin-users .btn.btn-primary:disabled{ opacity:.5; cursor:not-allowed; }

.page-admin-users .row-inline{ display:flex; gap:8px; align-items:center; }
.page-admin-users .btn-mini{ padding:8px 10px; }

.page-admin-users .pill{ font-size:12px; padding:4px 10px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; }
.page-admin-users .muted{ color:#6b7280; }

/* =========================== */
/*  Admin > Bayi Cihaz Atama   */
/*  Sayfa kapsamı: sadece .page-assign altında çalışır */
/* =========================== */

/* İç kapsayıcı genişlik kısıtını kaldır */
.page-assign .content-with-sidebar .wrap{
  max-width: none;
  width: 100%;
  padding-left: 20px;
  padding-right: 24px;
}

/* Kartlar sidebar’dan sağ kenara kadar yayılabilsin */
.page-assign .card{
  max-width: none;
  width: 100%;
  margin: 0 0 20px 0;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  overflow: hidden;
}

/* Tablo kapsayıcısı */
.page-assign .table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tablo */
.page-assign .table-wrap table{
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;      /* sütunlar doğal yayılsın */
}

.page-assign .table-wrap thead th{
  font-weight:700;
  font-size:13px;
  color:#374151;
  padding:12px 14px;
  border-bottom:2px solid #e5e7eb;
  text-align:left;
  white-space:nowrap;
}

.page-assign .table-wrap tbody td{
  padding:12px 14px;
  border-bottom:1px solid #f1f5f9;
  vertical-align: top;
  white-space: normal;        /* uzun metinler satır kırabilsin */
  word-break: break-word;
  line-height: 1.4;
}

/* Kolon oranları (isteğe bağlı) */
.page-assign .table-wrap thead th:first-child,
.page-assign .table-wrap tbody td:first-child{
  width: 60px;
  text-align:center;
}
.page-assign .table-wrap thead th:nth-child(2),
.page-assign .table-wrap tbody td:nth-child(2){
  width: 240px;
}
.page-assign .table-wrap thead th:nth-child(3),
.page-assign .table-wrap tbody td:nth-child(3){
  width: 220px;
}
.page-assign .table-wrap thead th:nth-child(4),
.page-assign .table-wrap tbody td:nth-child(4){
  width: 80px;
  text-align:center;
}
.page-assign .table-wrap thead th:nth-child(5),
.page-assign .table-wrap tbody td:nth-child(5){
  width: 240px;
}

/* Operatör kutucukları */
.page-assign .pill{
  display:inline-block;
  max-width:100%;
  margin-bottom:4px;
  font-size:12px;
  padding:4px 8px;
  border:1px solid #e5e7eb;
  border-radius:999px;
  background:#fff;
}
.page-assign .muted{ color:#6b7280; }