/*
 * Mail module — Apple-inspired component library
 * Defines the custom class system used by all resources/views/mail/** views.
 * (stat-grid, table-card, form-card, badge variants, etc.)
 */

/* ── CSS Variables ──────────────────────────────────────── */
:root {
    /* Mail module tokens */
    --m-bg:           #f5f5f7;   /* Apple page bg */
    --m-surface:      #ffffff;
    --m-border:       #d2d2d7;
    --m-border-light: #e8e8ed;
    --m-radius:       12px;
    --m-radius-sm:    8px;
    --m-shadow:       0 1px 4px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.04);
    --m-shadow-md:    0 4px 16px rgba(0,0,0,.09), 0 0 0 1px rgba(0,0,0,.04);

    /* Typography */
    --text-1: #1d1d1f;
    --text-2: #424245;
    --text-3: #6e6e73;
    --text-4: #aeaeb2;

    /* Brand variable used in template preview + send views */
    --brand:       #00aeef;
    --brand-light: #e6f7fd;
    --brand-muted: #008fc7;

    /* Surface tiers */
    --surface:   #ffffff;
    --surface-2: #fafafa;
    --surface-3: #f5f5f7;

    /* Border aliases */
    --border-2: #c8c8cc;

    /* Generic radius shorthand */
    --radius: 8px;

    /* Semantic bg aliases expected by mail templates */
    --bg-2:   #f5f5f7;
    --border: var(--m-border);

    /* Status palettes */
    --green:        #188038;
    --green-bg:     #f0fdf4;
    --green-border: #bbf7d0;
    --red:          #c0392b;
    --red-bg:       #fff2f2;
    --red-border:   #fecaca;
    --amber:        #a16207;
    --amber-bg:     #fffbeb;
    --amber-border: #fde68a;
}

/* ── Utilities ──────────────────────────────────────────── */
.text-sm   { font-size: .8125rem !important; }
.text-xs   { font-size: .75rem   !important; }
.text-red  { color: var(--red) !important; }
.text-green{ color: var(--green) !important; }
.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-2    { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

@media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } }

/* ── Stat Grid ──────────────────────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--m-surface);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: box-shadow .18s, transform .18s;
}
.stat-card:hover {
    box-shadow: var(--m-shadow-md);
    transform: translateY(-1px);
}

.stat-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-3);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-1);
    letter-spacing: -.03em;
}
.stat-value.brand  { color: #00aeef; }
.stat-value.green  { color: var(--green); }
.stat-value.red    { color: var(--red); }
.stat-value.amber  { color: var(--amber); }

/* ── Table Card ─────────────────────────────────────────── */
.table-card {
    background: var(--m-surface);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    overflow: hidden;
    margin-bottom: 24px;
}

.table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--m-border-light);
    gap: 12px;
    flex-wrap: wrap;
}

.table-title {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--text-1);
}

.table-card table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.table-card table thead th {
    background: #fafafa;
    color: var(--text-3);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 10px 20px;
    border-bottom: 1px solid var(--m-border-light);
    text-align: left;
    white-space: nowrap;
}

.table-card table tbody td {
    padding: 12px 20px;
    color: var(--text-2);
    border-bottom: 1px solid var(--m-border-light);
    vertical-align: middle;
}

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

.table-card table tbody tr:hover { background: #fafafa; }

/* ── Form Card ──────────────────────────────────────────── */
.form-card {
    background: var(--m-surface);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    padding: 24px 28px;
    margin-bottom: 24px;
}

.form-section-title {
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-3);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--m-border-light);
}

.form-footer {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--m-border-light);
    flex-wrap: wrap;
}

/* ── Badge variants ─────────────────────────────────────── */
.badge.sent,
.badge.delivered {
    background: var(--green-bg);
    color: var(--green);
    border: 1px solid var(--green-border);
    font-size: .72rem;
    font-weight: 600;
    padding: .22rem .55rem;
    border-radius: 999px;
}
.badge.failed,
.badge.inactive,
.badge.rejected {
    background: var(--red-bg);
    color: var(--red);
    border: 1px solid var(--red-border);
    font-size: .72rem;
    font-weight: 600;
    padding: .22rem .55rem;
    border-radius: 999px;
}
.badge.pending,
.badge.queued {
    background: var(--amber-bg);
    color: var(--amber);
    border: 1px solid var(--amber-border);
    font-size: .72rem;
    font-weight: 600;
    padding: .22rem .55rem;
    border-radius: 999px;
}
.badge.active {
    background: #e6f7fd;
    color: #00719e;
    border: 1px solid #b3e0f5;
    font-size: .72rem;
    font-weight: 600;
    padding: .22rem .55rem;
    border-radius: 999px;
}
.badge.deleted {
    background: #f5f5f5;
    color: #6e6e73;
    border: 1px solid #d2d2d7;
    font-size: .72rem;
    font-weight: 600;
    padding: .22rem .55rem;
    border-radius: 999px;
}

