/* =========================================================================
   ZHONGDA OIL REFINERY — base.css
   Design tokens + base element styles + reusable component classes.
   Converted 1:1 from the original Tailwind / index.css source.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lexend+Deca:wght@500;600;700&family=Orbitron:wght@400;600;700&display=swap');

:root{
  --background: 0 0% 100%;
  --foreground: 220 15% 25%;

  --card: 0 0% 100%;
  --card-foreground: 220 15% 25%;

  --popover: 0 0% 100%;
  --popover-foreground: 220 15% 25%;

  --primary: 210 70% 40%;
  --primary-foreground: 0 0% 100%;

  --secondary: 210 30% 65%;
  --secondary-foreground: 220 15% 20%;

  --muted: 220 20% 96%;
  --muted-foreground: 220 10% 45%;

  --accent: 45 80% 55%;
  --accent-foreground: 220 15% 15%;

  --destructive: 0 70% 50%;
  --destructive-foreground: 0 0% 100%;

  --border: 220 15% 88%;
  --input: 220 15% 92%;
  --ring: 210 70% 50%;

  --radius: 0.3rem;
}

*, *::before, *::after{ box-sizing:border-box; border-color: hsl(var(--border)); }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background-color:hsl(var(--background));
  color:hsl(var(--foreground));
  font-family:'Inter','system-ui',Avenir,Helvetica,Arial,sans-serif;
  font-feature-settings:"cv02","cv03","cv04","cv11";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:'Lexend Deca','Inter',system-ui,sans-serif;
  font-weight:600;
  color:hsl(var(--foreground));
}
table{ border-collapse:collapse; }

/* ---------- container ---------- */
.container{ width:100%; margin-left:auto; margin-right:auto; padding-left:1.5rem; padding-right:1.5rem; }
@media (min-width:640px){ .container{ max-width:640px; } }
@media (min-width:768px){ .container{ max-width:768px; } }
@media (min-width:1024px){ .container{ max-width:1024px; } }
@media (min-width:1280px){ .container{ max-width:1280px; } }
@media (min-width:1536px){ .container{ max-width:1536px; } }

/* ---------- reusable component classes (from index.css @apply rules) ---------- */
.section-title{ font-size:1.875rem; line-height:2.25rem; font-weight:700; color:hsl(var(--primary)); margin-bottom:1rem; text-align:center; }
@media (min-width:768px){ .section-title{ font-size:2.25rem; line-height:2.5rem; } }

.section-subtitle{ font-size:1rem; color:hsl(var(--muted-foreground)); margin-bottom:2.5rem; text-align:center; max-width:42rem; margin-left:auto; margin-right:auto; }
@media (min-width:768px){ .section-subtitle{ font-size:1.125rem; } }

.nav-item{ position:relative; padding:0.5rem 0.75rem; font-size:0.875rem; font-weight:500; color:hsl(var(--foreground)); transition:color .2s; display:inline-block; }
.nav-item:hover{ color:hsl(var(--primary)); }
.nav-item.active{ color:hsl(var(--primary)); font-weight:600; }
.nav-item::after{
  content:''; position:absolute; bottom:0; left:50%; width:80%; height:2px; background:hsl(var(--primary));
  transform:translateX(-50%) scaleX(0); transition:transform .3s ease-out;
}
.group:hover .nav-item::after{ transform:translateX(-50%) scaleX(1); }
.nav-item.active::after{ transform:translateX(-50%) scaleX(1); }

.dropdown-menu{
  position:absolute; left:0; margin-top:0.25rem; width:14rem; background:hsl(var(--card)); box-shadow:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1);
  border-radius:0.375rem; padding:0.375rem 0; opacity:0; visibility:hidden; transition:all .2s; transform:scale(.95);
  border:1px solid hsl(var(--border)); z-index:60;
}
.group:hover .dropdown-menu{ opacity:1; visibility:visible; transform:scale(1); }

.dropdown-item{ display:block; padding:0.5rem 1rem; font-size:0.875rem; color:hsl(var(--foreground)); border-radius:0.125rem; transition:all .15s; }
.dropdown-item:hover{ background:hsl(var(--muted)); color:hsl(var(--primary)); }

.footer-link{ color:#9ca3af; transition:color .2s; font-size:0.875rem; }
.footer-link:hover{ color:hsl(var(--accent)); }

.card-hover{ transition:all .3s ease-out; }
.card-hover:hover{ box-shadow:0 10px 25px rgba(0,0,0,.1),0 5px 10px rgba(0,0,0,.04); transform:translateY(-0.375rem); }

.btn-primary,.btn-secondary,.btn-outline,.btn-accent{
  display:inline-flex; align-items:center; justify-content:center; padding:0.625rem 1.5rem; border-radius:0.375rem;
  transition:all .2s; box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1);
  font-size:0.875rem; font-weight:600; letter-spacing:.025em; transform:translateY(0);
}
.btn-primary:hover,.btn-secondary:hover,.btn-outline:hover,.btn-accent:hover{
  box-shadow:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1); transform:translateY(-2px);
}
.btn-primary{ background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); }
.btn-primary:hover{ background:hsl(var(--primary)/.9); }
.btn-secondary{ background:hsl(var(--secondary)); color:hsl(var(--secondary-foreground)); }
.btn-secondary:hover{ background:hsl(var(--secondary)/.9); }
.btn-outline{ border:2px solid hsl(var(--primary)); color:hsl(var(--primary)); box-shadow:0 1px 2px rgb(0 0 0/.05); background:transparent; }
.btn-outline:hover{ background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); }
.btn-accent{ background:hsl(var(--accent)); color:hsl(var(--accent-foreground)); }
.btn-accent:hover{ background:hsl(var(--accent)/.9); }
.btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-outline:focus-visible,.btn-accent:focus-visible{
  outline:none; box-shadow:0 0 0 2px hsl(var(--ring)); 
}

