/*!
 * components-extras.css
 * Synthesised UI primitives missing from rankedin_prototype.css.
 * Used by tema/rankedin_new/. Tokens from prototype :root.
 */

/* ── 1. Spinner ── */
.spinner{display:inline-block;vertical-align:middle;width:24px;height:24px;border:2.5px solid var(--surface-border);border-top-color:var(--teal);border-radius:50%;animation:pr-spin .9s linear infinite}
.spinner--sm{width:16px;height:16px;border-width:2px}
.spinner--lg{width:40px;height:40px;border-width:3px}
@keyframes pr-spin{to{transform:rotate(360deg)}}

/* ── 2. Skeleton ── */
.skeleton{display:block;background:linear-gradient(90deg,var(--surface-hover) 25%,var(--surface-border) 50%,var(--surface-hover) 75%);background-size:200% 100%;animation:pr-shimmer 1.4s linear infinite;border-radius:var(--r-sm)}
.skeleton--text{height:14px;width:100%;margin:6px 0}
.skeleton--card{height:140px;width:100%;border-radius:var(--r-md)}
.skeleton--avatar{height:36px;width:36px;border-radius:50%}
@keyframes pr-shimmer{from{background-position:0 0}to{background-position:-200% 0}}

/* ── 3. Toast (slideUp keyframe is in rankedin_prototype.css) ── */
.toast-container{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:8px;z-index:3000;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:8px;min-width:240px;max-width:360px;padding:12px 16px;border-radius:var(--r-md);background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg);border-left:3px solid var(--teal);font-size:14px;animation:slideUp .25s ease}
.toast--success{border-left-color:var(--good-text)}
.toast--warn{border-left-color:var(--warn-text)}
.toast--danger{border-left-color:var(--danger-text)}
.toast--info{border-left-color:var(--info-text)}
.toast.is-leaving{opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease}

/* ── 4. Generic tooltip (data-tooltip attr) ── */
.tooltip{position:relative}
.tooltip::after{content:attr(data-tooltip);position:absolute;z-index:1000;padding:6px 10px;background:var(--surface);color:var(--text);border:1px solid var(--surface-border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--transition),transform var(--transition)}
.tooltip[data-tooltip]:hover::after,.tooltip[data-tooltip]:focus-visible::after{opacity:1}
.tooltip--top::after,.tooltip:not([class*="tooltip--"])::after{bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px)}
.tooltip--top:hover::after,.tooltip:not([class*="tooltip--"]):hover::after{transform:translate(-50%,0)}
.tooltip--bottom::after{top:calc(100% + 8px);left:50%;transform:translate(-50%,-4px)}
.tooltip--bottom:hover::after{transform:translate(-50%,0)}
.tooltip--left::after{right:calc(100% + 8px);top:50%;transform:translate(4px,-50%)}
.tooltip--left:hover::after{transform:translate(0,-50%)}
.tooltip--right::after{left:calc(100% + 8px);top:50%;transform:translate(-4px,-50%)}
.tooltip--right:hover::after{transform:translate(0,-50%)}

/* ── 5. Dropdown ── */
.dropdown{position:relative;display:inline-block}
.dropdown-toggle::after{/*content:" ▾";*/font-size:.85em;margin-left:4px;opacity:.7}
.dropdown-menu{position:absolute;top:calc(100% + 4px);right:0;min-width:200px;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--r-md);box-shadow:var(--shadow-lg);z-index:1100}
.dropdown-menu.d-none{display:none}
.dropdown-menu>li{margin:0}
.dropdown-item{display:block;padding:8px 12px;border-radius:var(--r-sm);color:var(--text);font-size:14px;text-decoration:none;cursor:pointer;transition:background var(--transition),color var(--transition)}
.dropdown-item:hover,.dropdown-item:focus-visible{background:var(--surface-hover);color:var(--teal);outline:none}
.dropdown-item--danger{color:var(--danger-text)}
.dropdown-item--danger:hover,.dropdown-item--danger:focus-visible{background:var(--danger-bg);color:var(--danger-text)}

