styles.css

/* ================================================
   PisiLinux Paket Takip — styles.css
   Dark theme · Mobile-first
   ================================================ */
:root{
  --bg:#0f1117; --s1:#161b27; --s2:#1c2336;
  --bd:#242d40; --bd2:#2d3a52;
  --t:#e2e8f0; --td:#7f8fa6; --tf:#3d4d63;
  --blue:#3b82f6; --blue-d:rgba(59,130,246,.15); --blue-b:rgba(59,130,246,.3);
  --green:#10b981; --green-d:rgba(16,185,129,.13); --green-b:rgba(16,185,129,.3);
  --yellow:#f59e0b; --yellow-d:rgba(245,158,11,.13); --yellow-b:rgba(245,158,11,.3);
  --red:#ef4444; --red-d:rgba(239,68,68,.13); --red-b:rgba(239,68,68,.3);
  --r:8px; --rl:12px; --f:'Inter',system-ui,sans-serif; --m:'JetBrains Mono',monospace;
  --max:1400px; --tr:.15s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f);background:var(--bg);color:var(--t);line-height:1.6;min-height:100dvh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background-image:radial-gradient(var(--bd) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;z-index:0;opacity:.4}

.skip-link{position:absolute;top:-100px;left:1rem;background:var(--blue);color:#fff;padding:.5rem 1rem;border-radius:var(--r);font-size:.85rem;z-index:999;transition:top var(--tr);text-decoration:none}
.skip-link:focus{top:.75rem}

.app{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100dvh;max-width:var(--max);margin:0 auto;padding:0 1rem}

/* ── Header ── */
.header{padding:1.25rem 0 0;margin-bottom:.75rem}
.header-inner{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:1rem}

.brand{display:flex;align-items:center;gap:.75rem}
.brand-icon{width:40px;height:40px;flex-shrink:0;border-radius:10px;background:var(--blue-d);border:1px solid var(--blue-b);display:flex;align-items:center;justify-content:center}
.brand-icon svg{width:18px;height:18px;stroke:var(--blue)}
h1{font-size:clamp(1rem,3.5vw,1.35rem);font-weight:600;letter-spacing:-.025em;line-height:1.2}
.accent{background:linear-gradient(90deg,var(--blue),#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.brand-sub{font-size:.75rem;color:var(--td);margin-top:2px}
.brand-sub a{color:var(--blue);text-decoration:none}
.brand-sub a:hover{text-decoration:underline}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:99px;font-size:12px;font-family:var(--f);border:1px solid;cursor:pointer;transition:all var(--tr);background:transparent}
.chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.chip svg{width:10px;height:10px}
.chip b{font-weight:600;margin-left:2px}
.chip-all {border-color:var(--bd2);color:var(--td)}
.chip-ok  {border-color:var(--green-b);color:var(--green)}
.chip-warn{border-color:var(--yellow-b);color:var(--yellow)}
.chip-bad {border-color:var(--red-b);color:var(--red)}
.chip.active{opacity:1;font-weight:500}
.chip:not(.active){opacity:.4}
.chip-all.active {background:var(--s2)}
.chip-ok.active  {background:var(--green-d)}
.chip-warn.active{background:var(--yellow-d)}
.chip-bad.active {background:var(--red-d)}

/* controls */
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:.75rem}
.search-wrap{position:relative;flex:1;min-width:200px}
.search-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;stroke:var(--tf);pointer-events:none}
input[type="search"]{width:100%;height:36px;padding:0 10px 0 32px;background:var(--s1);border:1px solid var(--bd2);border-radius:var(--r);color:var(--t);font-family:var(--f);font-size:13px;outline:none;-webkit-appearance:none;transition:border-color var(--tr),box-shadow var(--tr)}
input[type="search"]::-webkit-search-cancel-button{display:none}
input[type="search"]:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-d)}
select{height:36px;padding:0 24px 0 10px;background:var(--s1);border:1px solid var(--bd2);border-radius:var(--r);color:var(--t);font-family:var(--f);font-size:13px;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237f8fa6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-d)}
.btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--r);font-family:var(--f);font-size:13px;font-weight:500;cursor:pointer;border:1px solid;transition:all var(--tr);white-space:nowrap}
.btn svg{width:13px;height:13px}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn-load{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-load:hover{background:#2563eb;border-color:#2563eb}
.btn-refresh{background:var(--s1);border-color:var(--bd2);color:var(--td)}
.btn-refresh:hover{background:var(--s2);color:var(--t)}

/* progress */
.progress-wrap{height:2px;background:var(--s2);border-radius:1px;overflow:hidden;margin-bottom:.6rem}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--blue),#818cf8);border-radius:1px;transition:width .4s ease}

/* status bar */
.status-bar{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--td);padding:.35rem 0;border-top:1px solid var(--bd);min-height:32px}
.sdot{width:7px;height:7px;border-radius:50%;background:var(--tf);flex-shrink:0;transition:background var(--tr)}
.sdot.spin{background:var(--blue);animation:pulse 1.2s infinite}
.sdot.ok  {background:var(--green)}
.sdot.err {background:var(--red)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,.5)}50%{box-shadow:0 0 0 4px rgba(59,130,246,0)}}

