/* Design tokens */
:root {
  --brand-dark:#0d2233;
  --brand-green:#13a24a;
  --brand-green-700:#0f8c3f;
  --bg:#f4f6f8;
  --card:#ffffffcc; /* glass */
  --shadow:0 10px 30px rgba(13,34,51,.12);
  --radius:18px;
}

html, body { height:100%; background: var(--bg); color:#1c2b3a; }

/* Modern login layout */
.login-background { min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 3rem 1rem; background: linear-gradient(180deg,#f7fafb, #eef3f6); }
.login-card { width: 480px; backdrop-filter: blur(8px); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.4rem; border: 1px solid #e7edf2; position:relative; }
.login-card::before{ content:''; position:absolute; left:-2px; right:-2px; top:-2px; height:6px; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); border-top: 4px solid var(--brand-green); pointer-events: none; }

.brand-title { font-weight:800; letter-spacing:.2rem; color:var(--brand-dark); font-size:2rem; }
.brand-subtitle { font-size:1.1rem; color:var(--brand-green); font-weight:600; margin-top:.25rem; }

/* Inputs */
.login-card .form-label { font-size:.85rem; color:#3b4d5f; margin-bottom:.4rem; }
.login-input { width:100%; border-radius:12px; border:1px solid #d7e0e6; box-shadow: 0 1px 0 rgba(0,0,0,.02) inset; transition: box-shadow .2s, border-color .2s, transform .06s; }
.login-input:focus { border-color: var(--brand-green); box-shadow: 0 0 0 .2rem rgba(19,162,74,.15); }

/* Underline inputs */
.input-underline, .select-underline {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid #d7e0e6;
  border-radius: 0;
  padding: .6rem .25rem .4rem;
  font-size: 1rem;
  color: #0d2233;
  transition: border-color .2s, box-shadow .2s;
}
.input-underline:focus, .select-underline:focus {
  outline: none;
  border-bottom-color: var(--brand-green);
  box-shadow: 0 2px 0 0 rgba(19,162,74,.25);
}

/* Custom select arrow */
.select-underline {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #7a8a99 50%), linear-gradient(135deg, #7a8a99 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 4px), calc(100% - 10px) calc(50% - 4px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Ensure select clickable area */
.select-underline:disabled { cursor: not-allowed; }

/* Button with ripple */
.btn-login { background: var(--brand-green); border-color: var(--brand-green); color:#fff; font-weight:700; padding: .9rem 1rem; font-size:1rem; border-radius:12px; position:relative; overflow:hidden; }
.btn-login:hover{ background: var(--brand-green-700); border-color: var(--brand-green-700); }
.btn-login:focus{ box-shadow: 0 0 0 .2rem rgba(19,162,74,.25); }

/* Ripple element */
.ripple{ position:absolute; width:8px; height:8px; border-radius:999px; transform: translate(-50%,-50%); background: rgba(255,255,255,.7); animation: ripple .6s ease-out; pointer-events:none; }
@keyframes ripple{ from{opacity:.9; transform: translate(-50%,-50%) scale(1);} to{opacity:0; transform: translate(-50%,-50%) scale(35);} }

/* Password toggle */
.password-toggle{ position:absolute; right:.75rem; top:50%; transform: translateY(-50%); cursor:pointer; color:#6c7a86; z-index:2; }
.password-toggle.on{ color: var(--brand-green); }

/* Card spacing tweaks */
.login-card .mb-3{ margin-bottom:1rem !important; }

/* Top bar modernization */
.top-row{ display:flex; align-items:center; justify-content:flex-end; gap: .75rem; border-bottom:1px solid #e7edf2; padding:.75rem 1rem; background:#fff; }
.top-row .btn-link{ color:#3b4d5f; text-decoration:none; }
.top-row .btn-link:hover{ color:var(--brand-green); }

/* Sidebar modern look */
.page .sidebar{ width:260px; background:linear-gradient(180deg,#0d2233,#0c1b29); color:#cfe3f0; box-shadow: var(--shadow); }
.page .sidebar a{ color:#cfe3f0; }
.page .sidebar a:hover{ color:#fff; }

/* Content area */
article.content{ padding:1.5rem; }
.card{ border-radius:14px; box-shadow: var(--shadow); border:1px solid #e7edf2; }
.card-header{ border-bottom:1px solid #e7edf2; background:#fff; }

/* Tables modern */
.table{ --bs-table-bg:#fff; }
.table thead th{ font-weight:600; }
/* Dashboard styles */
.page-title{ font-weight:800; color:#0d2233; margin: .5rem 0 1.5rem; font-size:2.2rem; }
.projects-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.project-card{ background:#fff; border-radius:14px; border:1px solid #e7edf2; box-shadow: var(--shadow); padding:1rem 1.1rem; display:flex; flex-direction:column; }

@media (max-width: 640.98px) {
    .page-title { font-size: 1.75rem; margin-bottom: 1rem; }
    .projects-grid { grid-template-columns: 1fr; }
    .content { padding: 1rem !important; }
}
.pc-head{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #eef2f5; padding-bottom:.6rem; }
.pc-title{ font-weight:800; font-size:1.2rem; color:#0d2233; }
.pc-actions{ display:flex; gap:.5rem; }
.pc-action{ text-decoration:none; color:#7a8a99; }
.pc-action:hover{ color:#0d2233; }
.pc-body{ padding:.7rem 0 .9rem; }
.pc-line{ color:#1c2b3a; font-weight:600; }
.pc-sub{ color:#7a8a99; font-size:.95rem; }
.pc-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:.6rem; border-top:1px solid #eef2f5; }
.badge{ padding:.35rem .6rem; border-radius:999px; font-weight:700; font-size:.8rem; }
.badge-active{ background:#e8f7ef; color:#11b159; }
.badge-inactive{ background:#f4e9ea; color:#b92b2b; }
.pc-link{ font-weight:700; color:#1363ff; text-decoration:none; }
.pc-link:hover{ text-decoration:underline; }
/* Form switches */
.form-switch { display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; user-select:none; font-size:.85rem; font-weight:600; color:#0d2233; }
.form-switch input { appearance:none; width:42px; height:22px; background:#d7e0e6; border-radius:999px; position:relative; outline:none; cursor:pointer; transition: background .25s; }
.form-switch input:before { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; background:#fff; border-radius:50%; box-shadow:0 2px 4px rgba(0,0,0,.2); transition: transform .25s; }
.form-switch input:checked { background:#11b159; }
.form-switch input:checked:before { transform: translateX(20px); }
.form-switch span { pointer-events:none; }