/* Modern UI layer for main content area.
   IMPORTANT: intentionally scoped to `.main` so it does NOT affect the sidebar. */

:root{
  --app-border: rgba(15, 23, 42, .10);
  --app-border-strong: rgba(15, 23, 42, .14);
  --app-shadow-sm: 0 6px 18px rgba(2, 6, 23, .06);
  --app-shadow: 0 14px 40px rgba(2, 6, 23, .10);
  --app-radius: 16px;
  --app-radius-sm: 12px;
}

.main{
  /* Background with subtle “enterprise” gradients */
  background:
    radial-gradient(1200px 500px at 20% -10%, rgba(13,110,253,.12), transparent 60%),
    radial-gradient(900px 450px at 95% 5%, rgba(25,135,84,.10), transparent 55%),
    #f8fafc;
}

/* Page header (optional) */
.main .app-page-header{
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  /* Match sidebar look */
  background: #0f172a;
  box-shadow: var(--app-shadow-sm);
  padding: 1.25rem 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.main .app-page-header .app-page-title{
  margin: 0;
  font-weight: 750;
  letter-spacing: .2px;
  color: #e2e8f0;
  font-size: 1.35rem;
  line-height: 1.2;
}

.main .app-page-header .app-page-subtitle{
  margin: .25rem 0 0;
  color: #cbd5e1;
}

.main .app-page-icon{
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Keep the original light gradient background for the icon container */
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.70) 55%, rgba(255,255,255,.55) 100%);
  border: 1px solid rgba(15, 23, 42, .10);
  color: #0d6efd;
  flex: 0 0 auto;
}

.main .app-page-icon i{
  font-size: 2rem;
}

/* Sub-app header (reusable dark bar: logo + title + description) */
.main .app-container .sub-app-header,
.main .sub-app-header{
  display: block;
  width: 100%;
  padding: 1rem 1.5rem;
  background: #0f172a !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 24px rgba(2, 6, 23, .18);
  box-sizing: border-box;
}
.main .app-container .sub-app-header .sub-app-header__title,
.main .sub-app-header__title{
  margin: 0;
  font-weight: 750;
  letter-spacing: .02em;
  color: #e2e8f0;
  font-size: 1.35rem;
  line-height: 1.2;
}
.main .app-container .sub-app-header .sub-app-header__description,
.main .sub-app-header__description{
  margin: .15rem 0 0;
  font-weight: 400;
  font-size: .85rem;
  color: #94a3b8;
}
.main .app-container .sub-app-header .app-page-icon,
.main .sub-app-header .app-page-icon{
  width: 50px;
  height: 50px;
  color: #0d6efd;
}
.main .app-container .sub-app-header .app-page-icon i,
.main .sub-app-header .app-page-icon i{
  font-size: 35px;
}

/* Cards */
.main .card{
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-sm);
  overflow: hidden;
  background: rgba(255,255,255,.92);
}

/* Card headers (widget headers)
   Use the same color as the sidebar, but do NOT override headers that already have a Bootstrap bg-* class. */
.main .card > .card-header{
  border-bottom: 1px solid var(--app-border);
}
.main .card > .card-header:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark):not(.bg-light):not(.text-bg-primary):not(.text-bg-success):not(.text-bg-info):not(.text-bg-warning):not(.text-bg-danger):not(.text-bg-dark):not(.text-bg-light){
  background: #0f172a; /* same as sidebar */
  color: #e2e8f0;      /* slate-200 */
  border-bottom-color: rgba(255,255,255,.08);
}
.main .card > .card-header:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark):not(.bg-light):not(.text-bg-primary):not(.text-bg-success):not(.text-bg-info):not(.text-bg-warning):not(.text-bg-danger):not(.text-bg-dark):not(.text-bg-light) a{
  color: inherit;
}
.main .card > .card-header:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark):not(.bg-light):not(.text-bg-primary):not(.text-bg-success):not(.text-bg-info):not(.text-bg-warning):not(.text-bg-danger):not(.text-bg-dark):not(.text-bg-light) .btn{
  color: inherit;
  border-color: rgba(255,255,255,.25);
}
.main .card > .card-header:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark):not(.bg-light):not(.text-bg-primary):not(.text-bg-success):not(.text-bg-info):not(.text-bg-warning):not(.text-bg-danger):not(.text-bg-dark):not(.text-bg-light) .btn:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.35);
}

.main .card-header.fw-bold,
.main .card-header .fw-bold{
  letter-spacing: .2px;
}

/* (intentionally left blank) */

/* Stat cards accent */
.main .ui-stat-card{
  position: relative;
}
.main .ui-stat-card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, rgba(13,110,253,.9), rgba(25,135,84,.75));
  opacity: .55;
}

/* Tables */
.main .table{
  --bs-table-bg: transparent;
}

.main .table thead th{
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
  border-bottom-color: var(--app-border-strong);
}

.main .table tbody tr > *{
  border-color: var(--app-border);
}

.main .table tbody tr:hover{
  background: rgba(2, 6, 23, .02);
}

/* Bulk action bar */
.main .bulk-actions{
  background: rgba(248,250,252,.85);
  border-bottom: 1px solid var(--app-border);
  backdrop-filter: blur(6px);
}

/* Forms */
.main .form-control,
.main .form-select{
  border-radius: var(--app-radius-sm);
  border-color: var(--app-border-strong);
}

.main .form-control:focus,
.main .form-select:focus{
  border-color: rgba(13,110,253,.45);
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.14);
}

.main .form-label{
  color: #334155;
}

/* Buttons (scoped to main to avoid sidebar changes) */
.main .btn{
  border-radius: 12px;
}

.main .btn.btn-sm{
  border-radius: 10px;
}

.main .btn-primary{
  box-shadow: 0 10px 22px rgba(13,110,253,.18);
}

/* Badges & alerts */
.main .badge{
  border-radius: 999px;
}

.main .alert{
  border-radius: var(--app-radius);
  border-color: var(--app-border);
}

/* Tabs (only in main content area; sidebar uses nav-pills) */
.main .nav-tabs{
  border-bottom-color: var(--app-border);
}

.main .nav-tabs .nav-link{
  border-radius: 12px 12px 0 0;
  color: #475569;
}

.main .nav-tabs .nav-link.active{
  color: #0f172a;
  border-color: var(--app-border) var(--app-border) transparent;
  background: rgba(255,255,255,.92);
}

/* Pagination */
.main .pagination .page-link{
  border-radius: 12px;
  border-color: var(--app-border);
}

/* Small helpers */
.main .text-muted{
  color: #64748b !important;
}