/*
Clarinbridge ADS-B Radar
Main display styling
*/

* {
  box-sizing: border-box;
  }

html,
body {

```
margin: 0;
padding: 0;

width: 100%;
height: 100%;

background: #000000;
color: #ffffff;

font-family: "Courier New", monospace;

overflow: hidden;
```

}

#app {

```
width: 100%;
height: 100%;

display: flex;
flex-direction: column;
```

}

/* Header */

header {

```
height: 60px;

display: flex;
align-items: center;
justify-content: space-between;

padding: 0 20px;

border-bottom: 1px solid #005522;

background: #000000;
```

}

header h1 {

```
margin: 0;

font-size: 22px;

letter-spacing: 3px;

color: #ffffff;
```

}

#status {

```
color: #00ff99;

font-size: 14px;
```

}

/* Main layout */

main {

```
flex: 1;

display: flex;

min-height: 0;
```

}

/* Radar area */

#radar-container {

```
flex: 1;

display: flex;

align-items: center;

justify-content: center;

background:

    radial-gradient(
        circle,
        rgba(0,255,100,0.08) 0%,
        rgba(0,0,0,1) 70%
    );
```

}

#radarCanvas {

```
width: min(90vh, 90vw);

height: min(90vh, 90vw);

max-width: 900px;

max-height: 900px;
```

}

/* Aircraft panel */

#aircraft-panel {

```
width: 360px;

border-left: 1px solid #005522;

background: #030303;

padding: 15px;

overflow-y: auto;
```

}

h2 {

```
margin-top: 5px;

font-size: 16px;

letter-spacing: 2px;

border-bottom:

    1px solid #005522;

padding-bottom: 5px;
```

}

table {

```
width: 100%;

border-collapse: collapse;

font-size: 13px;
```

}

th {

```
text-align: left;

color: #00cc66;

padding: 6px;
```

}

td {

```
padding: 6px;

border-bottom:

    1px solid #003311;
```

}

tr:hover {

```
background:

    rgba(0,255,100,0.15);

cursor: pointer;
```

}

/* Selected aircraft */

#aircraft-details {

```
margin-top: 20px;

padding: 10px;

border:

    1px solid #005522;

background:

    rgba(0,255,100,0.03);
```

}

/* CRT glow effect */

#radarCanvas,
header,
#aircraft-panel {

```
text-shadow:

    0 0 5px #00ff66;
```

}

/* Mobile layout */

@media (max-width: 800px) {

```
main {

    flex-direction: column;

}


#aircraft-panel {

    width: 100%;

    height: 300px;

    border-left: none;

    border-top:

        1px solid #005522;

}
```

}