/* Internship Management System - Global styles (green theme) */
:root {
  --primary: #0bdd12;
  --primary-hover: #07b90d;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --success: #16a34a;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-600: #5F5D6B;
  --gray-800: #2B2B2F;
  --white: #fff;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --radius: 16px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-800);
  background: var(--gray-100);
}

/* Navigation */
.nav {
  background: var(--white);
  box-shadow: var(--shadow);
  padding: 0.75rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.nav a {
  color: var(--gray-800);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
}

.nav a:hover {
  background: var(--gray-100);
}

.nav a.active {
  background: var(--primary);
  color: var(--white);
}

.nav .brand {
  font-weight: 700;
  margin-right: 1rem;
}

/* Main content */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
}

.page-title {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
}

/* Cards / Sections */
.card {
  background: linear-gradient(180deg, #DCF9E0 0%, #FFFFFF 25%);
  border-radius: var(--radius);
  box-shadow: 0px 12px 26px rgba(0, 0, 0, 0.08), 0px 0px 0px 1px rgba(0, 0, 0, 0.04);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.card h2 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-800);
}

/* Forms */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
  color: var(--gray-600);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: 9px;
  font-size: 1rem;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.form-group textarea.textarea-large {
  min-height: 140px;
}

.text-muted {
  color: var(--gray-600);
  font-size: 0.875rem;
  margin: -0.5rem 0 1rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.5;
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
  border-radius: 7px;
  font-weight: 600;
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-danger {
  background: var(--danger);
  color: var(--white);
}

.btn-danger:hover {
  background: var(--danger-hover);
}

.btn-secondary {
  background: var(--gray-200);
  color: var(--gray-800);
}

.btn-secondary:hover {
  background: var(--gray-600);
  color: var(--white);
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  margin-right: 0.25rem;
}

/* Tables */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
}

th {
  background: var(--gray-100);
  font-weight: 600;
  color: var(--gray-600);
}

tr:hover td {
  background: var(--gray-100);
}

/* Alerts */
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.alert-success {
  background: #d1fae5;
  color: #065f46;
}

.alert-error {
  background: #fee2e2;
  color: #991b1b;
}

.alert-info {
  background: #dbeafe;
  color: #1e40af;
}

/* Dashboard stats */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: linear-gradient(180deg, #DCF9E0 0%, #FFFFFF 35%);
  padding: 1.25rem;
  border-radius: var(--radius);
  box-shadow: 0px 12px 26px rgba(0, 0, 0, 0.08), 0px 0px 0px 1px rgba(0, 0, 0, 0.04);
}

.stat-card .value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
}

.stat-card .label {
  font-size: 0.875rem;
  color: var(--gray-600);
}

/* Modal / overlay for view/edit */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-overlay.show {
  display: flex;
}

.modal {
  width: 450px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #DCF9E0 0%, #FFFFFF 30.21%);
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
}

.modal-header {
  padding: 1.25rem 1.5rem 0.5rem;
  border-bottom: none;
}

.modal-header .title {
  margin: 0;
}

.modal-header .description {
  display: block;
  margin-top: 0.25rem;
  margin-bottom: 0;
}

.modal-body {
  padding: 1.25rem 1.5rem;
}

.modal-footer,
.modal--footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #ebebec;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}

.modal--footer {
  padding: 20px;
  justify-content: flex-end;
  gap: 0.75rem;
}

.modal-wide {
  width: 560px;
  max-width: 100%;
}

.modal-subtitle {
  font-weight: normal;
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-left: 0.5rem;
}

.modal-section-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-600);
  margin: 0 0 0.5rem;
}

.project-students-list .no-data {
  color: var(--gray-600);
  margin: 0;
  padding: 0.5rem 0;
}

/* View modal – read-only detail list */
.view-dl {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.25rem;
  align-items: baseline;
}

.view-dl dt {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-600);
  margin: 0;
  grid-column: 1;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--gray-200);
}

.view-dl dd {
  margin: 0;
  grid-column: 2;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-800);
  white-space: pre-wrap;
  word-break: break-word;
}

.view-dl dd:last-of-type {
  border-bottom: none;
}

.view-dl dt:last-of-type {
  border-bottom: none;
}

/* Modal – banner, title, description */
.modal .banner {
  width: 100%;
  height: 30px;
  margin: 0;
  background-size: 100%;
  background-repeat: no-repeat;
}

.modal .title {
  font-weight: 700;
  font-size: 17px;
  line-height: 21px;
  text-align: center;
  color: #2B2B2F;
  margin-bottom: 15px;
}

.modal .description {
  max-width: 80%;
  margin: auto;
  font-weight: 600;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  color: #5F5D6B;
}

/* Tab container (e.g. for modal tabs) */
.tab-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
  padding: 2px;
  background-color: #ebebec;
  border-radius: 9px;
  margin: 10px 20px 0 20px;
}

