/* Fluent 2 page styles — cards module. Uses only tokens from fluent-tokens.css (no hex, no raw px for
   spacing/type). Loaded after styles.css. Owned by the cards pages; keep selectors scoped to them. */

/* Pages: #cards, #payments, #balance-transfers (admin) · #parent-cards, #my-balance (parent).
   Dialogs: showAddCard / activateCard / showEditCardNotes / generated card codes (crd- classes). */

/* ---------- Tones (tinted icon squares / circles, coloured text) ---------- */
.crd-bg-brand{background:var(--tint-brand-bg);color:var(--tint-brand-fg)}
.crd-bg-success{background:var(--tint-success-bg);color:var(--tint-success-fg)}
.crd-bg-danger{background:var(--tint-danger-bg);color:var(--tint-danger-fg)}
.crd-bg-warning{background:var(--tint-warning-bg);color:var(--tint-warning-fg)}
.crd-bg-neutral{background:var(--tint-neutral-bg);color:var(--tint-neutral-fg)}
.crd-credit{color:var(--tint-success-fg)}
.crd-debit{color:var(--colorNeutralForeground1)}   /* debits stay neutral; the red arrow icon marks them */

/* Page-title counter: "(7)" in a lighter weight after the title text */
.crd-count{font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground3);margin-inline-start:var(--spacingHorizontalXS)}

/* ---------- Summary chips (on the canvas, fill only) ---------- */
.crd-chips{display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalS);margin-bottom:var(--spacingVerticalM)}
.crd-chip{display:inline-flex;align-items:center;gap:var(--spacingHorizontalS);min-height:var(--controlHeightLarge);padding:var(--spacingVerticalXS) var(--spacingHorizontalM);padding-inline-start:var(--spacingHorizontalSNudge);border-radius:var(--borderRadiusCircular);background:var(--colorNeutralBackground1);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);white-space:nowrap}
.crd-chip-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--borderRadiusCircular);font-size:var(--fontSizeBase200)}
.crd-chip-label{color:var(--colorNeutralForeground3)}
.crd-chip-value{font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);font-variant-numeric:tabular-nums}

/* ---------- Table cells ---------- */
.crd-nowrap{white-space:nowrap}
.crd-num{white-space:nowrap;font-variant-numeric:tabular-nums}
.crd-money{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:var(--fontWeightSemibold)}
.crd-muted{color:var(--colorNeutralForeground4)}
.crd-sub{color:var(--colorNeutralForeground3)}
.crd-desc{color:var(--colorNeutralForeground2);min-width:240px}
/* Card code: a monospace chip + a small copy button */
.crd-code-cell{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS);white-space:nowrap}
.crd-code{display:inline-block;direction:ltr;unicode-bidi:isolate;padding:var(--spacingVerticalXXS) var(--spacingHorizontalS);border-radius:var(--borderRadiusMedium);background:var(--tint-neutral-bg);color:var(--colorNeutralForeground1);font-family:var(--fontFamilyMonospace);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);white-space:nowrap}
.icon-btn.crd-copy{width:var(--controlHeightSmall);height:var(--controlHeightSmall);font-size:var(--fontSizeBase200);color:var(--colorNeutralForeground3)}
.icon-btn.crd-copy:hover{color:var(--colorBrandForeground1)}
/* Row actions: compact subtle icon buttons, never stacked */
.crd-actions{display:flex;align-items:center;gap:var(--spacingHorizontalXXS);white-space:nowrap}
.crd-actions .icon-btn{font-size:var(--fontSizeBase300)}
.icon-btn.crd-btn-activate{color:var(--tint-success-fg)}
.icon-btn.crd-btn-activate:hover{background:var(--tint-success-bg);color:var(--tint-success-fg)}
.icon-btn.crd-has-note{position:relative;color:var(--colorBrandForeground1)}
.icon-btn.crd-has-note::after{content:"";position:absolute;top:5px;inset-inline-end:5px;width:6px;height:6px;border-radius:var(--borderRadiusCircular);background:var(--colorBrandBackground)}
/* Transaction type: tinted arrow circle + label */
.crd-type{display:inline-flex;align-items:center;gap:var(--spacingHorizontalS);white-space:nowrap}
.crd-type-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--borderRadiusCircular);font-size:var(--fontSizeBase100)}
/* Empty state inside a table */
tr.crd-empty-row:hover{background:transparent}
tr.crd-empty-row > td{border-bottom:0}
.crd-empty{text-align:center;padding:var(--spacingVerticalXXL) var(--spacingHorizontalL);color:var(--colorNeutralForeground3);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300)}
.crd-empty > i{display:block;margin-bottom:var(--spacingVerticalS);font-size:var(--fontSizeHero800);line-height:var(--lineHeightHero800);color:var(--colorNeutralForeground4)}

