/* =====================================================================
   MCC — GLOBAL STYLESHEET
   Organized sections:
     1.  Root variables
     2.  Base / reset
     3.  Accessibility (focus states)
     4.  Layout — Sidebar
     5.  Layout — Topbar
     6.  Layout — Main content / Panel
     7.  Buttons
     8.  Form controls
     9.  Table / DataTables
     10. Status pills
     11. Pagination
     12. Modals — base
     13. Modals — delete / approve confirmation
     14. Component — dual list transfer widget
     15. Component — org name cell / booking pill (Grounds page)
     16. Component — Add Member / Add Organization page
     17. Component — Organization Details page
     18. Component — Team Details page + member cards
     19. Page — Sign In
     20. Media queries (all breakpoints, consolidated)
   ===================================================================== */


/* =====================================================================
   1. ROOT VARIABLES
   ===================================================================== */
:root{
  /* brand */
  --mcc-green-dark:#173f10;
  --mcc-green:#235614;
  --mcc-green-light:#2e701a;
  --mcc-green-tint:#eaf3e6;
  --mcc-green-rgb:35,86,20; /* same value as --mcc-green, as an r,g,b triplet for rgba() use */

  /* neutrals */
  --mcc-cream:#f7f7f5;
  --mcc-app-bg:#f3f4f2;
  --mcc-input-bg:#F2F2F2;
  --mcc-heading:#18191B;
  --mcc-text:#303030;
  --mcc-muted:#8a8f89;
  --mcc-rights:#8F8F8F;
  --mcc-terms:#6A6A6A;
  --mcc-border:#e9ebe7;
  --mcc-row-alt:#fafbf9;

  /* status / semantic colors (added during refactor — previously hardcoded
     inline in multiple places; consolidated here so every usage of the
     same visual color now shares one source of truth) */
  --mcc-red:#e0433c;            /* notification dot, danger icon hover */
  --mcc-danger:#EA3346;         /* delete-confirmation title / danger button */
  --mcc-danger-dark:#d62c3d;    /* danger button hover */
  --mcc-danger-tint:#fdeceb;    /* "No" status pill background */
  --mcc-danger-text:#c53d33;    /* "No" status pill text */
  --mcc-gray:#6b7178;           /* Close / Cancel button */
  --mcc-gray-dark:#565b61;      /* Close / Cancel button hover */
  --mcc-stripe:#F0F3F5;         /* DataTable odd-row background */
  --mcc-child-bg:#fbfcfa;       /* DataTable expanded child-row background */
  --mcc-sort-icon:#c3c7c1;      /* table header sort icon color */

  /* layout */
  --sidebar-w:280px;
  --topbar-h:76px;
}


/* =====================================================================
   2. BASE / RESET
   ===================================================================== */
html, body{
  height:100%;
}

body{
  font-family:'Archivo', sans-serif;
  background-color:var(--mcc-app-bg);
  color:var(--mcc-text);
}

body.mcc-noscroll{
  overflow:hidden;
}

a{
  text-decoration:none;
}


/* =====================================================================
   3. ACCESSIBILITY
   ===================================================================== */
.mcc-nav-link:focus-visible,
.mcc-filter-btn:focus-visible,
.btn-mcc-outline:focus-visible,
.btn-mcc-solid:focus-visible,
.action-icons .ic:focus-visible,
.mcc-page-nav .pg-btn:focus-visible,
.collapse-btn:focus-visible,
.mcc-mobile-toggle:focus-visible{
  outline:2px solid var(--mcc-green-light);
  outline-offset:2px;
}


/* =====================================================================
   4. LAYOUT — SIDEBAR
   ===================================================================== */
.mcc-sidebar{
  position:fixed;
  top:10px;
  left:10px;
  bottom:10px;
  width:var(--sidebar-w);
  max-width:calc(100vw - 20px);
  background:#fff;
  display:flex;
  flex-direction:column;
  z-index:20;
  transition:transform .2s ease;
  border-radius:15px;
  overflow-y:auto;
}

.mcc-sidebar-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15,20,12,.45);
  z-index:15;
  opacity:0;
  transition:opacity .2s ease;
}

.mcc-sidebar-backdrop.show{
  display:block;
  opacity:1;
}

.mcc-sidebar-brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:2rem;
  padding:1.1rem;
  border-bottom:1px solid var(--mcc-border);
}

.mcc-sidebar-brand .brand-mark{
  display:flex;
  align-items:center;
  gap:.55rem;
}

.mcc-sidebar-brand .brand-mark img{
  width:110px;
  height:auto;
  object-fit:contain;
}

.mcc-sidebar-brand .brand-mark span{
  font-weight:800;
  font-size:1.2rem;
  color:var(--mcc-heading);
  letter-spacing:.01em;
}

.mcc-sidebar-brand .collapse-btn{
  width:30px;
  height:30px;
  padding:0;
  border-radius:50%;
  border:1px solid var(--mcc-border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--mcc-muted);
  background:#fff;
  font-size:.85rem;
  font-family:inherit;
  cursor:pointer;
  flex:0 0 auto;
}

.mcc-sidebar-brand .collapse-btn:hover{
  border-color:var(--mcc-green-light);
  color:var(--mcc-green);
}

.mcc-sidebar-footer{
  margin-top:auto;
  border-top:1px solid var(--mcc-border);
  padding:20px 10px 10px 10px;
}

