/* Shared theme + motion system for all Bullet Point apps.
   Source of truth: keep in sync with the inline copies in COGS & Inventory. */
:root{
    --c-appbg:#EEF0F2;
    --c-headerbg:rgba(255,255,255,0.92);
    --c-surface:#fff;
    --c-surface2:#FCFCFD;
    --c-surface3:#FAFBFC;
    --c-surface4:#F7F8FA;
    --c-surface5:#F6F7F8;
    --c-hair:#F4F6F8;
    --c-hair2:#F4F5F7;
    --c-subtle:#F2F4F7;
    --c-line2:#EEF0F2;
    --c-line3:#E6E9ED;
    --c-line:#E3E6EA;
    --c-line4:#DCE0E6;
    --c-lineStrong:#D0D5DD;
    --c-dim4:#CBD2DA;
    --c-dim5:#C7CCD3;
    --c-dim6:#B7BEC8;
    --c-dim3:#B0B7C0;
    --c-dim:#98A2B3;
    --c-muted:#667085;
    --c-text3:#475467;
    --c-text2:#344054;
    --c-text:#101418;
    --c-black:#000;
    --c-purple:#5925DC;
    --c-purpleDeep:#4A1FB8;
    --c-link:#3538CD;
    --c-linkHover:#1F23A8;
    --c-purpleLine:#D6BBFB;
    --c-purpleLine2:#E9D7FE;
    --c-purpleBg:#EFE9FE;
    --c-purpleBg2:#E9E5FB;
    --c-purpleBg3:#F0EEFB;
    --c-purpleBg4:#F9F5FF;
    --c-purpleBg5:#FCFAFF;
    --c-purpleBg6:#F4EBFF;
    --c-purpleBg7:#F7F4FE;
    --c-purpleBg8:#F2F0FF;
    --c-purpleBg9:#FAF9FF;
    --c-red:#B42318;
    --c-redDeep:#912018;
    --c-red2:#D92D20;
    --c-red3:#F04438;
    --c-redLine:#FDA29B;
    --c-redLine2:#FEE4E2;
    --c-redLine3:#FBE0DC;
    --c-redBg:#FEF3F2;
    --c-redBg2:#FEF6F5;
    --c-amber:#B54708;
    --c-amberDeep:#93370D;
    --c-amber2:#F79009;
    --c-amberLine:#FEDF89;
    --c-amberBg:#FEF0C7;
    --c-amberBg2:#FFFAEB;
    --c-amberBg3:#FFFCF5;
    --c-green:#067647;
    --c-greenDeep:#085D3A;
    --c-green2:#12805C;
    --c-green3:#12B76A;
    --c-greenLine:#ABEFC6;
    --c-greenLine2:#A6F4C5;
    --c-greenBg:#DCFAE6;
    --c-greenBg2:#ECFDF3;
    --c-greenBg3:#F6FEF9;
    --c-greenBg4:#E1F3E8;
    --c-greenBg5:#E7F6EE;
    --c-teal:#0E7C87;
    --c-tealLine:#D0E7EA;
    --c-tealBg:#E7F5F7;
    --c-tealBg2:#F2FAFB;
    --c-tealBg3:#EAF6F7;
    --c-tealBg4:#F5FBFC;
  }
  html[data-theme="dark"]{
    --c-appbg:#0D1013;
    --c-headerbg:rgba(20,24,28,0.92);
    --c-surface:#161A1E;
    --c-surface2:#1A1F24;
    --c-surface3:#1A1F24;
    --c-surface4:#1A1F24;
    --c-surface5:#1A1F24;
    --c-hair:#23282E;
    --c-hair2:#23282E;
    --c-subtle:#22272C;
    --c-line2:#262C32;
    --c-line3:#262C32;
    --c-line:#2C3239;
    --c-line4:#2C3239;
    --c-lineStrong:#374049;
    --c-dim4:#3E464F;
    --c-dim5:#464F59;
    --c-dim6:#4B545E;
    --c-dim3:#5C6570;
    --c-dim:#828C99;
    --c-muted:#9BA5B2;
    --c-text3:#B7C0CA;
    --c-text2:#CBD3DB;
    --c-text:#E9EDF2;
    --c-black:#F5F7FA;
    --c-purple:#A78BFA;
    --c-purpleDeep:#8E6DF5;
    --c-link:#9298FF;
    --c-linkHover:#B4B8FF;
    --c-purpleLine:#4C3B8C;
    --c-purpleLine2:#4C3B8C;
    --c-purpleBg:#2B2352;
    --c-purpleBg2:#2B2352;
    --c-purpleBg3:#251E46;
    --c-purpleBg4:#241D42;
    --c-purpleBg5:#201A3B;
    --c-purpleBg6:#2B2352;
    --c-purpleBg7:#241D42;
    --c-purpleBg8:#241D42;
    --c-purpleBg9:#201A3B;
    --c-red:#FF8D80;
    --c-redDeep:#FF9E92;
    --c-red2:#FF7C6D;
    --c-red3:#FF7161;
    --c-redLine:#7C2C25;
    --c-redLine2:#4C221D;
    --c-redLine3:#4C221D;
    --c-redBg:#3B1B18;
    --c-redBg2:#341715;
    --c-amber:#F5B978;
    --c-amberDeep:#E9A961;
    --c-amber2:#FFB224;
    --c-amberLine:#6D4B16;
    --c-amberBg:#3E2F11;
    --c-amberBg2:#34270D;
    --c-amberBg3:#2F240C;
    --c-green:#62D19C;
    --c-greenDeep:#4FC48C;
    --c-green2:#4FC48C;
    --c-green3:#43CB82;
    --c-greenLine:#1F5D42;
    --c-greenLine2:#1F5D42;
    --c-greenBg:#153D2D;
    --c-greenBg2:#133626;
    --c-greenBg3:#133626;
    --c-greenBg4:#153D2D;
    --c-greenBg5:#153D2D;
    --c-teal:#61D4DF;
    --c-tealLine:#1F4D53;
    --c-tealBg:#11363B;
    --c-tealBg2:#0F3034;
    --c-tealBg3:#11363B;
    --c-tealBg4:#0F3034;
    color-scheme:dark;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{background:var(--c-appbg);font-family:'Public Sans',system-ui,-apple-system,sans-serif;color:var(--c-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums;}
  a{color:var(--c-link);text-decoration-thickness:1px;text-underline-offset:2px;}
  a:hover{color:var(--c-linkHover);}
  @keyframes spin{to{transform:rotate(360deg);}}
  /* COGS rows expand on click; the caret only appears under the pointer so the table stays quiet
     at rest but never leaves you guessing whether a row does anything. */
  [data-cog-row]:hover [data-cog-caret]{opacity:1 !important;}

  /* ---- Motion ------------------------------------------------------------
     One shared curve for everything that moves. Interactive surfaces animate
     their own properties only, so a hover never triggers a layout pass.      */
  button,input,select,textarea,a{transition:background-color .16s cubic-bezier(.4,0,.2,1),border-color .16s cubic-bezier(.4,0,.2,1),color .16s cubic-bezier(.4,0,.2,1),box-shadow .16s cubic-bezier(.4,0,.2,1),opacity .16s cubic-bezier(.4,0,.2,1),transform .16s cubic-bezier(.4,0,.2,1);}
  button:not(:disabled){-webkit-tap-highlight-color:transparent;}
  button:not(:disabled):active{transform:translateY(.5px) scale(.985);}
  @keyframes om-fade{from{opacity:0;}to{opacity:1;}}
  @keyframes om-rise{from{opacity:0;transform:translateY(10px) scale(.985);}to{opacity:1;transform:none;}}
  @keyframes om-toast{from{opacity:0;transform:translate(-50%,14px) scale(.97);}to{opacity:1;transform:translate(-50%,0) scale(1);}}
  @keyframes om-sheen{from{background-position:-180% 0;}to{background-position:180% 0;}}
  /* Overlays: the scrim fades, the panel rises. */
  [data-om-scrim]{animation:om-fade .18s cubic-bezier(.4,0,.2,1) both;}
  [data-om-panel]{animation:om-rise .24s cubic-bezier(.16,1,.3,1) both;}
  [data-om-toast]{animation:om-toast .26s cubic-bezier(.16,1,.3,1) both;}
  /* Table rows: a flat tint on hover, no border shift, so nothing jumps. */
  [data-om-row]{transition:background-color .13s cubic-bezier(.4,0,.2,1);}
  [data-om-row]:hover{background:var(--c-hair) !important;}
  [data-om-card]{transition:box-shadow .18s cubic-bezier(.4,0,.2,1),border-color .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1);}
  [data-om-card]:hover{border-color:var(--c-lineStrong);box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px -8px rgba(16,24,40,.10);}
  html[data-theme="dark"] [data-om-card]:hover{box-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -8px rgba(0,0,0,.5);}
  /* Skeleton shimmer for first paint. */
  [data-om-skel]{background:linear-gradient(90deg,var(--c-subtle) 25%,var(--c-hair) 37%,var(--c-subtle) 63%);background-size:280% 100%;animation:om-sheen 1.3s ease-in-out infinite;border-radius:6px;}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  }

  /* ---- Focus -------------------------------------------------------------- */
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--c-text) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--c-text) 9%,transparent);}
  :focus-visible{outline:2px solid var(--c-purple);outline-offset:2px;border-radius:6px;}
  button:focus:not(:focus-visible){outline:none;}
  ::selection{background:color-mix(in srgb,var(--c-purple) 22%,transparent);}

  /* ---- Scrollbars --------------------------------------------------------- */
  *{scrollbar-width:thin;scrollbar-color:var(--c-lineStrong) transparent;}
  ::-webkit-scrollbar{height:10px;width:10px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:var(--c-line4);border-radius:8px;border:3px solid transparent;background-clip:content-box;}
  ::-webkit-scrollbar-thumb:hover{background:var(--c-dim3);background-clip:content-box;}
  ::-webkit-scrollbar-corner{background:transparent;}

  /* ---- Responsive --------------------------------------------------------- */
  @media (max-width:1100px){
    [data-om-cards]{grid-template-columns:repeat(2,1fr) !important;}
  }
  @media (max-width:820px){
    [data-om-cards]{grid-template-columns:1fr !important;}
    [data-om-hdr]{padding:10px 14px !important;gap:10px !important;}
    [data-om-hidesm]{display:none !important;}
  }