/**
 * Dashboard-specific styles
 */

/* Reduce opacity of background blueprint objects */
.blueprint-shape {
    opacity: 0.15 !important;
}

.dashboard-page .dashboard__title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-primary, #2563eb);
    text-align: center;
}

.dashboard-page .dashboard__subtitle {
    font-size: 1.125rem;
  color: var(--color-text-secondary, #64748b);
  margin-bottom: 2rem;
  text-align: center;
}

/* Dark subtitle only on modules dashboard page */
.dashboard-page .dashboard__subtitle {
    color: #0f172a;
}

.dashboard__empty {
    text-align: center;
    color: var(--color-text-secondary, #64748b);
    padding: 3rem;
    font-size: 1.125rem;
}

/* Category groups */
.dashboard__category-group {
    margin-bottom: 2rem;
}

.dashboard__category-name {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 0.75rem 0.5rem;
    font-weight: 500;
}

.dashboard__category-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

/* Module tiles grid */
.dashboard__modules {
    padding: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Individual module tile */
.module-tile {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    overflow: hidden;

    /* Blueprint background pattern */
    background-color: #1e3a5f;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 0 60px rgba(100, 149, 237, 0.1);
    border: 1px solid rgba(100, 149, 237, 0.3);
}

.module-tile__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
}

.module-tile__name {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.module-tile__description {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.3;
    margin: 0;
    padding: 0 0.5rem;
    max-height: 3.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.module-tile__version {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

.module-tile__lock {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1.25rem;
    opacity: 0.6;
}

/* Enabled tile */
.module-tile--enabled {
    cursor: pointer;
}

.module-tile--enabled:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.2),
        inset 0 0 80px rgba(100, 149, 237, 0.2),
        0 0 20px rgba(100, 149, 237, 0.4);
    border-color: rgba(100, 149, 237, 0.6);
}

.module-tile--enabled:active {
    transform: translateY(-2px);
}

/* Disabled tile */
.module-tile--disabled {
    opacity: 1;
    cursor: not-allowed;
    background-color: #2a2a2a !important;
    border-color: rgba(100, 100, 100, 0.3) !important;
}

.module-tile--disabled .module-tile__name,
.module-tile--disabled .module-tile__description {
    color: rgba(255, 255, 255, 0.5);
}

.module-tile--disabled:hover {
    transform: none;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 0 60px rgba(100, 100, 100, 0.1);
}

.module-tile--disabled::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/images/lock.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.1;
  pointer-events: none;
}


/* Chalkboard style for SCIM and Azure tiles */
.module-tile--scim,
.module-tile--azure,
.module-tile--test {
    background-color: #2d4a3a;
    background-image:
        /* Chalk dust texture */
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /%3E%3CfeColorMatrix type="saturate" values="0"/%3E%3C/filter%3E%3Crect width="200" height="200" filter="url(%23noise)" opacity="0.15"/%3E%3C/svg%3E'),
        /* Grid lines */
        linear-gradient(rgba(200, 255, 200, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200, 255, 200, 0.03) 1px, transparent 1px);
    background-size: auto, 20px 20px, 20px 20px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 0 100px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(150, 200, 150, 0.1);
    border: 2px solid #3a5a4a;
    position: relative;
}

/* Smudged chalk overlay */
.module-tile--scim::before,
.module-tile--azure::before,
.module-tile--test::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"%3E%3Cdefs%3E%3Cfilter id="smudge"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" seed="2"/%3E%3CfeDisplacementMap in="SourceGraphic" scale="8"/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3C/filter%3E%3C/defs%3E%3Ctext x="10" y="30" font-family="Arial" font-size="14" fill="rgba(200,255,200,0.15)" filter="url(%23smudge)"%3ESCIM%3C/text%3E%3Ctext x="20" y="60" font-family="Arial" font-size="12" fill="rgba(200,255,200,0.12)" filter="url(%23smudge)"%3Ewebhook%3C/text%3E%3Ctext x="15" y="90" font-family="Arial" font-size="10" fill="rgba(200,255,200,0.1)" filter="url(%23smudge)"%3Ecapture%3C/text%3E%3Cellipse cx="100" cy="120" rx="40" ry="30" fill="none" stroke="rgba(200,255,200,0.08)" stroke-width="2" filter="url(%23smudge)"/%3E%3Cline x1="30" y1="150" x2="170" y2="150" stroke="rgba(200,255,200,0.06)" stroke-width="1" filter="url(%23smudge)"/%3E%3Cline x1="40" y1="170" x2="160" y2="175" stroke="rgba(200,255,200,0.05)" stroke-width="1" filter="url(%23smudge)"/%3E%3C/svg%3E');
    background-size: cover;
    background-position: center;
    opacity: 0.6;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Chalk-like text for chalkboard tiles */
.module-tile--scim .module-tile__name,
.module-tile--azure .module-tile__name,
.module-tile--test .module-tile__name {
    color: #d4f0d4;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 0 8px rgba(200, 255, 200, 0.3);
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}

.module-tile--scim .module-tile__description,
.module-tile--azure .module-tile__description,
.module-tile--test .module-tile__description {
    color: rgba(200, 240, 200, 0.75);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    font-family: 'Courier New', monospace;
}

.module-tile--scim .module-tile__version,
.module-tile--azure .module-tile__version,
.module-tile--test .module-tile__version {
    color: rgba(200, 240, 200, 0.4);
}

.module-tile--scim:hover,
.module-tile--azure:hover,
.module-tile--test:hover {
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.4),
        inset 0 0 120px rgba(0, 0, 0, 0.4),
        inset 0 0 30px rgba(150, 220, 150, 0.15),
        0 0 20px rgba(150, 220, 150, 0.3);
    border-color: #4a7a5a;
}

/* Vectors tile with meshing gears */
.module-tile--vectors {
    background-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"%3E%3Cdefs%3E%3Cstyle%3E.gear%7Bfill:none;stroke:rgba(37,99,235,0.2);stroke-width:2;%7D%3C/style%3E%3C/defs%3E%3Cg class="gear"%3E%3Ccircle cx="60" cy="80" r="28" /%3E%3Ccircle cx="60" cy="80" r="35" stroke-dasharray="8,5.5" stroke-linecap="round"/%3E%3Ccircle cx="60" cy="80" r="20" stroke-width="1" opacity="0.5"/%3E%3C/g%3E%3Cg class="gear"%3E%3Ccircle cx="115" cy="50" r="22" /%3E%3Ccircle cx="115" cy="50" r="28" stroke-dasharray="6,4.3" stroke-linecap="round"/%3E%3Ccircle cx="115" cy="50" r="16" stroke-width="1" opacity="0.5"/%3E%3C/g%3E%3Cg class="gear"%3E%3Ccircle cx="140" cy="120" r="32" /%3E%3Ccircle cx="140" cy="120" r="40" stroke-dasharray="9,6.2" stroke-linecap="round"/%3E%3Ccircle cx="140" cy="120" r="24" stroke-width="1" opacity="0.5"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(rgba(37, 99, 235, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.15) 1px, transparent 1px);
    background-size: cover, 20px 20px, 20px 20px;
    background-position: center, 0 0, 0 0;
    position: relative;
    background-color: #f0f4f8;
}

.module-tile--vectors::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"%3E%3Cdefs%3E%3Cstyle%3E.gear-detail%7Bfill:none;stroke:rgba(37,99,235,0.2);stroke-width:1;%7D%3C/style%3E%3C/defs%3E%3Cline x1="60" y1="80" x2="115" y2="50" class="gear-detail" stroke-dasharray="2,3"/%3E%3Cline x1="115" y1="50" x2="140" y2="120" class="gear-detail" stroke-dasharray="2,3"/%3E%3Ccircle cx="60" cy="80" r="8" fill="rgba(37,99,235,0.15)"/%3E%3Ccircle cx="115" cy="50" r="6" fill="rgba(37,99,235,0.15)"/%3E%3Ccircle cx="140" cy="120" r="10" fill="rgba(37,99,235,0.15)"/%3E%3C/svg%3E');
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    pointer-events: none;
}

