/* =========================================================
   printing.uk — Dashboard/App UI (front-end)
   Applies to /admin-dashboard + /userlogin
   Includes dark mode via html.puk-dark
   ========================================================= */

/* Shell */
.puk-admin{
  min-height:100vh;
  background:linear-gradient(135deg, rgba(95,191,143,.16), rgba(95,191,143,0) 65%);
  padding:clamp(18px,3vw,32px);
}

.puk-admin-card{
  background:#fff;
  border:1px solid var(--puk-border);
  border-radius:var(--puk-r-xl);
  box-shadow:var(--puk-shadow-1);
  padding:clamp(16px,2.2vw,24px);
}
.puk-admin-card:hover{ box-shadow:var(--puk-shadow-2); }

.puk-admin-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
}
.puk-col-12{ grid-column:span 12; }
.puk-col-8{ grid-column:span 8; }
.puk-col-6{ grid-column:span 6; }
.puk-col-4{ grid-column:span 4; }
.puk-col-3{ grid-column:span 3; }
@media (max-width:1000px){
  .puk-col-8,.puk-col-6,.puk-col-4,.puk-col-3{ grid-column:span 12; }
}

/* KPI */
.puk-kpi{ display:flex; flex-direction:column; gap:6px; }
.puk-kpi-label{ color:var(--puk-muted); font-weight:650; }
.puk-kpi-value{
  font-size:1.9rem;
  font-weight:850;
  color:var(--puk-green-800);
  letter-spacing:-.02em;
}
.puk-kpi-sub{ color:var(--puk-muted-2); font-size:.92rem; }

/* Tables */
.puk-table-wrap{
  overflow:auto;
  border-radius:var(--puk-r-xl);
  border:1px solid var(--puk-border);
  box-shadow:var(--puk-shadow-1);
  background:#fff;
}
.puk-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.puk-table th,
.puk-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--puk-border);
  text-align:left;
}
.puk-table th{
  position:sticky;
  top:0;
  background:var(--puk-surface);
  font-weight:750;
}
.puk-table tr:hover td{ background:rgba(95,191,143,.08); }

/* /userlogin */
.puk-login{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px;
  background:linear-gradient(135deg,#71c8a0,#4aa678);
}
.puk-login-box{
  width:min(420px, 100%);
  background:#fff;
  border-radius:var(--puk-r-xl);
  padding:32px;
  box-shadow:0 34px 70px rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.22);
}

/* =========================================================
   Theme toggle button (front-end app pages)
   ========================================================= */
.puk-theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color:var(--puk-text);
  padding:10px 12px;
  font-weight:750;
  box-shadow:0 10px 24px rgba(16,24,20,.10);
  cursor:pointer;
}
.puk-theme-toggle .puk-toggle-icon{
  width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(95,191,143,.14);
  border:1px solid rgba(95,191,143,.22);
  color:var(--puk-green-900);
}
.puk-theme-toggle--fixed{
  position:fixed;
  right:16px;
  top:16px;
  z-index:9999;
}

/* =========================================================
   DARK MODE (html.puk-dark)
   ========================================================= */
