@import url("./shweplay-brand-tokens.css");

[data-brand="shweplay"] {
    --spa-bg: #080a0e;
    --spa-panel: #11161d;
    --spa-panel-2: #171d27;
    --spa-border: rgba(246, 243, 234, 0.1);
    --spa-text: #f6f3ea;
    --spa-muted: #a4acb8;
    --spa-gold: #d6a84f;
    --spa-ruby: #c92a3a;
    --spa-green: #28c76f;
}

[data-brand="shweplay"] body {
    background:
        radial-gradient(circle at top right, rgba(214, 168, 79, 0.08), transparent 28rem),
        var(--spa-bg);
    color: var(--spa-text);
    font-family: "Inter", "Noto Sans Myanmar", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

[data-brand="shweplay"] .sidebar-base,
[data-brand="shweplay"] .sidebar {
    background: #090b0f;
    border-right: 1px solid var(--spa-border);
}

[data-brand="shweplay"] .iq-navbar {
    background: rgba(9, 11, 15, 0.92);
    border-bottom: 1px solid var(--spa-border);
    backdrop-filter: blur(18px);
}

[data-brand="shweplay"] .logo-main img {
    max-width: 158px;
    object-fit: contain;
}

[data-brand="shweplay"] .content-inner {
    padding-top: 1.35rem;
}

[data-brand="shweplay"] .card,
[data-brand="shweplay"] .card-main,
[data-brand="shweplay"] .modal-content,
[data-brand="shweplay"] .dropdown-menu {
    border: 1px solid var(--spa-border);
    border-radius: 8px;
    background: rgba(17, 22, 29, 0.94);
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.26);
}

[data-brand="shweplay"] body > div[style*="login_banner"] {
    min-height: 100vh;
    background:
        linear-gradient(90deg, rgba(8, 10, 14, 0.96), rgba(8, 10, 14, 0.74)),
        url("../images/brand/shweplay-icon.svg") right 12% center / min(42vw, 34rem) no-repeat,
        #080a0e !important;
}

[data-brand="shweplay"] .vh-100 .card {
    max-width: 560px;
    margin-inline: auto;
    background: rgba(17, 22, 29, 0.93);
    border: 1px solid var(--spa-border);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}

[data-brand="shweplay"] .vh-100 .card .logo {
    width: 180px;
    max-height: 54px;
    object-fit: contain;
}

[data-brand="shweplay"] .card-header,
[data-brand="shweplay"] .card-footer {
    border-color: var(--spa-border);
    background: rgba(246, 243, 234, 0.025);
}

[data-brand="shweplay"] .btn-primary,
[data-brand="shweplay"] .btn-warning,
[data-brand="shweplay"] .btn-success {
    background: linear-gradient(135deg, #d6a84f 0%, #b98332 100%);
    border-color: rgba(214, 168, 79, 0.8);
    color: #090b0f;
    font-weight: 700;
}

[data-brand="shweplay"] .btn-dark,
[data-brand="shweplay"] .btn-secondary {
    background: rgba(246, 243, 234, 0.07);
    border-color: var(--spa-border);
    color: var(--spa-text);
}

[data-brand="shweplay"] .btn-danger,
[data-brand="shweplay"] a[href*="destroy"],
[data-brand="shweplay"] a[data-method="DELETE"],
[data-brand="shweplay"] option[value="delete"],
[data-brand="shweplay"] option[value="permanently-delete"] {
    border-color: rgba(201, 42, 58, 0.52);
}

[data-brand="shweplay"] .form-control,
[data-brand="shweplay"] .form-select,
[data-brand="shweplay"] .select2-container--default .select2-selection--single,
[data-brand="shweplay"] .select2-container--default .select2-selection--multiple,
[data-brand="shweplay"] .input-group-text {
    background: rgba(246, 243, 234, 0.06);
    border-color: var(--spa-border);
    color: var(--spa-text);
    border-radius: 8px;
}

[data-brand="shweplay"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--spa-text);
    --bs-table-border-color: rgba(246, 243, 234, 0.08);
}

[data-brand="shweplay"] .table thead th {
    color: var(--spa-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

[data-brand="shweplay"] .dataTables_wrapper,
[data-brand="shweplay"] .section-header {
    color: var(--spa-text);
}

.spa-dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(340px, 0.7fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.spa-ops-panel {
    border: 1px solid var(--spa-border);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(214, 168, 79, 0.12), rgba(201, 42, 58, 0.05)),
        rgba(17, 22, 29, 0.96);
    padding: clamp(1rem, 2vw, 1.5rem);
}

.spa-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--spa-gold);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.spa-hero-title {
    margin: 0.55rem 0 0;
    color: var(--spa-text);
    font-size: clamp(1.5rem, 2.5vw, 2.35rem);
    line-height: 1.18;
    font-weight: 850;
}

.spa-hero-copy {
    max-width: 48rem;
    margin: 0.75rem 0 0;
    color: rgba(246, 243, 234, 0.68);
    line-height: 1.65;
}

.spa-role-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 1.15rem;
}

.spa-role-card,
.spa-workflow-card,
.spa-status-card {
    border: 1px solid var(--spa-border);
    border-radius: 8px;
    background: rgba(246, 243, 234, 0.055);
    padding: 0.95rem;
}

.spa-role-card i,
.spa-workflow-card i,
.spa-status-card i {
    color: var(--spa-gold);
    font-size: 1.25rem;
}

.spa-role-card strong,
.spa-workflow-card strong,
.spa-status-card strong {
    display: block;
    margin-top: 0.55rem;
    color: var(--spa-text);
    font-weight: 800;
}

.spa-role-card span,
.spa-workflow-card span,
.spa-status-card span {
    display: block;
    margin-top: 0.35rem;
    color: var(--spa-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.spa-workflow-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.spa-workflow-card {
    min-height: 128px;
}

.spa-admin-strip,
.spa-finance-strip,
.spa-content-checklist {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.spa-finance-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.spa-content-checklist {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.spa-status-card.is-danger {
    border-color: rgba(201, 42, 58, 0.48);
    background: rgba(201, 42, 58, 0.08);
}

.spa-status-card.is-success {
    border-color: rgba(40, 199, 111, 0.38);
    background: rgba(40, 199, 111, 0.08);
}

.spa-sensitive-note {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(201, 42, 58, 0.42);
    border-radius: 8px;
    background: rgba(201, 42, 58, 0.08);
    color: rgba(246, 243, 234, 0.82);
}

.spa-sensitive-note i {
    color: #ff8f9b;
    font-size: 1.2rem;
}

@media (max-width: 1199px) {
    .spa-dashboard-hero,
    .spa-role-grid,
    .spa-admin-strip,
    .spa-finance-strip,
    .spa-content-checklist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .spa-dashboard-hero,
    .spa-role-grid,
    .spa-workflow-grid,
    .spa-admin-strip,
    .spa-finance-strip,
    .spa-content-checklist {
        grid-template-columns: 1fr;
    }
}