/* main.css */

/* Global resets */
body, html {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}
footer {
  box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.06), 0 -4px 6px -1px rgba(0, 0, 0, 0.08);
}

/* --------------------------
   Module Tab Bars
-------------------------- */
.module-tabbar {
  background: #ffffff;
  box-shadow: 0 0.5px 7px rgba(0, 0, 0, 0.32);
  position: relative;
  z-index: 20;
  height: 3rem;
}

.module-label {
  font-size: 2.1rem;       /* close to text-4xl */
  font-weight: 700;        /* font-bold */
  color: #1e40af;          /* text-blue-700 */
  padding: 0.1rem 1.5rem;  /* py-1 px-6 */
  margin-top: -0.5rem;     /* -mt-2 */
}

.module-tab {
  display: inline-block;
  padding: 0.875rem 1.5rem; /* py-3.5 px-6 */
  font-size: 0.875rem;      /* text-sm */
  font-weight: 500;         /* font-medium */
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  border-bottom: 2px solid transparent;
  color: #4b5563;           /* text-gray-600 */
  transition: color 0.2s, border-color 0.2s;
}
.module-tab:hover {
  color: #1f2937;           /* hover:text-gray-800 */
  border-color: #d1d5db;    /* hover:border-gray-300 */
}
.module-tab.active {
  border-color: #3b82f6;    /* border-blue-500 */
  color: #2563eb;           /* text-blue-600 */
  background-color: #eff6ff;/* bg-blue-50 */
}

/* --------------------------
   Modals
-------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  z-index: 50;
  justify-content: center;
  align-items: center;
}
.modal-backdrop.active-backdrop {
  display: flex;
}
.modal-window {
  background-color: #ffffff;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 24rem;
  width: 100%;
  z-index: 60;
}
.modal-window h3 {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.modal-window p {
  margin-bottom: 1rem;
}
.modal-window .modal-footer {
  margin-top: 1rem;
  text-align: right;
}

/* --------------------------
   Buttons (new unified .btn)
-------------------------- */
/* Replace all “bg-gray-500 text-white px-4 py-2 rounded shadow” etc. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;      /* px-4 py-2 */
  border-radius: 0.375rem;   /* rounded */
  font-size: 0.875rem;       /* text-sm */
  font-weight: 500;          /* font-medium */
  transition: background-color 0.2s, opacity 0.2s;
}
.btn-primary {
  background-color: #2563eb; /* text-blue-600 */
  color: #ffffff;
}
.btn-primary:hover {
  background-color: #1e40af; /* hover darker blue */
}
.btn-secondary {
  background-color: #6b7280; /* gray-500 */
  color: #ffffff;
}
.btn-secondary:hover {
  background-color: #4b5563; /* gray-600 */
}
.btn-success {
  background-color: #16a34a; /* green-600 */
  color: #ffffff;
}
.btn-success:hover {
  background-color: #15803d; /* green-700 */
}
.btn-danger {
  background-color: #dc2626; /* red-600 */
  color: #ffffff;
}
.btn-danger:hover {
  background-color: #b91c1c; /* red-700 */
}

/* --------------------------
   Page Titles & Section Headings
-------------------------- */
.page-title {
  font-size: 1.5rem;        /* text-2xl */
  font-weight: 700;         /* font-bold */
  color: #1f2937;           /* text-gray-800 */
  margin-bottom: 1.5rem;    /* mb-6 */
}

/* --------------------------
   Data Tables (new .data-table)
-------------------------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;      /* text-sm */
  text-align: left;
}
.data-table th,
.data-table td {
  padding: 0.75rem 1rem;    /* px-4 py-2 */
  border-bottom: 1px solid #e5e7eb; /* gray-200 */
}
.data-table th {
  background-color: #dbeafe; /* bg-blue-100 (instead of blue-300 for simplicity) */
  color: #374151;             /* text-gray-700 */
  font-weight: 600;           /* font-semibold */
}
.data-table tr:nth-child(even) {
  background-color: #f9fafb; /* gray-50 striped rows */
}

/* --------------------------
   Generic Card Styles
-------------------------- */
.card {
  background-color: #ffffff;              
  /* Tailwind’s shadow-md: */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1),
              0 1px 2px rgba(0,0,0,0.06);
  border-radius: 0.5rem;                  
  transition: box-shadow 0.2s, transform 0.2s;
  max-width: 25vw;
  width: 100%;
}
.card:hover {
  /* Tailwind’s shadow-xl + slight lift */
  box-shadow: 0 10px 15px rgba(0,0,0,0.1),
              0 4px 6px rgba(0,0,0,0.1);
  transform: translateY(-0.25rem);
}

/* Card header bar */
.card-header {
  background-color: #3b82f6;              
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  padding-top: 0rem;
  padding-bottom: 0.25rem;
  text-align: center;
}
/* Card title text */
.card-title {
  font-size: 1.5rem;                    
  font-weight: 700;                       
  color: #ffffff;
}
/* Card body (temp) */
.card-body {
  margin-top: 1rem;                       
  text-align: center;
  font-size: 1.875rem;                    
  font-weight: 700;                       
}
/* Card footer (timestamp) */
.card-footer {
  font-size: 0.75rem;                     
  color: #6b7280;                         
  text-align: right;
  padding: 0 0.5rem 0.25rem;              
}

/* --------------------------
   Card Grid Variants
-------------------------- */

/* 2-column grid: each up to 25vw, centered */
.cards-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 25vw));
  gap: 1.5rem;             /* equivalent to Tailwind gap-6 */
  justify-content: center; /* center the entire grid */
}

/* 3-column grid: each up to (approx.) 20vw, centered */
.cards-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 25vw));
  gap: 1.5rem;
  justify-content: center;
}