.mcc-nav-label{
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--mcc-muted);
  margin:0 0 .6rem .6rem;
}

.mcc-nav{
  list-style:none;
  margin:0 0 1.6rem 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.15rem;
}

.mcc-nav-link{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.62rem .65rem;
  color:var(--mcc-text);
  font-size:.9rem;
  font-weight:500;
  position:relative;
  border-left:3px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}

.mcc-nav-link i.bi{
  font-size:1.05rem;
  width:1.2rem;
  text-align:center;
  color:var(--mcc-muted);
}

.mcc-nav-link .chev{
  margin-left:auto;
  font-size:.8rem;
  color:var(--mcc-muted);
}

.mcc-nav-link:hover{
  background:var(--mcc-app-bg);
  color:var(--mcc-text);
}

.mcc-nav-link.active{
  background:var(--mcc-green-tint);
  background-color:var(--mcc-app-bg);
  color:var(--mcc-green);
  font-weight:600;
  border-left-color:var(--mcc-green);
}

.mcc-nav-link.active i.bi{
  color:var(--mcc-green);
}

.mcc-nav-link.active .chev{
  color:var(--mcc-green);
}

/* =====================================================================
   SIDEBAR — EXPANDABLE SUBMENUS (Members / Organization)
   New rules only — append inside the existing "LAYOUT — SIDEBAR" section
   of the project stylesheet. Nothing below overrides or duplicates any
   existing sidebar rule.
   ===================================================================== */

/* the arrow is the only clickable toggle. Only cursor + rotation are added
   here — margin-left:auto (which pushes it to the end of the row) and its
   color already come from the existing ".mcc-nav-link .chev" rule and are
   intentionally left untouched. */
.mcc-nav-link .chev{
  cursor:pointer;
  transition:transform .2s ease;
}

/* right arrow -> down arrow when the submenu is open (rotation, not an
   icon swap, so no extra JS/markup is needed for the icon itself) */
.mcc-nav-item.open > .mcc-nav-link .chev{
  transform:rotate(90deg);
  color:var(--mcc-green);
}

/* collapsed by default; expands via max-height when .open is applied to
   the parent <li class="mcc-nav-item"> */
.mcc-submenu{
  list-style:none;
  margin:0;
  padding:0;
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
}

.mcc-nav-item.open .mcc-submenu{
  max-height:240px;
}

.mcc-subnav-link{
  display:block;
  padding:.55rem .65rem .55rem 2.55rem;
  font-size:.86rem;
  color:var(--mcc-muted);
  border-left:3px solid transparent;
  transition:background .15s ease, color .15s ease;
}

.mcc-subnav-link:hover{
  background:var(--mcc-app-bg);
  color:var(--mcc-text);
}

.mcc-subnav-link.active{
  color:var(--mcc-green);
  font-weight:600;
}


/* =====================================================================
   5. LAYOUT — TOPBAR
   ===================================================================== */
.mcc-main{
  margin-left:290px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.mcc-topbar{
  height:var(--topbar-h);
  background:#fff;
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.4rem 1.4rem 1.4rem;
  position:sticky;
  top:0;
  z-index:10;
  margin:10px;
  border-radius:15px;
}

.mcc-mobile-toggle{
  display:none;
  width:40px;
  height:40px;
  flex:0 0 auto;
  padding:0;
  border-radius:.6rem;
  border:1px solid var(--mcc-border);
  background:#fff;
  align-items:center;
  justify-content:center;
  color:var(--mcc-text);
  font-size:1.15rem;
  cursor:pointer;
}

.mcc-mobile-toggle:hover{
  border-color:var(--mcc-green-light);
  color:var(--mcc-green);
}

.mcc-search{
  position:relative;
  flex:1;
  max-width:420px;
}

.mcc-search input{
  width:100%;
  border:1px solid var(--mcc-border);
  background:var(--mcc-input-bg);
  border-radius:.85rem;
  padding:.72rem 2.6rem .72rem 1.1rem;
  font-size:.88rem;
  color:var(--mcc-text);
}

.mcc-search input::placeholder{
  color:var(--mcc-muted);
}

.mcc-search input:focus{
  outline:none;
  border-color:var(--mcc-green-light);
  background:#fff;
  box-shadow:0 0 0 .15rem rgba(var(--mcc-green-rgb),.1);
}

.mcc-search .bi-search{
  position:absolute;
  right:.9rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--mcc-muted);
  font-size:.95rem;
}

.mcc-topbar-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:1.4rem;
}

.mcc-bell{
  position:relative;
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--mcc-text);
  font-size:1.15rem;
  cursor:pointer;
}

.mcc-bell .dot{
  position:absolute;
  top:9px;
  right:10px;
  width:8px;
  height:8px;
  background:var(--mcc-red);
  border-radius:50%;
  border:1.5px solid #fff;
}

.mcc-user{
  display:flex;
  align-items:center;
  gap:.6rem;
  cursor:pointer;
}

.mcc-user img{
  width:38px;
  height:38px;
  border-radius:50%;
  object-fit:cover;
}

.mcc-user .name{
  font-size:.88rem;
  font-weight:600;
  color:var(--mcc-heading);
}

.mcc-user .bi-chevron-down{
  font-size:.78rem;
  color:var(--mcc-muted);
}


/* =====================================================================
   6. LAYOUT — MAIN CONTENT / PANEL
   ===================================================================== */