/* ---------- Forms: content-sized fields side by side ---------- */
.crd-fields{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:var(--spacingHorizontalM)}
.crd-fields > .form-group{max-width:100%}
.crd-fields > .form-group > .form-control{max-width:none}
.crd-w-xs{width:var(--field-w-xs)}
.crd-w-s{width:var(--field-w-s)}
.crd-w-m{width:var(--field-w-m)}
.crd-w-l{width:var(--field-w-l)}
.crd-w-xl{width:var(--field-w-xl)}
/* a button that sits in a field row, level with the inputs (label height above it) */
.crd-inline-submit{margin-top:calc(var(--lineHeightBase300) + var(--spacingVerticalXS));margin-bottom:var(--spacingVerticalM)}
.crd-help{display:block;margin-top:var(--spacingVerticalXS);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
.crd-help bdi{font-family:var(--fontFamilyMonospace)}
.crd-form-actions{display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalS);margin-top:var(--spacingVerticalXS)}
/* Info message bar: brand tint, fill only (readable on the canvas and inside cards) */
.msgbar.crd-msg-info{background:var(--tint-brand-bg);border-color:transparent;color:var(--colorNeutralForeground1)}
.msgbar.crd-msg-info::before{color:var(--tint-brand-fg)}
.crd-msg{margin-bottom:var(--spacingVerticalL)}
.modal .crd-msg{margin-bottom:var(--spacingVerticalM)}

/* ---------- Balance transfers (#balance-transfers) ---------- */
.crd-tf-parties{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:var(--spacingHorizontalM)}
.crd-tf-parties > .form-group{width:var(--field-w-m);max-width:100%}
.crd-tf-parties > .form-group > .form-control{max-width:none}
.crd-tf-arrow{display:flex;align-items:center;justify-content:center;height:var(--controlHeightMedium);margin-top:calc(var(--lineHeightBase300) + var(--spacingVerticalXS));color:var(--colorNeutralForeground3);font-size:var(--fontSizeBase400)}
#tfAvailable{min-height:var(--lineHeightBase200);margin-top:var(--spacingVerticalXS);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
#tfAvailable i{color:var(--tint-success-fg);margin-inline-end:var(--spacingHorizontalXXS)}
#tfAvailable strong{color:var(--colorNeutralForeground1);font-weight:var(--fontWeightSemibold);font-variant-numeric:tabular-nums}

/* ---------- Parent card activation (#parent-cards) ---------- */
/* the code field is sized for exactly one CARD-XXXXXX-XXXXXX code (18 monospace characters) */
.crd-w-code{width:240px}
.crd-code-input{direction:ltr;text-align:center;font-family:var(--fontFamilyMonospace);font-size:var(--fontSizeBase400);letter-spacing:0.04em}
.crd-code-input::placeholder{letter-spacing:0}
#parent-cards textarea.form-control{min-height:var(--controlHeightMedium)}

/* ---------- Parent balance hero (#my-balance) ---------- */
.crd-hero{--surface-2:var(--colorSubtleBackgroundHover);background:var(--colorNeutralBackground1);border-radius:var(--borderRadiusLarge);box-shadow:var(--shadow4);margin-bottom:var(--spacingVerticalM);overflow:hidden}
.crd-hero > .msgbar{border-radius:0;border-width:0 0 var(--strokeWidthThin) 0}
.crd-hero-body{display:flex;align-items:center;justify-content:space-between;gap:var(--spacingHorizontalXL);padding:var(--spacingVerticalL) var(--spacingHorizontalL)}
.crd-hero-main{min-width:0}
.crd-hero-label{font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground2)}
.crd-hero-amount{display:block;margin-top:var(--spacingVerticalXS);font-size:var(--fontSizeHero900);line-height:var(--lineHeightHero900);font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);font-variant-numeric:tabular-nums;white-space:nowrap}
.crd-hero-amount.is-debt{color:var(--tint-danger-fg)}
.crd-hero-status{display:flex;align-items:center;gap:var(--spacingHorizontalS);margin-top:var(--spacingVerticalXS);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground2)}
.crd-link{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS);margin-top:var(--spacingVerticalM);padding:0;background:transparent;border:0;color:var(--colorBrandForegroundLink);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);font-weight:var(--fontWeightSemibold);cursor:pointer}
.crd-link:hover{color:var(--colorBrandForegroundLinkHover);text-decoration:underline}
.crd-link .fa-chevron-left{font-size:var(--fontSizeBase100)}
.crd-hero-art{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:var(--borderRadiusCircular);font-size:var(--fontSizeHero900)}
.crd-hero-foot{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacingHorizontalS);padding:var(--spacingVerticalM) var(--spacingHorizontalL);background:var(--surface-2);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground2)}
.crd-hero-foot i{color:var(--colorNeutralForeground3)}
.crd-hero-foot strong{font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);font-variant-numeric:tabular-nums}

