/* RazorDashboards. Colors fall back to the portal's theme variables, then to the mockup's values. */

:root, [data-theme="light"] {
    --rd-primary: var(--color-primary, #00857c);
    --rd-primary-hover: var(--color-primary-hover, #006b63);
    --rd-primary-light: var(--color-primary-light, #e6f4f3);
    --rd-surface: var(--color-bg-surface, #ffffff);
    --rd-elevated: var(--color-bg-elevated, #ffffff);
    --rd-muted-bg: var(--color-bg-muted, #f1f5f5);
    --rd-text: var(--color-text-primary, #1a2e2d);
    --rd-text-secondary: var(--color-text-secondary, #4a6463);
    --rd-text-muted: var(--color-text-muted, #6b8382);
    --rd-border: var(--color-border, #d4e0df);
    --rd-border-light: var(--color-border-light, #e8eeee);
    --rd-error: var(--color-error, #de350b);
    --rd-warning: var(--color-warning, #c27b00);
    --rd-on-primary: #ffffff;
    --rd-shadow: var(--shadow, 0 1px 2px rgba(16,40,38,.06), 0 2px 8px rgba(16,40,38,.05));
    --rd-pop-shadow: 0 12px 36px rgba(0,0,0,.22);
}

[data-theme="dark"] {
    --rd-primary: var(--color-primary, #2dd4bf);
    --rd-primary-hover: var(--color-primary-hover, #5eead4);
    --rd-primary-light: var(--color-primary-light, #1a3332);
    --rd-surface: var(--color-bg-surface, #1a2220);
    --rd-elevated: var(--color-bg-elevated, #232e2c);
    --rd-muted-bg: var(--color-bg-muted, #2a3634);
    --rd-text: var(--color-text-primary, #f0fdf9);
    --rd-text-secondary: var(--color-text-secondary, #a7c4c1);
    --rd-text-muted: var(--color-text-muted, #7a9996);
    --rd-border: var(--color-border, #34423f);
    --rd-border-light: var(--color-border-light, #26302e);
    --rd-error: var(--color-error, #f87171);
    --rd-warning: var(--color-warning, #fbbf24);
    --rd-on-primary: #0f1514;
    --rd-shadow: var(--shadow, 0 1px 2px rgba(0,0,0,.4));
}

.rd-dash { color: var(--rd-text); position: relative; }
.rd-dash .bi { line-height: 1; }

/* head row */
.rd-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rd-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.rd-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rd-ro-badge { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--rd-primary-light); color: var(--rd-primary); }
.rd-toolbar { margin-bottom: 12px; }

/* buttons and inputs */
.rd-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rd-border); background: var(--rd-surface); color: var(--rd-text-secondary); border-radius: 6px; padding: 4px 10px; font-size: 13px; line-height: 1.5; cursor: pointer; }
.rd-btn:hover { background: var(--rd-muted-bg); color: var(--rd-text); }
.rd-btn:disabled { opacity: .5; cursor: default; }
.rd-btn-primary { background: var(--rd-primary); border-color: var(--rd-primary); color: var(--rd-on-primary); }
.rd-btn-primary:hover { background: var(--rd-primary-hover); border-color: var(--rd-primary-hover); color: var(--rd-on-primary); }
.rd-btn-danger { background: var(--rd-error); border-color: var(--rd-error); color: #fff; }
.rd-btn-danger:hover { filter: brightness(.92); background: var(--rd-error); color: #fff; }
.rd-icon-btn { border: 0; background: transparent; color: var(--rd-text-muted); width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.rd-icon-btn:hover { background: var(--rd-muted-bg); color: var(--rd-text); }
.rd-input, .rd-select { width: 100%; border: 1px solid var(--rd-border); background: var(--rd-surface); color: var(--rd-text); border-radius: 6px; padding: 4px 8px; font-size: 13px; }
.rd-input:focus, .rd-select:focus { outline: none; border-color: var(--rd-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-primary) 20%, transparent); }
.rd-label { display: block; font-size: 12px; color: var(--rd-text-muted); margin-bottom: 4px; }
.rd-radio { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.rd-radio .rd-select { width: auto; }
.rd-check { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.rd-fl { font-size: 12px; color: var(--rd-text-muted); margin: 12px 0 4px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.rd-fl:first-child { margin-top: 0; }
.rd-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-seg button { border: 1px solid var(--rd-border); background: var(--rd-surface); color: var(--rd-text-secondary); border-radius: 6px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.rd-seg button.on { border-color: var(--rd-primary); background: var(--rd-primary-light); color: var(--rd-primary); font-weight: 600; }

/* picker */
.rd-picker { position: relative; }
.rd-picker-btn { min-width: 240px; justify-content: space-between; }
.rd-picker-btn > span { display: inline-flex; gap: 8px; align-items: center; }
.rd-dd { position: absolute; z-index: 50; top: calc(100% + 4px); right: 0; min-width: 300px; background: var(--rd-elevated); border: 1px solid var(--rd-border); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 6px 0; }
.rd-dd h6 { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--rd-text-muted); margin: 8px 14px 4px; font-weight: 600; }
.rd-dd-item { display: flex; align-items: center; gap: 8px; padding: 6px 14px; cursor: pointer; font-size: 14px; }
.rd-dd-item:hover { background: var(--rd-muted-bg); }
.rd-dd-item.active { font-weight: 600; color: var(--rd-primary); }
.rd-dd-lock { font-size: 12px; color: var(--rd-text-muted); }
.rd-grow { flex: 1; }
.rd-ico { color: var(--rd-text-muted); padding: 2px 4px; border-radius: 4px; }
.rd-ico:hover { color: var(--rd-text); background: var(--rd-border-light); }
.rd-dd hr { margin: 6px 0; border: 0; border-top: 1px solid var(--rd-border); }

/* grid: fixed placements from CSS variables; narrower screens flow in reading order (the DOM order) */
.rd-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 40px; gap: 12px; position: relative; }
.rd-cell { grid-column: var(--rd-col) / span var(--rd-cs); grid-row: var(--rd-row) / span var(--rd-rs); min-width: 0; min-height: 0; display: flex; position: relative; }
.rd-cell > * { flex: 1; min-width: 0; min-height: 0; }
@media (max-width: 991.98px) {
    .rd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rd-cell { grid-column: auto / span var(--rd-narrow); grid-row: auto / span var(--rd-rs); }
}
@media (max-width: 767.98px) {
    .rd-grid { grid-template-columns: minmax(0, 1fr); }
    .rd-cell { grid-column: auto / span 1; }
}
.rd-empty { grid-column: 1 / -1; grid-row: span 4; display: flex; align-items: center; justify-content: center; color: var(--rd-text-muted); border: 1px dashed var(--rd-border); border-radius: 10px; }

/* card frame */
.rd-card { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 10px; box-shadow: var(--rd-shadow); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.rd-card-h { display: flex; align-items: center; gap: 6px; padding: 8px 8px 4px 14px; min-height: 36px; }
.rd-card-ico { color: var(--rd-text-muted); }
.rd-card-title { font-weight: 600; font-size: 13.5px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-card-b { flex: 1; min-height: 0; padding: 2px 14px 10px; overflow: auto; }

/* popovers and menus */
.rd-pop { position: fixed; z-index: 90; width: 320px; max-height: min(480px, 80vh); background: var(--rd-elevated); border: 1px solid var(--rd-border); border-radius: 10px; box-shadow: var(--rd-pop-shadow); display: flex; flex-direction: column; }
.rd-pop-h { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--rd-border); }
.rd-pop-h b { flex: 1; }
.rd-pop-b { padding: 10px 12px 12px; overflow: auto; }
.rd-pop-f { padding: 10px 12px; border-top: 1px solid var(--rd-border); display: flex; justify-content: flex-end; gap: 8px; }
.rd-menu { position: fixed; z-index: 95; background: var(--rd-elevated); border: 1px solid var(--rd-border); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.2); padding: 5px 0; min-width: 180px; font-size: 13.5px; }
.rd-mi { padding: 6px 14px; display: flex; gap: 10px; align-items: center; cursor: pointer; color: var(--rd-text); text-decoration: none; }
.rd-mi:hover { background: var(--rd-muted-bg); color: var(--rd-text); }
.rd-mi i { width: 16px; color: var(--rd-text-muted); }
.rd-sep { height: 1px; background: var(--rd-border); margin: 5px 0; }

/* dialogs */
.rd-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(10,20,19,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.rd-modal { background: var(--rd-surface); color: var(--rd-text); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.3); max-height: calc(100vh - 32px); display: flex; flex-direction: column; width: min(460px, 100%); }
.rd-modal-lg { width: min(940px, 100%); height: min(620px, calc(100vh - 32px)); }
.rd-modal-h { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--rd-border); }
.rd-modal-h h5 { margin: 0; font-size: 16px; font-weight: 600; flex: 1; display: flex; align-items: center; gap: 4px; }
.rd-modal-b { padding: 16px 18px; overflow: auto; flex: 1; min-height: 0; }
.rd-modal-f { padding: 12px 18px; border-top: 1px solid var(--rd-border); display: flex; justify-content: flex-end; gap: 8px; }

/* toasts */
.rd-toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.rd-toast { pointer-events: auto; background: var(--rd-elevated); color: var(--rd-text); border: 1px solid var(--rd-border); border-left: 4px solid var(--rd-primary); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: 9px 14px; font-size: 13.5px; display: flex; gap: 14px; align-items: center; }
.rd-toast-err { border-left-color: var(--rd-error); }
.rd-toast button { border: 0; background: transparent; color: var(--rd-primary); font-weight: 600; padding: 0; cursor: pointer; }

/* add: gallery */
.rd-gal { display: grid; grid-template-columns: 160px 1fr; gap: 18px; min-height: 380px; }
@media (max-width: 700px) { .rd-gal { grid-template-columns: 1fr; } .rd-gal .rd-cats { display: none; } }
.rd-cat { padding: 6px 10px; border-radius: 6px; cursor: pointer; color: var(--rd-text-secondary); display: flex; justify-content: space-between; }
.rd-cat:hover { background: var(--rd-muted-bg); }
.rd-cat.on { background: var(--rd-primary-light); color: var(--rd-primary); font-weight: 600; }
.rd-count { color: var(--rd-text-muted); font-weight: 400; }
.rd-search { margin-bottom: 12px; }
.rd-pop-h .rd-search { margin-bottom: 0; }
.rd-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; align-content: start; }
.rd-tile { border: 1px solid var(--rd-border); border-radius: 10px; padding: 12px; cursor: pointer; background: var(--rd-surface); display: flex; flex-direction: column; gap: 6px; transition: border-color .12s, box-shadow .12s; }
.rd-tile:hover { border-color: var(--rd-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-primary) 15%, transparent); }
.rd-k-ico { width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--rd-primary-light); color: var(--rd-primary); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.rd-k-name { font-weight: 600; font-size: 13.5px; }
.rd-k-desc { font-size: 12px; color: var(--rd-text-muted); }
.rd-muted { color: var(--rd-text-muted); }
.rd-cfg { display: grid; grid-template-columns: 260px 1fr; gap: 20px; }
@media (max-width: 700px) { .rd-cfg { grid-template-columns: 1fr; } }
.rd-preview { background: var(--rd-muted-bg); border-radius: 10px; padding: 16px; display: flex; }
.rd-preview .rd-card { height: 320px; flex: 1; }

/* add: side panel */
.rd-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 100vw; z-index: 70; background: var(--rd-surface); border-left: 1px solid var(--rd-border); box-shadow: -10px 0 30px rgba(0,0,0,.12); display: flex; flex-direction: column; }
.rd-panel-h { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--rd-border); gap: 8px; }
.rd-panel-h h5 { margin: 0; font-size: 15px; font-weight: 600; flex: 1; }
.rd-panel-b { padding: 12px 14px; overflow: auto; flex: 1; }
.rd-panel h6, .rd-pop h6 { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--rd-text-muted); margin: 12px 0 6px; font-weight: 600; }
.rd-kind-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--rd-border); border-radius: 8px; margin-bottom: 6px; cursor: grab; background: var(--rd-surface); user-select: none; touch-action: none; }
.rd-kind-row:hover { border-color: var(--rd-primary); }
.rd-grip { margin-left: auto; color: var(--rd-text-muted); }
@media (min-width: 992px) { .rd-dash.rd-panel-open { margin-right: 340px; } }
.rd-drag-chip { position: fixed; z-index: 200; pointer-events: none; background: var(--rd-elevated); color: var(--rd-text); border: 1px solid var(--rd-primary); border-radius: 8px; padding: 6px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 13px; transform: translate(-50%, -130%); }
body.rd-dragging { cursor: grabbing; user-select: none; }
.rd-ghost { grid-column: var(--rd-col) / span var(--rd-cs); grid-row: var(--rd-row) / span var(--rd-rs); border: 2px dashed var(--rd-primary); border-radius: 10px; background: color-mix(in srgb, var(--rd-primary) 10%, transparent); pointer-events: none; display: flex; align-items: center; justify-content: center; color: var(--rd-primary); font-weight: 600; font-size: 13px; }

/* add: slot */
.rd-add-slot { grid-column: var(--rd-col) / span var(--rd-cs); grid-row: var(--rd-row) / span var(--rd-rs); border: 1.5px dashed var(--rd-border); border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--rd-text-muted); cursor: pointer; background: transparent; font-size: 14px; }
.rd-add-slot:hover, .rd-add-slot.on { border-color: var(--rd-primary); color: var(--rd-primary); background: color-mix(in srgb, var(--rd-primary) 5%, transparent); }
@media (max-width: 991.98px) { .rd-add-slot { grid-column: auto / span 1; grid-row: auto / span 3; } }
.rd-opt { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.rd-opt:hover, .rd-opt.kb { background: var(--rd-muted-bg); }

/* a new card */
.rd-fresh > * { animation: rd-fresh 1.6s ease-out; }
@keyframes rd-fresh { 0% { box-shadow: 0 0 0 3px var(--rd-primary); } 100% { box-shadow: var(--rd-shadow); } }

/* Customize, ported from Steel Finishing's tile */
@media (max-width: 991.98px) { .rd-wide-only { display: none !important; } }
.rd-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: var(--rd-surface); border: 1px dashed var(--rd-primary); border-radius: 8px; margin-bottom: 10px; }
.rd-mode { font-weight: 600; color: var(--rd-primary); display: inline-flex; gap: 6px; align-items: center; }
.rd-unsaved { margin-left: 10px; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--rd-warning) 22%, transparent); color: var(--rd-text); }
.rd-tile-edit { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 10px; outline: 2px dashed var(--rd-border); outline-offset: 3px; transition: outline-color .12s, box-shadow .12s; }
.rd-tile-edit:hover { outline-color: var(--rd-primary); }
.rd-tile-edit.dragging { z-index: 5; opacity: .8; outline-color: var(--rd-primary); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.rd-tile-edit.resizing { outline-color: var(--rd-primary); }
/* The card underneath shows what the arrangement will look like, and takes no clicks. */
.rd-tile-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; pointer-events: none; user-select: none; }
.rd-tile-content > * { flex: 1; min-height: 0; }
.rd-tile-shield { position: absolute; inset: 0; z-index: 2; cursor: grab; border-radius: 10px; background: color-mix(in srgb, var(--rd-primary) 4%, transparent); }
.rd-tile-edit.dragging .rd-tile-shield { cursor: grabbing; }
.rd-tile-remove { position: absolute; top: 6px; right: 6px; z-index: 3; background: var(--rd-surface); border: 1px solid var(--rd-border); }
/* Above the shield, so a grab on an edge resizes the card and does not start a move. */
.rd-rz { position: absolute; z-index: 4; }
.rd-rz::after { content: ""; position: absolute; border-radius: 2px; background: transparent; }
.rd-tile-edit:hover .rd-rz::after { background: var(--rd-primary); }
.rd-rz-e { top: 25%; right: -6px; width: 12px; height: 50%; cursor: ew-resize; }
.rd-rz-e::after { top: 25%; bottom: 25%; left: 4px; width: 4px; }
.rd-rz-s { left: 25%; bottom: -6px; width: 50%; height: 12px; cursor: ns-resize; }
.rd-rz-s::after { left: 25%; right: 25%; top: 4px; height: 4px; }
.rd-rz-se { right: -6px; bottom: -6px; width: 16px; height: 16px; cursor: nwse-resize; }
.rd-rz-se::after { right: 4px; bottom: 4px; width: 8px; height: 8px; border-radius: 0 0 3px 0; }