/* =========================================================
   TUKLASS V7 — CENTERED LANDING, AUTH ACTIONS, LEGAL UI
========================================================= */

/* The prior showHome() used display:block and defeated the V6 flex centering.
   V7 also hardens the layout so it remains centered if another rule changes. */
#homeSection.public-home-simple {
    width: 100% !important;
    min-height: calc(100vh - 76px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 56px 24px 80px !important;
}

#homeSection.public-home-simple .public-simple-shell {
    width: min(820px, 100%) !important;
    margin: 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Logo1 has generous transparent padding, so scale the artwork visually. */
.public-header-simple {
    min-height: 76px !important;
    padding-left: 26px !important;
    padding-right: 26px !important;
    overflow: visible !important;
}

.public-header-simple .brand-logo-only {
    width: 160px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.public-header-simple .brand-logo-only img {
    width: 160px !important;
    height: 52px !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: scale(2.6);
    transform-origin: center center;
}

.public-hero-logo {
    width: min(360px, 65vw) !important;
    height: 110px !important;
    max-height: none !important;
    margin: 0 auto 64px !important;
    object-fit: contain !important;
    transform: scale(3.0);
    transform-origin: center center;
    pointer-events: none;
}

.public-auth-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.public-auth-actions .public-create-account,
.public-auth-actions .public-login-button {
    min-width: 160px;
    min-height: 48px;
    margin-top: 0 !important;
    border-radius: 14px !important;
}

.public-login-button {
    border: 1px solid #cfd7dc !important;
    background: #ffffff !important;
    color: #111417 !important;
}

.public-login-button:hover {
    border-color: #111417 !important;
    background: #f6f8f9 !important;
}

.public-legal-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
    color: #8a939a;
    font-size: 11px;
}

.public-legal-links a,
.footer-legal-links a,
.account-modal-legal a,
.setup-terms-agreement a {
    color: #4e5860;
    font-weight: 800;
    text-decoration: none;
}

.public-legal-links a:hover,
.footer-legal-links a:hover,
.account-modal-legal a:hover,
.setup-terms-agreement a:hover {
    text-decoration: underline;
}

/* Account auth dialog */
.account-modal-card {
    text-align: center;
}

.account-modal-wordmark {
    width: 180px !important;
    height: 68px !important;
    max-height: none !important;
    margin: 6px auto 36px !important;
    object-fit: contain !important;
    transform: scale(2.45);
    transform-origin: center center;
}

.account-modal-legal {
    max-width: 340px;
    margin: 17px auto 0 !important;
    color: #899198 !important;
    font-size: 10px !important;
    line-height: 1.55 !important;
}

/* Student setup wordmark */
.setup-icon.setup-logo1 {
    width: 190px !important;
    height: 62px !important;
    margin: 0 0 34px !important;
    overflow: visible !important;
}

.setup-icon.setup-logo1 img {
    width: 190px !important;
    height: 62px !important;
    object-fit: contain !important;
    transform: scale(2.65);
    transform-origin: left center;
}

.setup-terms-agreement {
    display: grid;
    grid-template-columns: 18px minmax(0,1fr);
    gap: 9px;
    align-items: flex-start;
    margin: 22px 0 2px;
    padding: 13px 14px;
    border: 1px solid #e0e5e8;
    border-radius: 12px;
    background: #f8fafb;
    color: #667078;
    font-size: 10px;
    line-height: 1.55;
    cursor: pointer;
}

.setup-terms-agreement input {
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: #80d800;
}

.setup-terms-message {
    min-height: 16px;
    margin-top: 5px;
    font-size: 10px;
}

