/* KYC Address Tracker — page-specific styles (kyc-tracker.js / kyc-address-tracker.php). */

/* This stylesheet only loads on this one page, so it's safe to tighten the
   shared page-chrome elements (breadcrumb + content padding) here without
   affecting any other calculator - it buys the graph more vertical room. */
.crumbs{ margin-bottom:8px; font-size:12px; }
.content{ padding-top:16px; }

/* Break out of the shared 940px .content column so the graph gets real width. */
.kyc-wrap{ margin:0 calc(50% - 50vw); padding:0 20px; max-width:none; }

.kyc-titlebar{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  margin-bottom:10px;
}
.kyc-titlebar-text h1{ font-size:19px; margin:0 }
.kyc-titlebar-text p{ color:var(--muted); margin:3px 0 0; font-size:12.5px; max-width:640px; line-height:1.4 }
.kyc-view-toggle{ display:flex; gap:6px; flex:0 0 auto; align-self:center }
.kyc-search-group{ display:flex; gap:8px; flex:0 0 auto; }
.kyc-search-group .kyc-addr-input{ min-width:220px }

.kyc-toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:16px; margin-bottom:14px;
}
.kyc-toolbar-compact{ padding:10px; align-items:center; }
.kyc-toolbar .kyc-group{display:flex; flex-direction:column; gap:4px}
.kyc-toolbar label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.kyc-toolbar input[type=text], .kyc-toolbar input[type=number],
.kyc-search-group input[type=text]{
  background:var(--inputbg); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:13px; padding:8px 10px; outline:none; min-width:120px;
}
.kyc-toolbar .kyc-addr-input{min-width:280px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.kyc-add-inline{ display:flex; flex-wrap:wrap; gap:8px; flex:1 1 auto; }
.kyc-add-inline input[type=number]{ width:110px }
.kyc-add-inline input[type=text]:not(.kyc-addr-input){ width:140px }

.kyc-btn{
  background:var(--panel2); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:9px 14px; font-size:13px; font-weight:600; cursor:pointer;
}
.kyc-btn:hover{border-color:var(--accent)}
.kyc-btn.primary{background:var(--accent); color:#1a1a1a; border-color:var(--accent)}
.kyc-btn.primary:hover{filter:brightness(1.05)}
.kyc-btn.danger{color:var(--red); border-color:var(--red)}
.kyc-spacer{flex:1 1 auto}

.kyc-menu{ position:relative; }
.kyc-menu-dropdown{
  position:absolute; right:0; top:calc(100% + 8px); z-index:20; width:260px;
  display:flex; flex-direction:column; gap:8px;
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:16px; box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.kyc-menu-dropdown.hidden{ display:none }
.kyc-menu-dropdown input[type=text]{
  background:var(--inputbg); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:13px; padding:8px 10px; outline:none; width:100%;
}
.kyc-menu-label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:4px}
.kyc-menu-row{display:flex; gap:6px}
.kyc-menu-row .kyc-btn{flex:1}

.kyc-modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; z-index:100;
}
.kyc-modal-backdrop.hidden{display:none}
.kyc-modal{
  width:380px; max-width:90vw; background:var(--panel); border:1px solid var(--border);
  border-radius:12px; padding:22px; box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.kyc-modal h3{margin:0 0 6px; font-size:16px}
.kyc-modal-desc{color:var(--muted); font-size:13px; margin:0 0 14px; line-height:1.5}
.kyc-modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:18px}
.kyc-progress-wrap{margin-top:14px}
.kyc-progress-bar{height:8px; background:var(--panel2); border-radius:4px; overflow:hidden}
.kyc-progress-fill{height:100%; width:0%; background:var(--accent); transition:width .2s}

.kyc-legend{display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--muted); margin-bottom:10px}
.kyc-legend .sw{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:middle}

.kyc-main{display:flex; gap:14px; align-items:stretch}
.kyc-main.hidden{display:none}
#kyc-graph{
  flex:1 1 auto; min-width:0; height:calc(100vh - 260px); min-height:460px;
  background:var(--inputbg); border:1px solid var(--border); border-radius:12px;
}

.kyc-list-view{
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  height:calc(100vh - 260px); min-height:460px; overflow:auto;
}
.kyc-list-view.hidden{display:none}
.kyc-table{width:100%; border-collapse:collapse; font-size:13px}
.kyc-table th{
  text-align:left; padding:10px 14px; color:var(--muted); font-size:11px;
  text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--panel);
}
.kyc-table td{padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.05)}
.kyc-table tr:hover td{background:var(--panel2)}
.kyc-table-addr-btn{
  background:none; border:none; color:var(--accent); cursor:pointer; padding:0; font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.kyc-table-addr-btn:hover{text-decoration:underline}
.kyc-tag{
  margin-left:8px; font-size:10px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--accent); border:1px solid var(--accent); border-radius:4px; padding:1px 5px;
}

.kyc-panel{
  width:320px; flex:0 0 320px; background:var(--panel); border:1px solid var(--border);
  border-radius:12px; padding:18px; overflow-y:auto; max-height:calc(100vh - 260px);
}
.kyc-panel.hidden{display:none}
.kyc-panel h3{margin:0 0 4px; font-size:14px}
.kyc-addr-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; word-break:break-all;
  color:var(--muted); margin-bottom:14px;
}
.kyc-addr-mono a{color:var(--accent)}
.kyc-field-label{display:block; font-size:11px; color:var(--muted); margin:14px 0 6px; text-transform:uppercase; letter-spacing:.05em}
.kyc-flag-row{display:flex; gap:6px; flex-wrap:wrap}
.kyc-flag-btn{
  flex:1; padding:7px 8px; font-size:12px; border:1px solid var(--border); border-radius:7px;
  background:var(--panel2); color:var(--muted); cursor:pointer; text-align:center;
}
.kyc-flag-btn.active[data-flag="own"]{background:var(--accent); color:#1a1a1a; border-color:var(--accent)}
.kyc-flag-btn.active[data-flag="external"]{background:var(--panel2); color:var(--text); border-color:var(--muted)}
.kyc-flag-btn.active[data-flag="kyc"]{background:var(--red); color:#2a060c; border-color:var(--red)}
.kyc-flag-btn.active[data-flag="nonKyc"]{background:var(--green); color:#06231a; border-color:var(--green)}
.kyc-note{
  width:100%; min-height:60px; background:var(--inputbg); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:13px; padding:8px 10px; resize:vertical;
}
.kyc-fetch-row{display:flex; gap:8px; margin-top:14px}
.kyc-fetch-row .kyc-btn{flex:1}
.kyc-tx-list{list-style:none; margin:8px 0 0; padding:0; font-size:12px}
.kyc-tx-list li{border-bottom:1px solid rgba(255,255,255,.05); padding:6px 0}
.kyc-tx-list a{color:var(--accent)}
.kyc-derived-note{margin-top:10px; font-size:11px; color:var(--accent); line-height:1.5}
.kyc-checkbox{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); flex:1; cursor:pointer}
.kyc-checkbox input{accent-color:var(--accent)}

.kyc-err{color:var(--red); font-size:13px; margin:6px 0; min-height:1px}
.kyc-status{color:var(--muted); font-size:12px; margin:6px 0}

@media (max-width:900px){
  .kyc-titlebar{flex-direction:column; align-items:stretch}
  .kyc-search-group{flex-direction:column}
  .kyc-search-group .kyc-addr-input{min-width:0}
  .kyc-main{flex-direction:column}
  .kyc-panel{width:auto; flex:none; max-height:none}
  #kyc-graph{height:55vh}
}