/* ================================================================
   ICF Delhi NCR Charter Chapter — Membership Management System
   Base stylesheet: CSS variables, reset, and reusable UI components.
   Page-specific styles: app-shell.css / app-pages.css / app-profile.css
   ================================================================ */

:root {
    /* --- Neutrals --- */
    --color-background-primary:   #FFFFFF;
    --color-background-secondary: #F9F8F5;
    --color-background-tertiary:  #F2F1EC;
    --color-border-tertiary:      #E8E6DF;
    --color-border-secondary:     #D5D2C9;
    --color-text-primary:         #1C1917;
    --color-text-secondary:       #78716C;
    --color-text-tertiary:        #A8A29E;

    /* --- Brand --- */
    --color-navy:            #0B1D3A;
    --color-navy-hover:      #152E55;
    --color-navy-light:      #1E3A5F;
    --color-link:            #1A5FA0;
    --color-link-profile:    #2B5A98;
    --color-focus:           #3B82C4;
    --color-focus-ring:      rgba(59, 130, 196, 0.10);

    /* --- Semantic: Success --- */
    --color-success-bg:      #F0F5E8;
    --color-success-text:    #1B4D08;
    --color-success-value:   #2E6B12;
    --color-success-border:  #C3DCA0;

    /* --- Semantic: Warning --- */
    --color-warn-bg:         #FDF5E6;
    --color-warn-text:       #7C4D0F;
    --color-warn-border:     #EDC882;

    /* --- Semantic: Error --- */
    --color-error-bg:        #FEF0ED;
    --color-error-text:      #9A2D2D;
    --color-error-border:    #ECA5A0;

    /* --- Semantic: Info --- */
    --color-info-bg:         #EEF4FA;
    --color-info-text:       #0F4470;
    --color-info-border:     #B8D4EA;

    /* --- Semantic: Purple --- */
    --color-purple-bg:       #F2F0FA;
    --color-purple-text:     #443B85;

    /* --- Semantic: Teal --- */
    --color-teal-bg:         #E8F5F0;
    --color-teal-text:       #0C4E40;

    /* --- Semantic: Dropped --- */
    --color-dropped-bg:      #EFEDE8;
    --color-dropped-text:    #6F6B64;

    /* --- Score indicators --- */
    --color-score-high:      #16A34A;
    --color-score-mid:       #D97706;
    --color-score-low:       #DC2626;
    --color-score-track:     #E7E5DF;

    /* --- Form controls --- */
    --color-form-border:     #D6D3CB;
    --color-form-bg:         #FAF9F6;
    --color-form-placeholder:#A8A29E;
    --color-form-label:      #3E3A34;

    /* --- WhatsApp --- */
    --color-whatsapp:        #25D366;

    /* --- Border radius scale --- */
    --radius-sm:   8px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   18px;
    --radius-pill:  9999px;

    /* --- Layout --- */
    --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    --sidebar-width: 220px;
    --topbar-height: 52px;

    /* --- Shadows --- */
    --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
    --shadow-md:   0 4px 6px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.03);
    --shadow-lg:   0 10px 15px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.03);
    --shadow-xl:   0 20px 25px rgba(0,0,0,0.06), 0 8px 10px rgba(0,0,0,0.03);

    /* --- Transitions --- */
    --transition-fast:  120ms ease;
    --transition-base:  200ms ease;
    --transition-slow:  300ms ease;

    /* --- Interactive States --- */
    --color-background-hover:   #F5F4F0;
    --color-background-active:  #EEEDEA;
    --color-background-overlay: rgba(0,0,0,0.45);

    /* --- Sidebar --- */
    --color-sidebar-bg:          #0B1D3A;
    --color-sidebar-text:        rgba(255,255,255,0.85);
    --color-sidebar-text-muted:  rgba(255,255,255,0.50);
    --color-sidebar-active-bg:   rgba(255,255,255,0.12);
    --color-sidebar-hover-bg:    rgba(255,255,255,0.06);
    --color-sidebar-border:      rgba(255,255,255,0.08);

    /* --- Spacing Scale --- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
       background: var(--color-background-tertiary); color: var(--color-text-primary);
       font-size: 13px; line-height: 1.5; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-g { display: inline-flex; align-items: center; gap: 5px;
         padding: 6px 12px; border-radius: var(--radius-md); font-size: 12px;
         font-weight: 500; background: transparent;
         border: 0.5px solid var(--color-border-secondary);
         color: var(--color-text-secondary); cursor: pointer; }
.btn-g:hover { background: var(--color-background-secondary); }
.btn-s { display: inline-flex; align-items: center; gap: 5px;
         padding: 6px 14px; border-radius: var(--radius-md); font-size: 12px;
         font-weight: 500; background: var(--color-navy); color: #fff; border: none;
         cursor: pointer; transition: background var(--transition-base); }
.btn-s:hover { background: var(--color-navy-hover); }
.btn-d { display: inline-flex; align-items: center; gap: 5px;
         padding: 6px 14px; border-radius: var(--radius-md); font-size: 12px;
         font-weight: 500; background: var(--color-error-bg); color: var(--color-error-text);
         border: 0.5px solid var(--color-error-border); cursor: pointer;
         transition: background var(--transition-base); }
.btn-d:hover { background: #f9d9d9; }
.btn-cancel { background: transparent; border: 0.5px solid var(--color-border-tertiary);
              border-radius: var(--radius-md); padding: 7px 16px; font-size: 12px;
              cursor: pointer; color: var(--color-text-secondary); }

/* ================================================================
   CARDS & STATS
   ================================================================ */
