/**
 * OpenCATS Recruiter Dashboard — Front-end styles.
 *
 * Design principles:
 *  - Inherits the active WordPress theme's body font, base link color, and line-height.
 *  - Scoped entirely within #ocr-dashboard to prevent theme collisions.
 *  - CSS custom properties for the 5-color system so admins can override via :root.
 *  - Flexbox-first layout, mobile-first breakpoints.
 */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
#ocr-dashboard {
    --ocr-accent:      #1d6fa4;   /* Primary brand — deep teal-blue            */
    --ocr-accent-2:    #2e9c6e;   /* Secondary accent — muted green            */
    --ocr-surface:     #ffffff;   /* Card / panel backgrounds                  */
    --ocr-bg:          #f4f6f8;   /* Page background                           */
    --ocr-border:      #dde2e8;   /* Borders and dividers                      */
    --ocr-text:        #1a2636;   /* Body text                                 */
    --ocr-text-muted:  #6b7685;   /* Secondary / helper text                   */
    --ocr-danger:      #c0392b;   /* Destructive actions                       */
    --ocr-radius:      6px;
    --ocr-shadow:      0 1px 3px rgba(0,0,0,.10), 0 1px 1px rgba(0,0,0,.06);
}

/* ── Reset (scoped) ─────────────────────────────────────────────────────────── */
#ocr-dashboard *,
#ocr-dashboard *::before,
#ocr-dashboard *::after {
    box-sizing: border-box;
}
#ocr-dashboard {
    background:   var(--ocr-bg);
    color:        var(--ocr-text);
    font-size:    15px;
    line-height:  1.5;
    border-radius: var(--ocr-radius);
    overflow:     hidden;
}

/* ── Top bar ────────────────────────────────────────────────────────────────── */
.ocr-topbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      var(--ocr-accent);
    color:           #fff;
    padding:         0.6rem 1.25rem;
    font-size:       14px;
}
.ocr-topbar__brand {
    font-weight: 700;
    letter-spacing: .02em;
}
.ocr-topbar__user {
    opacity: .85;
}