.module-tile--vectors .module-tile__name {
    color: #1e40af;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.module-tile--vectors .module-tile__description {
    color: #295cb1;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
    font-weight: bold;
}

.module-tile--vectors .module-tile__version {
    color: rgba(37, 99, 235, 0.6);
}

.module-tile--vectors:hover {
    background-color: #2563eb;
    background-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"%3E%3Cdefs%3E%3Cstyle%3E.gear%7Bfill:none;stroke:rgba(255,255,255,0.3);stroke-width:2;%7D%3C/style%3E%3C/defs%3E%3Cg class="gear"%3E%3Ccircle cx="60" cy="80" r="28" /%3E%3Ccircle cx="60" cy="80" r="35" stroke-dasharray="8,5.5" stroke-linecap="round"/%3E%3Ccircle cx="60" cy="80" r="20" stroke-width="1" opacity="0.5"/%3E%3C/g%3E%3Cg class="gear"%3E%3Ccircle cx="115" cy="50" r="22" /%3E%3Ccircle cx="115" cy="50" r="28" stroke-dasharray="6,4.3" stroke-linecap="round"/%3E%3Ccircle cx="115" cy="50" r="16" stroke-width="1" opacity="0.5"/%3E%3C/g%3E%3Cg class="gear"%3E%3Ccircle cx="140" cy="120" r="32" /%3E%3Ccircle cx="140" cy="120" r="40" stroke-dasharray="9,6.2" stroke-linecap="round"/%3E%3Ccircle cx="140" cy="120" r="24" stroke-width="1" opacity="0.5"/%3E%3C/g%3E%3C/svg%3E'),
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.15),
        inset 0 0 80px rgba(0, 0, 0, 0.1),
        0 0 20px rgba(37, 99, 235, 0.6);
    border-color: #1e40af;
}

