/* Agro AI Platform - Smart Agro Theme (Clean + Premium)
   File: public/assets/css/style.css
   Notes:
   - păstrează clasele existente (container/topbar/card/btn/badge/table etc.)
   - tipografie & spațiere fluide (clamp)
   - focus accesibil (:focus-visible)
   - micro-animații + prefers-reduced-motion
   - dark mode opțional (prefers-color-scheme)
   - CERINȚĂ: folosește DOAR culorile din paleta dată (pistachio + sky) + ink/muted
   - CERINȚĂ: “pătratele” (topbar/card/table/inputs etc.) să fie alb murdar plăcut din gama p-50/p-100
   - CERINȚĂ: textul să fie în principal --ink (gri închis), iar unde e nevoie “forțat” negru folosim --muted
*/

/* =========================
   1) Design tokens
   ========================= */
:root{
  /* Typography */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  /* Sizing / rhythm */
  --radius: 18px;
  --radius-sm: 13px;
  --radius-xs: 10px;

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;

  /* Fluid text */
  --fs-12: clamp(12px, 1.0vw, 12.5px);
  --fs-13: clamp(13px, 1.05vw, 13.5px);
  --fs-14: clamp(14px, 1.1vw, 14.5px);
  --fs-16: clamp(15px, 1.25vw, 16px);

  /* Pistachio scale */
  --p-50:  #F3FFEE;
  --p-100: #E3FFD7;
  --p-200: #C6FFAE;
  --p-300: #A4F57F;
  --p-400: #7FE24F;
  --p-500: #56CC22;
  --p-600: #2FB300;
  --p-700: #1E8A00;
  --p-800: #39ae18d4;

  /* Secondary accent */
  --sky-200: #BDEBFF;
  --sky-400: #2BA4FF;
  --sky-500: #008CFF;

  /* Ink */
  --ink: #575656;   /* text principal */
  --muted: #000000; /* text forțat negru */

  /* Lines */
  --line: rgba(87,86,86,.18);
  --line-2: rgba(87,86,86,.10);

  /* Shadows */
  --shadow-1: 0 10px 22px rgba(0,0,0,.08);
  --shadow-2: 0 14px 38px rgba(0,0,0,.12);
  --shadow-3: 0 18px 44px rgba(0,0,0,.14);

  /* Focus ring (doar din paleta dată, folosim p-400 / sky-200 via rgba) */
  --focus: rgba(127,226,79,.38);     /* p-400 */
  --focus-strong: rgba(189,235,255,.45); /* sky-200 */

  /* Semantics (fără culori noi: folosim pistachio/sky + text) */
  --ok-bg:   rgba(127,226,79,.18);   /* p-400 */
  --ok-bd:   rgba(47,179,0,.35);     /* p-600 */
  --ok-tx:   var(--muted);

  --warn-bg: rgba(189,235,255,.20);  /* sky-200 */
  --warn-bd: rgba(43,164,255,.42);   /* sky-400 */
  --warn-tx: var(--muted);

  --bad-bg:  rgba(0,140,255,.12);    /* sky-500 (folosit ca “alert”) */
  --bad-bd:  rgba(0,140,255,.28);
  --bad-tx:  var(--muted);

  /* Motion */
  --t-fast: 120ms;
  --t-med:  180ms;
  --easing: cubic-bezier(.2,.8,.2,1);

  /* Backdrop blur */
  --blur: 10px;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1200px 560px at 12% -12%, rgba(127,226,79,.28), transparent 62%),
    radial-gradient(800px 520px at 92% -4%, rgba(189,235,255,.35), transparent 60%),
    radial-gradient(800px 520px at 70% 112%, rgba(47,179,0,.18), transparent 62%),
    linear-gradient(180deg, var(--p-100), var(--p-50));
}

/* Linkuri */
a{ color: var(--muted); text-decoration: none; }
a:hover{ text-decoration: none; }