/* ── Tab navigation ─────────────────────────────────────────────────────────── */
.ocr-tabs {
    display:    flex;
    background: var(--ocr-surface);
    border-bottom: 2px solid var(--ocr-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ocr-tab {
    padding:         0.75rem 1.25rem;
    color:           var(--ocr-text-muted);
    text-decoration: none;
    font-size:       14px;
    font-weight:     500;
    white-space:     nowrap;
    border-bottom:   2px solid transparent;
    margin-bottom:   -2px;
    transition:      color .15s, border-color .15s;
}
.ocr-tab:hover,
.ocr-tab:focus {
    color:         var(--ocr-accent);
    outline:       none;
}
.ocr-tab--active {
    color:         var(--ocr-accent);
    border-color:  var(--ocr-accent);
}

/* ── Panel ──────────────────────────────────────────────────────────────────── */
.ocr-panel {
    padding: 1.5rem;
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.ocr-card {
    background:    var(--ocr-surface);
    border:        1px solid var(--ocr-border);
    border-radius: var(--ocr-radius);
    box-shadow:    var(--ocr-shadow);
}
.ocr-card__header {
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    padding:        1rem 1.25rem 0.75rem;
    border-bottom:  1px solid var(--ocr-border);
}
.ocr-card__title {
    margin:      0;
    font-size:   16px;
    font-weight: 600;
    color:       var(--ocr-text);
}
.ocr-card__action {
    font-size:       13px;
    color:           var(--ocr-accent);
    text-decoration: none;
}
.ocr-card__body {
    padding: 1.25rem;
    overflow-x: auto;
}

/* ── KPI grid ───────────────────────────────────────────────────────────────── */
.ocr-kpi-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1rem;
    margin-bottom:         1.5rem;
}
@media (min-width: 640px) {
    .ocr-kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
.ocr-kpi-card {
    background:    var(--ocr-surface);
    border:        1px solid var(--ocr-border);
    border-radius: var(--ocr-radius);
    box-shadow:    var(--ocr-shadow);
    padding:       1.25rem 1rem 1rem;
    display:       flex;
    flex-direction:column;
    gap:           0.25rem;
}
.ocr-kpi-card__value {
    font-size:   2rem;
    font-weight: 700;
    color:       var(--ocr-accent);
    line-height: 1;
}
.ocr-kpi-card__label {
    font-size:  13px;
    color:      var(--ocr-text-muted);
}
.ocr-kpi-card__link {
    font-size:       12px;
    color:           var(--ocr-accent);
    text-decoration: none;
    margin-top:      0.25rem;
}

/* ── Home two-column layout ─────────────────────────────────────────────────── */
.ocr-home-cols {
    display: flex;
    gap:     1.25rem;
    flex-wrap: wrap;
}
.ocr-home-col {
    flex: 1 1 280px;
    min-width: 0;
}

/* ── Activity list (home widget) ────────────────────────────────────────────── */
.ocr-activity-list,
.ocr-event-list {
    list-style: none;
    margin:     0;
    padding:    0;
}
.ocr-activity-item,
.ocr-event-item {
    padding:       0.75rem 1.25rem;
    border-bottom: 1px solid var(--ocr-border);
}
.ocr-activity-item:last-child,
.ocr-event-item:last-child {
    border-bottom: none;
}
.ocr-activity-item__meta {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   12px;
    color:       var(--ocr-text-muted);
    margin-bottom: 0.2rem;
}
.ocr-activity-item__who {
    font-weight: 600;
    font-size:   14px;
}
.ocr-activity-item__job,
.ocr-activity-item__notes {
    font-size: 13px;
    color:     var(--ocr-text-muted);
}
.ocr-event-item {
    display:     flex;
    align-items: flex-start;
    gap:         0.75rem;
}
.ocr-event-item__date-block {
    background:    var(--ocr-accent);
    color:         #fff;
    border-radius: var(--ocr-radius);
    padding:       0.25rem 0.5rem;
    text-align:    center;
    min-width:     44px;
    flex-shrink:   0;
}
.ocr-event-item__day  { font-size: 1.2rem; font-weight: 700; line-height: 1; }
.ocr-event-item__mon  { font-size: 10px; text-transform: uppercase; }
.ocr-event-item__title{ font-weight: 600; font-size: 14px; }
.ocr-event-item__sub  {
    display:     flex;
    flex-wrap:   wrap;
    gap:         0.4rem;
    font-size:   12px;
    color:       var(--ocr-text-muted);
    margin-top:  0.2rem;
    align-items: center;
}

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.ocr-badge {
    display:       inline-flex;
    align-items:   center;
    padding:       2px 7px;
    border-radius: 20px;
    font-size:     11px;
    font-weight:   600;
    line-height:   1.6;
    white-space:   nowrap;
}
.ocr-badge--type {
    background: #e8f0fc;
    color:      var(--ocr-accent);
}
.ocr-badge--hot {
    background: #fdecea;
    color:      var(--ocr-danger);
}

/* ── Toolbar ────────────────────────────────────────────────────────────────── */
.ocr-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             0.75rem;
    margin-bottom:   1rem;
}
.ocr-toolbar__search {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    flex-wrap:   wrap;
}

/* ── Inputs / Selects ───────────────────────────────────────────────────────── */
.ocr-input,
.ocr-select {
    background:    var(--ocr-surface);
    color:         var(--ocr-text);
    border:        1px solid var(--ocr-border);
    border-radius: var(--ocr-radius);
    padding:       0.45rem 0.75rem;
    font-size:     14px;
    line-height:   1.4;
    width:         100%;
    transition:    border-color .15s, box-shadow .15s;
    appearance:    auto;
}
.ocr-input:focus,
.ocr-select:focus {
    outline:      none;
    border-color: var(--ocr-accent);
    box-shadow:   0 0 0 3px rgba(29,111,164,.15);
}
textarea.ocr-input { resize: vertical; }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.ocr-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.35rem;
    padding:         0.45rem 1rem;
    border:          1px solid transparent;
    border-radius:   var(--ocr-radius);
    font-size:       14px;
    font-weight:     500;
    cursor:          pointer;
    white-space:     nowrap;
    transition:      background .15s, border-color .15s, color .15s;
    text-decoration: none;
}
.ocr-btn:focus-visible { outline: 2px solid var(--ocr-accent); outline-offset: 2px; }
.ocr-btn--primary {
    background: var(--ocr-accent);
    color:      #fff;
    border-color: var(--ocr-accent);
}
.ocr-btn--primary:hover { background: #165e8c; border-color: #165e8c; }
.ocr-btn--secondary {
    background:   var(--ocr-surface);
    color:        var(--ocr-text);
    border-color: var(--ocr-border);
}
.ocr-btn--secondary:hover { background: var(--ocr-bg); }
.ocr-btn--danger {
    background:   var(--ocr-danger);
    color:        #fff;
    border-color: var(--ocr-danger);
}
.ocr-btn--danger:hover { background: #a93226; border-color: #a93226; }
.ocr-btn--ghost {
    background:   transparent;
    color:        var(--ocr-accent);
    border-color: var(--ocr-accent);
}
.ocr-btn--ghost:hover { background: rgba(0,0,0,.04); }
.ocr-btn-icon {
    background: none;
    border:     none;
    cursor:     pointer;
    padding:    0.2rem 0.5rem;
    font-size:  16px;
    border-radius: var(--ocr-radius);
    transition: background .15s;
}
.ocr-btn-icon--danger { color: var(--ocr-danger); }
.ocr-btn-icon--danger:hover { background: #fdecea; }

/* ── Tables ─────────────────────────────────────────────────────────────────── */
.ocr-table-wrap { overflow-x: auto; }
.ocr-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       14px;
    background:      var(--ocr-surface);
    border-radius:   var(--ocr-radius);
    overflow:        hidden;
    border:          1px solid var(--ocr-border);
}
.ocr-table thead tr {
    background:  var(--ocr-bg);
    border-bottom: 2px solid var(--ocr-border);
}
.ocr-table th,
.ocr-table td {
    padding:     0.65rem 0.9rem;
    text-align:  left;
    border-bottom: 1px solid var(--ocr-border);
    vertical-align: middle;
}
.ocr-table th { font-weight: 600; font-size: 13px; color: var(--ocr-text-muted); }
.ocr-table tbody tr:last-child td { border-bottom: none; }
.ocr-table tbody tr:hover { background: var(--ocr-bg); }
.ocr-table .ocr-loading,
.ocr-table .ocr-empty { text-align: center; color: var(--ocr-text-muted); padding: 2rem; }
.ocr-notes-cell { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocr-muted { color: var(--ocr-text-muted); }

/* ── Pagination ─────────────────────────────────────────────────────────────── */
.ocr-pagination {
    display:     flex;
    align-items: center;
    gap:         0.35rem;
    flex-wrap:   wrap;
    margin-top:  0.75rem;
    font-size:   13px;
}
.ocr-page-btn {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    width:         30px;
    height:        30px;
    border:        1px solid var(--ocr-border);
    border-radius: var(--ocr-radius);
    color:         var(--ocr-text);
    text-decoration: none;
    font-size:     13px;
    transition:    background .15s;
}
.ocr-page-btn--active {
    background:   var(--ocr-accent);
    color:        #fff;
    border-color: var(--ocr-accent);
}
.ocr-page-btn:hover:not(.ocr-page-btn--active) { background: var(--ocr-bg); }
.ocr-pagination__total { color: var(--ocr-text-muted); margin-left: 0.5rem; }

/* ── Modals ─────────────────────────────────────────────────────────────────── */
.ocr-modal {
    position: fixed;
    inset:    0;
    z-index:  9999;
    display:  flex;
    align-items: center;
    justify-content: center;
    padding:  1rem;
}
.ocr-modal[hidden] { display: none; }
.ocr-modal__backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, .45);
}
.ocr-modal__box {
    position:      relative;
    background:    var(--ocr-surface);
    border-radius: var(--ocr-radius);
    box-shadow:    0 8px 32px rgba(0,0,0,.18);
    width:         100%;
    max-width:     560px;
    max-height:    90vh;
    overflow-y:    auto;
    animation:     ocr-modal-in .18s ease;
}
.ocr-modal--wide .ocr-modal__box { max-width: 800px; }
@keyframes ocr-modal-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0);     }
}
.ocr-modal__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1rem 1.25rem;
    border-bottom:   1px solid var(--ocr-border);
    position:        sticky;
    top:             0;
    background:      var(--ocr-surface);
    z-index:         1;
}
.ocr-modal__title {
    margin:      0;
    font-size:   17px;
    font-weight: 700;
    color:       var(--ocr-text);
}
.ocr-modal__close {
    background:    none;
    border:        none;
    font-size:     22px;
    cursor:        pointer;
    color:         var(--ocr-text-muted);
    padding:       0 0.25rem;
    border-radius: var(--ocr-radius);
    line-height:   1;
}
.ocr-modal__close:hover { color: var(--ocr-text); background: var(--ocr-bg); }

