/* ==========================================================================
   SkipDeer admin — core styles
   Organised: tokens → base → atoms → login → shell → header → stats → panels
              → tables → toast → responsive

   TYPE SCALE. Every size in this file comes from the --fs-* tokens below.
   Do not introduce arbitrary px font sizes: the previous version of this
   panel ran 5–10px text throughout, which is what this scale replaced.
   The floor is --fs-2xs (12px), and that is reserved for uppercase
   micro-labels with tracking. Body copy is 14–15px.
   ========================================================================== */

:root{
  /* Palette */
  --ink:#111614;
  --dark:#090d0c;
  --panel:#141a18;
  --muted:#6b7671;
  --muted-dim:#8b948f;
  --cream:#f2f0e8;
  --paper:#faf9f5;
  --lime:#c9ff4a;
  --orange:#ff6846;
  --line:#dcdfd9;
  --line-soft:#e7e9e2;
  --white:#fff;
  --danger:#a8351f;
  --danger-bg:#ffe2db;

  /* Sidebar-specific (dark surface) */
  --side-text:#a8b2ad;
  --side-dim:#78837e;
  --side-hover:#ffffff10;
  --side-line:#ffffff14;

  /* Type scale */
  --fs-2xs:12px;   /* uppercase micro-labels only */
  --fs-xs:13px;    /* secondary / meta text */
  --fs-sm:14px;    /* body, table cells, buttons */
  --fs-md:15px;    /* emphasised body */
  --fs-lg:17px;    /* small headings */
  --fs-xl:20px;    /* panel headings */
  --fs-2xl:24px;   /* section headings */
  --fs-3xl:30px;   /* stat figures */
  --fs-4xl:38px;   /* page title */

  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;

  /* Radii + elevation */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px;
  --shadow:0 22px 70px rgba(15,30,24,.1);
  --shadow-sm:0 1px 2px rgba(15,30,24,.04),0 2px 8px rgba(15,30,24,.04);
  --ring:0 0 0 3px rgba(113,140,119,.28);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:"DM Sans",system-ui,sans-serif;
  font-size:var(--fs-sm);
  line-height:1.55;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}

button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}