/* ── 6. Form states ── */
.input:disabled,.select:disabled,.textarea:disabled,.input[readonly],.select[readonly],.textarea[readonly]{opacity:.6;cursor:not-allowed;background:var(--surface-hover)}
.input.is-error,.select.is-error,.textarea.is-error{border-color:var(--danger-text);box-shadow:0 0 0 3px var(--danger-bg)}
.form-error{display:block;margin-top:4px;font-size:12px;color:var(--danger-text)}

/* ── 7. Pagination prev/next/ellipsis ── */
.page-btn--prev,.page-btn--next{width:auto;min-width:36px;padding:0 12px;gap:4px}
.page-btn--ellipsis{border-color:transparent;background:transparent;cursor:default;pointer-events:none;color:var(--text-subtle)}
.page-btn--ellipsis:hover{border-color:transparent;color:var(--text-subtle)}
.page-btn:disabled,.page-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ── 8. Kick button ── */
.kick-btn{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background:var(--danger-bg);color:var(--danger-text);font-size:12px;font-weight:700;line-height:1;cursor:pointer;transition:transform .15s var(--transition),background var(--transition),color var(--transition)}
.kick-btn:hover{transform:scale(1.1);background:var(--danger-text);color:#fff}
.kick-btn:focus-visible{outline:2px solid var(--danger-text);outline-offset:2px}

/* ── 9. Draw-type selector card ── */
.draw-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px}
.draw-type-option{position:relative;min-width:0}
.draw-type-option.is-disabled{opacity:.45;pointer-events:none}
.draw-type-option.is-disabled .draw-type-card{cursor:not-allowed}
.draw-type-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:148px;padding:20px 16px 18px;border:1px solid var(--surface-border);border-radius:var(--r-lg,var(--r-md));background:var(--surface);box-shadow:0 10px 24px rgba(15,23,42,.04);cursor:pointer;transition:border-color var(--transition),background var(--transition),box-shadow var(--transition),transform var(--transition);text-align:center}
.draw-type-card:hover{border-color:color-mix(in srgb,var(--teal) 40%,var(--surface-border));box-shadow:0 14px 32px rgba(13,148,136,.10);transform:translateY(-1px)}
.draw-type-card:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 18%,transparent),0 14px 32px rgba(13,148,136,.10)}
.draw-type-card.is-active{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 10%,#fff);box-shadow:0 16px 36px rgba(13,148,136,.16)}
.draw-type-card__media{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:20px;background:color-mix(in srgb,var(--teal) 8%,#fff)}
.draw-type-card img{width:64px;height:64px;object-fit:contain;flex-shrink:0}
.draw-type-card>span{font-size:13px;font-weight:500;color:var(--text);line-height:1.3}
.draw-type-card .rin-draw-type-name{font-size:14px;font-weight:700;color:var(--text);transition:color var(--transition)}
.draw-type-card.is-active .rin-draw-type-name,.draw-type-card input[type="checkbox"]:checked ~ .rin-draw-type-name{color:var(--teal)}

.draw-dropdown{position:relative;display:inline-block}.draw-dropdown .dropdown-toggle{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--surface-border);background:var(--surface);color:var(--text);border-radius:var(--r-md);cursor:pointer;font-size:14px;min-width:160px;justify-content:space-between}.draw-dropdown .dropdown-toggle:hover{border-color:var(--teal)}.draw-dropdown .dropdown-menu{position:absolute;top:100%;left:0;right:0;list-style:none;margin:4px 0 0;padding:4px 0;background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--r-md);box-shadow:var(--shadow-md);display:none;z-index:1060;max-height:240px;overflow-y:auto}.draw-dropdown.open .dropdown-menu{display:block;opacity:1;visibility:visible;transform:none;transition:none}.draw-dropdown .dropdown-menu a{display:block;padding:6px 12px;color:var(--text);cursor:pointer;text-decoration:none;font-size:14px}.draw-dropdown .dropdown-menu a:hover{background:var(--surface-hover);color:var(--teal)}
.draw-type-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;clip-path:inset(50%)}
.draw-type-info-btn{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--surface-border);border-radius:9999px;background:var(--surface);color:var(--text-muted,var(--c-muted,#6b7280));font-size:13px;font-weight:700;line-height:1;cursor:pointer;box-shadow:0 8px 18px rgba(15,23,42,.08);transition:background var(--transition),border-color var(--transition),color var(--transition),transform var(--transition)}
.draw-type-info-btn:hover,.draw-type-info-btn:focus-visible{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 10%,#fff);color:var(--teal);transform:translateY(-1px)}
.draw-type-info-btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 18%,transparent),0 8px 18px rgba(15,23,42,.10)}

/* Draw type info modal: image left, text wraps right */
.draw-type-info-modal .rin-draws-popover-img-wrap{float:left;margin-right:16px;margin-bottom:8px}
.draw-type-info-modal .rin-draws-popover-img-wrap img{max-width:120px;height:auto}
.draw-type-info-modal .rin-draws-popover-text{font-size:14px;line-height:1.5;color:var(--text,var(--c-text,#1f2937))}

/* ── 10. Modal scroll-lock ── */
body.modal-open{overflow:hidden}

/* ============================================
   HEADER ACTION BUTTONS
   ============================================ */

.header-actions {
  gap: 10px;
}

/* Base pill style for all header action buttons */
.header-btn,
.header-actions > #e_referee {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center;
  gap: 6px !important;
  padding: 8px 16px;
  border-radius: 9999px;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* ── Dropdown caret triangle for header avatar, CREATE, ADMIN ── */
.header-bar .header-btn,
.header-bar .user-avatar-section {
  position: relative;
}

.header-bar .header-btn.dropdown-toggle::after,
.header-bar .user-avatar-section.dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 5px;
  vertical-align: middle;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.2s ease;
  opacity: 0.75;
}

/* Hover: caret bounces */
.header-bar .header-btn:hover.dropdown-toggle::after,
.header-bar .user-avatar-section:hover.dropdown-toggle::after {
  opacity: 1;
  animation: rin-caret-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes rin-caret-bounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  40% { transform: rotate(45deg) translateY(-2px); }
  60% { transform: rotate(45deg) translateY(1px); }
}

/* Click / open state: caret flips */
.header-bar .dropdown.show .header-btn.dropdown-toggle::after,
.header-bar .dropdown.show .user-avatar-section.dropdown-toggle::after {
  transform: rotate(225deg);
  opacity: 1;
  animation: rin-caret-flip 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes rin-caret-flip {
  0% { transform: rotate(45deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(225deg); }
}

/* Color variants */
.header-btn--create,
.header-actions .create-dropdown .header-btn {
  background: #0d9488;
}

.header-btn--admin,
.header-actions .admin-dropdown .header-btn {
  background: #6366f1;
}

.header-btn--root {
  background: #dc2626;
}

.header-actions > #e_referee {
  background: #2563eb;
}

/* Hover states */
.header-btn:hover,
.header-actions > #e_referee:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Active / click states */
.header-btn:active,
.header-actions > #e_referee:active {
  transform: scale(0.98);
}

/* Dropdown menus inside header-actions */
.header-actions .dropdown-menu {
  min-width: 220px;
  padding: 8px;
  border-radius: var(--r-md, 12px);
  margin-top: 6px;
}

.header-actions .dropdown-menu li a {
  padding: 10px 14px;
  border-radius: var(--r-sm, 8px);
  font-weight: 500;
}

/* ============================================
   REFEREEBOARD ACTION BUTTON
   ============================================ */

.refereeboard-actions {
  display: flex;
  width: 100%;
}

.refereeboard-actions .row,
.refereeboard-actions .row a {
  display: flex;
  width: 100%;
}

.refereeboard-actions a {
  align-items: center;
  justify-content: center;
  padding: 14px 24px !important;
  background: #10b981 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 9999px !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  white-space: nowrap;
  cursor: pointer;
}

.refereeboard-actions a:hover {
  background: #059669 !important;
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.refereeboard-actions a:active {
  transform: scale(0.98);
}

/* ============================================
   PLAYER VS ROW (refereeboard compact)
   ============================================ */

.player-vs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}

.player-vs-row .player-name {
  font-weight: 500;
  color: var(--text);
}

.player-vs-row .vs-separator {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

/* ============================================
   SIDEBAR SEARCH (collapsed state)
   ============================================ */

.sidebar-search-wrap {
  position: relative;
}

.sidebar-search-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--surface-hover);
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.sidebar-search-toggle:hover {
  background: var(--teal);
  color: #fff;
}

/* Collapsed sidebar: show magnifier icon, hide input */
.app-shell.collapsed .sidebar-search-wrap {
  padding: 0;
  display: flex;
  justify-content: center;
}

.app-shell.collapsed .sidebar-search-toggle {
  display: flex;
}

.app-shell.collapsed .sidebar-search-input,
.app-shell.collapsed .sidebar-search-icon {
  display: none;
}

/* Expanded search field (click on magnifier) */
.sidebar-search-wrap.expanded {
  min-width: 260px;
}

.sidebar-search-wrap.expanded .sidebar-search-input {
  display: block !important;
  position: absolute;
  left: 48px;
  top: 0;
  width: 220px;
  z-index: 200;
}

.sidebar-search-wrap.expanded .sidebar-search-icon {
  display: block !important;
  position: absolute;
  left: 244px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 201;
}

/* ============================================
   GLOBAL SEARCH DROPDOWN (sidebar & header)
   ============================================ */

.rin-search-dropdown {
  font-size: 13px;
}

.rin-search-dropdown .rin-search-section {
  margin-bottom: 4px;
}

.rin-search-dropdown .rin-search-section-title {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.rin-search-dropdown .rin-search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm, 8px);
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition);
}

.rin-search-dropdown .rin-search-item:hover {
  background: var(--surface-hover);
  text-decoration: none;
}

.rin-search-dropdown .rin-search-item-name {
  flex: 1;
  font-weight: 500;
}

.rin-search-dropdown .rin-search-item-type {
  font-size: 11px;
  color: var(--text-muted);
}

.rin-search-dropdown .rin-search-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ============================================
   ADMIN DROPDOWN WIDER
   ============================================ */

.header-actions .admin-dropdown .dropdown-menu {
  min-width: 260px;
}


@media (max-width: 768px) {
  .header-actions {
    gap: 8px;
    flex-wrap: wrap;
  }

  .header-btn,
  .header-actions > #e_referee {
    padding: 6px 12px;
    font-size: 13px;
  }

  .refereeboard-actions a {
    padding: 12px 20px !important;
    font-size: 13px !important;
  }
}

