/* ADRDN shared site styles (calendar + finder)
   Generated from calendar_test25.html
*/

:root{
      --bg1:#f6fbff;
      --ink:#0f172a;
      --muted:#475569;
      --stroke:#e2e8f0;
      --chip:#ffffff;
      --chipOn:#0b4aa2;
      --chipOnInk:#ffffff;
      --shadow: 0 14px 40px rgba(2, 6, 23, .08);
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
      color:var(--ink);
      background: radial-gradient(900px 600px at 18% 0%, #e9f8ff 0%, transparent 55%),
                  radial-gradient(900px 600px at 82% 0%, #eef0ff 0%, transparent 55%),
                  linear-gradient(180deg, var(--bg1) 0%, #ffffff 60%);
    }
    .wrap{max-width:1380px;margin:14px auto 18px;padding:0 16px}

    /* Top menu */
    .menu{
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      background:rgba(255,255,255,.88);
      backdrop-filter: blur(8px);
      border:1px solid var(--stroke);
      border-radius:16px;
      padding:10px 12px;
      box-shadow: var(--shadow);
    }
    .brand{display:flex;align-items:center;gap:10px;min-width:240px}
    .brand img{height:34px;width:auto;display:block}
    .brand .brandText{display:flex;flex-direction:column;line-height:1.15}
    .brand .brandText b{font-size:14px}
    .brand .brandText span{font-size:12px;color:var(--muted)}
    .menuRight{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

    .toggle{
      display:flex;align-items:center;gap:8px;
      border:1px solid var(--stroke);
      background:#fff;border-radius:999px;padding:6px 10px;
      font-size:12px;color:var(--muted);
    }
    .switch{
      width:42px;height:24px;border-radius:999px;border:1px solid var(--stroke);
      background:#f8fafc; position:relative; cursor:pointer; flex:0 0 auto;
    }
    .knob{
      width:18px;height:18px;border-radius:999px;background:#0b4aa2;
      position:absolute;top:2px;left:2px;transition:.15s left;
    }
    .switch.on .knob{left:22px}
    .langLabel{font-variant-numeric: tabular-nums}

    /* Card header */
    .topbar{
      margin-top:12px;
      background:rgba(255,255,255,.88);
      backdrop-filter: blur(8px);
      border:1px solid var(--stroke);
      border-radius:16px;
      padding:14px 14px 12px;
      box-shadow: var(--shadow);
    }
    .titleRow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
    h1{font-size:20px;margin:0}
    .sub{font-size:13px;color:var(--muted);margin-top:4px;max-width:920px}

    .btn{
      appearance:none;border:1px solid var(--stroke);background:var(--chip);
      border-radius:999px;padding:8px 12px;cursor:pointer;
      font-size:13px;color:var(--ink);
      transition:.15s transform,.15s background,.15s border-color;
      user-select:none;
    }
    .btn:hover{transform: translateY(-1px)}
    .btn.on{background:var(--chipOn);border-color:var(--chipOn);color:var(--chipOnInk)}
    .btn.ghost{background:transparent}

    .filters{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;align-items:center}
    .group{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    .label{font-size:12px;color:var(--muted);margin-right:2px}

    .layout{
      display:grid;
      /* Default: give more space to calendar, but keep details readable */
      grid-template-columns: 1.55fr .80fr;
      gap:14px;
      margin-top:14px;
      align-items:start;
    }

    /* 13–14" laptops (typical 1366–1440 wide): reduce side whitespace and widen cards */
    @media (min-width: 1180px) and (max-width: 1499px){
      .wrap{max-width: 1180px; padding: 0 12px;}
      .layout{grid-template-columns: 1.65fr .95fr; gap: 12px;}
      .topbar{padding: 12px 12px 10px;}
      #calendar{padding: 8px 8px 12px;}
      .side{padding: 12px;}
    }

    /* Big screens: keep content comfortably wide */
    @media (min-width: 1500px){
      .wrap{max-width: 1420px;}
      .layout{grid-template-columns: 1.60fr .85fr;}
    }

    /* Tablets/phones */
    @media (max-width: 980px){ .layout{grid-template-columns:1fr} }
    .card{
      background:rgba(255,255,255,.92);
      border:1px solid var(--stroke);
      border-radius:16px;
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    #calendar{padding:10px 10px 14px}
    .side{padding:14px}

    /* Right panel */
    .clubBadge{
      display:flex;align-items:center;gap:10px;
      padding:8px 10px;border:1px solid var(--stroke);border-radius:14px;background:#fff;
      min-height:48px;
    }
    .logoStack{display:flex;align-items:center;gap:6px;flex:0 0 auto}
    .logoStack img{
      width:36px;height:36px;object-fit:contain;border-radius:10px;border:1px solid var(--stroke);background:#fff;
      display:none;
    }
    .clubBadge .text{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1 1 auto}
    .clubBadge .text b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .clubBadge .text a{font-size:12px;color:#0b4aa2;text-decoration:none;display:none}
    .clubBadge .text a:hover{text-decoration:underline}

    .when{font-size:13px;color:var(--muted);margin:8px 0 8px}
    .pillRow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
    .pill{font-size:12px;border:1px solid var(--stroke);border-radius:999px;padding:4px 10px;background:#fff}

    .kv{display:grid;grid-template-columns: 1fr;gap:8px;margin-top:6px}
    .row{
      display:flex;align-items:center;gap:10px;
      padding:8px 10px;
      border:1px solid var(--stroke);
      background:#fff;
      border-radius:12px;
    }
    .ico{width:18px;height:18px;flex:0 0 auto;color:#0b4aa2}
    .k{color:var(--muted);font-size:12px;min-width:72px}
    .v{color:var(--ink);font-size:13px;line-height:1.15;flex:1 1 auto}
    .v a{color:#0b4aa2;text-decoration:none}
    .v a:hover{text-decoration:underline}

    .panel{
      margin-top:10px;
      border:1px solid var(--stroke);
      background:#fff;
      border-radius:14px;
      padding:10px;
    }
    .panelTitle{
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      font-size:12px;color:var(--muted);margin-bottom:8px
    }
    .miniMap{
      width:100%;
      height:220px;
      border:0;
      border-radius:12px;
      display:none;
      margin-top:8px;
      background:#f8fafc;
    }

    .link{color:#0b4aa2;text-decoration:none;font-size:13px}
    .hint{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.35}

    .fc .fc-toolbar-title{font-size:18px}
    .fc .fc-button{border-radius:10px}
    .fc .fc-timegrid-slot-label, .fc .fc-timegrid-axis-cushion{font-size:12px}
    .fc .fc-list-event-title{font-weight:600}
    .fc .fc-event-title{font-weight:600}
    .fc .fc-event-time{font-variant-numeric: tabular-nums}
  
    /* --- Desktop: show more of the event title --- */
    @media (min-width: 981px){
      /* Month view: allow wrapping so long names aren't cut immediately */
      .fc .fc-daygrid-event .fc-event-title{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.15;
      }
      /* Slightly tighter chrome so title gets more room */
      .fc .fc-daygrid-event{
        padding: 2px 4px;
      }
      /* Week view: increase row height a bit for readability */
      .fc .fc-timegrid-slot{
        height: 1.9em;
      }
      .fc .fc-event{
        padding: 2px 4px;
      }
    }

    /* --- Mobile UX tweaks --- */
    @media (max-width: 980px){
      /* Make filters sticky so users always see them */
      #clearBtn{display:none}
      #lblClubs{display:none}
      #lblAudience{display:none}
      #lblType{display:none}

      .topbar{
        position: sticky;
        top: 10px;
        z-index: 20;
      }
      /* Hide non-club filters to save space (clubs only) */
      .filters .group:not(:last-child){
        display:none;
      }
      /* Give calendar a little more breathing room */
      #calendar{padding:8px 8px 12px}
      /* Slightly denser event rendering for small screens */
      .fc .fc-event{padding:1px 2px}
    }

    
    /* Make event borders thinner so more text fits */
    .fc .fc-event{ border-width: 1px !important; }
    .fc .fc-daygrid-event{ margin-top: 1px; }

    /* Back-to-calendar button (shown only on small screens via JS) */
    
    /* Mobile nav (calendar/top) – shown on small screens via JS */
    #mobileNav{
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 50;
      display:none;
      gap:10px;
      justify-content:center;
      pointer-events:none;
    }
    #mobileNav button{
      pointer-events:auto;
      flex:1 1 auto;
      max-width:520px;
      border:1px solid var(--stroke);
      background:rgba(255,255,255,.92);
      backdrop-filter: blur(8px);
      border-radius:999px;
      padding:10px 14px;
      font-size:14px;
      box-shadow: var(--shadow);
      cursor:pointer;
    }