/* Visible keyboard focus everywhere. The panel had none before. */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
aside :focus-visible,.login-brand-panel :focus-visible{outline-color:var(--lime)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* --- Brand ---------------------------------------------------------------- */
.brand{
  display:flex;align-items:center;gap:10px;
  font:800 21px "Manrope",sans-serif;letter-spacing:-.055em;
  color:inherit;text-decoration:none;
}
.brand-light{color:#fff}
.logo{
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:50%;background:var(--lime);color:var(--ink);
  font-size:var(--fs-lg);
}

/* --- Login ---------------------------------------------------------------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:var(--paper)}
.login-brand-panel{
  background:var(--dark);color:#fff;
  padding:54px clamp(35px,6vw,90px);
  position:relative;overflow:hidden;display:flex;flex-direction:column;
}
.login-message{margin:auto 0;position:relative;z-index:2}
.status-light{
  display:inline-block;font-size:var(--fs-2xs);letter-spacing:.14em;
  color:var(--lime);font-weight:800;
}
.login-message h2{
  font:800 clamp(44px,5vw,72px)/1.02 "Manrope",sans-serif;
  letter-spacing:-.055em;margin:var(--sp-5) 0;
}
.login-message h2 em{font-style:normal;color:var(--orange)}
.login-message p{color:#9ba6a1;max-width:420px;font-size:var(--fs-md);line-height:1.7}

.login-art{position:absolute;width:540px;height:540px;border-radius:50%;background:var(--lime);right:-320px;bottom:-280px}
.login-art i{
  position:absolute;width:310px;height:200px;background:#1b2924;
  border:8px solid #2d3935;border-radius:17px;right:250px;bottom:290px;
  transform:rotate(-8deg);box-shadow:0 25px 60px #0005;
}
.login-art i:nth-child(2){right:160px;bottom:220px;transform:rotate(7deg);background:var(--orange)}
.login-art i:nth-child(3){width:70px;height:145px;right:370px;bottom:230px;transform:rotate(-4deg);border-radius:12px}

.login>form{width:min(430px,calc(100% - 48px));margin:auto}
.mobile-brand{display:none}

/* Shared uppercase kicker.
   Scoped to :first-child deliberately. A bare `.panel small` also matches body
   copy such as the quick-action descriptions and leaks the tracking and 800
   weight onto them. Every kicker in the markup is the first child of its
   wrapper; every content <small> follows a <b>/<strong>. */
.login form>small,header small,.panel small:first-child{
  font-size:var(--fs-2xs);letter-spacing:.14em;
  color:var(--orange);font-weight:800;
}
.login h1{font:800 42px "Manrope",sans-serif;letter-spacing:-.055em;margin:var(--sp-2) 0 var(--sp-1)}
.login form>p{color:var(--muted);font-size:var(--fs-sm);margin:0 0 var(--sp-7)}
.login label{display:grid;gap:var(--sp-2);margin:var(--sp-5) 0;font-size:var(--fs-xs);font-weight:700}
.login input{
  padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  outline:none;background:#fff;font-size:var(--fs-sm);
  transition:border-color .15s,box-shadow .15s;
}
.login input:focus{border-color:#708178;box-shadow:var(--ring)}

.primary-button{
  width:100%;border:0;background:var(--ink);color:#fff;
  padding:15px 18px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:700;
  display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;margin-top:var(--sp-3);
  transition:background .15s,transform .1s;
}
.primary-button:hover{background:#1d2724}
.primary-button:active{transform:translateY(1px)}
.primary-button b{color:var(--lime)}

#loginError{color:var(--danger);font-size:var(--fs-xs);min-height:20px;margin-top:var(--sp-2)}
.back-store{
  display:block;text-align:center;font-size:var(--fs-xs);
  color:var(--muted);margin-top:var(--sp-6);text-decoration:none;
}
.back-store:hover{color:var(--ink);text-decoration:underline}

/* --- App shell ------------------------------------------------------------ */
.app{display:grid;grid-template-columns:252px 1fr;min-height:100vh}

aside{
  background:var(--dark);color:#fff;
  padding:var(--sp-7) var(--sp-5);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}

.store-state{
  display:flex;align-items:center;gap:10px;
  background:#ffffff0a;border:1px solid #ffffff0d;
  border-radius:var(--r-md);padding:12px;margin:var(--sp-7) 0 var(--sp-6);
}
.store-state>span{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:#6ed24c;box-shadow:0 0 0 4px #6ed24c1f;
}
.store-state p,.admin-card p{margin:0;min-width:0}
.store-state b,.store-state small,.admin-card b,.admin-card small{display:block}
.store-state b{font-size:var(--fs-xs);font-weight:700}
.store-state small{font-size:var(--fs-2xs);color:var(--side-dim);margin-top:2px}

aside nav{display:grid;gap:2px}
aside nav>small{
  font-size:var(--fs-2xs);letter-spacing:.14em;color:#5f6b66;
  font-weight:700;margin:var(--sp-6) 10px var(--sp-2);
}
aside nav button,aside nav a{
  border:0;background:none;color:var(--side-text);
  text-decoration:none;text-align:left;
  padding:11px 12px;border-radius:var(--r-sm);
  font-weight:600;font-size:var(--fs-sm);
  display:flex;align-items:center;gap:12px;cursor:pointer;
  transition:background .15s,color .15s;
}
aside nav button i,aside nav a i{font-style:normal;font-size:var(--fs-lg);line-height:1;width:18px;text-align:center}
aside nav button em{
  margin-left:auto;font-style:normal;font-size:var(--fs-2xs);font-weight:700;
  background:#ffffff14;padding:2px 8px;border-radius:99px;line-height:1.5;
}
aside nav button:hover,aside nav a:hover{background:var(--side-hover);color:#fff}
aside nav .active{background:#ffffff14!important;color:#fff!important}
aside nav .active i{color:var(--lime)}
aside nav .active em{background:var(--lime);color:var(--ink)}

.admin-card{
  margin-top:auto;border-top:1px solid var(--side-line);
  padding-top:var(--sp-5);display:flex;align-items:center;gap:10px;
}
.admin-card>span{
  width:36px;height:36px;border-radius:50%;flex:none;
  background:var(--orange);display:grid;place-items:center;
  font-size:var(--fs-xs);font-weight:800;
}
.admin-card p{flex:1}
.admin-card b{font-size:var(--fs-xs);font-weight:700}
.admin-card small{font-size:var(--fs-2xs);color:var(--side-dim);margin-top:2px}
.logout{
  border:0;background:none;color:var(--side-dim);cursor:pointer;
  font-size:var(--fs-lg);padding:6px;border-radius:var(--r-sm);
  transition:background .15s,color .15s;
}
.logout:hover{background:var(--side-hover);color:#fff}

main{padding:var(--sp-8) clamp(20px,4vw,56px);overflow:hidden;min-width:0}

/* --- Page header ---------------------------------------------------------- */
header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-5);margin-bottom:var(--sp-7)}
header h1{font:800 var(--fs-4xl) "Manrope",sans-serif;letter-spacing:-.05em;margin:var(--sp-2) 0 var(--sp-1);line-height:1.1}
header h1 em{font-style:normal;color:var(--orange)}
header p,.panel-head p{margin:0;color:var(--muted);font-size:var(--fs-sm)}
.header-actions{display:flex;align-items:center;gap:var(--sp-3);flex:none}
.today{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
header button{
  border:1px solid var(--line);background:var(--paper);
  border-radius:var(--r-sm);padding:10px 14px;
  font-size:var(--fs-xs);font-weight:700;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s;
}
header button:hover{background:#fff;border-color:#c7ccc3}

/* --- Stat cards ----------------------------------------------------------- */
.stats{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:var(--sp-3)}
.stats article{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-5);
  position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
}
.stats article>div{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2)}
.stats article>div>span{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.stats strong{display:block;font:800 var(--fs-3xl) "Manrope",sans-serif;letter-spacing:-.04em;margin:var(--sp-4) 0 var(--sp-1)}
.stats article>small{color:var(--muted);font-size:var(--fs-xs)}
.trend{background:#e7f2da;color:#42602c;border-radius:99px;padding:4px 10px;font-size:var(--fs-2xs);font-weight:700;white-space:nowrap}
.icon{width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:var(--fs-sm);flex:none}
.icon.orange{background:#ffe1d9;color:#ad3d27}
.icon.lime{background:#e6f9bd;color:#48591d}
.icon.cream{background:#e4e7df;color:#4c564f}

.revenue-card{background:var(--ink)!important;color:#fff;border-color:var(--ink)!important}
.revenue-card div>span,.revenue-card>small{color:#9aa5a0!important}
.revenue-card .trend{background:#ffffff14;color:var(--lime)}

/* --- Panels --------------------------------------------------------------- */
.panel{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);margin-top:var(--sp-5);padding:var(--sp-6);
  box-shadow:var(--shadow-sm);
}
.panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.panel h2{font:700 var(--fs-2xl) "Manrope",sans-serif;letter-spacing:-.035em;margin:var(--sp-1) 0 var(--sp-2)}

.search{
  width:min(300px,100%);height:42px;display:flex;align-items:center;gap:var(--sp-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:0 12px;
  background:#fff;color:var(--muted);flex:none;
  transition:border-color .15s,box-shadow .15s;
}
.search:focus-within{border-color:#708178;box-shadow:var(--ring)}
.search span{font-size:var(--fs-md)}
.search input{width:100%;border:0;outline:0;font-size:var(--fs-sm);background:transparent}

/* --- Tables --------------------------------------------------------------- */
.table-wrap{overflow-x:auto;margin:0 -4px}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:840px}
th{
  text-align:left;color:#68726d;font-size:var(--fs-2xs);letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;padding:12px 12px;background:#efefe8;
}
th:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
th:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
td{padding:14px 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap;vertical-align:middle}
tbody tr{transition:background .12s}
tbody tr:hover{background:#f2f2ea}
td b{display:block;font-size:var(--fs-sm);font-weight:700}
td small{display:block;color:var(--muted);font-size:var(--fs-xs);margin-top:2px}

/* Status selects inside table rows */
.pill{
  padding:7px 26px 7px 11px;border:1px solid var(--line);border-radius:99px;
  background:#fff;font-size:var(--fs-xs);font-weight:600;text-transform:capitalize;
  cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#7b847f 50%),linear-gradient(135deg,#7b847f 50%,transparent 50%);
  background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  transition:border-color .15s,box-shadow .15s;
}
.pill:hover{border-color:#bcc2b8}
.pill:focus{border-color:#708178;box-shadow:var(--ring);outline:none}

.save{border:0;background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:8px 12px;font-size:var(--fs-xs);font-weight:700;cursor:pointer}
.empty-orders{text-align:center;padding:64px 24px!important;color:var(--muted);font-size:var(--fs-sm);white-space:normal!important}

/* --- Toast ---------------------------------------------------------------- */
.toast{
  position:fixed;right:24px;bottom:24px;z-index:60;
  background:var(--ink);color:#fff;padding:13px 20px;border-radius:var(--r-sm);
  opacity:0;transform:translateY(15px);pointer-events:none;
  transition:opacity .2s,transform .2s;font-size:var(--fs-sm);font-weight:600;
  box-shadow:var(--shadow);
}
.toast.show{opacity:1;transform:none}

/* --- Responsive ----------------------------------------------------------- */
@media(max-width:1050px){
  .stats{grid-template-columns:1fr 1fr}
  .app{grid-template-columns:220px 1fr}
}
@media(max-width:780px){
  .login{grid-template-columns:1fr}
  .login-brand-panel{display:none}
  .login>form{padding:44px 0}
  .mobile-brand{display:flex;margin-bottom:48px}
  .app{grid-template-columns:1fr}
  aside{display:none}
  main{padding:var(--sp-6) var(--sp-4)}
  header{align-items:flex-start}
  header h1{font-size:29px}
  .today{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .panel-head{display:block}
  .search{width:100%;margin-top:var(--sp-4)}
}
@media(max-width:470px){
  .stats{grid-template-columns:1fr}
  .header-actions button span{display:none}
  .panel{padding:var(--sp-4) var(--sp-3)}
  .login h1{font-size:34px}
}