/* ---------- Dialogs ---------- */
.crd-modal-ctx{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacingHorizontalS);margin-bottom:var(--spacingVerticalL);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3)}
.crd-codes-box{max-height:300px;overflow-y:auto;direction:ltr;text-align:left;padding:var(--spacingVerticalM) var(--spacingHorizontalL);border-radius:var(--borderRadiusLarge);background:var(--colorNeutralBackground3);color:var(--colorNeutralForeground1);font-family:var(--fontFamilyMonospace);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase400);white-space:pre-wrap;word-break:break-all}
.crd-codes-actions{display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalS);margin-top:var(--spacingVerticalL)}

/* ---------- Touch & phones ---------- */
@media (pointer:coarse){
    .icon-btn.crd-copy{width:var(--controlHeightMedium);height:var(--controlHeightMedium)}
    .crd-tf-arrow{height:var(--controlHeightLarge)}
}
@media (max-width:600px){
    .crd-fields > .form-group,.crd-tf-parties > .form-group{width:100%}
    .crd-tf-parties{flex-direction:column;align-items:stretch}
    .crd-tf-arrow{height:auto;margin:calc(-1 * var(--spacingVerticalXS)) 0 var(--spacingVerticalS);transform:rotate(-90deg)}
    .crd-inline-submit{margin-top:0;width:100%}
    .crd-form-actions .btn,.crd-codes-actions .btn{flex:1}
    .crd-chip{min-height:var(--controlHeightMedium)}
    .crd-hero-body{padding:var(--spacingVerticalXL) var(--spacingHorizontalL);gap:var(--spacingHorizontalM)}
    .crd-hero-amount{font-size:var(--fontSizeHero800);line-height:var(--lineHeightHero800)}
    .crd-hero-art{width:56px;height:56px;font-size:var(--fontSizeBase600)}
    .crd-hero-foot{padding:var(--spacingVerticalS) var(--spacingHorizontalL)}
}

/* Stop-card dialog (إيقاف البطاقة) */
.crd-dialog{display:flex;flex-direction:column;gap:var(--spacingVerticalM)}
.crd-stop-summary{display:flex;flex-direction:column;gap:var(--spacingVerticalXS);font-size:var(--fontSizeBase300)}
.crd-stop-summary .crd-muted{display:inline-block;min-width:8em}
.crd-stop-effect{margin:0;font-size:var(--fontSizeBase300);color:var(--colorNeutralForeground2)}
.crd-stop-family{display:flex;flex-direction:column;gap:var(--spacingVerticalXXS);padding:var(--spacingVerticalS) var(--spacingHorizontalM);border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground2);font-size:var(--fontSizeBase300)}
.crd-stop-family-title{font-weight:var(--fontWeightSemibold);margin-bottom:var(--spacingVerticalXXS)}
.crd-stop-family-row{display:flex;align-items:baseline;gap:var(--spacingHorizontalS);flex-wrap:wrap}
.crd-stop-family-row .crd-money{margin-inline-start:auto}
.crd-stop-family-row.is-current{font-weight:var(--fontWeightSemibold)}
.crd-stop-family-row.is-total{border-top:var(--strokeWidthThin) solid var(--colorNeutralStroke2);padding-top:var(--spacingVerticalXXS);font-weight:var(--fontWeightSemibold)}
.crd-stop-move{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacingVerticalS)}

/* «إنشاء بطاقات»: the total value being created (N × ₪X = ₪Y). */
.crd-total{margin-top:var(--spacingVerticalS);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300)}
/* The one-line explanation under the payments boxes (what counts as money in / out). */
#payments .crd-chips-help{margin:calc(-1 * var(--spacingVerticalS)) 0 var(--spacingVerticalM)}

/* Touch screens: the card links get a full tap area (UX_PLAN 5). */
@media (pointer:coarse){.crd-link{min-height:var(--touchTarget);display:inline-flex;align-items:center}}

/* «رصيدي» while a copy of the statement is shown and the fresh one is loading (bootstrap plan P2): one quiet line. */
.crd-updating{display:flex;align-items:center;gap:var(--spacingHorizontalS);margin:0 0 var(--spacingVerticalS);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
.crd-updating[hidden]{display:none}