/* Techlead Tasks - final visual polish */

:root{
  --nav:#07192b;
  --nav2:#04111f;
  --bg:#eef4fb;
  --card:#ffffff;
  --text:#0f1f35;
  --muted:#64748b;
  --line:#d8e3ef;
  --blue:#2563eb;
  --green:#16a34a;
  --red:#e11d48;
  --orange:#f59e0b;
  --radius:18px;
  --shadow:0 14px 34px rgba(15,35,60,.10);
}

html{
  font-size:13px !important;
}

body{
  background:#eef4fb !important;
  color:var(--text) !important;
  overflow:hidden !important;
}

/* App shell */
body.tl-final-polish{
  min-height:100vh !important;
}

body.tl-final-polish > div:first-child,
body.tl-final-polish .app,
body.tl-final-polish .portal,
body.tl-final-polish .dashboard-page,
body.tl-final-polish .shell{
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  max-width:none !important;
  margin:0 !important;
  display:grid !important;
  grid-template-columns:232px minmax(0,1fr) !important;
  overflow:hidden !important;
  background:#eef4fb !important;
}

/* Sidebar */
body.tl-final-polish aside,
body.tl-final-polish .sidebar,
body.tl-final-polish .side{
  width:232px !important;
  min-width:232px !important;
  max-width:232px !important;
  height:100vh !important;
  overflow:auto !important;
  background:linear-gradient(180deg,var(--nav),var(--nav2)) !important;
  border-right:1px solid rgba(255,255,255,.08) !important;
  border-radius:0 !important;
  padding:18px 14px !important;
  box-shadow:8px 0 24px rgba(4,17,31,.16) !important;
}

body.tl-final-polish aside::-webkit-scrollbar{
  width:0;
}

body.tl-final-polish aside .brand,
body.tl-final-polish .sidebar .brand{
  padding-bottom:16px !important;
  margin-bottom:16px !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}

body.tl-final-polish aside a,
body.tl-final-polish .sidebar a,
body.tl-final-polish .tl-home-link{
  min-height:38px !important;
  padding:9px 11px !important;
  border-radius:12px !important;
  font-size:13px !important;
  font-weight:850 !important;
}

body.tl-final-polish aside h5,
body.tl-final-polish .sidebar h5{
  margin:18px 4px 8px !important;
  font-size:10px !important;
  letter-spacing:.18em !important;
  color:#8cb8ea !important;
}

body.tl-final-polish aside .active,
body.tl-final-polish .sidebar .active{
  background:linear-gradient(135deg,#347df6,#1d5ed8) !important;
}

body.tl-final-polish aside .user,
body.tl-final-polish aside [class*="user"],
body.tl-final-polish .sidebar .user,
body.tl-final-polish .sidebar [class*="user"]{
  max-width:100% !important;
}

/* Main */
body.tl-final-polish main,
body.tl-final-polish .main,
body.tl-final-polish .content,
body.tl-final-polish .dashboard-content{
  width:100% !important;
  height:100vh !important;
  max-width:none !important;
  min-width:0 !important;
  overflow:auto !important;
  padding:18px 22px 24px !important;
  background:
    radial-gradient(circle at 12% 0,rgba(37,99,235,.08),transparent 30%),
    #eef4fb !important;
}

/* Header */
body.tl-final-polish .topbar,
body.tl-final-polish .header,
body.tl-final-polish .app-header,
body.tl-final-polish .page-header{
  position:sticky !important;
  top:0 !important;
  z-index:20 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 0 14px !important;
  padding:10px 14px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.90) !important;
  backdrop-filter:blur(16px) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 8px 24px rgba(15,35,60,.08) !important;
}

body.tl-final-polish h1{
  font-size:26px !important;
  line-height:1.05 !important;
  letter-spacing:-.04em !important;
  margin:0 !important;
}

body.tl-final-polish h2{
  font-size:18px !important;
  margin:0 0 5px !important;
}

body.tl-final-polish p,
body.tl-final-polish .subtitle{
  font-size:12.5px !important;
}

/* Breadcrumb */
body.tl-final-polish .tl-breadcrumb{
  margin:0 0 8px !important;
  font-size:12px !important;
}

/* KPI cards */
body.tl-final-polish .stats,
body.tl-final-polish .kpis,
body.tl-final-polish .cards,
body.tl-final-polish .metrics{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:0 0 14px !important;
}

body.tl-final-polish .stats > *,
body.tl-final-polish .kpis > *,
body.tl-final-polish .cards > *,
body.tl-final-polish .metrics > *{
  min-height:104px !important;
  padding:18px !important;
  border-radius:18px !important;
  box-shadow:var(--shadow) !important;
}

