/* MTT (maktabgacha ta'lim) uchun yumshoq, zamonaviy tema.
   Bootstrap 5 ustiga qo'shimcha stil. */

:root{
  --app-bg: #f6f8ff;
  --app-surface: #ffffff;
  --app-ink: #0f172a;
  --app-muted: #64748b;

  /* MTTga mos ranglar: sokin teal + iliq sariq aksent */
  --app-primary: #0ea5a4;
  --app-primary-700: #0f766e;
  --app-accent: #f59e0b;
  --app-danger: #ef4444;

  --app-border: rgba(15, 23, 42, 0.10);
  --app-shadow: 0 12px 30px rgba(2, 6, 23, 0.08);

  /* Bootstrap CSS variables override */
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-ink);
  --bs-primary: var(--app-primary);
  --bs-link-color: var(--app-primary-700);
  --bs-link-hover-color: var(--app-primary);
}

body{
  background:
    radial-gradient(900px 450px at 10% -10%, rgba(14,165,164,.16), transparent 60%),
    radial-gradient(700px 420px at 90% 0%, rgba(245,158,11,.14), transparent 55%),
    linear-gradient(180deg, #f7fbff 0%, #f6f8ff 40%, #f6f7fb 100%);
}

/* Layout */
.app-main{
  min-height: calc(100vh - 72px);
}

/* Navbar */
.app-navbar{
  background: rgba(15, 23, 42, 0.92) !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.app-navbar .navbar-brand{
  letter-spacing: 0.2px;
}

.app-navbar .dropdown-menu{
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  box-shadow: 0 18px 30px rgba(2,6,23,.16);
  padding: 10px;
}

.app-navbar .dropdown-item{
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 600;
}

.app-navbar .dropdown-item.active,
.app-navbar .dropdown-item:active{
  background: rgba(14,165,164,0.14);
  color: #0f172a;
}

.app-brand-mark{
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, rgba(14,165,164,0.95) 0%, rgba(245,158,11,0.92) 140%);
  box-shadow: 0 10px 18px rgba(2,6,23,.18);
}

.app-navbar .nav-link{
  color: rgba(255,255,255,.78) !important;
  border-radius: 999px;
  padding: .4rem .75rem;
  transition: background-color .15s ease, color .15s ease;
}

.app-navbar .nav-link:hover{
  color: #fff !important;
  background: rgba(255,255,255,.08);
}

.app-navbar .nav-link.active{
  color: #fff !important;
  background: rgba(14,165,164,.22);
  box-shadow: inset 0 0 0 1px rgba(14,165,164,.25);
}

/* Cards */
.card{
  border-radius: 18px;
}

.app-card{
  border: 1px solid var(--app-border);
  box-shadow: var(--app-shadow);
}

/* Media cards (portfolio) */
.app-media-card{
  overflow: hidden;
}

.app-media-card .card-img-top{
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.app-media{
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 10px 18px rgba(2,6,23,.06);
}

.stat-card{
  position: relative;
  overflow: hidden;
}

.stat-card::after{
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle at 30% 30%, rgba(14,165,164,.25), transparent 60%);
  pointer-events: none;
}

.stat-card--accent::after{
  background: radial-gradient(circle at 30% 30%, rgba(245,158,11,.25), transparent 60%);
}

/* Buttons */
.btn{
  border-radius: 14px;
}

.btn-primary{
  border: none;
  background: linear-gradient(135deg, var(--app-primary) 0%, #22c55e 140%);
  box-shadow: 0 10px 18px rgba(14,165,164,.20);
}

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

.btn-outline-primary{
  border-color: rgba(14,165,164,.55);
  color: var(--app-primary-700);
}

.btn-outline-primary:hover{
  background: rgba(14,165,164,.10);
  border-color: rgba(14,165,164,.65);
  color: var(--app-primary-700);
}

/* Forms */
.form-control,
.form-select{
  border-radius: 14px;
  border-color: rgba(15, 23, 42, 0.14);
}

.form-control:focus,
.form-select:focus{
  border-color: rgba(14,165,164,.60);
  box-shadow: 0 0 0 .25rem rgba(14,165,164,.16);
}

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

.table thead.table-light{
  --bs-table-bg: rgba(15, 23, 42, 0.04);
}

.table td,
.table th{
  padding-top: .85rem;
  padding-bottom: .85rem;
}

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

/* Progress (Hisobot) */
.progress{
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
}

.progress-bar{
  border-radius: 999px;
}

.progress-bar.bar{
  background: linear-gradient(135deg, rgba(14,165,164,1) 0%, rgba(34,197,94,1) 120%);
}

.progress-bar.bg-secondary{
  background: rgba(100,116,139,.85) !important;
}

/* List-group */
.list-group-item{
  border-radius: 12px;
}

/* Page header */
.page-header{
  background: rgba(255,255,255,.86);
  border: 1px solid var(--app-border);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  padding: 18px 18px;
}

.page-subtitle{
  color: var(--app-muted);
}

/* Alerts */
.alert{
  border-radius: 16px;
  border-color: rgba(15, 23, 42, 0.10);
}

/* Footer */
.app-footer{
  color: rgba(255,255,255,.70);
  font-size: .9rem;
}

  /* --- Ebook (Markdown) typography --- */
  .prose h1,.prose h2,.prose h3,.prose h4{
    font-weight:700;
    line-height:1.25;
    margin-top:1.25rem;
    margin-bottom:.6rem;
  }
  .prose h1{font-size:1.5rem;}
  .prose h2{font-size:1.25rem;}
  .prose h3{font-size:1.1rem;}
  .prose p{margin-bottom:.75rem;}
  .prose ul,.prose ol{padding-left:1.25rem; margin-bottom:.75rem;}
  .prose li{margin-bottom:.25rem;}
  .prose blockquote{
    border-left:4px solid rgba(13,110,253,.35);
    padding-left:1rem;
    color:rgba(33,37,41,.75);
    margin:.75rem 0;
  }
  .prose pre{
    background:#0b1220;
    color:#e6eefc;
    padding:.75rem 1rem;
    border-radius:.75rem;
    overflow:auto;
  }
  .prose code{
    background:rgba(13,110,253,.08);
    padding:.1rem .25rem;
    border-radius:.35rem;
  }
  .prose table{
    width:100%;
    border-collapse:collapse;
    margin:1rem 0;
  }
  .prose th,.prose td{
    border:1px solid rgba(33,37,41,.15);
    padding:.5rem .6rem;
    vertical-align:top;
  }
  .prose thead th{background:rgba(13,110,253,.08);}

  .prose a{color: inherit; text-decoration: underline; text-decoration-color: rgba(13,110,253,.35);}
  .prose a:hover{color: var(--bs-primary); text-decoration-color: rgba(13,110,253,.7);}

  /* Keep anchored headings visible below navbar */
  .prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{
    scroll-margin-top: 90px;
  }

  @media print{
    .app-navbar{display:none !important;}
    .btn{display:none !important;}
    .app-main{padding-top:0 !important;}
    .card{border:0 !important; box-shadow:none !important;}
  }

/* Small polish */
a{
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}