/* Khatma ====================================================================
   Flat native-app language: no surface gradients (only the progress bar fill
   and the progress ring keep theirs), one card treatment, no shadows, and the
   habit widget matched to the copy on the home page so the two screens look
   identical.
   ========================================================================== */

/* .app-content already supplies the gutter and max width. */
.khatma-page-container {
    max-width: var(--container);
    margin: 0 auto;
}

/* Hero ---------------------------------------------------------------------
   Was a radial wash stacked on a linear tint fading into the surface. Now the
   same flat accent panel every page hero uses. */
.khatma-hero {
    margin-block-end: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    padding: var(--space-5);
    background: var(--primary-color);
    background-image: none;
    color: var(--on-primary);
    box-shadow: none;
}

[data-theme="dark"] .khatma-hero {
    border-color: rgba(255, 255, 255, 0.08);
    background: #16391d;
    background-image: none;
    color: #e9f4ec;
    box-shadow: none;
}

/* Chips and buttons on an accent panel are translucent overlays; a second
   green fill on green would disappear. */
.khatma-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    margin-block-end: var(--space-3);
}

.khatma-hero h2 {
    margin: 0 0 var(--space-3);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    color: inherit;
}

.khatma-hero p {
    margin: 0 0 var(--space-5);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: inherit;
    opacity: 0.86;
    max-width: 62ch;
}

.khatma-hero-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.khatma-hero-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.26);
    min-height: var(--tap-target);
    padding-block: var(--space-3);
    padding-inline: var(--space-5);
    background: rgba(255, 255, 255, 0.16);
    color: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    box-shadow: none;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.khatma-hero-btn.secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.32);
    color: inherit;
    box-shadow: none;
}

.khatma-hero-btn:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.38);
    color: inherit;
    box-shadow: none;
}

.khatma-hero-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.44);
    color: inherit;
    box-shadow: none;
}

/* Habit dashboard ----------------------------------------------------------
   These selectors are duplicated byte-for-byte in index.css (the two pages
   load different stylesheets). Values are kept in step with that copy so the
   widget looks the same on both screens. */
.habit-dashboard-section {
    margin-block-end: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    /* Was a primary-tinted gradient that fought with every card on top of it. */
    background: var(--surface-1);
    box-shadow: none;
}

[data-theme="dark"] .habit-dashboard-section {
    background: var(--surface-1);
}

.habit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
    flex-wrap: wrap;
}

.habit-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    letter-spacing: -0.01em;
}

.habit-title i {
    color: var(--primary-color);
    font-size: 1.1em;
    flex-shrink: 0;
}

.habit-streak-card {
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-block-end: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    border: 1px solid var(--border-color);
    background: var(--surface-1);
    box-shadow: none;
}

.habit-streak-main {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
}

.habit-streak-number {
    font-size: var(--text-2xl);
    line-height: 1;
    font-weight: var(--weight-bold);
    color: var(--text-color);
    letter-spacing: -0.02em;
    font-feature-settings: "tnum";
}

.habit-streak-label {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-block-end: var(--space-1);
    font-weight: var(--weight-medium);
}

/* Was `text-align: left`, which pins the text to the physical left edge and
   does not flip with direction. */
.habit-streak-meta {
    text-align: end;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

.habit-rings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.habit-ring-card {
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
    border: 1px solid var(--border-color);
    background: var(--surface-2);
    box-shadow: none;
}

/* Progress ring: the conic gradient IS the fill, so it stays. */
.habit-ring {
    --ring-percent: 0;
    width: 86px;
    height: 86px;
    margin: 0 auto var(--space-3);
    border-radius: var(--radius-full);
    background: conic-gradient(var(--primary-color) calc(var(--ring-percent) * 1%), rgba(var(--primary-rgb), 0.18) 0%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-bold);
    color: var(--text-color);
}

/* Punches the centre out of the ring — structural, not decorative. */
.habit-ring::after {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    border: 1px solid var(--border-color);
}

.habit-ring span {
    position: relative;
    z-index: var(--z-base);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    font-feature-settings: "tnum";
}

.habit-ring-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    margin-block-end: var(--space-1);
    color: var(--text-color);
}

.habit-ring-meta {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Khatma cards ------------------------------------------------------------- */
.khatma-section {
    margin-block-end: var(--space-4);
}

.khatma-card {
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: none;
}

.khatma-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text-color);
    letter-spacing: -0.01em;
    margin-block-end: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.khatma-title i {
    color: var(--primary-color);
}

.khatma-subtitle {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-block-end: var(--space-4);
}

.khatma-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    margin-block-end: var(--space-3);
}

.khatma-input {
    width: 100%;
    border: 1px solid var(--border-color);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    color: var(--text-color);
    min-height: var(--tap-target);
    padding-block: var(--space-3);
    padding-inline: var(--space-3);
    font-family: inherit;
    /* 16px minimum so iOS does not zoom the page on focus. */
    font-size: var(--text-md);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.khatma-input:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.khatma-btn {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--primary-color);
    color: var(--on-primary);
    min-height: var(--tap-target);
    padding-block: var(--space-3);
    padding-inline: var(--space-5);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.khatma-btn:hover {
    background: var(--primary-light);
}

.khatma-btn.secondary {
    background: var(--surface-2);
    border-color: var(--border-color);
    color: var(--text-color);
}

.khatma-btn.secondary:hover {
    background: var(--surface-3);
}

.khatma-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
    margin-block-end: var(--space-4);
}

/* Was `--bg-color` — the page background painted on a card, which read as a
   hole in dark mode. */
.khatma-stat {
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    text-align: center;
}

.khatma-stat-value {
    color: var(--text-color);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    margin-block-end: var(--space-1);
    font-feature-settings: "tnum";
}

.khatma-stat-label {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.khatma-today-target {
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-size: var(--text-base);
    color: var(--text-color);
    margin-block-end: var(--space-3);
}

.khatma-progress {
    width: 100%;
    height: 8px;
    border-radius: var(--radius-full);
    background: rgba(var(--primary-rgb), 0.12);
    overflow: hidden;
    margin-block-end: var(--space-4);
}

/* Progress fill: a ramp genuinely helps read the bar, so this gradient stays. */
.khatma-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    transition: width var(--transition-slow);
}

.khatma-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.khatma-read-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
}

@media (max-width: 768px) {
    .khatma-hero {
        padding: var(--space-5);
        border-radius: var(--radius-lg);
    }

    .khatma-hero h2 {
        font-size: var(--text-xl);
    }

    .khatma-hero-actions {
        flex-direction: column;
    }

    .khatma-hero-btn {
        justify-content: center;
    }

    /* Matches the home page: the three rings stack on a phone. */
    .habit-rings-grid {
        grid-template-columns: 1fr;
    }

    .habit-dashboard-section,
    .khatma-card {
        padding: var(--space-4);
    }

    .habit-streak-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .habit-streak-number {
        font-size: var(--text-2xl);
    }

    .habit-streak-meta {
        width: 100%;
        /* Was `text-align: right` — start is the same edge under RTL but
           flips correctly if the document direction ever changes. */
        text-align: start;
    }

    .khatma-read-row {
        grid-template-columns: 1fr;
    }

    .khatma-actions {
        grid-template-columns: 1fr;
    }
}