/* ============================================
   PREMIUM ACTION BUTTONS FOR ADMIN TABLES
   ============================================ */

/* Generic styles for edit buttons */
.edit-tournament-btn, 
.edit-player-btn, 
.edit-coach-btn, 
.edit-org-btn, 
.edit-category-btn, 
.edit-referee-btn, 
.edit-person-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm, 6px);
  background: var(--surface-hover, #f1f5f9) !important;
  color: var(--teal, #0d9488) !important;
  border: 1px solid var(--surface-border, #e2e8f0) !important;
  transition: all 0.2s ease;
  text-decoration: none !important;
  cursor: pointer;
}

.edit-tournament-btn:hover, 
.edit-player-btn:hover, 
.edit-coach-btn:hover, 
.edit-org-btn:hover, 
.edit-category-btn:hover, 
.edit-referee-btn:hover, 
.edit-person-btn:hover {
  border-color: var(--teal, #0d9488) !important;
  background: var(--teal-glow, rgba(13, 148, 136, 0.1)) !important;
  transform: translateY(-1px);
}

/* Generic styles for delete buttons */
.delete-tournament-btn, 
.delete-player-btn, 
.delete-coach-btn, 
.delete-org-btn, 
.delete-category-btn, 
.delete-referee-btn, 
.delete-person-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm, 6px);
  background: var(--danger-bg, #fef2f2) !important;
  color: var(--danger-text, #ef4444) !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease;
  text-decoration: none !important;
  cursor: pointer;
}

.delete-tournament-btn:hover, 
.delete-player-btn:hover, 
.delete-coach-btn:hover, 
.delete-org-btn:hover, 
.delete-category-btn:hover, 
.delete-referee-btn:hover, 
.delete-person-btn:hover {
  background: var(--danger-text, #ef4444) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Flex wrapping for premium table actions cells to lay out buttons horizontally */
.premium-table td:last-child {
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 73px;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--surface-border) !important;
}

.premium-table td:last-child a {
  margin-right: 0 !important;
}

/* Organization name/avatar links in premium table — hover effect */
.premium-table td a.org-link,
.premium-table td a.org-avatar-link {
  transition: color 0.2s ease, opacity 0.2s ease;
}
.premium-table td a.org-link:hover {
  color: var(--teal, #0d9488);
}
.premium-table td a.org-avatar-link:hover {
  opacity: 0.75;
}

/* Ensure the FontAwesome icons inside these buttons are sized consistently */
.edit-tournament-btn i, 
.edit-player-btn i, 
.edit-coach-btn i, 
.edit-org-btn i, 
.edit-category-btn i, 
.edit-referee-btn i, 
.edit-person-btn i,
.delete-tournament-btn i, 
.delete-player-btn i, 
.delete-coach-btn i, 
.delete-org-btn i, 
.delete-category-btn i, 
.delete-referee-btn i, 
.delete-person-btn i {
  font-size: 14px !important;
}

/* ── 11. File Upload Wrapper (tournament_step2.tpl) ── */
.fileupload-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.fileinput-button {
  cursor: pointer;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.fileinput-button:active {
  transform: scale(0.97);
}

.fileinput-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.fileinput-button:hover .fileinput-icon {
  transform: translateY(-1px);
}

.fileinput-filename {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  transition: color var(--transition);
}
.fileinput-filename.has-file {
  color: var(--teal);
  font-weight: 500;
}

/* ── 12. Color Picker ── */
.color-picker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 5px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
  min-width: 140px;
}
.color-picker:hover {
  border-color: var(--teal);
}
.color-picker:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-glow);
}

.color-picker-swatch {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.color-picker-swatch input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  opacity: 0;
}

.color-picker-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
  letter-spacing: 0.3px;
  user-select: none;
}

/* Inline variant: for compact layouts (admin categories bar) */
.color-picker--inline {
  min-width: 0;
  padding: 3px 8px 3px 3px;
  gap: 6px;
}
.color-picker--inline .color-picker-swatch {
  width: 26px;
  height: 26px;
  border-radius: 4px;
}
.color-picker--inline .color-picker-value {
  font-size: 12px;
}

/* Wrapper for form-group usage */
.form-color-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── 13. Modal system (rin-modal) ── */
.rin-modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2001;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
}

.rin-modal {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rin-modal-size-m { max-width: 600px; }

.rin-modal-size-xl { max-width: 800px; }

.rin-modal-secondary {
    border: 1px solid rgba(47, 63, 125, 0.1);
}

.rin-modal-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.rin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(47, 63, 125, 0.1);
    background: #f8f9fa;
}

.rin-modal-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #2f3f7d;
    line-height: 1.4;
}

