:root{
  --cc-orange:#f29408;
  --cc-orange2:#dc6b10;
  --cc-purple:#a557c7;
  --cc-purple2:#7535a3;
  --cc-blue:#4559c6;
  --cc-blue2:#2c3a98;
  --cc-pink:#b43670;
  --cc-red:#ce4626;
  --cc-green:#45d654;
  --cc-yellow:#f0a01a;
  --cc-border:#8b500a;
  --cc-bg:#010102;
}

.cc-screen{
  position:fixed;
  inset:0;
  z-index:200;
  background:#000;
  color:#ddd;
  overflow:auto;
  font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
}

.cc-shell{
  min-width:1180px;
  min-height:100vh;
  padding:9px;
  background:
    radial-gradient(circle at 52% 32%,rgba(16,45,80,.12),transparent 36%),
    #000;
}

/* HEADER */

.cc-header{
  height:64px;
  display:flex;
  align-items:stretch;
  gap:7px;
}

.cc-top-lcars{
  width:110px;
  background:var(--cc-purple);
  color:#080808;
  border-radius:28px 28px 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.cc-top-lcars strong{
  font-size:16px;
}

.cc-top-lcars span{
  font-size:10px;
  margin-top:8px;
}

.cc-main-title{
  color:var(--cc-orange);
  font-size:29px;
  font-weight:900;
  display:flex;
  align-items:center;
  padding:0 12px;
  white-space:nowrap;
}

.cc-header-code{
  margin-left:auto;
  color:#b568d0;
  display:flex;
  align-items:center;
  padding:0 12px;
  font-size:13px;
  font-weight:900;
}

.cc-authorized{
  width:365px;
  border-radius:28px;
  background:linear-gradient(180deg,#ffa00d,#e88908);
  color:#080808;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
}

.cc-stardate{
  color:#b86cd2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.cc-time{
  width:90px;
  color:#eda21b;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:13px;
}

.cc-top-right{
  width:70px;
  background:var(--cc-purple);
  border-radius:22px 22px 0 0;
}

/* FED BAR */

.cc-federation-bar{
  height:46px;
  margin-left:110px;
  margin-right:0;
  border-top:2px solid #80440b;
  border-radius:18px 18px 0 0;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 20px;
}

.fed-l,.fed-r{
  height:14px;
}

.fed-purple{
  background:#9a55c1;
}

.fed-orange{
  background:#ed8b0a;
}

.fed-blue{
  background:#5558bd;
}

.fed-l:nth-child(1){
  width:115px;
  border-radius:8px 0 0 8px;
}

.fed-l:nth-child(2){
  width:46px;
}

.fed-l:nth-child(3){
  width:150px;
}

.fed-r:nth-of-type(1){
  width:150px;
}

.fed-r:nth-of-type(2){
  width:46px;
}

.fed-r:nth-of-type(3){
  width:80px;
  border-radius:0 8px 8px 0;
}

.fed-text{
  flex:1;
  text-align:center;
  color:#a75bc8;
  letter-spacing:7px;
  font-size:12px;
  white-space:nowrap;
}

/* BODY */

.cc-body{
  display:grid;
  grid-template-columns:72px 285px minmax(750px,1fr) 62px;
  gap:8px;
  min-height:775px;
}

/* LEFT RAIL */

.cc-rail{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.cc-rail-block{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#080808;
  font-weight:900;
  font-size:9px;
  line-height:2.7;
}

.rail-purple{
  min-height:115px;
  background:var(--cc-purple);
}

.rail-orange{
  min-height:76px;
  background:var(--cc-orange);
}

.rail-blue{
  background:#4c5dbe;
}

.rail-grow{
  flex:1;
}

.rail-sys{
  min-height:95px;
}

.cc-rail-tail{
  min-height:125px;
  background:var(--cc-purple);
  border-radius:0 0 0 32px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding-right:8px;
}

.cc-rail-tail div{
  width:18px;
  height:78px;
  border-radius:12px;
  background:var(--cc-orange);
}

/* MENU */

.cc-menu{
  padding:2px 0;
  display:flex;
  flex-direction:column;
  gap:7px;
}

.cc-menu button{
  height:67px;
  flex:none;
  border:0;
  border-radius:12px;
  display:grid;
  grid-template-columns:45px 1fr 48px;
  gap:4px;
  align-items:center;
  padding:0 10px;
  color:#f7f5f2;
  font-weight:900;
  cursor:pointer;
  transition:.13s;
}

.cc-menu button:hover{
  filter:brightness(1.18);
  transform:translateX(4px);
  box-shadow:0 0 16px rgba(165,87,199,.25);
}

.cc-icon{
  font-size:30px;
}

.cc-label{
  text-align:left;
  font-size:13px;
  white-space:nowrap;
}

.cc-menu small{
  background:#050507;
  padding:8px 4px;
  border-radius:7px;
  color:#ddd;
  font-size:8px;
}

.cc-menu-system{
  background:linear-gradient(90deg,#ee7110,#dd8a08);
}

.cc-menu-storage{
  background:linear-gradient(90deg,#8a3da5,#663098);
}

.cc-menu-docker{
  background:linear-gradient(90deg,#5357c7,#343fa6);
}

.cc-menu-pihole{
  background:linear-gradient(90deg,#b93670,#92265d);
}

.cc-menu-media{
  background:linear-gradient(90deg,#cf4926,#a32e1d);
}

.cc-menu-files{
  background:linear-gradient(90deg,#b93670,#92265d);
}

.cc-menu-network{
  background:linear-gradient(90deg,#5158c3,#35419f);
}

.cc-menu-logs{
  background:linear-gradient(90deg,#863ca2,#66258a);
}

.cc-menu-prefs{
  background:linear-gradient(90deg,#4856b3,#293988);
}

/* DASHBOARD */

.cc-dashboard{
  min-width:0;
}

.cc-panel{
  background:#010102;
  border:1px solid var(--cc-border);
  border-radius:13px;
  padding:12px;
  overflow:hidden;
}

.cc-panel h2{
  color:var(--cc-yellow);
  font-size:15px;
  margin:0;
  padding-bottom:10px;
  border-bottom:1px solid #51300c;
}

.cc-top-grid{
  display:grid;
  grid-template-columns:minmax(400px,.82fr) minmax(600px,1.35fr);
  gap:8px;
}

.cc-overview,
.cc-metrics{
  min-height:490px;
}

/* OVERVIEW */

.cc-overview-body{
  display:grid;
  grid-template-columns:minmax(235px,1fr) 170px;
  gap:8px;
}

.cc-ship-side{
  padding-top:14px;
}

.cc-interface{
  color:#3f96ef;
  font-size:12px;
  line-height:1.5;
}

.cc-ship-wrap{
  position:relative;
  height:275px;
  overflow:hidden;
}

.cc-enterprise{
  width:100%;
  height:100%;
}

.cc-enterprise ellipse,
.cc-enterprise path,
.cc-enterprise circle{
  fill:none;
  stroke-width:2;
}

.s-blue{
  stroke:#2678d5;
}

.s-purple{
  stroke:#7856c8;
}

.s-orange{
  stroke:#e98408;
}

.cc-ship-scanner{
  position:absolute;
  left:10%;
  right:10%;
  height:2px;
  top:0;
  background:linear-gradient(90deg,transparent,#2f86eb,transparent);
  box-shadow:0 0 14px #2f86eb;
  animation:shipscan 3.2s linear infinite;
}

@keyframes shipscan{
  to{top:100%;}
}

.cc-ship-name{
  text-align:center;
  color:#9946bb;
  font-size:23px;
  font-weight:900;
}

.cc-ship-status{
  text-align:center;
  color:#c2a183;
  margin-top:8px;
  font-size:11px;
}

.cc-overview-stats{
  border-left:1px solid #74450c;
  padding-left:13px;
}

.cc-stat{
  padding:20px 0;
  border-bottom:1px solid #4b2d0c;
}

.cc-stat:last-child{
  border-bottom:0;
}

.cc-stat label{
  display:block;
  color:#e89a17;
  font-size:10px;
  font-weight:900;
}

.cc-stat strong{
  display:block;
  margin:12px 0;
  color:#a451c5;
  font-size:25px;
}

.cc-stat small{
  font-size:8px;
  color:#b59c86;
}

.cc-green{
  color:var(--cc-green)!important;
}

.cc-red{
  color:#ff473d!important;
}

.cc-integrity{
  display:flex;
  gap:4px;
}

.cc-integrity i{
  width:16px;
  height:8px;
  background:#9b4ebe;
  animation:pulseled 1.2s infinite alternate;
}

/* METRICS */

.cc-metric{
  min-height:109px;
  border-bottom:1px solid #51300c;
  display:grid;
  grid-template-columns:40% 53% 7%;
  align-items:center;
}

.cc-metric:last-child{
  border-bottom:0;
}

.cc-metric-info label{
  display:block;
  font-size:11px;
  font-weight:900;
}

.cc-metric-info strong{
  display:inline-block;
  margin:9px 12px 5px 0;
  font-size:27px;
  color:#c6b8a8;
}

.cc-leds{
  display:inline-flex;
  gap:3px;
}

.cc-leds i{
  width:17px;
  height:8px;
  background:currentColor;
}

.cc-chart{
  height:68px;
  border:1px solid rgba(120,74,12,.22);
  background:
    linear-gradient(rgba(120,74,12,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,74,12,.11) 1px,transparent 1px);
  background-size:17px 17px;
}

.cc-chart svg{
  width:100%;
  height:100%;
}

.cc-chart polyline{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}

.cc-scale{
  height:67px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-end;
  font-size:8px;
  color:#c0a992;
}

.metric-cpu,
.metric-disk{
  color:#ef8e09;
}

.metric-memory{
  color:#a94ccb;
}

.metric-network{
  color:#2587e8;
}

/* LOWER */

.cc-lower-grid{
  display:grid;
  grid-template-columns:1fr 1.25fr 1fr 1fr;
  gap:8px;
  margin-top:8px;
  min-height:265px;
}

.cc-resource-bars{
  height:205px;
  display:flex;
  justify-content:space-around;
  align-items:flex-end;
  padding-top:15px;
}

.cc-resource-bars>div{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
}

.cc-resource-bars span{
  width:30px;
  min-height:25px;
  background:
    repeating-linear-gradient(
      to top,
      #3384ec 0 6px,
      transparent 6px 10px
    );
}

.cc-resource-bars .bar-cpu{
  height:42%;
}

.cc-resource-bars .bar-ram{
  height:72%;
  background:
    repeating-linear-gradient(
      to top,
      #9d4fc1 0 6px,
      transparent 6px 10px
    );
}

.cc-resource-bars .bar-net{
  height:65%;
  background:
    repeating-linear-gradient(
      to top,
      #50c75b 0 6px,
      transparent 6px 10px
    );
}

.cc-resource-bars .bar-disk{
  height:52%;
  background:
    repeating-linear-gradient(
      to top,
      #ec9209 0 6px,
      transparent 6px 10px
    );
}

.cc-resource-bars label{
  margin-top:8px;
  font-size:9px;
  color:#479ff0;
}

.cc-resource-bars strong{
  margin-top:5px;
  color:#4ad458;
}

/* STORAGE */

.cc-storage-body{
  height:205px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
}

.cc-storage-ring{
  width:135px;
  height:135px;
  border-radius:50%;
  background:
    conic-gradient(
      #286dd3 0 45%,
      #e78b08 45% 82%,
      #9c4fc0 82% 100%
    );
  display:flex;
  align-items:center;
  justify-content:center;
}

.cc-storage-ring>div{
  width:82px;
  height:82px;
  background:#020203;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.cc-storage-ring strong{
  color:#d8c1a8;
  font-size:17px;
}

.cc-storage-ring small{
  font-size:8px;
  margin-top:5px;
}

.cc-volume-list{
  font-size:9px;
  line-height:2.2;
}

.cc-volume-list p{
  display:flex;
  gap:7px;
}

.cc-volume-list strong{
  margin-left:auto;
}

.cc-volume-list .v1{
  color:#2f8bea;
}

.cc-volume-list .v2{
  color:#ed9009;
}

.cc-volume-list .v3{
  color:#9d4fc0;
}

/* DOCKER */

.cc-docker-body{
  min-height:205px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.cc-docker-ring{
  width:120px;
  height:120px;
  border-radius:50%;
  background:
    conic-gradient(
      #4ac858 0 78%,
      #e68a09 78% 100%
    );
  display:flex;
  align-items:center;
  justify-content:center;
}

.cc-docker-ring>div{
  width:76px;
  height:76px;
  background:#020203;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.cc-docker-ring strong{
  font-size:26px;
}

.cc-docker-ring small{
  font-size:8px;
}

.cc-docker-lines{
  font-size:9px;
  min-width:100px;
}

.cc-docker-lines p{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

/* PIHOLE */

.cc-pihole-active{
  color:var(--cc-green);
  font-weight:900;
  margin:16px 0;
}

.cc-pihole p{
  border-bottom:1px solid #3e290c;
  padding-bottom:7px;
  display:flex;
  justify-content:space-between;
  font-size:9px;
}

.cc-pihole p strong{
  color:#3595ef;
}

.cc-pihole-chart{
  height:55px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(51,155,70,.18);
}

.cc-pihole-chart span{
  position:absolute;
  left:-10%;
  top:50%;
  width:120%;
  height:2px;
  background:#47d453;
  box-shadow:
    18px -16px #47d453,
    34px 13px #47d453,
    55px -20px #47d453,
    78px 11px #47d453,
    105px -17px #47d453,
    130px 15px #47d453,
    160px -10px #47d453,
    190px 18px #47d453;
  animation:piholewave 1.4s infinite alternate;
}

@keyframes piholewave{
  to{transform:translateY(12px);}
}

/* RIGHT RAIL */

.cc-right-rail{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.rr{
  border-radius:0 8px 8px 0;
}

.rr-purple{
  background:#9e57c1;
  min-height:112px;
}

.rr-orange{
  background:#ef8b09;
  min-height:74px;
}

.rr-blue{
  background:#4d5ec3;
}

.rr-grow{
  flex:1;
}

/* FOOTER */

.cc-footer{
  height:58px;
  margin-left:72px;
  margin-right:62px;
  margin-top:8px;
  border:1px solid #79470b;
  border-radius:0 0 12px 12px;
  display:grid;
  grid-template-columns:1.25fr 1fr 1.55fr 1.2fr .8fr;
  gap:7px;
  align-items:center;
  color:#a154c0;
  text-align:center;
  font-size:10px;
}

.cc-session{
  height:39px;
  background:#ed8c09;
  color:#080808;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.cc-clearance{
  height:39px;
  background:#87389d;
  color:#080808;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.cc-online{
  height:39px;
  background:#4158bb;
  color:#080808;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

@keyframes pulseled{
  to{opacity:.25;}
}

@media(max-width:1350px){

  .cc-body{
    grid-template-columns:60px 245px minmax(680px,1fr) 50px;
  }

  .cc-menu button{
    grid-template-columns:38px 1fr 42px;
    height:62px;
  }

  .cc-label{
    font-size:11px;
  }

  .cc-main-title{
    font-size:23px;
  }

  .cc-authorized{
    width:300px;
  }

}


/* =========================================================
   PERSONNEL / CREW AUTHORIZATION
========================================================= */

.cc-menu-personnel{
  background:linear-gradient(
    90deg,
    #9b4cbd,
    #d8820a
  );
}

.personnel-panel{
  position:absolute;
  inset:0;
  z-index:25;
  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(60,40,100,.15),
      transparent 35%
    ),
    #010102;

  border:1px solid #87500d;
  border-radius:13px;
  padding:18px;
  overflow:auto;
}

.cc-dashboard{
  position:relative;
}

.personnel-header{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:2px solid #7f4a0b;
  margin-bottom:16px;
}

.personnel-header small{
  color:#a85bc7;
  letter-spacing:4px;
  font-size:10px;
}

.personnel-header h1{
  color:#f09a12;
  margin:5px 0 12px;
  font-size:26px;
}

.personnel-header button,
.personnel-action,
.permission-footer button{
  border:0;
  border-radius:18px;
  background:#9452b7;
  color:#080808;
  padding:11px 18px;
  font-weight:900;
  cursor:pointer;
}

.personnel-header button:hover,
.personnel-action:hover,
.permission-footer button:hover{
  filter:brightness(1.2);
}

.personnel-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.personnel-card{
  border:1px solid #82500d;
  border-radius:14px;
  padding:14px;
  background:#020203;
}

.personnel-card h2{
  color:#ee9a15;
  margin:0 0 16px;
  padding-bottom:9px;
  border-bottom:1px solid #4b300d;
  font-size:15px;
}

.personnel-list{
  grid-row:span 2;
}

.crew-entry{
  min-height:72px;
  display:grid;
  grid-template-columns:48px 1fr 70px;
  align-items:center;
  gap:10px;
  border:1px solid #4f330e;
  border-radius:11px;
  padding:8px;
  margin-bottom:8px;
}

.crew-entry.selected{
  border-color:#ed8e0c;
  box-shadow:0 0 12px rgba(240,140,10,.18);
}

.crew-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#9d55c0;
  color:#080808;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:900;
}

.crew-entry strong{
  display:block;
  color:#efa01a;
}

.crew-entry span{
  color:#8b76b7;
  font-size:9px;
}

.crew-entry small{
  color:#43d85a;
  text-align:right;
}

.personnel-action{
  width:100%;
  margin-top:10px;
  background:#e88b0b;
}

.personnel-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.personnel-form label{
  color:#e79b16;
  font-size:10px;
  display:block;
}

.personnel-form input,
.personnel-form select{
  width:100%;
  height:42px;
  margin-top:7px;
  border:1px solid #67440f;
  border-radius:18px;
  background:#070708;
  color:#ddd;
  padding:0 13px;
  outline:none;
}

.personnel-form input:focus,
.personnel-form select:focus{
  border-color:#ec910d;
  box-shadow:0 0 12px rgba(235,145,15,.2);
}

.permissions-card{
  grid-column:2;
}

.permission-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.permission-grid label{
  min-height:39px;
  border:1px solid #47300d;
  border-radius:8px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px;
  color:#a8a8a8;
  font-size:10px;
}

.permission-grid input{
  accent-color:#9d54c0;
}

.admin-permission{
  grid-column:1 / -1;
  color:#ed9410!important;
  border-color:#7d4b0e!important;
}

.permission-footer{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.permission-footer button{
  font-size:9px;
}

.permission-footer .save-personnel{
  margin-left:auto;
  background:#e98d0c;
}

#personnelStatus{
  margin-top:14px;
  color:#4bd65a;
  font-size:9px;
  letter-spacing:2px;
}



/* =========================================================
   COMPUTER CORE - FULL BROWSER SCREEN
========================================================= */

html,
body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

.cc-screen{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  overflow:hidden !important;
  background:#000 !important;
}

.cc-shell{
  position:absolute;
  left:0;
  top:0;

  /*
    Vaste LCARS ontwerpresolutie.
    JavaScript schaalt deze automatisch naar het browservenster.
  */
  width:1536px !important;
  height:1024px !important;

  min-width:0 !important;
  min-height:0 !important;

  transform-origin:top left;
  overflow:hidden;
}


/* Zorg dat de onderdelen netjes binnen de vaste canvas passen */

.cc-body{
  height:795px !important;
  min-height:0 !important;
}

.cc-overview,
.cc-metrics{
  min-height:0 !important;
  height:500px;
}

.cc-lower-grid{
  height:267px;
  min-height:0 !important;
}

.cc-footer{
  height:54px;
  margin-top:7px;
}


/* Geen scrollbalken in Computer Core */

.computer-core-screen.cc-screen{
  scrollbar-width:none;
}

.computer-core-screen.cc-screen::-webkit-scrollbar{
  display:none;
}



/* =========================================================
   LIVE PERSONNEL DATABASE
========================================================= */

.crew-entry{
  cursor:pointer;
}

.crew-entry:hover{
  border-color:#9556bd;
  background:#070408;
}

.crew-entry.protected{
  border-color:#d8880b;
}

.crew-entry .crew-actions{
  grid-column:1 / -1;
  display:flex;
  justify-content:flex-end;
  gap:7px;
  margin-top:4px;
}

.crew-delete{
  border:0;
  border-radius:12px;
  padding:6px 12px;
  background:#a53131;
  color:#fff;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}

.crew-protected{
  color:#e8940e;
  font-size:9px;
  letter-spacing:1px;
}

#crewPassword{
  letter-spacing:2px;
}