.mcc-content{
  padding:10px;
  flex:1;
}

.mcc-panel{
  border-radius:1rem;
}

.mcc-panel-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  padding:1.5rem;
  border-bottom:1px solid var(--mcc-border);
  background-color:#fff;
  border-radius:15px 15px 0 0;
}

.mcc-panel-title{
  font-size:1.4rem;
  font-weight:800;
  color:var(--mcc-heading);
  margin:0;
  margin-right:auto;
}


/* =====================================================================
   7. BUTTONS
   ===================================================================== */
.mcc-filter-btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border:1px solid var(--mcc-border);
  background:#fff;
  color:var(--mcc-text);
  font-size:.85rem;
  font-weight:600;
  padding:.55rem .9rem;
  border-radius:.6rem;
  white-space:nowrap;
}

.mcc-filter-btn:hover{
  border-color:var(--mcc-green-light);
  color:var(--mcc-text);
}

.mcc-filter-btn i.bi{
  font-size:.85rem;
  color:var(--mcc-muted);
}

.btn-mcc-outline{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border:1px solid var(--mcc-border);
  background:#fff;
  color:var(--mcc-text);
  font-size:.85rem;
  font-weight:600;
  padding:.55rem 1rem;
  border-radius:.6rem;
  white-space:nowrap;
}

.btn-mcc-outline:hover{
  border-color:var(--mcc-green-light);
  color:var(--mcc-text);
}

.btn-mcc-solid{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--mcc-green);
  border:none;
  color:#fff;
  font-size:.85rem;
  font-weight:600;
  padding:.6rem 1.1rem;
  border-radius:.6rem;
  white-space:nowrap;
  transition:background .15s ease;
}

.btn-mcc-solid:hover{
  background:var(--mcc-green-dark);
  color:#fff;
}

/* merged: previously declared identically in two separate places */
.btn-mcc-gray{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--mcc-gray);
  border:none;
  color:#fff;
  font-size:.9rem;
  font-weight:600;
  padding:.65rem 1.4rem;
  border-radius:.6rem;
  white-space:nowrap;
  transition:background .15s ease;
}

.btn-mcc-gray:hover{
  background:var(--mcc-gray-dark);
  color:#fff;
}

.btn-mcc-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--mcc-danger);
  border:none;
  color:#fff;
  font-size:1rem;
  font-weight:600;
  padding:.75rem 1.75rem;
  border-radius:.75rem;
  transition:.2s;
}

.btn-mcc-danger:hover{
  background:var(--mcc-danger-dark);
  color:#fff;
}


/* =====================================================================
   8. FORM CONTROLS
   ===================================================================== */
.mcc-form-label{
  display:block;
  font-size:.85rem;
  font-weight:700;
  color:var(--mcc-heading);
  margin-bottom:.45rem;
}

.mcc-form-control{
  width:100%;
  border:1px solid var(--mcc-border);
  background:var(--mcc-input-bg);
  border-radius:.6rem;
  padding:.65rem .9rem;
  font-size:.9rem;
  color:var(--mcc-text);
}

.mcc-form-control:focus{
  outline:none;
  border-color:var(--mcc-green-light);
  background:#fff;
  box-shadow:0 0 0 .15rem rgba(var(--mcc-green-rgb),.1);
}

.mcc-textarea{
  min-height:130px;
  resize:none;
}

/* custom select arrow */
.mcc-select-wrap{
  position:relative;
}

.mcc-select-wrap::after{
  content:"";
  position:absolute;
  top:50%;
  right:18px;
  width:10px;
  height:6px;
  transform:translateY(-50%);
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23303030' d='M5 6L0 0h10z'/%3E%3C/svg%3E") no-repeat center;
}

.mcc-select-wrap select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:45px;
}

/* custom date field */
.mcc-date-wrap{
  position:relative;
}

.mcc-date-wrap::before{
  content:"\F1F7"; /* Bootstrap Icons - calendar3 */
  font-family:"bootstrap-icons";
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  font-size:18px;
  color:var(--mcc-text);
  pointer-events:none;
  z-index:2;
}

.mcc-date-wrap input{
  padding-left:46px;
  color:var(--mcc-text);
  background:var(--mcc-input-bg);
  border-color:var(--mcc-border);
}

.mcc-date-wrap input::-webkit-calendar-picker-indicator{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}

.mcc-date-wrap input::-webkit-datetime-edit{
  color:var(--mcc-muted);
}

.mcc-date-wrap input:focus{
  background:#fff;
  border-color:var(--mcc-green-light);
  box-shadow:0 0 0 .15rem rgba(var(--mcc-green-rgb),.10);
}

/* file upload dropzone */
.mcc-upload-box{
  min-height:130px;
  border:2px dashed var(--mcc-border);
  border-radius:.75rem;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
  transition:.2s ease;
  padding:1.5rem;
}

.mcc-upload-box:hover{
  border-color:var(--mcc-green);
  background:var(--mcc-green-tint);
}

.mcc-upload-box i{
  font-size:1.6rem;
  color:var(--mcc-muted);
  margin-bottom:.75rem;
}

.mcc-upload-box p{
  margin:0;
  font-size:.95rem;
  color:var(--mcc-text);
}

.mcc-upload-box span{
  color:var(--mcc-green);
  font-weight:600;
}