.icon-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 28px;
    color: #999;
    transition: color 0.2s ease;
    padding: 0;
    margin: 0;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.icon-close-btn:hover {
    color: #2f3f7d;
    background: rgba(47, 63, 125, 0.06);
}

.rin-modal-wrapper-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.rin-modal-wrapper-body .form-group {
    margin-bottom: 16px;
}

.rin-modal-wrapper-body .form-group:last-child {
    margin-bottom: 0;
}

.rin-modal-wrapper-body label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #2f3f7d;
}

.rin-modal-wrapper-body .form-control,
.rin-modal-wrapper-body input[type="text"],
.rin-modal-wrapper-body input[type="email"],
.rin-modal-wrapper-body input[type="date"],
.rin-modal-wrapper-body input[type="number"],
.rin-modal-wrapper-body select,
.rin-modal-wrapper-body textarea {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid #d5d9e5;
    border-radius: 4px;
    background: #fff;
    color: #2f3f7d;
    transition: border-color 0.2s ease;
}

.rin-modal-wrapper-body .form-control:focus,
.rin-modal-wrapper-body input[type="text"]:focus,
.rin-modal-wrapper-body input[type="email"]:focus,
.rin-modal-wrapper-body input[type="date"]:focus,
.rin-modal-wrapper-body input[type="number"]:focus,
.rin-modal-wrapper-body select:focus,
.rin-modal-wrapper-body textarea:focus {
    outline: none;
    border-color: #2f3f7d;
    box-shadow: 0 0 0 3px rgba(47, 63, 125, 0.1);
}

