/* Kiosk Panel - shared stylesheet (v2 Slate + Cyan) */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0e1a; --panel:#111827; --panel-2:#0f1424; --border:#1f2937; --border-2:#2a3441;
  --text:#e5e7eb; --muted:#9ca3af; --dim:#6b7280;
  --accent:#06b6d4; --accent-2:#0891b2; --accent-soft:rgba(6,182,212,.08);
  --good:#22c55e; --good-soft:rgba(34,197,94,.12);
  --warn:#f59e0b; --warn-soft:rgba(245,158,11,.12);
  --danger:#ef4444; --danger-soft:rgba(239,68,68,.12); --danger-border:#7f1d1d;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html,body{height:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--text);font-size:13px;line-height:1.5}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2)}
code,.mono{font-family:var(--mono)}

/* Brand logo (Stacked Layers) — shared topbar/login */
.klogo{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;letter-spacing:-.025em;color:var(--text);line-height:1;text-decoration:none}
.klogo svg{flex-shrink:0;display:block}
.klogo-text{display:inline-block}
.klogo-sm{font-size:14px;gap:7px}
.klogo-md{font-size:18px;gap:10px}
.klogo-lg{font-size:30px;gap:14px}
a.klogo:hover{color:var(--accent)}

/* Topbar */
.topbar{background:var(--panel-2);border-bottom:1px solid var(--border);padding:0 20px;display:flex;align-items:center;height:48px;position:sticky;top:0;z-index:50}
.topbar .brand{display:inline-flex;align-items:center}
.topbar nav{margin-left:30px;display:flex;gap:2px;flex-wrap:wrap}
.topbar nav a{color:var(--muted);font-size:12px;padding:6px 12px;border-radius:4px}
.topbar nav a:hover{color:var(--accent)}
.topbar nav a.active{color:var(--accent);background:var(--accent-soft)}
.topbar .right{margin-left:auto;display:flex;gap:14px;align-items:center;font-size:12px;color:var(--dim)}
.topbar .right a{color:var(--dim)}
.topbar .right a:hover{color:var(--text)}

.container{max-width:1280px;margin:0 auto;padding:18px 20px}