.module-tile--vectors:hover .module-tile__name {
    color: #ffffff;
}

.module-tile--vectors:hover .module-tile__description {
    color: rgba(255, 255, 255, 0.9);
}

.module-tile--vectors:hover .module-tile__version {
    color: rgba(255, 255, 255, 0.6);
}

/* Admin tile with users and permissions (saved as admin_alt) */
.module-tile--admin_alt {
    background-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"%3E%3Cdefs%3E%3Cstyle%3E.admin-icon%7Bfill:none;stroke:rgba(100,149,237,0.12);stroke-width:1.5;%7D%3C/style%3E%3C/defs%3E%3Cg class="admin-icon"%3E%3Ccircle cx="50" cy="40" r="12"/%3E%3Cpath d="M 35 65 Q 35 52 50 52 Q 65 52 65 65 L 65 75 L 35 75 Z"/%3E%3C/g%3E%3Cg class="admin-icon"%3E%3Ccircle cx="100" cy="35" r="14"/%3E%3Cpath d="M 83 63 Q 83 48 100 48 Q 117 48 117 63 L 117 75 L 83 75 Z"/%3E%3C/g%3E%3Cg class="admin-icon"%3E%3Ccircle cx="150" cy="42" r="11"/%3E%3Cpath d="M 136 67 Q 136 55 150 55 Q 164 55 164 67 L 164 76 L 136 76 Z"/%3E%3C/g%3E%3Cpath d="M 50 85 L 50 105 M 100 85 L 100 110 M 150 85 L 150 108" class="admin-icon" stroke-dasharray="3,2"/%3E%3Cpath d="M 50 105 L 100 125 M 150 108 L 100 125" class="admin-icon" stroke-dasharray="3,2"/%3E%3Ccircle cx="100" cy="130" r="8" fill="rgba(100,149,237,0.08)" stroke="rgba(100,149,237,0.15)" stroke-width="1.5"/%3E%3Cpath d="M 93 135 L 97 139 L 107 129" stroke="rgba(100,149,237,0.15)" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M 25 155 L 65 155 M 25 165 L 55 165 M 25 175 L 60 175" stroke="rgba(100,149,237,0.1)" stroke-width="1"/%3E%3Ccircle cx="18" cy="155" r="3" fill="rgba(100,149,237,0.12)"/%3E%3Ccircle cx="18" cy="165" r="3" fill="rgba(100,149,237,0.12)"/%3E%3Ccircle cx="18" cy="175" r="3" fill="rgba(100,149,237,0.12)"/%3E%3Cpath d="M 130 150 Q 130 145 135 145 L 175 145 Q 180 145 180 150 L 180 180 Q 180 185 175 185 L 135 185 Q 130 185 130 180 Z" class="admin-icon"/%3E%3Cpath d="M 155 145 L 155 142 Q 155 137 150 137 Q 145 137 145 142 L 145 145" class="admin-icon"/%3E%3Ccircle cx="155" cy="165" r="4" fill="rgba(100,149,237,0.08)"/%3E%3Cpath d="M 155 169 L 155 175" stroke="rgba(100,149,237,0.12)" stroke-width="1.5"/%3E%3C/svg%3E'),
        linear-gradient(rgba(100, 149, 237, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 149, 237, 0.05) 1px, transparent 1px);
    background-size: cover, 20px 20px, 20px 20px;
    background-position: center, 0 0, 0 0;
    position: relative;
}

