/*
  RAJAWALI CORE — global.css
  Global layout (NON‑POS) + minimal utilities.
  Rule: module CSS must be in separate files (pos.css, warehouse.css, etc).
*/

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background:#f4f6f8;
  color:#111;
  overflow-x:hidden; /* non-negotiable: no horizontal overflow */
}

a{ color:inherit; }

code{ background:rgba(0,0,0,0.06); padding:0.1rem 0.35rem; border-radius:6px; }

hr.sep{
  border:0;
  border-top:1px solid rgba(0,0,0,0.10);
  margin:14px 0;
}

/* =========================
   GLOBAL LAYOUT (NON‑POS)
   ========================= */

.app-shell{
  min-height:100vh;
  display:flex;
}

.sidebar-backdrop{ display:none; }

.app-sidebar{
  width:270px;
  background:var(--sidebar-bg);
  border-right:1px solid rgba(0,0,0,0.08);
  padding:12px;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  transition:width 160ms ease, transform 160ms ease;
}

.app-sidebar[data-state="collapsed"]{ width:80px; }
.app-sidebar[data-state="collapsed"] .brand-text,
.app-sidebar[data-state="collapsed"] .nav-text,
.app-sidebar[data-state="collapsed"] .nav-group-title{
  display:none;
}

.sidebar-header{
  background:var(--topbar-bg);
  color:#fff;
  border-radius:16px;
  padding:12px 12px;
  margin-bottom:12px;
  box-shadow:0 10px 26px rgba(0,0,0,0.18);
  position:relative;
}

.sidebar-close{
  display:none; /* only mobile */
  position:absolute;
  right:10px;
  top:10px;
  width:34px;
  height:34px;
  border-radius:12px;
  border:0;
  background:rgba(255,255,255,0.18);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.sidebar-close:hover{ background:rgba(255,255,255,0.26); }
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand-logo{
  width:38px;
  height:38px;
  border-radius:10px;
  background:rgba(255,255,255,0.12);
  padding:6px;
}
.brand-text{
  font-weight:800;
  letter-spacing:0.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sidebar-nav{ display:flex; flex-direction:column; gap:12px; }

.nav-group{ display:flex; flex-direction:column; gap:6px; }
.nav-group-title{
  font-size:11px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:rgba(0,0,0,0.45);
  padding:0 6px;
}

.nav-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color:#111;
}
.nav-link:hover{ background:rgba(0,0,0,0.06); }
.nav-link.active{
  background:rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.12);
}
.nav-ico{ width:22px; text-align:center; }

.app-main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* Topbar */
.app-topbar{
  background:var(--topbar-bg);
  color:#fff;
  position:sticky;
  top:0;
  /* Keep topbar above mobile backdrop so user can always close sidebar */
  z-index:120;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  box-shadow:0 10px 26px rgba(0,0,0,0.18);
}

.btn-icon{
  background:transparent;
  border:0;
  color:inherit;
  font-size:22px;
  line-height:1;
  width:44px;
  height:44px;
  border-radius:12px;
  cursor:pointer;
}
.btn-icon:hover{ background:rgba(255,255,255,0.14); }

.topbar-right{ display:flex; align-items:center; gap:10px; min-width:0; }

.topbar-meta{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  font-size:12px;
  padding:6px 10px;
  border-radius:12px;
  background:rgba(255,255,255,0.12);
}
.topbar-meta-date{ opacity:0.9; }
.topbar-meta-time{ font-weight:700; letter-spacing:0.2px; }

.topbar-loc{
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  font-size:12px;
}

.topbar-user{ max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-user-name{ font-weight:700; line-height:1.1; }
.topbar-user-role{ font-size:12px; line-height:1.1; }

/* User menu (topbar) */
.user-menu{ position:relative; }
.user-menu-trigger{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  color:#fff;
  cursor:pointer;
  text-align:left;
  max-width:240px;
}
.user-menu-trigger:hover{ background:rgba(255,255,255,0.16); }

.user-avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.18);
  flex:0 0 34px;
}
.user-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.user-avatar-initial{ font-weight:800; letter-spacing:0.3px; }

.user-meta{ min-width:0; display:flex; flex-direction:column; line-height:1.05; }
.user-name{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role{ font-size:12px; opacity:0.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-caret{ margin-left:2px; opacity:0.85; }

.user-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:280px;
  background:#fff !important;
  color:#111 !important;
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,0.28);
  padding:10px;
  display:none;
  z-index:200;
}
.user-dropdown.open{ display:block; }

/* Location block */
.dropdown-section{
  background:rgba(0,0,0,0.03);
  border:1px solid rgba(0,0,0,0.06);
  border-radius:14px;
  padding:10px;
  margin:0 0 10px 0;
}
.dropdown-label{ font-size:12px; color:rgba(0,0,0,0.6); margin:0 0 8px 0; }
.dropdown-value{ font-weight:800; }

.user-dropdown select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
}

/* Menu items */
.dropdown-item{
  display:block;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none !important;
  color:#111 !important;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
  font-weight:700;
}
.dropdown-item:hover{ background:rgba(0,0,0,0.06); }

