/* RPKalender - Frontend styles */

/* ── CSS Variables (defaults, overridden via inline style) ── */
:root {
    --rpk-primary:    #B32017;
    --rpk-accent:     #e84040;
    --rpk-text:       #1a1a1a;
    --rpk-bg:         #ffffff;
    --rpk-font-size:  16px;
    --rpk-btn-size:   48px;
    --rpk-radius:     6px;
    --rpk-font-family: inherit;
    --rpk-border:     #e0e0e0;
    --rpk-bg-light:   #f5f5f5;
    --rpk-today-bg:   #fff3f3;
    --rpk-shadow:     0 2px 8px rgba(0,0,0,.12);
}

/* ── Wrapper ── */
.rpk-calendar-wrap {
    font-family:  var(--rpk-font-family);
    font-size:    var(--rpk-font-size);
    color:        var(--rpk-text);
    background:   var(--rpk-grid-bg, #e8e8e8);
    border:       none;
    border-radius: 0;
    overflow:     visible;
    position:     relative;
}

/* ── Toolbar ── */
.rpk-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             8px;
    padding:         10px 14px;
    background:      var(--rpk-primary);
    color:           #fff;
}
.rpk-toolbar-left,
.rpk-toolbar-right {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
}
.rpk-toolbar-center h2.rpk-current-title {
    margin:      0;
    font-size:   1.1em;
    font-weight: 600;
    color:       #fff;
    white-space: nowrap;
}

/* ── Buttons ── */
.rpk-btn {
    min-height:     var(--rpk-btn-size);
    padding:        0 14px;
    border:         2px solid rgba(255,255,255,.4);
    border-radius:  var(--rpk-radius);
    background:     transparent;
    color:          #fff;
    font-size:      var(--rpk-font-size);
    font-family:    var(--rpk-font-family);
    cursor:         pointer;
    transition:     background .15s, border-color .15s;
    line-height:    1;
}
.rpk-btn:hover {
    background:    rgba(255,255,255,.2);
    border-color:  rgba(255,255,255,.8);
}
.rpk-btn-nav {
    font-size:  1.4em;
    padding:    0 12px;
    min-width:  var(--rpk-btn-size);
}
.rpk-btn-today {
    font-weight: 600;
}
.rpk-btn-add {
    background:   rgba(255,255,255,.2);
    font-weight:  600;
}
.rpk-btn-add:hover {
    background:   rgba(255,255,255,.35);
}
.rpk-btn-ical {
    text-decoration: none;
    min-height:  var(--rpk-btn-size);
    padding:     0 12px;
    display:     flex;
    align-items: center;
    border:      2px solid rgba(255,255,255,.4);
    border-radius: var(--rpk-radius);
    font-size:   1.1em;
}
.rpk-view-switcher {
    display:     flex;
    gap:         0;
    border:      2px solid rgba(255,255,255,.4);
    border-radius: var(--rpk-radius);
    overflow:    hidden;
}
.rpk-view-btn {
    border:        none;
    border-radius: 0;
    border-right:  1px solid rgba(255,255,255,.3);
    padding:       0 12px;
}
.rpk-view-btn:last-child { border-right: none; }
.rpk-view-btn.rpk-active {
    background:  rgba(255,255,255,.3);
    font-weight: 600;
}

/* ── Filter bar ── */
.rpk-filters {
    display:     flex;
    flex-wrap:   wrap;
    gap:         6px;
    padding:     8px 14px;
    border-bottom: 1px solid var(--rpk-border);
    background:  var(--rpk-bg-light);
}
.rpk-filter-btn {
    display:       flex;
    align-items:   center;
    gap:           5px;
    padding:       5px 12px;
    border:        1px solid var(--rpk-border);
    border-radius: 999px;
    background:    var(--rpk-bg);
    color:         var(--rpk-text);
    font-size:     .875em;
    cursor:        pointer;
    transition:    background .15s, color .15s;
}
.rpk-filter-btn.rpk-active,
.rpk-filter-btn:hover {
    background:  var(--rpk-primary);
    color:       #fff;
    border-color: var(--rpk-primary);
}
.rpk-cat-dot {
    display:      inline-block;
    width:        10px;
    height:       10px;
    border-radius: 50%;
    flex-shrink:  0;
}

