:root { --desa:#1f7a4f; --desa-dark:#145c3a; --muted:#eef2f3; }
body { font-family: 'Segoe UI', Tahoma, sans-serif; }
.sidebar { width:260px; background: linear-gradient(160deg,var(--desa),var(--desa-dark)); min-height:100vh; position:sticky; top:0; }
.menu { display:block; color:#e7fff4; text-decoration:none; padding:.55rem .75rem; border-radius:.5rem; margin-bottom:.3rem; }
.menu:hover,.menu.active{ background:rgba(255,255,255,.15); }
.card-stat{ border:0; border-left:4px solid var(--desa); }
#loader{ position:fixed; inset:0; background:#ffffffd4; display:flex; align-items:center; justify-content:center; z-index:9999; }
.login-page{ background: radial-gradient(circle at top right, #dff4e8, #f7f8f9); }
@media(max-width:991px){ .sidebar{width:100px}.sidebar h4,.sidebar p{display:none}.menu{font-size:.8rem;padding:.45rem} }

/* Public website: Rural Asset Modernist */
:root {
  --public-bg: #f4fbf7;
  --public-surface: #ffffff;
  --public-surface-soft: #e6f7ee;
  --public-surface-line: #cbdad0;
  --public-text: #0f1a15;
  --public-muted: #2f453a;
  --public-primary: #059669;
  --public-primary-2: #047857;
  --public-secondary: #d1fae5;
  --public-error-bg: #fee2e2;
  --public-error: #991b1b;
}

.public-body {
  background: var(--public-bg);
  color: var(--public-text);
  font-family: "Plus Jakarta Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

.public-container {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.public-main {
  padding-top: 80px;
  min-height: calc(100vh - 80px);
}

.public-navbar {
  background: var(--public-bg);
  border-bottom: 1px solid var(--public-surface-line);
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50;
}

.public-navbar .navbar {
  min-height: 80px;
  padding: 0;
}

.public-brand {
  color: var(--public-primary);
  font-size: 1.75rem;
  font-weight: 800;
}

.public-nav-links {
  gap: 1.25rem;
}

.public-nav-links .nav-link {
  border-bottom: 2px solid transparent;
  color: var(--public-muted);
  font-size: 0.98rem;
  font-weight: 500;
  padding-left: 0;
  padding-right: 0;
}

.public-nav-links .nav-link:hover,
.public-nav-links .nav-link.active {
  border-bottom-color: var(--public-primary);
  color: var(--public-primary);
}

.public-toggler {
  border: 0;
  color: var(--public-primary);
  padding: .25rem;
}

.public-btn {
  align-items: center;
  border-radius: .5rem;
  display: inline-flex;
  font-weight: 700;
  gap: .5rem;
  justify-content: center;
  min-height: 42px;
  padding: .65rem 1.25rem;
}

.public-btn-primary {
  background: var(--public-primary);
  border: 1px solid var(--public-primary);
  color: #fff;
}

.public-btn-primary:hover {
  background: #146433;
  border-color: #146433;
  color: #fff;
}

.public-btn-outline {
  background: #fff;
  border: 1px solid var(--public-primary);
  color: var(--public-primary);
}

.public-btn-outline:hover {
  background: var(--public-primary);
  color: #fff;
}

.public-hero {
  background: rgba(202, 234, 214, .35);
  overflow: hidden;
  padding: 5rem 0;
}

.public-hero h1 {
  font-size: clamp(2.15rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  max-width: 720px;
}

.public-lead {
  color: var(--public-muted);
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 660px;
}

.stat-panel,
.public-panel {
  background: var(--public-surface);
  border: 1px solid var(--public-surface-line);
  border-radius: .75rem;
  box-shadow: 0 4px 15px -3px rgba(0, 101, 44, .05);
}

.stat-row {
  align-items: center;
  border-bottom: 1px solid var(--public-surface-soft);
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
}

.stat-row:last-child {
  border-bottom: 0;
}

.stat-number {
  color: var(--public-primary);
  font-size: 2rem;
  font-weight: 800;
}

.section-pad {
  padding: 4.5rem 0;
}

.section-kicker {
  color: var(--public-primary);
  display: block;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: .5rem;
  text-transform: uppercase;
}

.section-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
}

.asset-card {
  background: #fff;
  border: 1px solid var(--public-surface-line);
  border-radius: .75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 101, 44, .05), 0 2px 4px -1px rgba(0, 101, 44, .03);
  height: 100%;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.asset-card:hover {
  box-shadow: 0 15px 30px -18px rgba(0, 101, 44, .35);
  transform: translateY(-4px);
}

.asset-media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #eceef0, #e0e3e5);
  overflow: hidden;
  position: relative;
}

.asset-media img {
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
  width: 100%;
}

.asset-card:hover .asset-media img {
  transform: scale(1.05);
}

.asset-placeholder {
  align-items: center;
  color: rgba(0, 101, 44, .28);
  display: flex;
  font-size: 4rem;
  height: 100%;
  justify-content: center;
}

.category-pill {
  background: var(--public-primary);
  border-radius: 999px;
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  left: 1rem;
  letter-spacing: .08em;
  padding: .35rem .75rem;
  position: absolute;
  text-transform: uppercase;
  top: 1rem;
}

.asset-body {
  padding: 1.25rem;
}

.asset-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
}

.asset-meta {
  color: var(--public-muted);
  font-size: .9rem;
}

.status-chip {
  border-radius: 999px;
  display: inline-flex;
  font-size: .75rem;
  font-weight: 800;
  padding: .25rem .65rem;
}

.status-available {
  background: var(--public-secondary);
  color: #314d3e;
}

.status-borrowed {
  background: var(--public-error-bg);
  color: var(--public-error);
}

.status-service {
  background: #fff3cd;
  color: #755900;
}

.public-form-control {
  border: 1px solid var(--public-surface-line);
  border-radius: .5rem;
  min-height: 44px;
}

.public-form-control:focus {
  border-color: var(--public-primary);
  box-shadow: 0 0 0 .2rem rgba(0, 101, 44, .12);
}

.public-table {
  border: 1px solid var(--public-surface-line);
  border-radius: .5rem;
  overflow: hidden;
}

.public-table table {
  margin-bottom: 0;
}

.public-table thead th {
  background: var(--public-surface-soft);
  color: var(--public-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.public-empty {
  color: var(--public-muted);
  padding: 2rem;
  text-align: center;
}

.public-footer {
  background: #eceef0;
  border-top: 1px solid var(--public-surface-line);
  padding: 2rem 0;
}

.footer-grid {
  align-items: center;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
}

.footer-brand {
  font-size: 1.15rem;
  font-weight: 800;
}

.footer-copy,
.footer-links a {
  color: var(--public-muted);
  font-size: .85rem;
  margin: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--public-primary);
}

@media (max-width: 991px) {
  .public-nav-links {
    align-items: flex-start !important;
    gap: .4rem;
    padding: 1rem 0;
  }

  .public-login {
    margin-top: .5rem;
  }

  .public-hero {
    padding: 3.5rem 0;
  }

  .footer-grid {
    align-items: flex-start;
    flex-direction: column;
  }
}