:root{
  --accent:#0B83FB;
  --accent-soft:#E9F4FF;
  --accent-dark:#0767c7;
  --dark:#0F1722;
  --text:#243140;
  --muted:#6F8094;
  --line:#d8e2ee;
  --white:#ffffff;
  --bg:#f6f9fc;
  --success:#18b45b;
  --warning:#f5a623;
  --danger:#de4e4e;
  --shadow:0 18px 42px rgba(11, 40, 78, .10);
  --radius:20px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Segoe UI", Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(11,131,251,.10), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f3f8fe 100%);
}
a{text-decoration:none;color:inherit}

.erp-shell{
  min-height:100vh;
}

.erp-sidebar{
  width:300px;
  min-height:100vh;
  background:#fff;
  border-right:1px solid var(--line);
  padding:26px 22px;
  position:sticky;
  top:0;
}

.brand-card{
  border-radius:24px;
  background:linear-gradient(135deg, #0B83FB, #66b4ff);
  color:#fff;
  padding:22px;
  box-shadow:0 20px 36px rgba(11,131,251,.25);
}

.brand-card h1{
  margin:0 0 8px;
  font-size:1.55rem;
  line-height:1;
}

.brand-card p{
  margin:0;
  opacity:.92;
  line-height:1.5;
  font-size:.95rem;
}

.nav-section{
  margin-top:24px;
}

.nav-link-erp{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  font-weight:700;
  color:var(--text);
  margin-bottom:8px;
  transition:.2s ease;
}

.nav-link-erp:hover,
.nav-link-erp.active{
  background:var(--accent-soft);
  color:var(--accent-dark);
}

.nav-link-erp i{
  font-size:1.1rem;
}

.sidebar-user{
  margin-top:26px;
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fbfdff;
}

.sidebar-user img,
.avatar-circle{
  width:54px;
  height:54px;
  border-radius:50%;
  object-fit:cover;
  background:#dcecff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent-dark);
  font-weight:800;
}

.erp-main{
  flex:1;
  padding:28px;
}

.topbar-erp{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:24px;
}

.page-title h2{
  margin:0;
  font-size:2rem;
  line-height:1;
}

.page-title p{
  margin:8px 0 0;
  color:var(--muted);
}

.clock-card{
  min-width:280px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:16px 20px;
  text-align:right;
}

.clock-date{
  color:var(--muted);
  font-size:.92rem;
  margin-bottom:6px;
}

.clock-time{
  color:var(--accent-dark);
  font-size:1.8rem;
  font-weight:800;
  letter-spacing:.04em;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.card-erp{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:22px;
}

.card-erp h3,
.card-erp h4{
  margin-top:0;
}

.metric{
  padding:20px;
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  border:1px solid #dde9f7;
}

.metric span{
  display:block;
  color:var(--muted);
  font-weight:700;
  font-size:.9rem;
  margin-bottom:10px;
}

.metric strong{
  font-size:2rem;
  color:var(--accent-dark);
}

.btn-erp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:12px 20px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-weight:800;
  font-family:inherit;
  transition:.2s ease;
}

.btn-erp:hover{transform:translateY(-2px)}

.btn-primary-erp{
  background:var(--accent);
  color:#fff;
}

.btn-outline-erp{
  background:#fff;
  color:var(--accent-dark);
  border:1px solid #bcd8f7;
}

.btn-danger-erp{
  background:#fff1f1;
  color:#b22727;
  border:1px solid #f0c1c1;
}

.form-control-erp,
.form-select-erp,
.textarea-erp{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid #cfdae6;
  font-family:inherit;
  font-size:15px;
  background:#fff;
}

.textarea-erp{
  min-height:110px;
  resize:vertical;
}

.form-control-erp:focus,
.form-select-erp:focus,
.textarea-erp:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(11,131,251,.10);
}

.form-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.table-wrap{
  overflow:auto;
}

.table-erp{
  width:100%;
  border-collapse:collapse;
}

.table-erp th,
.table-erp td{
  padding:14px 12px;
  border-bottom:1px solid #e8eef5;
  text-align:left;
  vertical-align:top;
}

.table-erp th{
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.82rem;
}

.badge-erp{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
}

.badge-success{background:#e8fff1;color:#0d8f45}
.badge-secondary{background:#eef3f8;color:#526375}
.badge-blue{background:#edf5ff;color:#0b83fb}
.badge-orange{background:#fff6e8;color:#c98100}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.photo-preview{
  width:88px;
  height:88px;
  border-radius:20px;
  object-fit:cover;
  background:#e8f2ff;
}

.schedule-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:14px;
}

.day-card{
  background:#fff;
  border:1px solid #d9e6f3;
  border-radius:20px;
  padding:16px;
  min-height:350px;
}

.day-card.current{
  border-color:#0B83FB;
  box-shadow:0 0 0 4px rgba(11,131,251,.09);
}

.day-card h4{
  margin:0 0 4px;
  font-size:1rem;
}

.day-date{
  color:var(--muted);
  font-size:.88rem;
  margin-bottom:14px;
}

.mark-list{
  display:grid;
  gap:10px;
}

.mark-item{
  border-radius:16px;
  padding:12px;
  background:#f7fbff;
  border:1px solid #deebf7;
}

.mark-item.done{
  background:#e9fff1;
  border-color:#bae7cb;
}

.mark-item.locked{
  background:#f4f7fa;
}

.mark-item strong{
  display:block;
  margin-bottom:6px;
}

.mark-meta{
  color:var(--muted);
  font-size:.82rem;
  line-height:1.45;
}

.flash{
  padding:14px 16px;
  border-radius:16px;
  margin-bottom:18px;
  font-weight:700;
}

.flash-success{background:#e9fff1;color:#0d8f45;border:1px solid #c1eed0}
.flash-danger{background:#fff1f1;color:#b22727;border:1px solid #f0c1c1}

.login-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px;
}

.login-card{
  width:min(1080px,100%);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  background:#fff;
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(15,23,42,.18);
}

.login-visual{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(135deg, #0B83FB, #6ebaff);
  color:#fff;
  padding:44px;
  position:relative;
}

.login-visual h1{
  margin:0 0 18px;
  font-size:3.3rem;
  line-height:.95;
}

.login-visual p{
  max-width:440px;
  line-height:1.8;
  opacity:.95;
}

.login-panel{
  padding:42px;
}

.login-panel h2{
  margin-top:0;
  margin-bottom:10px;
  font-size:2rem;
}

.small-muted{
  color:var(--muted);
  font-size:.92rem;
}

.footer-note{
  margin-top:24px;
  color:var(--muted);
  font-size:.86rem;
}

@media (max-width:1200px){
  .schedule-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:1fr}
}

@media (max-width:980px){
  .erp-shell{display:block !important}
  .erp-sidebar{
    width:100%;
    min-height:auto;
    position:relative;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .grid-2,
  .form-row{grid-template-columns:1fr}
  .topbar-erp{flex-direction:column;align-items:flex-start}
  .clock-card{width:100%;text-align:left}
  .login-card{grid-template-columns:1fr}
}

@media (max-width:680px){
  .erp-main{padding:18px}
  .schedule-grid{grid-template-columns:1fr}
  .login-visual,
  .login-panel{padding:28px}
  .login-visual h1{font-size:2.4rem}
}