/* ═══════════════════════════════════════════════════════
   CR — Change Management System  |  Table & List Styles
   File: cr-tables.css
   Usage: {% load static %}
          <link rel="stylesheet" href="{% static 'css/cr-tables.css' %}">

   Colour palette (Kenyan flag):
     Black   #000000   — headings, table header, primary buttons
     Red     #BE0000   — danger, rejected, high-risk badges
     Green   #007A33   — approved, active, low-risk, hover
     White   #FFFFFF   — card backgrounds, text on dark
   ═══════════════════════════════════════════════════════ */

/* ══════════════════════════════
   CSS CUSTOM PROPERTIES
══════════════════════════════ */
:root {
    --t-black:        #000000;
    --t-red:          #BE0000;
    --t-green:        #007A33;
    --t-white:        #FFFFFF;

    /* Tints */
    --t-green-tint:   #e6f4ec;
    --t-red-tint:     #fdf0f0;
    --t-amber:        #b45309;
    --t-amber-tint:   #fffbeb;

    /* Neutral */
    --t-border:       #e5e7eb;
    --t-stripe:       #f7f7f7;
    --t-hover:        #e6f4ec;
    --t-text:         #1a1a1a;
    --t-text-muted:   #6b7280;
    --t-text-subtle:  #9ca3af;

    /* Table specific */
    --t-head-bg:      #000000;
    --t-head-color:   #ffffff;
    --t-radius:       .8rem;
    --t-shadow:       0 2px 18px rgba(0,0,0,.08);
}

/* ══════════════════════════════
   LIST PAGE LAYOUT
══════════════════════════════ */

.cr-list-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.cr-list-page-title h1 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--t-black);
    margin: 0 0 .2rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    letter-spacing: -.01em;
}

.cr-list-page-title p {
    font-size: .82rem;
    color: var(--t-text-muted);
    margin: 0;
}

/* ══════════════════════════════
   CARD SHELL
══════════════════════════════ */

.cr-list-card {
    background: var(--t-white);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    border: 1px solid var(--t-border);
    overflow: hidden;
}

.cr-list-card-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--t-border);
    background: #f4f4f4;
    position: relative;
}

/* Green left accent stripe on list card headers */
.cr-list-card-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--t-green);
    border-radius: var(--t-radius) 0 0 0;
}

.cr-list-card-icon {
    width: 30px;
    height: 30px;
    border-radius: .45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    flex-shrink: 0;
    background: var(--t-green-tint);
    color: var(--t-green);
    margin-left: .5rem; /* offset for the accent stripe */
}

