/* ===================================================================
   Threat Intel Platform - styles.css (FULL — icon only, no logo)
   =================================================================== */

/* ------------------------------
   Variables (Theme)
   ------------------------------ */
:root{
  --bg: #0f151d;
  --bg-2: #111923;
  --card: #121a25;
  --card-border: #263241;
  --text: #d7e1ea;
  --text-muted: #8aa0b3;
  --accent: #ff6a00;
  --accent-2: #00c7b7;
  --accent-blue: #2474ff;
  --danger: #b41a3a;
  --shadow: rgba(0,0,0,0.35);
  --radius: 14px;
}

/* ------------------------------
   Reset / Base
   ------------------------------ */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(36,116,255,0.06), transparent 60%),
    radial-gradient(1000px 700px at 90% 10%, rgba(255,106,0,0.05), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-size:14px; line-height:1.5;
}
a{ color:var(--accent-blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ------------------------------
   Layout (Sidebar + Content)
   ------------------------------ */
.wrapper{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  min-height:100vh;
}

/* Sidebar (scoped) */
aside.sidebar{
  background:linear-gradient(180deg,#0e141c,#0b1017);
  border-right:1px solid var(--card-border);
  padding:18px 16px;
  position:sticky; top:0; height:100vh;
}
aside.sidebar .brand{ display:flex; align-items:center; gap:10px; font-weight:600; }
aside.sidebar .nav{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
aside.sidebar .nav a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; color:var(--text);
  border:1px solid transparent;
}
aside.sidebar .nav a .ico{
  width:18px; height:18px; display:inline-block; border-radius:5px;
  background:linear-gradient(135deg,rgba(36,116,255,.25),rgba(0,199,183,.2));
  border:1px solid #1f2a37;
}
aside.sidebar .nav a:hover{ background:#0f1722; border-color:#1f2a37; }
aside.sidebar .nav a.active{
  background:linear-gradient(180deg,rgba(36,116,255,.14),rgba(0,199,183,.12));
  border-color:#2a3a4c;
}

/* Content */
main{
  padding:22px 26px 48px;
  max-width:1400px; width:100%;
  margin:0 auto;
}

/* ------------------------------
   HEADER — icon only (no logo), single row
   ------------------------------ */
.header{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0 18px; margin-bottom:8px;
  border-bottom:1px solid var(--card-border);
  flex-wrap:nowrap; /* mos thyhet në rresht tjetër */
}

/* BRAND */
.brand{
  display:flex; align-items:center; gap:10px;
  white-space:nowrap; max-width:260px; overflow:hidden;
  background:none !important;
}

/* —— 1) HIQ ÇDO LOGO EXISTUESE NË HEADER —— */
/* fshin elementë tipikë logo/crest */
.header .brand img,
.header .brand svg,
.header .brand picture,
.header .brand .logo,
.header .brand .crest,
.header .brand [class*="logo"],
.header .brand [class*="crest"]{
  display:none !important;
  width:0 !important; height:0 !important;
  padding:0 !important; margin:0 !important; border:0 !important;
  background:none !important; box-shadow:none !important;
}
/* fshin logo si background tek vetë brand-i */
.header .brand{ background-image:none !important; }
/* fshin pseudo-logo nga theme ekzistuese */
.header .brand::before{ content:none !important; background:none !important; }
.header .brand::after{ content:none; } /* do ta vendosim më poshtë përsëri me ikonë */

/* —— 2) VETËM IKONË MODERNE/ABSTRAKTE —— */
.header .brand{
  position:relative;
  padding-left:0;
}
/* përdorim ::after për ikonën tonë, pavarësisht çfarë kishte ::before më parë */
.header .brand::after{
  content:"";
  display:inline-block;
  width:18px; height:18px; min-width:18px; min-height:18px;
  margin-right:6px;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\
<path d='M12 2l7 3v6c0 5-3.5 9-7 11-3.5-2-7-6-7-11V5l7-3z' stroke='%23ff6a00' stroke-width='1.6' stroke-linejoin='round'/>\
<path d='M6.5 11a5.5 5.5 0 0 1 11 0' stroke='%2300c7b7' stroke-width='1.6' stroke-linecap='round'/>\
<circle cx='12' cy='11' r='1.6' fill='%23ffffff'/>\
</svg>");
  background-repeat:no-repeat; background-position:center; background-size:contain;
  vertical-align:middle;
}

/* MENU në të njëjtin rresht me brand-in */
.header .nav{
  flex:1 1 auto;
  display:flex; flex-direction:row; align-items:center; justify-content:flex-end;
  gap:14px; flex-wrap:nowrap; min-width:0;
}
.header .nav a{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; font-size:14px; color:var(--text-muted);
  border-radius:8px; border:1px solid transparent;
  white-space:nowrap;
}
.header .nav a:hover{ color:var(--text); background:#0f1722; border-color:#1f2a37; }
.header .nav .ico{
  width:16px; height:16px; display:inline-block; border-radius:4px;
  background:linear-gradient(135deg,rgba(36,116,255,.25),rgba(0,199,183,.2));
  border:1px solid #1f2a37;
}

/* ------------------------------
   Grid & Cards
   ------------------------------ */
.grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px; margin-bottom:18px;
}
.card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 8px 24px var(--shadow);
}

/* KPI */
.kpi{ display:flex; flex-direction:column; gap:6px; }
.kpi .kpi-title{ color:var(--text-muted); font-size:12px; letter-spacing:.3px; }
.kpi .kpi-value{ font-size:28px; font-weight:700; }

/* Actions */
.actions .row{ display:flex; gap:10px; flex-wrap:wrap; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 14px; border-radius:10px; font-weight:600;
  border:1px solid transparent; cursor:pointer; color:#0f151d;
  background:#e6edf5; text-decoration:none;
  transition:transform .04s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.2); }
.btn.small{ padding:6px 10px; font-size:12px; }
.btn.orange{ background:linear-gradient(135deg,#ff6a00,#ff8c3a); color:#0c0f14; }
.btn.green { background:linear-gradient(135deg,#00c7b7,#37dfd2); color:#0c0f14; }
.btn.blue  { background:linear-gradient(135deg,#2474ff,#5a95ff); color:#0c0f14; }
.btn.red   { background:linear-gradient(135deg,#b41a3a,#e62e57); color:#fff; }
.btn.gray  { background:linear-gradient(135deg,#2b3644,#324152); color:#d0d9e2; }

/* ------------------------------
   Tables
   ------------------------------ */
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ padding:10px 12px; border-bottom:1px solid #1f2a2f; }
.table thead th{
  color:var(--text-muted); font-size:12px; text-transform:uppercase; letter-spacing:.4px;
  background:#0f1722; position:sticky; top:0; z-index:1;
}
.table tbody tr:hover{ background:#0f1722; }
.table.compact th,.table.compact td{ padding:8px 10px; white-space:nowrap; }

/* Severity badge (bazë si pill) */
.sev{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; font-weight:700; font-size:12px; color:#0b0f15;
  border:1px solid transparent;
}
.sev-critical{ background:#ff3b30; border-color:#ff3b30; }
.sev-high   { background:#ff9500; border-color:#ff9500; }
.sev-medium { background:#ffd60a; border-color:#ffd60a; } /* ✅ Medium = e verdhë */
.sev-low    { background:#34c759; border-color:#34c759; }
.sev-info   { background:#5ac8fa; border-color:#5ac8fa; }

/* ------------------------------
   Forms & Login
   ------------------------------ */
.form{ display:grid; gap:12px; }
.input{
  background:#0f1722; color:var(--text);
  border:1px solid var(--card-border);
  border-radius:10px; padding:10px 12px; width:100%;
}
.input:focus{ outline:none; border-color:#355171; box-shadow:0 0 0 3px rgba(36,116,255,.15); }
.login{
  max-width:420px; margin:8vh auto; padding:24px;
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
  box-shadow:0 16px 42px var(--shadow);
}
.login h1{ margin:8px 0 18px; }
.login .brand{ justify-content:center; }

/* ------------------------------
   Dashboard: Panels (Table + Chart)
   ------------------------------ */
.section-title{ font-size:16px; font-weight:700; margin:0 0 8px; }
.chart-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.chart-header .muted{ color:var(--text-muted); font-size:12px; }

.rowpanel{
  display:grid;
  grid-template-columns:1.1fr 1.6fr;
  gap:18px; align-items:stretch; margin-bottom:18px;
}
.rowpanel .panel-left,.rowpanel .panel-right{
  height:360px; min-height:360px;
}
.panel-left{ display:flex; flex-direction:column; min-width:0; }
.panel-left .table-wrap{
  flex:1 1 auto; min-height:0; overflow:auto;
  border:1px solid var(--card-border); border-radius:10px; background:#0f1722;
}
.panel-left .table{ width:100%; }
.panel-right{
  min-width:0; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.panel-right svg{ width:100%; height:100%; display:block; }

/* Heatmap container */
.heatmap{ width:100%; height:100%; }
.heatgrid{ height:100%; overflow:auto; }

/* Siguri që pie slices të mos preken nga CSS global */
svg path[data-slice]{ shape-rendering:geometricPrecision; }

/* ------------------------------
   Footer
   ------------------------------ */
.footer{
  margin-top:18px; padding-top:12px; border-top:1px solid var(--card-border);
  color:var(--text-muted); font-size:12px;
}

/* ------------------------------
   Responsive
   ------------------------------ */
@media (max-width:1280px){
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:980px){
  .wrapper{ grid-template-columns:1fr; }
  aside.sidebar{ position:static; height:auto; }
  main{ padding:18px 16px 36px; max-width:100%; }
  .grid{ grid-template-columns:1fr; }
  .rowpanel{ grid-template-columns:1fr; }
  .rowpanel .panel-left,.rowpanel .panel-right{ height:320px; min-height:320px; }
}
/* Heq imazhin e logos nëse ka mbetur ndonjë vend tjetër */
.brand img,
.brand .crest-small {
  display: none !important;
}

/* Vendos brand dhe nav në një rresht */
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  min-width: fit-content;
  flex-shrink: 0;
}

.topbar .brand .app {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text);
  white-space: nowrap;
  overflow: visible;
}

.topbar .nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

/* Nav ngjitur me emrin e aplikacionit */
.topbar .brand .inline-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 40px;
}

.topbar .brand .inline-nav a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}

.topbar .brand .inline-nav a:hover {
  color: var(--accent);
}

/* ===== Header fixes: align, show full menu, remove old crest ===== */
.topbar {
  border-bottom: 1px solid var(--card-border);
  background: transparent;
}
.topbar .topbar-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Brand: ikonë + emër */
.topbar .brand { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.topbar .brand .platform-icon svg { display:block; width:28px; height:28px; }
.topbar .brand img, .topbar .brand .crest-small { display:none !important; }

/* Menu horizontale e plotë (ikona + tekst) */
.topbar .nav {
  display:flex; align-items:center; gap:18px; flex-wrap:nowrap; flex:0 0 auto; min-width:0;
}
.topbar .nav a {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--text); text-decoration:none; font-size:14px;
  padding:6px 8px; border-radius:8px; white-space:nowrap;
}
.topbar .nav a:hover { background:#0f1722; color:var(--text); }
.topbar .nav .ico { display:inline-flex; line-height:0; }
.topbar .nav .ico svg { width:16px; height:16px; display:block; }
.topbar .nav a span { display:inline !important; }

/* ====== Butonat kryesorë të dashboard-it ====== */
.button, .btn, .add-threat-btn, .sync-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 24px; font-size:15px; font-weight:600; border-radius:8px;
  cursor:pointer; text-decoration:none; transition:background .3s ease, transform .2s ease;
  min-width:220px; text-align:center; white-space:nowrap;
}
.add-threat-btn { background:linear-gradient(135deg,#0a84ff,#0071e3); color:#fff; border:none; }
.add-threat-btn:hover { background:linear-gradient(135deg,#0071e3,#005bb5); transform:translateY(-2px); }
.sync-btn { background:linear-gradient(135deg,#00b894,#00a884); color:#fff; border:none; }
.sync-btn:hover { background:linear-gradient(135deg,#00a884,#009970); transform:translateY(-2px); }

/* ===== Butonat kryesorë me ikona të vogla dhe madhësi të njëjtë ===== */
.action-buttons { display:flex; align-items:center; gap:20px; margin-bottom:24px; }
.add-threat-btn, .sync-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 24px; font-size:15px; font-weight:600; border-radius:8px;
  cursor:pointer; text-decoration:none; transition:background .3s ease, transform .2s ease;
  min-width:220px; text-align:center; white-space:nowrap; line-height:1; border:none;
}
.add-threat-btn .ico, .sync-btn .ico { display:inline-flex; align-items:center; justify-content:center; }
.add-threat-btn .ico svg, .sync-btn .ico svg { width:14px; height:14px; display:block; }
.add-threat-btn:active, .sync-btn:active { transform:translateY(0); filter:brightness(.95); }

/* ===== Serioziteti: PILLS kompakë dhe të QENDRUAR (jo full-width) ===== */
:root{
  --sev-critical: #ff3b30;
  --sev-high:     #ff9500;
  --sev-medium:   #ffd60a;   /* ✅ e verdhë për Medium */
  --sev-low:      #34c759;
  --sev-info:     #5ac8fa;
}
/* ngjyrat e badge-ve sipas nivelit (përdoren edhe si fallback) */
.sev-critical{ background: var(--sev-critical); border-color: var(--sev-critical); }
.sev-high    { background: var(--sev-high);     border-color: var(--sev-high); }
.sev-medium  { background: var(--sev-medium);   border-color: var(--sev-medium); }
.sev-low     { background: var(--sev-low);      border-color: var(--sev-low); }
.sev-info    { background: var(--sev-info);     border-color: var(--sev-info); }

/* QENDRIMI në qelizë (pa u bërë full-width) */
.table td:has(.sev){ text-align:center; }           /* qendrim i garantuar kur :has() ekziston */
/* Fallback për shfletues pa :has() – e qendrojmë vetë elementin */
.table .sev{
  display:block;                                    /* block për të lejuar margin auto */
  width:fit-content;                                /* vetëm sa përmbajtja */
  min-width:88px;                                   /* pak gjerësi për konsistencë vizuale */
  margin:0 auto;                                    /* qendër në qelizë */
  text-align:center;
  padding:4px 10px;
  border-radius:999px;
  font-weight:700; font-size:12px; color:#0b0f15;
  border:1px solid transparent;
}

/* ===== LOGIN – rikthim në formatin e vjetër (jo fullwidth), pa logo ===== */
.login{
  max-width: 440px;
  margin: 8vh auto;
  padding: 24px 22px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: 0 16px 42px var(--shadow);
}
.login .crest, .login .crest-small, .login img[alt*="Crest"]{
  display: none !important;
  width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important;
}
.login .platform-icon svg{ width:28px; height:28px; display:block; }
.login .form{ display:grid; gap:12px; }
.login .input{
  background:#0f1722; color:var(--text);
  border:1px solid var(--card-border); border-radius:10px; padding:10px 12px;
}
.login .input:focus{
  outline:none; border-color:#355171; box-shadow:0 0 0 3px rgba(36,116,255,.15);
}
.login .banner{
  margin-bottom:12px; padding:10px 12px; border-radius:10px;
  background:#22171a; border:1px solid #3a232a; color:#ffb4b4;
}

/* Footer i qendruar */
.footer {
  width: 100%;
  text-align: center;
  padding: 16px 0;
  font-size: 14px;
  color: var(--text-muted);
  background: var(--card);
  border-top: 1px solid var(--card-border);
}
/* ===== SERIOZITETI – PILLS TË VOGËL DHE NË QENDËR ===== */
:root{
  --sev-critical:#ff3b30;
  --sev-high:#ff9500;
  --sev-medium:#ffd60a; /* ✅ e verdhë për Medium */
  --sev-low:#34c759;
  --sev-info:#5ac8fa;
}

/* Qendro vetëm kolonën e “Seriozitetit” në atë tabelë (kolona e parë) */
.rowpanel .panel-left .table tbody td:first-child { text-align:center; }

/* Badge bazë si pill i vogël */
.table .sev{
  display:block;             /* lejon margin:auto */
  width:auto !important;     /* ❗ anulon çdo fullwidth paraardhës */
  min-width:88px;
  margin:0 auto !important;  /* ❗ qendër në qelizë */
  text-align:center;
  padding:4px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  line-height:1.2;
  color:#0b0f15;
  border:1px solid transparent;
}

/* Ngjyrat sipas nivelit */
.sev-critical{ background:var(--sev-critical) !important; border-color:var(--sev-critical) !important; }
.sev-high    { background:var(--sev-high)     !important; border-color:var(--sev-high)     !important; }
.sev-medium  { background:var(--sev-medium)   !important; border-color:var(--sev-medium)   !important; } /* ✅ e verdhë */
.sev-low     { background:var(--sev-low)      !important; border-color:var(--sev-low)      !important; }
.sev-info    { background:var(--sev-info)     !important; border-color:var(--sev-info)     !important; }