/* =========================================================
   CORE — Platform Shared UI
   Reusable shell for Platform, Accounts, HR-like admin pages
   ========================================================= */

/* =========================================================
   PAGE SHELL / TITLES
   ========================================================= */

.page-shell{
  width:100%;
  max-width:100%;
  min-width:0;
}

.tg-title-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
  min-width:0;
}

.page-title{
  font-size:1.35rem;
  font-weight:800;
  margin-bottom:0;
  color:var(--text, #1f2937);
}

.tg-page-subtitle{
  margin-top:4px;
  font-size:13px;
  line-height:1.45;
}

.tg-actions-top,
.module-title-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* =========================================================
   CARDS / SECTIONS
   ========================================================= */

.card{
  background:var(--panel, #fff);
  border:1px solid var(--border, #e3e6eb);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}

.hr-card,
.tg-detail-card,
.tg-employee-form-card{
  padding:14px;
  min-width:0;
}

.tg-form-section{
  margin-bottom:18px;
  min-width:0;
}

.tg-form-section:last-child{
  margin-bottom:0;
}

.tg-section-spaced{
  margin-top:14px;
}

.tg-section-title{
  font-size:15px;
  font-weight:900;
  color:var(--text, #111827);
  margin-bottom:12px;
}

/* =========================================================
   GRID / FORMS
   ========================================================= */

.tg-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:14px;
  min-width:0;
}

.form-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.form-field label,
.form-field > label{
  font-size:13px;
  font-weight:800;
  color:var(--text, #111827);
}

.span-2{
  grid-column:span 2;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="file"],
select,
textarea{
  width:100%;
  min-height:42px;
  padding:10px 12px;
  border:1px solid #d0d5dd;
  border-radius:10px;
  background:#fff;
  color:#111827;
  font:inherit;
  min-width:0;
}

textarea{
  resize:vertical;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:#f7941d;
  box-shadow:0 0 0 3px rgba(247,148,29,.12);
}

.inline-check{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:700;
  color:var(--text, #111827);
}

.inline-check input{
  width:16px;
  height:16px;
}

.field-error,
.text-danger{
  color:#b42318;
  font-size:12px;
  margin-top:4px;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:0 14px;
  border-radius:10px;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  font-weight:700;
  font-size:14px;
  white-space:nowrap;
}

.btn-sm{
  min-height:34px;
  padding:0 10px;
  font-size:12px;
}

.btn-primary{
  background:#f7941d;
  color:#fff;
  border-color:#f7941d;
}

.btn-primary:hover{
  filter:brightness(.97);
}

.btn-ghost,
.btn-secondary{
  background:#fff;
  color:#344054;
  border-color:#d0d5dd;
}

.btn-ghost:hover,
.btn-secondary:hover{
  background:#f9fafb;
}

.is-disabled,
.btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}

/* =========================================================
   ACTION BARS
   ========================================================= */

.form-actions-bar{
  display:flex;
  justify-content:flex-end;
  margin-top:20px;
  padding-top:14px;
  border-top:1px solid var(--border, #e5e7eb);
}

.form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.tg-inline-actions,
.hr-actions-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.tg-inline-form{
  margin:0;
}

/* =========================================================
   FILTERS
   ========================================================= */

.hr-filters{
  margin-bottom:14px;
  min-width:0;
}

.tg-filter-grid,
.hr-filter-form{
  display:grid;
  grid-template-columns:2fr auto;
  gap:12px;
  align-items:end;
  min-width:0;
}

.hr-filter-col{
  min-width:0;
}

.hr-filter-col label{
  display:block;
  font-size:13px;
  font-weight:800;
  margin-bottom:6px;
  color:var(--text, #111827);
}

.tg-filter-actions,
.hr-filter-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

/* =========================================================
   TABLES
   ========================================================= */

.hr-table-wrap,
.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.hr-table,
.table{
  width:100%;
  min-width:900px;
  border-collapse:collapse;
}

.hr-table th,
.hr-table td,
.table th,
.table td{
  padding:12px 14px;
  border-bottom:1px solid #eaecf0;
  vertical-align:top;
  text-align:left;
}

.hr-table thead th,
.table thead th{
  background:#f8fafc;
  font-size:12px;
  font-weight:900;
  color:#475467;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.hr-actions-cell{
  white-space:nowrap;
}

.hr-th-actions{
  text-align:left;
}

.hr-empty-row,
.tg-empty-state{
  text-align:center;
  padding:22px !important;
}

/* =========================================================
   DASHBOARD CARDS
   ========================================================= */

.module-dashboard-grid,
.platform-dashboard-grid,
.hr-dashboard-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  min-width:0;
}

.module-dashboard-card,
.hr-dash-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--border, #e5e7eb);
  background:#fff;
  border-radius:14px;
  padding:14px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  min-width:0;
}

.module-dashboard-card:hover,
.hr-dash-card:hover{
  border-color:#f7941d;
  box-shadow:0 6px 18px rgba(15,23,42,.08);
}

.hr-dash-title{
  font-size:15px;
  font-weight:900;
  color:var(--text, #111827);
  margin-bottom:5px;
}

.hr-dash-desc{
  font-size:13px;
  line-height:1.45;
  color:var(--muted, #667085);
}

.hr-disabled{
  opacity:.68;
  pointer-events:none;
}

/* dashboard cards used as labels */
label.module-dashboard-card,
label.hr-dash-card{
  cursor:pointer;
}

label.module-dashboard-card input,
label.hr-dash-card input{
  margin-bottom:10px;
}

/* =========================================================
   STATUS / TAGS
   ========================================================= */

.muted{
  color:var(--muted, #667085);
}

.status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.st-open{
  background:#ecfdf3;
  color:#027a48;
}

.st-closed{
  background:#fef3f2;
  color:#b42318;
}

.st-pending{
  background:#fffaeb;
  color:#b54708;
}

.st-warning{
  background:#fff6eb;
  color:#b25b00;
}

.tag{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:#f2f4f7;
  color:#344054;
  font-size:12px;
  font-weight:700;
  margin:2px 4px 2px 0;
}

.tg-chip-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

/* =========================================================
   DETAIL VIEW
   ========================================================= */

.tg-detail-head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:18px;
  min-width:0;
}

.tg-avatar{
  flex:0 0 auto;
}

.tg-avatar img,
.tg-avatar-fallback{
  width:64px;
  height:64px;
  border-radius:16px;
  object-fit:cover;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff6eb;
  color:#b25b00;
  font-weight:900;
  font-size:20px;
}

.tg-detail-meta{
  min-width:0;
  flex:1;
}

.tg-detail-name{
  font-size:20px;
  font-weight:900;
  color:var(--text, #111827);
}

.tg-detail-meta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
  font-size:13px;
}

.tg-detail-status{
  margin-top:10px;
}

.tg-detail-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  min-width:0;
}

.tg-kv{
  border:1px solid var(--border, #e5e7eb);
  background:#fff;
  border-radius:12px;
  padding:12px;
  min-width:0;
}

.tg-kv-label{
  font-size:12px;
  font-weight:900;
  color:#667085;
  margin-bottom:5px;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.tg-kv-value{
  font-size:14px;
  font-weight:800;
  color:var(--text, #111827);
  overflow-wrap:anywhere;
}

.tg-kv-text{
  font-size:14px;
  line-height:1.5;
  color:var(--text, #111827);
  overflow-wrap:anywhere;
}

.tg-danger-text{
  color:#b42318;
}

/* =========================================================
   ALERTS
   ========================================================= */

.alert{
  padding:12px 14px;
  border-radius:10px;
  border:1px solid transparent;
  margin-bottom:12px;
}

.alert-danger,
.alert-error{
  background:#fef3f2;
  border-color:#fecdca;
  color:#b42318;
}

.alert-success{
  background:#ecfdf3;
  border-color:#abefc6;
  color:#027a48;
}

.alert-warning{
  background:#fffaeb;
  border-color:#fedf89;
  color:#b54708;
}

.alert-info{
  background:#eff8ff;
  border-color:#b2ddff;
  color:#175cd3;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:920px), (orientation:landscape) and (max-height:520px){

  .tg-title-row{
    gap:10px;
  }

  .page-title{
    font-size:1.15rem;
  }

  .tg-actions-top,
  .module-title-actions{
    width:100%;
  }

  .tg-actions-top .btn,
  .module-title-actions .btn{
    flex:1 1 160px;
  }

  .tg-filter-grid,
  .hr-filter-form{
    grid-template-columns:1fr;
  }

  .tg-filter-actions,
  .hr-filter-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .tg-filter-actions .btn,
  .hr-filter-actions .btn{
    width:100%;
  }

  .span-2{
    grid-column:1 / -1;
  }

}

@media (max-width:620px){

  .hr-card,
  .tg-detail-card,
  .tg-employee-form-card{
    padding:12px;
  }

  .form-actions-bar{
    justify-content:stretch;
  }

  .form-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
  }

  .form-actions .btn{
    width:100%;
  }

  .tg-detail-head{
    flex-direction:column;
  }

  .module-dashboard-grid,
  .platform-dashboard-grid,
  .hr-dashboard-grid{
    grid-template-columns:1fr;
  }

}
/* =========================================================
   CORE — Notifications
   ========================================================= */

.notification-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.notification-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border:1px solid var(--border, #e5e7eb);
  border-radius:14px;
  background:#fff;
}

.notification-item.is-unread{
  border-color:#f7941d;
  background:#fffaf5;
}

.notification-main{
  min-width:0;
}

.notification-title-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.notification-title{
  font-size:14px;
  font-weight:900;
  color:var(--text, #111827);
}

.notification-message{
  margin-top:5px;
  font-size:13px;
  line-height:1.45;
  color:var(--text, #111827);
}

.notification-meta{
  margin-top:6px;
  font-size:12px;
}

.notification-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

@media (max-width:620px){

  .notification-item{
    flex-direction:column;
  }

  .notification-actions{
    justify-content:flex-start;
  }

}