/*
 * Tentrek Intranet OS - Apple Enterprise Luxury Hybrid
 * Power BI / Tableau inspired analytics skin
 */
:root {
  --tkl-bg: #000000;
  --tkl-bg-soft: #050507;
  --tkl-surface: rgba(25, 25, 30, 0.6);
  --tkl-surface-strong: rgba(18, 18, 22, 0.82);
  --tkl-card: rgba(25, 25, 30, 0.6);
  --tkl-card-hover: rgba(38, 38, 46, 0.76);
  --tkl-border: rgba(255, 255, 255, 0.08);
  --tkl-border-strong: rgba(255, 255, 255, 0.16);
  --tkl-cyan: #00a9ff;
  --tkl-blue: #0071e3;
  --tkl-green: #34d399;
  --tkl-gold: #c8a96e;
  --tkl-purple: #8b5cf6;
  --tkl-red: #ef4444;
  --tkl-text: #ffffff;
  --tkl-muted: #86868b;
  --tkl-dark-text: #1d1d1f;
  --tkl-radius-xl: 32px;
  --tkl-radius-lg: 28px;
  --tkl-radius-md: 20px;
  --tkl-shadow: 0 30px 60px rgba(0, 0, 0, 0.50);
  --tkl-shadow-deep: 0 44px 120px rgba(0, 0, 0, 0.72);
  --tkl-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --font-display: 'Raleway', sans-serif;
  --font-ui: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
}

html,
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.tkl-os-container,
.tkl-os-container *,
.tkl-security-gate,
.tkl-security-gate * {
  box-sizing: border-box;
}

.tkl-os-container {
  background:
    radial-gradient(circle at 14% 8%, rgba(0, 169, 255, 0.18) 0, rgba(0, 169, 255, 0.05) 24%, transparent 46%),
    radial-gradient(circle at 86% 18%, rgba(139, 92, 246, 0.16) 0, rgba(139, 92, 246, 0.04) 25%, transparent 47%),
    radial-gradient(circle at 70% 96%, rgba(200, 169, 110, 0.10) 0, transparent 42%),
    linear-gradient(180deg, #000 0%, #050507 46%, #000 100%) !important;
  color: var(--tkl-text) !important;
  font-family: var(--font-body) !important;
  min-height: 100vh !important;
  overflow: hidden visible !important;
  position: relative !important;
  isolation: isolate;
}

.tkl-os-container::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
  mask-image: radial-gradient(circle at top, rgba(0,0,0,0.72), transparent 72%) !important;
}

.tkl-os-container::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 20%, transparent 80%, rgba(255,255,255,0.02));
}

.tkl-os-container > * {
  position: relative;
  z-index: 1;
}