input[type="text"],input[type="email"],input[type="tel"],textarea,select{
  background:hsl(var(--background)); border:2px solid hsl(var(--input)); border-radius:0.375rem; padding:0.625rem;
  font-size:0.875rem; transition:border-color .2s; width:100%;
}
input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus,textarea:focus,select:focus{
  outline:none; border-color:hsl(var(--primary)); box-shadow:0 0 0 2px hsl(var(--primary)/.5);
}
input::placeholder,textarea::placeholder{ color:hsl(var(--muted-foreground)/.7); }
textarea{ min-height:120px; }

/* Safety scrim: #site-navbar starts transparent with white text (see js/main.js),
   which assumes a dark/colorful hero sits directly beneath it. Pages without one
   (e.g. Stock & Quantity) would render invisible white-on-white menu text until
   the user scrolls. This gradient guarantees contrast on every page, regardless
   of what content follows the navbar. */
#site-navbar.bg-transparent::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0));
}

.page-header{ background:linear-gradient(to right,hsl(var(--primary)),hsl(var(--primary)/.9),hsl(var(--secondary))); color:#fff; padding:4rem 0; }
@media (min-width:768px){ .page-header{ padding:5rem 0; } }
.page-header h1{ font-size:2.25rem; font-weight:700; color:#fff !important; }
@media (min-width:768px){ .page-header h1{ font-size:3rem; } }
.page-header p{ font-size:1.125rem; color:hsl(var(--primary-foreground)/.8); margin-top:.75rem; max-width:48rem; }
@media (min-width:768px){ .page-header p{ font-size:1.25rem; } }

.content-section{ padding:3rem 0; }
@media (min-width:768px){ .content-section{ padding:5rem 0; } }
.content-section p,.content-section li{ color:hsl(var(--foreground)/.85); line-height:1.625; margin-bottom:1rem; font-size:1rem; }
.content-section h2{ font-size:1.5rem; font-weight:700; color:hsl(var(--primary)); margin-bottom:1.5rem; }
@media (min-width:768px){ .content-section h2{ font-size:1.875rem; } }
.content-section h3{ font-size:1.25rem; font-weight:600; color:hsl(var(--foreground)); margin-bottom:1rem; }
@media (min-width:768px){ .content-section h3{ font-size:1.5rem; } }

.table-responsive{ overflow-x:auto; border-radius:0.5rem; border:1px solid hsl(var(--border)); box-shadow:0 4px 6px -1px rgb(0 0 0/.1); }
.table{ width:100%; font-size:0.875rem; text-align:left; color:hsl(var(--foreground)); }
.table th{ padding:1rem 1.5rem; font-size:0.75rem; font-weight:600; color:hsl(var(--muted-foreground)); text-transform:uppercase; background:hsl(var(--muted)); border-bottom:1px solid hsl(var(--border)); }
.table td{ padding:1rem 1.5rem; background:hsl(var(--card)); border-bottom:1px solid hsl(var(--border)); }
.table tr:last-child td{ border-bottom:0; }

.glass-card{ background:hsl(var(--card)/.7); backdrop-filter:blur(12px); border:1px solid hsl(var(--card)/.2); box-shadow:0 20px 25px -5px rgb(0 0 0/.1); }
.hero-title-shadow{ text-shadow:0 2px 4px rgba(0,0,0,.3); }
.text-gradient-primary-accent{ background:linear-gradient(to right,hsl(var(--primary)),hsl(var(--accent))); -webkit-background-clip:text; background-clip:text; color:transparent; }
.font-calculator{ font-family:'Orbitron',sans-serif; }
.font-lcd{ font-family:'Courier New',Courier,monospace; }
.lcd-display{
  background:rgba(0,0,0,.7); padding:0.75rem; border-radius:0.375rem; border:2px solid #374151; box-shadow:inset 0 2px 4px rgba(0,0,0,.05);
  background-image:linear-gradient(rgba(57,255,20,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(57,255,20,.07) 1px,transparent 1px);
  background-size:3px 3px;
}
.lcd-text{ font-family:'Courier New',Courier,monospace; color:#4ade80; text-shadow:0 0 2px #39FF14,0 0 5px #39FF14,0 0 8px #39FF14; }

/* keyframes */
@keyframes subtle-pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.8; transform:scale(1.02);} }
@keyframes fade-in-up{ 0%{ opacity:0; transform:translateY(20px);} 100%{ opacity:1; transform:translateY(0);} }
@keyframes accordion-down{ from{ height:0;} to{ height:var(--radix-accordion-content-height);} }
@keyframes spin{ to{ transform:rotate(360deg);} }
.animate-subtle-pulse{ animation:subtle-pulse 3s infinite ease-in-out; }
.animate-spin{ animation:spin 1s linear infinite; }
.fade-in-up{ opacity:0; transform:translateY(20px); }
.fade-in-up.is-visible{ animation:fade-in-up .6s ease-out forwards; }