.mcc-upload-box small{
  margin-top:.35rem;
  color:var(--mcc-muted);
  font-size:.8rem;
}


/* =====================================================================
   9. TABLE / DATATABLES
   ===================================================================== */
.mcc-table-wrap{
  overflow-x:auto;
  border-radius:0 0 .75rem .75rem;
}

table.mcc-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:.88rem;
}

table.mcc-table thead th{
  background:#fff;
  color:var(--mcc-text);
  font-weight:700;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:1.85rem 1rem .85rem 1rem;
  white-space:nowrap;
}

table.mcc-table thead th .sort-ic{
  margin-left:.3rem;
  font-size:.75rem;
  color:var(--mcc-sort-icon);
  cursor:pointer;
}

table.mcc-table tbody td{
  padding:.85rem 1rem;
  color:var(--mcc-text);
  white-space:normal;
}

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

table.mcc-table tbody tr:hover{
  background:var(--mcc-green-tint);
}

.dataTables_wrapper{
  width:100%;
}

table.dataTable{
  margin:0 !important;
}

table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting_asc_disabled,
table.dataTable thead > tr > th.sorting_desc_disabled{
  background-image:none !important;
  padding-right:1rem;
}

table.dataTable thead > tr > th{
  position:relative;
  cursor:pointer;
}

table.dataTable thead > tr > th.mcc-no-sort{
  cursor:default;
}

/* row striping — driven by DataTables' own odd/even classes (not nth-child)
   so stripes stay correct even when Responsive inserts a hidden "child"
   detail row between rows */
table.dataTable tbody tr.odd{
  background-color:var(--mcc-stripe);
}

table.dataTable tbody tr.even{
  background-color:#ffffff;
}

table.dataTable tbody tr:hover{
  background:var(--mcc-green-tint) !important;
}