/* Global navigation */
.tkl-topbar {
  background: rgba(15, 15, 18, 0.62) !important;
  border: 1px solid var(--tkl-border) !important;
  border-radius: 999px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(30px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
  transition: transform .4s var(--tkl-ease), border-color .4s var(--tkl-ease), background .4s var(--tkl-ease) !important;
}
.tkl-topbar:hover {
  transform: translateY(-2px);
  border-color: var(--tkl-border-strong) !important;
  background: rgba(20, 20, 25, .74) !important;
}
.tkl-nav-btn,
.tkl-user-name,
.tkl-user-role,
.tkl-topbar-greeting strong {
  font-family: var(--font-ui) !important;
}
.tkl-nav-btn {
  border-radius: 999px !important;
  padding: 9px 13px !important;
  margin-left: 6px !important;
}
.tkl-nav-btn:hover {
  background: rgba(0,169,255,.10) !important;
  color: #fff !important;
}
.tkl-user-pill {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.tkl-user-avatar {
  background: linear-gradient(135deg, var(--tkl-cyan), var(--tkl-blue)) !important;
  box-shadow: 0 0 28px rgba(0,169,255,.35) !important;
}

/* Typography */
.tkl-os-container h1,
.tkl-os-container h2,
.tkl-os-container .tkl-news-title,
.tkl-os-container .tkl-kpi-value,
.tkl-os-container .tkl-gate-title {
  font-family: var(--font-display) !important;
  letter-spacing: -0.045em !important;
}
.tkl-os-container h1 strong,
.tkl-os-container h2 strong,
.tkl-news-title strong {
  font-weight: 700 !important;
}
.tkl-os-container p,
.tkl-os-container li,
.tkl-os-container span,
.tkl-os-container input,
.tkl-os-container textarea,
.tkl-os-container select {
  font-family: var(--font-body) !important;
}

/* Enterprise cards */
.tkl-panel,
.tkl-kpi-card,
.tkl-ws-card,
.tkl-fm-wrapper,
.tkl-feed-card,
.tkl-card-item,
.tkl-link-item,
.tkl-mkt-btn,
.tkl-repeater-item,
.tkl-cpt-modal-box,
.tkl-modal-box,
.tkl-lightbox-shell,
.tkl-kb-hero,
.tkl-kb-card,
.tkl-kb-sidebar-card,
.tkl-kb-article,
.tkl-dir-card,
.tkl-com-card,
.tkl-vac-card,
.tkl-cal-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(0,169,255,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018)),
    var(--tkl-card) !important;
  border: 1px solid var(--tkl-border) !important;
  border-radius: var(--tkl-radius-xl) !important;
  box-shadow: var(--tkl-shadow) !important;
  backdrop-filter: blur(30px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
  transform-style: preserve-3d;
  transition:
    transform .4s var(--tkl-ease),
    box-shadow .4s var(--tkl-ease),
    border-color .4s var(--tkl-ease),
    background .4s var(--tkl-ease) !important;
}

.tkl-panel:hover,
.tkl-kpi-card:hover,
.tkl-ws-card:hover,
.tkl-feed-card:hover,
.tkl-card-item:hover,
.tkl-link-item:hover,
.tkl-mkt-btn:hover,
.tkl-fm-item:hover,
.tkl-kb-card:hover,
.tkl-dir-card:hover,
.tkl-com-card:hover,
.tkl-cal-card:hover {
  transform: translateY(-5px) translateZ(18px) !important;
  border-color: var(--tkl-border-strong) !important;
  background:
    radial-gradient(circle at 95% 0%, rgba(0,169,255,.18), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    var(--tkl-card-hover) !important;
  box-shadow: var(--tkl-shadow-deep) !important;
}

.tkl-panel h3,
.tkl-ws-card h3,
.tkl-kb-card h3,
.tkl-kb-sidebar-card h3 {
  font-family: var(--font-ui) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Power BI / Tableau inspired KPI and analytic views */
.tkl-kpi-grid,
.tkl-os-main-grid,
.tkl-feeds-grid,
.tkl-grid-2,
.tkl-grid-3,
.tkl-fm-grid,
.tkl-kb-grid,
.tkl-analytics-grid {
  perspective: 1200px;
}
.tkl-kpi-card {
  min-height: 190px !important;
  padding: 30px !important;
  overflow: hidden !important;
}
.tkl-kpi-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  height: 42px;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(0,169,255,.10), rgba(52,211,153,.10), rgba(139,92,246,.10)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, transparent 2px 18px);
  opacity: .48;
  transform: translateZ(-8px);
}
.tkl-kpi-title {
  font-family: var(--font-ui) !important;
  color: rgba(255,255,255,.62) !important;
  letter-spacing: .1em !important;
}
.tkl-kpi-value {
  font-size: clamp(38px, 4vw, 58px) !important;
  line-height: 1 !important;
}
.tkl-kpi-icon,
.tkl-mkt-icon,
.tkl-link-icon,
.tkl-fm-icon {
  transform: translateZ(28px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 40px rgba(0,0,0,.3) !important;
}

/* Dashboard hero */
.tkl-news-slider {
  border-radius: 38px !important;
  border: 1px solid var(--tkl-border) !important;
  box-shadow: var(--tkl-shadow-deep) !important;
  overflow: hidden !important;
  isolation: isolate;
}
.tkl-news-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 16%, rgba(0,169,255,.16), transparent 34%),
    linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.48) 42%, rgba(0,0,0,.16) 100%);
  z-index: 1;
}
.tkl-news-slide > div:not(.tkl-news-overlay) {
  position: relative;
  z-index: 3;
  max-width: 780px;
}
.tkl-news-tag,
.tkl-tag {
  font-family: var(--font-ui) !important;
  border-radius: 999px !important;
  letter-spacing: .08em !important;
}