.tab-container .indicator {
  content: "";
  width: 50%;
  height: 28px;
  background: #FFFFFF;
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 9;
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04);
  border-radius: 7px;
  transition: all 0.2s ease-out;
}

.tab-container .tab {
  width: 50%;
  height: 28px;
  position: relative;
  z-index: 99;
  background-color: transparent;
  border: 0;
  outline: none;
  flex: none;
  align-self: stretch;
  flex-grow: 1;
  cursor: pointer;
  font-weight: 500;
}

.tab-container .tab--1:hover ~ .indicator {
  left: 2px;
}

.tab-container .tab--2:hover ~ .indicator {
  left: calc(50% - 2px);
}

/* Benefits list in modal */
.benefits {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.benefits > span {
  font-size: 15px;
  color: #2B2B2F;
  font-weight: 700;
}

.benefits ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.benefits ul li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.benefits ul li span {
  font-weight: 600;
  font-size: 12px;
  color: #5F5D6B;
}

/* Modal footer (custom design) */
.modal--footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-top: 1px solid #ebebec;
}

.modal--footer .price {
  position: relative;
  font-size: 32px;
  color: #2B2B2F;
  font-weight: 900;
}

.modal--footer .price sup {
  font-size: 13px;
}

.modal--footer .price sub {
  width: fit-content;
  position: absolute;
  font-size: 11px;
  color: #5F5D6B;
  bottom: 5px;
  display: inline-block;
}

/* Upgrade / primary action button */
.upgrade-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 215px;
  height: 40px;
  background: #0bdd12;
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 7px;
  border: 0;
  outline: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.upgrade-btn:hover {
  background-color: #07b90d;
}

/* Form layout (vertical gap) */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Filter bar */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.filter-bar .form-group {
  margin-bottom: 0;
}

.filter-bar label {
  font-size: 0.875rem;
}

/* Content display (for view modals) */
.content-block {
  white-space: pre-wrap;
  word-break: break-word;
  padding: 0.75rem;
  background: var(--gray-100);
  border-radius: var(--radius);
  margin-top: 0.5rem;
}

/* Attendance register – Excel-style sheet */
.attendance-toolbar .filter-bar {
  margin-bottom: 0;
}

.attendance-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin-bottom: 1rem;
}

.attendance-register {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--gray-200);
  font-size: 0.9375rem;
}

.attendance-register th,
.attendance-register td {
  border: 1px solid var(--gray-200);
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: var(--white);
}

.attendance-register th {
  background: var(--gray-100);
  font-weight: 600;
  color: var(--gray-600);
  white-space: nowrap;
}

.attendance-register tbody tr:hover td {
  background: #f8fafc;
}

/* Present = green highlight */
.attendance-register tr.row-present td.cell-present {
  background: #dcfce7;
}

.attendance-register tr.row-present:hover td {
  background: #d1fae5;
}

/* Absent = red highlight */
.attendance-register tr.row-absent td.cell-absent {
  background: #fee2e2;
}

.attendance-register tr.row-absent:hover td {
  background: #fecaca;
}

.attendance-register .cell-sno {
  width: 3rem;
  text-align: center;
}

.attendance-register .cell-present,
.attendance-register .cell-absent {
  width: 5rem;
  text-align: center;
}

.attendance-register .cell-present input,
.attendance-register .cell-absent input {
  margin: 0;
  cursor: pointer;
}

.attendance-register .cell-remarks input {
  width: 100%;
  min-width: 120px;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.register-placeholder {
  color: var(--gray-600);
  font-style: italic;
  text-align: center;
  padding: 1.5rem !important;
}

.register-actions {
  padding-top: 0.5rem;
  border-top: 1px solid var(--gray-200);
}

/* Attendance summary tables */
.summary-subtitle {
  font-size: 1rem;
  margin: 1.25rem 0 0.5rem;
  color: var(--gray-600);
}
.summary-subtitle:first-child {
  margin-top: 0;
}
.summary-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.5rem;
}
.summary-table th,
.summary-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--gray-200);
  text-align: left;
}
.summary-table th {
  background: var(--gray-100);
  font-weight: 600;
  color: var(--gray-600);
}
/* Attendance % color coding */
.pct-green {
  color: #16a34a;
  font-weight: 600;
}
.pct-orange {
  color: #ea580c;
  font-weight: 600;
}
.pct-red {
  color: #dc2626;
  font-weight: 600;
}
.no-data {
  color: var(--gray-600);
  font-style: italic;
  text-align: center;
  padding: 1rem !important;
}
.loading-inline {
  color: var(--gray-600);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}
#trend-chart {
  display: block;
  width: 100%;
  max-width: 600px;
  height: 220px;
}

/* Responsive */
@media (max-width: 640px) {
  .nav-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  th,
  td {
    padding: 0.5rem;
    font-size: 0.875rem;
  }

  .attendance-register th,
  .attendance-register td {
    padding: 0.4rem 0.5rem;
    font-size: 0.8125rem;
  }
}