/***** STATISTIC  *****/
/***** Форма создания ссылки над таблицей *****/
/* ===== Пустое состояние статистики (до первой ссылки) ===== */
.stats-empty-banner { margin: 24px auto;  padding: 40px 24px; background: var(--bg-card); border: 1px solid var(--border); 
                     border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; 
                     text-align: center; gap: 20px; }
.stats-empty-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(214,255,0,0.1); color: var(--lime); font-size: 22px; 
                   display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stats-empty-body { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 640px; }
.stats-empty-title { font-size: 20px; font-weight: 600; color: var(--text); }
.stats-empty-text { font-size: 15px; color: var(--text-muted); line-height: 1.55; }

.stats-empty-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; width: 100%; max-width: 1100px; text-align: left; }
.stats-empty-step { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; }
.stats-empty-step__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.stats-empty-step__head h3 { font-size: 15px; font-weight: 500; color: var(--text); margin: 0; }
.stats-empty-step__num { font-size: 22px; font-weight: 600; color: var(--lime); line-height: 1; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.stats-empty-step p { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 0; }

.stats-empty-createlink { display: inline-block; margin-top: 10px; color: var(--lime); font-weight: 600; font-size: 13.5px; cursor: pointer; text-decoration: none; }
.stats-empty-createlink:hover { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 768px) {
  .stats-empty-steps { grid-template-columns: 1fr; }
}

.statistics-link-block {background:#2b2b2b69; padding-bottom:60px;}
.create-link__main-mini {padding-top:10px;}
.create-link__main-mini .btn b {font-weight:400; display:none;}
.create-link__main-full {display:none;}
.create-link__main[data-state="full"] .create-link__main-full {display:flex;}
.create-link__main[data-state="full"] .create-link__main-mini {display:none;}
.create-link-head {display:flex; justify-content:space-between; align-items:center; margin-top:-10px;}
.create-link-head span {font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); font-weight:500;}
.create-link-head .btn {color:var(--text-muted); height:30px; padding:0 10px; font-size:13px;}
@media (max-width: 640px) {
   .statistics-link-block {padding:30px 0 0px 0; background:none;} 
   .create-link-head {margin-top:0;} 
   .create-link__main-mini {justify-content:center}
   .create-link__main-mini .input-field {display:none;}
   .create-link__main-mini .btn b {font-weight:400; display:inline-block;}
}

.statistics-page-block {padding-top:40px;}
.stata-setting-block {display:flex; justify-content:space-between; margin-bottom:30px; flex-wrap:wrap; gap:20px;
                    align-items:center;}
.stata-setting-item {display:flex; gap:20px; align-items:end; }

.stata-setting-item .select-trigger {height: 40px; padding: 0 16px 0 16px;font-size: 14px;}
.stata-setting-item .select {flex:1; width:280px}
.stata-setting-item .select-min {min-width:auto; flex:none; width:100px !important;}
.stata-setting-item .input-field {width:calc(100% - 110px); }
.stata-setting-item .input-field input {height: 40px; padding: 0 16px 0 16px; min-height:40px; }
.stata-setting-item .entries {justify-content:center; color:#999; font-size:15px; }

/********* T A B L E ***********/
.stata-table {table-layout: fixed !important; border-spacing:0; min-width:100%; font-size:14px;}
.stata-table td, .stata-table th {padding:10px 12px; text-align:left;}
.stata-table thead tr {}
.stata-table thead tr th {padding:16px 8px; font-size:13px;}
.stata-table thead tr th:first-child {padding:16px 8px 16px 12px;}
.stata-table tbody td, .stata-table thead tr th {border-bottom:1px solid #3c3c3c;}
.stata-table th {white-space: nowrap; padding:12px 12px;}
.stata-table td.center {text-align:center; color:#999}
.stata-table td.center .table-flex {justify-content:center;}
.table-flex {display:flex; gap:10px; align-items:center;}
.table-flex a {max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:block;
              text-decoration:none; color:var(--cyan); position:relative; }
.table-flex a, .table-flex a span {transition:all 0.2s;}
.table-flex.merch a {padding-left:26px; color:var(--lime);}
.table-flex.merch a i {position:absolute; left:0; top:0px; color:#464646; width:18px; height:18px; 
                       background:#ffffff38; border-radius:50%; display:flex; align-items:center; justify-content:center;
                      color:#fff; font-size:13px; font-family: serif; font-weight:600;}
.stata-table button {background:#868686; border:0; border-radius:6px; padding:4px 8px; cursor:pointer;
                             transition:all 0.3s; font-size:14px; min-width:30px; display:inline-flex; align-items:center; gap:4px;
                    justify-content:center; color:#000;}
.stata-table .page-link {margin-top:6px;}
.stata-table .page-link button {background:none; padding:inherit; color:var(--text-dim); font-size:inherit; transition:all 0.1s;}
.table-flex.url-link {}
.table-flex.url-link a {max-width: 100%; overflow: visible; text-overflow:unset; display:flex; gap:8px; justify-content:space-between;
                        width:100%; align-items:center;}
.table-flex.url-link a span {max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:block;
              text-decoration:none; color:var(--cyan); position:relative;}
.table-flex.url-link a i {font-size:11px; color:var(--text-muted); font-weight:400;}

.table-flex.tags {cursor:pointer;}
.stata-table .-tag i { display: none; }
.table-flex.tags span {max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:block;}
.table-flex.folder {gap:6px; color:#999; cursor:pointer;}
.table-flex.folder span {max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.stata-table .note span {font-size:14px; display: -webkit-box; -webkit-line-clamp: 2;  
  -webkit-box-orient: vertical; overflow: hidden; transition:all 0.3s; color:#999; cursor:pointer; min-width:140px;}
.stata-table .note button {background:#555555a1;color:#000000; font-size:13px; padding:6px 8px 7px 8px; color:#fff}
.stata-table .note button i {margin-top:3px;}
.stata-table .data-created {font-size:14px; color:#999; min-width:100px; max-width:100px;}
.copy {gap:0;}
.copy button {background:none; color:#999; }
.trash button {background:none; color:#ff0000; font-size:16px;}

.stata-table-wrapper {overflow-x:auto; padding-bottom:0px; margin-bottom:30px; border:1px solid var(--border); border-radius:16px;
                     background:var(--bg-card);}
.stata-table-wrapper::-webkit-scrollbar {height: 40px; background-color: var(--bg-card); border-radius: 9em;}
.stata-table-wrapper::-webkit-scrollbar-thumb {background-color:#6464646b; border-radius: 30px; border: 16px solid var(--bg-card); padding:4px;}

.clicks-count button {background:#555555a1; color:#fff;}
.purchases-count button {background:#d6ff004d; font-weight:500; color:#fff;} 
.pending-count button {background:#ccc;}
.stata-table tfoot tr td { color:#fff !important; padding-top:20px; padding-bottom:20px;
                         border-bottom:1px solid #3c3c3c;}
.stata-table tfoot tr td i {color:#999; display:none;}

/***** table first td fixed *****/
/***** первая колонка sticky *****/
.stata-table th:first-child, .stata-table td:first-child { position: sticky; left: 0; z-index: 1; width: 170px; background: var(--bg-card); }
.stata-table thead th:first-child { }

/********************/

.tab-filter {cursor:pointer;  border-radius:8px; transition:all 0.3s; position:relative;
            padding:10px 26px 10px 10px !important; background:#383838; }
.tab-filter::after, .tab-filter::before {
  content: "";
  display: inline-block; font-size:10px;
  position: absolute; right: 8px; bottom:calc(50% - 8px);
  width: 8px;
  height: 6px;
  background-color: #929191;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  border-radius: 2px;
}
.tab-filter::before {
  bottom:calc(50% + 0px);
 clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.dt-ordering-asc::before {background-color:var(--lime);}
.dt-ordering-desc::after {background-color:var(--lime);}

/***** меню три точки *****/
.stata-table .-actions { position: relative; }
.stata-menu { background: none !important; color: #999 !important; font-size: 16px; min-width: 30px; }
.stata-pop {position: absolute;top: 14px;right: 50px;display: none;flex-direction: column;
            padding: 6px; background: #161616;border: 1px solid #3c3c3c;border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);z-index: 5;}
.stata-pop.show {display: flex;}
.stata-pop > button { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 7px; background: transparent !important; 
                     color: #fff !important; font-size: 13px; white-space: nowrap; justify-content: flex-start; }
.stata-pop > button.red {color: #FF5C5C !important;}

/***** кнопка ссылок: на десктопе нет *****/
.stata-table .-links-toggle { display: none; }
.stata-table .td-label { display: none; }

@media (min-width: 1600px) {
    .stata-table tfoot tr:last-child td {border:0;}
}
@media (min-width: 1200px) {
    .table-flex {transition:all 0.2s;}
    .table-flex.url-link a:hover span, .table-flex.copy a:hover {color:var(--text-muted);}
    .table-flex.merch a:hover {color:#ccc;}
    .stata-pop button:hover { background: #ffffff10 !important; }
    .stata-table tbody tr, .stata-table tbody tr td { transition:all 0.1S;} 
    .stata-table tbody tr:hover td:first-child, .stata-table tbody tr:hover  {background: #2c2c2c !important;} 
    .stata-table .page-link button:hover {opacity:1; color:var(--text-muted);}
    .copy button:hover {color:#ccc;}
    .table-flex.tags:hover, .table-flex.folder:hover, .stata-table td.note span:hover {color:#ccc;}
}
/***** мобила: строки-карточки *****/
@media (max-width: 1300px) {
    .stata-setting-item .select {flex:1; width:200px}
    .stata-setting-item .select .select-panel {width:100%; right:auto;}
}
@media (max-width: 1200px) {
    .stata-setting-block {flex-direction:row; gap:10px; flex-wrap:wrap;}
    .stata-setting-item {gap:10px;}
    .stata-setting-item .select {flex:1; width:280px;}
    .stata-setting-item:nth-child(2) {order:2; font-size:13px; justify-content:space-between; padding:0; margin:10px 0 -10px 0;
                                width:100%; align-items:center; position:relative; flex-wrap:nowrap; gap:20px;}
    .stata-setting-item:nth-child(2) .select {position:initial; width:40px !important; }
    .stata-setting-item:nth-child(2) .select-trigger {padding:0 !important; text-align:center; border-radius:8px;}
    .stata-setting-item:nth-child(2) .select .select-panel .select-list .select-option span i {font-size:10px !important;
                                                                                              top:-2px; position:relative;}
}
@media (max-width: 1000px) {
    .stata-setting-block {flex-direction:column;}
    .stata-setting-item {width:100%;}
    .stata-setting-item .select {flex:1; width:50%;  min-width:auto;}
    .stata-setting-item .select-min {flex:none; } 
}

    .stata-table .-pending b  {}
    .stata-table .-confirmed b {color:#d6ff00c9;}
    .stata-table .-withdrawn b {color:#ff6464;}

@media (max-width: 800px) {
    .stata-table .page-link {position:absolute; bottom:14px; text-align:center; width:calc(100% - 28px); }
    .stata-table-wrapper {border:0; border-radius:0; background:none;}
    .stata-table { padding-left: 0; max-width: 100%; display: block; }
    .stata-table thead { display: none; }
    .stata-table tfoot { display: none; }
    .stata-table tbody { display: flex; flex-direction:column; gap:10px;}
    .stata-table tbody tr { display: grid; grid-template-columns: 1fr 1fr 1fr 40px; gap: 0px 10px; 
    grid-template-areas: "merchant merchant merchant menu" "created created created menu" "note note note note" "meta1 meta2 meta2 meta2" "short short short short" "clicks purchases cr cr" "ltoggle ltoggle ltoggle ltoggle" "url url url url" "pending pending pending pending" "confirmed confirmed confirmed confirmed" "withdrawn withdrawn withdrawn withdrawn"; 
                          position: relative; border:1px solid var(--border); border-radius:16px;
                          background:var(--bg-card) !important; padding:14px;
                          padding-bottom:40px;}
    
    .stata-table td { display: block; border: 0 !important; padding: 0; }
    .stata-table td:first-child { position: static; width: auto; background: none; display: block; }

    .stata-table .-merchant  { grid-area: merchant; font-size: 16px; margin-bottom:6px;}
    .stata-table .-merchant a {padding:0; color:var(--lime); display:flex; gap:8px; }
    .stata-table .-merchant i {position:relative !important; margin-top:1px; }
    .stata-table .-created   { grid-area: created; min-width: 0; max-width: none; font-size: 13px;
                              margin-bottom:10px}
    .stata-table .-actions   { grid-area: menu; position: static; text-align: right; }
    .stata-table .-note      { grid-area: note; }
    .stata-table .-note.no-note { display: none; }
    .stata-table .-note span { min-width: 0; color:var(--text); margin:0px 0 10px 0; font-size:15px; line-height:1.4; }
    .stata-table .-tag       { grid-area: meta1; overflow:hidden; }
    .stata-table .-tag i { display: inline-block; color: #999; margin:0px -6px 0 -2px;}
    .stata-table .-folder    { grid-area: meta2; width:100%; }
    .table-flex.folder span {max-width: 100% !important;}
    .stata-table .-clicks    { grid-area: clicks; }
    .table-flex.url-link a span {max-width: 100%; }
    .table-flex.url-link   {margin-right:4px}
    .stata-table .-purchases { grid-area: purchases; }
    .stata-table .-cr        { grid-area: cr; }
    .stata-table .-clicks, .stata-table .-purchases, .stata-table .-cr     {
                             background: #3333338a;
                             padding:10px;
                             display:flex;
                             flex-direction:column;
                             align-items:center;
                             gap:4px;
                             border-radius:8px;
                             margin:14px 0 6px 0;
                             }
   
    .stata-table .-pending   { grid-area: pending; }
    .stata-table .-confirmed { grid-area: confirmed; }
    /* .stata-table .-confirmed b {color:var(--lime)} */
    .stata-table .-withdrawn { grid-area: withdrawn; }
    /* .stata-table .-withdrawn b {color:var(--danger);} */
    .stata-table .-pending, .stata-table .-confirmed, .stata-table .-withdrawn { margin-bottom: 6px; display: none; }
    /* суммы: подпись слева, значение справа (видны только в раскрытом) */
    .stata-table tr.links-open .-pending, .stata-table tr.links-open .-confirmed, .stata-table tr.links-open .-withdrawn { display: flex; justify-content: space-between; align-items: baseline; }
    .stata-table .-pending .td-label, .stata-table .-confirmed .td-label, .stata-table .-withdrawn .td-label { margin: 0; font-size: 13px; }
  
    .stata-table .-links-toggle { grid-area: ltoggle; display: block; margin-top:8px;}
    .stata-table .-url       { grid-area: url; display: none; margin:20px 0 8px 0; border-bottom:1px solid var(--border) !important; padding-bottom:10px;}
    .stata-table .-short     { grid-area: short; display: flex; margin-top: 16px; border-top:1px solid var(--border) !important; padding-top:10px;}
    .stata-table .-short .table-flex {justify-content:space-between;  width:100%;}

    .stata-table tr.links-open .-url { display: flex; flex-direction: column; }
    .stata-table tr.links-open [data-links-toggle] i { transform: rotate(180deg); }

    .stata-table .td-label { display: block; font-size: 11px; color: #999; margin-bottom: 2px; }
    .stata-table td.center { text-align: left; }
    .stata-table td .stata-menu  {background:#333 !important; width:40px; height:40px;}
    .stata-table td.center .table-flex { justify-content: flex-start;}
    .table-flex.tags span {max-width: 100%;}
    .stata-table .table-flex a { max-width: 100%; }

    /* кнопка ссылок */
    .stata-table [data-links-toggle] { background: #3333338a !important; color: #999 !important; padding: 10px 14px; border-radius: 8px; 
                                      width: 100%; }
    .stata-table [data-links-toggle] i { font-size: 9px; transition: transform 0.2s; margin-top:2px;}

    .stata-pop { top: 14px; right: 60px; }
}

@media (max-width: 640px) {
    .stata-setting-item {position:relative;}
    .stata-setting-item .select:not(.select-min) {position:initial;}
}

@media (max-width: 360px) {
    .stata-setting-block {flex-direction:column;}
    .stata-setting-item {width:100%; flex-wrap:wrap;}
    .stata-setting-item .select {flex:1; width:100%;  min-width:auto;}
    .stata-setting-item .select-min {flex:none; } 
}