.eventfolio-col input,
.eventfolio-col select,
.eventfolio-col textarea {
    width: 100%;
    box-sizing: border-box;
}

/* User permission columns */
.eventfolio-col-user         { flex: 1 0 20%; min-width: 90px; }
.eventfolio-col-username     { flex: 1 0 20%; min-width: 90px; }
.eventfolio-col-permissions  { flex: 1 0 20%; min-width: 90px; text-align: center; }
.eventfolio-col-updated      { flex: 1 0 20%; min-width: 90px; }
/* Actions reused above */

/* If you want different sized columns, override below */
.eventfolio-col-name        { flex: 1 1 17%; }
.eventfolio-col-visibility  { flex: 0 1 17%; }
.eventfolio-col-description { flex: 2 1 49%; }
.eventfolio-col-actions     { flex: 0 0 17%; }

.eventfolio-col-event-list-icon   { flex: 0 1 25%; }
.eventfolio-col-event-list-main   { flex: 2 1 50%; }
.eventfolio-col-event-list-action { flex: 0 0 25%; }


.eventfolio-col-event-list-title       { flex: 0 1 50%; }
.eventfolio-col-event-list-location    { flex: 0 1 50%; }
.eventfolio-col-event-list-start       { flex: 0 1 50%; }
.eventfolio-col-event-list-end         { flex: 0 1 50%; }
.eventfolio-col-event-list-recur       { flex: 0 1 50%; }
.eventfolio-col-event-list-recurdetail { flex: 0 1 50%; }

/* Form/input elements in cells */
.eventfolio-col input/*[type="text"]*/,
.eventfolio-col textarea,
.eventfolio-col select {
    width: 100% !important;
    padding: 0;
    margin: 0;
   /* min-width: 60px;*/
    box-sizing: border-box;
    font-size: inherit;
    background: rgba(0,0,0,0.1);
    border: 1px solid #333;
    border-radius: 4px;
}

/* Button-as-link styling */
.eventfolio-btn.eventfolio-btn-save {
    background: none;
    border: none;
    color: #2196F3; /* Same as links */
    padding: 0;
    margin: 0;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s;
}
.eventfolio-btn.eventfolio-btn-save:hover,
.eventfolio-btn.eventfolio-btn-save:focus {
    color: #1976D2;
    text-decoration: underline;
}

.ef-admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 1em;
    padding: 0.5em 0;
    background: rgba(0,0,0,0.04);
    border-radius: 5px;
}

.ef-admin-nav a {
    color: #2196F3;
    text-decoration: none;
    padding: 0.4em 1em;
    border-radius: 4px;
    font-weight: 500;
    background: transparent;
    transition: background 0.2s, color 0.2s;
}

.ef-admin-nav a:hover,
.ef-admin-nav a:focus {
    background: #f1f6fb;
    color: #1565C0;
}

.ef-admin-nav-selected,
.ef-admin-nav .ef-admin-nav-selected {
    background: #2196F3;
    color: #fff !important;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(33,150,243,0.08);
    pointer-events: none;
}

/* Responsive: stack or scroll if too narrow */
@media (max-width: 600px) {
    .eventfolio-list {
        flex-direction: column;
    }
    .eventfolio-row {
        flex-direction: column;
        height: auto;
        gap: 0;
    }
    .eventfolio-col {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        text-align: left !important;
    }
}

.eventfolio-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.eventfolio-row {
    display: flex;
    flex-direction: row;
    height: 32px;
    width: 100%;
}

.eventfolio-row-noheight {
    display: flex;
    flex-direction: row;
    width: 100%;
    border-bottom: 1px solid #ccc;
}

.eventfolio-row-noheight-noline {
    display: flex;
    flex-direction: row;
    width: 100%;
    border: none !important;
}

.eventfolio-col {
    flex: 1 1 0;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 4px;
    padding-right 4px;
    padding-bottom 4px;
}

.eventfolio-plain-col {
    display: flex;
    align-items: left;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left 4px;
    padding-right 4px;
    padding-bottom 4px;
}
.eventfolio-plain-col-wrap {
    display: flex;
    align-items: left;
    text-align: left;
    padding-left 4px;
    padding-right 4px;
    padding-bottom 4px;
}

