/* ─────────────────────────────────────────────────────
   admin.css  -  Admin panel styles
   ───────────────────────────────────────────────────── */

/* Main admin page layout */
#page-admin {
    padding-top: calc(var(--nav-h) + 56px);   /* space for fixed navbar */
    padding-bottom: 80px;
    background: var(--bg);
}


/* ── Tabs ───────────────────────────────────────────── */

/* Tabs container */
.admin-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 26px; overflow-x: auto;
}

/* Individual tab */
.admin-tab {
  padding: 12px 20px;
  border-bottom: 2px solid transparent;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--text-s);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  white-space: nowrap;
  transition: var(--tr);
}

/* Active tab state */
.admin-tab.active {
    border-bottom-color: var(--gold);
    color: var(--gold);
}

/* Hover state */
.admin-tab:hover {
    color: var(--text-m);
}

/* Panels (tab content) */
.admin-panel {
    display: none;
}

.admin-panel.active {
    display: block;
}



/* ── Stats ──────────────────────────────────────────── */

/* Stats grid layout */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
    gap: 2px;
    margin-bottom: 26px;
    background: var(--border);
}

/* Force 2-column stats layout on smaller screens */
@media (max-width: 900px) {
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Individual stat card */
.stat-card {
    background: var(--bg2);
    padding: 20px;
}

/* Icon inside stat */
.stat-card .stat-icon {
    font-size: 1.3rem;
    margin-bottom: 6px;
    color: var(--gold);
 }

/* Main stat value */
.stat-card .stat-val {
    font-family: var(--font-d);
    font-size: 1.8rem;
    color: var(--gold);
    font-weight: 300;
}

/* Stat label */
.stat-card .stat-lbl {
    font-size: .65rem;
    letter-spacing: .1em;
    color: var(--text-s);
    text-transform: uppercase;
}


/* ── Table ──────────────────────────────────────────── */

/* Table layout */
.admin-table {
    width: 100%;
    border-collapse: collapse;
}

/* Table cells */
.admin-table th,
.admin-table td {
    padding: 12px 13px;
    text-align: left;
    font-size: .84rem;
    border-bottom: 1px solid var(--border);
}

/* Table headers */
.admin-table th {
    color: var(--text-s);
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .65rem;
    background: var(--bg2);
}

/* Row hover effect */
.admin-table tr:hover td {
    background: var(--bg2);
}


/* ── List items ─────────────────────────────────────── */

/* Service/admin item container */
.svc-admin-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

/* Service info text */
.svc-admin-info h4 {
    margin-bottom: 2px;
    font-size: .9rem;
}

.svc-admin-info p {
    font-size: .76rem;
}


/* ── Courses admin ──────────────────────────────────── */

/* Course item container */
.course-admin-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 16px;
    margin-bottom: 8px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Course thumbnail */
.course-admin-thumb {
    width: 80px;
    height: 54px;
    border-radius: 6px;
    background: var(--bg3);
    border: 1px solid var(--border);
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
    overflow: hidden;
}

/* Thumbnail image */
.course-admin-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Course text info */
.course-admin-info {
    flex: 1;
    min-width: 0;
}

.course-admin-info h4 {
    font-size: .92rem;
    margin-bottom: 3px;
}

.course-admin-info p {
    font-size: .78rem;
}

/* Action buttons (edit/delete etc.) */
.course-admin-actions {
    display: flex;
    gap: 7px;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
}


/* ── Upload zone ────────────────────────────────────── */

/* Drag & drop upload area */
.upload-zone {
    background: var(--bg2);
    border: 1.5px dashed var(--border);
    border-radius: var(--r2);
    padding: 40px;
    text-align: center;
    transition: var(--tr);
    cursor: pointer;
}

/* Hover / drag-over state */
.upload-zone:hover,
.upload-zone.drag-over {
    border-color: var(--gold);
    background: var(--rose-pale);
}

/* Hide file input */
.upload-zone input[type=file] {
    display: none;
}


/* ── Reviews (admin) ────────────────────────────────── */

/* Review card */
.review-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 17px;
    margin-bottom: 8px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* Hidden review (dimmed) */
.review-card.hidden-review {
    opacity: .4;
}

/* Review content */
.review-body {
    flex: 1;
}

/* Author name */
.review-author {
    font-weight: 400;
    font-size: .9rem;
    margin-bottom: 4px;
}

/* Review text */
.review-comment {
    font-size: .84rem;
    color: var(--text-m);
    line-height: 1.5;
}

/* Review date */
.review-date {
    font-size: .7rem;
    color: var(--text-s);
    margin-top: 5px;
}


/* ── Profile edit ───────────────────────────────────── */

/* Profile photo edit layout */
.profile-photo-edit {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

/* Profile thumbnail */
.profile-photo-thumb {
    width: 80px;
    height: 80px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--bg3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
    overflow: hidden;
}

/* Profile image inside thumbnail */
.profile-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ── Cert photos (admin) ────────────────────────────── */

/* Certificates grid */
.cert-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px,1fr));
    gap: 10px;
    margin-bottom: 12px;
}

/* Certificate item */
.cert-admin-item {
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg3);
    position: relative;
}

/* Certificate image */
.cert-admin-item img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
}

/* Certificate label */
.cert-admin-item-label {
    font-size: .7rem;
    color: var(--text-s);
    padding: 5px 7px;
    text-align: center;
    word-break: break-word;
}

/* Delete button */
.cert-admin-delete {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(180,60,60,.85);
    border: none;
    color: #fff;
    font-size: .72rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tr);
}

.cert-admin-delete:hover {
    background: rgba(180,60,60,1);
}