*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Arial,sans-serif;background:#f4f6f9;color:#333;display:flex;min-height:100vh}
a{color:#2563eb;text-decoration:none}
a:hover{text-decoration:underline}
.sidebar{width:220px;background:#1e3a5f;color:#fff;padding:20px;position:fixed;top:0;bottom:0;overflow-y:auto}
.sidebar h3{margin-bottom:4px;font-size:18px}
.sidebar a{display:block;color:#cbd5e1;padding:10px 8px;border-radius:6px;margin-bottom:4px;font-size:13px}
.sidebar a:hover{background:#2c5282;color:#fff;text-decoration:none}
.content{margin-left:220px;padding:30px;flex:1;width:calc(100% - 220px);overflow-x:auto}
h1{margin-bottom:8px;font-size:22px}
h3{margin-bottom:12px;font-size:15px;color:#1e3a5f}
.card{background:#fff;padding:20px;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:20px}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.stat span{font-size:13px;color:#666;display:block;margin-bottom:6px}
.stat strong{font-size:20px}
.green{color:#16a34a}.orange{color:#ea580c}
.progress{height:8px;background:#e5e7eb;border-radius:4px;margin-top:8px;overflow:hidden}
.progress div{height:100%;background:#2563eb}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:left;font-size:13px;vertical-align:middle}
.table th{background:#f9fafb;font-weight:600}
.table input,.table select{padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;font-size:12px;width:100%}
.form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
label{display:flex;flex-direction:column;font-size:12px;color:#555;gap:4px}
input,select,textarea,button{padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-family:inherit;font-size:13px}
textarea{resize:vertical}
button{background:#2563eb;color:#fff;border:none;cursor:pointer}
button:hover{background:#1d4ed8}
.btn-sm{display:inline-block;background:#2563eb;color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;border:none;cursor:pointer;text-decoration:none}
.btn-sm:hover{text-decoration:none;background:#1d4ed8}
.btn-sm.danger{background:#dc2626}
.btn-sm.danger:hover{background:#b91c1c}
.alert-err{background:#fee2e2;color:#991b1b;padding:10px;border-radius:6px;margin-bottom:12px}
.login-page{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e3a5f,#2563eb)}
.login-card{background:#fff;padding:40px;border-radius:12px;width:340px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.login-card h2{margin-bottom:0}
.login-card p{color:#666;font-size:13px;margin-bottom:10px}
.login-card button{margin-top:10px;padding:12px}

/* ===== GOOGLE CALENDAR STYLE ===== */
.gcal {
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 8px;
  overflow: hidden;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.gcal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #dadce0;
}

.gcal-title {
  font-size: 18px;
  font-weight: 500;
  color: #3c4043;
  letter-spacing: 0.2px;
}

.gcal-nav {
  display: flex;
  gap: 6px;
  align-items: center;
}

.gcal-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 50%;
  color: #5f6368;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}

.gcal-nav a:hover {
  background: #f1f3f4;
  text-decoration: none;
}

.gcal-today-btn {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1a73e8 !important;
  border: 1px solid #dadce0 !important;
  border-radius: 4px !important;
  padding: 0 12px !important;
  min-width: auto !important;
  height: 32px !important;
}

.gcal-today-btn:hover {
  background: #f1f3f4 !important;
}

.gcal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #dadce0;
  gap: 1px;
}

.gcal-day-header {
  background: #fff;
  text-align: center;
  padding: 10px 4px;
  font-size: 11px;
  font-weight: 500;
  color: #70757a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gcal-cell {
  background: #fff;
  min-height: 110px;
  padding: 4px 6px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.gcal-empty {
  background: #f8f9fa;
}

.gcal-weekend {
  background: #fafafa;
}

.gcal-date {
  font-size: 12px;
  font-weight: 500;
  color: #3c4043;
  margin-bottom: 2px;
  text-align: center;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  align-self: flex-start;
}

.gcal-today .gcal-date {
  background: #1a73e8;
  color: #fff;
  font-weight: 600;
}

.gcal-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
  overflow: hidden;
}

.gcal-event {
  font-size: 11px;
  color: #fff;
  padding: 3px 6px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  cursor: pointer;
  border-left: 3px solid rgba(255,255,255,0.5);
}

.gcal-more {
  font-size: 10px;
  color: #5f6368;
  padding: 1px 6px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .gcal-toolbar { padding: 8px 10px; }
  .gcal-title { font-size: 15px; }
  .gcal-cell { min-height: 70px; }
  .gcal-day-header { font-size: 10px; padding: 6px 2px; }
  .gcal-event { font-size: 9px; padding: 2px 4px; }
  .gcal-date { font-size: 11px; width: 20px; height: 20px; line-height: 20px; }
}