.card { background: var(--color-background-primary);
        box-shadow: var(--shadow-sm);
        border-radius: var(--radius-lg); padding: 16px;
        transition: box-shadow var(--transition-base); }
.ch { display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 14px; }
.ct { font-size: 13px; font-weight: 500; color: var(--color-text-primary); }
.cl { font-size: 11px; color: var(--color-link); cursor: pointer; }
.cl:hover { text-decoration: underline; }

.stat-row { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px;
            margin-bottom: 18px; }
.stat { background: var(--color-background-primary);
        box-shadow: var(--shadow-sm);
        border-radius: var(--radius-lg); padding: 12px 14px; cursor: pointer;
        transition: box-shadow var(--transition-base); }
.stat:hover { box-shadow: var(--shadow-md); }
.s-icon { width: 30px; height: 30px; border-radius: var(--radius-md); display: flex;
          align-items: center; justify-content: center; font-size: 15px;
          margin-bottom: 8px; }
.s-val  { font-size: 20px; font-weight: 500; color: var(--color-text-primary); }
.s-lbl  { font-size: 10px; color: var(--color-text-secondary); margin-top: 3px; }
.s-sub  { font-size: 10px; color: var(--color-text-tertiary); margin-top: 2px; }
.t-all    .s-icon { background: var(--color-info-bg); color: var(--color-info-text); }
.t-active .s-icon { background: var(--color-success-bg); color: var(--color-success-text); }
.t-active .s-val  { color: var(--color-success-value); }
.t-due    .s-icon { background: var(--color-warn-bg); color: #633806; }
.t-due    .s-val  { color: var(--color-warn-text); }
.t-lapsed .s-icon { background: var(--color-error-bg); color: #791F1F; }
.t-lapsed .s-val  { color: var(--color-error-text); }
.t-reg    .s-icon { background: var(--color-purple-bg); color: var(--color-purple-text); }
.t-aff    .s-icon { background: var(--color-teal-bg); color: var(--color-teal-text); }
.t-apps-alert { background: #FFF4E0; border-color: #F5A623 !important; }
.t-apps-alert .s-icon { background: #F5A623; color: #fff; }
.t-apps-alert .s-val  { color: #7C3508; }
.t-apps-alert .s-lbl  { color: #7C3508; }
.t-apps-alert .s-sub  { color: #9C5B1C; }
.t-apps-alert:hover   { border-color: #D98B1B !important; }

.two-col   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;
             margin-bottom: 14px; }

/* ================================================================
   STATUS BADGES
   ================================================================ */
.bx { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px;
      border-radius: var(--radius-pill); font-size: 11px; font-weight: 500; }
.bx-active   { background: var(--color-success-bg); color: var(--color-success-text); }
.bx-due      { background: var(--color-warn-bg); color: var(--color-warn-text); }
.bx-inactive { background: var(--color-error-bg); color: var(--color-error-text); }
.bx-none     { background: var(--color-background-secondary); color: var(--color-text-secondary); }
.bx-blue     { background: var(--color-info-bg); color: var(--color-info-text); }
.bx-purple   { background: var(--color-purple-bg); color: var(--color-purple-text); }
.bx-teal     { background: var(--color-teal-bg); color: var(--color-teal-text); }
.bx-dropped  { background: var(--color-dropped-bg); color: var(--color-dropped-text); }
.bx-ico      { padding: 4px 6px; }

/* Dropped chip */
.chip-dropped { border-color: #ccc; color: var(--color-dropped-text); }
.chip-dropped.on { background: #555; border-color: #555; color: #fff; }

/* ================================================================
   TABLES
   ================================================================ */
/* Central table containment — all data tables fit within the content viewport */
.content table { table-layout: fixed; width: 100%; }
.content table th,
.content table td { overflow: hidden; text-overflow: ellipsis; word-break: break-word; }

.mt { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.mt th { text-align: left; padding: 9px 10px; font-size: 11px; font-weight: 500;
         color: var(--color-text-secondary); background: var(--color-background-secondary);
         border-bottom: 0.5px solid var(--color-border-tertiary); }
.mt td { padding: 9px 10px; border-bottom: 0.5px solid var(--color-border-tertiary);
         color: var(--color-text-primary); vertical-align: middle; }
.mt tr:last-child td { border-bottom: none; }
.mt tr:hover td { background: var(--color-background-hover); }
.mid  { font-family: var(--font-mono); font-size: 11px;
        color: var(--color-text-secondary); }
.mname { font-weight: 500; font-size: 13px; }
.mlink { color: var(--color-link); cursor: pointer; }
.mlink:hover { text-decoration: underline; }

.mt-type { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 10px;
           display: inline-block; }
.mt-type-mem { background: var(--color-info-bg); color: var(--color-info-text); }
.mt-type-aff { background: var(--color-teal-bg); color: var(--color-teal-text); }

.rtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.rtable th { text-align: right; padding: 0 8px 8px;
             color: var(--color-text-secondary); font-weight: 400; font-size: 11px;
             border-bottom: 0.5px solid var(--color-border-tertiary); }
.rtable th:first-child { text-align: left; }
.rtable td { padding: 8px; border-bottom: 0.5px solid var(--color-border-tertiary);
             color: var(--color-text-primary); text-align: right; }
.rtable td:first-child { text-align: left; }
.rtable tr:last-child td { border: none; font-weight: 500;
                           background: var(--color-background-secondary); }

/* ================================================================
   ACTION BUTTONS (icon-only in tables)
   ================================================================ */
.ab { width: 26px; height: 26px; border-radius: 7px;
      border: 0.5px solid var(--color-border-tertiary);
      background: transparent; display: inline-flex; align-items: center;
      justify-content: center; cursor: pointer;
      color: var(--color-text-secondary); font-size: 13px; }
.ab:hover { background: var(--color-info-bg); color: var(--color-info-text); border-color: var(--color-info-border); }
.ab.danger:hover { background: var(--color-error-bg); color: var(--color-error-text); border-color: var(--color-error-border); }

/* ================================================================
   SEARCH, FILTERS, CHIPS
   ================================================================ */
.srch-row { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; }
.sw { flex: 1; display: flex; align-items: center; gap: 8px;
      background: var(--color-background-primary);
      border: 0.5px solid var(--color-border-tertiary);
      border-radius: 10px; padding: 0 12px; height: 36px; }
.sw i { font-size: 15px; color: var(--color-text-tertiary); }
.sw input { border: none; background: transparent; outline: none;
            font-size: 13px; color: var(--color-text-primary); flex: 1; }
.chips { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.chip { padding: 4px 12px; border-radius: 20px; font-size: 11px; cursor: pointer;
        border: 0.5px solid var(--color-border-tertiary);
        background: var(--color-background-primary);
        color: var(--color-text-secondary); text-decoration: none;
        display: inline-block; }
.chip:hover { border-color: var(--color-focus); color: var(--color-info-text); }
.chip.on { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }

.filter-bar { display: flex; gap: 8px; margin-bottom: 14px;
              align-items: center; flex-wrap: wrap; }
.sel-sm { font-size: 12px; padding: 5px 10px;
          border: 0.5px solid var(--color-border-tertiary);
          border-radius: 8px; background: var(--color-background-primary);
          color: var(--color-text-primary); outline: none; cursor: pointer;
          height: 32px; }
.sel-sm:focus { border-color: var(--color-focus); }

/* ================================================================
   PAGINATION
   ================================================================ */
.pgn { display: flex; align-items: center; justify-content: space-between;
       margin-top: 12px; }
.pgn-info { font-size: 11px; color: var(--color-text-secondary); }
.pgn-btns { display: flex; gap: 4px; }
.pb { width: 27px; height: 27px; border-radius: 7px;
      border: 0.5px solid var(--color-border-tertiary);
      background: transparent; font-size: 11px; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--color-text-secondary); text-decoration: none; }
.pb:hover { background: var(--color-background-secondary); }
.pb.on { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }

/* ================================================================
   ALERTS / NOTICES
   ================================================================ */
.alert { padding: 10px 14px; border-radius: var(--radius-md); font-size: 12px;
         display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.alert-warn    { background: var(--color-warn-bg); border: 0.5px solid var(--color-warn-border); color: var(--color-warn-text); }
.alert-success { background: var(--color-success-bg); border: 0.5px solid var(--color-success-border); color: var(--color-success-text); }
.alert-error   { background: var(--color-error-bg); border: 0.5px solid var(--color-error-border); color: var(--color-error-text); }
.alert-info    { background: var(--color-info-bg); border: 0.5px solid var(--color-info-border); color: var(--color-info-text); }
.notice-locked { padding: 10px 14px; background: var(--color-warn-bg);
                 border-radius: var(--radius-md); font-size: 12px; color: var(--color-warn-text);
                 display: flex; align-items: center; gap: 8px; margin-top: 12px; }

/* ================================================================
   UTILITIES
   ================================================================ */
.text-muted   { color: var(--color-text-secondary); }
.text-success { color: var(--color-success-value); }
.text-danger  { color: var(--color-error-text); }
.text-warn    { color: var(--color-warn-text); }
.text-blue    { color: var(--color-info-text); }
.text-mono    { font-family: var(--font-mono); }
.mt-8   { margin-top: 8px; }
.mt-14  { margin-top: 14px; }
.mb-14  { margin-bottom: 14px; }
.hidden { display: none !important; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

/* ================================================================
   MODAL (simple confirm dialog)
   ================================================================ */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4);
                 z-index: 1000; display: flex; align-items: center;
                 justify-content: center; }
.modal-box { background: var(--color-background-primary); border-radius: var(--radius-xl);
             padding: 24px 28px; width: 400px; max-width: 90vw;
             box-shadow: 0 8px 40px rgba(0,0,0,0.15); }
.modal-title { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.modal-body  { font-size: 13px; color: var(--color-text-secondary);
               margin-bottom: 20px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ================================================================
   WHATSAPP LINK ICON
   ================================================================ */
a.wa-link {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    color: var(--color-whatsapp);
    font-size: 14px;
    vertical-align: middle;
    opacity: 0.75;
    text-decoration: none;
}
a.wa-link:hover { opacity: 1; }
a.wa-ab { color: var(--color-whatsapp); }
a.wa-ab:hover { color: #1da851; }

/* ================================================================
   MOBILE THEME (≤768px) — consistent sizing for touch devices
   Font: +2px across the board. Touch targets: min 44px.
   ================================================================ */
@media (max-width: 768px) {

    /* Scoped to .app-shell — login pages are NOT affected */

    /* --- Base --- */
    .app-shell { font-size: 15px; }

    /* --- Buttons --- */
    .app-shell .btn-g,
    .app-shell .btn-s,
    .app-shell .btn-d { font-size: 13px; padding: 10px 16px; border-radius: 10px; }
    .app-shell .btn-cancel { font-size: 13px; padding: 10px 18px; }

    /* --- Search bar --- */
    .app-shell .srch-row { gap: 10px; margin-bottom: 16px; }
    .app-shell .sw { height: 44px; border-radius: 12px; padding: 0 14px; }
    .app-shell .sw i { font-size: 18px; }
    .app-shell .sw input { font-size: 15px; }

    /* --- Filter chips --- */
    .app-shell .chips { gap: 8px; margin-bottom: 16px; }
    .app-shell .chip { font-size: 13px; padding: 8px 14px; border-radius: 22px;
                       min-height: 36px; display: inline-flex; align-items: center; }

    /* --- Pagination --- */
    .app-shell .pgn { margin-top: 16px; }
    .app-shell .pgn-info { font-size: 13px; }
    .app-shell .pb { width: 36px; height: 36px; border-radius: 9px; font-size: 13px; }

    /* --- Alerts --- */
    .app-shell .alert { font-size: 14px; padding: 12px 16px; border-radius: 10px; }

    /* --- Action buttons (icon) --- */
    .app-shell .ab { width: 36px; height: 36px; border-radius: 9px; font-size: 16px; }

    /* --- Status badges --- */
    .app-shell .bx { font-size: 13px; padding: 4px 10px; border-radius: 8px; }
    .app-shell .bx-ico { padding: 5px 7px; }
    .app-shell .bx-ico i { font-size: 15px; }

    /* --- Cards --- */
    .app-shell .card { border-radius: 14px; }

    /* --- Content area padding --- */
    .app-shell .content { padding: 14px 12px; }

    /* --- Filter count row --- */
    .app-shell .filter-count { font-size: 14px !important; }
}