/* ما يخص هذا البرنامج وحده — يُقرأ بعد style.css المشترك. */

/* Green, not the club editions' amber.
 *
 * Not decoration: a league office and one of its clubs are often two windows
 * on the same desk, and an amber sidebar in both is how a competition gets
 * typed into the club's system instead of the league's. The colour is the
 * fastest thing a person reads, so it is what tells the two apart. Same
 * reasoning as static/img/app-icon.svg. */
:root {
    --bs-primary: #0b5c3f;
    --bs-primary-rgb: 11, 92, 63;
    --bs-primary-bg-subtle: #d6f0e4;
    --bs-primary-text-emphasis: #073d2a;

    --accent: #0b5c3f;
    --accent-strong: #084430;
    --accent-contrast: #ffffff;
    --accent-soft: rgba(11, 92, 63, 0.10);
    --accent-border: rgba(11, 92, 63, 0.30);
}

[data-bs-theme="dark"] {
    --bs-primary: #34d399;
    --bs-primary-rgb: 52, 211, 153;
    --accent: #34d399;
    --accent-strong: #10b981;
    --accent-contrast: #052e22;
    --accent-soft: rgba(52, 211, 153, 0.14);
    --accent-border: rgba(52, 211, 153, 0.35);
}

.brand-icon {
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 10px 15px rgba(11, 92, 63, 0.2);
}

[data-bs-theme="dark"] .brand-icon {
    color: var(--accent-contrast);
    box-shadow: 0 10px 15px rgba(52, 211, 153, 0.2);
}

/* The league name is long ("الرابطة الولائية للكاراتيه تودوكاي — مستغانم"),
   far longer than a club name, and it would otherwise push the sidebar
   brand out of its own box. */
.sidebar-brand .brand-name {
    font-size: 0.95rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-brand .brand-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* --------------------------------------------------------------- stat cards */

.stat-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.1rem;
    border-radius: .9rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
}

a.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);
}

.stat-card .stat-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: .75rem;
    font-size: 1.35rem;
}

.stat-card .stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.stat-card .stat-label { font-size: .85rem; color: var(--bs-secondary-color); }
.stat-card .stat-hint { font-size: .75rem; color: var(--bs-secondary-color); }

/* ------------------------------------------------------------------ alerts */

.alert-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .9rem;
    border-radius: .6rem;
    border: 1px solid var(--bs-border-color);
    text-decoration: none;
    color: inherit;
}

.alert-tile .tile-count {
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 2.2rem;
    text-align: center;
}

.alert-tile.is-zero { opacity: .55; }

/* ------------------------------------------------------------- register UI */

/* The search-and-filter bar above every register.
 *
 * `flex-direction: row` is not redundant: this class sits on the same element
 * as `.card`, and Bootstrap's `.card` sets `flex-direction: column`. Without
 * overriding it the filters stacked one per line and the bar grew into a
 * full-page-tall empty box on every list in the system. */
.register-toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    align-items: end;
}

.register-toolbar > div { flex: 0 1 auto; }

.register-toolbar .form-control,
.register-toolbar .form-select { min-width: 9rem; }

/* The search box earns more room than a dropdown: it holds names. */
.register-toolbar input[type="search"] { min-width: 14rem; }

/* Every list page in this system is 6-9 columns wide. On a phone the table
   must scroll inside its own box; without min-width:0 the flex parent lets it
   push the whole page sideways under the sticky header. */
.table-scroll {
    overflow-x: auto;
    min-width: 0;
}

.table-scroll > .table { margin-bottom: 0; }

.register-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

.register-empty i { font-size: 2.5rem; display: block; margin-bottom: .5rem; opacity: .5; }

/* ------------------------------------------------------------- record page */

.record-pairs dt {
    font-size: .8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin-bottom: .1rem;
}

.record-pairs dd { margin-bottom: .85rem; }

.attachment-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.attachment-row:last-child { border-bottom: 0; }
.attachment-row .att-icon { font-size: 1.35rem; color: var(--bs-secondary-color); }

.record-barcode svg { max-width: 100%; height: 55px; }

/* --------------------------------------------------------------------- KPI */

.kpi-row { padding: .85rem 0; border-bottom: 1px solid var(--bs-border-color); }
.kpi-row:last-child { border-bottom: 0; }
.kpi-row .progress { height: .55rem; }

/* --------------------------------------------------------- permission grid */

.perm-table th, .perm-table td { vertical-align: middle; }
.perm-table td.perm-cell { text-align: center; width: 5.5rem; }
.perm-table .perm-group td {
    background: var(--bs-tertiary-bg);
    font-weight: 700;
}

/* --------------------------------------------------------------- calendar */

.calendar-month {
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    overflow: hidden;
    height: 100%;
}

.calendar-month > h3 {
    margin: 0;
    padding: .5rem .8rem;
    font-size: .95rem;
    background: var(--bs-tertiary-bg);
}

.calendar-month ul { list-style: none; margin: 0; padding: .5rem .8rem; }
.calendar-month li { padding: .3rem 0; font-size: .85rem; border-bottom: 1px dashed var(--bs-border-color); }
.calendar-month li:last-child { border-bottom: 0; }
.calendar-month .cal-empty { color: var(--bs-secondary-color); font-size: .8rem; padding: .6rem .8rem; }