/* ===============================
   GLOBAL THEME VARIABLES
================================ */
:root {
  --green-start: #7cc242;   /* hijau logo */
  --green-end:   #b9d532;   /* lime logo */
  --green-dark:  #5fa832;   /* active */
  --green-soft:  #a9cf8a;   /* disabled */
  --text-light:  #ffffff;
}

/* ===============================
   BODY
================================ */

body {
      background:#f4f6fb;
      font-family: system-ui, -apple-system, BlinkMacSystemFont;
    }
    .navbar {
		background: linear-gradient(90deg, #7cc242 0%, #b9d532 100%);
    }
    .card {
      border: none;
      border-radius: 16px;
      box-shadow: 0 6px 20px rgba(0,0,0,.06);
    }
    .badge-status {
      padding: 6px 14px;
      border-radius: 20px;
      font-weight: 600;
      font-size: 13px;
    }
    .status-ok { background:#e6f4ea; color:#1e7e34; }
    .status-warn { background:#fff3cd; color:#856404; }
    .status-no { background:#f8d7da; color:#842029; }
    table thead { background:#f1f3f9; }
	
/* ===============================
   HEADER / SIDEBAR
================================ */
.header,
.sidebar {
  background: linear-gradient(90deg, var(--green-start), var(--green-end));
  color: var(--text-light);
}

/* ===============================
   BUTTON PRIMARY
================================ */
.btn-green {
  background: linear-gradient(90deg, var(--green-start), var(--green-end));
  border: none;
  color: var(--text-light);
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 6px;
  transition: all .25s ease;
}

.btn-green:hover {
  background: linear-gradient(90deg, #6fbf3f, #c4dc2e);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

.btn-green:active {
  background: linear-gradient(90deg, var(--green-dark), #a9c92c);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25);
  transform: translateY(0);
}

.btn-green:disabled {
  background: linear-gradient(90deg, var(--green-soft), #dbe6a6);
  color: #f2f2f2;
  cursor: not-allowed;
  box-shadow: none;
}

/* ===============================
   BUTTON OUTLINE
================================ */
.btn-outline-green {
  background: transparent;
  border: 2px solid var(--green-start);
  color: var(--green-dark);
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 6px;
  transition: all .25s ease;
}

.btn-outline-green:hover {
  background: linear-gradient(90deg, var(--green-start), var(--green-end));
  color: #fff;
}

/* ===============================
   BADGE / LABEL
================================ */
.badge-green {
  background: linear-gradient(90deg, var(--green-start), var(--green-end));
  color: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
}

/* ===============================
   FORM FOCUS
================================ */
.form-control:focus {
  border-color: var(--green-start);
  box-shadow: 0 0 0 .2rem rgba(124, 194, 66, .25);
}

/* ===============================
   TABLE HEADER
================================ */
/*
.table thead th {
  background: linear-gradient(90deg, var(--green-start), var(--green-end));
  color: #fff;
  border: none;
}
*/

/* ===============================
   LINK
================================ */
a {
  color: var(--green-dark);
}
a:hover {
  color: var(--green-start);
}