/* ========== Design System ========== */
:root {
  --bg: #0d1117;
  --bg-alt: #161b22;
  --panel: rgba(255,255,255,0.08);
  --panel-border: rgba(255,255,255,0.15);
  --accent: #4cc9f0;
  --accent-grad: linear-gradient(135deg,#4cc9f0,#4361ee 60%,#7209b7);
  --danger: #ef476f;
  --warn: #ffd166;
  --ok: #06d6a0;
  --radius: 16px;
  --radius-sm: 8px;
  --transition: .35s cubic-bezier(.4,.2,.2,1);
  --font-stack: 'Segoe UI', system-ui, Arial, sans-serif;
  --shadow: 0 4px 16px -4px rgba(0,0,0,.6),0 2px 4px -1px rgba(0,0,0,.4);
  --shadow-strong: 0 10px 40px -8px rgba(0,0,0,.7),0 4px 12px -2px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html,body { margin:0; padding:0; font-family: var(--font-stack); background: radial-gradient(circle at 20% 20%,#182131,#0d1117 60%); color:#eef2f6; -webkit-font-smoothing:antialiased; }
body { min-height:100dvh; display:flex; flex-direction:column; }
a { color: var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { line-height:1.15; font-weight:600; }
p { line-height:1.5; }

/* Layout */
.site-header { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; padding:0.75rem 1.25rem; background:linear-gradient(to right,rgba(15,21,30,0.85),rgba(15,21,30,0.4)); backdrop-filter:blur(12px); border-bottom:1px solid var(--panel-border); z-index:10; }
.logo { font-weight:700; font-size:1.25rem; letter-spacing:.5px; }
.logo span { background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

.nav-toggle { display:none; background:none; border:0; font-size:1.5rem; color:#fff; }
.nav-menu { display:flex; list-style:none; margin:0; padding:0; gap:1rem; align-items:center; }
.nav-menu a { padding:.5rem 1rem; border-radius:var(--radius-sm); position:relative; overflow:hidden; }
.nav-menu a.active, .nav-menu a:hover { background:var(--panel); }

@media (max-width:760px) {
  .nav-toggle { display:block; }
  .nav-menu { position:absolute; top:100%; right:0; flex-direction:column; background:var(--bg-alt); padding:1rem; border:1px solid var(--panel-border); border-radius:var(--radius); min-width:200px; display:none; }
  .nav-menu.open { display:flex; }
}

.hero { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:center; gap:3rem; padding:4rem clamp(1rem,3vw,3rem) 2rem; }
.hero-content { max-width:560px; }
.lead { font-size:1.1rem; opacity:.85; }
.gradient-text { background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

.hero-visual { position:relative; perspective:1200px; }
.orb { position:absolute; inset:0; margin:auto; width:280px; height:280px; background:radial-gradient(circle at 30% 30%,#4cc9f0,#7209b7); filter:blur(40px) brightness(1.2); opacity:.35; animation: float 8s ease-in-out infinite; }
@keyframes float { 0%,100% { transform:translateY(-12px);} 50% { transform:translateY(12px);} }

/* Cards & Glass */
.card { background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius); padding:1.2rem 1.4rem; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.glass { backdrop-filter:blur(18px) saturate(150%); }
.depth { box-shadow:var(--shadow-strong); }
.hover-3d { transition:var(--transition); transform-style:preserve-3d; }
.hover-3d:hover { transform:translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); }

.mini-stats { list-style:none; display:flex; gap:1rem; padding:0; margin:1rem 0 0; }
.mini-stats li { display:flex; flex-direction:column; background:rgba(255,255,255,0.04); padding:.75rem .9rem; border-radius:var(--radius-sm); }
.mini-stats .num { font-size:1.4rem; font-weight:600; }
.mini-stats .lbl { font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; opacity:.7; }

/* Utilities */
.grid { display:grid; gap:1.4rem; }
.grid.cols-3 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.feature-cards { padding:2rem clamp(1rem,4vw,3rem) 4rem; }
.container { width:100%; max-width:1200px; margin:0 auto; padding:2rem clamp(1rem,3vw,2.2rem); }
.container.narrow { max-width:720px; }
.prose ul { line-height:1.45; }

.btn { --btn-bg: var(--panel); --btn-col:#fff; cursor:pointer; border:1px solid var(--panel-border); background:var(--btn-bg); color:var(--btn-col); padding:.65rem 1.15rem; font-weight:500; border-radius:var(--radius-sm); transition:var(--transition); display:inline-flex; align-items:center; gap:.5rem; }
.btn.primary { --btn-bg: var(--accent-grad); border:none; }
.btn.outline { background:transparent; }
.btn.ghost { background:rgba(255,255,255,0.08); }
.btn.small { padding:.45rem .9rem; font-size:.85rem; }
.btn.wide { width:100%; justify-content:center; }
.btn:hover { filter:brightness(1.15); transform:translateY(-2px); }
.btn:active { transform:translateY(0); }

.actions { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.2rem; }

/* Auth Pages */
.page-auth { display:flex; align-items:center; justify-content:center; padding:2rem; }
.auth-container { width:min(100%,420px); }
.stack { display:flex; flex-direction:column; gap:.9rem; }
label { display:flex; flex-direction:column; gap:.35rem; font-size:.9rem; }
input,select,textarea { background:rgba(255,255,255,0.05); border:1px solid var(--panel-border); color:#fff; border-radius:var(--radius-sm); padding:.7rem .85rem; font:inherit; outline:none; transition:var(--transition); }
input:focus,select:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(76,201,240,.25); }
.checkbox { flex-direction:row; align-items:center; gap:.6rem; }
.note { font-size:.75rem; text-align:center; opacity:.8; }

/* Dashboard Layout */
.layout-dashboard { display:grid; grid-template-columns:250px 1fr; min-height:100dvh; }
.sidebar { background:var(--bg-alt); border-right:1px solid var(--panel-border); padding:1rem; display:flex; flex-direction:column; gap:1rem; }
.sidebar nav { display:flex; flex-direction:column; gap:.5rem; }
.sidebar a { padding:.6rem .8rem; border-radius:var(--radius-sm); background:rgba(255,255,255,0.04); }
.sidebar a.active, .sidebar a:hover { background:var(--accent-grad); color:#fff; }
.dash-main { padding:1.5rem clamp(1rem,2vw,2rem); }

@media (max-width:900px){
  .layout-dashboard { grid-template-columns: 70px 1fr; }
  .sidebar { padding:.75rem .5rem; }
  .sidebar a { font-size:.65rem; text-align:center; }
}
@media (max-width:620px){
  .layout-dashboard { grid-template-columns:1fr; }
  .sidebar { flex-direction:row; overflow-x:auto; border-right:none; border-bottom:1px solid var(--panel-border); }
  .sidebar nav { flex-direction:row; }
  .sidebar a { flex:1; white-space:nowrap; }
}

/* Tables */
.table { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius); overflow:hidden; }
.table th, .table td { padding:.7rem .9rem; text-align:left; font-size:.85rem; }
.table thead { background:rgba(255,255,255,0.07); }
.table tbody tr:nth-child(even) { background:rgba(255,255,255,0.03); }

/* Chat */
.chat-layout { display:flex; flex-direction:column; min-height:100dvh; }
.chat-main { margin:1rem auto; width:min(100%,820px); display:flex; flex-direction:column; gap:1rem; height:calc(100dvh - 4rem); }
.messages { flex:1; overflow:auto; display:flex; flex-direction:column; gap:.65rem; padding:.5rem; }
.bubble { max-width:70%; padding:.55rem .8rem; border-radius:18px; font-size:.85rem; line-height:1.3; background:var(--accent-grad); box-shadow:var(--shadow); }
.bubble.me { align-self:flex-end; background:linear-gradient(135deg,#06d6a0,#118ab2); }
.chat-form { display:flex; gap:.6rem; }
.chat-form input { flex:1; }

/* Footer */
.site-footer { margin-top:auto; padding:1rem; text-align:center; font-size:.7rem; opacity:.65; }

/* 3D Tilt Card (simple JS) */
.tilt-card { transform-style:preserve-3d; }
.tilt-card .card { transition: transform .3s ease; }

/* Scrollbar subtle */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:rgba(255,255,255,0.04); }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:20px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.28); }

.test-accounts { margin-top:1.2rem; border-top:1px solid var(--panel-border); padding-top:.8rem; }
.quick-btns { display:flex; gap:.5rem; flex-wrap:wrap; }

/* Add this CSS to make the dropdown option text black */
select.form-control {
  color: black;
  background-color: white;
}

/* ====== ICT REPORT FORM STYLES ====== */
/* Image upload styling */
.image-upload-container {
  border: 2px dashed #3a4642;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 15px;
  border-radius: 4px;
  transition: all 0.3s;
}

/* Update the textarea styling */
#description {
  min-height: 100px; /* Starting height */
  height: auto; /* Allow it to grow */
  overflow: hidden; /* Hide scrollbars */
  resize: none; /* Disable manual resizing since we're doing it automatically */
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  background: #1a231f;
  border: 1px solid #3a4642;
  border-radius: 4px;
  color: #ffffff;
  font-family: inherit;
  transition: height 0.1s ease; /* Smooth height transition */
}

/* Make the form layout vertical and full-width */
.form-section {
  margin-bottom: 25px;
  width: 100%;
}

.form-group {
  margin-bottom: 15px;
  width: 100%;
}

/* Add more spacing between sections */
.form-section h3 {
  margin-top: 20px;
  margin-bottom: 15px;
  color: #ffffff;
  font-size: 1.1em;
  border-bottom: 1px solid #3a4642;
  padding-bottom: 8px;
}

/* Card adjustments to match size in screenshot */
.feature-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 800px;
  margin: 15px auto;
}

.card.glass {
  background: rgba(23, 32, 46, 0.7);
  border-radius: 5px;
  border: 1px solid rgba(79, 91, 117, 0.3);
  padding: 15px 20px;
  margin: 0;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card.glass h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #4a8ce3;
}

.card.glass p {
  font-size: 14px;
  margin: 0;
  line-height: 1.4;
  color: #b8c6d9;
}