/* Responsive extension: expand icon + child row styling */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control{
  padding-left:2rem;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before{
  background-color:var(--mcc-green);
  border-radius:50%;
  top:50%;
  transform:translateY(-50%);
  box-shadow:none;
  line-height:0rem;
}

/* note: this rule is more specific than "table.mcc-table thead th" above,
   so it wins the cascade and is the padding that actually renders */
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td{
  border-bottom:unset;
}

table.dataTable > thead > tr > th,
table.dataTable > thead > tr{
  padding:1.5rem 0.85rem 1rem 0.85rem;
}

table.dataTable thead > tr > th.sorting:after{
  content:'';
}

table.dataTable thead > tr > th.sorting:before{
  content:'';
}

/* child (expanded detail) row: distinct clean background, never striped,
   never affected by the hover rule above */
table.dataTable > tbody > tr.child{
  background-color:var(--mcc-child-bg) !important;
}

table.dataTable > tbody > tr.child:hover{
  background-color:var(--mcc-child-bg) !important;
}

table.dataTable > tbody > tr.child td{
  padding:.9rem 1.2rem;
  white-space:normal;
}

table.dataTable > tbody > tr.child ul.dtr-details{
  margin:0;
  padding:0;
  list-style:none;
}

table.dataTable > tbody > tr.child ul.dtr-details li{
  padding:.3rem 0;
  border-bottom:1px dashed var(--mcc-border);
}

table.dataTable > tbody > tr.child ul.dtr-details li:last-child{
  border-bottom:none;
}

table.dataTable > tbody > tr.child span.dtr-title{
  font-weight:700;
  color:var(--mcc-heading);
  display:inline-block;
  min-width:110px;
}

table.dataTable.no-footer{
  border-bottom:unset;
}

div.dataTables_wrapper div.dataTables_processing{
  background:rgba(255,255,255,.85);
  color:var(--mcc-muted);
  font-family:'Archivo', sans-serif;
  font-size:.85rem;
}

.cell-name{
  font-weight:600;
  color:var(--mcc-heading);
}

.action-icons{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.action-icons .ic{
  padding:0;
  border:none;
  background:transparent;
  color:var(--mcc-text);
  font-size:1.2rem;
  cursor:pointer;
  transition:all .15s ease;
}

.action-icons .ic:hover{
  border-color:var(--mcc-green-light);
  color:var(--mcc-green);
}

.action-icons .ic.danger:hover{
  border-color:var(--mcc-red);
  color:var(--mcc-red);
}


/* =====================================================================
   10. STATUS PILLS
   ===================================================================== */
.status-pill{
  display:inline-flex;
  align-items:center;
  padding:.3rem .75rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
  white-space:nowrap;
}

.status-pill.status-booked,
.status-pill.status-new{
  background:var(--mcc-green-tint);
  color:var(--mcc-green);
}

.status-pill.status-no{
  background:var(--mcc-danger-tint);
  color:var(--mcc-danger-text);
}


/* =====================================================================
   11. PAGINATION
   ===================================================================== */
.mcc-pagination-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.25rem;
  background-color:#fff;
  padding:1.4rem;
  border-radius:15px;
}

.mcc-page-select{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.85rem;
  color:var(--mcc-text);
}

.mcc-page-select select{
  border:1px solid var(--mcc-border);
  border-radius:.5rem;
  padding:.4rem .6rem;
  font-size:.85rem;
  color:var(--mcc-text);
  background:#fff;
}

.mcc-page-nav{
  display:flex;
  align-items:center;
  gap:.35rem;
  flex-wrap:wrap;
}

.mcc-page-nav .pg-btn{
  min-width:34px;
  height:34px;
  padding:0 .5rem;
  border-radius:.55rem;
  border:1px solid var(--mcc-border);
  background:#fff;
  color:var(--mcc-text);
  font-size:.85rem;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.mcc-page-nav .pg-btn:hover{
  border-color:var(--mcc-green-light);
}

.mcc-page-nav .pg-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.action-icons a.ic{
  display:inline-flex;
  align-items:center;
  color:inherit;
}

.mcc-page-nav .pg-dots{
  color:var(--mcc-muted);
  padding:0 .25rem;
  font-size:.85rem;
}


/* =====================================================================
   12. MODALS — BASE
   ===================================================================== */
.mcc-modal{
  border:none;
  border-radius:15px;
  font-family:'Archivo', sans-serif;
  overflow:hidden;
}

.mcc-modal .modal-header{
  border-bottom:1px solid var(--mcc-border);
  padding:1.25rem 1.5rem;
}

.mcc-modal .modal-title{
  font-weight:800;
  font-size:1.15rem;
  color:var(--mcc-heading);
}

.mcc-modal .btn-close:focus{
  box-shadow:0 0 0 .15rem rgba(var(--mcc-green-rgb),.15);
}

.mcc-modal .modal-body{
  padding:1.5rem;
}

.mcc-modal .modal-footer{
  border-top:none;
  padding:0 1.5rem 1.5rem;
  gap:.75rem;
}

.mcc-modal .modal-footer .btn-mcc-solid,
.mcc-modal .modal-footer .btn-mcc-gray{
  flex:1;
  justify-content:center;
}

/* custom backdrop overlay color for modals across the project */
.modal-backdrop{
  background-color:rgba(var(--mcc-green-rgb),.15); 
  opacity:1 !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px); /* Safari support */
}

.modal-md{
  max-width:560px;
}


/* =====================================================================
   13. MODALS — DELETE / APPROVE CONFIRMATION
   ===================================================================== */
.mcc-delete-modal{
  border:0;
  border-radius:15px;
  overflow:hidden;
}

.mcc-delete-modal .modal-body{
  padding:2.5rem 2rem;
}

.mcc-delete-title{
  color:var(--mcc-danger);
  font-size:2rem;
  font-weight:700;
  margin-bottom:1rem;
}

.mcc-delete-text{
  font-size:1.15rem;
  color:var(--mcc-text);
  margin-bottom:2rem;
}

.mcc-delete-actions{
  display:flex;
  justify-content:center;
  gap:1rem;
}

/* delete modal: gray (Cancel) + danger (Delete) button pairing */
.mcc-delete-actions .btn-mcc-gray,
.mcc-delete-actions .btn-mcc-danger{
  min-width:155px;
  justify-content:center;
}

/* approve modal: gray (Cancel) + solid green (Approve) button pairing —
   kept as a separate rule from the delete-modal pairing above since the
   min-width differs (165px vs 155px) */
.mcc-delete-actions .btn-mcc-gray,
.mcc-delete-actions .btn-mcc-solid{
  min-width:165px;
  justify-content:center;
}

.mcc-approve-modal{
  border:0;
  border-radius:15px;
  overflow:hidden;
}

.mcc-approve-modal .modal-body{
  padding:2.5rem 2rem;
}

.mcc-approve-title{
  color:var(--mcc-green);
  font-size:2rem;
  font-weight:700;
  line-height:1.15;
  margin-bottom:1.25rem;
}

.mcc-approve-text{
  font-size:1.15rem;
  color:var(--mcc-text);
  line-height:1.35;
  margin-bottom:2rem;
}

/* player information rows (shown inside the approve modal) */
.mcc-info-row{
  display:flex;
  align-items:center;
  margin-bottom:1rem;
}

.mcc-info-label{
  width:180px;
  font-size:1rem;
  font-weight:700;
  color:var(--mcc-heading);
}

.mcc-info-value{
  font-size:1rem;
  color:var(--mcc-text);
}

/* ==========================
   View Member Modal
========================== */
/* View Member Modal */
.mcc-view-member-dialog{
    max-width:609px;
    margin-left: auto;
    margin-right: 20px;
}

.mcc-view-member-dialog .modal-content{
    width:100%;
}

.mcc-member-photo{
    width:130px;
    height:130px;
    object-fit:cover;
    border-radius:50%;
    border:5px solid var(--mcc-green);
}

.mcc-detail-label{
    font-weight:700;
    color:var(--mcc-heading);
    margin-bottom:.55rem;
}

.mcc-detail-value{
    color:var(--mcc-text);
    margin-bottom:.55rem;
    line-height:1.45;
    word-break:break-word;
}


/* =====================================================================
   14. COMPONENT — DUAL LIST TRANSFER WIDGET
   (organization move / assign widget used in modals & pages)
   ===================================================================== */
.mcc-listbox{
  width:100%;
  height:240px;
  padding:.75rem;
  border:1px solid var(--mcc-border);
  border-radius:.75rem;
  background:var(--mcc-input-bg);
  color:var(--mcc-text);
  overflow:auto;
}

.mcc-listbox option{
  padding:.35rem .5rem;
  border-radius:.35rem;
}

.mcc-transfer-buttons{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  height:100%;
}

.mcc-transfer-buttons .btn{
  width:34px;
  height:28px;
  padding:0;
  border:1px solid var(--mcc-border);
  border-radius:.4rem;
  background:#fff;
  color:var(--mcc-text);
  display:flex;
  align-items:center;
  justify-content:center;
}

.mcc-transfer-buttons .btn:hover{
  background:var(--mcc-green-tint);
  border-color:var(--mcc-green);
  color:var(--mcc-green);
}

.custom-organization-col{
  width:47.666667%;
}

.custom-move-col{
  width:4.666667%;
}


/* =====================================================================
   15. COMPONENT — ORG NAME CELL / BOOKING PILL (Grounds page)
   ===================================================================== */
.org-name-cell{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  cursor:pointer;
  max-width:170px;
}

.org-name-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.org-name-cell.expanded .org-name-text{
  white-space:normal;
}

.org-name-cell .bi-chevron-down{
  font-size:.75rem;
  color:var(--mcc-muted);
  flex:0 0 auto;
  transition:transform .15s ease;
}

.org-name-cell.expanded .bi-chevron-down{
  transform:rotate(180deg);
}

.booking-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--mcc-green);
  color:#fff;
  border:none;
  font-size:.78rem;
  font-weight:600;
  padding:.4rem 1rem;
  border-radius:999px;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s ease;
}

