/* ZeroOne BO — hand-built theme matching the live INSPINIA/Bootstrap-3 look.
   Colors taken from the captured original: primary #1ab394, sidebar #2f4050, body #f3f3f4. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 13px/1.42857 "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; color: #676a6c; background: #2f4050; }
a { color: #1ab394; text-decoration: none; } a:hover { color: #18a689; }
.boot { padding: 40px; color: #fff; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100%; background: #2f4050; display: flex; align-items: center; justify-content: center; }
.login-box { width: 360px; background: #fff; padding: 30px 28px; border-radius: 3px; text-align: center; }
.login-box h1 { color: #1ab394; font-weight: 700; letter-spacing: 1px; margin: 0 0 6px; }
.login-box .tab { list-style: none; padding: 0; margin: 0 0 14px; }
.login-box .tab li { display: inline-block; padding: 6px 10px; border-bottom: 2px solid #1ab394; font-weight: 600; color: #444; }
.login-box .copyright { color: #999; margin-top: 14px; font-size: 12px; }

/* ---------- Form controls ---------- */
.form-group { margin-bottom: 12px; text-align: left; }
label { font-weight: 600; margin-bottom: 4px; display: inline-block; }
.form-control { width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; color: #292b2c;
  background: #fff; border: 1px solid #999; border-radius: 1px; }
.form-control:focus { outline: 0; border-color: #1ab394; }
select.form-control { height: 34px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; } .col { flex: 1; min-width: 0; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; padding: 6px 12px; font-size: 13px; border: 1px solid transparent;
  border-radius: 3px; cursor: pointer; background: #fff; color: #676a6c; }
.btn-primary { background: #1ab394; border-color: #1ab394; color: #fff; }
.btn-primary:hover { background: #18a689; }
.btn-white { background: #fff; border-color: #e7eaec; color: #676a6c; }
.btn-danger { background: #ed5565; border-color: #ed5565; color: #fff; }
.btn-sm { padding: 4px 8px; font-size: 12px; }
.btn.full { width: 100%; }
.btn[disabled] { opacity: .6; cursor: default; }

/* ---------- App layout ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 220px; background: #2f4050; color: #a7b1c2; flex-shrink: 0; }
.sidebar .brand { color: #fff; font-weight: 700; font-size: 18px; padding: 16px 20px; letter-spacing: 1px; background: #283544; }
.sidebar .profile { padding: 14px 20px; border-bottom: 1px solid #283544; color: #dfe4ed; font-size: 13px; }
.nav { list-style: none; margin: 0; padding: 0; }
.nav > li > a { display: block; padding: 12px 20px; color: #a7b1c2; border-left: 4px solid transparent; cursor: pointer; }
.nav > li > a:hover { color: #fff; background: #293846; }
.nav > li.active > a { color: #fff; background: #293846; border-left-color: #19aa8d; }
.nav .sub { list-style: none; margin: 0; padding: 0; background: #293846; display: none; }
.nav li.open .sub { display: block; }
.nav .sub li a { display: block; padding: 8px 20px 8px 40px; color: #939aa3; font-size: 13px; cursor: pointer; }
.nav .sub li a:hover, .nav .sub li.active a { color: #fff; }
.nav .caret { float: right; opacity: .6; }
.nav-ico { display: inline-flex; align-items: center; margin-right: 10px; vertical-align: -3px; }
.nav-ico svg { display: block; }
.nav .sub li a .nav-ico { display: none; }

.main { flex: 1; background: #f3f3f4; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 46px; background: #fff; border-bottom: 1px solid #e7eaec; display: flex; align-items: center; gap: 18px; padding: 0 16px; }
.topbar .spacer { flex: 1; }
.topbar .pill { color: #676a6c; font-size: 13px; }
.topbar .pill b { color: #1ab394; }
.topbar a.logout { color: #676a6c; }
.content { padding: 20px; }
.page-head { margin: 0 0 16px; } .page-head h2 { margin: 0; font-size: 22px; font-weight: 300; color: #676a6c; }
.breadcrumb { list-style: none; display: flex; gap: 6px; padding: 0; margin: 4px 0 0; font-size: 12px; color: #999; }

/* ---------- Panels / tables ---------- */
.ibox { background: #fff; border: 1px solid #e7eaec; margin-bottom: 20px; }
.ibox-title { padding: 12px 15px; border-bottom: 1px solid #e7eaec; font-weight: 600; }
.ibox-content { padding: 15px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th, table.tbl td { padding: 8px 10px; border-bottom: 1px solid #e7eaec; text-align: left; }
table.tbl th { color: #676a6c; font-weight: 600; background: #f5f5f6; white-space: nowrap; }
table.tbl tbody tr:hover { background: #f9f9fa; }
.label { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px; color: #fff; }
.label-success { background: #1ab394; } .label-danger { background: #ed5565; } .label-default { background: #c2c2c2; }
.text-right { text-align: right; } .text-muted { color: #999; }
.alert { padding: 10px 14px; border-radius: 3px; margin-bottom: 12px; }
.alert-danger { background: #f8d7da; color: #a94442; } .alert-success { background: #dff0d8; color: #3c763d; }
.spin { padding: 20px; color: #999; }
.pager { margin-top: 12px; display: flex; gap: 6px; align-items: center; }
/* ---------- Mobile controls (hidden on desktop) ---------- */
.nav-toggle { display: none; background: none; border: 0; font-size: 20px; line-height: 1; color: #676a6c; cursor: pointer; padding: 4px 8px; margin-left: -4px; }
.nav-overlay { display: none; }

/* ---------- Mobile / tablet ---------- */
@media (max-width: 768px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 1000;
    transform: translateX(-100%); transition: transform .2s ease; overflow-y: auto;
  }
  .app.nav-open .sidebar { transform: translateX(0); box-shadow: 2px 0 14px rgba(0,0,0,.35); }
  .app.nav-open .nav-overlay { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999; }
  .nav-toggle { display: inline-block; }
  .topbar { gap: 10px; padding: 0 10px; }
  .topbar .pill { font-size: 12px; }
  .hide-sm { display: none; }
  .content { padding: 12px; }
  /* Wide tables scroll horizontally inside their panel instead of blowing out the page. */
  .ibox-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .page-head h2 { font-size: 18px; }
  .login-box { width: 100%; max-width: 360px; }
  .btn, .form-control, select.form-control { min-height: 36px; } /* comfortable touch targets */
}
@media (max-width: 480px) {
  .topbar { gap: 6px; }
  .content { padding: 10px; }
  .ibox-title { padding: 10px 12px; } .ibox-content { padding: 12px; }
}