/* Placeholders */
::placeholder{ color: var(--ink); opacity:1; }
::-webkit-input-placeholder{ color: var(--ink); opacity:1; }
::-moz-placeholder{ color: var(--ink); opacity:1; }
:-ms-input-placeholder{ color: var(--ink); opacity:1; }

/* Global focus */
:focus{ outline: none; }
:focus-visible{
  box-shadow: 0 0 0 4px var(--focus), 0 0 0 7px rgba(243,255,238,.85); /* p-50 */
  border-color: rgba(47,179,0,.35) !important; /* p-600 */
}

/* Subtle grain */
body{ position: relative; }
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,.10) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 30%, rgba(0,0,0,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(0,0,0,.07) 0 1px, transparent 1px);
  background-size: 26px 26px, 34px 34px, 42px 42px;
  animation: agroGrain 12s linear infinite;
}
@keyframes agroGrain{
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(-8px, 6px, 0); }
  100% { transform: translate3d(0,0,0); }
}

/* =========================
   2) Layout containers
   ========================= */
.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 14px 28px;
}

/* Topbar (alb murdar din p-50/p-100) */
.topbar{
  position: relative;
  overflow: hidden;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding: 14px 14px;
  border-radius: var(--radius);

  background:
    linear-gradient(135deg, rgba(243,255,238,.96), rgba(227,255,215,.90)),
    radial-gradient(600px 280px at 10% 0%, rgba(127,226,79,.16), transparent 60%);

  border: 1px solid rgba(47,179,0,.18);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(var(--blur));
}

.topbar::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 220px at 18% 10%, rgba(127,226,79,.18), transparent 60%),
    radial-gradient(520px 220px at 80% 0%, rgba(189,235,255,.22), transparent 60%),
    linear-gradient(90deg, rgba(127,226,79,.06), rgba(0,140,255,.06), rgba(47,179,0,.06));
  opacity: .9;
  filter: blur(8px);
  transform: translate3d(0,0,0);
  animation: agroTopGlow 8.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes agroTopGlow{
  0%   { transform: translateX(-2%) scale(1.02); opacity:.72; }
  50%  { transform: translateX(2%)  scale(1.04); opacity:.92; }
  100% { transform: translateX(-2%) scale(1.02); opacity:.72; }
}
.topbar > *{ position: relative; z-index: 1; }

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 0;
}

.brand img{
  width: 46px;
  height: 46px;
  border-radius: 15px;
  border: 1px solid rgba(47,179,0,.20);
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(243,255,238,.85), transparent 60%),
    linear-gradient(135deg, rgba(127,226,79,.95), rgba(189,235,255,.28));
  padding: 7px;
  box-shadow: 0 10px 20px rgba(47,179,0,.14);
}

.title{
  font-size: var(--fs-16);
  font-weight: 950;
  letter-spacing: .2px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 560px;
  color: var(--muted);
}

.sub{
  font-size: var(--fs-13);
  color: var(--ink);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 560px;
}

.nav{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* =========================
   3) Grid + cards
   ========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-top: 14px;
}

/* Cards (alb murdar p-50/p-100 + glow pistachio/sky) */
.card{
  background:
    radial-gradient(600px 240px at 18% 0%, rgba(127,226,79,.10), transparent 65%),
    radial-gradient(600px 240px at 95% 0%, rgba(189,235,255,.12), transparent 65%),
    linear-gradient(180deg, rgba(243,255,238,.98), rgba(227,255,215,.92));

  border: 1px solid rgba(47,179,0,.14);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 14px 14px;
  min-width: 0;

  transition:
    transform var(--t-fast) var(--easing),
    box-shadow var(--t-med) var(--easing),
    border-color var(--t-med) var(--easing),
    filter var(--t-med) var(--easing);
}

.card:hover{
  transform: translateY(-1px);
  border-color: rgba(47,179,0,.22);
  box-shadow:
    var(--shadow-2),
    0 0 0 1px rgba(47,179,0,.08) inset;
  filter: saturate(1.03);
}