html.puk-dark body{
  background:#0b1310;
  color:#e6f2ec;
}
html.puk-dark .puk-admin{
  background:linear-gradient(135deg, rgba(31,111,74,.30), rgba(0,0,0,0) 70%);
}
html.puk-dark .puk-admin-card,
html.puk-dark .puk-table-wrap,
html.puk-dark .puk-login-box{
  background:#0f1a16;
  border-color:rgba(230,242,236,.10);
  box-shadow:0 18px 44px rgba(0,0,0,.35);
}
html.puk-dark .puk-kpi-label{ color:rgba(230,242,236,.70); }
html.puk-dark .puk-kpi-sub{ color:rgba(230,242,236,.55); }
html.puk-dark .puk-kpi-value{ color:#7ee2b6; }

html.puk-dark .puk-table th{
  background:#0b1512;
  border-bottom-color:rgba(230,242,236,.10);
}
html.puk-dark .puk-table td{
  border-bottom-color:rgba(230,242,236,.08);
  color:rgba(230,242,236,.84);
}
html.puk-dark .puk-table tr:hover td{
  background:rgba(95,191,143,.10);
}

html.puk-dark .puk-theme-toggle{
  background:#0f1a16;
  border-color:rgba(230,242,236,.12);
  color:#e6f2ec;
  box-shadow:0 18px 44px rgba(0,0,0,.35);
}
html.puk-dark .puk-theme-toggle .puk-toggle-icon{
  background:rgba(95,191,143,.12);
  border-color:rgba(95,191,143,.20);
  color:#7ee2b6;
}

/* === LOGIN FORM === */
.puk-login-logo,.puk-login-site-name{text-align:center;margin-bottom:20px;}
.puk-login-site-name a{font-size:1.25rem;font-weight:750;color:var(--puk-green-900);text-decoration:none;}
.puk-login-heading{font-size:1.5rem;font-weight:750;margin:0 0 4px;text-align:center;letter-spacing:-.02em;}
.puk-login-sub{text-align:center;color:var(--puk-muted);margin:0 0 20px;font-size:.95rem;}
.puk-login-error{background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.20);border-radius:var(--puk-r-sm);color:#b91c1c;padding:10px 14px;font-size:.9rem;margin-bottom:16px;}
.puk-login-form{display:flex;flex-direction:column;gap:14px;}
.puk-login-field{display:flex;flex-direction:column;gap:6px;}
.puk-login-field label{font-weight:600;font-size:.9rem;}
.puk-login-password-wrap{position:relative;}
.puk-login-password-wrap input{width:100%;}
.puk-login-reveal{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;box-shadow:none;padding:4px;color:var(--puk-muted);cursor:pointer;border-radius:6px;}
.puk-login-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.puk-login-check{display:flex;align-items:center;gap:8px;font-size:.9rem;cursor:pointer;}
.puk-login-check input{width:16px;height:16px;accent-color:var(--puk-green-700);}
.puk-login-forgot{font-size:.9rem;color:var(--puk-green-800);}
.puk-login-submit{width:100%;padding:.9rem;font-size:1rem;margin-top:4px;}

/* === DASHBOARD SHELL === */
.puk-dash-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh;}
@media(max-width:900px){.puk-dash-shell{grid-template-columns:1fr;}}
.puk-dash-sidebar{background:var(--puk-green-900);color:#e7f3ee;display:flex;flex-direction:column;padding:24px 0;position:sticky;top:0;height:100vh;overflow-y:auto;}
@media(max-width:900px){.puk-dash-sidebar{position:fixed;top:0;left:0;width:240px;height:100%;z-index:1000;transform:translateX(-100%);transition:transform .22s ease;}.puk-dash-sidebar.is-open{transform:translateX(0);box-shadow:4px 0 32px rgba(0,0,0,.22);}}
.puk-dash-brand{padding:0 20px 24px;border-bottom:1px solid rgba(255,255,255,.10);margin-bottom:16px;}
.puk-dash-brand img{display:block;filter:brightness(10);}
.puk-dash-brand-name{color:#fff;font-weight:750;font-size:1.1rem;text-decoration:none;}
.puk-dash-nav ul{list-style:none;margin:0;padding:0 10px;display:flex;flex-direction:column;gap:2px;}
.puk-dash-nav-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--puk-r-sm);color:rgba(231,243,238,.80);text-decoration:none;font-weight:560;font-size:.92rem;transition:background .15s ease,color .15s ease;}
.puk-dash-nav-item:hover{background:rgba(255,255,255,.10);color:#fff;opacity:1;}
.puk-dash-nav-item.is-active{background:rgba(255,255,255,.14);color:#fff;font-weight:700;}
.puk-dash-sidebar-footer{margin-top:auto;padding:16px 10px 0;border-top:1px solid rgba(255,255,255,.10);display:flex;flex-direction:column;gap:2px;}
.puk-dash-sidebar-link{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--puk-r-sm);color:rgba(231,243,238,.75);text-decoration:none;font-size:.88rem;transition:background .15s ease,color .15s ease;}
.puk-dash-sidebar-link:hover{background:rgba(255,255,255,.10);color:#fff;opacity:1;}
.puk-dash-logout:hover{background:rgba(220,38,38,.15);color:#fca5a5;}
.puk-dash-main{display:flex;flex-direction:column;min-height:100vh;background:var(--puk-surface);}
.puk-dash-topbar{display:flex;align-items:center;gap:16px;padding:14px 24px;background:#fff;border-bottom:1px solid var(--puk-border);position:sticky;top:0;z-index:100;}
.puk-dash-menu-toggle{display:none;background:none;border:1px solid var(--puk-border);border-radius:var(--puk-r-sm);padding:8px;color:var(--puk-text);box-shadow:none;cursor:pointer;}
@media(max-width:900px){.puk-dash-menu-toggle{display:flex;}}
.puk-dash-topbar-title{font-weight:700;font-size:1rem;flex:1;}
.puk-dash-topbar-right{display:flex;align-items:center;gap:12px;margin-left:auto;}
.puk-dash-greeting{font-size:.88rem;color:var(--puk-muted);}
.puk-dash-avatar-link{display:block;border-radius:999px;overflow:hidden;}
.puk-dash-avatar{display:block;border-radius:999px;}
.puk-dash-content{padding:clamp(16px,2.5vw,28px);flex:1;}
.puk-dash-section{max-width:1080px;}
.puk-dash-page-title{font-size:clamp(1.35rem,2.5vw,1.75rem);margin:0 0 4px;}
.puk-dash-page-sub{color:var(--puk-muted);margin:0 0 24px;}
.puk-dash-kpi-row{margin-bottom:24px;}
.puk-dash-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.puk-dash-card-title{font-size:1rem;font-weight:700;margin:0;}
.puk-dash-card-link{font-size:.88rem;color:var(--puk-green-800);text-decoration:none;}
.puk-status-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:700;}
.puk-status-processing{background:rgba(59,130,246,.12);color:#1d4ed8;}
.puk-status-completed{background:rgba(22,163,74,.12);color:#15803d;}
.puk-status-pending,.puk-status-on-hold{background:rgba(234,179,8,.14);color:#a16207;}
.puk-status-cancelled,.puk-status-failed{background:rgba(220,38,38,.10);color:#b91c1c;}
.puk-dash-empty{color:var(--puk-muted);padding:16px 0;}
.puk-dash-empty-state{text-align:center;padding:clamp(24px,4vw,48px);}
.puk-dash-empty-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:999px;background:var(--puk-surface-2);margin:0 auto 14px;color:var(--puk-green-700);}
.puk-dash-action-card{display:flex;flex-direction:column;gap:8px;}
.puk-dash-action-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--puk-r-md);background:var(--puk-surface-2);color:var(--puk-green-700);margin-bottom:4px;}
.puk-dash-action-card h3{margin:0;font-size:1rem;}
.puk-dash-action-card p{margin:0 0 10px;font-size:.92rem;}
.puk-dash-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:12px 0 0;}
.puk-dash-dl dt{font-weight:650;color:var(--puk-muted);font-size:.88rem;}
.puk-dash-dl dd{margin:0;}
.puk-dash-account-btn{margin-top:16px;}
.puk-dash-orders-card{margin-bottom:24px;}

/* Dark mode — dashboard */
html.puk-dark .puk-dash-main{background:#0b1310;}
html.puk-dark .puk-dash-topbar{background:#0f1a16;border-color:rgba(230,242,236,.10);}
html.puk-dark .puk-dash-topbar-title{color:#e6f2ec;}
html.puk-dark .puk-dash-greeting{color:rgba(230,242,236,.60);}
html.puk-dark .puk-dash-menu-toggle{border-color:rgba(230,242,236,.12);color:#e6f2ec;background:#0f1a16;}
html.puk-dark .puk-dash-page-title{color:#e6f2ec;}
html.puk-dark .puk-dash-page-sub{color:rgba(230,242,236,.60);}
html.puk-dark .puk-dash-card-title{color:#e6f2ec;}