.dropdown-item.logout{
  background:var(--brand-primary);
  color:#fff !important;
}
.dropdown-item.logout:hover{
  filter:brightness(0.95);
}

/* Content */
.app-content{
  padding:14px;
  min-width:0;

  /* mimic reference: red area behind breadcrumb + page-inner */
  background:linear-gradient(180deg, var(--topbar-bg) 0%, #f4f6f8 280px);
}

.app-breadcrumb{
  font-size:13px;
  color:rgba(255,255,255,0.90);
  margin-bottom:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.app-breadcrumb a{ color:rgba(255,255,255,0.92); text-decoration:none; }
.app-breadcrumb a:hover{ text-decoration:underline; }


.page-inner{
  background:#fff;
  border-radius:18px;
  padding:14px;
  box-shadow:0 14px 34px rgba(0,0,0,0.18);
}

.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.page-head h1{ margin:0; font-size:20px; }
.page-actions{ display:flex; gap:8px; }

.app-footer{
  padding:14px;
  color:rgba(0,0,0,0.6);
  font-size:12px;
}

/* =========================
   UI UTILITIES
   ========================= */

.grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.card{
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  padding:14px;
}
.card-soft{
  background:rgba(0,0,0,0.02);
}

.row-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.row-between{ display:flex; justify-content:space-between; align-items:center; }

.muted{ color:rgba(0,0,0,0.62); margin-top:0; }

.badge{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(0,0,0,0.12);
  background:rgba(0,0,0,0.03);
  margin-left:6px;
}
.badge-success{
  background:rgba(0,128,0,0.10);
  border-color:rgba(0,128,0,0.22);
}
.badge-muted{
  background:rgba(0,0,0,0.05);
}

.alert{ padding:10px 12px; border-radius:14px; margin:10px 0; }
.alert-danger{ background:rgba(176,0,0,0.10); border:1px solid rgba(176,0,0,0.25); }
.alert-success{ background:rgba(0,128,0,0.10); border:1px solid rgba(0,128,0,0.22); }

.form{ display:flex; flex-direction:column; gap:12px; }
.form-row{ display:flex; flex-direction:column; gap:6px; }
label{ font-size:13px; color:rgba(0,0,0,0.70); }

input,select{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.16);
  outline:none;
  min-height:44px; /* tap target */
  background:#fff;
}
input:focus,select:focus{ border-color:rgba(0,0,0,0.45); box-shadow:0 0 0 3px rgba(0,0,0,0.08); }

.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ border-bottom:1px solid rgba(0,0,0,0.08); text-align:left; padding:10px 8px; vertical-align:top; }
.table th{ font-size:13px; color:rgba(0,0,0,0.68); width:180px; }

.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Buttons */
.btn{
  border:1px solid rgba(0,0,0,0.16);
  background:#fff;
  color:#111;
  padding:9px 12px;
  border-radius:12px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  gap:8px;
}
.btn:hover{ background:#f3f3f3; }
.btn-primary{
  background:var(--brand-primary);
  border-color:rgba(0,0,0,0.08);
  color:#fff;
}
.btn-primary:hover{ filter:brightness(0.96); }

.btn-light{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.22);
  color:#fff;
}
.btn-light:hover{ background:rgba(255,255,255,0.24); }

.btn-pill{ border-radius:999px; }
.btn-block{ width:100%; }

/* Small helpers */
.preview-row{ display:flex; gap:18px; align-items:flex-start; }

/* =========================
   AUTH (LOGIN) — standalone
   ========================= */

.auth-body{
  background:var(--topbar-bg);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.auth-wrap{ width:100%; display:flex; justify-content:center; }
.auth-card{
  width:100%;
  max-width:420px;
  background:#fff;
  border-radius:18px;
  padding:18px;
  box-shadow:0 18px 40px rgba(0,0,0,0.22);
}

.auth-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.auth-logo-wrap{
  width:64px;
  height:64px;
  border-radius:999px;
  background:rgba(0,0,0,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
}
.auth-logo{ width:46px; height:46px; object-fit:contain; }

.auth-brand-name{
  font-weight:800;
  letter-spacing:0.2px;
}

.auth-footnote{
  text-align:center;
  font-size:12px;
  color:rgba(0,0,0,0.55);
  margin-top:10px;
}

/* =========================
   Responsive (Mobile-first)
   ========================= */

@media (max-width: 900px){
  .grid{ grid-template-columns:1fr; }

  .app-sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    transform:translateX(-110%);
    z-index:130;
    box-shadow:0 10px 30px rgba(0,0,0,0.22);
  }

  .sidebar-close{ display:inline-flex; align-items:center; justify-content:center; }

  body.sidebar-open .app-sidebar{ transform:translateX(0); }

  .sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.35);
    opacity:0;
    pointer-events:none;
    transition:opacity 160ms ease;
    z-index:110;
  }
  body.sidebar-open .sidebar-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  body.sidebar-open{ overflow:hidden; }

  .page-head{ flex-direction:column; align-items:stretch; }
}