/* ============================================================
   BuniSoft — global stylesheet
   Ported verbatim from bunisoft-handoff/project/BuniSoft Website.dc.html
   (the <style> block) and extended with the hover/focus states the
   prototype expressed via style-hover / style-focus attributes.
   Design tokens live in :root; layout/colour stay inline in the
   Blade views so the markup matches the prototype pixel-for-pixel.
   ============================================================ */

/* ---------- design tokens ---------- */
:root{
  /* brand */
  --bs-teal:#34e3c4;
  --bs-teal-2:#22c3d6;
  --bs-teal-soft:#2ddfc0;
  --bs-grad:linear-gradient(135deg,#34e3c4,#22c3d6);
  --bs-teal-ink:#062019;        /* text on teal buttons */
  --bs-teal-text:#12a98c;       /* eyebrow / link teal on light */
  --bs-teal-text-2:#0c6f5c;
  --bs-teal-glow:#7ff0db;

  /* navy / ink */
  --bs-navy:#081834;
  --bs-navy-2:#0a2048;
  --bs-navy-3:#0f2b58;
  --bs-ink:#0e1b33;
  --bs-foot:#06122a;

  /* dashboards */
  --bs-dash-bg:#0a1124;
  --bs-dash-card:#0f1830;

  /* light surfaces */
  --bs-bg:#ffffff;
  --bs-surface:#f5f8fc;
  --bs-border:#e3eaf4;
  --bs-border-2:#e9eff6;
  --bs-field-border:#d8e1ee;

  /* muted text (light) */
  --bs-muted:#50617d;
  --bs-muted-2:#5b6b85;
  --bs-muted-3:#3c4d68;
  --bs-muted-4:#7a8aa4;

  /* muted text (dark) */
  --bs-d-text:#aebfdb;
  --bs-d-muted:#8ea3c6;
  --bs-d-muted-2:#7e93b8;
  --bs-d-muted-3:#9fb2d0;
  --bs-d-nav:#c6d4ea;

  /* fonts */
  --bs-head:'Sora',sans-serif;
  --bs-body:'Manrope',sans-serif;
}

/* ---------- base (verbatim from design) ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--bs-body);color:#0e1b33;background:#ffffff;-webkit-font-smoothing:antialiased}
::selection{background:#34e3c4;color:#081834}
a{text-decoration:none}

/* ---------- keyframes (verbatim) ---------- */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@keyframes pulseGlow{0%,100%{opacity:.55}50%{opacity:.9}}
@keyframes barGrow{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
@keyframes dash{to{stroke-dashoffset:0}}
@keyframes spinSlow{to{transform:rotate(360deg)}}

/* ============================================================
   HOVER / FOCUS — the prototype declared these inline via
   style-hover="" / style-focus="". Recreated here as real CSS,
   keyed to the data-fx / class hooks placed in the Blade markup.
   ============================================================ */

/* nav links (dark header) */
.bs-navlink{transition:color .15s,background .15s}
.bs-navlink:hover{color:#fff;background:rgba(120,160,220,.12)}
.bs-login-link{transition:color .15s}
.bs-login-link:hover{color:#fff}
.bs-mobile-navlink:hover{background:rgba(120,160,220,.12)}

/* primary teal button — lifts on hover */
.bs-btn-primary{transition:transform .15s,box-shadow .15s}
.bs-btn-primary:hover{transform:translateY(-2px)}
.bs-btn-primary-lift:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(40,210,190,.45)}

/* secondary / ghost button on dark */
.bs-btn-ghost{transition:background .15s}
.bs-btn-ghost:hover{background:rgba(255,255,255,.12)}

/* about feature card (light) */
.bs-lift{transition:transform .18s,box-shadow .18s}
.bs-lift:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(14,27,51,.08)}

/* service card */
.bs-svc-card{transition:transform .2s,box-shadow .2s,border-color .2s}
.bs-svc-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(14,27,51,.1);border-color:#bfe9df}

/* why-card (dark) */
.bs-why-card{transition:background .18s,border-color .18s}
.bs-why-card:hover{background:rgba(52,227,196,.06);border-color:rgba(52,227,196,.3)}

/* project card */
.bs-proj-card{transition:transform .2s,box-shadow .2s}
.bs-proj-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(14,27,51,.12)}

/* footer links */
.bs-foot-link{transition:color .15s}
.bs-foot-link:hover{color:#34e3c4}

/* social buttons */
.bs-social{transition:background .15s,color .15s}
.bs-social:hover{background:#34e3c4;color:#062019}

/* faq row */
.bs-faq{transition:border-color .15s}
.bs-faq:hover{border-color:#cfe7e0}

/* support-page underline links */
.bs-uline:hover{color:#34e3c4}

/* upload dropzone */
.bs-dropzone{transition:border-color .15s,background .15s}
.bs-dropzone:hover{border-color:#34e3c4;background:#f3fdfa}

/* dashboard rows */
.bs-row:hover{background:rgba(120,160,220,.06)!important}

/* ---------- inputs: light form fields ---------- */
.bs-field{transition:border-color .15s,box-shadow .15s}
.bs-field:focus{border-color:#34e3c4;box-shadow:0 0 0 3px rgba(52,227,196,.18)}
/* dark dashboard fields */
.bs-field-dark:focus{border-color:#34e3c4}

/* faq chevron rotate handled inline via Alpine */

/* ============================================================
   RESPONSIVE — verbatim from the design's media queries.
   The same data-* hooks are present in the Blade markup.
   ============================================================ */
@media (max-width:1000px){
  [data-hero-grid]{grid-template-columns:1fr !important;gap:48px !important;padding-top:64px !important;padding-bottom:72px !important}
  [data-two-col]{grid-template-columns:1fr !important;gap:40px !important}
  [data-svc-grid],[data-why-grid],[data-proj-grid]{grid-template-columns:1fr 1fr !important}
  [data-process-grid]{grid-template-columns:1fr 1fr 1fr !important;gap:34px 14px !important}
  [data-process-line]{display:none !important}
  [data-dash-grid],[data-admin-grid],[data-conv-grid]{grid-template-columns:1fr !important}
  [data-dash-side]{display:flex;flex-wrap:wrap;gap:6px}
  [data-foot-grid]{grid-template-columns:1fr 1fr !important;gap:32px !important}
  [data-admin-detail]{position:static !important}
}
@media (max-width:760px){
  [data-nav-desktop],[data-login-link]{display:none !important}
  [data-burger]{display:flex !important}
  [data-svc-grid],[data-why-grid],[data-proj-grid],[data-cstat],[data-astat],[data-process-grid]{grid-template-columns:1fr 1fr !important}
  [data-status-form]{grid-template-columns:1fr !important}
  [data-admin-table]{overflow-x:auto !important}
  [data-admin-thead],[data-admin-row]{min-width:540px}
  h1{font-size:38px !important}
}
@media (max-width:520px){
  [data-svc-grid],[data-why-grid],[data-proj-grid],[data-cstat],[data-astat],[data-process-grid],[data-foot-grid]{grid-template-columns:1fr !important}
  section{padding-left:18px !important;padding-right:18px !important}
  h1{font-size:32px !important}
  h2{font-size:28px !important}
}

/* anchor scroll offset under the 72px sticky header */
section[id]{scroll-margin-top:84px}
[x-cloak]{display:none!important}

/* ============================================================
   LIGHT PANEL THEME — admin & client dashboards (white)
   ============================================================ */
.pnl-body{margin:0;background:#f5f8fc;color:#0e1b33;font-family:var(--bs-body)}
.pnl-layout{min-height:100vh}

/* sidebar */
.pnl-side{position:fixed;top:0;left:0;width:256px;height:100vh;background:#fff;border-right:1px solid #e6edf6;display:flex;flex-direction:column;z-index:60;transition:transform .2s}
.pnl-brand{display:flex;align-items:center;gap:11px;padding:20px 20px 16px;text-decoration:none}
.pnl-brand img{width:36px;height:36px;border-radius:10px}
.pnl-brand span{font-family:var(--bs-head);font-weight:700;font-size:19px;color:#0e1b33}
.pnl-navwrap{flex:1;overflow-y:auto;padding:8px 12px}
.pnl-navhead{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9aabc6;padding:14px 12px 6px}
.pnl-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600;color:#50617d;text-decoration:none;margin-bottom:2px;transition:background .14s,color .14s}
.pnl-link svg{width:18px;height:18px;flex:none;color:#9aabc6}
.pnl-link:hover{background:#f3f7fc;color:#0e1b33}
.pnl-link.active{background:#e7faf5;color:#0c9a7d}
.pnl-link.active svg{color:#12a98c}
.pnl-link .pnl-count{margin-left:auto;font-size:11px;font-weight:700;background:#eef2f8;color:#5b6b85;padding:2px 8px;border-radius:100px}
.pnl-link.active .pnl-count{background:#cdeee5;color:#0c6f5c}
.pnl-side-foot{border-top:1px solid #eef2f8;padding:12px}
.pnl-userchip{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px}
.pnl-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#34e3c4,#22c3d6);display:flex;align-items:center;justify-content:center;font-family:var(--bs-head);font-weight:800;color:#062019;font-size:13px;flex:none}

/* main + topbar */
.pnl-main{margin-left:256px;min-height:100vh;display:flex;flex-direction:column}
.pnl-top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid #e9eff6;height:64px;display:flex;align-items:center;gap:14px;padding:0 26px}
.pnl-top h1{font-family:var(--bs-head);font-weight:700;font-size:19px;color:#0e1b33;margin:0}
.pnl-top .sub{font-size:12.5px;color:#7e93b8}
.pnl-burger{display:none;background:#f3f7fc;border:1px solid #e3eaf4;width:40px;height:40px;border-radius:10px;cursor:pointer;color:#0e1b33;align-items:center;justify-content:center}
.pnl-content{padding:26px;max-width:1320px;width:100%}
.pnl-overlay{display:none}

/* cards / tables / stats */
.pnl-card{background:#fff;border:1px solid #e6edf6;border-radius:16px;box-shadow:0 1px 2px rgba(14,27,51,.03)}
.pnl-card-pad{padding:22px}
.pnl-card-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid #eef2f8}
.pnl-card-title{font-family:var(--bs-head);font-weight:700;font-size:15.5px;color:#0e1b33}
.pnl-stat{background:#fff;border:1px solid #e6edf6;border-radius:16px;padding:18px 20px}
.pnl-stat .lbl{font-size:13px;color:#7a8aa4;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pnl-stat .ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.pnl-stat .val{font-family:var(--bs-head);font-weight:700;font-size:28px;color:#0e1b33}
.pnl-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pnl-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pnl-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}

.pnl-table{width:100%;border-collapse:collapse}
.pnl-table thead th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#9aabc6;padding:12px 20px;border-bottom:1px solid #eef2f8;background:#fafcff}
.pnl-table tbody td{padding:14px 20px;border-bottom:1px solid #f0f4f9;font-size:14px;color:#3c4d68;vertical-align:middle}
.pnl-table tbody tr{transition:background .12s}
.pnl-table tbody tr:hover{background:#fafcff}
.pnl-row-link{cursor:pointer}

/* badges (reuse status colours via inline) */
.pnl-badge{font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:100px;display:inline-block;white-space:nowrap}

/* buttons */
.pnl-btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:#062019;background:linear-gradient(135deg,#34e3c4,#22c3d6);padding:10px 18px;border:none;border-radius:10px;cursor:pointer;text-decoration:none;transition:transform .15s}
.pnl-btn:hover{transform:translateY(-1px)}
.pnl-btn-sm{padding:8px 14px;font-size:13px;border-radius:9px}
.pnl-btn-ghost{background:#fff;border:1px solid #d8e1ee;color:#3c4d68}
.pnl-btn-ghost:hover{background:#f5f8fc;transform:none}
.pnl-btn-danger{background:none;border:none;color:#c0392b;font-weight:600;font-size:13px;cursor:pointer;padding:0}
.pnl-link-teal{color:#12a98c;font-weight:600;font-size:13px;text-decoration:none;cursor:pointer}

/* forms */
.pnl-label{display:block;font-size:12.5px;font-weight:600;color:#3c4d68;margin-bottom:7px}
.pnl-input,.pnl-select,.pnl-textarea{width:100%;padding:11px 13px;border:1px solid #d8e1ee;border-radius:10px;font-family:inherit;font-size:14px;color:#0e1b33;outline:none;background:#fff;transition:border-color .15s,box-shadow .15s}
.pnl-input:focus,.pnl-select:focus,.pnl-textarea:focus{border-color:#34e3c4;box-shadow:0 0 0 3px rgba(52,227,196,.16)}
.pnl-textarea{resize:vertical}
.pnl-field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.pnl-note{background:#e7faf5;border:1px solid #c4ece2;color:#0c6f5c;border-radius:12px;padding:12px 16px;font-size:13.5px;font-weight:600;margin-bottom:18px}
.pnl-err{background:#fde8e6;border:1px solid #f6c9c4;color:#c0392b;border-radius:12px;padding:12px 16px;font-size:13.5px;margin-bottom:18px}

/* responsive */
@media (max-width:900px){
  .pnl-side{transform:translateX(-100%)}
  .pnl-side.open{transform:translateX(0)}
  .pnl-main{margin-left:0}
  .pnl-burger{display:flex}
  .pnl-overlay.show{display:block;position:fixed;inset:0;background:rgba(8,24,52,.4);z-index:50}
  .pnl-grid-4{grid-template-columns:1fr 1fr}
  .pnl-grid-3{grid-template-columns:1fr}
  .pnl-grid-2{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pnl-grid-4{grid-template-columns:1fr}
  .pnl-content{padding:18px}
}