/* Lists (every table page) on a phone: a compact toolbar and cards whose names wrap instead of being cut with "…".
   The main stylesheet only holds the classes the templates used, so the phone rules live here. */
@media (max-width: 767px) {
    .list-toolbar { padding: .65rem; gap: .5rem; }
    .list-toolbar > form { flex: 1 1 100%; flex-wrap: nowrap; }          /* search and Filter side by side */
    .list-toolbar .list-actions { flex: 1 1 100%; flex-wrap: nowrap; justify-content: flex-end; gap: .4rem; }
    .list-toolbar .list-actions .btn-primary { flex: 1 1 auto; justify-content: center; }
    .list-toolbar .list-actions > * { flex-shrink: 0; }
    .list-toolbar .list-actions .btn-primary { flex-shrink: 1; }
    .list-toolbar .list-actions form { display: inline-flex; }

    /* cards on a grey ground, like an app */
    .list-cards { background: #f3f4f6; padding: .75rem 0; display: grid; gap: .75rem; border-top: 0; }   /* no side padding: the cards use the whole width */
    .list-cards > li.list-card { background: #fff; border: 1px solid rgba(23,24,27,.09); border-radius: 1rem; padding: .95rem 1rem; box-shadow: 0 1px 2px rgba(23,24,27,.05); }
    .list-card-head { padding-bottom: .75rem; border-bottom: 1px solid rgba(23,24,27,.07); }
    .list-card-grid { margin-top: .75rem; column-gap: .9rem; row-gap: .85rem; }
    /* type sizes of a card: 12 px everywhere (name, labels, values) */
    .list-card-head a, .list-card-head .font-medium { font-size: 12px; font-weight: 600; line-height: 1.35; }
    .list-card-head .text-xs { font-size: 12px; line-height: 1.35; }
    .list-card-grid dt { font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
    .list-card-grid dd, .list-card-grid dd * { font-size: 12px; }
    .list-card-grid .list-wide { grid-column: 1 / -1; }                                  /* a whole row of its own (Lead, Position) */
    .list-card-grid dd .font-medium { font-size: 12px; font-weight: 600; line-height: 1.35; }   /* a person / company in a value */
    .list-card-grid dd .text-xs { font-size: 12px; }
    .list-cards [class*="max-w-[15rem]"] { max-width: none; }
    .list-card-grid [class*="max-w-[15rem]"] { align-items: flex-start; }                     /* the picture sits at the top of a company's lines */
    /* activity cards: Type, then Lead (each a whole row), then When and Status side by side */
    [data-table="crm_activities"] .list-card-grid > * { order: 5; }
    [data-table="crm_activities"] .list-card-grid > [data-col="type"] { order: 1; }
    [data-table="crm_activities"] .list-card-grid > [data-col="lead"] { order: 2; }
    [data-table="crm_activities"] .list-card-grid > [data-col="when"] { order: 3; }
    [data-table="crm_activities"] .list-card-grid > [data-col="status"] { order: 4; }
    /* opportunity cards: every value, same size */
    [data-table="crm_opportunities"] .list-card-grid dd, [data-table="crm_opportunities"] .list-card-grid dd *,
    [data-table="crm_opportunities"] .list-card-grid dd .badge { font-size: 12px; }
    .list-card-grid dd .badge, .list-card-grid dd [class*="rounded-full"] { font-size: 12px; }
    .list-cards .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
    .list-cards dd { overflow-wrap: anywhere; }
    .list-card-foot { margin-top: .85rem; }
    .list-card-foot [class*="text-[10px]"] { font-size: 12px; }          /* OWNER / UPDATED labels */
}

.tabbar { display: none; }
@media (max-width: 767px) {
    .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr); height: 3.5rem;
        padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: content-box; background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
        border-top: 1px solid rgba(23,24,27,.1); box-shadow: 0 -4px 12px rgba(0,0,0,.04); }
    .tabbar-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; color: #8a909a; font-size: 10px; font-weight: 500; background: none; border: 0; }
    .tabbar-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .25rem; }
    .tabbar-item.is-active { color: #c8102e; font-weight: 700; }
    .tabbar-item:active { background: rgba(23,24,27,.04); }
    #main { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
}