.booking-pill:hover{
  background:var(--mcc-green-dark);
}


/* =====================================================================
   16. COMPONENT — ADD MEMBER / ADD ORGANIZATION PAGE
   ===================================================================== */
.mcc-page-wrapper{
  background:#fff;
  border-radius:15px;
  overflow:hidden;
}

.mcc-page-header{
  padding:1.5rem;
  border-bottom:1px solid var(--mcc-border);
}

.mcc-page-header h3{
  margin:0;
  font-size:1.8rem;
  font-weight:700;
  color:var(--mcc-heading);
}

/* modal-style page header with a close (X) button */
.mcc-page-header--modal{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.mcc-page-body{
  padding:1.5rem;
}

.mcc-page-footer{
  display:flex;
  gap:1rem;
  padding:1.5rem;
  border-top:1px solid var(--mcc-border);
}

.mcc-page-footer .btn-mcc-solid,
.mcc-page-footer .btn-mcc-gray{
  flex:1;
  justify-content:center;
}


/* =====================================================================
   17. COMPONENT — ORGANIZATION DETAILS PAGE
   ===================================================================== */
.org-details-head{
  padding:2rem 1.75rem 1.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  background-color:#fff;
  border-radius:0 0 20px 20px;
}

.org-logo{
  width:96px;
  height:96px;
  border-radius:50%;
  border:2px solid var(--mcc-green);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--mcc-green);
  font-size:2.4rem;
  margin-bottom:1.75rem;
  overflow: hidden;          
}

.org-logo img{
    width: 100%;                /* ✅ fills the circle */
    height: 100%;
    object-fit: cover;          /* ✅ crops nicely, no stretching */
    display: block;
}

.org-details-grid{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1rem 2.5rem;
  padding:0 1rem;
}

.org-detail-row{
  display:flex;
  align-items:baseline;
  gap:.5rem;
  font-size:.87rem;
}

.org-detail-label{
  color:var(--mcc-muted);
  flex:0 0 auto;
  min-width:140px;
}

.org-detail-value{
  color:var(--mcc-text);
  font-weight:600;
}

.org-detail-row.full-row{
  grid-column:1 / -1;
  align-items:flex-start;
}

.org-detail-row.full-row .org-detail-value{
  font-weight:400;
  line-height:1.5;
}

.mcc-tabs{
  display:flex;
  gap:1.75rem;
  padding:0 1.75rem;
}

.mcc-tab-btn{
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  padding:.9rem 0;
  font-size:.92rem;
  font-weight:700;
  color:var(--mcc-muted);
  cursor:pointer;
}

.mcc-tab-btn:hover{
  color:var(--mcc-text);
}

.mcc-tab-btn.active{
  color:var(--mcc-green);
  border-bottom-color:var(--mcc-green);
}

.mcc-tab-pane{
  display:none;
}

.mcc-tab-pane.active{
  display:block;
}

.mcc-tab-placeholder{
  padding:3rem 1.75rem;
  text-align:center;
  color:var(--mcc-muted);
  font-size:.9rem;
}

.org-details-footer{
  display:flex;
  gap:1rem;
  padding:1.5rem 1.75rem;
  border-top:1px solid var(--mcc-border);
}

.org-details-footer .btn-mcc-solid,
.org-details-footer .btn-mcc-gray{
  flex:1;
  justify-content:center;
  padding:.85rem 1rem;
  font-size:.95rem;
}


/* =====================================================================
   18. COMPONENT — TEAM DETAILS PAGE + MEMBER CARDS
   ===================================================================== */
.team-details-main{
  background-color:#fff;
  border-radius:0 0 20px 20px;
}

.team-details-head{
  display:flex;
  align-items:flex-start;
  gap:2.5rem;
  padding:1.75rem;
  border-bottom:1px solid var(--mcc-border);
  flex-wrap:wrap;
}

.team-crest{
  width:222px;
  height:auto;
  border-radius:50%;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
}

.team-crest svg{
  width:100%;
  height:100%;
}

.team-crest img {
  width: 220px;
  height: auto;
}

.team-info-columns{
  display:flex;
  flex:1;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}