/* ── Forms ──────────────────────────────────────────────────────────────────── */
.ocr-form {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.ocr-form__row {
    display:  flex;
    gap:      0.85rem;
    flex-wrap: wrap;
}
.ocr-form__field {
    flex:       1 1 180px;
    display:    flex;
    flex-direction: column;
    gap:        0.3rem;
    min-width:  0;
}
.ocr-form__field--grow { flex: 2 1 220px; }
.ocr-form__field label {
    font-size:   13px;
    font-weight: 600;
    color:       var(--ocr-text);
}
.ocr-req { color: var(--ocr-danger); }
.ocr-form__checks {
    display:  flex;
    gap:      1.25rem;
    flex-wrap: wrap;
}
.ocr-check {
    display:     flex;
    align-items: center;
    gap:         0.35rem;
    font-size:   14px;
    cursor:      pointer;
}
.ocr-form__footer {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    flex-wrap:   wrap;
    margin-top:  0.25rem;
}
.ocr-form__msg {
    font-size:  13px;
    flex:       1;
    min-width:  0;
}
.ocr-form__msg--success { color: var(--ocr-accent-2); }
.ocr-form__msg--error   { color: var(--ocr-danger);   }

/* ── Calendar ───────────────────────────────────────────────────────────────── */
.ocr-cal-nav {
    display:     flex;
    align-items: center;
    gap:         1rem;
    flex-wrap:   wrap;
    margin-bottom: 1rem;
}
.ocr-cal-nav__title {
    margin:      0;
    font-size:   20px;
    font-weight: 700;
    flex:        1;
    text-align:  center;
}
.ocr-cal-add-btn { margin-left: auto; }

.ocr-cal-grid {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   1px;
    background:            var(--ocr-border);
    border:                1px solid var(--ocr-border);
    border-radius:         var(--ocr-radius);
    overflow:              hidden;
}
.ocr-cal-grid__header {
    background:  var(--ocr-bg);
    padding:     0.5rem 0;
    text-align:  center;
    font-size:   12px;
    font-weight: 700;
    color:       var(--ocr-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.ocr-cal-cell {
    background:  var(--ocr-surface);
    min-height:  90px;
    padding:     0.35rem 0.4rem;
    display:     flex;
    flex-direction: column;
    gap:         0.2rem;
}
.ocr-cal-cell--empty { background: var(--ocr-bg); }
.ocr-cal-cell--today { background: #eef6fd; }
.ocr-cal-cell__day-num {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           26px;
    height:          26px;
    border-radius:   50%;
    font-size:       13px;
    font-weight:     600;
    cursor:          pointer;
    background:      none;
    border:          none;
    color:           var(--ocr-text);
    align-self:      flex-start;
    transition:      background .15s;
}
.ocr-cal-cell--today .ocr-cal-cell__day-num {
    background: var(--ocr-accent);
    color:      #fff;
}
.ocr-cal-cell__day-num:hover { background: var(--ocr-bg); }
.ocr-cal-cell--today .ocr-cal-cell__day-num:hover { background: #165e8c; }

.ocr-cal-event {
    display:         flex;
    flex-direction:  column;
    background:      #e8f0fc;
    color:           var(--ocr-accent);
    border-left:     3px solid var(--ocr-accent);
    border-radius:   0 3px 3px 0;
    padding:         2px 4px;
    font-size:       11px;
    line-height:     1.3;
    cursor:          pointer;
    border-top:      none;
    border-right:    none;
    border-bottom:   none;
    text-align:      left;
    transition:      background .15s;
    width:           100%;
}
.ocr-cal-event:hover { background: #d1e4f5; }
.ocr-cal-event--type-1 { background: #e8f5e9; color: var(--ocr-accent-2); border-color: var(--ocr-accent-2); }
.ocr-cal-event--type-2 { background: #fff3e0; color: #e07b39; border-color: #e07b39; }
.ocr-cal-event--type-3 { background: #f3e5f5; color: #8e44ad; border-color: #8e44ad; }
.ocr-cal-event__time  { font-weight: 600; font-size: 10px; }
.ocr-cal-event__title { font-weight: 500; }
.ocr-cal-event__who   { color: inherit; opacity: .75; font-size: 10px; }

/* ── Reports ────────────────────────────────────────────────────────────────── */
.ocr-reports-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1.25rem;
    margin-bottom:         1.25rem;
}
@media (min-width: 720px) {
    .ocr-reports-grid { grid-template-columns: 1fr 1fr; }
    .ocr-card--full   { grid-column: 1 / -1; }
}
.ocr-chart { display: block; overflow: visible; }
.ocr-chart__label { font-family: inherit; }
.ocr-chart__value { font-family: inherit; }

/* ── Candidate detail panel ─────────────────────────────────────────────────── */
.ocr-detail { padding: 1.25rem; }
.ocr-detail-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0.5rem 1.5rem;
    font-size:             14px;
    margin-bottom:         1.25rem;
}
.ocr-detail-grid dt {
    font-weight: 600;
    color:       var(--ocr-text-muted);
    font-size:   12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ocr-detail-grid dd {
    margin:    0;
    color:     var(--ocr-text);
    word-break: break-word;
}
.ocr-detail-section { margin-bottom: 1.5rem; }
.ocr-detail-section h3 {
    font-size:   14px;
    font-weight: 700;
    color:       var(--ocr-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--ocr-border);
    padding-bottom: .35rem;
    margin:      0 0 .75rem;
}

/* ── Misc helpers ───────────────────────────────────────────────────────────── */
.ocr-empty   { text-align: center; color: var(--ocr-text-muted); padding: 1.5rem 1rem; font-size: 14px; }
.ocr-loading { text-align: center; color: var(--ocr-text-muted); padding: 1.5rem; }
.ocr-login-notice,
.ocr-access-denied,
.ocr-error {
    padding:       1rem 1.25rem;
    border-radius: var(--ocr-radius);
    font-size:     15px;
    margin:        1rem 0;
}
.ocr-login-notice  { background: #e8f0fc; color: var(--ocr-accent); }
.ocr-access-denied { background: #fdecea; color: var(--ocr-danger); }
.ocr-error         { background: #fff3e0; color: #b7550a; }

/* ── Responsive tweaks ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .ocr-panel          { padding: 1rem; }
    .ocr-kpi-grid       { grid-template-columns: 1fr 1fr; }
    .ocr-cal-grid       { font-size: 11px; }
    .ocr-cal-cell       { min-height: 60px; }
    .ocr-form__row      { flex-direction: column; }
}