/* ===========================================================
   Vecko — Minimal Dark  ·  flat surfaces · hairline borders
   one muted steel-blue accent · no glow · no gradients
   =========================================================== */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

:root{ --blue:#6e8db3; --dark-blue:#5f7da3; --icon-blue:#8a9cb3; }

:root.dark{
  --background:#0f1115;
  --surfacePrimary:#161922;
  --surfaceSecondary:#1d212b;
  --textPrimary:rgba(233,238,245,.5);
  --textSecondary:rgba(233,238,245,.92);
  --borderPrimary:rgba(255,255,255,.06);
  --borderSecondary:rgba(255,255,255,.10);
  --divider:rgba(255,255,255,.06);
  --hover:rgba(255,255,255,.05);
  --icon-blue:#8a9cb3;
}

body{ font-family:"Manrope",-apple-system,system-ui,sans-serif; }
input,button,select,textarea{ font-family:inherit; }

/* flat background, no gradients */
:root.dark body, :root.dark #app{ background:var(--background); }

a,.action,.button,.item,.input,#search #input,#dropdown,.card,#nav ul li{
  transition:background-color .15s ease,color .15s ease,border-color .15s ease !important;
}

/* header: flat, hairline */
header{ background:var(--surfacePrimary) !important; border-bottom:1px solid var(--borderPrimary); box-shadow:none !important; }

/* search: modest radius, no glow */
#search #input{ border-radius:10px !important; border:1px solid var(--borderSecondary) !important; box-shadow:none !important; }
#search.active #input{ border-radius:12px !important; box-shadow:none !important; }
#search #result{ border-radius:10px !important; }

/* sidebar */
.dashboard #nav ul li{ border-radius:8px; margin:1px 8px; }
.dashboard #nav ul li:hover{ background:var(--hover); }
.dashboard #nav ul li.active{ background:var(--hover); color:var(--textSecondary); }
.dashboard #nav ul li.active:before{ background:var(--blue) !important; box-shadow:none !important; }

/* actions / buttons: flat */
.action{ border-radius:8px !important; }
.action:hover{ background:var(--hover) !important; }
.button{ border-radius:8px !important; font-weight:600; box-shadow:none !important; }
.button--flat{ color:var(--blue) !important; }
.button--blue,.button--block:not(.button--grey):not(.button--red){
  background:var(--blue) !important; color:#fff !important; box-shadow:none !important;
}
.button--blue:hover,.button--block:not(.button--grey):not(.button--red):hover{ background:var(--dark-blue) !important; }

/* listing items: flat, subtle hover */
#listing .item{ border-radius:10px !important; border:1px solid transparent; box-shadow:none !important; }
#listing .item:hover{ background:var(--hover) !important; }
#listing .item[aria-selected=true]{ background:var(--hover) !important; border-color:var(--borderSecondary) !important; box-shadow:none !important; }

/* cards / modals */
.card{ border-radius:12px !important; border:1px solid var(--borderPrimary); box-shadow:0 16px 40px rgba(0,0,0,.4) !important; background:var(--surfacePrimary) !important; }
.overlay{ background:rgba(0,0,0,.5) !important; }

/* dropdown */
#dropdown{ border-radius:10px !important; border:1px solid var(--borderPrimary); box-shadow:0 12px 32px rgba(0,0,0,.4) !important; background:var(--surfacePrimary) !important; }

/* inputs */
.input{ border-radius:8px !important; border:1px solid var(--borderSecondary) !important; box-shadow:none !important; }
.input:focus{ border-color:var(--blue) !important; box-shadow:none !important; }

/* breadcrumbs */
.breadcrumbs{ font-weight:600; }
.breadcrumbs a:hover{ color:var(--blue); }

/* login: clean centered card, no glow */
#login{ background:var(--background) !important; }
#login form{
  border-radius:14px !important; padding:2.4em 2.2em !important;
  background:var(--surfacePrimary) !important; border:1px solid var(--borderPrimary);
  box-shadow:0 16px 48px rgba(0,0,0,.45);
}
#login h1{ font-weight:700; letter-spacing:-.3px; color:var(--textSecondary); }
#login input{ border-radius:8px !important; }
#login input[type=submit]{ background:var(--blue) !important; color:#fff !important; font-weight:600; box-shadow:none !important; }
#login input[type=submit]:hover{ background:var(--dark-blue) !important; }

/* scrollbar: thin neutral */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:999px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.22); background-clip:content-box; }