.eventfolio-event-col {
    display: flex;
    gap: 1em;
    align-items: center;
    margin-bottom: 1em;
    padding-right: 4px;
}

.eventfolio-col-title-full {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 8px; /* optional: spacing above */
}

.eventfolio-col-description-full {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 8px; /* optional: spacing above */
}
.eventfolio-event-controls {
    display: flex;
    align-items: center;
    gap: 18px;            /* horizontal gap between dropdown & radio */
    margin-bottom: 12px;  /* vertical spacing below the whole bar */
}

.eventfolio-category-form {
}

.eventfolio-mode-form {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    width: 50%;
}

.eventfolio-mode-form label {
    margin-right: 10px;  /* gap between List and Calendar */
    font-weight: normal;
}

.eventfolio-category-form select {
    max-width: 100%;
    min-width: 120px;  /* optional: prevents it from getting too small */
    box-sizing: border-box;
}

.eventfolio-header {
    font-weight: bold;
    background: rgba(0,0,0,0.2);
}

.eventfolio-btn {
    background: none;
    border: none;
    padding: 4px 8px;
    margin-left: 8px;
    cursor: pointer;
    border-radius: 50%;
    font-size: 1.2em;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    transition: background 0.2s;
}
.eventfolio-btn:hover {
    background: #222;
}

.eventfolio-toggle-btn {
    background: none;
    border: none;
    padding: 4px 8px;
    font-size: 22px;
    color: #aaa;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
}
.eventfolio-toggle-btn.active,
.eventfolio-toggle-btn:focus {
    background: #2196F3;
    color: #fff;
}
.eventfolio-toggle-btn:not(.active):hover {
    background: #333;
    color: #fff;
}

.eventfolio-btn-add {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background: transparent;
    border: 1.5px solid #2196F3;
    color: #2196F3;
    border-radius: 7px;
    font-weight: 500;
    font-size: 1em;
    padding: 0.4em 1em 0.4em 0.9em;
    margin-bottom: 0.5em;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border 0.15s;
    cursor: pointer;
    outline: none;
}

.eventfolio-btn-add:hover,
.eventfolio-btn-add:focus {
    background: #2196F3;
    color: #fff;
    border-color: #1976D2;
    text-decoration: none;
}

.eventfolio-btn-add .dashicons {
    font-size: 1.1em;
    margin-right: 0.2em;
    line-height: 1;
}
.eventfolio-image-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4em;
}
.eventfolio-image-picker img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #bbb;
    background: #eee;
}
.eventfolio-image-text {
    color: #2196F3;
    font-size: 0.93em;
    cursor: pointer;
    text-decoration: underline dotted;
    margin-top: 0.3em;
}
.eventfolio-image-trigger:hover .eventfolio-image-text {
    color: #1976D2;
}

.eventfolio-col-actions {
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
}
.eventfolio-col-actions a {
    display: inline-block;
    margin-right: 0.8em;
}

.eventfolio-event {
    display: inline-block;
    text-decoration: none;
    color: #000;
}

.calendar-month-header {
    text-align: center;
    align-items: center;
}

.calendar-cell {
    width:14%;
    border:1px solid #777;
    overflow:hidden;

}

.calendar-past {
    background-image: url('/wp-content/plugins/Eventfolio/assets/x.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.calendar-today {
    border: 1px solid #55F;
    background-color: rgba(0,0,255,0.2);
}

.calendar-selected {
    border: 1px solid #5F5;
    background-color: rgba(0,255,0,0.2);
}

.calendar-selected-today {
    border: 1px solid #5FF;
    background-color: rgba(0,255,255,0.2);
}

.indent { padding-left: 1em; }

.square-grow {
  width: 100%;              /* or whatever width you want */
  /*aspect-ratio: 1 / 1;      /* height = width (square) */
  min-height: 100%;
  /*min-height: 0;            /* usually safe default */
  /* allow content to stretch height further */
  display: block;
}
.square-grow > * {
  /* optional: make content fill and wrap */
  width: 100%;
  min-height: 100%;
}

/* --- LOADED TEST --- */
/*body::after {
    content: "Eventfolio CSS loaded";
    display: block;
    color: #fff;
    background: #4caf50;
    font-weight: bold;
    padding: 6px;
    text-align: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    pointer-events: none;
}/**/