/* public/css/style.css - Global styles for Tracer Study System */

/* Layout */
body{
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:#fefce8; /* pale yellow */
  color:#065f46; /* dark green text */
  margin:0;
  padding:0;
}
.container{max-width:1100px;margin:20px auto;padding:0 16px}

/* Card */
.card{background:#fff;border-radius:8px;padding:20px;box-shadow:0 8px 24px rgba(16,24,40,0.06);}

/* Forms */
label{display:block;margin-top:10px;font-weight:600}
input[type="text"], input[type="email"], input[type="password"], input[type="date"], textarea, select{
  width:100%;max-width:640px;padding:10px;border-radius:6px;border:1px solid #e5e7eb;margin-top:6px;box-sizing:border-box;font-size:14px
}
button{padding:8px 12px;border-radius:6px;border:none;background:#10b981;color:#fff;cursor:pointer} /* green button */
button.secondary{background:#6b7280}
.error{color:#b91c1c;margin-top:8px}

/* global links */
a{color:#065f46;}
a:hover{color:#10b981;}

/* Table */
table{border-collapse:collapse;width:100%;margin-top:16px;background:#fff;border-radius:6px;overflow:hidden}
th,td{padding:12px;border-bottom:1px solid #e6e9ee;text-align:left}
th{background:#fef3c7;font-weight:700} /* light yellow header */
tr:hover td{background:#d1fae5} /* light green hover */

/* Admin header (legacy selectors kept for compatibility) */
.admin-header{background:#e9f5db;padding:10px 20px;border-bottom:1px solid #d1fae5;margin-bottom:18px} /* light green header */
.admin-header .meta{float:right}
.admin-header a{color:#0366d6;text-decoration:none;margin-left:12px}
.admin-header strong{font-weight:700}

/* Fallback/override for navbar listing when bootstrap fails to load */
.navbar-nav{list-style:none!important;margin:0!important;padding-left:0!important}
.navbar-nav .nav-link{display:block!important;padding:.5rem 1rem!important}
.navbar-brand{color:#065f46!important}
.navbar{background:#e9f5db!important}

/* Sidebar adjustments */
.offcanvas-body .nav-link {color:#065f46;}
.offcanvas-body .nav-link.active {background:#10b981; color:#fff;}
/* avoid horizontal scrollbar when offcanvas open */
body.offcanvas-open {overflow:hidden;}

/* Navigation */
.admin-nav{margin-top:8px}
.admin-nav a{margin-right:16px;color:#065f46;text-decoration:none;padding:6px 10px;border-radius:6px} /* green links */
.admin-nav a.active{background:#10b981;color:#fff} /* active nav green */

/* Hamburger menu */
.hamburger{display:none;background:none;border:none;padding:6px;margin-left:8px;cursor:pointer}
.hamburger .bar{display:block;width:20px;height:2px;background:#374151;margin:4px 0;border-radius:2px;transition:transform .2s, opacity .2s}
.hamburger.is-active .bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.is-active .bar:nth-child(2){opacity:0}
.hamburger.is-active .bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Table responsiveness */
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-responsive table{min-width:700px}

/* Icon-only buttons (small, unobtrusive) */
.icon-btn{background:none;border:none;padding:6px;border-radius:6px;cursor:pointer;font-size:16px;color:#374151}
.icon-btn:hover{background:#eef2ff;color:#0366d6}
.icon-btn:focus{outline:2px solid #c7ddff}
.icon-btn.danger{color:#b91c1c}
.icon-btn.danger:hover{background:#fee2e2;color:#991b1b}



/* Responsive forms */
@media (max-width:720px){
  .admin-header .meta{display:block;float:none;margin-top:8px}
  .container{padding:0 12px}
  input[type="text"], input[type="email"], input[type="password"], textarea, select{font-size:16px}
  .card{padding:16px}
  .hamburger{display:inline-block}
  .admin-nav{display:none}
  .admin-nav.open{display:block}
  .admin-nav a{display:block;padding:8px 0}
}

/* Admin form grid: align labels and controls in two columns on desktop */
form#editSurveyForm, form#addQuestionForm, form#addOptionForm {
  max-width: 960px;
}
form#editSurveyForm label,
form#addQuestionForm label,
form#addOptionForm label {
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-column-gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
form#editSurveyForm label > input,
form#editSurveyForm label > select,
form#editSurveyForm label > textarea,
form#addQuestionForm label > input,
form#addQuestionForm label > select,
form#addQuestionForm label > textarea,
form#addOptionForm label > input,
form#addOptionForm label > select,
form#addOptionForm label > textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Place buttons aligned with controls column */
form#editSurveyForm > button,
form#addQuestionForm > button,
form#addOptionForm > button {
  margin-left: 160px;
  margin-top: 8px;
}

/* Stack on small screens */
@media (max-width:720px){
  form#editSurveyForm label,
  form#addQuestionForm label,
  form#addOptionForm label {
    grid-template-columns: 1fr;
  }
  form#editSurveyForm > button,
  form#addQuestionForm > button,
  form#addOptionForm > button {
    margin-left: 0;
  }
}

/* Align the Create Survey form with the admin form controls (no labels present) */
form#createSurveyForm {
  max-width: 960px;
  /* offset to align with control column used by labeled forms */
  margin-left: 160px;
}
form#createSurveyForm .col-12 { width: 100%; }
form#createSurveyForm .col-12 textarea { min-height: 120px; }

@media (max-width:720px){
  form#createSurveyForm { margin-left: 0; }
}

/* Reports page: align standalone labels/controls like other admin forms */
label.report-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-column-gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
label.report-row > select,
label.report-row > input,
label.report-row > textarea { width: 100%; box-sizing: border-box; }

.report-controls { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.report-controls .download-links { margin-left: auto; }

/* smaller screens adjustments */
@media (max-width:480px) {
  h1{font-size:24px}
  h2{font-size:20px}
  .container{margin:10px auto; padding:0 8px}
  .question.card{margin-bottom:12px}
  .card{padding:12px}
}

/* Persistent desktop sidebar: show offcanvas as a fixed sidebar on wide screens */
@media (min-width: 992px) {
  /* Make the offcanvas act like a persistent sidebar */
  #adminSidebar.offcanvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: 240px !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
    box-shadow: none !important;
  }

  /* Keep body content shifted to the right so sidebar doesn't overlap */
  body {
    padding-left: 240px;
  }

  /* Hide the mobile toggle on desktop */
  .navbar .btn[data-bs-toggle="offcanvas"] { display: none; }

  /* Backdrop is not needed for persistent sidebar */
  .offcanvas-backdrop { display: none !important; }

  /* Ensure any offcanvas children layout nicely */
  #adminSidebar .offcanvas-body { padding-top: 1rem; }
  /* Hide the mobile close button on desktop (persistent sidebar shouldn't show close) */
  #adminSidebar .btn-close { display: none !important; }

  /* Make sure sidebar sits behind floating page controls but above content area as needed */
  #adminSidebar { z-index: 1030; }
}