:root{
  --bg:#f6f7f8;
  --card:#ffffff;
  --muted:#9aa0a6;
  --accent:#ff6b48;
  --radius:12px;
}
body { margin:0; font-family: Inter,Segoe UI,system-ui,Arial; background:var(--bg); color:#222; }
.layout { display:flex; min-height:100vh; }
.sidebar { width:220px; background:#fff; padding:24px; box-shadow:0 0 0 1px rgba(0,0,0,0.02); display:flex; flex-direction:column; }
.brand { font-weight:700; color:var(--accent); margin-bottom:18px; }
.nav { display:flex; flex-direction:column; gap:10px; }
.nav-item { padding: 10px; border-radius: 8px; color: #333; text-decoration: none; display: flex; justify-content: space-between; }
.nav-item.active { background: transparent; }
.notif { color:#fff; background:#ff6b48; border-radius:10px; padding:2px 6px; margin-left:8px; font-size:12px; }

.sidebar-footer { margin-top:auto; display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--muted); }
.logout{ color:var(--accent); }

.main { flex:1; min-width:0; display:flex; flex-direction:column; overflow-x:hidden; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:18px 28px; background:transparent; }
.top-search { width: 420px; padding: 10px 14px; border-radius: 22px; border: 1px solid #e6e6e6; background: #fff; }
.top-actions { display:flex; gap:10px; align-items:center; }
.icon{ background:none;border:none; font-size:18px; cursor:pointer; }
.avatar{ width:36px;height:36px;border-radius:50%; }

.content{ padding:20px 32px; }

.card { background:var(--card); border-radius:14px; padding:18px; box-shadow:0 8px 18px rgba(28,33,41,0.06); }
.card-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:12px; }
.card-header .left{ display:flex; gap:12px; align-items:center;}
.search { padding:10px 12px; border-radius:10px; border:1px solid #eee; width:360px; }
.btn.primary { background:var(--accent); color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; }
.factory-table { width:100%; border-collapse:collapse; }
.factory-table th { text-align:left; font-weight:600; padding:12px 8px; color:var(--muted); font-size:13px; }
.factory-table td { padding:14px 8px; border-top:1px solid #f0f0f0; vertical-align:middle; }
.factory-cell { display:flex; align-items:center; gap:10px; }
.thumb{ width:48px; height:48px; border-radius:8px; object-fit:cover; }
.meta .title{ font-weight:600; }

.badge { padding:6px 10px; border-radius:6px; font-size:13px; display:inline-block; }
.badge--green { background: rgba(52, 199, 89, 0.15); color: rgba(40, 155, 69, 1); }
.badge--yellow { background: rgba(255, 213, 107, 1); color: rgba(82, 69, 37, 1); }
.badge--purple { background: #f3efff; color: #6b49d6; }
.badge--red{ background:#ffecec; color:#c94a4a; }
.badge--gray{ background:#f0f0f0; color:#777; }

.actions { text-align:right; color:var(--muted); }

@font-face {
    font-family: "SFMedium";
    src: url('css/fonts/SFProText-Medium.ttf') format('truetype');
}

.text-sfmedium {
    font-family: SFMedium;
    font-weight: 500;
    color: rgba(7, 7, 7, 1);
}

@font-face {
    font-family: "SFRegular";
    src: url('css/fonts/SFProText-Regular.ttf') format('truetype');
}

.text-sfregular {
    font-family: SFRegular;
    font-weight: 400;
    color: rgba(7, 7, 7, 1);
}

@font-face {
    font-family: "SFSemibold";
    src: url('css/fonts/SFProText-Semibold.ttf') format('truetype');
}

.text-sfsemibold {
    font-family: SFSemibold;
    font-weight: 600;
    color: rgba(7, 7, 7, 1);
}

@media (max-width:900px){
    .users-table {
        min-width: 700px;
    }

    .card-body {
        padding: 12px;
    }

    .filter-panel {
        width: 100%;
    }
  .sidebar{ display:none; }
  .top-search{ width:200px; }
  .search-input {
      width: 180px;
      max-width: 40vw;
  }
  .create-factory-btn span {
      display: none;
  }
  .create-factory-btn {
      padding: 8px;
      width: 44px;
      justify-content: center;
  }

}

/* --- Login specific styles --- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
  box-sizing: border-box;
}

.login-card {
  width: 454px;
  max-width: calc(100% - 48px);
  background: var(--card);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 8px 18px rgba(28,33,41,0.06);
  border: 1px solid rgba(0,0,0,0.04);
  box-sizing: border-box;
}

.logo-row { display:flex; justify-content:center; }
.logo-badge {
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background: linear-gradient(90deg, #FF6839 0%, #FF5346 100%);
  padding:6px;
}
.logo-badge img { max-width:100%; height:auto; display:block; }

.login-title {
  text-align:center;
  margin-top:12px;
  font-size:17px;
  line-height:20px;
  color: rgba(7,7,7,1);
  font-weight:600;
}

.login-form { display:flex; flex-direction:column; gap:12px; }

.form-group { display:block; }

.form-label { font-size:15px; color: rgba(7,7,7,1); display:block; margin-bottom:6px; }

.login-input {
  width: 100%;
  margin-top:4px;
  background: rgba(239,239,239,1);
  border-radius:12px;
  padding:10px;
  font-size:15px;
  font-weight:400;
  border:1px solid transparent;
  box-sizing:border-box;
  outline:none;
}
.login-input:focus { box-shadow: 0 0 0 3px rgba(255,104,57,0.08); border-color: rgba(255,104,57,0.12); }

.validation-message {
  margin-top:6px;
  font-weight:400;
  font-size:13px;
  color: rgba(255,47,47,1);
  display:block;
}

.error-box {
  margin-top:6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius:8px;
  background:#fff0f0;
  padding:10px;
  color:#b02a2a;
  border:1px solid rgba(176,42,42,0.08);
}

.error-close {
  background:#f36a6a;
  color:#fff;
  border:none;
  padding:6px 8px;
  border-radius:6px;
  cursor:pointer;
}

.help-row { display:flex; justify-content:center; margin-top:8px; }
.help-link { font-size:15px; color: var(--accent); font-weight:600; text-decoration:none; }

.login-submit {
  width:100%;
  border-radius:12px;
  padding:10px 20px;
  background: linear-gradient(90deg, #FF6839 0%, #FF5346 100%);
  margin-top:8px;
  font-weight:500;
  font-size:15px;
  color:#fff;
  border:none;
  cursor:pointer;
}