/* Panel Legacy UI baseline styles */
:root{
  --pl-primary:#3264a0;
  --pl-accent:#1e3a5f;
  --pl-error:#ff7043;
  --pl-success:#2e7d32;
  --pl-bg:#0b2a4d;
  --pl-card-shadow:0 2px 4px rgba(0,0,0,.1);
  --pl-radius:6px;
}

/* Alert row (horizontal banner) */
.pl-alert{display:flex;align-items:center;width:100%;background:#fff;box-shadow:var(--pl-card-shadow);border-radius:4px;overflow:hidden;border-left:4px solid var(--pl-error)}
.pl-alert .pl-icon{color:var(--pl-error);margin-right:12px;flex-shrink:0;display:flex;align-items:center;padding:10px 12px}
.pl-alert .pl-title{font-weight:700;margin-bottom:2px;color:var(--pl-accent)}
.pl-alert .pl-desc{color:var(--pl-accent)}
.pl-alert .pl-actions{padding:10px 12px}
.pl-btn{display:inline-block;background:var(--pl-primary);color:#fff;padding:6px 12px;border-radius:4px;text-decoration:none;white-space:nowrap}

/* Info variant */
.pl-alert.info{border-left-color: var(--pl-primary);}
.pl-alert.info .pl-icon{color: var(--pl-primary);}

/* Notice system (legacy-like) */
.notice-container{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:6px;background:#fff;box-shadow:var(--pl-card-shadow);border-left:4px solid var(--pl-primary)}
.notice-container .notice-icon{display:flex;align-items:center;justify-content:center;color:var(--pl-primary)}
.notice-container .notice-content h2{margin:0 0 4px 0;font-size:16px;line-height:1.2;color:#1e3a5f}
.notice-container .notice-content p{margin:0;color:#1e3a5f;opacity:.9}
.notice-container .notice-close{margin-left:auto;cursor:pointer;color:#567}
.notice-container.type-info{border-left-color:#2d6cdf}
.notice-container.type-success{border-left-color:#2e7d32}
.notice-container.type-warning{border-left-color:#f1a33c}
.notice-container.type-error{border-left-color:#e53935}
.notice-container.type-success .notice-icon{color:#2e7d32}
.notice-container.type-warning .notice-icon{color:#f1a33c}
.notice-container.type-error .notice-icon{color:#e53935}

/* Notifications header bar */
.notifications-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:6px;background:#fff;box-shadow:var(--pl-card-shadow);margin:10px 0}
.notifications-bar .left{display:flex;align-items:baseline;gap:10px}
.notifications-bar .title{font-weight:700;color:#1e3a5f}
.notifications-bar .subtitle{color:#567;font-size:12px}
.notifications-bar .actions{display:flex;gap:12px}
.notifications-bar .actions a{color:#3264a0;text-decoration:none}
.notifications-bar .actions a:hover{text-decoration:underline}

/* Notification bell + dropdown */
#topbar .icons .icon-group{position:relative;cursor:pointer}
#topbar .icons{position:relative}
#topbar .icons .icon-group .notice{position:absolute;right:-4px;top:-4px;background:#e53935;color:#fff;border-radius:999px;min-width:18px;height:18px;line-height:18px;text-align:center;font-size:11px;padding:0 5px;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.notif-dropdown{position:absolute;right:10px;top:56px;width:360px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);display:none;z-index:1000;overflow:hidden}
.notif-dropdown .header{display:flex;justify-content:space-between;align-items:baseline;padding:10px 14px;border-bottom:1px solid rgba(0,0,0,.08)}
.notif-dropdown .header .title{font-weight:700;color:#1e3a5f}
.notif-dropdown .header .meta{color:#567;font-size:12px}
.notif-dropdown .header .actions a{color:#3264a0;text-decoration:none;margin-left:12px}
.notif-dropdown .header .actions a:hover{text-decoration:underline}
.notif-dropdown .body{max-height:300px;overflow:auto;padding:10px 14px}
.notif-dropdown .empty{color:#567;font-size:13px}

/* LS-RP style notifications panel - exact replica */
#topbar{position:relative}
#topbar .icons .icon-group .notifications,
#topbar .icons .icon-group .notif-dropdown {
    display: none !important;
    position: absolute !important;
    right: 0px !important;
    top: calc(100% + 6px) !important;
    width: 280px !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #eee !important;
    z-index: 5000 !important;
    /* Legacy-like small box animation baseline */
    opacity: 0; 
    transform: translateY(-6px) scale(0.98);
    transition: opacity .18s ease, transform .18s ease;
    will-change: opacity, transform;
}

/* When JS toggles .open, fade/slide in the small box */
#topbar .icons .icon-group .notifications.open,
#topbar .icons .icon-group .notif-dropdown.open{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* white arrow, same as account dropdown */
#topbar .icons .icon-group .notifications::after,
#topbar .icons .icon-group .notif-dropdown::after{
  content: "";
  position: absolute;
  right: 10px;
  top: -10px;
  width: 20px;
  height: 20px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.02);
}

#topbar .icons .icon-group .notifications header,
#topbar .icons .icon-group .notif-dropdown .header {
    padding: 12px 12px 10px 14px;
    border-bottom: 1px solid #eee !important;
    background: #fff !important;
}

#topbar .icons .icon-group .notifications header h2,
#topbar .icons .icon-group .notif-dropdown .header .title {
  display: inline;
  font-size: 13px;
  font-weight: 700;
  color: #333 !important;
  margin: 0;
}

#topbar .icons .icon-group .notifications header .close,
#topbar .icons .icon-group .notif-dropdown .header .close {
	margin-top: 4px;
	margin-left: 10px;
	float: right;
	cursor: pointer;
	color: #666;
}

#topbar .icons .icon-group .notifications footer,
#topbar .icons .icon-group .notif-dropdown .footer {
    color: #333;
    background: #eee !important;
    padding: 10px;
    border-radius: 0 0 8px 8px;
    text-align: left;
}

#topbar .icons .icon-group .notifications ul,
#topbar .icons .icon-group .notif-dropdown .body ul {
  padding: 6px 8px;
  margin: 0;
  list-style: none;
  background: #fff !important;
}

#topbar .icons .icon-group .notifications ul li,
#topbar .icons .icon-group .notif-dropdown .body ul li {
  list-style: none;
  margin-bottom: 4px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  border-radius: 6px;
}

#topbar .icons .icon-group .notifications ul li:hover,
#topbar .icons .icon-group .notif-dropdown .body ul li:hover{
  background: rgba(0,0,0,.04);
}

.notifications ul li .label {
	font-weight: 500;
}

.notifications ul li .label .time {
	display: block;
	color: #888;
}

.notifications ul li .icon {
  background: #e5e7eb; /* gray-200 */
  color: #6b7280;      /* gray-500 */
  border-radius: 999px;
  width: 26px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  margin-right: 10px;
  font-size: 12px;
}

.notifications ul li.read {
	background: transparent;
}

.notifications ul li.read .label {
	font-weight: 400;
}

.notifications ul li.read .icon {
  background: #eee;
  color: #9ca3af; /* gray-400 */
}

/* Character cards (list) */
.character_preview{box-shadow:var(--pl-card-shadow);border-radius:8px;background-color:#fff;background-size:contain;background-repeat:no-repeat;background-position:center bottom}
.character_preview .card-title{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(0,0,0,.06)}
.character_preview .character_stats{padding:8px 12px}

/* Stat tables */
.onedimension.stats{border-collapse:separate;border-spacing:0;width:100%}
.onedimension.stats td{padding:6px 8px}
.onedimension.stats tr:nth-child(even) td{background:rgba(50,100,160,0.1)}

/* Vehicle card */
.vehicle .previewContainer{position:relative;background:var(--pl-bg);min-height:175px;border-radius:8px;box-shadow:var(--pl-card-shadow)}
.vehicle .title{position:absolute;left:10px;bottom:10px;color:#fff;font-weight:600}
.vehicle .fl-ri{position:absolute;right:10px;bottom:10px;color:#fff;text-align:right}

/* Vehicle wide card (legacy-like) */
.vehicle-wide{background:#fff;border-radius:6px;box-shadow:var(--pl-card-shadow); padding:12px 10px;}
.vehicle-wide .vh-title{font-weight:600;text-align:center;color:#333;margin-bottom:6px}
.vehicle-wide .vh-image{height:220px; background-size:contain; background-repeat:no-repeat; background-position:center;}
.vehicle-wide .vh-footer{display:flex; gap:18px; align-items:center; justify-content:center; color:#1e3a5f; padding:8px 0 2px;}
.vehicle-wide .vh-footer .item{display:inline-flex; align-items:center; gap:6px;}
.vehicle-wide .vh-footer .item .fa{opacity:.9}

/* Property card */
.property .map-section{height:100%;background-position:center;background-size:cover;background-repeat:no-repeat;border-radius:8px;box-shadow:var(--pl-card-shadow);position:relative;overflow:hidden}
.property .padding-5{position:absolute;left:0;right:0;bottom:0;color:#fff;background:linear-gradient(transparent, rgba(0,0,0,.6));padding:6px 8px}

/* Legacy section description overlay (for bottom caption like "House in Temple") */
.section-description{background:rgba(0,0,0,.4);color:#fff;position:absolute;bottom:0;left:0;right:0;padding:5px;font-size:14px}

/* Spawn Here button (top-right) */
.property .spawn-btn{position:absolute;top:10px;right:10px;background:#3264a0;color:#fff;padding:6px 10px;border-radius:4px;font-weight:700;letter-spacing:.3px;box-shadow:0 2px 6px rgba(0,0,0,.2);text-decoration:none;display:inline-flex;align-items:center;gap:6px;z-index:2}
.property .spawn-btn:hover{filter:brightness(1.05)}
.property .spawn-btn .fa{opacity:.95}

/* Address label (top-left) */
.property .address{position:absolute;top:10px;left:10px;color:#fff;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.7);z-index:2}

/* Clickable overlay to make whole card linkable */
.map-section .map-cover{position:absolute;inset:0;z-index:1;display:block}

/* Mini map with marker */
.mini-map{position:relative;width:100%;height:175px;background:#e9eef5;border-radius:6px;overflow:hidden;box-shadow:var(--pl-card-shadow)}
.mini-map .map-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(0.9)}
.mini-map .marker{position:absolute;transform:translate(-50%,-100%); color:#e74c3c;}
.mini-map .marker svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}

/* Legacy-like overlay markers */
.property .marker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:16px; height:16px; border-radius:50%; background:#e74c3c; box-shadow:0 1px 2px rgba(0,0,0,.4)}
.property .marker.house{background: url('../assets/mapicons/house.gif'); background-size:100% 100%; background-repeat:no-repeat; width:20px; height:20px;}

/* ==== Character Create: Skin grid interactions ==== */
.skin-box{
  transition: border-color .15s ease, box-shadow .15s ease, transform .04s ease;
}
.skin-box:hover{
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.skin-box.skin-active{
  border-color: #3264a0 !important; /* primary blue */
  box-shadow: 0 0 0 2px rgba(50,100,160,0.25);
}

/* ==== Panel: Notification detail horizontal text fallback ==== */
.notifications-bar .title,
.notifications-bar .subtitle,
.card .message,
.card,
.notifications-bar,
.content{
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  direction: ltr;
}

/* ==== Utilities: Reusable button/link helpers ==== */
/* Hover lift (no bounce): keep element slightly raised while hovered */
.u-hover-lift { display:inline-block; transform: translateY(0); transition: transform 140ms ease-out; will-change: transform; }
.u-hover-lift:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .u-hover-lift { transition: none; } }

/* Clean button visual noise: remove underline, focus ring, box-shadow, and set transparent border */
.u-btn-clean,
.u-btn-clean:hover,
.u-btn-clean:focus,
.u-btn-clean:active{
  text-decoration: none !important;
  border-bottom: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  border: 1px solid transparent !important;
  -webkit-tap-highlight-color: transparent;
}