/*
 * Taystee's Academy theme
 * Overrides AdminLTE, skin-black and custom.css. Loaded last; remove the
 * <link> in template/partials/head.blade.php and template/home.blade.php to revert.
 * Brand reference: https://www.taysteesburger.com/
 */
@import url('https://fonts.googleapis.com/css2?family=Damion&family=Open+Sans:wght@400;600;700&family=Sen:wght@400;700;800&display=swap');

:root {
    --tay-red: #fb1c1f;
    --tay-red-dark: #d9090c;
    --tay-yellow: #fff435;
    --tay-ink: #241f20;
    --tay-ink-soft: #3a3334;
    --tay-gray: #ededed;
    --tay-white: #ffffff;
    --tay-radius: 10px;
    --tay-pill: 23px;
    --tay-heading: 'Sen', 'Open Sans', sans-serif;
    --tay-body: 'Open Sans', sans-serif;
    --tay-script: 'Damion', cursive;
}

/* ---------- Base ---------- */
body,
.skin-black .content-wrapper,
.skin-black .tooltip.top .tooltip-inner {
    font-family: var(--tay-body);
}

.skin-black .content-wrapper,
.skin-black .wrapper { background-color: var(--tay-gray); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.skin-black .content-wrapper > .content-header .row h1,
.box-title {
    font-family: var(--tay-heading);
    font-weight: 700;
    color: var(--tay-ink);
}

a { color: var(--tay-red); }
a:hover, a:focus { color: var(--tay-red-dark); }

/* ---------- Header ---------- */
.main-header { border-bottom: none; }

.skin-black .main-header > .navbar,
.skin-black .main-header > .logo,
.skin-black .main-header > .logo:hover,
.main-header > .logo:hover {
    background-color: var(--tay-red) !important;
    border: none !important;
}

.skin-black .main-header > .logo { display: flex; align-items: center; justify-content: center; }
.main-header > .logo .img-logo { max-height: 56px; width: auto; }

.skin-black .main-header > .navbar .sidebar-toggle,
.skin-black .main-header > .navbar > .sidebar-toggle { color: var(--tay-white); border-right: none; }
.skin-black .main-header > .navbar .sidebar-toggle:hover { color: var(--tay-yellow); background: transparent; }

.main-header > .navbar .nav > li > a,
.main-header > .navbar .navbar-custom-menu .navbar-nav.hidden-xs > li > a {
    color: var(--tay-white) !important;
    font-family: var(--tay-heading);
}
.main-header > .navbar .navbar-custom-menu .navbar-nav.hidden-xs > li.active > a,
.main-header > .navbar .navbar-custom-menu .navbar-nav.hidden-xs > li.active > a:hover,
.main-header > .navbar .navbar-custom-menu .navbar-nav.hidden-xs > li > a:hover,
.skin-black .main-header > .navbar .nav > li > a:hover,
.skin-black .main-header > .navbar .nav > li > a:focus,
.skin-black .main-header > .navbar .nav .open > a {
    color: var(--tay-yellow) !important;
    background: transparent !important;
}
.main-header > .navbar .navbar-custom-menu .navbar-nav.hidden-xs > li > a:after { background: var(--tay-yellow); }
.navbar-custom-menu .navbar-nav > li.notifications-menu:after { background: rgba(255, 255, 255, 0.35); }

.main-header li.user-header { background-color: var(--tay-ink) !important; }
.navbar-nav > .user-menu > .dropdown-menu > li > a:hover { background-color: var(--tay-red); color: var(--tay-white); }

/* ---------- Sidebar ---------- */
.skin-black .main-sidebar,
.skin-black .left-side,
.skin-black .sidebar-menu > li.header { background-color: var(--tay-ink); }

.skin-black .sidebar a,
.skin-black .sidebar-menu > li.header { color: var(--tay-white); }
.skin-black .sidebar-menu > li > a { font-family: var(--tay-heading); }
.skin-black .sidebar-menu > li > a > i { color: var(--tay-yellow); }
.skin-black .sidebar-menu > li:after,
.skin-black .sidebar .learner-info-box:after,
.skin-black .sidebar .quiz-info-box:after { background: var(--tay-ink-soft); }

.skin-black .sidebar-menu > li:hover > a,
.skin-black .sidebar-menu > li.active > a {
    color: var(--tay-white);
    background: var(--tay-red);
    border-left-color: var(--tay-yellow);
}
.skin-black .sidebar-menu > li:hover > a > i,
.skin-black .sidebar-menu > li.active > a > i { color: var(--tay-white); }
.skin-black .sidebar-menu > li > .treeview-menu { background: #171314; }
.skin-black .sidebar-menu .treeview-menu > li.active > a,
.skin-black .sidebar-menu .treeview-menu > li > a:hover { color: var(--tay-yellow); }

/* ---------- Buttons ---------- */
.btn-primary,
.btn-info,
.skin-black .btn-primary,
.skin-black .btn-info {
    background-color: var(--tay-yellow);
    border: none;
    border-radius: var(--tay-pill);
    color: var(--tay-ink);
    font-family: var(--tay-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--tay-ink) !important;
    color: var(--tay-white) !important;
    border-color: var(--tay-ink) !important;
}
.btn-success, .btn-danger, .btn-warning, .btn-default { border-radius: var(--tay-pill); font-family: var(--tay-heading); font-weight: 700; }
.btn-danger { background-color: var(--tay-red); border-color: var(--tay-red); }
.btn-danger:hover, .btn-danger:focus { background-color: var(--tay-red-dark); border-color: var(--tay-red-dark); }

/* ---------- Content accents ---------- */
.box { border-radius: var(--tay-radius); border-top-color: var(--tay-red); }
.box.box-primary, .box.box-info { border-top-color: var(--tay-red); }

.skin-black .tooltip.top .tooltip-arrow { border-top-color: var(--tay-ink); }
.skin-black .tooltip.top .tooltip-inner { background-color: var(--tay-ink); color: var(--tay-white); }

.skin-black .progress .progress-bar,
.skin-black .content-wrapper .content.learnercourse .content-inner-header .progress-container .progress .progress-bar { background: var(--tay-red); }

.skin-black .circlePercent,
.skin-black .circlePercent > .counter:after { background: var(--tay-red); }

.skin-black .content-wrapper .content .content-inner-header .nav li a:hover,
.skin-black .content-wrapper .content .content-inner-header .nav li.active a {
    background: var(--tay-red);
    color: var(--tay-white);
}

.skin-black .table-container table.learnercourse-table tbody tr.completed td:first-child { color: var(--tay-red); }

.cards .card .box .box-body a .badge { background: var(--tay-red); color: var(--tay-white); }
.cards .card .box .box-body a:after { background: linear-gradient(to bottom, var(--tay-red) 1%, var(--tay-yellow) 100%); }

.label-primary, .bg-light-blue, .bg-aqua { background-color: var(--tay-red) !important; color: var(--tay-white) !important; }

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span { background-color: var(--tay-red); border-color: var(--tay-red); }
.pagination > li > a { color: var(--tay-ink); }

.form-control:focus { border-color: var(--tay-red); box-shadow: 0 0 0 2px rgba(251, 28, 31, 0.15); }

.main-footer { font-family: var(--tay-body); color: var(--tay-ink); }

/* ---------- Login / registration ---------- */
html.login-page { background: var(--tay-red); }
html.login-page .backstretch { display: none; }

html.login-page .login-form {
    border-radius: var(--tay-radius);
    box-shadow: 0 10px 30px rgba(36, 31, 32, 0.35);
}
html.login-page .login-form .registration-header img { max-width: 218px; height: auto; }
html.login-page .login-form .registration-header .tay-tagline {
    font-family: var(--tay-script);
    font-size: 26px;
    color: var(--tay-red);
    margin: 14px 0 0;
}
html.login-page .login-form .btn-primary,
html.login-page .login-form .btn-warning {
    background-color: var(--tay-yellow);
    border: none;
    border-radius: var(--tay-pill);
    color: var(--tay-ink);
    text-transform: uppercase;
}
html.login-page .login-form .btn-warning:hover,
html.login-page .login-form .btn-warning:focus {
    background-color: var(--tay-ink);
    color: var(--tay-white);
}
html.login-page .login-form input:focus,
html.login-page .login-form select:focus { border-color: var(--tay-red); }

/* ==========================================================================
   Taystee's Academy – UI refresh (append to dist/css/taystees.css)
   Built on top of AdminLTE 2 + Bootstrap 3. Prototyped live on /user/profile.
   ========================================================================== */

:root {
  --brand: #fb1c1f;
  --ink: #241f20;
  --muted: #6b6566;
  --line: #ececec;
  --page-bg: #f4f4f5;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  --header-h: 65px;
}

/* ---------- Top header: single clean row (no wrapping to 130px) ---------- */
.main-header .logo,
.main-header .navbar { box-shadow: 0 2px 10px rgba(0,0,0,.12); }

.main-header .navbar {
  min-height: var(--header-h);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.main-header .navbar-custom-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 16px;
}
.main-header .navbar-custom-menu > .navbar-nav { display: flex; align-items: center; float: none; margin: 0; }

.main-header .navbar-custom-menu .hidden-xs > li > a {
  position: relative;
  padding: 22px 14px;
  font-size: 13px;
  letter-spacing: .06em;
  white-space: nowrap;
}
.main-header .navbar-custom-menu .hidden-xs > li > a:hover { background: transparent; opacity: .85; }
.main-header .navbar-custom-menu .hidden-xs > li > a::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  height: 2px; background: #fff;
  transform: scaleX(0); transition: transform .2s;
}
.main-header .navbar-custom-menu .hidden-xs > li > a:hover::after { transform: scaleX(1); }

/* Search pill */
.main-header .form-control {
  height: 36px !important;
  padding: 8px 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.95) !important;
}