#siteFooter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-legal-links {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 760px) {
    .public-header-simple {
        min-height: 68px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .public-header-simple .brand-logo-only {
        width: 128px !important;
        height: 44px !important;
    }

    .public-header-simple .brand-logo-only img {
        width: 128px !important;
        height: 44px !important;
        transform: scale(2.4);
    }

    #homeSection.public-home-simple {
        min-height: calc(100dvh - 68px) !important;
        padding: 42px 18px 70px !important;
    }

    .public-hero-logo {
        width: min(280px, 72vw) !important;
        height: 88px !important;
        margin-bottom: 48px !important;
        transform: scale(2.8);
    }

    .public-home-simple h1 {
        font-size: clamp(40px, 13vw, 60px) !important;
    }

    .public-auth-actions {
        width: min(360px, 100%);
        flex-direction: column;
    }

    .public-auth-actions .public-create-account,
    .public-auth-actions .public-login-button {
        width: 100%;
    }

    .account-modal-wordmark {
        transform: scale(2.2);
        margin-bottom: 30px !important;
    }

    .setup-icon.setup-logo1 {
        width: 155px !important;
        height: 54px !important;
        margin-bottom: 28px !important;
    }

    .setup-icon.setup-logo1 img {
        width: 155px !important;
        height: 54px !important;
        transform: scale(2.35);
    }
}

/* =========================================================
   V7.1 — AUTH / LANDING VISIBILITY + LOGO POLISH
   Requested fixes: larger hero wordmark, left-shifted public
   wordmark, readable dashboard wordmark, and reliable auth UI.
========================================================= */

/* showDashboard() hides #homeSection with an inline display:none.
   The earlier V7 flex rule used !important and could keep the landing
   page visible above the dashboard. Explicitly respect the hidden state. */
#homeSection.public-home-simple[hidden],
#homeSection.public-home-simple[style*="display: none"],
#homeSection.public-home-simple[style*="display:none"] {
    display: none !important;
}

/* Make the centered landing-page Tuklass wordmark more prominent. */
.public-hero-logo {
    width: min(410px, 72vw) !important;
    height: 126px !important;
    margin-bottom: 70px !important;
    transform: scale(3.8) !important;
}

/* Pull the small public-header wordmark closer to the left edge. */
.public-header-simple {
    padding-left: 10px !important;
}

.public-header-simple .brand-logo-only {
    margin-left: -10px !important;
    justify-content: flex-start !important;
}

.public-header-simple .brand-logo-only img {
    transform-origin: left center !important;
}

/* The Logo1 asset contains transparent padding. Give it enough rendered
   space in the desktop sidebar so the full "Tuklass" wordmark is readable. */
@media (min-width: 761px) {
    #dashboard .sidebar-brand {
        min-height: 86px !important;
        padding: 6px 4px 24px !important;
        overflow: visible !important;
        justify-content: flex-start !important;
    }

    #dashboard .sidebar-brand img {
        width: 108px !important;
        height: 54px !important;
        flex: 0 0 108px !important;
        max-width: none !important;
        transform: scale(2.05) !important;
        transform-origin: left center !important;
        object-position: left center !important;
    }
}

/* Keep the auth close control above every modal child/Google iframe and
   make its click target comfortably large. */
.account-modal-close {
    z-index: 20 !important;
    min-width: 56px;
    min-height: 38px;
    padding: 6px 8px;
    pointer-events: auto !important;
}

@media (max-width: 760px) {
    .public-header-simple {
        padding-left: 7px !important;
    }

    .public-header-simple .brand-logo-only {
        margin-left: -8px !important;
    }

    .public-hero-logo {
        width: min(315px, 78vw) !important;
        height: 96px !important;
        margin-bottom: 52px !important;
        transform: scale(3.25) !important;
    }
}


/* =========================================================
   V7.2 — SIDEBAR WORDMARK WITHOUT EXTRA VERTICAL SPACING
========================================================= */
/*
   Logo1.png has a lot of transparent canvas around the actual wordmark.
   Enlarge the artwork visually, but keep the brand row at the same height
   as V7.1 so Workspace/Search/Home do not get pushed farther down.
*/
@media (min-width: 761px) {
    #dashboard .sidebar-brand {
        position: relative !important;
        width: 100% !important;
        height: 86px !important;
        min-height: 86px !important;
        padding: 6px 4px 24px !important;
        margin: 0 !important;
        overflow: hidden !important;
        display: block !important;
    }

    #dashboard .sidebar-brand img {
        position: absolute !important;
        left: 50% !important;
        top: 34px !important;
        width: calc(100% - 8px) !important;
        height: 54px !important;
        max-width: none !important;
        max-height: none !important;
        flex: none !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: translate(-50%, -50%) scale(4.1) !important;
        transform-origin: center center !important;
        pointer-events: none !important;
    }
}