.cr-list-card-icon.red   { background: var(--t-red-tint); color: var(--t-red); }
.cr-list-card-icon.black { background: #e0e0e0;            color: var(--t-black); }

.cr-list-card-title {
    font-size: .875rem;
    font-weight: 700;
    color: var(--t-black);
    margin: 0;
    flex: 1;
    letter-spacing: -.01em;
}

/* ══════════════════════════════
   BUTTONS
══════════════════════════════ */

.cr-btn-add,
.cr-btn-action {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.25rem;
    border-radius: .6rem;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s, background .15s;
    line-height: 1;
}

/* Add / primary — Kenyan black */
.cr-btn-add,
.cr-btn-action.dark      { background: var(--t-black); color: var(--t-white); }
.cr-btn-add:hover,
.cr-btn-action.dark:hover { opacity: .80; color: var(--t-white); }

/* Approve / confirm — Kenyan green */
.cr-btn-action.green     { background: var(--t-green); color: var(--t-white); }
.cr-btn-action.green:hover { opacity: .85; color: var(--t-white); }

/* Danger / reject — Kenyan red */
.cr-btn-action.red       { background: var(--t-red); color: var(--t-white); }
.cr-btn-action.red:hover { opacity: .85; color: var(--t-white); }

/* Outline / neutral */
.cr-btn-action.outline {
    background: transparent;
    color: var(--t-text);
    border: 1.5px solid var(--t-border);
}
.cr-btn-action.outline:hover {
    background: #f3f4f6;
    color: var(--t-text);
    opacity: 1;
}

.cr-header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ══════════════════════════════
   BADGE COMPONENTS
══════════════════════════════ */

/* Boolean yes/no badge */
.cr-bool-badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: .4rem;
    font-size: .72rem;
    font-weight: 700;
}
.cr-bool-badge.yes { background: var(--t-green-tint); color: var(--t-green); border: 1px solid #a7d7ba; }
.cr-bool-badge.no  { background: var(--t-red-tint);   color: var(--t-red);   border: 1px solid #f5b8b8; }

/* FY / year tag */
.cr-fy-tag {
    display: inline-block;
    padding: .2rem .6rem;
    background: var(--t-green-tint);
    color: var(--t-green);
    border: 1px solid #a7d7ba;
    border-radius: .4rem;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Muted timestamp */
.cr-time-muted { font-size: .75rem; color: var(--t-text-subtle); }

/* Role pill */
.cr-role-list {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.cr-role-pill {
    display: inline-block;
    padding: .18rem .55rem;
    background: #f4f4f4;
    color: var(--t-black);
    border: 1px solid #d1d5db;
    border-radius: .35rem;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Stage / workflow tag */
.cr-stage-tag {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: .4rem;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}
.cr-stage-tag.draft     { background: #f4f4f4;          color: #6b7280; }
.cr-stage-tag.pending   { background: var(--t-amber-tint); color: var(--t-amber); }
.cr-stage-tag.approved  { background: var(--t-green-tint); color: var(--t-green); }
.cr-stage-tag.rejected  { background: var(--t-red-tint);   color: var(--t-red); }
.cr-stage-tag.closed    { background: #f0f0f0;             color: #374151; }
.cr-stage-tag.implemented { background: #e6f4ec; color: var(--t-green); border: 1px solid #a7d7ba; }

/* ══════════════════════════════
   SCORE BADGE
══════════════════════════════ */

.cr-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    padding: 0 .5rem;
    border-radius: .4rem;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1;
}

.cr-score-badge.high    { background: var(--t-red-tint);   color: var(--t-red);   border: 1px solid #f5b8b8; }
.cr-score-badge.medium  { background: var(--t-amber-tint); color: var(--t-amber); border: 1px solid #fde68a; }
.cr-score-badge.low     { background: var(--t-green-tint); color: var(--t-green); border: 1px solid #a7d7ba; }
.cr-score-badge.neutral { background: #f4f4f4;             color: #6b7280;        border: 1px solid #e5e7eb; }

/* ══════════════════════════════
   STATUS PILL
══════════════════════════════ */

.cr-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .7rem;
    border-radius: 2rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}

/* Dot indicator */
.cr-status-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.cr-status-pill.open         { background: var(--t-red-tint);   color: var(--t-red);   }
.cr-status-pill.ongoing      { background: var(--t-amber-tint); color: var(--t-amber); }
.cr-status-pill.closed       { background: var(--t-green-tint); color: var(--t-green); }
.cr-status-pill.pending      { background: #f4f4f4;             color: #6b7280;        }
.cr-status-pill.implemented  { background: var(--t-green-tint); color: var(--t-green); }
.cr-status-pill.cancelled    { background: var(--t-red-tint);   color: var(--t-red);   }

/* ═══════════════════════════════════════════════════════
   TABLE STYLES
   ═══════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.cr-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    background: var(--t-white);
    -webkit-overflow-scrolling: touch;
}

/* ── Table base ── */
.cr-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .8rem;
    color: var(--t-text);
    white-space: nowrap;
}

/* ── Header ── */
.cr-table thead tr th {
    background: var(--t-head-bg);
    color: var(--t-head-color);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .8rem 1rem;
    border: none;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Green bottom accent on table header */
.cr-table thead tr {
    border-bottom: 3px solid var(--t-green);
}

/* Rounded top corners */
.cr-table thead tr th:first-child { border-radius: var(--t-radius) 0 0 0; }
.cr-table thead tr th:last-child  { border-radius: 0 var(--t-radius) 0 0; }

/* Sortable column indicator */
.cr-table thead th.sortable { cursor: pointer; user-select: none; }
.cr-table thead th.sortable:hover { background: #1a1a1a; }

/* ── Body rows ── */
.cr-table tbody tr td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--t-border);
    vertical-align: middle;
    white-space: normal;
    word-break: break-word;
    line-height: 1.5;
}

.cr-table tbody tr:last-child td { border-bottom: none; }

/* Stripe */
.cr-table tbody tr:nth-child(even) td { background: var(--t-stripe); }

/* Hover — Kenyan green tint */
.cr-table tbody tr:hover td {
    background: var(--t-hover);
    transition: background .12s;
}

/* Rounded bottom corners */
.cr-table tbody tr:last-child td:first-child { border-radius: 0 0 0 var(--t-radius); }
.cr-table tbody tr:last-child td:last-child  { border-radius: 0 0 var(--t-radius) 0; }

/* ── Counter cell ── */
.cr-table td.t-counter,
.cr-table th.t-counter {
    text-align: center;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    white-space: nowrap;
    color: var(--t-text-subtle);
    font-size: .72rem;
    font-weight: 700;
}

/* ── Priority label ── */
.cr-priority {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    font-weight: 700;
}
.cr-priority.critical { color: var(--t-red); }
.cr-priority.high     { color: #c2410c; }
.cr-priority.medium   { color: var(--t-amber); }
.cr-priority.low      { color: var(--t-green); }

/* ── Change type tag (CR-specific) ── */
.cr-type-tag {
    display: inline-block;
    padding: .18rem .55rem;
    border-radius: .35rem;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}
.cr-type-tag.standard  { background: #f4f4f4;             color: var(--t-black); border: 1px solid #d1d5db; }
.cr-type-tag.emergency { background: var(--t-red-tint);   color: var(--t-red);   border: 1px solid #f5b8b8; }
.cr-type-tag.normal    { background: var(--t-green-tint); color: var(--t-green); border: 1px solid #a7d7ba; }
.cr-type-tag.preapproved { background: #eff6ff;           color: #2563eb;        border: 1px solid #bfdbfe; }

/* ── Empty state row ── */
.cr-table .t-empty td {
    text-align: center;
    color: var(--t-text-subtle);
    font-size: .8rem;
    padding: 3rem 1rem;
}

/* ── Action icon buttons inside table cells ── */
.cr-tbl-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: .4rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: .75rem;
    transition: background .15s, color .15s;
    background: transparent;
    color: var(--t-text-muted);
}
.cr-tbl-action:hover        { background: #f4f4f4; color: var(--t-black); }
.cr-tbl-action.edit:hover   { background: var(--t-green-tint); color: var(--t-green); }
.cr-tbl-action.delete:hover { background: var(--t-red-tint);   color: var(--t-red); }
.cr-tbl-action.view:hover   { background: #eff6ff;             color: #2563eb; }

/* ── Responsive: stack on small screens ── */
@media (max-width: 640px) {
    .cr-table thead { display: none; }
    .cr-table tbody tr {
        display: block;
        border-bottom: 2px solid var(--t-border);
        padding: .5rem 0;
    }
    .cr-table tbody tr td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: .5rem;
        border: none;
        padding: .4rem 1rem;
        font-size: .8rem;
        white-space: normal;
    }
    .cr-table tbody tr td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--t-text-subtle);
        flex-shrink: 0;
        min-width: 110px;
    }
}