/* ============================================================
   muj-ucet.css — Fajn Účet
   Styly specifické pro stránku "Můj účet" (dashboard).
   Obecné styly (layout, sidebar, header…) jsou v obecne.css.
   ============================================================ */

/* --- Welcome karta --- */
.welcome-card {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
}
@media (min-width: 768px) {
    .welcome-card { padding: 1.5rem 2rem; }
}
.welcome-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: hsl(var(--foreground));
}
@media (min-width: 768px) {
    .welcome-title { font-size: 1.875rem; }
}
.welcome-subtitle {
    color: hsl(var(--muted-foreground));
    margin-top: 0.25rem;
    font-size: 0.9375rem;
}

/* --- Progress bar (dokončení profilu) --- */
.progress-section { margin-top: 1.5rem; }
.progress-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.progress-label {
    font-size: 0.875rem;
    font-weight: bold;
    color: hsl(var(--foreground));
    white-space: nowrap;
    min-width: 2rem;
}
.progress-label-right {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
    min-width: 2.25rem;
    text-align: right;
}
.progress-container { flex: 1; }
.progress-bar {
    display: flex;
    height: 0.75rem;
    border-radius: 9999px;
    overflow: hidden;
}
.progress-seg               { width: 25%; }
.progress-seg-foto          { background: hsl(var(--success)); }
.progress-seg-zivotopis     { background: hsl(var(--primary)); }
.progress-seg-dotaznik      { background: hsl(var(--accent)); }
.progress-seg-overeni       { background: hsl(var(--border)); }

.progress-labels {
    display: flex;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}
.progress-label-item {
    width: 25%;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.progress-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

/* --- Verifikační tlačítka --- */
.verify-section {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.verify-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    cursor: default;
}
.verify-btn.verified {
    background: hsl(var(--success) / 0.1);
    border-color: hsl(var(--success) / 0.3);
    color: hsl(var(--success));
    font-weight: 500;
}

/* --- Hodnocení & hvězdičky --- */
.rating-section {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid hsl(var(--border));
}
.rating-flex {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 768px) {
    .rating-flex { flex-direction: row; align-items: center; gap: 2rem; }
}
.rating-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.rating-icon-wrapper {
    width: 2.5rem;
    height: 2.5rem;
    background: hsl(var(--primary) / 0.1);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--primary));
}
.rating-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
}
.rating-stars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.125rem;
}
.star-filled { color: hsl(var(--primary)); fill: hsl(var(--primary)); }
.star-empty  { color: hsl(var(--muted)); fill: hsl(var(--muted)); }
.rating-value {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    font-weight: bold;
}

/* --- Odznáčky --- */
.badges-section { flex: 1; }
.badges-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0.5rem;
}
.badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.badge-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    border: 1px solid;
    transition: all 0.15s;
}
.badge-item.earned {
    background: hsl(var(--primary) / 0.1);
    border-color: hsl(var(--primary) / 0.2);
    color: hsl(var(--primary));
    font-weight: 500;
}
.badge-item.not-earned {
    background: hsl(var(--muted) / 0.5);
    border-color: hsl(var(--border));
    color: hsl(var(--muted-foreground));
    opacity: 0.5;
}