/* ── Main ── */
.main{flex:1}
.results-bar{display:flex;align-items:center;justify-content:space-between;padding:.35rem 0;margin-bottom:.5rem;font-size:12px;color:var(--td)}
.results-actions{display:flex;gap:6px}
.btn-csv{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:transparent;border:1px solid var(--bd2);border-radius:var(--r);color:var(--td);font-family:var(--f);font-size:11px;cursor:pointer;transition:all var(--tr)}
.btn-csv svg{width:11px;height:11px}
.btn-csv:hover{border-color:var(--green-b);color:var(--green)}
.btn-csv:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.tbl-outer{border:1px solid var(--bd);border-radius:var(--rl);overflow:hidden;overflow-x:auto;-webkit-overflow-scrolling:touch;box-shadow:0 4px 24px rgba(0,0,0,.35);animation:fadeUp .25s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
thead{background:var(--s1);position:sticky;top:0;z-index:2}
th{padding:10px 12px;text-align:left;font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--td);border-bottom:1px solid var(--bd);white-space:nowrap;cursor:pointer;user-select:none;transition:color var(--tr),background var(--tr)}
th:hover{color:var(--t);background:var(--s2)}
th.sorted{color:var(--blue)}
th:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
th.c-note{cursor:default}
th.c-note:hover{background:var(--s1);color:var(--td)}
.sa{opacity:.5;font-style:normal}
th.sorted .sa{opacity:1;color:var(--blue)}

/* column widths */
.c-name   {width:22%}
.c-version{width:12%}
.c-cat    {width:20%}
.c-repo   {width:9%}
.c-status {width:11%}
.c-note   {width:26%}

td{padding:9px 12px;border-bottom:1px solid var(--bd);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--s2)}

/* cell types */
.pkg-link{color:var(--t);text-decoration:none;font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;transition:color var(--tr)}
.pkg-link:hover{color:var(--blue)}
.ver-tag{font-family:var(--m);font-size:11px;padding:2px 7px;border-radius:99px;background:var(--blue-d);border:1px solid var(--blue-b);color:var(--blue);white-space:nowrap}
.cat-text{font-size:12px;color:var(--td)}
.repo-tag{display:inline-block;padding:2px 7px;border-radius:99px;font-size:11px;background:var(--s2);border:1px solid var(--bd2);color:var(--td)}
.repo-tag.contrib{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.3);color:#818cf8}

.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:500;white-space:nowrap;border:1px solid}
.badge svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.b-ok  {background:var(--green-d);border-color:var(--green-b);color:var(--green)}
.b-warn{background:var(--yellow-d);border-color:var(--yellow-b);color:var(--yellow)}
.b-bad {background:var(--red-d);border-color:var(--red-b);color:var(--red)}
.b-new {background:var(--blue-d);border-color:var(--blue-b);color:var(--blue)}

.note-wrap{display:flex;align-items:center;gap:6px}
.note-txt{font-size:11px;color:var(--td);overflow:hidden;text-overflow:ellipsis;flex:1}
.detail-lnk{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:5px;border:1px solid var(--bd2);color:var(--tf);text-decoration:none;flex-shrink:0;transition:all var(--tr)}
.detail-lnk:hover{border-color:var(--blue-b);color:var(--blue)}
.detail-lnk svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.empty-state{display:flex;flex-direction:column;align-items:center;gap:10px;padding:3rem 1rem;color:var(--tf);text-align:center}
.empty-state svg{width:36px;height:36px;stroke:var(--bd2)}
.empty-state p{font-size:13px}
.empty-state strong{color:var(--td)}

/* ── Footer ── */
.footer{margin-top:1.5rem;padding:1rem 0 1.5rem;border-top:1px solid var(--bd)}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}
.footer-links{display:flex;gap:1rem}
.footer-links a{font-size:12px;color:var(--td);text-decoration:none;transition:color var(--tr)}
.footer-links a:hover{color:var(--blue)}
.footer-note{font-size:11px;color:var(--tf)}

/* ── Responsive ── */
@media(max-width:540px){
  table,thead,tbody,th,td,tr{display:block}
  thead{display:none}
  .tbl-outer{border:none;border-radius:0;box-shadow:none;overflow:visible}
  tbody tr{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r);margin-bottom:8px;padding:10px 12px;display:grid;grid-template-columns:1fr auto;gap:4px 8px}
  td{padding:0;border:none;white-space:normal;overflow:visible;text-overflow:clip}
  td.c-name   {grid-column:1;grid-row:1}
  td.c-status {grid-column:2;grid-row:1;justify-self:end;align-self:start}
  td.c-version{grid-column:1;grid-row:2}
  td.c-cat    {grid-column:1;grid-row:3}
  td.c-repo   {grid-column:2;grid-row:2;justify-self:end}
  td.c-note   {grid-column:1/-1;padding-top:6px;border-top:1px solid var(--bd);margin-top:4px}
  .header-inner{flex-direction:column}
  .controls{flex-direction:column}
  .search-wrap{min-width:0;width:100%}
  .btn{width:100%;justify-content:center}
}
@media(min-width:541px)and (max-width:768px){
  .c-cat{display:none}
  .c-name{width:28%}.c-version{width:14%}.c-repo{width:11%}.c-status{width:13%}.c-note{width:34%}
}
@media print{
  body::before,.controls,.chips,.btn,.btn-csv,.footer,.status-bar,.progress-wrap,.detail-lnk{display:none!important}
  body{background:#fff;color:#000}
  .tbl-outer{box-shadow:none;border:1px solid #ccc}
  th,td{color:#000!important;border-color:#ddd!important}
}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
[hidden]{display:none!important}