/* ── Body ── */
.rpk-calendar-body {
    padding: 0;
    min-height: 300px;
    position: relative;
}
.rpk-loading {
    position:  absolute;
    inset:     0;
    display:   flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.8);
    font-size:  1.1em;
    z-index:   10;
}

/* ── Month table ── */
.rpk-month-table {
    width:           100%;
    border-collapse: collapse;
    table-layout:    fixed;
    background:      var(--rpk-grid-bg, #e8e8e8);
}
.rpk-month-table thead th {
    padding:        10px 8px 6px;
    text-align:     left;
    font-size:      .78em;
    font-weight:    700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          #888;
    background:     var(--rpk-grid-bg, #e8e8e8);
    border:         1px solid var(--rpk-grid-bg, #e8e8e8);
}
.rpk-wn-header {
    width:      38px;
    color:      #bbb !important;
    font-size:  .7em !important;
    text-align: center !important;
}
.rpk-month-table tbody tr {
    height: var(--rpk-cell-height, 160px);
}
.rpk-day {
    padding:        8px 8px 6px;
    vertical-align: top;
    border:         3px solid var(--rpk-grid-bg, #e8e8e8);
    border-radius:  0;
    cursor:         default;
    background:     var(--rpk-cell-bg, #fff);
}
.rpk-day-empty {
    background: var(--rpk-cell-empty, #f0f0f0);
}
.rpk-day.rpk-today {
    background: var(--rpk-cell-bg, #fff);
    outline:    3px solid var(--rpk-primary);
    outline-offset: -3px;
}
.rpk-day.rpk-has-events { cursor: pointer; }
.rpk-day.rpk-has-events:hover { background: #fafafa; }
.rpk-day-num {
    display:       block;
    font-size:     .95em;
    font-weight:   700;
    text-align:    left;
    margin-bottom: 5px;
    color:         #333;
    line-height:   1;
}
.rpk-today .rpk-day-num {
    background:    var(--rpk-primary);
    color:         #fff;
    border-radius: 50%;
    width:         26px;
    height:        26px;
    line-height:   26px;
    text-align:    center;
    display:       inline-block;
    margin-bottom: 5px;
}
.rpk-wn {
    text-align:     center;
    font-size:      .72em;
    color:          #aaa;
    background:     var(--rpk-grid-bg, #e8e8e8);
    border:         3px solid var(--rpk-grid-bg, #e8e8e8);
    vertical-align: middle;
    padding:        4px 2px;
    width:          38px;
    font-weight:    600;
}

/* ── Event pill (month) ── */
.rpk-event-pill {
    display:       block;
    padding:       3px 7px;
    border-radius: 4px;
    color:         #fff;
    font-size:     .78em;
    font-weight:   600;
    margin-bottom: 3px;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    cursor:        pointer;
    transition:    opacity .15s, transform .1s;
    box-shadow:    0 1px 2px rgba(0,0,0,.15);
}
.rpk-event-pill:hover { opacity: .9; transform: translateY(-1px); }
.rpk-pill-time { opacity: .85; font-size: .88em; margin-right: 2px; }
.rpk-event-more {
    font-size:   .72em;
    color:       #999;
    padding:     1px 4px;
    font-style:  italic;
}

/* ── Week view ── */
.rpk-week-grid {
    display:   grid;
    grid-template-columns: repeat(7, 1fr);
}
.rpk-week-col {
    border-right: 1px solid var(--rpk-border);
    min-height:   var(--rpk-cell-height, 160px);
}
.rpk-week-col:last-child { border-right: none; }
.rpk-today-col { background: var(--rpk-today-bg); }
.rpk-week-header {
    display:       flex;
    flex-direction: column;
    align-items:   center;
    padding:       8px 4px;
    border-bottom: 1px solid var(--rpk-border);
    background:    var(--rpk-bg-light);
}
.rpk-week-day-name {
    font-size:    .72em;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:        #888;
}
.rpk-week-day-num {
    font-size:   1.3em;
    font-weight: 700;
    margin-top:  2px;
}
.rpk-today-num {
    background:   var(--rpk-primary);
    color:        #fff;
    border-radius: 50%;
    width:        34px;
    height:       34px;
    line-height:  34px;
    text-align:   center;
    display:      inline-block;
}
.rpk-week-events { padding: 4px; }
.rpk-event-block {
    display:      block;
    padding:      4px 6px;
    border-left:  3px solid;
    border-radius: 0 var(--rpk-radius) var(--rpk-radius) 0;
    background:   rgba(0,0,0,.04);
    margin-bottom: 3px;
    cursor:       pointer;
    transition:   background .1s;
}
.rpk-event-block:hover { background: rgba(0,0,0,.09); }
.rpk-block-time {
    display:    block;
    font-size:  .75em;
    color:      #777;
}
.rpk-block-title {
    font-size:    .88em;
    font-weight:  500;
    display:      block;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow: ellipsis;
}

/* ── List view ── */
.rpk-list-view { padding: 12px 14px; }
.rpk-list-month { 
    font-size:      .82em;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--rpk-primary);
    font-weight:    700;
    margin:         18px 0 8px;
    padding-bottom: 4px;
    border-bottom:  2px solid var(--rpk-primary);
}
.rpk-list-month-group:first-child .rpk-list-month { margin-top: 4px; }
.rpk-list-event {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    padding:       10px 12px;
    border-left:   4px solid var(--rpk-primary);
    border-radius: 0 var(--rpk-radius) var(--rpk-radius) 0;
    background:    var(--rpk-bg-light);
    margin-bottom: 6px;
    cursor:        pointer;
    transition:    background .1s, box-shadow .1s;
}
.rpk-list-event:hover { box-shadow: var(--rpk-shadow); background: #fff; }
.rpk-list-today { background: var(--rpk-today-bg); }
.rpk-list-date-block {
    display:       flex;
    flex-direction: column;
    align-items:   center;
    min-width:     40px;
}
.rpk-list-day {
    font-size:   1.6em;
    font-weight: 700;
    line-height: 1;
}
.rpk-list-weekday {
    font-size:  .75em;
    color:      #888;
    text-transform: uppercase;
}
.rpk-list-info {
    display:    flex;
    flex-wrap:  wrap;
    gap:        4px 12px;
    align-items: center;
    flex:       1;
}
.rpk-list-title {
    font-weight: 600;
    font-size:   1em;
    flex-basis:  100%;
}
.rpk-list-time,
.rpk-list-location {
    font-size: .82em;
    color:     #666;
}
.rpk-list-cat {
    font-size:     .75em;
    background:    var(--rpk-primary);
    color:         #fff;
    padding:       2px 7px;
    border-radius: 999px;
}
.rpk-no-events {
    text-align: center;
    color: #888;
    padding: 40px;
}

/* ── Modal ── */
.rpk-modal-overlay {
    position:   fixed;
    top:        0;
    left:       0;
    width:      100%;
    height:     100%;
    background: rgba(0,0,0,.55);
    z-index:    99999;
    display:    flex;
    align-items: center;
    justify-content: center;
    padding:    16px;
    box-sizing: border-box;
}
@keyframes rpkFadeIn { from { opacity:0 } to { opacity:1 } }
.rpk-modal {
    background:    var(--rpk-bg);
    border-radius: calc(var(--rpk-radius) * 1.5);
    width:         100%;
    max-width:     560px;
    max-height:    90vh;
    overflow-x:    hidden;
    overflow-y:    auto;
    position:      relative;
    box-shadow:    0 8px 32px rgba(0,0,0,.25);
    box-sizing:    border-box;
}
@keyframes rpkSlideUp { from { transform:translateY(20px); opacity:0 } to { transform:translateY(0); opacity:1 } }
.rpk-modal-close {
    position:      absolute;
    top:           10px;
    right:         10px;
    background:    rgba(0,0,0,.25);
    border:        none;
    color:         #fff;
    font-size:     1.3em;
    cursor:        pointer;
    width:         30px;
    height:        30px;
    border-radius: 50%;
    line-height:   30px;
    text-align:    center;
    z-index:       10;
    flex-shrink:   0;
}

/* ── Event detail (in modal) ── */
.rpk-event-detail-header {
    padding:  20px;
    border-radius: calc(var(--rpk-radius) * 1.5) calc(var(--rpk-radius) * 1.5) 0 0;
    position: relative;
}
.rpk-event-detail-header h2 {
    margin:      0;
    color:       #fff;
    font-size:   1.3em;
    padding-right: 40px;
}
.rpk-event-actions {
    position: absolute;
    top:      14px;
    right:    44px;
    display:  flex;
    gap:      6px;
}
.rpk-btn-icon {
    background: rgba(255,255,255,.2);
    border:     none;
    border-radius: 50%;
    width:  32px;
    height: 32px;
    cursor: pointer;
    font-size: .9em;
}
.rpk-event-detail-body { padding: 16px 20px; }
.rpk-detail-row {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    margin-bottom: 8px;
    font-size:   .95em;
}
.rpk-detail-icon { flex-shrink: 0; font-size: 1.1em; }
.rpk-event-content {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--rpk-border);
    font-size:  .95em;
    line-height: 1.6;
}
.rpk-event-footer {
    display:       flex;
    justify-content: space-between;
    align-items:   center;
    margin-top:    16px;
    padding-top:   12px;
    border-top:    1px solid var(--rpk-border);
    font-size:     .8em;
    color:         #888;
}
.rpk-ical-single {
    text-decoration: none;
    color:          var(--rpk-primary);
    font-weight:    600;
}

/* ── Event Form (in modal) ── */
.rpk-event-form { padding: 20px; box-sizing: border-box; width: 100%; }
.rpk-event-form h2 { margin: 0 0 16px; font-size: 1.2em; }
.rpk-form-row {
    margin-bottom: 12px;
    display:       flex;
    flex-direction: column;
    gap:           4px;
}
.rpk-form-row label {
    font-size:   .85em;
    font-weight: 600;
    color:       #555;
}
.rpk-form-row input[type="text"],
.rpk-form-row input[type="date"],
.rpk-form-row input[type="time"],
.rpk-form-row select,
.rpk-form-row textarea {
    padding:      8px 10px;
    border:       1px solid var(--rpk-border);
    border-radius: var(--rpk-radius);
    font-size:    var(--rpk-font-size);
    font-family:  var(--rpk-font-family);
    width:        100%;
    max-width:    100%;
    box-sizing:   border-box;
}
.rpk-form-row textarea { min-height: 80px; resize: vertical; }
.rpk-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.rpk-form-actions {
    display:         flex;
    justify-content: flex-end;
    align-items:     center;
    gap:             10px;
    margin-top:      20px;
    padding-top:     16px;
    border-top:      1px solid var(--rpk-border);
}
.rpk-btn-submit {
    background:    var(--rpk-primary);
    color:         #fff;
    border:        none;
    padding:       10px 20px;
    border-radius: var(--rpk-radius);
    font-size:     var(--rpk-font-size);
    font-family:   var(--rpk-font-family);
    cursor:        pointer;
    font-weight:   600;
    min-height:    var(--rpk-btn-size);
}
.rpk-btn-submit:hover { background: var(--rpk-accent); }
.rpk-btn-cancel {
    background:    #333;
    color:         #fff;
    border:        none;
    padding:       10px 20px;
    border-radius: var(--rpk-radius);
    font-size:     var(--rpk-font-size);
    font-family:   var(--rpk-font-family);
    cursor:        pointer;
    min-height:    var(--rpk-btn-size);
    font-weight:   600;
    transition:    background .15s;
}
.rpk-btn-cancel:hover {
    background: #555;
}
.rpk-form-message {
    padding:       8px 12px;
    border-radius: var(--rpk-radius);
    margin-top:    8px;
    font-size:     .9em;
}
.rpk-form-message.success { background: #d4edda; color: #155724; }
.rpk-form-message.error   { background: #f8d7da; color: #721c24; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .rpk-toolbar { gap: 6px; }
    .rpk-toolbar-center { order: -1; width: 100%; text-align: center; }
    .rpk-month-table thead th { font-size: .65em; padding: 4px 1px; }
    .rpk-day { min-height: 52px; padding: 2px; }
    .rpk-day-num { font-size: .72em; }
    .rpk-event-pill { font-size: .68em; padding: 1px 3px; }
    .rpk-week-grid { grid-template-columns: repeat(7, 1fr); font-size: .78em; }
    .rpk-week-day-name { font-size: .65em; }
    .rpk-week-day-num { font-size: 1em; }
    .rpk-modal { max-width: 100%; margin: 8px; }
    .rpk-view-btn { padding: 0 8px; font-size: .82em; }
}

/* ═══════════════════════════════════════════════════════════
   RPKalender v1.1 – Multi-user additions
   ═══════════════════════════════════════════════════════════ */

/* "Mina event"-knapp i toolbar */
.rpk-btn-mine {
    background:  rgba(255,255,255,.15);
    border-style: dashed;
    transition:  background .2s, border-color .2s;
}
.rpk-btn-mine.rpk-mine-active {
    background:   rgba(255,255,255,.35) !important;
    border-color: #fff !important;
    border-style: solid;
    font-weight:  700;
}

/* Eget event – liten markering (vit stjärna/bård) */
.rpk-event-mine {
    outline: 2px solid rgba(255,255,255,.75);
    outline-offset: -2px;
}
.rpk-event-mine::after {
    content:     '★';
    font-size:   .65em;
    margin-left: 3px;
    opacity:     .9;
}
/* List-vy: eget event får en subtil kant */
.rpk-list-event.rpk-event-mine {
    outline: none;
    box-shadow: inset 4px 0 0 0 rgba(0,0,0,.2), var(--rpk-shadow);
}
.rpk-list-event.rpk-event-mine::after { display: none; }
.rpk-list-event.rpk-event-mine .rpk-list-title::after {
    content:     ' ★';
    font-size:   .8em;
    opacity:     .7;
}

/* Veckovy eget event */
.rpk-event-block.rpk-event-mine {
    background:  rgba(0,0,0,.07);
    border-left-width: 4px;
}
.rpk-event-block.rpk-event-mine .rpk-block-title::after {
    content: ' ★';
    font-size: .75em;
    opacity:   .7;
}

/* "Ditt event"-badge i detalj-vy */
.rpk-mine-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    background:    var(--rpk-primary);
    color:         #fff;
    padding:       3px 10px;
    border-radius: 999px;
    font-size:     .8em;
    font-weight:   600;
}

/* Form header (med användarnamn) */
.rpk-form-header {
    padding:       16px 20px 14px;
    border-radius: calc(var(--rpk-radius) * 1.5) calc(var(--rpk-radius) * 1.5) 0 0;
}
.rpk-form-header h2 {
    margin:      0;
    color:       #fff;
    font-size:   1.15em;
    font-weight: 700;
}
.rpk-form-owner {
    font-size:   .82em;
    color:       #666;
    padding:     6px 0 2px;
    margin-bottom: 4px;
}

/* Färgval-rad med presets */
.rpk-color-row {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
}
.rpk-color-row input[type="color"] {
    width:        40px;
    height:       36px;
    border:       1px solid var(--rpk-border);
    border-radius: var(--rpk-radius);
    cursor:       pointer;
    padding:      2px;
}
.rpk-color-presets {
    display:  flex;
    gap:      5px;
    flex-wrap: wrap;
}
.rpk-color-preset {
    display:       block;
    width:         22px;
    height:        22px;
    border-radius: 50%;
    cursor:        pointer;
    border:        2px solid transparent;
    transition:    transform .1s, border-color .1s;
}
.rpk-color-preset:hover      { transform: scale(1.2); }
.rpk-color-preset.rpk-preset-active {
    border-color: #333;
    transform:    scale(1.15);
}

/* Kategori-select */
.rpk-cat-select {
    width:        100%;
    min-height:   72px;
    border:       1px solid var(--rpk-border);
    border-radius: var(--rpk-radius);
    padding:      4px;
    font-size:    var(--rpk-font-size);
    font-family:  var(--rpk-font-family);
}

/* Checkbox label */
.rpk-checkbox-label {
    display:     flex;
    align-items: center;
    gap:         6px;
    cursor:      pointer;
    font-weight: normal !important;
}
.rpk-checkbox-label input { width: 16px; height: 16px; cursor: pointer; }

/* Modal loading state */
.rpk-modal-loading {
    padding:    40px;
    text-align: center;
    color:      #888;
    font-size:  1.1em;
}

/* Login notice i modal */
.rpk-login-notice {
    padding:    40px 30px;
    text-align: center;
    color:      #555;
    font-size:  1.05em;
}
.rpk-login-notice a {
    color:       var(--rpk-primary);
    font-weight: 700;
}

/* ── SVG icon colors ── */
.rpk-detail-icon svg,
.rpk-list-time svg,
.rpk-list-location svg {
    color:         var(--rpk-primary);
    flex-shrink:   0;
}
.rpk-btn-icon svg { stroke: #fff; }