/* --- Info box --- */
.info-box {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: hsl(var(--accent) / 0.1);
    border-radius: 0.5rem;
    border: 1px solid hsl(var(--accent) / 0.2);
}
.info-box .info-icon { color: hsl(var(--accent)); flex-shrink: 0; }
.info-box p { font-size: 0.875rem; }
.info-box strong { font-weight: 500; color: hsl(var(--accent)); }
.info-box .info-text { color: hsl(var(--muted-foreground)); margin-left: 0.25rem; }
.info-link {
    color: hsl(var(--accent));
    font-weight: 500;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.info-link:hover { background: hsl(var(--accent) / 0.1); }

/* --- Action cards (výzvy k akci) --- */
.action-card { padding: 1rem 1.25rem; }
@media (min-width: 768px) { .action-card { padding: 1.25rem; } }
.action-card.border-accent   { border: 1px solid hsl(var(--accent) / 0.3); }
.action-card.border-primary  { border: 1px solid hsl(var(--primary) / 0.3); }

.action-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
@media (min-width: 640px) {
    .action-inner { flex-direction: row; align-items: center; }
}
.action-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.action-icon.accent  { background: hsl(var(--accent) / 0.15); color: hsl(var(--accent)); }
.action-icon.primary { background: hsl(var(--primary) / 0.15); color: hsl(var(--primary)); }
.action-content { flex: 1; }
.action-title {
    font-weight: 600;
    font-size: 1rem;
    color: hsl(var(--foreground));
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.action-tag {
    padding: 0.0625rem 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid;
    display: inline-block;
}
.action-tag.important   { border-color: hsl(var(--accent) / 0.5); color: hsl(var(--accent)); }
.action-tag.recommended { border-color: hsl(var(--primary) / 0.5); color: hsl(var(--primary)); }
.action-description {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.25rem;
}
.action-button {
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    border: none;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    width: 100%;
    justify-content: center;
    flex-shrink: 0;
    font-family: inherit;
    text-decoration: none;
    transition: background 0.15s;
}
@media (min-width: 640px) { .action-button { width: auto; } }
.action-button.accent        { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.action-button.accent:hover  { background: hsl(var(--accent) / 0.85); }
.action-button.primary       { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.action-button.primary:hover { background: hsl(var(--primary) / 0.85); }

/* --- Novinky --- */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.news-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: hsl(var(--foreground));
}
.news-item:hover { background: hsl(var(--secondary) / 0.5); }
.news-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.news-icon.novinka    { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }
.news-icon.upozorneni { background: hsl(var(--warning) / 0.1); color: hsl(var(--warning)); }
.news-icon.tip        { background: hsl(var(--success) / 0.1); color: hsl(var(--success)); }
.news-body { flex: 1; min-width: 0; }
.news-title { font-weight: 500; font-size: 0.875rem; }
.news-description {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.news-date {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
}

/* --- Pracovní nabídky --- */
.job-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .job-grid { grid-template-columns: repeat(2, 1fr); }
}
.job-card {
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
}
.job-card:hover {
    border-color: hsl(var(--primary) / 0.5);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.job-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.job-badges { display: flex; align-items: center; gap: 0.5rem; }
.match-badge {
    padding: 0.25rem 0.625rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
}
.match-high   { background: hsl(var(--success)); }
.match-medium { background: hsl(var(--primary)); }
.urgent-badge {
    background: hsl(var(--destructive));
    color: white;
    padding: 0.25rem 0.625rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
}
.job-info { flex: 1; }
.job-title {
    font-weight: 600;
    font-size: 1rem;
    color: hsl(var(--foreground));
    transition: color 0.15s;
}
.job-card:hover .job-title { color: hsl(var(--primary)); }
.job-company {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.job-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-top: auto;
    padding-top: 0.75rem;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}
.job-detail { display: flex; align-items: center; gap: 0.25rem; }
.job-detail.wage { color: hsl(var(--success)); font-weight: 500; }
.job-button {
    width: 100%;
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: none;
    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    display: block;
    transition: background 0.15s;
}
.job-button:hover { background: hsl(var(--primary) / 0.85); }

/* --- Statistiky --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 768px) {
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-card { padding: 1rem; text-align: center; }
.stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
}
.stat-icon.primary { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }
.stat-icon.success { background: hsl(var(--success) / 0.1); color: hsl(var(--success)); }
.stat-icon.warning { background: hsl(var(--warning) / 0.1); color: hsl(var(--warning)); }
.stat-number { font-size: 1.5rem; font-weight: bold; }
.stat-label  { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }

/* --- Články & průvodce --- */
.articles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px)  { .articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .articles-grid { grid-template-columns: repeat(3, 1fr); } }
.article-card {
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.15s;
}
.article-card:hover {
    border-color: hsl(var(--primary) / 0.5);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.article-card.span-2 { grid-column: span 2; }
@media (min-width: 1024px) { .article-card.span-2 { grid-column: span 1; } }

.article-image {
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.article-image.gradient-1 { background: linear-gradient(to bottom right, hsl(var(--primary) / 0.2), hsl(var(--accent) / 0.2)); }
.article-image.gradient-2 { background: linear-gradient(to bottom right, hsl(var(--accent) / 0.2), hsl(var(--success) / 0.2)); }
.article-image.gradient-3 { background: linear-gradient(to bottom right, hsl(var(--success) / 0.2), hsl(var(--primary) / 0.2)); }
.article-image .img-icon  { opacity: 0.4; }

.article-body { padding: 1rem; }
.article-category {
    display: inline-block;
    background: hsl(var(--secondary));
    padding: 0.0625rem 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: hsl(var(--secondary-foreground));
}
.article-title {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    color: hsl(var(--foreground));
    text-decoration: none;
    transition: color 0.15s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-card:hover .article-title { color: hsl(var(--primary)); }
.article-description {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}