.team-info-labels,
.team-info-values{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  font-size:.87rem;
  width:300px;
}

.team-info-labels div{
  font-weight:700;
  color:var(--mcc-heading);
  white-space:nowrap;
}

.team-info-values div{
  font-weight:400;
  color:var(--mcc-muted);
  white-space:nowrap;
}

.members-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
  padding:1.75rem 1.75rem 1.25rem;
}

.members-head h2{
  font-size:1.15rem;
  font-weight:800;
  color:var(--mcc-heading);
  margin:0;
  margin-right:auto;
}

.member-search{
  position:relative;
  flex:1;
  max-width:320px;
  min-width:180px;
}

.member-search input{
  width:100%;
  border:1px solid var(--mcc-border);
  background:var(--mcc-input-bg);
  border-radius:.6rem;
  padding:.6rem 2.5rem .6rem .9rem;
  font-size:.87rem;
  color:var(--mcc-text);
}

.member-search input:focus{
  outline:none;
  border-color:var(--mcc-green-light);
  background:#fff;
  box-shadow:0 0 0 .15rem rgba(var(--mcc-green-rgb),.1);
}

.member-search .bi-search{
  position:absolute;
  right:.85rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--mcc-muted);
  font-size:.9rem;
  pointer-events:none;
}

.members-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.25rem;
  padding:0 1.75rem 1.75rem;
}

.member-card{
  border-radius:.85rem;
  padding:1.25rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);
}

.member-avatar{
  width:76px;
  height:76px;
  border-radius:50%;
  overflow:hidden;
  margin-bottom:.85rem;
  background:var(--mcc-app-bg);
}

.member-avatar img,
.member-avatar svg{
  width:100%;
  height:100%;
  object-fit:cover;
}

.member-name{
  font-size:.95rem;
  font-weight:700;
  color:var(--mcc-heading);
  margin-bottom:.6rem;
}

.member-meta{
  width:100%;
  text-align:left;
  font-size:.78rem;
  margin-bottom:1rem;
}

.member-meta div{
  display:flex;
  justify-content:space-between;
  gap:.5rem;
  padding:.15rem 0;
}

.member-meta .meta-label{
  color:var(--mcc-heading);
  font-weight:600;
  flex:0 0 auto;
}

.member-meta .meta-value{
  color:var(--mcc-text);
  text-align:right;
}

.member-card .btn-mcc-solid{
  width:100%;
  justify-content:center;
}

.member-card.filtered-out{
  display:none;
}

.team-details-footer{
  display:flex;
  gap:1rem;
  padding:1.5rem 1.75rem;
  border-top:1px solid var(--mcc-border);
}

.team-details-footer .btn-mcc-solid,
.team-details-footer .btn-mcc-gray{
  flex:1;
  justify-content:center;
  padding:.85rem 1rem;
  font-size:.95rem;
}


/* =====================================================================
   19. PAGE — SIGN IN
   ===================================================================== */
.mcc-shell{
  min-height:100vh;
}

/* ---- left hero panel ---- */
.mcc-hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background-color:#111;
}

.mcc-hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
  filter:saturate(1.05) contrast(1.05);
}

.mcc-hero-scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(8,10,9,.55) 0%, rgba(8,10,9,.15) 30%, rgba(8,10,9,.35) 65%, rgba(8,10,9,.85) 100%),
    linear-gradient(90deg, rgba(8,10,9,.25) 0%, rgba(8,10,9,0) 45%);
}

.mcc-hero-content{
  position:relative;
  z-index:4;
  height:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2rem;
  text-align:center;
}

.mcc-hero-logo{
  height:auto;
  max-width:320px;
  width:100%;
  margin-bottom:.25rem;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));
  opacity:.97;
}

.mcc-hero-social{
  position:absolute;
  bottom:2rem;
  left:0; right:0;
  z-index:5;
  display:flex;
  justify-content:center;
  gap:.9rem;
}

.mcc-hero-social a{
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgb(255 255 255);
  border:1.5px solid rgba(255, 255, 255, .65);
  color:var(--mcc-green);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:background .18s ease, transform .18s ease;
}

.mcc-hero-social a:hover{
  background:var(--mcc-green-light);
  border-color:var(--mcc-green-light);
  transform:translateY(-2px);
}

/* ---- right form panel ---- */
.mcc-form-side{
  background:#fff;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.mcc-form-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2.5rem 1.5rem;
}

.mcc-form-inner{
  width:100%;
  max-width:360px;
}

.mcc-form-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:2rem;
}

.mcc-form-logo img{
  height:auto;
  max-width:263px;
  width:100%;
}

.mcc-title{
  font-weight:700;
  font-size:2rem;
  text-align:center;
  margin-bottom:.5rem;
  color:var(--mcc-heading);
}

.mcc-subtitle{
  text-align:center;
  color:var(--mcc-text);
  font-size:1rem;
  margin-bottom:1.9rem;
}

.mcc-label{
  font-size:.9rem;
  font-weight:600;
  color:var(--mcc-text);
  margin-bottom:.4rem;
}

.form-control.mcc-input{
  border:1px solid var(--mcc-input-bg);
  border-radius:.55rem;
  padding:.68rem .9rem;
  font-size:1rem;
  background:var(--mcc-input-bg);
  color:var(--mcc-text);
}

.form-control.mcc-input:focus{
  border-color:var(--mcc-green);
  box-shadow:0 0 0 .2rem rgba(var(--mcc-green-rgb),.13);
  background:#fff;
}