.card .h1{
  font-size: 15px;
  font-weight: 950;
  letter-spacing: .2px;
  color: var(--muted);
}

.p{
  color: var(--ink);
  margin: 8px 0 0;
  line-height: 1.48;
  font-size: var(--fs-13);
}

.row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}

/* Column spans */
.span12{ grid-column: span 12; }
.span11{ grid-column: span 11; }
.span10{ grid-column: span 10; }
.span9{ grid-column: span 9; }
.span8{ grid-column: span 8; }
.span7{ grid-column: span 7; }
.span6{ grid-column: span 6; }
.span5{ grid-column: span 5; }
.span4{ grid-column: span 4; }
.span3{ grid-column: span 3; }
.span2{ grid-column: span 2; }
.span1{ grid-column: span 1; }

/* =========================
   4) Buttons
   ========================= */
.btn{
  appearance:none;
  border: 1px solid rgba(47,179,0,.30); /* p-600 */
  background:
    linear-gradient(180deg, rgba(243,255,238,.92), rgba(227,255,215,.86)); /* p-50 -> p-100 */
  color: var(--muted);

  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 400;
  font-size: var(--fs-13);
  line-height: 1;
  cursor: pointer;

  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  transition:
    transform var(--t-fast) var(--easing),
    box-shadow var(--t-med) var(--easing),
    background var(--t-med) var(--easing),
    border-color var(--t-med) var(--easing),
    filter var(--t-med) var(--easing);
}

.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(47,179,0,.48);
  box-shadow:
    0 14px 30px rgba(47,179,0,.16),
    0 0 0 1px rgba(47,179,0,.08) inset;
  filter: saturate(1.06);
}

/* Primary */
.btn.primary{
  position: relative;
  overflow: hidden;

  border-color: rgba(30,138,0,.35); /* p-700 */
  background:
    radial-gradient(20px 20px at 25% 25%, rgba(243,255,238,.70), transparent 60%),
    linear-gradient(135deg, rgba(127,226,79,.98), rgba(47,179,0,.96));
  color: var(--muted);
  box-shadow: 0 14px 34px rgba(47,179,0,.22);
}

.btn.primary:hover{
  border-color: rgba(30,138,0,.45);
  box-shadow: 0 18px 44px rgba(47,179,0,.28);
}

/* Shine effect */
.btn.primary::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 55%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(243,255,238,.70), transparent);
  transform: rotate(18deg);
  opacity: 0;
  pointer-events:none;
}
.btn.primary:hover::after{
  animation: agroShine .85s ease-out forwards;
  opacity: 1;
}
@keyframes agroShine{
  0%   { left:-60%; opacity:0; }
  15%  { opacity:.75; }
  100% { left:140%; opacity:0; }
}

/* Danger (fără roșu; folosim sky-500 ca accent “alert”) */
.btn.danger{
  border-color: rgba(0,140,255,.34); /* sky-500 */
  background: linear-gradient(135deg, rgba(189,235,255,.55), rgba(243,255,238,.90)); /* sky-200 + p-50 */
  color: var(--muted);
}

/* =========================
   5) Badges & notices
   ========================= */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding: 7px 10px 7px 12px;
  border-radius: 999px;

  border: 1px solid rgba(47,179,0,.18);
  background: linear-gradient(180deg, rgba(243,255,238,.95), rgba(227,255,215,.88));

  font-weight: 950;
  font-size: clamp(12px, 1.0vw, 12.5px);
  color: var(--muted);
  position: relative;
}

.badge::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display:inline-block;
  margin-right: 8px;
  box-shadow: 0 0 0 3px rgba(0,0,0,.03);
  background: rgba(87,86,86,.35);
}