/* The mobile drawer gets the same large wordmark treatment without
   increasing the space before the first navigation item. */
@media (max-width: 760px) {
    #dashboard .sidebar-brand {
        position: relative !important;
        height: 72px !important;
        min-height: 72px !important;
        padding: 4px 4px 14px !important;
        overflow: hidden !important;
        display: block !important;
    }

    #dashboard .sidebar-brand img {
        position: absolute !important;
        left: 50% !important;
        top: 29px !important;
        width: calc(100% - 8px) !important;
        height: 48px !important;
        max-width: none !important;
        max-height: none !important;
        flex: none !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: translate(-50%, -50%) scale(3.7) !important;
        transform-origin: center center !important;
        pointer-events: none !important;
    }
}

/* =========================================================
   V7.3 — FINAL SIDEBAR / CHAT IMAGE / RESPONSIVE PASS
========================================================= */

/* Desktop wordmark: keep the same visual scale, but stop clipping the
   flame, center the visible logo, and tighten the space above Workspace. */
@media (min-width: 1101px) {
    #dashboard .sidebar-brand {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 72px !important;
        min-height: 72px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    #dashboard .sidebar-brand img {
        position: absolute !important;
        left: 50% !important;
        top: 29px !important;
        width: calc(100% - 10px) !important;
        height: 54px !important;
        max-width: none !important;
        max-height: none !important;
        flex: none !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: translate(-50%, -50%) scale(4.05) !important;
        transform-origin: center center !important;
        pointer-events: none !important;
    }

    #dashboard .sidebar-label {
        margin: 0 10px 2px !important;
    }

    #dashboard .sidebar-nav {
        gap: 2px !important;
    }

    #dashboard .sidebar-link {
        min-height: 49px !important;
    }
}

/* Images are their own message objects, not black/grey text bubbles. */
.tk-chat-wrap > .tk-chat-image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(360px, 68vw) !important;
    max-height: 440px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: transparent !important;
    object-fit: contain !important;
    box-shadow: none !important;
}

.tk-chat-row.has-image .tk-chat-wrap {
    gap: 5px !important;
}

/* A failed image upload should not draw a fake bubble outline around the
   photo. Delivery status below it already communicates the failure. */
.tk-chat-row.has-image.is-failed .tk-chat-image {
    outline: 1px solid #d93025 !important;
    outline-offset: 2px;
}

/* Tablet and phone shell. Use the same slide-out navigation through iPad /
   small-laptop widths instead of the cramped 82px icon rail. */