/* ── Button polish inside mail views ───────────────────── */
.form-card .btn,
.table-card .btn,
.table-header .btn {
    font-size: .8125rem;
    font-weight: 600;
    border-radius: var(--m-radius-sm);
    transition: background .15s, box-shadow .15s, transform .12s;
}

/* Primary */
.form-card .btn-primary,
.table-header .btn-primary {
    background: #00aeef;
    border-color: #00aeef;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,174,239,.3);
}
.form-card .btn-primary:hover,
.table-header .btn-primary:hover {
    background: #008fc7;
    border-color: #008fc7;
    box-shadow: 0 4px 12px rgba(0,174,239,.4);
    transform: translateY(-1px);
}

/* Secondary */
.form-card .btn-secondary,
.table-card .btn-secondary,
.table-header .btn-secondary {
    background: var(--m-surface);
    border: 1.5px solid var(--m-border);
    color: var(--text-2);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.form-card .btn-secondary:hover,
.table-card .btn-secondary:hover,
.table-header .btn-secondary:hover {
    background: #fafafa;
    border-color: #aeaeb2;
    color: var(--text-1);
}

/* Quick-send tile buttons */
.form-card a.btn-secondary[style*="flex-direction:column"] {
    display: flex !important;
    align-items: center;
    background: #fafafa;
    border: 1.5px solid var(--m-border-light);
    border-radius: var(--m-radius);
    color: var(--text-2);
    text-decoration: none;
    transition: box-shadow .18s, transform .15s, background .15s;
}
.form-card a.btn-secondary[style*="flex-direction:column"]:hover {
    background: #f0f0f5;
    box-shadow: 0 4px 14px rgba(0,0,0,.1);
    transform: translateY(-2px);
    color: var(--text-1);
}

/* ── Code elements ──────────────────────────────────────── */
.table-card code,
.form-card code {
    font-size: .78rem;
    background: #f5f5f7;
    border: 1px solid #e8e8ed;
    padding: 2px 7px;
    border-radius: 5px;
    color: #1d1d1f;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ── Alert info/success in mail views ───────────────────── */
.form-card .alert-success,
.alert-success[style*="background:var(--green-bg"] {
    background: var(--green-bg) !important;
    border-color: var(--green-border) !important;
    color: var(--green) !important;
    border-radius: var(--m-radius-sm);
    padding: 14px 16px;
}

/* ── Log detail page extras ─────────────────────────────── */
.log-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
@media (max-width: 768px) { .log-detail-grid { grid-template-columns: 1fr; } }

/* ── Pagination within mail cards ───────────────────────── */
.table-card .pagination {
    margin: 0;
    gap: 4px;
}
.table-card .page-link {
    font-size: .8rem;
    border-radius: 6px !important;
    border-color: var(--m-border-light);
    color: var(--text-2);
    padding: .3rem .6rem;
}
.table-card .page-item.active .page-link {
    background: #00aeef;
    border-color: #00aeef;
    color: #fff;
}

/* ── Form send-view helpers ─────────────────────────────── */
.form-row { margin-bottom: 18px; }
.form-row:last-child { margin-bottom: 0; }

.form-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}
@media (max-width: 640px) { .form-cols { grid-template-columns: 1fr; } }

.form-hint {
    margin-top: 5px;
    font-size: .78rem;
    color: var(--text-3);
    line-height: 1.4;
}

.form-error {
    margin-top: 5px;
    font-size: .78rem;
    color: var(--red);
    font-weight: 500;
}

.required { color: var(--red); }

/* Flash messages inside form-card */
.flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 500;
}
.flash.error {
    background: var(--red-bg);
    border: 1px solid var(--red-border);
    color: var(--red);
}
.flash.success {
    background: var(--green-bg);
    border: 1px solid var(--green-border);
    color: var(--green);
}

/* Dept / User selector list items */
.dept-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--m-border-light);
    transition: background .1s;
    font-size: .85rem;
}
.dept-item:last-child { border-bottom: none; }
.dept-item:hover { background: var(--surface-2); }
.dept-item input[type=checkbox] {
    width: 15px; height: 15px;
    accent-color: var(--brand);
    flex-shrink: 0; cursor: pointer;
}
.dept-name  { flex: 1; font-weight: 500; }
.dept-count { font-size: .72rem; color: var(--text-3); background: var(--surface-3); padding: 2px 7px; border-radius: 100px; }
.dept-item.hidden { display: none; }

/* Source toggle tabs (test send view) */
.source-tab {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: .84rem;
    background: var(--surface);
    color: var(--text-2);
    transition: background .12s, color .12s;
    user-select: none;
}
.source-tab input[type=radio] { display: none; }
.source-tab.active { background: var(--brand-light); color: var(--brand); font-weight: 600; }
.source-tab:hover:not(.active) { background: var(--surface-3); }

/* ── Responsive tweaks ──────────────────────────────────── */
@media (max-width: 576px) {
    .form-card { padding: 16px; }
    .table-card table thead th,
    .table-card table tbody td { padding: 10px 12px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-value { font-size: 1.5rem; }
}