/* User menu */
.main-header .user-menu > a {
  display: flex; align-items: center; gap: 8px;
  height: var(--header-h);
  padding-top: 0 !important; padding-bottom: 0 !important;
  white-space: nowrap;
}

/* Avatars */
img.user-image,
.user-menu img {
  width: 34px !important; height: 34px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,.6);
  object-fit: cover;
  font-size: 0; color: transparent; /* hide alt text if image fails */
}

/* ---------- Layout offset (title was hidden under the header) ---------- */
.content-wrapper { padding-top: var(--header-h) !important; background: var(--page-bg) !important; }

/* ---------- Page header + tabs ---------- */
.content-header {
  height: auto !important;
  padding: 24px 28px 0 !important;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.content-header > .row { padding: 0 !important; margin: 0 !important; border-bottom: 0 !important; }
.content-header h1 {
  float: none;
  margin: 0 0 8px !important; padding: 0 !important;
  font-size: 24px !important; font-weight: 700; color: var(--ink);
}
.content-header .navbar { min-height: 0; margin: 0; border: 0; }
.content-header .navbar .nav { display: flex; flex-wrap: wrap; float: none; margin-left: -16px !important; }
.content-header .navbar .nav > li { float: none; width: auto !important; height: auto !important; padding: 0 !important; }

/* :not(#_a):not(#_b) bumps specificity over the existing !important rule in custom.css */
.content-header .navbar .nav > li > a:not(#_a):not(#_b) {
  margin: 0 !important;
  padding: 14px 16px 12px !important;
  font-size: 13px; font-weight: 600; text-transform: none !important;
  color: var(--muted) !important;
  background: transparent !important;
  border-bottom: 3px solid transparent !important;
  transition: color .15s, border-color .15s;
}
.content-header .navbar .nav > li > a:not(#_a):not(#_b)::after { display: none !important; }
.content-header .navbar .nav > li > a:not(#_a):not(#_b):hover,
.content-header .navbar .nav > li.active > a:not(#_a):not(#_b) {
  color: var(--ink) !important;
  border-bottom-color: var(--brand) !important;
}

.content { padding: 24px 28px !important; }

/* ---------- Profile details card ---------- */
/* Scoped to the profile page (user/account/index): .table-container is shared by ~90 data-table views. */
.content.profile-details .table-container {
  float: none !important;
  width: 100% !important; max-width: 820px;
  margin: 0 !important;
  padding: 8px 28px !important;
  background: #fff;
  border: 0 !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.content.profile-details .table-container .table { margin: 0; }
.content.profile-details .table-container .table > tbody > tr > td {
  padding: 16px 0 !important;
  font-size: 14px; vertical-align: middle;
  border-top: 0 !important;
  border-bottom: 1px solid var(--line);
}
.content.profile-details .table-container .table > tbody > tr:last-child > td { border-bottom: 0; }
.content.profile-details .table-container .table > tbody > tr > td:first-child { width: 38%; color: var(--muted); }
.content.profile-details .table-container .table > tbody > tr > td:first-child strong { font-size: 13px; font-weight: 600; }
.content.profile-details .table-container .table > tbody > tr > td:last-child { color: var(--ink); font-weight: 500; }
.content.profile-details .table-container .table > tbody > tr > td:last-child:empty::before { content: "—"; color: #c4c0c0; }

/* ---------- Sidebar stat cards ---------- */
.learner-info-box {
  height: auto !important;
  margin: 16px;
  padding: 20px 16px !important;
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06) !important;
}
.learner-info-box .learner-info1 { margin: 0 auto 16px; }
.learner-info-box .learner-info2 { display: flex; align-items: center; justify-content: center; gap: 10px; }
.learner-info-box .text-info { color: rgba(255,255,255,.85) !important; font-size: 14px; }
.learner-info-box .text-info strong { color: #fff; }
.progressbar-circle::before { border-radius: 50%; } /* removes the blue square behind the ring */

/* ---------- Learner sidebar: total score ring (SVG, replaces the old .circlePercent) ---------- */
.skin-black .sidebar .learner-info-box.tay-score { padding: 24px 16px !important; text-align: center; }
.skin-black .sidebar .learner-info-box.tay-score:after { display: none; }

.tay-score-ring {
    --score: 0;
    position: relative;
    width: 152px;
    height: 152px;
    margin: 0 auto;
}
.tay-score-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.tay-score-ring circle { fill: none; stroke-width: 10; }
.tay-score-track { stroke: rgba(255, 255, 255, 0.08); }
.tay-score-arc {
    stroke-linecap: round;
    stroke-dasharray: calc(var(--score) * 1px) 100px;
    transition: stroke-dasharray 1.2s cubic-bezier(0.33, 1, 0.68, 1);
    filter: drop-shadow(0 0 6px rgba(251, 28, 31, 0.45));
}
/* A round cap would still draw a dot at 0%. */
.tay-score-ring[data-score="0"] .tay-score-arc { stroke: none; }

.tay-score-value {
    position: absolute;
    inset: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    color: var(--tay-white);
    font-family: var(--tay-heading);
    line-height: 1;
}
.tay-score-number { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tay-score-unit { font-size: 18px; font-weight: 700; margin: 4px 0 0 2px; color: var(--tay-yellow); }
.tay-score-label {
    flex-basis: 100%;
    margin-top: 8px;
    font-family: var(--tay-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

@media (prefers-reduced-motion: reduce) {
    .tay-score-arc { transition: none; }
}