/* ok */
.badge.ok{
  border-color: rgba(47,179,0,.35);
  background: linear-gradient(180deg, rgba(127,226,79,.22), rgba(227,255,215,.78));
  color: var(--muted);
}
.badge.ok::before{
  background: linear-gradient(180deg, rgba(127,226,79,1), rgba(47,179,0,1));
  box-shadow: 0 0 0 3px rgba(47,179,0,.12);
}

/* warn (pe sky) */
.badge.warn{
  border-color: rgba(43,164,255,.40);
  background: linear-gradient(180deg, rgba(189,235,255,.55), rgba(243,255,238,.85));
  color: var(--muted);
}
.badge.warn::before{
  background: linear-gradient(180deg, rgba(189,235,255,1), rgba(43,164,255,1));
  box-shadow: 0 0 0 3px rgba(43,164,255,.12);
}

/* bad (tot sky-500, fără roșu) */
.badge.bad{
  border-color: rgba(0,140,255,.32);
  background: linear-gradient(180deg, rgba(0,140,255,.14), rgba(243,255,238,.90));
  color: var(--muted);
}
.badge.bad::before{
  background: linear-gradient(180deg, rgba(0,140,255,1), rgba(43,164,255,1));
  box-shadow: 0 0 0 3px rgba(0,140,255,.12);
}

.notice{
  border-radius: var(--radius-sm);
  border: 1px solid rgba(47,179,0,.16);
  background:
    radial-gradient(700px 220px at 14% 0%, rgba(127,226,79,.10), transparent 65%),
    linear-gradient(180deg, rgba(243,255,238,.95), rgba(227,255,215,.88));
  padding: 10px 12px;
  color: var(--muted);
  font-size: var(--fs-13);
  line-height: 1.45;
}

.notice.ok{
  border-color: rgba(47,179,0,.30);
  background: var(--ok-bg);
  color: var(--muted);
}
.notice.warn{
  border-color: rgba(43,164,255,.35);
  background: var(--warn-bg);
  color: var(--muted);
}
.notice.error{
  border-color: rgba(0,140,255,.26);
  background: var(--bad-bg);
  color: var(--muted);
}

/* =========================
   6) Forms
   ========================= */
.field{
  display:flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
}

label{
  font-size: clamp(12px, 1.0vw, 12.5px);
  font-weight: 950;
  color: var(--muted);
  letter-spacing: .2px;
}

/* inputs/select/textarea: alb murdar p-50/p-100 */
input, select, textarea{
  width: 100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(47,179,0,.18);

  background: linear-gradient(180deg, rgba(243,255,238,.98), rgba(227,255,215,.90));
  color: var(--muted);
  outline: none;
  font-size: var(--fs-14);

  transition: border-color var(--t-med) var(--easing), box-shadow var(--t-med) var(--easing);
}

textarea{ resize: vertical; }

input:focus, select:focus, textarea:focus{
  border-color: rgba(47,179,0,.38);
  box-shadow: 0 0 0 4px var(--focus);
}

.hint{
  font-size: var(--fs-12);
  color: var(--ink);
  margin-top: 6px;
}

/* =========================
   7) Tables
   ========================= */
.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;

  border-radius: var(--radius-sm);
  border: 1px solid rgba(47,179,0,.16);
  background: linear-gradient(180deg, rgba(243,255,238,.95), rgba(227,255,215,.88));
}

.table thead th{
  text-align:left;
  font-size: clamp(12px, 1.0vw, 12.5px);
  color: var(--muted);
  font-weight: 950;
  padding: 11px 12px;

  background:
    radial-gradient(500px 240px at 18% 0%, rgba(127,226,79,.18), transparent 65%),
    linear-gradient(180deg, rgba(243,255,238,.98), rgba(227,255,215,.88));

  border-bottom: 1px solid rgba(47,179,0,.16);
}

.table tbody td{
  padding: 11px 12px;
  border-bottom: 1px solid rgba(87,86,86,.10);
  font-size: var(--fs-13);
  color: var(--muted);
  vertical-align: top;
  background: transparent;
}