/* Page head */
.crumb{font-size:12px;color:var(--dim);margin-bottom:14px}
.crumb a{color:var(--muted)}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.page-head h1{font-size:17px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.page-head h1 .id{font-family:var(--mono);color:var(--accent)}
.page-head .meta{font-size:11px;color:var(--dim);font-family:var(--mono)}

/* Status pill */
.status{display:inline-flex;align-items:center;gap:6px;padding:2px 7px;border-radius:3px;font-size:11px;font-weight:500;border:1px solid transparent}
.status .dot{width:6px;height:6px;border-radius:50%}
.status.online{background:var(--good-soft);color:#4ade80;border-color:rgba(34,197,94,.25)}
.status.online .dot{background:var(--good);box-shadow:0 0 8px var(--good)}
.status.offline{background:var(--danger-soft);color:#fca5a5;border-color:rgba(239,68,68,.25)}
.status.offline .dot{background:var(--danger)}

/* Panel */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:6px;margin-bottom:12px}
.panel-h{padding:9px 14px;border-bottom:1px solid var(--border);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:12px}
.panel-h .sub{color:var(--dim);font-weight:400;text-transform:none;letter-spacing:0;font-size:11px}
.panel-b{padding:14px}
.panel-b.tight{padding:0}

/* Info grid (key-value tiles) */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:4px;overflow:hidden}
.info{background:var(--panel);padding:9px 12px;min-width:0}
.info label{display:block;font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.info .value{font-size:13px;font-weight:500;font-family:var(--mono);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.info .value.good{color:#4ade80}
.info .value.warn{color:#fbbf24}
.info .value.danger{color:#fca5a5}
.info.metric .bar{margin-top:5px;height:3px;background:var(--bg);border-radius:2px;overflow:hidden}
.info.metric .fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s}
.info.metric .fill.warn{background:var(--warn)}
.info.metric .fill.danger{background:var(--danger)}

/* Buttons */
.btnrow{display:flex;flex-wrap:wrap;gap:6px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .12s;text-decoration:none}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.btn.danger{color:#fca5a5;border-color:var(--danger-border)}
.btn.danger:hover{background:var(--danger-border);color:#fff;border-color:var(--danger-border)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--text);background:var(--border)}
.btn.sm{padding:3px 8px;font-size:11px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* Forms */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.form-group{display:flex;flex-direction:column;min-width:0}
.form-group label{font-size:11px;color:var(--muted);margin-bottom:4px;font-weight:500}
.form-group input,.form-group select,.form-group textarea,
input.field,select.field,textarea.field{
  padding:7px 10px;background:var(--bg);border:1px solid var(--border);color:var(--text);
  border-radius:4px;font-size:12px;font-family:inherit;width:100%;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,
input.field:focus,select.field:focus,textarea.field:focus{outline:none;border-color:var(--accent)}
.form-group input::placeholder{color:var(--dim)}
.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.form-actions{margin-top:12px;display:flex;gap:8px}

/* Tables */
.table{width:100%;border-collapse:collapse;font-size:12px}
.table th,.table td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--border)}
.table th{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;font-weight:600;background:var(--panel-2)}
.table tbody tr:hover{background:rgba(255,255,255,.02)}
.table td.mono{font-family:var(--mono);color:var(--muted)}
.table .empty{text-align:center;padding:30px;color:var(--dim)}
.table-wrap{overflow-x:auto}

/* Action badge (commands page) */
.badge{display:inline-block;padding:1px 7px;border-radius:3px;font-size:10px;font-family:var(--mono);background:var(--border);color:var(--muted);font-weight:500}
.badge.action-reboot,.badge.action-shutdown{background:rgba(239,68,68,.15);color:#fca5a5}
.badge.action-screenshot{background:rgba(168,85,247,.15);color:#d8b4fe}
.badge.action-update_url,.badge.action-refresh,.badge.action-refresh_page{background:var(--accent-soft);color:var(--accent)}
.badge.action-enable_input,.badge.action-disable_input{background:var(--good-soft);color:#4ade80}
.badge.action-set_hostname,.badge.action-set_device_id,.badge.action-set_ip,.badge.action-set_dhcp{background:rgba(245,158,11,.15);color:#fbbf24}
.badge.day{background:var(--border);color:var(--muted);margin-right:2px}

/* Stats (index hero) */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:12px 14px}
.stat .label{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;font-weight:600}
.stat .value{font-size:22px;font-weight:600;font-family:var(--mono);letter-spacing:-.01em}
.stat.online .value{color:#4ade80}
.stat.offline .value{color:#fca5a5}

/* Device cards (index, kompakt) */
.device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.device-card{background:var(--panel);border:1px solid var(--border);border-radius:5px;padding:9px 11px;position:relative;transition:border-color .15s}
.device-card:hover{border-color:var(--accent)}
.device-card .head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:5px}
.device-card .name{font-family:var(--mono);font-weight:600;font-size:12px;flex:1;min-width:0;padding-right:18px}
.device-card .name a{color:var(--text);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device-card .name a:hover{color:var(--accent)}
.device-card .name .sub{font-size:10px;color:var(--dim);font-weight:400;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device-card .check{position:absolute;top:10px;right:10px}
.device-card .check input{width:13px;height:13px;cursor:pointer;accent-color:var(--accent)}
.device-card .url{font-size:11px;color:var(--muted);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}
.device-card .url::before{content:"➜ ";color:var(--dim)}
.device-card .url.empty{color:var(--dim);font-style:italic}
.device-card .url.empty::before{content:""}
.device-card .kpi-row{display:flex;flex-wrap:wrap;gap:4px 10px;font-family:var(--mono);font-size:11px;color:var(--text);margin-bottom:7px}
.device-card .kpi{display:inline-flex;align-items:baseline;gap:3px}
.device-card .kpi b{font-weight:500;color:var(--dim);text-transform:uppercase;font-size:9px;letter-spacing:.05em}
.device-card .kpi.warn{color:#fbbf24}
.device-card .kpi.danger{color:#fca5a5}
.device-card .actions{display:flex;gap:4px;flex-wrap:wrap}
.device-card .actions .btn.sm{padding:3px 7px;font-size:10px}
.info.col-2{grid-column:span 2}
.info.col-full{grid-column:1/-1}

/* Inline edit row (System paneli altında, label/resolution tek satır) */
.edit-row{display:flex;gap:12px;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.edit-row .inline-edit{display:flex;gap:6px;align-items:center;flex:1;min-width:0}
.edit-row .inline-edit > label{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);font-weight:500;white-space:nowrap}
.edit-row .inline-edit .field{padding:3px 6px;font-size:11px;flex:1;min-width:0;font-family:var(--mono)}
.edit-row .inline-edit .btn{padding:3px 9px;font-size:11px;white-space:nowrap}

/* Modal */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;padding:20px;overflow-y:auto;align-items:flex-start;justify-content:center}
.modal.show{display:flex}
.modal-box{background:var(--panel);border:1px solid var(--border);border-radius:6px;width:100%;max-width:440px;margin-top:60px}
.modal-box.large{max-width:900px}
.modal-h{padding:11px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text)}
.modal-h .close{cursor:pointer;color:var(--dim);font-size:18px;line-height:1;background:none;border:none}
.modal-h .close:hover{color:var(--text)}
.modal-b{padding:14px}
.modal-b p.hint{color:var(--muted);font-size:12px;margin-bottom:10px}
.modal-b .code{font-family:var(--mono);background:var(--bg);border:1px solid var(--border);padding:8px 10px;border-radius:4px;font-size:11px;display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:8px}
.modal-b .code button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px}
.modal-b .code button:hover{color:var(--accent)}

/* Messages */
.msg{padding:8px 12px;border-radius:4px;font-size:12px;margin-bottom:14px;display:inline-block}
.msg.success{background:var(--good-soft);color:#4ade80;border:1px solid rgba(34,197,94,.25)}
.msg.error{background:var(--danger-soft);color:#fca5a5;border:1px solid rgba(239,68,68,.25)}
.msg.info{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(6,182,212,.25)}
.warning{background:var(--warn-soft);color:#fbbf24;border:1px solid rgba(245,158,11,.25);padding:8px 12px;border-radius:4px;font-size:12px;margin-bottom:10px}

/* Login (centered card) */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-box{width:100%;max-width:340px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:24px}
.login-box .brand{display:flex;flex-direction:column;align-items:center;margin-bottom:22px}
.login-box .brand .klogo{margin-bottom:6px}
.login-box .brand .sub{font-size:11px;color:var(--dim);font-family:var(--mono);letter-spacing:.05em;margin-top:4px}
.login-box .form-group{margin-bottom:12px}
.login-box button{width:100%;padding:9px;font-size:13px}

/* Loading spinner */
.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:24px;height:24px;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* Helpers */
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.right{text-align:right}
.mono-sm{font-family:var(--mono);font-size:11px;color:var(--muted)}
hr.sep{border:none;border-top:1px solid var(--border);margin:14px 0}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-bottom:12px}

/* Mobile */
@media (max-width:640px){
  .topbar{padding:0 12px;height:auto;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .topbar nav{margin-left:0;width:100%;margin-top:8px}
  .topbar .right{margin-left:auto}
  .container{padding:14px 12px}
  .device-grid{grid-template-columns:1fr}
}