/* Attendance Sheet - Admin + Front styles (clean, consolidated) */

/* Base container */
.as-container{
  max-width:100%;
  margin:10px auto;
  font-family: "Cairo", "Tajawal", Arial, sans-serif;
  direction: rtl;
  color: #0f172a;
}

/* Controls */
.as-controls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:8px;
}
.as-controls label { font-weight:600; font-size:14px; }
.as-controls input, .as-controls select { padding:6px 8px; border:1px solid #d1d5db; border-radius:6px; }

.as-quick-actions { margin:8px 0; display:flex; gap:8px; }
#as-message { font-size:14px; color:#064e3b; min-height:20px; }

/* Table wrapper */
.as-table-wrapper{
  overflow-x:auto;
  border:1px solid #e2e8f0;
  background:#fff;
  padding:6px;
  border-radius:8px;
  box-shadow: 0 1px 3px rgba(2,6,23,0.04);
}

/* Tables */
.as-grid,
.as-grid-stage {
  width:100%;
  border-collapse:collapse;
  min-width:680px;
  table-layout:fixed;
  font-size:14px;
}

/* cells */
.as-grid th, .as-grid td,
.as-grid-stage th, .as-grid-stage td {
  border:1px solid #e6eef6;
  padding:0;
  vertical-align:middle;
  text-align:center;
  background:#fff;
  box-sizing: border-box;
}

/* first (count) column - very compact */
.as-grid th.first-col,
.as-grid td.first-col,
.as-grid-stage th.first-col,
.as-grid-stage td.first-col,
table.as-grid th:first-child,
table.as-grid td:first-child {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  padding: 6px 4px !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  text-align: center !important;
  position: sticky;
  left: 0;
  background: #f8fafc;
  z-index: 3;
  font-weight:600;
}

/* name column (sticky, larger, bold, wraps) */
.as-grid th.name-col, .as-grid td.name-col,
.as-grid-stage th.name-col, .as-grid-stage td.name-col {
  min-width:240px;
  max-width:520px;
  white-space: normal !important;
  word-break: break-word;
  text-align:right;
  padding:12px 14px;
  position: sticky;
  left: 28px; /* after count col */
  background:#fff;
  z-index:2;
  font-weight:700;
}

/* class column (small) when present in stage tables */
.as-grid-stage th:nth-child(2),
.as-grid-stage td:nth-child(2),
table.as-grid-stage th:nth-child(2),
table.as-grid-stage td:nth-child(2) {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  padding: 6px 6px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  font-weight: 700 !important;
}

/* headers */
.as-grid thead th{ background:#f1f5f9; font-weight:700; text-align:center; font-size:14px; padding:8px; }
.as-day-row th{ background:#fff8dc; font-weight:700; font-size:15px; text-align:center; padding:12px; }

/* row height for touch */
.as-grid tbody tr, .as-grid-stage tbody tr { min-height:44px; height:auto; }

/* clickable box */
.as-box {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-height:44px;
  padding:10px 6px;
  border-radius:6px;
  line-height:1;
  font-size:16px;
  cursor:pointer;
  user-select:none;
  box-sizing:border-box;
}
.as-state-0 { background:transparent; color:#94a3b8; border:0; }
.as-state-1 { background:#e6f9ec; color:#0b6b2f; border:1px solid rgba(11,107,47,0.12); }
.as-state-2 { background:#fff0f0; color:#b91c1c; border:1px solid rgba(185,28,28,0.06); }

.as-grid td { cursor:pointer; }
.as-grid td:hover { background:#fbfdff; }

/* admin inline editing */
.as-admin-input { width:100%; padding:6px; border:1px solid #d1d5db; border-radius:4px; }

/* Print / visibility helper */
.as-print-area, .as-print-wrapper { display:block; }

/* Ensure table-layout fixed in wrapper */
.as-table-wrapper table,
.as-table-wrapper table.as-grid,
.as-table-wrapper table.as-grid-stage {
  table-layout: fixed;
}

/* column-class helpers for colgroup (applies in both screen & print) */
.as-table-wrapper col.count-col,
.as-print-wrapper col.count-col,
.col-count,
col.count-col {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
}

.as-table-wrapper col.class-col,
.as-print-wrapper col.class-col,
.col-class,
col.class-col {
  width: 56px;
  min-width: 56px;
  max-width: 56px;
}

.as-table-wrapper col.name-col,
.as-print-wrapper col.name-col,
.col-name,
col.name-col {
  width: auto;
  min-width: 240px;
}

/* prevent awkward wrapping in small cells but allow name column wrap */
.as-table-wrapper th,
.as-table-wrapper td {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive tweaks */
@media (max-width:900px){
  .as-grid { min-width:640px; }
  .as-grid th.name-col, .as-grid td.name-col { min-width:200px; max-width:340px; padding:10px 12px; }
  .as-grid tbody tr { min-height:48px; }
  .as-box { min-height:48px; padding:12px 8px; font-size:15px; }
}

/* Printing rules - show only print area and keep column widths */
@media print {
  body * { visibility: hidden; }
  .as-print-area, .as-print-area * { visibility: visible; }
  .as-print-area { position: absolute; left:0; top:0; width:100%; padding:10px; }

  /* print tables appearance */
  .as-print-area table,
  .as-print-area table.as-grid,
  .as-print-area table.as-grid-stage {
    width:100%;
    border-collapse:collapse;
    font-size:12px;
    table-layout: fixed;
  }
  .as-print-area th, .as-print-area td {
    border:1px solid #999;
    padding:6px;
    text-align:center;
    vertical-align:middle;
    box-sizing: border-box;
  }

  /* keep column sizes in print */
  col.count-col { width:28px !important; min-width:28px !important; max-width:28px !important; }
  col.class-col { width:56px !important; min-width:56px !important; max-width:56px !important; }
  col.name-col  { min-width:240px !important; }

  /* name column style in print */
  .as-print-area th.name-col, .as-print-area td.name-col {
    white-space: normal !important;
    word-break: break-word !important;
    text-align: right !important;
    padding-right: 8px !important;
    font-weight:700 !important;
  }

  /* ensure sticky columns act normal in print */
  .as-grid .first-col, .as-grid .name-col,
  .as-grid-stage .first-col, .as-grid-stage .name-col {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    background: transparent !important;
  }

  /* small count column in print */
  .as-grid th.first-col, .as-grid td.first-col,
  .as-grid-stage th.first-col, .as-grid-stage td.first-col {
    width: 28px !important;
    padding: 6px 4px !important;
  }

  /* keep reasonable row height */
  .as-grid tbody tr, .as-grid-stage tbody tr { height: 44px !important; }
}

/* Small utility: ensure printed headers/dates are centered */
.as-print-area h3 { text-align:center; margin:8px 0 12px; font-weight:700; }

/* End of file */