.rin-modal-wrapper-body .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
    margin-bottom: 16px;
}

.rin-modal-wrapper-body .row:last-child {
    margin-bottom: 0;
}

.rin-modal-wrapper-body .col-md-2,
.rin-modal-wrapper-body .col-md-3,
.rin-modal-wrapper-body .col-md-4,
.rin-modal-wrapper-body .col-md-6 {
    padding: 0 8px;
}

.rin-modal-wrapper-body .col-md-2 { flex: 0 0 16.666%; }
.rin-modal-wrapper-body .col-md-3 { flex: 0 0 25%; }
.rin-modal-wrapper-body .col-md-4 { flex: 0 0 33.333%; }
.rin-modal-wrapper-body .col-md-6 { flex: 0 0 50%; }

.form-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #2f3f7d;
    margin: 24px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(47, 63, 125, 0.1);
}

.form-section-title:first-child { margin-top: 0; }

.rin-modal-wrapper-body .checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.rin-modal-wrapper-body .checkbox-label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    font-weight: 500;
    cursor: pointer;
    gap: 8px;
    padding-top: 6px;
}

.rin-modal-wrapper-body .checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.rin-modal-wrapper-body .checkbox label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    font-weight: 500;
    cursor: pointer;
}

.rin-modal-wrapper-body .checkbox input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
    cursor: pointer;
}