@media (max-width: 1100px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    #dashboard .dashboard-shell {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .mobile-menu-button {
        display: flex !important;
    }

    .mobile-sidebar-backdrop {
        display: block !important;
    }

    #dashboard .dashboard-main {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 72px 18px 30px !important;
        overflow: visible !important;
    }

    .tuklass-route,
    .route-head,
    .route-content,
    .card,
    .calendar-card,
    .side-card,
    .form-card,
    .collections-main,
    .collections-sidebar-card,
    .collection-workspace,
    .edit-profile-card,
    .edit-preview-card {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Rules below intentionally repeat older responsive rules with
       !important because later desktop-polish blocks previously overrode
       them on tablets. */
    .route-calendar .calendar-layout,
    .route-reminders .layout,
    .admin-calendar-grid,
    .admin-calendar-picker,
    .edit-profile-layout {
        grid-template-columns: 1fr !important;
    }

    .route-calendar .side-card,
    .route-reminders .form-card,
    .edit-preview-card {
        position: static !important;
        top: auto !important;
    }

    .collections-layout {
        grid-template-columns: minmax(230px, 290px) minmax(0, 1fr) !important;
    }

    .route-head {
        align-items: flex-start !important;
        gap: 14px !important;
        margin-bottom: 20px !important;
    }

    .route-head h1 {
        font-size: clamp(32px, 5vw, 44px) !important;
    }

    .route-head p {
        max-width: 620px !important;
    }

    .route-chat {
        width: 100% !important;
        height: calc(100dvh - 94px) !important;
        min-height: 520px !important;
        max-height: none !important;
    }

    .chat-shell {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .chat-messages {
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .tk-chat-wrap {
        max-width: min(78%, 520px) !important;
    }

    .tk-chat-wrap > .tk-chat-image {
        max-width: min(340px, 72vw) !important;
        max-height: 380px !important;
    }

    .calendar-card {
        max-width: 100% !important;
    }
}

/* Portrait tablets and large phones: stack secondary grids before they get
   cramped rather than waiting until the old 760px breakpoint. */
@media (max-width: 860px) {
    #dashboard .dashboard-main {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .catalog-grid,
    .notes-material-grid,
    .collection-grid,
    .collection-builder-grid,
    .collections-layout,
    .admin-management-grid,
    .admin-roster-grid {
        grid-template-columns: 1fr !important;
    }

    .notes-catalog-toolbar,
    .collections-heading,
    .collection-workspace-head {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .notes-catalog-toolbar input {
        width: 100% !important;
    }

    .route-calendar .calendar-card {
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .route-calendar .weekdays,
    .route-calendar .calendar-grid,
    .route-calendar .calendar-toolbar {
        min-width: 650px !important;
    }

    .route-calendar .day {
        min-height: 98px !important;
    }

    .route-chat {
        min-height: 460px !important;
    }
}

/* Phone sizing. Keep controls touchable, but stop cards and headers from
   consuming the whole viewport. */
@media (max-width: 600px) {
    #dashboard .dashboard-main {
        padding: 68px 10px 22px !important;
    }

    .mobile-menu-button {
        left: 10px !important;
        top: 10px !important;
        width: 42px !important;
        height: 42px !important;
    }

    .route-head {
        margin-bottom: 16px !important;
    }

    .route-head-icon {
        display: none !important;
    }

    .route-head h1 {
        font-size: clamp(29px, 10vw, 36px) !important;
    }

    .route-head p {
        margin-top: 6px !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .catalog-search {
        height: 50px !important;
        padding-left: 48px !important;
        font-size: 13px !important;
    }

    .catalog-card,
    .card,
    .side-card,
    .form-card,
    .collections-main,
    .collections-sidebar-card,
    .collection-workspace,
    .edit-profile-card {
        padding: 15px !important;
        border-radius: 15px !important;
    }

    .route-profile .profile-card {
        padding: 32px 16px !important;
        border-radius: 18px !important;
    }

    .route-profile .profile-picture {
        width: 104px !important;
        height: 104px !important;
    }

    .route-profile .profile-name {
        font-size: 25px !important;
    }

    .route-profile .profile-actions {
        flex-wrap: wrap !important;
    }

    .event-row,
    .admin-calendar-form-grid,
    .admin-form-grid {
        grid-template-columns: 1fr !important;
    }

    .agenda-day {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .agenda-item {
        grid-template-columns: 54px minmax(0,1fr) !important;
    }

    .agenda-time {
        text-align: left !important;
    }

    .route-chat {
        height: calc(100dvh - 82px) !important;
        min-height: 0 !important;
    }

    .chat-header {
        min-height: 60px !important;
        padding: 8px !important;
    }

    .chat-recipient-picture {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }

    .chat-messages {
        padding: 14px 9px 18px !important;
    }

    .tk-chat-wrap {
        max-width: 86% !important;
    }

    .tk-chat-wrap > .tk-chat-image {
        max-width: min(300px, 82vw) !important;
        max-height: 330px !important;
    }

    .chat-composer {
        padding: 7px !important;
    }

    .chat-composer-inner {
        gap: 5px !important;
    }

    .chat-photo-button,
    .chat-send-button {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
    }

    #messageInput {
        min-height: 40px !important;
        font-size: 16px !important; /* prevents iOS input zoom */
    }

    .collection-item-row {
        grid-template-columns: 28px minmax(0,1fr) !important;
    }

    .collection-item-actions {
        grid-column: 2 !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 380px) {
    #dashboard .dashboard-main {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .route-calendar .weekdays,
    .route-calendar .calendar-grid,
    .route-calendar .calendar-toolbar {
        min-width: 610px !important;
    }

    .tk-chat-wrap {
        max-width: 90% !important;
    }
}

/* =========================================================
   V8.1 — CHAT READABILITY
   Larger message text and controls without changing the
   overall chat layout or making the conversation feel bulky.
========================================================= */

.route-chat .tk-chat-row {
    margin: 3px 0 !important;
}

.route-chat .tk-chat-wrap {
    max-width: min(70%, 620px) !important;
    gap: 3px !important;
}

.route-chat .tk-chat-bubble {
    padding: 9px 14px !important;
    border-radius: 19px !important;
    font-size: 15px !important;
    line-height: 1.38 !important;
}

.route-chat .tk-chat-row.is-mine .tk-chat-bubble {
    border-bottom-right-radius: 6px !important;
}

.route-chat .tk-chat-row.is-theirs .tk-chat-bubble {
    border-bottom-left-radius: 6px !important;
}

.route-chat .tk-chat-day-divider {
    margin: 22px 0 14px !important;
    font-size: 11px !important;
}

.route-chat .tk-chat-time,
.route-chat .tk-chat-delivery {
    margin-top: 2px !important;
    font-size: 10px !important;
}

.route-chat .tk-chat-wrap > .tk-chat-image {
    max-width: min(430px, 72vw) !important;
    max-height: 500px !important;
    border-radius: 16px !important;
}

.route-chat .chat-recipient-name {
    font-size: 16px !important;
}

.route-chat .chat-recipient-username {
    font-size: 12px !important;
}

.route-chat #messageInput {
    font-size: 15px !important;
}

@media (max-width: 1100px) {
    .route-chat .tk-chat-wrap {
        max-width: min(82%, 580px) !important;
    }

    .route-chat .tk-chat-wrap > .tk-chat-image {
        max-width: min(390px, 76vw) !important;
        max-height: 440px !important;
    }
}

@media (max-width: 860px) {
    .route-chat .tk-chat-wrap {
        max-width: 88% !important;
    }

    .route-chat .tk-chat-bubble {
        padding: 9px 12px !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    .route-chat .tk-chat-day-divider {
        font-size: 10.5px !important;
    }

    .route-chat .tk-chat-time,
    .route-chat .tk-chat-delivery {
        font-size: 9.5px !important;
    }

    .route-chat .tk-chat-wrap > .tk-chat-image {
        max-width: min(340px, 84vw) !important;
        max-height: 390px !important;
    }

    .route-chat .chat-recipient-name {
        font-size: 15px !important;
    }

    .route-chat #messageInput {
        font-size: 16px !important;
    }
}

@media (max-width: 380px) {
    .route-chat .tk-chat-wrap {
        max-width: 92% !important;
    }

    .route-chat .tk-chat-bubble {
        font-size: 14.5px !important;
    }
}

/* V8.2: admin tools moved to the dedicated Admin sidebar tab. */
#dashboard #adminToolsCard{display:none!important}

/* =========================================================
   V8.3 — SIDEBAR ADMIN ROLE LABEL
========================================================= */
#dashboard .sidebar-admin-label{
    width:max-content;
    max-width:calc(100% - 20px);
    margin:-12px auto 5px;
    padding:3px 8px;
    border:1px solid #93e500;
    border-radius:999px;
    background:#efffd8;
    color:#579500;
    font-size:8px;
    line-height:1.1;
    font-weight:950;
    letter-spacing:.13em;
    text-align:center;
    text-transform:uppercase;
}
#dashboard .sidebar-admin-label[hidden]{display:none!important}

@media(max-width:1100px){
    #dashboard .sidebar-admin-label{
        margin:-10px auto 4px;
        font-size:7.5px;
    }
}


/* V8.7 payment contact compatibility */
.tuklass-payment-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 14px}.tuklass-payment-plan{border:1px solid rgba(18,18,18,.12);border-radius:16px;padding:13px 10px;background:#fff;text-align:center}.tuklass-payment-plan.is-featured{border-color:#98ff00}.tuklass-payment-plan strong{display:block}.tuklass-payment-plan span{display:block;margin-top:4px;font-size:.78rem;color:#6b7280}.tuklass-payment-contact{width:100%;justify-content:center}.tuklass-payment-note{margin:10px 0 0!important;font-size:.78rem!important;color:#70757d!important}@media(max-width:640px){.tuklass-payment-plans{grid-template-columns:1fr}}