/* Bamboo Optic shared interface system */
:root{
  --ui-ink:#083f4b;
  --ui-ink-2:#0f5563;
  --ui-paper:#ffffff;
  --ui-card:#ffffff;
  --ui-line:#e5e7eb;
  --ui-indigo:#0f5563;
  --ui-indigo-2:#147080;
  --ui-indigo-soft:#f8fafc;
  --ui-coral:#d1a95b;
  --ui-coral-soft:#fbefd2;
  --ui-green:#1f7a3a;
  --ui-green-soft:#f8fafc;
  --ui-amber:#d1a95b;
  --ui-muted:#60726f;
  --ui-muted-2:#889691;
  --ui-radius:16px;
  --ui-radius-sm:10px;
  --ui-shadow:0 1px 2px rgba(8,63,75,.04),0 8px 24px -12px rgba(8,63,75,.14);
  --ui-shadow-hover:0 1px 2px rgba(8,63,75,.04),0 18px 40px -18px rgba(15,85,99,.28);
  --sidebar-width:248px;
  --sidebar-bg:var(--ui-ink);
  --accent:var(--ui-indigo);
}

html{scroll-behavior:smooth}
body.optik-ui{
  margin:0;
  background:var(--ui-paper)!important;
  background-image:none!important;
  color:var(--ui-ink);
  font-family:"Inter",system-ui,sans-serif!important;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body.optik-ui ::selection{background:var(--ui-coral);color:#fff}
body.optik-ui h1,body.optik-ui h2,body.optik-ui h3,body.optik-ui h4,body.optik-ui h5,
body.optik-ui .h1,body.optik-ui .h2,body.optik-ui .h3,body.optik-ui .h4,body.optik-ui .h5{
  color:var(--ui-ink);
  font-family:"Sora",sans-serif;
  letter-spacing:-.025em;
}
body.optik-ui a{color:var(--ui-indigo)}

/* Application rail */
body.optik-ui #sidebar{
  width:var(--sidebar-width);
  background:var(--ui-ink)!important;
  color:#fff;
  padding:18px 14px;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
}
body.optik-ui .sidebar-brand{
  gap:11px;
  padding:4px 7px 18px;
  margin-bottom:12px;
  color:#fff!important;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-family:"Sora",sans-serif;
  line-height:1.15;
}
body.optik-ui .sidebar-brand-mark{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(135deg,var(--ui-indigo-2),var(--ui-coral));
  box-shadow:0 9px 22px -10px rgba(15,85,99,.8);
}
body.optik-ui .sidebar-brand-mark i{font-size:16px}
body.optik-ui .sidebar-brand strong{display:block;font-size:15px;font-weight:800;color:#fff}
body.optik-ui .sidebar-brand small{display:block;margin-top:3px;color:#8f94bd;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
body.optik-ui .sidebar-ribbon1{
  margin:0 2px 8px!important;padding:12px!important;border-radius:13px;
  background:#1f2138!important;border:1px solid #2e3052!important;text-align:left;
}
body.optik-ui .sidebar-ribbon1 a{color:#d9dbef!important;font-size:13px;text-decoration:none}
body.optik-ui .sidebar-ribbon1 .btn{margin-top:8px}
body.optik-ui .sidebar-section-label{
  padding:12px 10px 6px;color:#7378a2;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
body.optik-ui #sidebar .nav-link{
  margin:2px 0;padding:10px 12px;border:0;border-radius:11px;
  color:#c8cbe6!important;background:transparent!important;
  font-size:13.5px;font-weight:500;gap:11px;box-shadow:none!important;transform:none!important;
}
body.optik-ui #sidebar .nav-link i{width:18px;font-size:16px;color:#9fa3c9;filter:none!important;transform:none!important}
body.optik-ui #sidebar .nav-link:hover{background:#22243f!important;color:#fff!important}
body.optik-ui #sidebar .nav-link.active{
  color:#fff!important;background:linear-gradient(135deg,var(--ui-indigo),var(--ui-indigo-2))!important;
  box-shadow:0 8px 20px -8px rgba(15,85,99,.72)!important;
}
body.optik-ui #sidebar .nav-link.active i{color:#fff}
body.optik-ui .search-ribbon{border-color:#2e3052!important}
body.optik-ui #sidebar .input-group .form-control{
  color:#fff!important;background:#1f2138!important;border-color:#2e3052!important;border-radius:10px 0 0 10px;
}
body.optik-ui #sidebar .input-group .form-control::placeholder{color:#777ca5}
body.optik-ui .sidebar-search-btn{background:var(--ui-indigo)!important}
body.optik-ui #main-wrapper{margin-left:var(--sidebar-width);background:var(--ui-paper)}
body.optik-ui #main-wrapper.expanded{margin-left:0}
body.optik-ui .toggle-btn{
  top:13px;width:38px;height:38px;padding:0;border-radius:10px;background:#fff;color:var(--ui-ink);
  border:1px solid var(--ui-line);box-shadow:var(--ui-shadow);
}
@media(min-width:992px){body.optik-ui #sidebar:not(.collapsed)~#main-wrapper .toggle-btn{left:calc(var(--sidebar-width) + 14px)}}

/* Compact top utility strip */
body.optik-ui .top-strip{
  min-height:64px;background:rgba(255,255,255,.9)!important;border-color:var(--ui-line)!important;
  backdrop-filter:none!important;padding-left:54px;
}
body.optik-ui .top-strip .inner{padding:10px 18px!important;gap:8px!important}
body.optik-ui .top-strip .nav-btn{
  min-height:36px!important;padding:8px 12px!important;border:1px solid var(--ui-line)!important;
  border-radius:10px!important;background:#fff!important;color:var(--ui-ink-2)!important;
  box-shadow:none!important;font-size:12.5px!important;font-weight:600!important;transform:none!important;
}
body.optik-ui .top-strip .nav-btn:hover{border-color:var(--ui-indigo)!important;color:var(--ui-indigo)!important;background:var(--ui-indigo-soft)!important}
body.optik-ui .top-strip .social{margin-left:auto}
body.optik-ui .top-strip .social .nav-btn{background:var(--ui-paper)!important;color:var(--ui-muted)!important}

/* Shared page rhythm */
body.optik-ui main>[class*="container"],body.optik-ui main>.content-wrap{max-width:1480px}
body.optik-ui main>.container:not(.sticky-messages){padding-top:26px;padding-bottom:26px}
body.optik-ui footer{color:var(--ui-muted-2)!important}
body.optik-ui footer a{color:var(--ui-indigo)!important}

/* Replace photographic/glass heroes with compact editorial headers */
body.optik-ui .hero-section,
body.optik-ui .account-hero{
  height:184px!important;margin:24px 28px 18px!important;padding:28px 32px!important;
  border-radius:var(--ui-radius)!important;overflow:hidden;background:linear-gradient(120deg,var(--ui-ink),#0f5563 68%,#d1a95b)!important;
  box-shadow:var(--ui-shadow)!important;
}
body.optik-ui .hero-section:after,
body.optik-ui .account-hero:after{
  content:"";position:absolute;right:-50px;top:-55px;width:260px;height:260px;z-index:1;opacity:.72;
  background:radial-gradient(circle 7px at 35px 35px,rgba(255,255,255,.18) 98%,transparent),radial-gradient(circle 7px at 78px 35px,rgba(209,169,91,.65) 98%,transparent),radial-gradient(circle 7px at 121px 35px,rgba(255,255,255,.18) 98%,transparent),radial-gradient(circle 7px at 35px 78px,rgba(255,255,255,.18) 98%,transparent),radial-gradient(circle 7px at 78px 78px,rgba(255,255,255,.18) 98%,transparent),radial-gradient(circle 7px at 121px 78px,rgba(209,169,91,.65) 98%,transparent),radial-gradient(circle 7px at 35px 121px,rgba(209,169,91,.65) 98%,transparent),radial-gradient(circle 7px at 78px 121px,rgba(255,255,255,.18) 98%,transparent),radial-gradient(circle 7px at 121px 121px,rgba(255,255,255,.18) 98%,transparent);
}
body.optik-ui .hero-banner-img{opacity:.08!important;filter:grayscale(1);border-radius:inherit!important}
body.optik-ui .hero-overlay{background:linear-gradient(90deg,rgba(8,63,75,.95),rgba(8,63,75,.55))!important;border-radius:inherit!important}
body.optik-ui .hero-content{gap:16px!important}
body.optik-ui .hero-logo{width:74px!important;height:74px!important;border-radius:14px!important;padding:7px!important;box-shadow:none!important}
body.optik-ui .hero-text h1{color:#fff!important;font-size:clamp(1.55rem,3vw,2.2rem)!important;text-shadow:none!important}
body.optik-ui .hero-text p{font-size:13.5px;color:#c8cbe6!important}
body.optik-ui .account-hero-bg{opacity:.08!important;filter:grayscale(1);border-radius:inherit!important}
body.optik-ui .account-hero-content{gap:16px!important}
body.optik-ui .account-hero-logo{width:74px!important;height:74px!important;border-radius:14px!important;padding:7px!important;box-shadow:none!important}
body.optik-ui .account-hero-title{color:#fff!important;font-size:clamp(1.55rem,3vw,2.2rem)!important;text-shadow:none!important}
body.optik-ui .account-hero-sub{font-size:13.5px;color:#c8cbe6!important}
body.optik-ui .courses-hero{
  position:relative;overflow:hidden;background:linear-gradient(120deg,var(--ui-ink),#0f5563 68%,#d1a95b)!important;
  border:1px solid #2e3052!important;border-radius:var(--ui-radius)!important;box-shadow:var(--ui-shadow)!important;
}
body.optik-ui .courses-hero:after{
  content:"";position:absolute;right:36px;top:24px;width:110px;height:110px;opacity:.7;
  background:radial-gradient(circle 6px at 15px 15px,rgba(255,255,255,.18) 98%,transparent),radial-gradient(circle 6px at 52px 15px,rgba(209,169,91,.7) 98%,transparent),radial-gradient(circle 6px at 89px 15px,rgba(255,255,255,.18) 98%,transparent),radial-gradient(circle 6px at 15px 52px,rgba(209,169,91,.7) 98%,transparent),radial-gradient(circle 6px at 52px 52px,rgba(255,255,255,.18) 98%,transparent),radial-gradient(circle 6px at 89px 52px,rgba(255,255,255,.18) 98%,transparent),radial-gradient(circle 6px at 15px 89px,rgba(255,255,255,.18) 98%,transparent),radial-gradient(circle 6px at 52px 89px,rgba(255,255,255,.18) 98%,transparent),radial-gradient(circle 6px at 89px 89px,rgba(209,169,91,.7) 98%,transparent);
}
body.optik-ui .courses-hero h1{color:#fff!important}
body.optik-ui .courses-hero p{color:#c8cbe6!important}

/* Card and grid language */
body.optik-ui .card,body.optik-ui .sidebar-card,body.optik-ui .ml-card,body.optik-ui .course-card,
body.optik-ui .student-filter-card,body.optik-ui .student-table-wrap,body.optik-ui .home-content-card,
body.optik-ui .content-card,body.optik-ui .quiz-card,body.optik-ui .modal-content{
  background:var(--ui-card)!important;border:1px solid var(--ui-line)!important;
  border-radius:var(--ui-radius)!important;box-shadow:var(--ui-shadow)!important;
  backdrop-filter:none!important;
}
body.optik-ui .card:hover,body.optik-ui .home-content-card:hover,body.optik-ui .content-card:hover{
  border-color:#d5d8ee!important;box-shadow:var(--ui-shadow-hover)!important;
}
body.optik-ui .card-header,body.optik-ui .card-footer{background:#fff;border-color:var(--ui-line)}
body.optik-ui .section-title{font-family:"Sora",sans-serif;color:var(--ui-ink)!important;border-color:var(--ui-line)!important;font-size:17px;font-weight:700!important}
body.optik-ui .text-muted{color:var(--ui-muted)!important}
body.optik-ui hr{border-color:var(--ui-line);opacity:1}

/* Page-owned tab layout/visual styling moved to static/css/page-tabs.css.
   bamboo-optic-system.css keeps product tokens and non-tab UI rules. */
body.optik-ui .tab-content{border:0!important;border-radius:0!important;background:transparent!important}

/* Buttons and controls */
body.optik-ui .btn{border-radius:10px;font-size:13px;font-weight:600;box-shadow:none;transition:transform .16s,filter .16s,border-color .16s}
body.optik-ui .btn:hover{transform:translateY(-1px)}
body.optik-ui .btn-primary,body.optik-ui .btn-success{background:var(--ui-indigo)!important;border-color:var(--ui-indigo)!important;color:#fff!important}
body.optik-ui .btn-danger{background:var(--ui-coral)!important;border-color:var(--ui-coral)!important}
body.optik-ui .btn-outline-primary{color:var(--ui-indigo)!important;border-color:#b8d6d3!important;background:#fff!important}
body.optik-ui .btn-outline-primary:hover{color:#fff!important;background:var(--ui-indigo)!important;border-color:var(--ui-indigo)!important}
body.optik-ui .btn-light,body.optik-ui .btn-outline-secondary{background:var(--ui-paper)!important;border-color:var(--ui-line)!important;color:var(--ui-ink-2)!important}
body.optik-ui .form-control,body.optik-ui .form-select,body.optik-ui .input-group-text{
  min-height:42px;border:1px solid var(--ui-line);border-radius:10px;background:#fff;color:var(--ui-ink);font-size:13.5px;
}
body.optik-ui .form-control:focus,body.optik-ui .form-select:focus{border-color:var(--ui-indigo);box-shadow:0 0 0 3px rgba(15,85,99,.14)}
body.optik-ui .form-label{color:var(--ui-ink-2);font-size:12px;font-weight:650}
body.optik-ui .form-check-input:checked{background-color:var(--ui-indigo);border-color:var(--ui-indigo)}

/* Tables, badges, alerts */
body.optik-ui .table{--bs-table-bg:transparent;--bs-table-border-color:var(--ui-line);color:var(--ui-ink-2);font-size:13px}
body.optik-ui .table thead th{background:var(--ui-paper)!important;color:var(--ui-muted);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
body.optik-ui .table>:not(caption)>*>*{padding:.8rem .9rem}
body.optik-ui .badge{font-weight:650;letter-spacing:.01em}
body.optik-ui .bg-primary,body.optik-ui .text-bg-primary{background:var(--ui-indigo)!important}
body.optik-ui .bg-success,body.optik-ui .text-bg-success{background:var(--ui-green)!important}
body.optik-ui .bg-danger,body.optik-ui .text-bg-danger{background:var(--ui-coral)!important}
body.optik-ui .alert{border:1px solid var(--ui-line);border-radius:12px;box-shadow:var(--ui-shadow)}
body.optik-ui .pagination{gap:5px}
body.optik-ui .page-link{border:1px solid var(--ui-line);border-radius:9px!important;color:var(--ui-indigo)}
body.optik-ui .page-item.active .page-link{background:var(--ui-indigo);border-color:var(--ui-indigo)}

/* Calendar and chat inherit the same calm surfaces. */
body.optik-ui .fc{background:#fff!important;border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important;box-shadow:none!important}
body.optik-ui .fc .fc-button{border-radius:9px!important;background:var(--ui-paper)!important;border-color:var(--ui-line)!important;color:var(--ui-ink-2)!important;box-shadow:none!important}
body.optik-ui .fc .fc-button-active{background:var(--ui-indigo)!important;color:#fff!important}
body.optik-ui .chat-grid{border-radius:var(--ui-radius)!important;overflow:hidden}
body.optik-ui .group-rail,body.optik-ui .member-rail{background:var(--ui-paper)!important}
body.optik-ui .message-row.mine .message-bubble{background:var(--ui-indigo)!important;border-color:var(--ui-indigo)!important}

/* Mobile keeps the product language without reproducing the desktop rail. */
@media(max-width:991px){
  body.optik-ui #main-wrapper{margin-left:0!important}
  body.optik-ui .hero-section,body.optik-ui .account-hero{margin:14px 14px 16px!important;height:150px!important;padding:22px!important}
  body.optik-ui .top-strip{padding-left:0}
  body.optik-ui .top-strip .inner{overflow-x:auto;flex-wrap:nowrap!important}
  body.optik-ui .top-strip .social{margin-left:0}
  body.optik-ui .mobile-nav{background:var(--ui-ink)!important;border-color:#2e3052!important;border-radius:14px!important;box-shadow:0 15px 38px rgba(8,63,75,.28)!important}
  body.optik-ui .mobile-nav-item{color:#aeb2d1!important}
  body.optik-ui .mobile-nav-item.active{color:#fff!important}
  body.optik-ui .mobile-nav-item.active i{color:var(--ui-coral)}
}
@media(max-width:680px){
  body.optik-ui main>.container{padding-left:14px;padding-right:14px}
  body.optik-ui .hero-logo,body.optik-ui .account-hero-logo{width:58px!important;height:58px!important}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* --------------------------------------------------------------------------
   Template-family treatments
   Every rendered template declares a page-* body class, keeping visual rules
   explicit while still sharing the same product language.
   -------------------------------------------------------------------------- */
body.optik-ui.template-page main{min-height:calc(100vh - 64px)}
body.optik-ui.template-page main>.container,
body.optik-ui.template-page main>.container-fluid:not(.p-0){max-width:1440px}

/* Authentication, account and password pages */
body.optik-ui[class*="page-accounts-"] .login-card,
body.optik-ui[class*="page-core-registration-"] .login-card,
body.optik-ui[class*="page-accounts-"] .profile-card,
body.optik-ui[class*="page-accounts-"] .glass-card{
  overflow:hidden;background:#fff!important;border:1px solid var(--ui-line)!important;
  border-radius:var(--ui-radius)!important;box-shadow:var(--ui-shadow)!important;backdrop-filter:none!important;
}
body.optik-ui[class*="page-accounts-"] .login-card-head,
body.optik-ui[class*="page-core-registration-"] .login-card-head{
  padding:24px 28px!important;text-align:left!important;background:var(--ui-paper)!important;border-bottom:1px solid var(--ui-line)!important;
}
body.optik-ui[class*="page-accounts-"] .login-card-head h2,
body.optik-ui[class*="page-core-registration-"] .login-card-head h2{font-size:21px!important;color:var(--ui-ink)!important}
body.optik-ui[class*="page-accounts-"] .login-btn,
body.optik-ui[class*="page-core-registration-"] .login-btn{
  background:var(--ui-indigo)!important;border:1px solid var(--ui-indigo)!important;color:#fff!important;
  border-radius:10px!important;padding:12px 18px!important;font-size:14px!important;box-shadow:0 10px 22px -12px rgba(15,85,99,.72)!important;
}
body.optik-ui[class*="page-accounts-"] .ad-area,
body.optik-ui[class*="page-core-registration-"] .ad-area{border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important;box-shadow:var(--ui-shadow)!important}
body.optik-ui[class*="page-accounts-"] .profile-hero{background:linear-gradient(120deg,var(--ui-ink),#0f5563)!important;border-radius:var(--ui-radius)!important}

/* Form-heavy tracker, content upload and management pages */
body.optik-ui[class*="page-lessontracker-"] .glass-card,
body.optik-ui[class*="page-contents-"] .content-card,
body.optik-ui[class*="page-billing-"] .billing-card,
body.optik-ui[class*="page-dashboard-"] .sr-card{
  background:#fff!important;border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important;
  box-shadow:var(--ui-shadow)!important;backdrop-filter:none!important;overflow:hidden;
}
body.optik-ui[class*="page-lessontracker-"] .glass-head,
body.optik-ui[class*="page-billing-"] .billing-head{
  padding:20px 24px!important;background:var(--ui-paper)!important;border-bottom:1px solid var(--ui-line)!important;
}
body.optik-ui[class*="page-lessontracker-"] .glass-head h2{
  color:var(--ui-ink)!important;background:none!important;-webkit-background-clip:initial!important;-webkit-text-fill-color:currentColor!important;
  font-size:20px!important;letter-spacing:-.02em!important;
}
body.optik-ui[class*="page-lessontracker-"] .modern-form input,
body.optik-ui[class*="page-lessontracker-"] .modern-form select,
body.optik-ui[class*="page-lessontracker-"] .modern-form textarea{
  background:#fff!important;border:1px solid var(--ui-line)!important;border-radius:10px!important;box-shadow:none!important;
}
body.optik-ui[class*="page-lessontracker-"] .btn-grad{background:var(--ui-indigo)!important;border-radius:10px!important;box-shadow:none!important}
body.optik-ui[class*="page-lessontracker-"] .btn-soft{background:var(--ui-paper)!important;border:1px solid var(--ui-line)!important;border-radius:10px!important}
body.optik-ui[class*="page-lessontracker-"] .topic-list,
body.optik-ui[class*="page-lessontracker-"] .payment-filter-card,
body.optik-ui[class*="page-lessontracker-"] .payment-summary-card,
body.optik-ui[class*="page-lessontracker-"] .payment-table-wrap,
body.optik-ui[class*="page-lessontracker-"] .approval-card,
body.optik-ui[class*="page-lessontracker-"] .teacher-confirm-card{
  background:#fff!important;border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important;box-shadow:var(--ui-shadow)!important;
}
body.optik-ui[class*="page-lessontracker-"] .payment-summary-card .value{color:var(--ui-indigo)!important;font-family:"Sora",sans-serif}
body.optik-ui[class*="page-contents-"] .upload-hero{background:linear-gradient(120deg,var(--ui-ink),#0f5563)!important;border-radius:var(--ui-radius)!important}
body.optik-ui[class*="page-contents-"] .file-upload-box,
body.optik-ui[class*="page-contents-"] .preview-box{background:var(--ui-paper)!important;border:1px dashed #e5e7eb!important;border-radius:12px!important}

/* Dashboard and search grids */
body.optik-ui[class*="page-dashboard-"] .quiz-sticky,
body.optik-ui[class*="page-dashboard-"] .users-sticky{
  background:#fff!important;border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important;
  box-shadow:var(--ui-shadow)!important;backdrop-filter:none!important;
}
body.optik-ui[class*="page-dashboard-"] .border-dashed{background:#fff!important;border:1px dashed #e5e7eb!important;border-radius:var(--ui-radius)!important}
body.optik-ui[class*="page-dashboard-"] .sr-hero{background:linear-gradient(120deg,var(--ui-ink),#0f5563)!important;color:#fff!important;border-radius:var(--ui-radius)!important}
body.optik-ui[class*="page-dashboard-"] .sr-item{border-color:var(--ui-line)!important;border-radius:10px!important}

/* Quiz taking, review, reports and editor */
body.optik-ui[class*="page-quizzes-"] .quiz-top,
body.optik-ui[class*="page-quizzes-"] .mq-sticky,
body.optik-ui[class*="page-quizzes-"] .mq-ribbon{
  background:rgba(255,255,255,.95)!important;border:1px solid var(--ui-line)!important;
  border-radius:var(--ui-radius)!important;box-shadow:var(--ui-shadow)!important;backdrop-filter:none!important;
}
body.optik-ui[class*="page-quizzes-"] .quiz-card,
body.optik-ui[class*="page-quizzes-"] .question-card{
  background:#fff!important;border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important;box-shadow:var(--ui-shadow)!important;
}
body.optik-ui[class*="page-quizzes-"] .choice{
  background:#fff!important;border:1px solid var(--ui-line)!important;border-radius:12px!important;transition:border-color .15s,background .15s!important;
}
body.optik-ui[class*="page-quizzes-"] .choice:hover{background:var(--ui-indigo-soft)!important;border-color:var(--ui-indigo)!important}
body.optik-ui[class*="page-quizzes-"] .choice-radio:checked+.choice-box,
body.optik-ui[class*="page-quizzes-"] .choice.selected{background:var(--ui-indigo-soft)!important;border-color:var(--ui-indigo)!important}
body.optik-ui[class*="page-quizzes-"] .choice-letter,
body.optik-ui[class*="page-quizzes-"] .qbtn-current{background:var(--ui-indigo)!important;color:#fff!important;border-color:var(--ui-indigo)!important}
body.optik-ui[class*="page-quizzes-"] .qbtn{border-radius:8px!important;box-shadow:none!important}
body.optik-ui[class*="page-quizzes-"] .timer-digital{color:var(--ui-coral)!important;font-family:"Sora",sans-serif!important}
body.optik-ui[class*="page-quizzes-"] .mq-ribbon-group{background:var(--ui-paper)!important;border:1px solid var(--ui-line)!important;border-radius:10px!important}
body.optik-ui[class*="page-quizzes-"] .report-table{border:1px solid var(--ui-line);border-radius:12px;overflow:hidden}

/* Billing, catalogue and checkout */
body.optik-ui[class*="page-billing-"] .billing-head{background:var(--ui-paper)!important}
body.optik-ui[class*="page-billing-"] .course-card,
body.optik-ui[class*="page-billing-"] .plan-card,
body.optik-ui[class*="page-billing-"] .checkout-card{
  background:#fff!important;border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important;box-shadow:var(--ui-shadow)!important;
}
body.optik-ui[class*="page-billing-"] .slot-table thead th{background:var(--ui-paper)!important}
body.optik-ui[class*="page-billing-"] .price{color:var(--ui-indigo)!important;font-family:"Sora",sans-serif}
body.optik-ui[class*="page-billing-"] .alert-info{background:var(--ui-indigo-soft)!important;color:var(--ui-indigo)!important;border-color:#e5e7eb!important}

/* Legal and maintenance documents */
body.optik-ui[class*="page-core-legal-"] .card-body,
body.optik-ui.page-core-maintenance .card-body{max-width:900px;margin:auto;line-height:1.75}
body.optik-ui[class*="page-core-legal-"] .card-body h2,
body.optik-ui[class*="page-core-legal-"] .card-body h3{margin-top:1.6em}

@media(max-width:680px){
  body.optik-ui.template-page .login-card-head{padding:18px!important}
  body.optik-ui[class*="page-quizzes-"] .quiz-top{border-radius:12px!important}
  body.optik-ui[class*="page-dashboard-"] .quiz-sticky{position:static!important}
}

/* --------------------------------------------------------------------------
   HOTFIX 2026-06-22: stable hero + stable page-owned tabs
   - keeps hero logo/text visible on lessontracker pages
   - locks 9-dot decoration to the right/vertical center
   - prevents late CSS/font recalculation from shifting page tabs down
   -------------------------------------------------------------------------- */
body.optik-ui .hero-section,
body.optik-ui .account-hero{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:184px!important;
  height:184px!important;
  margin:24px 28px 18px!important;
  padding:28px 32px!important;
  overflow:hidden!important;
  isolation:isolate!important;
  border-radius:var(--ui-radius,16px)!important;
  background:linear-gradient(120deg,var(--ui-ink,#083f4b),#0f5563 68%,#d1a95b)!important;
}
body.optik-ui .hero-section .hero-overlay,
body.optik-ui .hero-section .hero-banner-img,
body.optik-ui .account-hero .account-hero-bg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border-radius:inherit!important;
  pointer-events:none!important;
}
body.optik-ui .hero-section .hero-banner-img,
body.optik-ui .account-hero .account-hero-bg{
  z-index:0!important;
  object-fit:cover!important;
  opacity:.08!important;
  filter:grayscale(1)!important;
}
body.optik-ui .hero-section .hero-overlay{
  z-index:1!important;
  background:linear-gradient(90deg,rgba(8,63,75,.96),rgba(8,63,75,.62) 56%,rgba(8,63,75,.26))!important;
}
body.optik-ui .hero-section .hero-content,
body.optik-ui .account-hero .account-hero-content{
  position:relative!important;
  z-index:3!important;
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  width:auto!important;
  max-width:calc(100% - 170px)!important;
  min-width:0!important;
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
}
body.optik-ui .hero-section .hero-logo,
body.optik-ui .account-hero .account-hero-logo{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:74px!important;
  height:74px!important;
  min-width:74px!important;
  flex:0 0 74px!important;
  object-fit:contain!important;
  background:#fff!important;
  border-radius:14px!important;
  padding:7px!important;
}
body.optik-ui .hero-section .hero-text,
body.optik-ui .account-hero .account-hero-copy{
  display:block!important;
  min-width:0!important;
  opacity:1!important;
  visibility:visible!important;
}
body.optik-ui .hero-section .hero-text h1,
body.optik-ui .account-hero .account-hero-title{
  display:block!important;
  margin:0!important;
  color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
}
body.optik-ui .hero-section .hero-text p,
body.optik-ui .account-hero .account-hero-sub{
  display:block!important;
  color:#c8cbe6!important;
  opacity:1!important;
  visibility:visible!important;
}
body.optik-ui .hero-section::after,
body.optik-ui .account-hero::after,
body.optik-ui .courses-hero::after{
  content:""!important;
  position:absolute!important;
  z-index:2!important;
  right:36px!important;
  left:auto!important;
  top:50%!important;
  bottom:auto!important;
  width:112px!important;
  height:112px!important;
  transform:translateY(-50%)!important;
  opacity:.68!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle 6px at 14px 14px,rgba(255,255,255,.22) 98%,transparent),
    radial-gradient(circle 6px at 56px 14px,rgba(209,169,91,.72) 98%,transparent),
    radial-gradient(circle 6px at 98px 14px,rgba(255,255,255,.22) 98%,transparent),
    radial-gradient(circle 6px at 14px 56px,rgba(255,255,255,.22) 98%,transparent),
    radial-gradient(circle 6px at 56px 56px,rgba(255,255,255,.22) 98%,transparent),
    radial-gradient(circle 6px at 98px 56px,rgba(209,169,91,.72) 98%,transparent),
    radial-gradient(circle 6px at 14px 98px,rgba(209,169,91,.72) 98%,transparent),
    radial-gradient(circle 6px at 56px 98px,rgba(255,255,255,.22) 98%,transparent),
    radial-gradient(circle 6px at 98px 98px,rgba(255,255,255,.22) 98%,transparent)!important;
}
body.optik-ui .dashboard-page-shell,
body.optik-ui .userdash-wrap,
body.optik-ui .courses-shell,
body.optik-ui .mylessons-wrap{
  max-width:1440px!important;
  margin:22px auto 0!important;
  padding-left:16px!important;
  padding-right:16px!important;
  padding-top:0!important;
}
/* Page-owned tab sizing moved to static/css/page-tabs.css. */
@media(max-width:680px){
  body.optik-ui .hero-section,
  body.optik-ui .account-hero{
    height:154px!important;
    min-height:154px!important;
    margin:14px 14px 16px!important;
    padding:20px!important;
  }
  body.optik-ui .hero-section .hero-content,
  body.optik-ui .account-hero .account-hero-content{
    max-width:calc(100% - 86px)!important;
    gap:12px!important;
  }
  body.optik-ui .hero-section .hero-logo,
  body.optik-ui .account-hero .account-hero-logo{
    width:58px!important;
    height:58px!important;
    min-width:58px!important;
    flex-basis:58px!important;
  }
  body.optik-ui .hero-section::after,
  body.optik-ui .account-hero::after,
  body.optik-ui .courses-hero::after{
    right:18px!important;
    width:70px!important;
    height:70px!important;
    opacity:.36!important;
    background-size:70px 70px!important;
  }
  body.optik-ui .dashboard-page-shell,
  body.optik-ui .userdash-wrap,
  body.optik-ui .courses-shell,
  body.optik-ui .mylessons-wrap{
    margin-top:16px!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  /* Page-owned tab mobile sizing moved to static/css/page-tabs.css. */
}


/* --------------------------------------------------------------------------
   Hotfix: identical horizontal start line for page-owned tabs
   -------------------------------------------------------------------------- */
body.optik-ui .dashboard-page-shell,
body.optik-ui .userdash-wrap,
body.optik-ui .courses-shell,
body.optik-ui .mylessons-wrap{
  width:100%!important;
  max-width:1440px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:16px!important;
  padding-right:16px!important;
  box-sizing:border-box!important;
}
body.optik-ui .dashboard-page-shell > .row,
body.optik-ui .userdash-wrap > .row{
  --bs-gutter-x:0!important;
  margin-left:0!important;
  margin-right:0!important;
}
body.optik-ui .dashboard-page-shell > .row > *,
body.optik-ui .userdash-wrap > .row > *{
  padding-left:0!important;
  padding-right:0!important;
}
/* Page-owned tab width alignment moved to static/css/page-tabs.css. */
body.optik-ui .mylessons-wrap > .ml-card{
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}
@media(max-width:680px){
  body.optik-ui .dashboard-page-shell,
  body.optik-ui .userdash-wrap,
  body.optik-ui .courses-shell,
  body.optik-ui .mylessons-wrap{
    padding-left:14px!important;
    padding-right:14px!important;
  }
}

/* Compact page-owned tab mobile rules moved to static/css/page-tabs.css. */

body.optik-ui.page-dashboard-dashboard-admin-dashboard #courses-pane .table-responsive{
  overflow-x:visible!important;
  max-width:100%!important;
}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable.course-offering-table{
  width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable th,
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td{
  padding:.48rem .45rem!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
  vertical-align:top!important;
}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable th:nth-child(1),
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(1){width:34px!important;}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable th:nth-child(2),
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(2){width:21%!important;}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable th:nth-child(3),
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(3){width:18%!important;}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable th:nth-child(4),
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(4){width:102px!important;min-width:0!important;}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable th:nth-child(5),
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(5){width:12%!important;min-width:0!important;}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable th:nth-child(6),
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(6){width:10%!important;}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable th:nth-child(7),
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(7){width:10%!important;}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable th:nth-child(8),
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(8){width:17%!important;}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .price-stack{
  display:grid!important;
  gap:4px!important;
  max-width:100%!important;
}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .price-line{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:4px!important;
  padding:4px 5px!important;
  border-radius:8px!important;
  max-width:100%!important;
}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .price-line strong{
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  font-size:.74rem!important;
  line-height:1.08!important;
}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .price-line .text-nowrap{
  white-space:nowrap!important;
  font-size:.72rem!important;
}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .price-line.is-passive{opacity:.55;}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .metric-pill,
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .badge{
  white-space:normal!important;
  line-height:1.12!important;
}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .metric-pill{
  padding:4px 6px!important;
  font-size:.68rem!important;
}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-chip-list{
  gap:4px!important;
}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-action-stack{
  justify-content:flex-end!important;
  gap:4px!important;
}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-action-stack .btn{
  padding:.24rem .42rem!important;
  font-size:.7rem!important;
  line-height:1.12!important;
  white-space:normal!important;
}
body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-action-stack form{
  display:inline-flex!important;
}
@media (max-width: 760px){
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable.course-offering-table{table-layout:auto!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable th,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td{width:auto!important;}
}

/* --------------------------------------------------------------------------
   HOTFIX 2026-06-25: Kurslar&Ödemeler true phone-card layout
   - desktop keeps the table
   - phone rows become stacked cards like Zoom Yönetimi
   - no left/right scroll inside the course manager panel
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courses-pane .course-manager-panel,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courses-pane .table-responsive{
    overflow:visible!important;
    max-width:100%!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable.course-offering-table,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable tbody,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable tr,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable.course-offering-table{
    table-layout:auto!important;
    border-collapse:separate!important;
    border-spacing:0!important;
    margin:0!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable thead{
    display:none!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable tbody{
    display:grid!important;
    gap:12px!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable tr.course-offering-row,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable tbody > tr{
    margin:0!important;
    padding:12px!important;
    border:1px solid rgba(15,23,42,.10)!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 10px 24px -18px rgba(15,23,42,.38)!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable tr.course-offering-row:hover{
    background:#fff!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable tr.course-offering-row.is-selected{
    background:linear-gradient(180deg,rgba(16,185,129,.10),#fff 42%)!important;
    box-shadow:inset 4px 0 0 #10b981,0 10px 24px -18px rgba(15,23,42,.38)!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td{
    display:grid!important;
    grid-template-columns:94px minmax(0,1fr)!important;
    align-items:start!important;
    gap:8px!important;
    padding:8px 0!important;
    border:0!important;
    border-bottom:1px dashed rgba(15,23,42,.10)!important;
    text-align:left!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
    font-size:.82rem!important;
    line-height:1.28!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:last-child{
    border-bottom:0!important;
    padding-bottom:0!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td::before{
    display:block!important;
    min-width:0!important;
    color:#64748b!important;
    font-size:.66rem!important;
    font-weight:900!important;
    text-transform:uppercase!important;
    letter-spacing:.04em!important;
    line-height:1.2!important;
    padding-top:2px!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(1)::before{content:"Seç"!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(2)::before{content:"Kurs"!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(3)::before{content:"Program"!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(4)::before{content:"Fiyat"!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(5)::before{content:"Hedef"!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(6)::before{content:"Durum"!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(7)::before{content:"Kayıt"!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(8)::before{content:"İşlem"!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td[colspan]::before{content:""!important;display:none!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(2),
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(8){
    grid-template-columns:1fr!important;
    gap:4px!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(2)::before,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(8)::before{
    padding-top:0!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-title-block .title{
    font-size:.94rem!important;
    line-height:1.18!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-title-block .meta{
    font-size:.72rem!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-chip-list,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-status-stack{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:5px!important;
    align-items:flex-start!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .metric-pill,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .badge{
    width:auto!important;
    max-width:100%!important;
    white-space:normal!important;
    line-height:1.12!important;
    font-size:.68rem!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .price-stack{
    display:grid!important;
    gap:5px!important;
    width:100%!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .price-line{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    width:100%!important;
    max-width:100%!important;
    gap:6px!important;
    padding:6px 7px!important;
    border-radius:10px!important;
    background:#f8fafc!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .price-line strong{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    font-size:.8rem!important;
    line-height:1.12!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .price-line .text-nowrap{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    white-space:nowrap!important;
    font-size:.78rem!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-action-stack{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    justify-content:stretch!important;
    align-items:stretch!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-action-stack form{
    display:block!important;
    width:100%!important;
    margin:0!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-action-stack .btn{
    width:100%!important;
    min-height:34px!important;
    padding:.42rem .5rem!important;
    font-size:.72rem!important;
    line-height:1.12!important;
    white-space:normal!important;
    border-radius:11px!important;
  }
}
@media (max-width:420px){
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td{
    grid-template-columns:78px minmax(0,1fr)!important;
    gap:7px!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-action-stack{
    grid-template-columns:1fr!important;
  }
}

/* --------------------------------------------------------------------------
   HOTFIX 2026-06-25: Admin Kurslar&Ödemeler phone cards, no vertical text
   The row must stop behaving like narrow table/grid columns on phones.
   Labels sit above values so Turkish words keep normal horizontal wrapping.
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courses-pane .course-manager-panel,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courses-pane .table-responsive{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable.course-offering-table,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable tbody{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:auto!important;
    border-collapse:separate!important;
    border-spacing:0!important;
    margin:0!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable thead{
    display:none!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable tbody{
    display:grid!important;
    gap:12px!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable tr.course-offering-row,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable tbody > tr{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:12px!important;
    border:1px solid rgba(15,23,42,.10)!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 10px 24px -18px rgba(15,23,42,.38)!important;
    box-sizing:border-box!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable tr.course-offering-row.is-selected{
    background:linear-gradient(180deg,rgba(16,185,129,.10),#fff 42%)!important;
    box-shadow:inset 4px 0 0 #10b981,0 10px 24px -18px rgba(15,23,42,.38)!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(n){
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    grid-template-columns:none!important;
    grid-template-areas:none!important;
    gap:0!important;
    padding:8px 0!important;
    border:0!important;
    border-bottom:1px dashed rgba(15,23,42,.10)!important;
    text-align:left!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    hyphens:none!important;
    font-size:.83rem!important;
    line-height:1.32!important;
    box-sizing:border-box!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:last-child{
    border-bottom:0!important;
    padding-bottom:0!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td::before,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(n)::before{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0 0 4px!important;
    padding:0!important;
    color:#64748b!important;
    font-size:.66rem!important;
    font-weight:900!important;
    text-transform:uppercase!important;
    letter-spacing:.04em!important;
    line-height:1.15!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(1)::before{content:"Seç"!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(2)::before{content:"Kurs"!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(3)::before{content:"Program"!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(4)::before{content:"Fiyat"!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(5)::before{content:"Hedef"!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(6)::before{content:"Durum"!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(7)::before{content:"Kayıt"!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td:nth-child(8)::before{content:"İşlem"!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable td[colspan]::before{content:""!important;display:none!important;}
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-title-block,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-title-block .title,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-title-block .meta,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .price-stack,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-chip-list,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-status-stack{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-title-block .title{
    font-size:.95rem!important;
    line-height:1.18!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-title-block .meta{
    font-size:.73rem!important;
    line-height:1.25!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-chip-list,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-status-stack{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:flex-start!important;
    gap:5px!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .metric-pill,
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .badge{
    display:inline-flex!important;
    align-items:center!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    text-align:left!important;
    line-height:1.15!important;
    font-size:.69rem!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .price-stack{
    display:grid!important;
    gap:5px!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .price-line{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:6px!important;
    padding:6px 7px!important;
    border-radius:10px!important;
    background:#f8fafc!important;
    box-sizing:border-box!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .price-line strong{
    display:inline-block!important;
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    overflow:visible!important;
    text-overflow:clip!important;
    font-size:.82rem!important;
    line-height:1.15!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .price-line .text-nowrap{
    display:inline-flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    gap:7px!important;
    white-space:nowrap!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-action-stack{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
    justify-content:stretch!important;
    align-items:stretch!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-action-stack form{
    display:block!important;
    width:100%!important;
    margin:0!important;
  }
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-action-stack .btn{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:34px!important;
    padding:.42rem .5rem!important;
    border-radius:11px!important;
    font-size:.72rem!important;
    line-height:1.12!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    text-align:center!important;
  }
}
@media (max-width:420px){
  body.optik-ui.page-dashboard-dashboard-admin-dashboard #courseOfferingsTable .course-action-stack{
    grid-template-columns:1fr!important;
  }
}

/* Bamboo Optic theme overrides */
body.optik-ui{
  background:#fff!important;
  background-image:none!important;
  color:var(--ui-ink);
}
body.optik-ui ::selection{background:#0f5563;color:#fff}
body.optik-ui a{color:#0f5563}
body.optik-ui #sidebar{
  background:linear-gradient(180deg, #102a19 0%, #173c22 68%, #0c1d12 100%)!important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.06);
}
body.optik-ui .sidebar-brand-mark{
  background:linear-gradient(135deg, #f7f3dc 0%, #7fbf4d 44%, #0f5563 100%)!important;
  color:#102a19;
  box-shadow:0 12px 24px -14px rgba(127,191,77,.9);
}
body.optik-ui .sidebar-brand small{color:#e5e7eb}
body.optik-ui .sidebar-ribbon1{
  background:#183f25!important;
  border-color:rgba(216,232,207,.16)!important;
}
body.optik-ui #sidebar .nav-link{color:#dcefd4!important}
body.optik-ui #sidebar .nav-link i{color:#a9c99a}
body.optik-ui #sidebar .nav-link:hover{background:#214f2e!important}
body.optik-ui #sidebar .nav-link.active{
  background:linear-gradient(135deg, #0f5563, #147080)!important;
  box-shadow:0 10px 22px -10px rgba(106,168,79,.8)!important;
}
body.optik-ui #sidebar .input-group .form-control{
  background:#183f25!important;
  border-color:rgba(216,232,207,.18)!important;
}
body.optik-ui .sidebar-search-btn{background:#d1a95b!important;color:#083f4b!important}
body.optik-ui .top-strip{
  background:rgba(255,255,255,.96)!important;
  border-color:#e5e7eb!important;
}
body.optik-ui .top-strip .nav-btn:hover,
body.optik-ui .btn-outline-primary:hover{
  border-color:#0f5563!important;
  background:#eef8f8!important;
  color:#083f4b!important;
}
body.optik-ui .hero-section,
body.optik-ui .account-hero,
body.optik-ui .courses-hero{
  background:
    linear-gradient(90deg, rgba(255,253,247,.11) 0 1px, transparent 1px 58px),
    linear-gradient(120deg, #102a19 0%, #0f5563 62%, #d1a95b 100%)!important;
  border-color:rgba(216,232,207,.18)!important;
}
body.optik-ui .hero-section:after,
body.optik-ui .account-hero:after,
body.optik-ui .courses-hero:after{
  background:
    linear-gradient(90deg, rgba(247,243,220,.72) 0 8px, transparent 8px 28px),
    linear-gradient(90deg, transparent 0 16px, rgba(127,191,77,.72) 16px 23px, transparent 23px 42px),
    linear-gradient(180deg, transparent 0 26px, rgba(255,253,247,.34) 26px 28px, transparent 28px 56px)!important;
  border-radius:18px!important;
}
body.optik-ui .hero-overlay{
  background:linear-gradient(90deg, rgba(16,42,25,.96), rgba(16,42,25,.58))!important;
}
body.optik-ui .hero-text p,
body.optik-ui .account-hero-sub,
body.optik-ui .courses-hero p{color:#dcefd4!important}
body.optik-ui .card,
body.optik-ui .sidebar-card,
body.optik-ui .ml-card,
body.optik-ui .course-card,
body.optik-ui .student-filter-card,
body.optik-ui .student-table-wrap,
body.optik-ui .home-content-card,
body.optik-ui .content-card,
body.optik-ui .quiz-card,
body.optik-ui .modal-content{
  background:var(--ui-card)!important;
  border-color:var(--ui-line)!important;
}
body.optik-ui .btn-primary,
body.optik-ui .btn-success,
body.optik-ui .bg-primary,
body.optik-ui .text-bg-primary{
  background:#0f5563!important;
  border-color:#0f5563!important;
}
body.optik-ui .btn-danger,
body.optik-ui .bg-danger,
body.optik-ui .text-bg-danger{
  background:#b85c38!important;
  border-color:#b85c38!important;
}
body.optik-ui .form-control:focus,
body.optik-ui .form-select:focus{
  border-color:#0f5563;
  box-shadow:0 0 0 3px rgba(15,85,99,.14);
}
body.optik-ui .table thead th{background:#eaf4e2!important;color:#47624d}
body.optik-ui .page-item.active .page-link{background:#0f5563;border-color:#0f5563}