.rin-modal-wrapper-body .alert {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    font-size: 13px;
}

.rin-modal-wrapper-body .alert-danger {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.rin-modal-wrapper-body .d-none {
    display: none !important;
}

.rin-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(47, 63, 125, 0.1);
    background: #f8f9fa;
}

.rin-modal-footer .btn {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.rin-modal-footer .btn-secondary {
    background: #e9ecef;
    color: #2f3f7d;
}

.rin-modal-footer .btn-secondary:hover {
    background: #dee2e6;
}

.rin-modal-footer .btn-primary {
    background: #2f3f7d;
    color: #fff;
}

.rin-modal-footer .btn-primary:hover {
    background: #25326a;
}

@media (max-width: 768px) {
    .rin-modal-wrapper { padding: 10px; }
    .rin-modal { max-width: 100%; max-height: 95vh; }
    .rin-modal-header { padding: 16px 20px; }
    .rin-modal-header h4 { font-size: 16px; }
    .rin-modal-wrapper-body { padding: 20px; }
    .rin-modal-footer { padding: 12px 20px; flex-direction: column-reverse; }
    .rin-modal-footer .btn { width: 100%; }
    .rin-modal-wrapper-body .col-md-2,
    .rin-modal-wrapper-body .col-md-3,
    .rin-modal-wrapper-body .col-md-4,
    .rin-modal-wrapper-body .col-md-6 {
        flex: 0 0 100%;
        padding: 0;
    }
    .rin-modal-wrapper-body .row { margin: 0; margin-bottom: 16px; }
}