.module-tile--admin_alt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"%3E%3Cpath d="M 75 95 Q 85 95 85 105" fill="none" stroke="rgba(100,149,237,0.06)" stroke-width="1" stroke-dasharray="2,2"/%3E%3Cpath d="M 125 95 Q 115 95 115 105" fill="none" stroke="rgba(100,149,237,0.06)" stroke-width="1" stroke-dasharray="2,2"/%3E%3Ccircle cx="30" cy="120" r="15" fill="none" stroke="rgba(100,149,237,0.04)" stroke-width="1" stroke-dasharray="4,3"/%3E%3Ccircle cx="170" cy="120" r="15" fill="none" stroke="rgba(100,149,237,0.04)" stroke-width="1" stroke-dasharray="4,3"/%3E%3C/svg%3E');
    background-size: cover;
    background-position: center;
    opacity: 0.6;
    pointer-events: none;
}

/* Admin tile new style with Vitruvian-style blueprint figure */
.module-tile--admin {
  background-image:
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"%3E%3Cdefs%3E%3Cstyle%3E.bp%7Bfill:none;stroke:rgba(100,149,237,0.1);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round%7D.lbl%7Bfill:rgba(100,149,237,0.12);font-family:Arial,Helvetica,sans-serif;font-size:7px%7D%3C/style%3E%3C/defs%3E%3Ccircle cx="100" cy="90" r="55" class="bp"/%3E%3Crect x="45" y="35" width="110" height="110" class="bp"/%3E%3Cpath d="M108 59 L145 38" class="bp" stroke-dasharray="2,2"/%3E%3Cpath d="M112 90 L150 72" class="bp" stroke-dasharray="2,2"/%3E%3Ctext x="150" y="38" class="lbl">HEAD</text>%3E%3Ctext x="155" y="72" class="lbl">CHEST</text>%3E%3Ccircle cx="25" cy="155" r="2.5" fill="rgba(100,149,237,0.12)"/%3E%3Ccircle cx="25" cy="165" r="2.5" fill="rgba(100,149,237,0.12)"/%3E%3Ccircle cx="25" cy="175" r="2.5" fill="rgba(100,149,237,0.12)"/%3E%3Cpath d="M32 155 L75 155" class="bp"/%3E%3Cpath d="M32 165 L68 165" class="bp"/%3E%3Cpath d="M32 175 L72 175" class="bp"/%3E%3C/svg%3E'),
    linear-gradient(rgba(100, 149, 237, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 149, 237, 0.05) 1px, transparent 1px);
  background-size: cover, 20px 20px, 20px 20px;
  background-position: center, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat;
  position: relative;
}

.module-tile--admin::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"%3E%3Cpath d="M 75 90 Q 85 92 85 100" fill="none" stroke="rgba(100,149,237,0.04)" stroke-width="1" stroke-dasharray="2,2"/%3E%3Cpath d="M 125 90 Q 115 92 115 100" fill="none" stroke="rgba(100,149,237,0.04)" stroke-width="1" stroke-dasharray="2,2"/%3E%3C/svg%3E');
  background-size: cover;
  background-position: center;
  opacity: 0.6;
  pointer-events: none;
}

.module-tile--admin::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/images/figure2.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.6;
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dashboard__category-tiles {
        gap: 1rem;
    }

    .module-tile {
        width: 160px;
        height: 160px;
    }

    .module-tile__name {
        font-size: 1rem;
    }

    .module-tile__description {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .dashboard__category-tiles {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));

        g .module-tile {
            width: 140px;
            height: 140px;
        }

        .module-tile__name {
            font-size: 0.9rem;
        }

        .module-tile__description {
            font-size: 0.65rem;
            -webkit-line-clamp: 2;
        }
    }
}