.mcc-row-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:.9rem 0 1.4rem;
  font-size:.9rem;
}

.mcc-forgot{
  color:var(--mcc-green);
  text-decoration:none;
  font-weight:600;
}

.mcc-forgot:hover{
  text-decoration:underline;
}

.form-check-input:checked{
  background-color:var(--mcc-green);
  border-color:var(--mcc-green);
}

.btn-mcc{
  background:var(--mcc-green);
  border:none;
  color:#fff;
  font-weight:600;
  font-size:1rem;
  padding:.72rem 1rem;
  border-radius:.55rem;
  width:100%;
  transition:background .18s ease, transform .1s ease;
}

.btn-mcc:hover{
  background:var(--mcc-green-dark);
  color:#fff;
}

.btn-mcc:active{
  transform:translateY(1px);
}

.mcc-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:1.25rem 2.25rem;
  font-size:.8rem;
  color:var(--mcc-rights);
}

.mcc-footer a{
  color:var(--mcc-terms);
  text-decoration:none;
  margin-left:1.25rem;
}

.mcc-footer a:hover{
  color:var(--mcc-green);
}

.mcc-footer-links{
  display:flex;
}

.toggle-eye{
  cursor:pointer;
  color:var(--mcc-terms);
}

.input-group .mcc-input{
  border-right:none;
}

.input-group .mcc-eye-addon{
  border:1px solid var(--mcc-border);
  border-left:none;
  background:#fbfbfa;
  border-radius:0 .55rem .55rem 0;
}

.input-group:focus-within .mcc-eye-addon{
  border-color:var(--mcc-green-light);
}


/* =====================================================================
   20. MEDIA QUERIES (consolidated — each breakpoint appears exactly once)
   ===================================================================== */

@media (max-width: 991.98px){

  /* Sidebar */
  .mcc-sidebar{
    transform:translateX(-120%);
  }
  .mcc-sidebar.show{
    transform:translateX(0);
    box-shadow:0 0 40px rgba(0,0,0,.15);
  }

  /* Main content */
  .mcc-main{
    margin-left:0;
  }

  /* Topbar */
  .mcc-search{
    max-width:none;
  }
  .mcc-mobile-toggle{
    display:flex;
  }

  /* Add Member / Add Organization page */
  .mcc-page-header,
  .mcc-page-body,
  .mcc-page-footer{
    padding:1rem;
  }
  .mcc-page-footer{
    flex-direction:column;
  }
  .mcc-page-footer .btn-mcc-solid,
  .mcc-page-footer .btn-mcc-gray{
    width:100%;
  }

  /* Team Details — member cards */
  .members-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  /* Sign In */
  .mcc-hero{
    min-height:38vh;
  }
  .mcc-hero-content{
    min-height:38vh;
    padding:1.25rem;
  }
  .mcc-form-side{
    min-height:auto;
  }
  .mcc-footer{
    padding:1.25rem;
    text-align:center;
    justify-content:center;
  }
}

@media (max-width: 767.98px){

  /* Topbar / Panel */
  .mcc-topbar{
    padding:1rem;
    height:auto;
    flex-wrap:wrap;
  }
  .mcc-panel-head{
    padding:1.1rem;
  }
  .mcc-panel-title{
    width:100%;
    margin-bottom:.4rem;
  }

  /* Organization Details */
  .org-details-grid{
    grid-template-columns:1fr;
  }
  .mcc-tabs{
    gap:1.1rem;
    overflow-x:auto;
  }
  .org-details-footer{
    flex-direction:column;
  }
}

@media (max-width: 575.98px){

  /* Main content / Topbar */
  .mcc-content{
    padding:.6rem;
  }
  .mcc-topbar{
    margin:.6rem;
    gap:.6rem;
  }
  .mcc-user .name{
    display:none;
  }

  /* Pagination */
  .mcc-pagination-row{
    flex-direction:column;
    align-items:stretch;
    text-align:center;
    padding:1rem;
  }
  .mcc-page-select{
    justify-content:center;
  }
  .mcc-page-nav{
    justify-content:center;
  }

  /* Team Details — member cards */
  .members-grid{
    grid-template-columns:1fr;
    padding:0 1.1rem 1.1rem;
  }
  .team-details-head{
    padding:1.1rem;
  }
  .members-head{
    padding:1.1rem 1.1rem .9rem;
  }
  .member-search{
    max-width:none;
  }
  .team-details-footer{
    flex-direction:column;
    padding:1.1rem;
  }
  .team-info-labels,
  .team-info-values{
    width:120px;
  }
  /* view memebr detail  */
      .mcc-detail-label,
    .mcc-detail-value{
        width:100%;
        flex:0 0 100%;
        max-width:100%;
    }

    .mcc-member-photo{
        width:110px;
        height:110px;
    }
}

@media (max-width: 400px){

  /* Pagination — hide first/last jump buttons to save space */
  .mcc-page-nav .pg-btn[aria-label="First page"],
  .mcc-page-nav .pg-btn[aria-label="Last page"]{
    display:none;
  }
  .mcc-page-nav .pg-btn{
    min-width:30px;
    height:30px;
  }
}

.btn-info-link {
    /* your outline button styles */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: transparent;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-info-link:hover {
    background: #f5f5f5;
    border-color: #999;
}