.table tbody tr:hover td{
  background: linear-gradient(90deg, rgba(198,255,174,.35), rgba(189,235,255,.18)); /* p-200 + sky-200 */
}

.table tbody tr:last-child td{ border-bottom: 0; }

/* =========================
   8) Code blocks & footer
   ========================= */
pre{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: clamp(12px, 1.0vw, 12.6px);
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;

  background: linear-gradient(180deg, rgba(243,255,238,.98), rgba(227,255,215,.90));
  border: 1px solid rgba(47,179,0,.14);
  border-radius: var(--radius-sm);
  padding: 12px;
  box-shadow: var(--shadow-1);
}

.footer{
  margin-top: 16px;
  text-align:center;
  color: var(--ink);
  font-size: var(--fs-12);
}

/* =========================
   9) Responsive
   ========================= */
@media (max-width: 980px){
  .title, .sub{ max-width: 340px; }
}
@media (max-width: 860px){
  .span6{ grid-column: span 12; }
  .span4{ grid-column: span 12; }
  .span3{ grid-column: span 12; }
  .span2{ grid-column: span 12; }
}
@media (max-width: 520px){
  .container{ padding: 14px 10px 22px; }
  .topbar{ padding: 12px 12px; }
  .brand img{ width: 44px; height: 44px; }
  .title{ max-width: 220px; }
  .sub{ max-width: 220px; }
  .nav{ gap: 7px; }
}

/* =========================
   10) Reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce){
  .topbar::before,
  body::after,
  .btn.primary:hover::after{
    animation: none !important;
  }
  .card, .btn{
    transition: none !important;
  }
}

/* =========================
   11) Optional: Dark mode
   ========================= */
/* Menținem textul pe --ink/--muted; fundalurile devin “sticlă” folosind doar p/sky. */
@media (prefers-color-scheme: dark){
  html, body{
    background:
      radial-gradient(1200px 560px at 12% -12%, rgba(127,226,79,.18), transparent 62%),
      radial-gradient(800px 520px at 92% -4%, rgba(0,140,255,.16), transparent 60%),
      radial-gradient(800px 520px at 70% 112%, rgba(47,179,0,.14), transparent 62%),
      linear-gradient(180deg, rgba(30,138,0,.22), rgba(0,140,255,.10));
  }

  .topbar{
    background:
      linear-gradient(135deg, rgba(243,255,238,.14), rgba(227,255,215,.10)),
      radial-gradient(600px 280px at 10% 0%, rgba(127,226,79,.12), transparent 60%);
    border-color: rgba(127,226,79,.16);
  }

  .card{
    border-color: rgba(127,226,79,.14);
    background:
      radial-gradient(600px 240px at 18% 0%, rgba(127,226,79,.10), transparent 65%),
      radial-gradient(600px 240px at 95% 0%, rgba(189,235,255,.10), transparent 65%),
      linear-gradient(180deg, rgba(243,255,238,.10), rgba(227,255,215,.08));
  }

  input, select, textarea{
    background: linear-gradient(180deg, rgba(243,255,238,.12), rgba(227,255,215,.08));
    border-color: rgba(47,179,0,.26);
    color: var(--muted);
  }

  .table{
    background: linear-gradient(180deg, rgba(243,255,238,.10), rgba(227,255,215,.08));
    border-color: rgba(127,226,79,.14);
  }
  .table thead th{
    background:
      radial-gradient(500px 240px at 18% 0%, rgba(127,226,79,.12), transparent 65%),
      linear-gradient(180deg, rgba(243,255,238,.12), rgba(227,255,215,.08));
  }

  pre{
    background: linear-gradient(180deg, rgba(243,255,238,.12), rgba(227,255,215,.08));
    border-color: rgba(127,226,79,.14);
  }
}

/* Ultima barieră: inline style */
[style*="color:"],
[style*="Color:"]{
  color: var(--muted) !important;
}