/*
 * Pi Jobs — shared mobile fixes.
 * Linked from layouts/admin_layout/header, layouts/applicant/header and layouts/site/header.
 * Admin/employer rules are scoped under .page-content so they win over each page's own <style> block.
 */

/* ── All layouts: long unbroken text (emails, URLs) wraps instead of widening the page ── */
@media (max-width: 767.98px) {
    p, li, dd, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
}

/* ── DataTables "Responsive" extension ──
 * Tables with responsive:true hide columns that don't fit. The extension's stylesheet was never loaded,
 * so the green "+" that expands a row was invisible and hidden columns (incl. actions) couldn't be reached.
 */
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child::before {
    content: '+';
    position: absolute;
    top: 50%;
    left: 6px;
    width: 16px;
    height: 16px;
    margin-top: -9px;
    display: block;
    box-sizing: content-box;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 3px #444;
    background-color: #31b131;
    color: #fff;
    font: bold 14px/16px 'Courier New', Courier, monospace;
    text-align: center;
    text-indent: 0 !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child::before {
    content: '−';
    background-color: #d33333;
}
table.dataTable > tbody > tr.child > td.child { padding: 8px 12px; }
table.dataTable > tbody > tr.child:hover { background: transparent !important; }
table.dataTable > tbody > tr.child ul.dtr-details { display: block; list-style: none; margin: 0; padding: 0; }
table.dataTable > tbody > tr.child ul.dtr-details > li { padding: 6px 0; border-bottom: 1px solid #efefef; white-space: normal; overflow-wrap: anywhere; }
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child { border-bottom: none; }
table.dataTable > tbody > tr.child span.dtr-title { display: inline-block; min-width: 90px; margin-right: 8px; font-weight: 600; }

/* ── Admin / employer panel (layouts/admin_layout) ── */

/* Report & referral tables scroll sideways instead of being cut off */
.page-content .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 1200px) {
    .page-content .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .page-content .insights-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .page-content .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .page-content .stat-card { padding: 10px 12px; gap: 8px; min-width: 0; }
    .page-content .stat-icon { width: 30px; height: 30px; font-size: 14px; }
    .page-content .stat-value { font-size: 18px; }
    .page-content .stat-label,
    .page-content .stat-sub { white-space: normal; }
    .page-content .donut-inner { flex-wrap: wrap; }
    .page-content .donut-card-header,
    .page-content .timeline-card-header { flex-wrap: wrap; gap: 6px; }
    .page-content .table-toolbar { flex-direction: column; align-items: flex-start; }
    .page-content .toolbar-right,
    .page-content .search-box { width: 100%; }
    .page-content .search-input { flex: 1; width: auto; min-width: 0; }
    .page-content .pagination-wrap { flex-direction: column; }
    .page-content .pagination-list { flex-wrap: wrap; justify-content: center; }
}

/* Profile blocks: "wd-100p" (width:100%) beside a photo/icon plus ml-3/mr-3 margins overflowed the row */
@media (max-width: 767.98px) {
    .page-content .d-flex:has(> .wd-100p) { flex-wrap: wrap; }
    .page-content .d-flex > .wd-100p { width: auto; flex: 1 1 200px; min-width: 0; }
}