/* Buttons */
.tkl-btn-submit,
.tkl-btn-add,
.tkl-panel-action,
.tkl-btn-info-kpi,
.tkl-fm-btn,
.tkl-action-btn,
button[class*="tkl"],
a[class*="tkl"][class*="btn"] {
  border-radius: 999px !important;
  font-family: var(--font-ui) !important;
  font-weight: 800 !important;
  transition: transform .4s var(--tkl-ease), box-shadow .4s var(--tkl-ease), background .4s var(--tkl-ease), color .4s var(--tkl-ease), border-color .4s var(--tkl-ease) !important;
}
.tkl-btn-submit,
.tkl-btn-cyan,
.tkl-fm-btn.primary,
.tkl-panel-action:hover {
  background: linear-gradient(135deg, var(--tkl-cyan), var(--tkl-blue)) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 16px 38px rgba(0,113,227,.28), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.tkl-btn-submit:hover,
.tkl-btn-add:hover,
.tkl-panel-action:hover,
.tkl-btn-info-kpi:hover,
.tkl-fm-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 46px rgba(0,169,255,.28) !important;
}
.tkl-btn-add,
.tkl-panel-action,
.tkl-fm-btn {
  background: rgba(255,255,255,.055) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* Forms */
.tkl-input,
.tkl-select,
.tkl-gate-input,
.tkl-os-container input[type="text"],
.tkl-os-container input[type="email"],
.tkl-os-container input[type="password"],
.tkl-os-container input[type="url"],
.tkl-os-container textarea,
.tkl-os-container select {
  background: rgba(0,0,0,.42) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  outline: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
  transition: border-color .3s var(--tkl-ease), box-shadow .3s var(--tkl-ease), background .3s var(--tkl-ease) !important;
}
.tkl-input:focus,
.tkl-select:focus,
.tkl-gate-input:focus,
.tkl-os-container input:focus,
.tkl-os-container textarea:focus,
.tkl-os-container select:focus {
  border-color: rgba(0,169,255,.70) !important;
  box-shadow: 0 0 0 4px rgba(0,169,255,.14), inset 0 1px 0 rgba(255,255,255,.08) !important;
  background: rgba(0,0,0,.60) !important;
}
.tkl-input-group label {
  font-family: var(--font-ui) !important;
  letter-spacing: .1em !important;
  color: rgba(255,255,255,.58) !important;
}

/* Workspace */
.tkl-ws-app {
  border-radius: 36px !important;
  background: rgba(8,8,10,.70) !important;
  border: 1px solid var(--tkl-border) !important;
  box-shadow: var(--tkl-shadow-deep) !important;
  backdrop-filter: blur(30px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(145%) !important;
}
.tkl-ws-sidebar {
  background: rgba(12,12,15,.72) !important;
  border-right: 1px solid var(--tkl-border) !important;
}
.tkl-ws-nav button {
  border-radius: 18px !important;
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
}
.tkl-ws-nav button.active,
.tkl-ws-nav button:hover {
  background: rgba(0,169,255,.12) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.tkl-ws-main {
  background:
    radial-gradient(circle at top right, rgba(0,169,255,.11), transparent 42%),
    radial-gradient(circle at bottom left, rgba(139,92,246,.08), transparent 46%) !important;
}

/* File manager and resource hub */
.tkl-fm-wrapper,
.tkl-fm-item {
  border-radius: 30px !important;
}
.tkl-fm-item {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.30) !important;
}
.tkl-fm-item-title {
  font-family: var(--font-ui) !important;
  font-weight: 800 !important;
}
.tkl-lightbox,
.tkl-modal-overlay,
.tkl-cpt-modal {
  background: rgba(0,0,0,.82) !important;
  backdrop-filter: blur(26px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(145%) !important;
}

/* Knowledge base - premium BI/library style */
.tkl-kb-wrap,
.tkl-bol-wrap,
.tkl-page-wrap {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 44px 4% 90px !important;
}
.tkl-kb-hero,
.tkl-page-hero {
  padding: clamp(34px, 6vw, 72px) !important;
  margin-bottom: 30px !important;
  overflow: hidden !important;
  position: relative !important;
}
.tkl-kb-hero::after,
.tkl-page-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,169,255,.24), transparent 64%);
  filter: blur(10px);
  pointer-events: none;
}
.tkl-kb-hero h1,
.tkl-page-hero h1 {
  font-size: clamp(40px, 6vw, 72px) !important;
  line-height: .96 !important;
  margin: 0 0 18px !important;
}
.tkl-kb-hero p,
.tkl-page-hero p {
  color: var(--tkl-muted) !important;
  font-size: 17px !important;
  line-height: 1.72 !important;
  max-width: 760px !important;
}
.tkl-kb-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 24px !important;
  align-items: start !important;
}
.tkl-kb-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
}
.tkl-kb-card {
  min-height: 240px !important;
  padding: 26px !important;
  text-decoration: none !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.tkl-kb-card .tkl-kb-icon,
.tkl-kb-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
  background: rgba(0,169,255,.10) !important;
  color: var(--tkl-cyan) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 23px !important;
  margin-bottom: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.tkl-kb-card h3 {
  font-size: 18px !important;
  margin: 0 0 10px !important;
  color: #fff !important;
}
.tkl-kb-card p {
  color: var(--tkl-muted) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.tkl-kb-sidebar-card {
  padding: 24px !important;
  position: sticky !important;
  top: 24px !important;
}
.tkl-kb-search {
  position: relative !important;
  margin: 0 0 20px !important;
}
.tkl-kb-search input {
  width: 100% !important;
  padding: 17px 18px 17px 48px !important;
  border-radius: 999px !important;
}
.tkl-kb-search i {
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tkl-cyan);
}
.tkl-kb-pill,
.tkl-kb-category,
.tkl-kb-meta span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-family: var(--font-ui) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: rgba(255,255,255,.78) !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.tkl-kb-article {
  padding: clamp(28px, 5vw, 58px) !important;
  line-height: 1.78 !important;
}
.tkl-kb-article h1,
.tkl-kb-article h2,
.tkl-kb-article h3 {
  color: #fff !important;
}
.tkl-kb-article p,
.tkl-kb-article li {
  color: rgba(255,255,255,.76) !important;
  font-size: 16px !important;
}

/* Lists and blog-like pages */
.tkl-com-card,
.tkl-dir-card,
.tkl-cal-card,
.tkl-vac-card {
  padding: 26px !important;
  overflow: hidden !important;
}
.tkl-card-item,
.tkl-link-item,
.tkl-mkt-btn {
  border-radius: 22px !important;
}
.tkl-c-date {
  background: rgba(0,169,255,.10) !important;
  border-color: rgba(0,169,255,.18) !important;
  border-radius: 18px !important;
}

/* Login gate */
.tkl-security-gate {
  background:
    radial-gradient(circle at top right, rgba(0,169,255,.22), transparent 55%),
    radial-gradient(circle at bottom left, rgba(139,92,246,.18), transparent 60%),
    #000 !important;
}
.tkl-gate-box {
  background: rgba(25,25,30,.62) !important;
  border: 1px solid var(--tkl-border) !important;
  border-radius: 36px !important;
  box-shadow: var(--tkl-shadow-deep) !important;
}

@media (max-width: 1100px) {
  .tkl-kb-grid {
    grid-template-columns: 1fr !important;
  }
  .tkl-kb-sidebar-card {
    position: relative !important;
    top: auto !important;
  }
}
@media (max-width: 768px) {
  .tkl-os-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .tkl-topbar {
    border-radius: 28px !important;
  }
  .tkl-panel,
  .tkl-kpi-card,
  .tkl-ws-card,
  .tkl-fm-wrapper,
  .tkl-kb-card,
  .tkl-kb-hero,
  .tkl-page-hero {
    border-radius: 24px !important;
  }
  .tkl-kb-wrap,
  .tkl-bol-wrap,
  .tkl-page-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}