body.tl-final-polish .stat-icon,
body.tl-final-polish .metric-icon,
body.tl-final-polish .icon{
  width:38px !important;
  height:38px !important;
  border-radius:12px !important;
}

/* Main grid */
body.tl-final-polish .dashboard-grid,
body.tl-final-polish .layout,
body.tl-final-polish .grid{
  display:grid !important;
  grid-template-columns:360px minmax(0,1fr) !important;
  gap:14px !important;
  align-items:start !important;
  width:100% !important;
}

/* Cards */
body.tl-final-polish .card,
body.tl-final-polish .panel,
body.tl-final-polish .box,
body.tl-final-polish .module,
body.tl-final-polish .widget,
body.tl-final-polish form{
  border-radius:18px !important;
  background:#fff !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow) !important;
}

/* Form */
body.tl-final-polish form{
  padding:18px !important;
}

body.tl-final-polish label{
  margin:12px 0 6px !important;
  font-size:10px !important;
  letter-spacing:.13em !important;
  color:#334963 !important;
}

body.tl-final-polish input,
body.tl-final-polish textarea,
body.tl-final-polish select{
  border-radius:13px !important;
  padding:10px 12px !important;
  font-size:12.5px !important;
  border:1px solid #cbd8e7 !important;
}

body.tl-final-polish textarea{
  min-height:82px !important;
}

body.tl-final-polish input[type="datetime-local"]{
  min-height:40px !important;
}

body.tl-final-polish form button,
body.tl-final-polish form .btn{
  width:100% !important;
  min-height:40px !important;
  border-radius:13px !important;
}

/* Table panel */
body.tl-final-polish table{
  width:100% !important;
  min-width:900px !important;
  border-radius:16px !important;
}

body.tl-final-polish thead th{
  padding:12px 13px !important;
  font-size:10px !important;
}

body.tl-final-polish tbody td{
  padding:11px 13px !important;
  font-size:12.5px !important;
  line-height:1.25 !important;
}

body.tl-final-polish tbody td:first-child{
  max-width:360px !important;
}

body.tl-final-polish tbody td:first-child strong,
body.tl-final-polish tbody td:first-child b{
  font-size:13.5px !important;
}

/* Actions inline */
body.tl-final-polish td:last-child{
  display:table-cell !important;
  min-width:150px !important;
  white-space:nowrap !important;
}

body.tl-final-polish td:last-child form{
  display:inline !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

body.tl-final-polish td:last-child button,
body.tl-final-polish td:last-child a{
  width:auto !important;
  min-width:68px !important;
  min-height:32px !important;
  padding:7px 10px !important;
  margin:0 4px 0 0 !important;
  border-radius:10px !important;
  font-size:11.5px !important;
  box-shadow:none !important;
}

/* Buttons general */
body.tl-final-polish button,
body.tl-final-polish .btn,
body.tl-final-polish a.btn{
  min-height:38px !important;
  padding:9px 13px !important;
  border-radius:12px !important;
  font-size:12.5px !important;
}

/* Search */
body.tl-final-polish #tlTaskSearch{
  max-width:340px !important;
  margin-bottom:0 !important;
}

/* Make logout box cleaner */
body.tl-final-polish aside [href*="logout"],
body.tl-final-polish aside button[name*="logout"],
body.tl-final-polish aside form button{
  width:100% !important;
  box-shadow:none !important;
}

/* Fix weird white logout card when present */
body.tl-final-polish aside form,
body.tl-final-polish .sidebar form{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
  padding:10px !important;
  border-radius:14px !important;
}

/* Hide unnecessary huge blanks */
body.tl-final-polish .empty-space,
body.tl-final-polish .spacer{
  display:none !important;
}

@media(max-width:1200px){
  body.tl-final-polish > div:first-child,
  body.tl-final-polish .app,
  body.tl-final-polish .portal,
  body.tl-final-polish .dashboard-page,
  body.tl-final-polish .shell{
    grid-template-columns:1fr !important;
  }

  body.tl-final-polish aside,
  body.tl-final-polish .sidebar{
    display:none !important;
  }

  body.tl-final-polish .dashboard-grid,
  body.tl-final-polish .layout,
  body.tl-final-polish .grid{
    grid-template-columns:1fr !important;
  }

  body.tl-final-polish .stats,
  body.tl-final-polish .kpis,
  body.tl-final-polish .cards,
  body.tl-final-polish .metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:720px){
  body.tl-final-polish .stats,
  body.tl-final-polish .kpis,
  body.tl-final-polish .cards,
  body.tl-final-polish .metrics{
    grid-template-columns:1fr !important;
  }
}